Layout tweaks for the "Log" page.

hc/front/templatetags/hc_extras.py

@@ -58,3 +58,8 @@ def sortchecks(checks, key):
         checks.sort(key=last_ping_key, reverse=key.startswith("-"))
 
     return checks
+
+
+@register.filter
+def trunc(s):
+    return s[:150]

static/css/log.css

@@ -4,6 +4,7 @@
 
 #log {
     visibility: hidden;
+    font-size: 13px;
 }
 
 #log th {
@@ -18,47 +19,51 @@
     border-bottom: 1px solid #E5E5E5;
 }
 
-#log .datetime {
-    white-space: nowrap;
-}
-
 #log .date, #log .time {
-    display: inline-block;
-    width: 70px;
-}
-
-#log .protocol {
-    white-space: nowrap;
-    padding-left: 16px;
-    padding-right: 16px;
-}
-
-#log .ip {
-    padding-left: 16px;
-    padding-right: 16px;
-}
-
-#log td.ua {
-    font-family: monospace;
-    font-size: 11px;
-}
-
-#log td.actions {
     white-space: nowrap;
 }
 
-#log .ok {
-    color: #5cb85c;
+#log .details {
+    width: 100%;
 }
 
+#log .details div {
+    width: 700px;
+    white-space: nowrap;
+    overflow: hidden;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+
+@media (min-width: 1200px) {
+    #log .details div {
+        width: 900px;
+    }
+}
+
+#log .details span {
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 11.7px;
+    color: #888;
+}
+
+#log tr.ok {
+    cursor: pointer;
+}
+
+#log tr.ok:hover td {
+    background-color: #f5f5f5;
+}
+
+
 #log tr.missing td {
     color: #d9534f;
     background: #fff3f2;
 }
 
 #log .n-cell {
-    text-align: center;
     font-family: monospace;
+    text-align: right;
 }
 
 #log .hash {

static/js/log.js

@@ -1,5 +1,5 @@
 $(function () {
-    $(".details-btn").on("click", function() {
+    $("#log tr.ok").on("click", function() {
         $("#ping-details-body").text("Updating...");
         $('#ping-details-modal').modal("show");
 
@@ -17,12 +17,12 @@ $(function () {
     });
 
     function switchDateFormat(format) {
-        $("#log td.datetime").each(function(index, cell) {
-            var dt = moment(cell.getAttribute("data-raw"));
+        $("#log tr").each(function(index, row) {
+            var dt = moment(row.getAttribute("data-dt"));
             format == "local" ? dt.local() : dt.utc();
 
-            $(".date", cell).text(dt.format("MMM D"));
-            $(".time", cell).text(dt.format("HH:mm"));
+            $(".date", row).text(dt.format("MMM D"));
+            $(".time", row).text(dt.format("HH:mm"));
         })
     }
 

templates/front/log.html

@@ -31,62 +31,50 @@
     {% if events %}
     <div class="table-responsive">
     <table class="table" id="log">
-        <tr>
-            <th></th>
-            <th class="datetime">
-                <span class="date">Date</span>
-                <span class="time">Time</span>
-            </th>
-            <th class="ip">IP</th>
-            <th class="protocol">Protocol</th>
-            <th class="ua">User Agent</th>
-            <th></th>
-        </tr>
         {% for event in events %}
         {% if event.n %}
-        <tr class="ok {% if record.early %} early {% endif %}">
+        <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>
-            <td class="datetime" data-raw="{{ event.created.isoformat }}">
+            <td class="date"></td>
+            <td class="time"></td>
+            <td class="details">
                 <div>
-                    <span class="date"></span>
-                    <span class="time"></span>
-                    {% if 0 %}
-                        <span class="label label-tag">early</span>
+                {% if event.scheme == "email" %}
+                    {{ event.ua }}
+                    <span>
+                        {% if event.body %}
+                            -  {{ event.body|trunc }}
+                        {% endif %}
+                    </span>
+                {% else %}
+                    {{ event.scheme|upper }}
+                    {{ event.method }}
+                    {% if event.remote_addr %}
+                    from {{ event.remote_addr }}
+                    {% endif %}
+                    <span>
+                        {% if event.ua %}
+                        - {{ event.ua }}
+                        {% endif %}
+                        {% if event.body %}
+                        -  {{ event.body|trunc }}
+                        {% endif %}
+                    </span>
                 {% endif %}
                 </div>
             </td>
-            <td class="ip">
-                {{ event.remote_addr|default:"" }}
-            </td>
-            <td class="protocol">
-                {{ event.scheme }}
-            </td>
-
-            <td class="ua">
-                {{ event.ua }}
-            </td>
-
-            <td class="actions">
-                {% if event.body %}
-                <a href="#" class="details-btn" data-url="{% url 'hc-ping-details' check.code event.n %}">show body</a>
-                {% endif %}
-            </td>
         </tr>
         {% endif %}
         {% if event.check_status %}
-        <tr class="missing">
+        <tr class="missing" data-dt="{{ event.created.isoformat }}">
             <td class="n-cell">
                 <span class="icon-missing"></span>
             </td>
-            <td class="datetime" data-raw="{{ event.created.isoformat }}">
-                <div>
-                    <span class="date"></span>
-                    <span class="time"></span>
-                </div>
-            </td>
-            <td colspan="4" class="alert-info">
+            <td class="date"></td>
+            <td class="time"></td>
+            <td class="alert-info">
                 {% if event.channel.kind == "email" %}
                     Sent email alert to {{ event.channel.value }}
                 {% elif event.channel.kind == "slack" %}