Always show failed checks first. Fixes #173

hc/front/templatetags/hc_extras.py

@@ -48,8 +48,14 @@ def last_ping_key(check):
     return check.last_ping.isoformat() if check.last_ping else "9999"
 
 
+def not_down_key(check):
+    return check.get_status() != "down"
+
+
 @register.filter
 def sortchecks(checks, key):
+    """Sort the list of checks in-place by given key, then by status=down. """
+
     if key == "created":
         checks.sort(key=lambda check: check.created)
     elif key.endswith("name"):
@@ -57,6 +63,10 @@ def sortchecks(checks, key):
     elif key.endswith("last_ping"):
         checks.sort(key=last_ping_key, reverse=key.startswith("-"))
 
+    # Move failed checks to the beginning. Sorts in python are stable
+    # so this does not mess up the previous sort.
+    checks.sort(key=not_down_key)
+
     return checks
 
 

hc/front/views.py

@@ -24,6 +24,7 @@ from hc.front.forms import (AddWebhookForm, NameTagsForm,
                             TimeoutForm, AddUrlForm, AddEmailForm,
                             AddOpsGenieForm, CronForm, AddSmsForm)
 from hc.front.schemas import telegram_callback
+from hc.front.templatetags.hc_extras import sortchecks
 from hc.lib import jsonschema
 from pytz import all_timezones
 from pytz.exceptions import UnknownTimeZoneError
@@ -58,6 +59,7 @@ def my_checks(request):
         request.profile.save()
 
     checks = list(Check.objects.filter(user=request.team.user))
+    sortchecks(checks, request.profile.sort)
 
     pairs = list(_tags_statuses(checks).items())
     pairs.sort(key=lambda pair: pair[0].lower())

static/js/checks.js

@@ -192,6 +192,7 @@ $(function () {
         return false;
     });
 
+    // Filtering by tags
     $("#my-checks-tags button").click(function() {
         // .active has not been updated yet by bootstrap code,
         // so cannot use it
@@ -238,12 +239,19 @@ $(function () {
     });
 
     $('[data-toggle="tooltip"]').tooltip({
+        html: true,
         title: function() {
             var cssClasses = this.getAttribute("class");
             if (cssClasses.indexOf("icon-new") > -1)
                 return "New. Has never received a ping.";
             if (cssClasses.indexOf("icon-paused") > -1)
                 return "Monitoring paused. Ping to resume.";
+
+            if (cssClasses.indexOf("sort-name") > -1)
+                return "Sort by name<br />(but failed always first)";
+
+            if (cssClasses.indexOf("sort-last-ping") > -1)
+                return "Sort by last ping<br />(but failed always first)";
         }
     });
 

templates/front/my_checks_desktop.html

@@ -4,11 +4,17 @@
         <th></th>
         <th class="th-name">
             {% if sort == "name" %}
-            <a href="?sort=-name">Name<span class="icon-asc"></span></a>
+            <a href="?sort=-name" data-toggle="tooltip" class="sort-name">
+                Name<span class="icon-asc"></span>
+            </a>
             {% elif sort == "-name" %}
-            <a href="?sort=created">Name<span class="icon-desc"></span></a>
+            <a href="?sort=created" data-toggle="tooltip" class="sort-name">
+                Name<span class="icon-desc"></span>
+            </a>
             {% else %}
-            <a href="?sort=name" class="default">Name</span></a>
+            <a href="?sort=name" data-toggle="tooltip" class="default sort-name">
+                Name
+            </a>
             {% endif %}
         </th>
         <th>Ping URL</th>
@@ -18,16 +24,22 @@
         </th>
         <th class="th-last-ping">
             {% if sort == "last_ping" %}
-            <a href="?sort=created">Last Ping<span class="icon-desc"></span></a>
+            <a href="?sort=created" data-toggle="tooltip" class="sort-last-ping">
+                Last Ping<span class="icon-desc"></span>
+            </a>
             {% elif sort == "-last_ping" %}
-            <a href="?sort=last_ping">Last Ping<span class="icon-asc"></span></a>
+            <a href="?sort=last_ping" data-toggle="tooltip" class="sort-last-ping">
+                Last Ping<span class="icon-asc"></span>
+            </a>
             {% else %}
-            <a href="?sort=-last_ping" class="default">Last Ping</span></a>
+            <a href="?sort=-last_ping" data-toggle="tooltip" class="default sort-last-ping">
+                Last Ping</span>
+            </a>
             {% endif %}
         </th>
         <th></th>
     </tr>
-    {% for check in checks|sortchecks:sort %}
+    {% for check in checks %}
     <tr class="checks-row">
         <td class="indicator-cell">
             {% if check.in_grace_period %}

templates/front/my_checks_mobile.html

@@ -1,7 +1,7 @@
 {% load hc_extras humanize %}
 
 <ul id="checks-list" class="visible-xs">
-    {% for check in checks|sortchecks:sort %}
+    {% for check in checks %}
     <li>
         <h2>
             <span class="{% if not check.name %}unnamed{% endif %}">
@@ -26,7 +26,9 @@
                     {% if check.in_grace_period %}
                         <span id="sl-{{ check.code }}" class="label label-grace">grace</span>
                     {% else %}
-                        <span id="sl-{{ check.code }}" class="label label-{{ check.get_status }}">{{ check.get_status }}</span>
+                        {% with status=check.get_status %}
+                        <span id="sl-{{ check.code }}" class="label label-{{ status }}">{{ status }}</span>
+                        {% endwith %}
                     {% endif %}
                 </td>
             </tr>