Nicer indicators

hc/front/views.py

@@ -1,5 +1,6 @@
 from django.contrib.auth.decorators import login_required
 from django.shortcuts import redirect, render
+from django.utils import timezone
 
 from hc.api.models import Check
 
@@ -14,7 +15,8 @@ def checks(request):
     checks = Check.objects.filter(user=request.user).order_by("created")
 
     ctx = {
-        "checks": checks
+        "checks": checks,
+        "now": timezone.now
     }
 
     return render(request, "front/index.html", ctx)

static/css/style.css

@@ -2,6 +2,22 @@ html, body {
     background: #EEE;
 }
 
+.glyphicon.up, .glyphicon.new, .glyphicon.down {
+    font-size: 22px;
+}
+
+.glyphicon.up {
+    color: #5cb85c;
+}
+
+.glyphicon.new {
+    color: #AAA;
+}
+
+.glyphicon.down {
+    color: #d9534f;
+}
+
 #login_dialog {
     background: #FFF;
     padding: 2em;
@@ -12,10 +28,23 @@ html, body {
     margin: 0;
 }
 
+/* Checks */
+
+table.table tr > th.th-name {
+    padding-left: 21px;
+}
+
 .setup-link {
     opacity: 0;
 }
 
+.indicator-cell {
+    vertical-align: middle;
+}
+table.table tr.checks-row > td {
+    vertical-align: middle;
+}
+
 .checks-row:hover .setup-link {
     opacity: 1;
 }

templates/front/index.html

@@ -8,7 +8,7 @@
     <table class="table table-hover">
         <tr>
             <th></th>
-            <th>Name</th>
+            <th class="th-name">Name</th>
             <th>Code</th>
             <th>Frequency</th>
             <th>Last Ping</th>
@@ -16,26 +16,13 @@
         </tr>
         {% for check in checks %}
         <tr class="checks-row">
-            <td>
+            <td class="indicator-cell">
-                {% if check.status == "up" %}
-                    <span
-                        data-toggle="tooltip"
-                        title="This check is UP"
-                        class="label label-success">&nbsp;</span>
-                {% endif %}
-
-                {% if check.status == "down" %}
-                    <span
-                        data-toggle="tooltip"
-                        title="This check is DOWN"
-                        class="label label-danger">&nbsp;</span>
-                {% endif %}
-
                 {% if check.status == "new" %}
-                    <span
+                    <span class="glyphicon glyphicon-question-sign new"></span>
-                        data-toggle="tooltip"
+                {% elif now < check.alert_after %}
-                        title="This check has not yet been triggered"
+                    <span class="glyphicon glyphicon-ok-sign up"></span>
-                        class="label label-warning">&nbsp;</span>
+                {% else %}
+                    <span class="glyphicon glyphicon-exclamation-sign down"></span>
                 {% endif %}
             </td>
             <td>
@@ -94,4 +81,6 @@
     </div>
 
 </div>
+
+
 {% endblock %}