Testcase for /checks/status/. More efficient DOM updates.

hc/front/tests/test_status.py

@@ -0,0 +1,23 @@
+from hc.api.models import Check
+from hc.test import BaseTestCase
+
+
+class MyChecksTestCase(BaseTestCase):
+
+    def setUp(self):
+        super(MyChecksTestCase, self).setUp()
+        self.check = Check(user=self.alice, name="Alice Was Here")
+        self.check.tags = "foo"
+        self.check.save()
+
+    def test_it_works(self):
+        self.client.login(username="alice@example.org", password="password")
+        r = self.client.get("/checks/status/")
+        doc = r.json()
+
+        self.assertEqual(doc["tags"]["foo"], "up")
+
+        detail = doc["details"][0]
+        self.assertEqual(detail["code"], str(self.check.code))
+        self.assertEqual(detail["status"], "new")
+        self.assertIn("Never", detail["last_ping"])

static/css/my_checks_mobile.css

@@ -36,4 +36,24 @@
 
 #checks-list th {
     width: 100px;
+}
+
+#checks-list .label {
+    text-transform: uppercase;
+}
+
+.label-new, .label-paused {
+    background-color: #777777;
+}
+
+.label-up {
+    background-color: #22bc66;
+}
+
+.label-grace {
+    background-color: #f0ad4e;
+}
+
+.label-down {
+    background-color: #d9534f;
 }

static/js/checks.js

@@ -258,21 +258,36 @@ $(function () {
     });
 
     // Auto-refresh
+    var lastStatus = {};
+    var lastPing = {};
     function refresh() {
-        $.getJSON("/checks/status/", function(data) {
+        $.ajax({
-            for(var i=0, el; el=data.details[i]; i++) {
+            url: "/checks/status/",
-                var elId = "#check-desktop-" + el.code;
+            dataType: "json",
-                $(elId + " .indicator-cell span").attr("class", "status icon-" + el.status);
+            timeout: 2000,
-                $(elId + " .last-ping-cell").html(el.last_ping);
+            success: function(data) {
-                $(elId + " .li-pause-check").toggleClass("disabled", el.status == "paused");
+                for(var i=0, el; el=data.details[i]; i++) {
-            }
+                    if (lastStatus[el.code] != el.status) {
+                        lastStatus[el.code] = el.status;
+                        $("#si-" + el.code).attr("class", "status icon-" + el.status);
+                        $("#sl-" + el.code).attr("class", "label label-" + el.status).text(el.status);
+                        $("#pause-li-" + el.code).toggleClass("disabled", el.status == "paused");
+                    }
 
-            $("#my-checks-tags button").each(function(a) {
+                    if (lastPing[el.code] != el.last_ping) {
-                var status = data.tags[this.innerText];
+                        lastPing[el.code] = el.last_ping;
-                if (status) {
+                        $("#lpd-" + el.code).html(el.last_ping);
-                    this.setAttribute("class", "btn btn-xs " + status);
+                        $("#lpm-" + el.code).html(el.last_ping);
+                    }
                 }
-            });
+
+                $("#my-checks-tags button").each(function(a) {
+                    var status = data.tags[this.innerText];
+                    if (status) {
+                        this.setAttribute("class", "btn btn-xs " + status);
+                    }
+                });
+            }
         });
     }
 

templates/front/my_checks_desktop.html

@@ -28,12 +28,12 @@
         <th></th>
     </tr>
     {% for check in checks|sortchecks:sort %}
-    <tr id="check-desktop-{{ check.code }}" class="checks-row">
+    <tr class="checks-row">
         <td class="indicator-cell">
             {% if check.in_grace_period %}
-                <span class="status icon-grace" data-toggle="tooltip"></span>
+                <span id="si-{{ check.code }}" class="status icon-grace" data-toggle="tooltip"></span>
             {% else %}
-                <span class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>
+                <span id="si-{{ check.code }}" class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>
             {% endif %}
         </td>
         <td class="name-cell">
@@ -77,7 +77,7 @@
                 </span>
             </span>
         </td>
-        <td class="last-ping-cell">
+        <td id="lpd-{{ check.code}}">
             {% include "front/last_ping_cell.html" with check=check %}
         </td>
         <td>
@@ -86,7 +86,7 @@
                 <span class="icon-settings" aria-hidden="true"></span>
                 </button>
                 <ul class="dropdown-menu">
-                    <li class="li-pause-check" {% if check.status == "new" or check.status == "paused" %}class="disabled"{% endif %}>
+                    <li id="pause-li-{{ check.code }}" {% if check.status == "new" or check.status == "paused" %}class="disabled"{% endif %}>
                         <a class="pause-check"
                            href="#"
                            data-url="{% url 'hc-pause' check.code %}">

templates/front/my_checks_mobile.html

@@ -23,16 +23,10 @@
             <tr>
                 <th>Status</th>
                 <td>
-                    {% if check.get_status == "new" %}
+                    {% if check.in_grace_period %}
-                        <span class="label label-default">NEW</span>
+                        <span id="sl-{{ check.code }}" class="label label-grace">grace</span>
-                    {% elif check.get_status == "paused" %}
+                    {% else %}
-                        <span class="label label-default">PAUSED</span>
+                        <span id="sl-{{ check.code }}" class="label label-{{ check.get_status }}">{{ check.get_status }}</span>
-                    {% elif check.in_grace_period %}
-                        <span class="label label-warning">LATE</span>
-                    {% elif check.get_status == "up" %}
-                        <span class="label label-success">UP</span>
-                    {% elif check.get_status == "down" %}
-                        <span class="label label-danger">DOWN</span>
                     {% endif %}
                 </td>
             </tr>
@@ -63,12 +57,8 @@
             </tr>
             <tr>
                 <th>Last Ping</th>
-                <td>
+                <td id="lpm-{{ check.code}}">
-                    {% if check.last_ping %}
+                    {% include "front/last_ping_cell.html" with check=check %}
-                        {{ check.last_ping|naturaltime }}
-                    {% else %}
-                        Never
-                    {% endif %}
                 </td>
             </tr>
         </table>