harmacist/healthchecks
1
0
Fork 0
forked from GithubBackups/healthchecks
Code Issues Pull Requests Projects Releases Wiki Activity

More content on welcome page, more alternatives in docs. Rename "Grace Period" to "Grace Time"

Browse Source
This commit is contained in:
Pēteris Caune 2015-07-27 23:25:06 +03:00
parent 3b43957758
commit 911b28026a
15 changed files with 185 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
hc/front/management/commands/pygmentize.py
View File

@ -19,3 +19,5 @@ class Command(BaseCommand):
_process("browser.txt", "browser.html", lexers.JavascriptLexer())
_process("crontab.txt", "crontab.html", lexers.BashLexer())
_process("python.txt", "python.html", lexers.PythonLexer())
_process("php.txt", "php.html", lexers.PhpLexer())
_process("node.txt", "node.html", lexers.JavascriptLexer())

26
static/css/style.css
View File

@ -33,10 +33,15 @@ body {
}
.index-bleed {
background: #e5ece5;
background: #FFF;
padding-bottom: 2em;
}
.get-started-bleed {
background: #e5ece5;
padding-bottom: 3em;
}
#pitch {
text-align: center;
padding: 72px 0;
@ -65,18 +70,10 @@ body {
border-color: #dddddd;
}
#welcome-status, #get-started {
#get-started {
margin-top: 4em;
}
#welcome-status th {
border-top: 0;
}
.welcome-browser-controls {
text-align: right;
}
.glyphicon.up, .glyphicon.new, .glyphicon.grace, .glyphicon.down {
font-size: 22px;
}
@ -107,6 +104,15 @@ body {
margin: 0;
}
.tour-title {
margin: 50px 0;
}
.tour-section {
margin-bottom: 50px;
}
/* Checks */
table.table tr > th.th-name {

BIN
static/img/my_checks.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
static/img/period_grace.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

49
static/js/index.js
View File

@ -1,49 +0,0 @@
$(function () {
$('[data-toggle="tooltip"]').tooltip();
var code = $("#check-code").text();
var url = $("#pitch-url").text();
url = url.replace("http://", "//");
var lastPing = null;
var lastPingHuman = null;
$("#run-it").click(function() {
$.get(url);
});
function checkLastPing() {
$.getJSON("/status/" + code + "/", function(data) {
if (data.last_ping != lastPing) {
lastPing = data.last_ping;
$("#timer").data("timer", data.secs_to_alert);
}
var lph = data.last_ping_human;
if (lph && lph.indexOf("seconds ago") > 0)
data.last_ping_human = "seconds ago";
if (data.last_ping_human != lastPingHuman) {
lastPingHuman = data.last_ping_human;
$("#last-ping").text(lastPingHuman);
}
});
}
function updateTimer() {
var timer = parseInt($("#timer").data("timer"));
if (timer == 0)
return;
var s = timer % 60;
var m = parseInt(timer / 60) % 60;
var h = parseInt(timer / 3600);
$("#timer").text(h + "h " + m + "m " + s + "s");
$("#timer").data("timer", timer - 1);
}
setInterval(checkLastPing, 3000);
setInterval(updateTimer, 1000);
});

2
templates/base.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>{% block title %}healthchecks.io - Get Notified When Your Cron Jobs Fail{% endblock %}</title>
<meta name="description" content="Monitor and Get Notified When Your Cron Jobs Fail. Free alternative to Cronitor and Dead Man's Snitch.">
<meta name="keywords" content="monitor cron jobs daemon background worker service cronjob monitoring crontab alert notify cronitor deadmanssnitch">
<meta name="keywords" content="monitor cron jobs daemon background worker service cronjob monitoring crontab alert notify cronitor deadmanssnitch webhook">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>

62
templates/front/about.html
View File

@ -33,12 +33,64 @@
</p>
<h3>Alternative Services</h3>
<ul>
<li><a href="https://cronitor.io/">Cronitor.io</a></li>
<li><a href="https://deadmanssnitch.com/">Dead Man's Snitch</a></li>
<li><a href="https://github.com/quantopian/coal-mine">Coal Mine</a></li>
</ul>
<table class="table">
<tr>
<td>
<a href="https://cronitor.io/">Cronitor.io</a>
</td>
<td>
<p>One monitor is free.</p>
<p>50 monitors is $24.95/mo.</p>
</td>
</tr>
<tr>
<td>
<a href="https://cronitor.io/">Cronitor.io</a>
</td>
<td>
<p>One snitch is free.</p>
<p>3 snitches is $5/mo.</p>
<p>100 snitches is $19/mo.</p>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/quantopian/coal-mine">Coal Mine</a>
</td>
<td>
<p>Open Source.</p>
<p>No hosted service. No web UI, just API.</p>
</td>
</tr>
<tr>
<td>
<a href="http://www.pushmon.com/">PushMon</a>
</td>
<td>
<p>Free during public beta.</p>
</td>
</tr>
<tr>
<td>
<a href="https://steward.io">steward.io</a>
</td>
<td>
<p>15 jobs is free.</p>
<p>75 jobs is $7/mo.</p>
</td>
</tr>
<tr>
<td>
<a href="https://www.cronalarm.com/">CronAlarm</a>
</td>
<td>
<p>10 jobs is $5/mo.</p>
<p>100 jobs is $20/mo.</p>
</td>
</tr>
</table>
</div>
</div>
{% endblock %}

4
templates/front/my_checks.html
View File

@ -169,7 +169,7 @@
class="update-timeout-label"
data-toggle="tooltip"
title="When check is late, how much time to wait until alert is sent">
Grace Period
Grace Time
</span>
<span
id="grace-slider-value"
@ -186,7 +186,7 @@
Expected time between pings.
</p>
<p>
<span>Grace Period</span>
<span>Grace Time</span>
When a check is late, how much time to wait until alert is sent.
</p>
</div>

2
templates/front/snippets/crontab.html
View File

@ -1,3 +1,3 @@
<div class="highlight"><pre><span class="c"># m h dom mon dow command</span>
<div class="highlight"><pre><span class="c"># m h dom mon dow command</span>
<span class="m">8</span> <span class="m">6</span> * * * /home/user/tasks/backup_all.sh <span class="o">&amp;&amp;</span> curl {{ ping_url }}
</pre></div>

2
templates/front/snippets/crontab.txt
View File

@ -1,2 +1,2 @@
# m h dom mon dow command
# m h dom mon dow command
8 6 * * * /home/user/tasks/backup_all.sh && curl PING_URL

3
templates/front/snippets/node.html Normal file
View File

@ -0,0 +1,3 @@
<div class="highlight"><pre><span class="kd">var</span> <span class="nx">http</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;http&#39;</span><span class="p">);</span>
<span class="nx">http</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">&quot;{{ ping_url }}&quot;</span><span class="p">);</span>
</pre></div>

2
templates/front/snippets/node.txt Normal file
View File

@ -0,0 +1,2 @@
var http = require('http');
http.get("PING_URL");

2
templates/front/snippets/php.html Normal file
View File

@ -0,0 +1,2 @@
<div class="highlight"><pre><span class="x">file_get_contents(&#39;{{ ping_url }}&#39;);</span>
</pre></div>

1
templates/front/snippets/php.txt Normal file
View File

@ -0,0 +1 @@
file_get_contents('PING_URL');

131
templates/front/welcome.html
View File

@ -50,11 +50,14 @@
<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 class="welcome-browser-controls">
<button id="run-it" class="btn btn-default">Run It!</button>
</div>
</div>
</div>
</div>
@ -62,38 +65,10 @@
</div>
</div>
<div class="get-started-bleed">
<div class="container">
<div class="row">
<div id="welcome-status" class="col-sm-6">
<h2>Status
<small id="check-code">{{ check.code }}</small>
</h2>
<table class="table">
<tr>
<th>Last ping</th>
<th>Period</th>
<th>Alert in</th>
</tr>
<tr>
<td id="last-ping">
{% if check.last_ping %}
{{ check.last_ping|naturaltime }}
{% else %}
Never
{% endif %}
</td>
<td>
1 day
(log in to change)
</td>
<td id="timer" data-timer="{{ timer}}">
{{ timer_formatted }}
</td>
</tr>
</table>
</div>
<div id="get-started" class="col-sm-6">
<div id="get-started" class="col-sm-6 col-sm-offset-3">
<h3>E-mail Address to Receive Alerts:</h3>
<form action="{% url 'hc-login' %}" method="post">
{% csrf_token %}
@ -121,12 +96,100 @@
</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 an email alert.
</td>
</tr>
</table>
</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/index.js' %}"></script>
{% endcompress %}
{% endblock %}