Optimize HTML output in /checks/<uuid>/log/

* Simplify the "n" cell
* Don't send details URLs, construct them on client side
* Strip microseconds in timestamps

hc/front/templatetags/hc_extras.py

@@ -178,6 +178,11 @@ def now_isoformat():
     return now().replace(microsecond=0).isoformat()
 
 
+@register.filter
+def isoformat(td):
+    return td.replace(microsecond=0).isoformat()
+
+
 @register.filter
 def guess_schedule(check):
     if check.kind == "cron":

static/css/log.css

@@ -52,7 +52,6 @@
     background-color: var(--table-bg-hover);
 }
 
-
 #log tr.missing td {
     color: #d9534f;
     background: var(--log-missing-bg);
@@ -63,12 +62,13 @@
     width: 1%;
 }
 
-#log .n-cell {
-    font-family: monospace;
+#log td:first-child {
+    font-family: "Lucida Console", Monaco, monospace;
     text-align: right;
 }
 
-#log .hash {
+#log td:first-child::before {
+    content:  "#";
     color: #aaa;
 }
 

static/js/log.js

@@ -1,6 +1,8 @@
 $(function () {
     $("#log tr.ok").on("click", function() {
-        loadPingDetails(this.dataset.url);
+        var n = $("td", this).first().text();
+        var tmpl = $("#log").data("url").slice(0, -2);
+        loadPingDetails(tmpl + n + "/");
         return false;
     });
 

templates/front/details_events.html

@@ -3,10 +3,8 @@
     <table class="table" id="log">
     {% for event in events %}
     {% if event.n %}
-    <tr class="ok" data-dt="{{ event.created.isoformat }}" data-url="{% url 'hc-ping-details' check.code event.n  %}">
-        <td class="n-cell">
-            <span class="hash">#</span>{{ event.n }}
-        </td>
+    <tr class="ok" data-dt="{{ event.created|isoformat }}" data-url="{% url 'hc-ping-details' check.code event.n  %}">
+        <td>{{ event.n }}</td>
         <td class="date"></td>
         <td class="time"></td>
         <td class="event">
@@ -33,8 +31,7 @@
             {% if event.scheme == "email" %}
                 {{ event.ua }}
             {% else %}
-                {{ event.scheme|upper }}
-                {{ event.method }}
+                {{ event.scheme|upper }} {{ event.method }}
                 {% if event.remote_addr %}
                 from {{ event.remote_addr }}
                 {% endif %}

templates/front/log.html

@@ -41,13 +41,11 @@
 
     {% if events %}
     <div class="table-responsive">
-    <table class="table" id="log">
+    <table class="table" id="log" data-url="{% url 'hc-ping-details' check.code '0' %}">
         {% for event in events %}
         {% if event.n %}
-        <tr class="ok" data-dt="{{ event.created.isoformat }}" data-url="{% url 'hc-ping-details' check.code event.n  %}">
-            <td class="n-cell">
-                <span class="hash">#</span>{{ event.n }}
-            </td>
+        <tr class="ok" data-dt="{{ event.created|isoformat }}">
+            <td>{{ event.n }}</td>
             <td class="date"></td>
             <td class="time"></td>
             <td class="event">
@@ -71,7 +69,6 @@
                 </div>
                 {% endif %}
 
-
                 {% if event.scheme == "email" %}
                     {{ event.ua }}
                     <span class="ua-body">
@@ -80,8 +77,7 @@
                         {% endif %}
                     </span>
                 {% else %}
-                    {{ event.scheme|upper }}
-                    {{ event.method }}
+                    {{ event.scheme|upper }} {{ event.method }}
                     {% if event.remote_addr %}
                     from {{ event.remote_addr }}
                     {% endif %}