You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

289 lines
9.8 KiB

{% extends "base.html" %}
{% load compress humanize staticfiles %}
{% block logo %}
<img
id="logo"
height="50"
width="200"
src="{% static 'img/logo-full.png'%}"
srcset="{% static 'img/logo.png'%} 1x, {% static 'img/[email protected]'%} 2x"
alt="healthchecks.io">
{% endblock %}
{% block containers %}
<div class="index-bleed">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1 id="pitch">Cron Monitoring. Get Notified When Your Cron Jobs Fail.</h1>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<p id="pitch-text">Make a HTTP GET request to this address from your cron job, daemon, script or long running task.
<strong>When this address is not requested for a set time period, you will get alerted.</strong> Below are snippets that are ready to be copy/pasted into your own scripts.</p>
</div>
<div class="col-sm-6 col-sm-pull-6">
<h2 id="pitch-subtitle">Here's an unique ping address for you:</h2>
<div id="pitch-url">
<input
id="pitch-url-input"
class="form-control"
type="text"
value="{{ ping_url }}"
readonly />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#crontab" data-toggle="tab">Crontab</a>
</li>
<li>
<a href="#bash" data-toggle="tab">Bash</a>
</li>
<li>
<a href="#python" data-toggle="tab">Python</a>
</li>
<li class="hidden-xs">
<a href="#node" data-toggle="tab">Node.js</a>
</li>
<li class="hidden-xs">
<a href="#php" data-toggle="tab">PHP</a>
</li>
<li class="hidden-xs">
<a href="#browser" data-toggle="tab">Browser</a>
</li>
<li class="hidden-xs">
<a href="#email" data-toggle="tab">Email</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="crontab">
{% include "front/snippets/crontab.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="bash">
{% include "front/snippets/bash.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="python">
{% include "front/snippets/python.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="node">
{% include "front/snippets/node.html" %}
</div>
<div role="tabpanel" class="tab-pane" id="php">
{% include "front/snippets/php.html" %}
</div>
<div class="tab-pane" id="browser">
{% include "front/snippets/browser.html" %}
</div>
<div class="tab-pane" id="email">
<div class="instructions">
As an alternative to HTTP/HTTPS requests,
you can "ping" this check by sending an
email message to
<div class="email-address">
<code>{{ check.email }}</code>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="get-started-bleed">
<div class="container">
<div class="row">
<div id="get-started" class="col-sm-6 col-sm-offset-3">
<h2>E-mail Address to Receive Alerts:</h2>
<form action="{% url 'hc-login' %}" method="post">
{% csrf_token %}
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-addon">@</div>
<input
type="email"
class="form-control"
id="id_email"
name="email"
autocomplete="email"
placeholder="Email">
</div>
</div>
<div class="clearfix">
<button type="submit" class="btn btn-lg btn-primary pull-right">
Get Started
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2 class="tour-title">A quick peek of what's inside:</h2>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/my_checks.png' %}" alt="My Checks page" />
</div>
<div class="col-sm-4">
<p>
A list of your checks, one for each Cron job, daemon or
periodically running task you want to monitor.
</p>
<p>
Give names to your checks to easily recognize them
later. Adjust Period and Grace time to match periodicity
and duration of your tasks.
</p>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/period_grace.png' %}" alt="Period/Grace Time dialog" />
</div>
<div class="col-sm-4">
Each check has configurable <strong>Period</strong> and <strong>Grace Time</strong> parameters.
Depending on these parameters and time since the last ping, the check is in one of the
following states:
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-question-sign new"></span>
</td>
<td>
New.
A check that has been created, but has not received any pings yet.
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-ok-sign up"></span>
</td>
<td>
Up.
Time since last ping has not exceeded <strong>Period</strong>.
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-exclamation-sign grace"></span>
</td>
<td>
Late.
Time since last ping has exceeded <strong>Period</strong>,
but has not yet exceeded <strong>Period</strong> + <strong>Grace</strong>.
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-exclamation-sign down"></span>
</td>
<td>
Down.
Time since last ping has exceeded <strong>Period</strong> + <strong>Grace</strong>.
When check goes from "Late" to "Down", HealthChecks
sends you a notification.
</td>
</tr>
</table>
</div>
</div>
<div class="row tour-section">
<div class="col-sm-8">
<img
class="img-responsive"
src="{% static 'img/channels.png' %}" alt="Channels page" />
</div>
<div class="col-sm-4">
<p>
You can specify additional email addresses, webhooks
and <a href="https://www.pagerduty.com/">PagerDuty</a>
accounts to send notifications to.
</p>
</div>
</div>
<div class="row">
<div class="footer-jumbo-bleed">
<div class="col-sm-12">
<div class="jumbotron">
<div class="row">
<div class="col-sm-7">
<p>healthchecks.io is a <strong>free</strong> and
<a href="https://github.com/healthchecks/healthchecks">open source</a> service.
Setting up monitoring for your cron jobs only takes minutes.
Start sleeping better at nights!</p>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-4">
<form action="{% url 'hc-login' %}" method="post">
{% csrf_token %}
<div class="form-group">
<div class="input-group input-group-lg">
<div class="input-group-addon">@</div>
<input
type="email"
class="form-control"
id="id_email"
name="email"
autocomplete="email"
placeholder="Email">
</div>
</div>
<div class="clearfix">
<button type="submit" class="btn btn-lg btn-primary pull-right">
Get Started
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/welcome.js' %}"></script>
{% endcompress %}
{% endblock %}