From cbd755585a6b981570b78c845e1b456355eb083e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Sun, 18 Mar 2018 23:01:24 +0200
Subject: [PATCH] Layout tweaks for the "Log" page.

---
 hc/front/templatetags/hc_extras.py |  5 +++
 static/css/log.css                 | 41 +++++++++--------
 static/js/log.js                   | 10 ++---
 templates/front/log.html           | 70 +++++++++++++-----------------
 4 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/hc/front/templatetags/hc_extras.py b/hc/front/templatetags/hc_extras.py
index e0a107d8..b312d803 100644
--- a/hc/front/templatetags/hc_extras.py
+++ b/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]
diff --git a/static/css/log.css b/static/css/log.css
index 211bd758..f28ee467 100644
--- a/static/css/log.css
+++ b/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 {
+#log .date, #log .time {
     white-space: nowrap;
 }
 
-#log .date, #log .time {
-    display: inline-block;
-    width: 70px;
+#log .details {
+    width: 100%;
 }
 
-#log .protocol {
+#log .details div {
+    width: 700px;
     white-space: nowrap;
-    padding-left: 16px;
-    padding-right: 16px;
+    overflow: hidden;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
 }
 
-#log .ip {
-    padding-left: 16px;
-    padding-right: 16px;
+@media (min-width: 1200px) {
+    #log .details div {
+        width: 900px;
+    }
 }
 
-#log td.ua {
-    font-family: monospace;
-    font-size: 11px;
+#log .details span {
+    font-family: "Lucida Console", Monaco, monospace;
+    font-size: 11.7px;
+    color: #888;
 }
 
-#log td.actions {
-    white-space: nowrap;
+#log tr.ok {
+    cursor: pointer;
 }
 
-#log .ok {
-    color: #5cb85c;
+#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 {
diff --git a/static/js/log.js b/static/js/log.js
index 582da054..84dd33cc 100644
--- a/static/js/log.js
+++ b/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"));
         })
     }
 
diff --git a/templates/front/log.html b/templates/front/log.html
index df14e275..cc1f012e 100644
--- a/templates/front/log.html
+++ b/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 %}
-                </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>
+                    <span>
+                        {% if event.ua %}
+                        - {{ event.ua }}
+                        {% endif %}
+                        {% if event.body %}
+                        -  {{ event.body|trunc }}
+                        {% endif %}
+                    </span>
                 {% endif %}
+                </div>
             </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" %}