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 %}
- - - - - - - - {% for event in events %} {% if event.n %} - + - + + - - - - - - {% endif %} {% if event.check_status %} - + - - + +
- Date - Time - IPProtocolUser Agent
#{{ event.n }} +
- - - {% if 0 %} - early + {% if event.scheme == "email" %} + {{ event.ua }} + + {% if event.body %} + - {{ event.body|trunc }} + {% endif %} + + {% else %} + {{ event.scheme|upper }} + {{ event.method }} + {% if event.remote_addr %} + from {{ event.remote_addr }} {% endif %} -
-
- {{ event.remote_addr|default:"" }} - - {{ event.scheme }} - - {{ event.ua }} - - {% if event.body %} - show body + + {% if event.ua %} + - {{ event.ua }} + {% endif %} + {% if event.body %} + - {{ event.body|trunc }} + {% endif %} + {% endif %} +
-
- - -
-
+ {% if event.channel.kind == "email" %} Sent email alert to {{ event.channel.value }} {% elif event.channel.kind == "slack" %}