Hook up buttons in the log page.

hc/front/views.py

@@ -208,6 +208,9 @@ def update_name(request, code):
         check.tags = form.cleaned_data["tags"]
         check.save()
 
+    if request.META.get("HTTP_REFERER", "").endswith("/log/"):
+        return redirect("hc-log", code)
+
     return redirect("hc-checks")
 
 
@@ -241,6 +244,10 @@ def update_timeout(request, code):
         check.alert_after = check.get_alert_after()
 
     check.save()
+
+    if request.META.get("HTTP_REFERER", "").endswith("/log/"):
+        return redirect("hc-log", code)
+
     return redirect("hc-checks")
 
 
@@ -298,6 +305,9 @@ def pause(request, code):
     check.status = "paused"
     check.save()
 
+    if request.META.get("HTTP_REFERER", "").endswith("/log/"):
+        return redirect("hc-log", code)
+
     return redirect("hc-checks")
 
 
@@ -340,6 +350,7 @@ def log(request, code):
     channels = list(channels.order_by("created"))
 
     ctx = {
+        "page": "log",
         "check": check,
         "ping_endpoint": settings.PING_ENDPOINT,
         "channels": channels,

static/css/base.css

@@ -52,7 +52,7 @@ body {
     font-size: small;
 }
 
-.page-checks .container-fluid {
+.page-checks .container-fluid, .page-log .container-fluid {
     /* Fluid below 1320px, but max width capped to 1320px ... */
     max-width: 1320px;
 }

static/css/log.css

@@ -23,6 +23,10 @@
     border-radius: 3px;
 }
 
+.details-block .copy-btn {
+    width: 90px;
+}
+
 .details-block code {
     display: block;
     padding: 8px;
@@ -30,6 +34,9 @@
     background: #f5f5f5;
 }
 
+.details-block form {
+    display: inline;
+}
 
 #details-status td {
     padding: 8px;
@@ -73,6 +80,10 @@
     content: " ";
 }
 
+#log-container {
+    overflow: hidden;
+}
+
 #log {
     visibility: hidden;
     font-size: 13px;

static/js/checks.js

@@ -13,166 +13,6 @@ $(function () {
         return false;
     });
 
-    var MINUTE = {name: "minute", nsecs: 60};
-    var HOUR = {name: "hour", nsecs: MINUTE.nsecs * 60};
-    var DAY = {name: "day", nsecs: HOUR.nsecs * 24};
-    var WEEK = {name: "week", nsecs: DAY.nsecs * 7};
-    var UNITS = [WEEK, DAY, HOUR, MINUTE];
-
-    var secsToText = function(total) {
-        var remainingSeconds = Math.floor(total);
-        var result = "";
-        for (var i=0, unit; unit=UNITS[i]; i++) {
-            if (unit === WEEK && remainingSeconds % unit.nsecs != 0) {
-                // Say "8 days" instead of "1 week 1 day"
-                continue
-            }
-
-            var count = Math.floor(remainingSeconds / unit.nsecs);
-            remainingSeconds = remainingSeconds % unit.nsecs;
-
-            if (count == 1) {
-                result += "1 " + unit.name + " ";
-            }
-
-            if (count > 1) {
-                result += count + " " + unit.name + "s ";
-            }
-        }
-
-        return result;
-    }
-
-    var periodSlider = document.getElementById("period-slider");
-    noUiSlider.create(periodSlider, {
-        start: [20],
-        connect: "lower",
-        range: {
-            'min': [60, 60],
-            '33%': [3600, 3600],
-            '66%': [86400, 86400],
-            '83%': [604800, 604800],
-            'max': 2592000,
-        },
-        pips: {
-            mode: 'values',
-            values: [60, 1800, 3600, 43200, 86400, 604800, 2592000],
-            density: 4,
-            format: {
-                to: secsToText,
-                from: function() {}
-            }
-        }
-    });
-
-    periodSlider.noUiSlider.on("update", function(a, b, value) {
-        var rounded = Math.round(value);
-        $("#period-slider-value").text(secsToText(rounded));
-        $("#update-timeout-timeout").val(rounded);
-    });
-
-    var graceSlider = document.getElementById("grace-slider");
-    noUiSlider.create(graceSlider, {
-        start: [20],
-        connect: "lower",
-        range: {
-            'min': [60, 60],
-            '33%': [3600, 3600],
-            '66%': [86400, 86400],
-            '83%': [604800, 604800],
-            'max': 2592000,
-        },
-        pips: {
-            mode: 'values',
-            values: [60, 1800, 3600, 43200, 86400, 604800, 2592000],
-            density: 4,
-            format: {
-                to: secsToText,
-                from: function() {}
-            }
-        }
-    });
-
-    graceSlider.noUiSlider.on("update", function(a, b, value) {
-        var rounded = Math.round(value);
-        $("#grace-slider-value").text(secsToText(rounded));
-        $("#update-timeout-grace").val(rounded);
-    });
-
-    function showSimple() {
-        $("#update-timeout-form").show();
-        $("#update-cron-form").hide();
-    }
-
-    function showCron() {
-        $("#update-timeout-form").hide();
-        $("#update-cron-form").show();
-    }
-
-    var currentPreviewHash = "";
-    function updateCronPreview() {
-        var schedule = $("#schedule").val();
-        var tz = $("#tz").val();
-        var hash = schedule + tz;
-
-        // Don't try preview with empty values, or if values have not changed
-        if (!schedule || !tz || hash == currentPreviewHash)
-            return;
-
-        // OK, we're good
-        currentPreviewHash = hash;
-        $("#cron-preview-title").text("Updating...");
-
-        var token = $('input[name=csrfmiddlewaretoken]').val();
-        $.ajax({
-            url: "/checks/cron_preview/",
-            type: "post",
-            headers: {"X-CSRFToken": token},
-            data: {schedule: schedule, tz: tz},
-            success: function(data) {
-                if (hash != currentPreviewHash) {
-                    return;  // ignore stale results
-                }
-
-                $("#cron-preview" ).html(data);
-                var haveError = $("#invalid-arguments").size() > 0;
-                $("#update-cron-submit").prop("disabled", haveError);
-            }
-        });
-    }
-
-    $(".timeout-grace").click(function() {
-        var code = $(this).closest("tr.checks-row").attr("id");
-        var url = "/checks/" + code + "/timeout/";
-
-        $("#update-timeout-form").attr("action", url);
-        $("#update-cron-form").attr("action", url);
-
-        // Simple
-        periodSlider.noUiSlider.set(this.dataset.timeout);
-        graceSlider.noUiSlider.set(this.dataset.grace);
-
-        // Cron
-        currentPreviewHash = "";
-        $("#cron-preview").html("<p>Updating...</p>");
-        $("#schedule").val(this.dataset.schedule);
-        document.getElementById("tz").selectize.setValue(this.dataset.tz);
-        var minutes = parseInt(this.dataset.grace / 60);
-        $("#update-timeout-grace-cron").val(minutes);
-        updateCronPreview();
-
-        this.dataset.kind == "simple" ? showSimple() : showCron();
-        $('#update-timeout-modal').modal({"show":true, "backdrop":"static"});
-        return false;
-    });
-
-    // Wire up events for Timeout/Cron forms
-    $(".kind-simple").click(showSimple);
-    $(".kind-cron").click(showCron);
-
-    $("#schedule").on("keyup", updateCronPreview);
-    $("#tz").selectize({onChange: updateCronPreview});
-
     $(".check-menu-remove").click(function() {
         var code = $(this).closest("tr.checks-row").attr("id");
         var url = "/checks/" + code + "/remove/";

static/js/log.js

@@ -1,4 +1,48 @@
 $(function () {
+    $("#edit-name").click(function() {
+        $('#update-name-modal').modal("show");
+        $("#update-name-input").focus();
+
+        return false;
+    });
+
+    $("#pause").click(function(e) {
+        $("#pause-form").submit();
+        return false;
+    });
+
+    $("#ping-now").click(function(e) {
+        var button = this;
+        $.get(this.dataset.url, function() {
+            button.textContent = "Success!";
+        });
+    });
+
+    $("#ping-now").mouseout(function(e) {
+        setTimeout(function() {
+            e.target.textContent = "Ping Now!";
+        }, 300);
+    });
+
+
+    // Copy to clipboard
+    var clipboard = new Clipboard('button.copy-btn');
+    $("button.copy-btn").mouseout(function(e) {
+        setTimeout(function() {
+            e.target.textContent = e.target.dataset.label;
+        }, 300);
+    });
+
+    clipboard.on('success', function(e) {
+        e.trigger.textContent = "Copied!";
+        e.clearSelection();
+    });
+
+    clipboard.on('error', function(e) {
+        var text = e.trigger.getAttribute("data-clipboard-text");
+        prompt("Press Ctrl+C to select:", text)
+    });
+
     $("#log tr.ok").on("click", function() {
         $("#ping-details-body").text("Updating...");
         $('#ping-details-modal').modal("show");

static/js/update-timeout-modal.js

@@ -0,0 +1,192 @@
+$(function () {
+    $(".timeout-grace").click(function() {
+        var code = $(this).closest("tr.checks-row").attr("id");
+        if (!code) {
+            code = this.dataset.code;
+        }
+
+        var url = "/checks/" + code + "/timeout/";
+
+        $("#update-timeout-form").attr("action", url);
+        $("#update-cron-form").attr("action", url);
+
+        // Simple
+        periodSlider.noUiSlider.set(this.dataset.timeout);
+        graceSlider.noUiSlider.set(this.dataset.grace);
+
+        // Cron
+        currentPreviewHash = "";
+        $("#cron-preview").html("<p>Updating...</p>");
+        $("#schedule").val(this.dataset.schedule);
+        document.getElementById("tz").selectize.setValue(this.dataset.tz);
+        var minutes = parseInt(this.dataset.grace / 60);
+        $("#update-timeout-grace-cron").val(minutes);
+        updateCronPreview();
+
+        this.dataset.kind == "simple" ? showSimple() : showCron();
+        $('#update-timeout-modal').modal({"show":true, "backdrop":"static"});
+        return false;
+    });
+
+    function init(code, kind, timeout, grace, schedule, tz) {
+        var url = "/checks/" + code + "/timeout/";
+
+        $("#update-timeout-form").attr("action", url);
+        $("#update-cron-form").attr("action", url);
+
+        // Simple
+        periodSlider.noUiSlider.set(timeout);
+        graceSlider.noUiSlider.set(grace);
+
+        // Cron
+        currentPreviewHash = "";
+        $("#cron-preview").html("<p>Updating...</p>");
+        $("#schedule").val(schedule);
+        document.getElementById("tz").selectize.setValue(tz);
+        var minutes = parseInt(grace / 60);
+        $("#update-timeout-grace-cron").val(minutes);
+        updateCronPreview();
+
+        kind == "simple" ? showSimple() : showCron();
+        $('#update-timeout-modal').modal({"show":true, "backdrop":"static"});
+        return false;
+
+    }
+
+
+    var MINUTE = {name: "minute", nsecs: 60};
+    var HOUR = {name: "hour", nsecs: MINUTE.nsecs * 60};
+    var DAY = {name: "day", nsecs: HOUR.nsecs * 24};
+    var WEEK = {name: "week", nsecs: DAY.nsecs * 7};
+    var UNITS = [WEEK, DAY, HOUR, MINUTE];
+
+    var secsToText = function(total) {
+        var remainingSeconds = Math.floor(total);
+        var result = "";
+        for (var i=0, unit; unit=UNITS[i]; i++) {
+            if (unit === WEEK && remainingSeconds % unit.nsecs != 0) {
+                // Say "8 days" instead of "1 week 1 day"
+                continue
+            }
+
+            var count = Math.floor(remainingSeconds / unit.nsecs);
+            remainingSeconds = remainingSeconds % unit.nsecs;
+
+            if (count == 1) {
+                result += "1 " + unit.name + " ";
+            }
+
+            if (count > 1) {
+                result += count + " " + unit.name + "s ";
+            }
+        }
+
+        return result;
+    }
+
+    var periodSlider = document.getElementById("period-slider");
+    noUiSlider.create(periodSlider, {
+        start: [20],
+        connect: "lower",
+        range: {
+            'min': [60, 60],
+            '33%': [3600, 3600],
+            '66%': [86400, 86400],
+            '83%': [604800, 604800],
+            'max': 2592000,
+        },
+        pips: {
+            mode: 'values',
+            values: [60, 1800, 3600, 43200, 86400, 604800, 2592000],
+            density: 4,
+            format: {
+                to: secsToText,
+                from: function() {}
+            }
+        }
+    });
+
+    periodSlider.noUiSlider.on("update", function(a, b, value) {
+        var rounded = Math.round(value);
+        $("#period-slider-value").text(secsToText(rounded));
+        $("#update-timeout-timeout").val(rounded);
+    });
+
+    var graceSlider = document.getElementById("grace-slider");
+    noUiSlider.create(graceSlider, {
+        start: [20],
+        connect: "lower",
+        range: {
+            'min': [60, 60],
+            '33%': [3600, 3600],
+            '66%': [86400, 86400],
+            '83%': [604800, 604800],
+            'max': 2592000,
+        },
+        pips: {
+            mode: 'values',
+            values: [60, 1800, 3600, 43200, 86400, 604800, 2592000],
+            density: 4,
+            format: {
+                to: secsToText,
+                from: function() {}
+            }
+        }
+    });
+
+    graceSlider.noUiSlider.on("update", function(a, b, value) {
+        var rounded = Math.round(value);
+        $("#grace-slider-value").text(secsToText(rounded));
+        $("#update-timeout-grace").val(rounded);
+    });
+
+    function showSimple() {
+        $("#update-timeout-form").show();
+        $("#update-cron-form").hide();
+    }
+
+    function showCron() {
+        $("#update-timeout-form").hide();
+        $("#update-cron-form").show();
+    }
+
+    var currentPreviewHash = "";
+    function updateCronPreview() {
+        var schedule = $("#schedule").val();
+        var tz = $("#tz").val();
+        var hash = schedule + tz;
+
+        // Don't try preview with empty values, or if values have not changed
+        if (!schedule || !tz || hash == currentPreviewHash)
+            return;
+
+        // OK, we're good
+        currentPreviewHash = hash;
+        $("#cron-preview-title").text("Updating...");
+
+        var token = $('input[name=csrfmiddlewaretoken]').val();
+        $.ajax({
+            url: "/checks/cron_preview/",
+            type: "post",
+            headers: {"X-CSRFToken": token},
+            data: {schedule: schedule, tz: tz},
+            success: function(data) {
+                if (hash != currentPreviewHash) {
+                    return;  // ignore stale results
+                }
+
+                $("#cron-preview" ).html(data);
+                var haveError = $("#invalid-arguments").size() > 0;
+                $("#update-cron-submit").prop("disabled", haveError);
+            }
+        });
+    }
+
+    // Wire up events for Timeout/Cron forms
+    $(".kind-simple").click(showSimple);
+    $(".kind-cron").click(showCron);
+
+    $("#schedule").on("keyup", updateCronPreview);
+    $("#tz").selectize({onChange: updateCronPreview});
+
+});

templates/base.html

@@ -45,7 +45,7 @@
 </head>
 <body class="page-{{ page }}">
     <nav class="navbar navbar-default">
-        <div class="container{% if page == "checks" %}-fluid{% endif %}">
+        <div class="container{% if page == "checks" or page == "log" %}-fluid{% endif %}">
         <div class="navbar-header">
             <button
                 type="button"
@@ -154,13 +154,13 @@
     </nav>
 
     {% block containers %}
-    <div class="container{% if page == "checks" %}-fluid{% endif %}">
+    <div class="container{% if page == "checks" or page == "log" %}-fluid{% endif %}">
         {% block content %}{% endblock %}
     </div>
     {% endblock %}
 
     <footer class="footer">
-        <div class="container{% if page == "checks" %}-fluid{% endif %}">
+        <div class="container{% if page == "checks" or page == "log" %}-fluid{% endif %}">
             <ul>
                 <li>
                     Powered by Healthchecks open-source project

templates/front/log.html

@@ -10,7 +10,7 @@
     <div id="details-head" class="col-sm-12">
         <h1>
             {{ check.name_then_code }}
-            <button class="btn btn-sm btn-default">Edit</button>
+            <button id="edit-name" class="btn btn-sm btn-default">Edit</button>
         </h1>
         {% for tag in check.tags_list %}
             <span class="label label-tag">{{ tag }}</span>
@@ -19,15 +19,6 @@
 
 
     <div class="col-sm-6">
-        <div class="details-block">
-            <h2>Description
-                <small><a href="#">edit</a></small>
-            </h2>
-            <p>This is for monitoring our fancy backup script.</p>
-            <p>The script runs on a $5 VM and sometimes runs out of memory and crashes.
-            If this happens, contact Ed and ask him to restart it.</p>
-        </div>
-
         <div class="details-block">
             <h2>How To Ping</h2>
             <div>
@@ -37,27 +28,55 @@
                 <code>{{ check.email }}</code>
             </div>
             <div class="text-right">
-                <button class="btn btn-sm btn-default">Copy URL</button>
-                <button class="btn btn-sm btn-default">Copy Email</button>
-                <button class="btn btn-sm btn-default">Usage Examples</button>
+                <button
+                    data-label="Copy URL"
+                    data-clipboard-text="{{ check.url }}"
+                    class="btn btn-sm btn-default copy-btn">Copy URL</button>
+                <button
+                    data-label="Copy Email"
+                    data-clipboard-text="{{ check.email }}"
+                    class="btn btn-sm btn-default copy-btn">Copy Email</button>
+                <button
+                    data-toggle="modal"
+                    data-target="#show-usage-modal"
+                    class="btn btn-sm btn-default">Usage Examples</button>
             </div>
         </div>
 
         <div class="details-block">
             <h2>Current Status</h2>
             <table>
+                {% with check.get_status as status %}
                 <tr>
                     <td>
-                        <span class="status icon-{{ check.get_status }}"></span>
+                        <span class="status icon-{{ status }}"></span>
                     </td>
                     <td>
-                        This check is down. Last ping was {{ check.last_ping|naturaltime }}.
+                        {% if status == "down" %}
+                            This check is down. Last ping was {{ check.last_ping|naturaltime }}.
+                        {% elif status == "up" %}
+                            This check is up. Last ping was {{ check.last_ping|naturaltime }}.
+                        {% elif status == "grace" %}
+                            This check is late. Last ping was {{ check.last_ping|naturaltime }}.
+                        {% elif status == "paused" %}
+                            This check is paused.
+                        {% elif status == "new" %}
+                            This check has never received a ping.
+                        {% endif %}
                     </td>
                 </tr>
+                {% endwith %}
             </table>
             <div class="text-right">
-                <button class="btn btn-sm btn-default">Pause</button>
-                <button class="btn btn-sm btn-default">Ping Now!</button>
+                <form action="{% url 'hc-pause' check.code %}" method="post">
+                    {% csrf_token %}
+                    <input type="submit" class="btn btn-sm btn-default" value="Pause" />
+                </form>
+
+                <button
+                    id="ping-now"
+                    data-url="{{ check.url }}"
+                    class="btn btn-sm btn-default">Ping Now!</button>
             </div>
         </div>
 
@@ -84,7 +103,16 @@
                 </tr>
             </table>
             <div class="text-right">
-                <button class="btn btn-sm btn-default">Change Schedule</button>
+                <button
+                    id="edit-timeout"
+                    class="btn btn-sm btn-default timeout-grace"
+                    data-code="{{ check.code }}"
+                    data-kind="{{ check.kind }}"
+                    data-timeout="{{ check.timeout.total_seconds }}"
+                    data-grace="{{ check.grace.total_seconds }}"
+                    data-schedule="{{ check.schedule }}"
+                    data-tz="{{ check.tz }}">
+                    Change Schedule</button>
             </div>
         </div>
 
@@ -113,7 +141,11 @@
             <h2>Remove</h2>
             <p>Permanently remove this check from your account.</p>
             <div class="text-right">
-                <button id="details-remove-check" class="btn btn-sm btn-default">Remove This Check</button>
+                <button
+                    id="details-remove-check"
+                    data-toggle="modal"
+                    data-target="#remove-check-modal"
+                    class="btn btn-sm btn-default">Remove This Check</button>
             </div>
         </div>
 
@@ -139,7 +171,7 @@
         </div>
     </h2>
 
-    <div class="table-responsive">
+    <div id="log-container">
     <table class="table" id="log">
         {% for event in events %}
         {% if event.n %}
@@ -175,9 +207,6 @@
                         {% if event.ua %}
                         - {{ event.ua }}
                         {% endif %}
-                        {% if event.body %}
-                        -  {{ event.body|trunc }}
-                        {% endif %}
                     </span>
                 {% endif %}
                 </div>
@@ -250,18 +279,24 @@
             </div>
         </div>
     </div>
-    <form>
-        {% csrf_token %}
-    </form>
 </div>
 
+{% include "front/update_name_modal.html" %}
+{% include "front/update_timeout_modal.html" %}
+{% include "front/show_usage_modal.html" %}
+{% include "front/remove_check_modal.html" %}
+
 {% 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/clipboard.min.js' %}"></script>
+<script src="{% static 'js/selectize.min.js' %}"></script>
+<script src="{% static 'js/nouislider.min.js' %}"></script>
 <script src="{% static 'js/moment.min.js' %}"></script>
+<script src="{% static 'js/update-timeout-modal.js' %}"></script>
 <script src="{% static 'js/log.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/front/my_checks.html

@@ -45,308 +45,10 @@
     </div>
 </div>
 
-<div id="update-name-modal" class="modal">
-    <div class="modal-dialog">
-        <form id="update-name-form" class="form-horizontal" method="post">
-            {% csrf_token %}
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="update-timeout-title">Name and Tags</h4>
-                </div>
-                <div class="modal-body">
-                        <div class="form-group">
-                            <label for="update-name-input" class="col-sm-2 control-label">
-                                Name
-                            </label>
-                            <div class="col-sm-9">
-                                <input
-                                    id="update-name-input"
-                                    name="name"
-                                    type="text"
-                                    value="---"
-                                    placeholder="unnamed"
-                                    class="input-name form-control" />
-
-                                <span class="help-block">
-                                    Give this check a human-friendly name,
-                                    so you can easily recognize it later.
-                                </span>
-                            </div>
-                        </div>
-
-                        <div class="form-group">
-                            <label for="update-tags-input" class="col-sm-2 control-label">
-                                Tags
-                            </label>
-                            <div class="col-sm-9">
-                                <input
-                                    id="update-tags-input"
-                                    name="tags"
-                                    type="text"
-                                    value=""
-                                    placeholder="production www"
-                                    class="form-control" />
-
-                                <span class="help-block">
-                                    Use tags for easy filtering and for status badges.
-                                    Separate multiple tags with spaces.
-                                </span>
-                            </div>
-                        </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="submit" class="btn btn-primary">Save</button>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>
-
-<div id="update-timeout-modal" class="modal">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <form id="update-timeout-form" method="post">
-                {% csrf_token %}
-                <input type="hidden" name="kind" value="simple" />
-                <input type="hidden" name="timeout" id="update-timeout-timeout" />
-                <input type="hidden" name="grace" id="update-timeout-grace" />
-
-                <div class="modal-body">
-                    <div class="update-timeout-info text-center">
-                        <span
-                            class="update-timeout-label"
-                            data-toggle="tooltip"
-                            title="Expected time between pings.">
-                            Period
-                        </span>
-                        <span
-                            id="period-slider-value"
-                            class="update-timeout-value">
-                            1 day
-                        </span>
-                    </div>
-
-                    <div id="period-slider"></div>
-
-                    <div class="update-timeout-info text-center">
-                        <span
-                            class="update-timeout-label"
-                            data-toggle="tooltip"
-                            title="When check is late, how long to wait until an alert is sent">
-                            Grace Time
-                        </span>
-                        <span
-                            id="grace-slider-value"
-                            class="update-timeout-value">
-                            1 day
-                        </span>
-                    </div>
-
-                    <div id="grace-slider"></div>
-
-                    <div class="update-timeout-terms">
-                        <p>
-                            <span>Period</span>
-                            Expected time between pings.
-                        </p>
-                        <p>
-                            <span>Grace Time</span>
-                            When a check is late, how long to wait until an alert is sent.
-                        </p>
-                    </div>
-                </div>
-
-                <div class="modal-footer">
-                    <div class="btn-group pull-left">
-                        <label class="btn btn-default kind-simple active">Simple</label>
-                        <label class="btn btn-default kind-cron">Cron</label>
-                    </div>
-
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="submit" class="btn btn-primary">Save</button>
-                </div>
-            </form>
-
-            <form id="update-cron-form" method="post">
-                {% csrf_token %}
-                <input type="hidden" name="kind" value="cron" />
-                <div class="modal-body">
-                    <div class="row">
-                        <div class="col-md-4">
-                            <div class="form-group">
-                                <label for="schedule">Cron Expression</label>
-                                <input
-                                    type="text"
-                                    class="form-control"
-                                    id="schedule"
-                                    name="schedule"
-                                    placeholder="* * * * *">
-                                <div id="schedule-hint">
-                                    m h dom mon dow
-                                    <a href="{% url 'hc-docs-cron' %}" target="_blank">(cheatsheet)</a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="form-group">
-                                <label for="tz">Server's Timezone</label>
-                                <br />
-                                <select id="tz" name="tz" class="form-control">
-                                    <option>UTC</option>
-                                    {% for tz in timezones %}
-                                    <option>{{ tz }}</option>{% endfor %}
-                                </select>
-                            </div>
-                        </div>
-                        <div class="col-md-4">
-                            <div class="form-group">
-                                <label for="cron-grace">Grace Time</label>
-                                <div class="input-group">
-                                    <input
-                                        type="number"
-                                        min="1"
-                                        max="43200"
-                                        class="form-control"
-                                        id="update-timeout-grace-cron"
-                                        name="grace">
-                                    <div class="input-group-addon">minutes</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-sm-12">
-                            <div id="cron-preview"></div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="modal-footer">
-                    <div class="btn-group pull-left">
-                        <label class="btn btn-default kind-simple">Simple</label>
-                        <label class="btn btn-default active kind-cron">Cron</label>
-                    </div>
-
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button id="update-cron-submit" type="submit" class="btn btn-primary">
-                        Save
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
-</div>
-
-<div id="remove-check-modal" class="modal">
-    <div class="modal-dialog">
-        <form id="remove-check-form" method="post">
-            {% csrf_token %}
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="remove-check-title">Remove Check <span class="remove-check-name"></span></h4>
-                </div>
-                <div class="modal-body">
-                    <p>You are about to remove check
-                        <strong class="remove-check-name">---</strong>.
-                    </p>
-                    <p>Once it's gone there is no "undo" and you cannot get
-                    the old ping URL back.</p>
-                    <p>Are you sure?</p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="submit" class="btn btn-danger">Remove</button>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>
-
-<div id="show-usage-modal" class="modal">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                <h4 id="usage-examples-title">Usage Examples</h4>
-                <ul class="nav nav-pills" 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>
-                        <a href="#ruby" data-toggle="tab">Ruby</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="#powershell" data-toggle="tab">PowerShell</a>
-                    </li>
-                    <li class="hidden-xs">
-                        <a href="#email" data-toggle="tab">Email</a>
-                    </li>
-                </ul>
-            </div>
-            <div class="modal-body">
-                <div class="tab-content">
-                    {% with ping_url="<span class='ex'></span>" %}
-                    <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_curl.html" %}
-                        {% include "front/snippets/bash_wget.html" %}
-                    </div>
-                    <div role="tabpanel" class="tab-pane" id="python">
-                        {% include "front/snippets/python_urllib2.html" %}
-                        {% include "front/snippets/python_requests.html" %}
-                    </div>
-                    <div role="tabpanel" class="tab-pane" id="ruby">
-                        {% include "front/snippets/ruby.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="powershell">
-                        {% include "front/snippets/powershell.html" %}
-                    </div>
-                    <div class="tab-pane" id="email">
-                        <p>
-                        As an alternative to HTTP/HTTPS requests,
-                        you can "ping" this check by sending an
-                        email message to <code class="em"></code>
-                        </p>
-                    </div>
-                    {% endwith %}
-                </div>
-
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
-            </div>
-        </div>
-    </div>
-</div>
+{% include "front/update_name_modal.html" %}
+{% include "front/update_timeout_modal.html" %}
+{% include "front/remove_check_modal.html" %}
+{% include "front/show_usage_modal.html" %}
 
 <div id="ping-details-modal" class="modal">
     <div class="modal-dialog">
@@ -370,9 +72,7 @@
     </div>
 </div>
 
-<form id="pause-form" method="post">
-    {% csrf_token %}
-</form>
+<form id="pause-form" method="post">{% csrf_token %}</form>
 
 {% endblock %}
 
@@ -384,6 +84,7 @@
 <script src="{% static 'js/nouislider.min.js' %}"></script>
 <script src="{% static 'js/clipboard.min.js' %}"></script>
 <script src="{% static 'js/snippet-copy.js' %}"></script>
+<script src="{% static 'js/update-timeout-modal.js' %}"></script>
 <script src="{% static 'js/checks.js' %}"></script>
 {% endcompress %}
 {% endblock %}

templates/front/remove_check_modal.html

@@ -0,0 +1,29 @@
+<div id="remove-check-modal" class="modal">
+    <div class="modal-dialog">
+        <form
+            id="remove-check-form"
+            {% if check %}action="{% url 'hc-remove-check' check.code %}"{% endif %}
+            method="post">
+
+            {% csrf_token %}
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4 class="remove-check-title">Remove Check <span class="remove-check-name">{{ check.name_then_code }}</span></h4>
+                </div>
+                <div class="modal-body">
+                    <p>You are about to remove check
+                        <strong class="remove-check-name">{{ check.name_then_code }}</strong>.
+                    </p>
+                    <p>Once it's gone there is no "undo" and you cannot get
+                    the old ping URL back.</p>
+                    <p>Are you sure?</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-danger">Remove</button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

templates/front/show_usage_modal.html

@@ -0,0 +1,83 @@
+<div id="show-usage-modal" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <h4 id="usage-examples-title">Usage Examples</h4>
+                <ul class="nav nav-pills" 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>
+                        <a href="#ruby" data-toggle="tab">Ruby</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="#powershell" data-toggle="tab">PowerShell</a>
+                    </li>
+                    <li class="hidden-xs">
+                        <a href="#email" data-toggle="tab">Email</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="modal-body">
+                <div class="tab-content">
+                    {% with ping_url=check.url|default:'<span class="ex"></span>' %}
+                    <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_curl.html" %}
+                        {% include "front/snippets/bash_wget.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="python">
+                        {% include "front/snippets/python_urllib2.html" %}
+                        {% include "front/snippets/python_requests.html" %}
+                    </div>
+                    <div role="tabpanel" class="tab-pane" id="ruby">
+                        {% include "front/snippets/ruby.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="powershell">
+                        {% include "front/snippets/powershell.html" %}
+                    </div>
+                    <div class="tab-pane" id="email">
+                        <p>
+                        As an alternative to HTTP/HTTPS requests,
+                        you can "ping" this check by sending an
+                        email message to
+                        <code class="em">{{ check.email }}</code>
+                        </p>
+                    </div>
+                    {% endwith %}
+                </div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
+            </div>
+        </div>
+    </div>
+</div>

templates/front/update_name_modal.html

@@ -0,0 +1,62 @@
+<div id="update-name-modal" class="modal">
+    <div class="modal-dialog">
+        <form
+            id="update-name-form"
+            {% if check %}action="{% url 'hc-update-name' check.code %}"{% endif %}
+            class="form-horizontal"
+            method="post">
+            {% csrf_token %}
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    <h4 class="update-timeout-title">Name and Tags</h4>
+                </div>
+                <div class="modal-body">
+                        <div class="form-group">
+                            <label for="update-name-input" class="col-sm-2 control-label">
+                                Name
+                            </label>
+                            <div class="col-sm-9">
+                                <input
+                                    id="update-name-input"
+                                    name="name"
+                                    type="text"
+                                    value="{{ check.name }}"
+                                    placeholder="unnamed"
+                                    class="input-name form-control" />
+
+                                <span class="help-block">
+                                    Give this check a human-friendly name,
+                                    so you can easily recognize it later.
+                                </span>
+                            </div>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="update-tags-input" class="col-sm-2 control-label">
+                                Tags
+                            </label>
+                            <div class="col-sm-9">
+                                <input
+                                    id="update-tags-input"
+                                    name="tags"
+                                    type="text"
+                                    value="{{ check.tags }}"
+                                    placeholder="production www"
+                                    class="form-control" />
+
+                                <span class="help-block">
+                                    Use tags for easy filtering and for status badges.
+                                    Separate multiple tags with spaces.
+                                </span>
+                            </div>
+                        </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save</button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>

templates/front/update_timeout_modal.html

@@ -0,0 +1,134 @@
+<div id="update-timeout-modal" class="modal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <form id="update-timeout-form" method="post">
+                {% csrf_token %}
+                <input type="hidden" name="kind" value="simple" />
+                <input type="hidden" name="timeout" id="update-timeout-timeout" />
+                <input type="hidden" name="grace" id="update-timeout-grace" />
+
+                <div class="modal-body">
+                    <div class="update-timeout-info text-center">
+                        <span
+                            class="update-timeout-label"
+                            data-toggle="tooltip"
+                            title="Expected time between pings.">
+                            Period
+                        </span>
+                        <span
+                            id="period-slider-value"
+                            class="update-timeout-value">
+                            1 day
+                        </span>
+                    </div>
+
+                    <div id="period-slider"></div>
+
+                    <div class="update-timeout-info text-center">
+                        <span
+                            class="update-timeout-label"
+                            data-toggle="tooltip"
+                            title="When check is late, how long to wait until an alert is sent">
+                            Grace Time
+                        </span>
+                        <span
+                            id="grace-slider-value"
+                            class="update-timeout-value">
+                            1 day
+                        </span>
+                    </div>
+
+                    <div id="grace-slider"></div>
+
+                    <div class="update-timeout-terms">
+                        <p>
+                            <span>Period</span>
+                            Expected time between pings.
+                        </p>
+                        <p>
+                            <span>Grace Time</span>
+                            When a check is late, how long to wait until an alert is sent.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <div class="btn-group pull-left">
+                        <label class="btn btn-default kind-simple active">Simple</label>
+                        <label class="btn btn-default kind-cron">Cron</label>
+                    </div>
+
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save</button>
+                </div>
+            </form>
+
+            <form id="update-cron-form" method="post">
+                {% csrf_token %}
+                <input type="hidden" name="kind" value="cron" />
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="schedule">Cron Expression</label>
+                                <input
+                                    type="text"
+                                    class="form-control"
+                                    id="schedule"
+                                    name="schedule"
+                                    placeholder="* * * * *">
+                                <div id="schedule-hint">
+                                    m h dom mon dow
+                                    <a href="{% url 'hc-docs-cron' %}" target="_blank">(cheatsheet)</a>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="tz">Server's Timezone</label>
+                                <br />
+                                <select id="tz" name="tz" class="form-control">
+                                    <option>UTC</option>
+                                    {% for tz in timezones %}
+                                    <option>{{ tz }}</option>{% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="cron-grace">Grace Time</label>
+                                <div class="input-group">
+                                    <input
+                                        type="number"
+                                        min="1"
+                                        max="43200"
+                                        class="form-control"
+                                        id="update-timeout-grace-cron"
+                                        name="grace">
+                                    <div class="input-group-addon">minutes</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-12">
+                            <div id="cron-preview"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <div class="btn-group pull-left">
+                        <label class="btn btn-default kind-simple">Simple</label>
+                        <label class="btn btn-default active kind-cron">Cron</label>
+                    </div>
+
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+                    <button id="update-cron-submit" type="submit" class="btn btn-primary">
+                        Save
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>