Show elapsed times in ping log

CHANGELOG.md

@@ -10,6 +10,7 @@ All notable changes to this project will be documented in this file.
 - Add CORS support to API endpoints
 - Flip model, for tracking status changes of the Check objects
 - Add `/ping/<code>/start` API endpoint
+- When using `/start` endpoint, show elapsed times in ping log
 
 ### Bug Fixes
 - Fix after-login redirects (the "?next=" query parameter)

hc/front/templatetags/hc_extras.py

@@ -5,7 +5,7 @@ from django.conf import settings
 from django.utils.html import escape
 from django.utils.safestring import mark_safe
 
-from hc.lib.date import format_duration
+from hc.lib.date import format_duration, format_mins_secs
 
 register = template.Library()
 
@@ -15,6 +15,11 @@ def hc_duration(td):
     return format_duration(td)
 
 
+@register.filter
+def mins_secs(td):
+    return format_mins_secs(td)
+
+
 @register.simple_tag
 def site_name():
     return settings.SITE_NAME

hc/front/views.py

@@ -37,6 +37,7 @@ VALID_SORT_VALUES = ("name", "-name", "last_ping", "-last_ping", "created")
 STATUS_TEXT_TMPL = get_template("front/log_status_text.html")
 LAST_PING_TMPL = get_template("front/last_ping_cell.html")
 EVENTS_TMPL = get_template("front/details_events.html")
+ONE_HOUR = td(hours=1)
 
 
 def _tags_statuses(checks):
@@ -374,6 +375,15 @@ def _get_events(check, limit):
     pings = Ping.objects.filter(owner=check).order_by("-id")[:limit]
     pings = list(pings)
 
+    prev = None
+    for ping in pings:
+        if ping.start and prev and not prev.start:
+            delta = prev.created - ping.created
+            if delta < ONE_HOUR:
+                setattr(prev, "delta", delta)
+
+        prev = ping
+
     alerts = []
     if len(pings):
         cutoff = pings[-1].created

hc/lib/date.py

@@ -27,3 +27,16 @@ def format_duration(td):
             result.append("%d %s" % (v, unit.plural))
 
     return " ".join(result)
+
+
+def format_mins_secs(td):
+    total_seconds = int(td.total_seconds())
+    result = []
+
+    mins, secs = divmod(total_seconds, 60)
+    if mins:
+        result.append("%d min" % mins)
+
+    result.append("%s sec" % secs)
+
+    return " ".join(result)

hc/lib/tests/test_date.py

@@ -0,0 +1,20 @@
+from datetime import timedelta as td
+from django.test import TestCase
+
+from hc.lib.date import format_mins_secs
+
+
+class DateFormattingTestCase(TestCase):
+
+    def test_mins_secs_work(self):
+        s = format_mins_secs(td(seconds=0))
+        self.assertEqual(s, "0 sec")
+
+        s = format_mins_secs(td(seconds=1))
+        self.assertEqual(s, "1 sec")
+
+        s = format_mins_secs(td(seconds=61))
+        self.assertEqual(s, "1 min 1 sec")
+
+        s = format_mins_secs(td(seconds=62))
+        self.assertEqual(s, "1 min 2 sec")

static/css/icomoon.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?swifyd');
+  src:  url('../fonts/icomoon.eot?b9rvfd');
-  src:  url('../fonts/icomoon.eot?swifyd#iefix') format('embedded-opentype'),
+  src:  url('../fonts/icomoon.eot?b9rvfd#iefix') format('embedded-opentype'),
-    url('../fonts/icomoon.ttf?swifyd') format('truetype'),
+    url('../fonts/icomoon.ttf?b9rvfd') format('truetype'),
-    url('../fonts/icomoon.woff?swifyd') format('woff'),
+    url('../fonts/icomoon.woff?b9rvfd') format('woff'),
-    url('../fonts/icomoon.svg?swifyd#icomoon') format('svg');
+    url('../fonts/icomoon.svg?b9rvfd#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -126,3 +126,6 @@
 .icon-delete:before {
   content: "\e913";
 }
+.icon-timer:before {
+  content: "\e425";
+}

static/css/log.css

@@ -23,6 +23,12 @@
     white-space: nowrap;
 }
 
+#log .delta {
+    white-space: nowrap;
+    float: right;
+    padding-left: 20px;
+}
+
 #log .details {
     width: 100%;
     max-width: 0;

static/fonts/icomoon.svg

@@ -12,6 +12,7 @@
 <glyph unicode="&#xe038;" glyph-name="started" d="M426 234.667l256 192-256 192v-384zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe313;" glyph-name="desc" d="M316 604.667l196-196 196 196 60-60-256-256-256 256z" />
 <glyph unicode="&#xe316;" glyph-name="asc" d="M316 280.667l-60 60 256 256 256-256-60-60-196 196z" />
+<glyph unicode="&#xe425;" glyph-name="timer" d="M512 84.667c166 0 298 134 298 300s-132 298-298 298-298-132-298-298 132-300 298-300zM812 622.667c52-66 84-148 84-238 0-212-172-384-384-384s-384 172-384 384 172 384 384 384c90 0 174-34 240-86l60 62c22-18 42-38 60-60zM470 340.667v256h84v-256h-84zM640 896.667v-86h-256v86h256z" />
 <glyph unicode="&#xe5c9;" glyph-name="cancel" d="M726 272.667l-154 154 154 154-60 60-154-154-154 154-60-60 154-154-154-154 60-60 154 154 154-154zM512 852.667c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe5d3;" glyph-name="dots" d="M512 512.667c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM768 512.667c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM256 512.667c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86z" />
 <glyph unicode="&#xe7f6;" glyph-name="paused" d="M768 312.667l-382 402c10 4 20 10 30 14h2l12 6c6 2 12 2 18 4v30c0 36 28 64 64 64s64-28 64-64v-30c122-30 192-138 192-270v-156zM512 0.667c-48 0-86 36-86 84h172c0-48-38-84-86-84zM334 676.667c187.235-193.432 375.34-385.994 562-580l-54-54-86 86h-586v42l86 86v214c0 54 12 104 34 146l-120 118 54 56z" />

templates/front/details_events.html

@@ -19,6 +19,13 @@
             {% endif %}
         </td>
         <td class="details">
+            {% if event.delta %}
+            <div class="delta">
+                <span class="icon-timer"></span>
+                {{ event.delta|mins_secs }}
+            </div>
+            {% endif %}
+
             {% if event.scheme == "email" %}
                 {{ event.ua }}
             {% else %}

templates/front/log.html

@@ -53,6 +53,14 @@
                 {% endif %}
             </td>
             <td class="details">
+                {% if event.delta %}
+                <div class="delta">
+                    <span class="icon-timer"></span>
+                    {{ event.delta|mins_secs }}
+                </div>
+                {% endif %}
+
+
                 {% if event.scheme == "email" %}
                     {{ event.ua }}
                     <span class="ua-body">