Display "late" status in My Checks page and in alerts.

hc/api/models.py

@@ -57,3 +57,17 @@ class Check(models.Model):
             send(self.user.email, "emails/alert", ctx)
         else:
             raise NotImplemented("Unexpected status: %s" % self.status)
+
+    def get_status(self):
+        if self.status == "new":
+            return "new"
+
+        now = timezone.now()
+
+        if self.last_ping + self.timeout > now:
+            return "up"
+
+        if self.last_ping + self.timeout + self.grace > now:
+            return "grace"
+
+        return "down"

static/css/style.css

@@ -77,7 +77,7 @@ body {
     text-align: right;
 }
 
-.glyphicon.up, .glyphicon.new, .glyphicon.down {
+.glyphicon.up, .glyphicon.new, .glyphicon.grace, .glyphicon.down {
     font-size: 22px;
 }
 
@@ -89,6 +89,10 @@ body {
     color: #AAA;
 }
 
+.glyphicon.grace {
+    color: #f0ad4e;
+}
+
 .glyphicon.down {
     color: #d9534f;
 }
@@ -131,6 +135,11 @@ table.table tr > th.th-name {
     border: 1px dotted #AAA;
 }
 
+.my-checks-name.unnamed {
+    color: #999;
+    font-style: italic;
+}
+
 .url-cell {
     font-size: small;
 }

static/js/checks.js

@@ -78,7 +78,7 @@ $(function () {
         var $this = $(this);
 
         $("#update-name-form").attr("action", $this.data("url"));
-        $("#update-name-input").val($this.text());
+        $("#update-name-input").val($this.data("name"));
         $('#update-name-modal').modal("show");
 
         return false;

templates/emails/alert/body.html

@@ -20,7 +20,10 @@
 
     .new { background: #AAA; }
     .up { background: #5cb85c; }
+    .grace { background: #f0ad4e; }
     .down { background: #d9534f; }
+
+
     .unnamed {
         color: #888;
         font-style: italic;
@@ -44,11 +47,13 @@
     {% for check in checks %}
     <tr>
         <td>
-            {% if check.status == "new" %}
+            {% if check.get_status == "new" %}
                 <span class="badge new">NEW</span>
-            {% elif now < check.alert_after %}
+            {% elif check.get_status == "up" %}
                 <span class="badge up">UP</span>
-            {% else %}
+            {% elif check.get_status == "grace" %}
+                <span class="badge grace">LATE</span>
+            {% elif check.get_status == "down" %}
                 <span class="badge down">DOWN</span>
             {% endif %}
         </td>

templates/front/my_checks.html

@@ -24,17 +24,23 @@
         {% for check in checks %}
         <tr class="checks-row">
             <td class="indicator-cell">
-                {% if check.status == "new" %}
+                {% if check.get_status == "new" %}
                     <span class="glyphicon glyphicon-question-sign new"></span>
-                {% elif now < check.alert_after %}
+                {% elif check.get_status == "up" %}
                     <span class="glyphicon glyphicon-ok-sign up"></span>
-                {% else %}
+                {% elif check.get_status == "grace" %}
+                    <span class="glyphicon glyphicon-exclamation-sign grace"></span>
+                {% elif check.get_status == "down" %}
                     <span class="glyphicon glyphicon-exclamation-sign down"></span>
                 {% endif %}
             </td>
             <td class="name-cell">
-                <span data-url="{% url 'hc-update-name' check.code %}"
-                    class="my-checks-name">{{ check.name }}</span>
+                <span
+                    data-name="{{ check.name }}"
+                    data-url="{% url 'hc-update-name' check.code %}"
+                    class="my-checks-name {% if not check.name %}unnamed{% endif %}">
+                    {{ check.name|default:"unnamed" }}
+                </span>
             </td>
             <td class="url-cell">
                 <code>{{ check.url }}</code>