From 0d1d319657e7362bbb87df1973b803967fe1c132 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Wed, 17 Jun 2015 13:36:56 +0300
Subject: [PATCH] Nicer indicators

---
 hc/front/views.py          |  4 +++-
 static/css/style.css       | 29 +++++++++++++++++++++++++++++
 templates/front/index.html | 29 +++++++++--------------------
 3 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/hc/front/views.py b/hc/front/views.py
index 9a5176bd..5503cfdf 100644
--- a/hc/front/views.py
+++ b/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)
diff --git a/static/css/style.css b/static/css/style.css
index 1906b7de..32633c83 100644
--- a/static/css/style.css
+++ b/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;
 }
diff --git a/templates/front/index.html b/templates/front/index.html
index e8a11386..365d203e 100644
--- a/templates/front/index.html
+++ b/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>
-                {% 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 %}
-
+            <td class="indicator-cell">
                 {% if check.status == "new" %}
-                    <span
-                        data-toggle="tooltip"
-                        title="This check has not yet been triggered"
-                        class="label label-warning">&nbsp;</span>
+                    <span class="glyphicon glyphicon-question-sign new"></span>
+                {% elif now < check.alert_after %}
+                    <span class="glyphicon glyphicon-ok-sign up"></span>
+                {% else %}
+                    <span class="glyphicon glyphicon-exclamation-sign down"></span>
                 {% endif %}
             </td>
             <td>
@@ -94,4 +81,6 @@
     </div>
 
 </div>
+
+
 {% endblock %}
\ No newline at end of file