From fe78275d3f4cdfb29b8996425cf86e055c3aab29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Thu, 16 Jul 2015 10:14:32 +0300
Subject: [PATCH] Display "late" status in My Checks page and in alerts.

---
 hc/api/models.py                 | 14 ++++++++++++++
 static/css/style.css             | 11 ++++++++++-
 static/js/checks.js              |  2 +-
 templates/emails/alert/body.html | 11 ++++++++---
 templates/front/my_checks.html   | 16 +++++++++++-----
 5 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/hc/api/models.py b/hc/api/models.py
index 0b3471c1..1fe467d1 100644
--- a/hc/api/models.py
+++ b/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"
diff --git a/static/css/style.css b/static/css/style.css
index 9d4a7a93..b087a50a 100644
--- a/static/css/style.css
+++ b/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;
 }
diff --git a/static/js/checks.js b/static/js/checks.js
index ec36e051..b5c409ee 100644
--- a/static/js/checks.js
+++ b/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;
diff --git a/templates/emails/alert/body.html b/templates/emails/alert/body.html
index 680c36f8..ade3aa80 100644
--- a/templates/emails/alert/body.html
+++ b/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>
diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html
index 24fc3316..bf69469c 100644
--- a/templates/front/my_checks.html
+++ b/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>