From 04fede0897f59ce1985ad886f34aeb5eaec1eeb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Fri, 17 Aug 2018 20:53:50 +0300 Subject: [PATCH] Auto-refresh current status in log page. --- hc/front/urls.py | 1 + hc/front/views.py | 18 +++++++++-- static/js/adaptive-setinterval.js | 42 +++++++++++++++++++++++++ static/js/checks.js | 47 ++-------------------------- static/js/log.js | 18 +++++++++++ templates/front/log.html | 20 +++--------- templates/front/log_status_text.html | 14 +++++++++ templates/front/my_checks.html | 2 +- 8 files changed, 100 insertions(+), 62 deletions(-) create mode 100644 static/js/adaptive-setinterval.js create mode 100644 templates/front/log_status_text.html diff --git a/hc/front/urls.py b/hc/front/urls.py index 819fc821..a0c52263 100644 --- a/hc/front/urls.py +++ b/hc/front/urls.py @@ -8,6 +8,7 @@ check_urls = [ path('pause/', views.pause, name="hc-pause"), path('remove/', views.remove_check, name="hc-remove-check"), path('log/', views.log, name="hc-log"), + path('status/', views.status_single), path('last_ping/', views.ping_details, name="hc-last-ping"), path('channels//enabled', views.switch_channel, name="hc-switch-channel"), path('pings//', views.ping_details, name="hc-ping-details"), diff --git a/hc/front/views.py b/hc/front/views.py index 656e7ea3..b51b64db 100644 --- a/hc/front/views.py +++ b/hc/front/views.py @@ -32,6 +32,8 @@ import requests 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") def _tags_statuses(checks): @@ -92,13 +94,12 @@ def status(request): checks = list(Check.objects.filter(user_id=request.team.user_id)) details = [] - tmpl = get_template("front/last_ping_cell.html") for check in checks: ctx = {"check": check} details.append({ "code": str(check.code), "status": check.get_status(), - "last_ping": tmpl.render(ctx) + "last_ping": LAST_PING_TMPL.render(ctx) }) tags_statuses, num_down = _tags_statuses(checks) @@ -366,6 +367,19 @@ def log(request, code): return render(request, "front/log.html", ctx) +@login_required +def status_single(request, code): + check = get_object_or_404(Check, code=code) + if check.user_id != request.team.user.id: + return HttpResponseForbidden() + + status = check.get_status() + return JsonResponse({ + "status": status, + "status_text": STATUS_TEXT_TMPL.render({"check": check}) + }) + + @login_required def channels(request): if request.method == "POST": diff --git a/static/js/adaptive-setinterval.js b/static/js/adaptive-setinterval.js new file mode 100644 index 00000000..91eb8d12 --- /dev/null +++ b/static/js/adaptive-setinterval.js @@ -0,0 +1,42 @@ +function adaptiveSetInterval(fn) { + // unconditionally run every minute + setInterval(fn, 60000); + + // scheduleRun() keeps calling fn and decreasing quota + // every 3 seconds, until quota runs out. + var quota = 0; + var scheduledId = null; + function scheduleRun() { + if (quota > 0) { + quota -= 1; + clearTimeout(scheduledId); + scheduledId = setTimeout(scheduleRun, 3000); + fn(); + } + } + + document.addEventListener("visibilitychange", function() { + if (document.visibilityState == "visible") { + // tab becomes visible: reset quota + if (quota == 0) { + quota = 20; + scheduleRun(); + } else { + quota = 20; + } + } else { + // lost visibility, clear quota + quota = 0; + } + }); + + // user moves mouse: reset quota + document.addEventListener("mousemove", function() { + if (quota == 0) { + quota = 20; + scheduleRun(); + } else { + quota = 20; + } + }); +} diff --git a/static/js/checks.js b/static/js/checks.js index 1d489d7c..cbb0e077 100644 --- a/static/js/checks.js +++ b/static/js/checks.js @@ -135,10 +135,11 @@ $(function () { } }); - // Auto-refresh + // Schedule refresh to run every 3s when tab is visible and user + // is active, every 60s otherwise var lastStatus = {}; var lastPing = {}; - function refresh() { + adaptiveSetInterval(function() { $.ajax({ url: "/checks/status/", dataType: "json", @@ -171,48 +172,6 @@ $(function () { } } }); - } - - // unconditionally refresh every minute - setInterval(refresh, 60000); - - // scheduleRefresh() keeps calling refresh() and decreasing quota - // every 3 seconds, until quota runs out. - var quota = 0; - var scheduledId = null; - function scheduleRefresh() { - if (quota > 0) { - quota -= 1; - clearTimeout(scheduledId); - scheduledId = setTimeout(scheduleRefresh, 3000); - refresh(); - } - } - - document.addEventListener("visibilitychange", function() { - if (document.visibilityState == "visible") { - // tab becomes visible: reset quota - if (quota == 0) { - quota = 20; - scheduleRefresh(); - } else { - quota = 20; - } - } else { - // lost visibility, clear quota - quota = 0; - } - }); - - // user moves mouse: reset quota - document.addEventListener("mousemove", function() { - if (quota == 0) { - quota = 20; - scheduleRefresh(); - } else { - quota = 20; - - } }); // Copy to clipboard diff --git a/static/js/log.js b/static/js/log.js index 27bfd5c8..e2069047 100644 --- a/static/js/log.js +++ b/static/js/log.js @@ -24,6 +24,24 @@ $(function () { }, 300); }); + var code = document.getElementById("edit-timeout").dataset.code; + var statusUrl = "/checks/" + code + "/status/"; + var lastStatusText = ""; + adaptiveSetInterval(function() { + $.ajax({ + url: statusUrl, + dataType: "json", + timeout: 2000, + success: function(data) { + if (data.status_text == lastStatusText) { + return; + } + lastStatusText = data.status_text; + $("#log-status-icon").attr("class", "status icon-" + data.status); + $("#log-status-text").text(data.status_text); + } + }); + }); // Copy to clipboard var clipboard = new Clipboard('button.copy-btn'); diff --git a/templates/front/log.html b/templates/front/log.html index 58a1da1e..2de8a34e 100644 --- a/templates/front/log.html +++ b/templates/front/log.html @@ -46,26 +46,14 @@

Current Status

- {% with check.get_status as status %} - - {% endwith %}
- + - {% if status == "down" %} - This check is down. Last ping was {{ check.last_ping|naturaltime }}. - {% elif status == "up" %} - This check is up. Last ping was {{ check.last_ping|naturaltime }}. - {% elif status == "grace" %} - This check is late. Last ping was {{ check.last_ping|naturaltime }}. - {% elif status == "paused" %} - This check is paused. - {% elif status == "new" %} - This check has never received a ping. - {% endif %} + + {% include "front/log_status_text.html" %}
@@ -299,8 +287,10 @@ + + {% endcompress %} {% endblock %} diff --git a/templates/front/log_status_text.html b/templates/front/log_status_text.html new file mode 100644 index 00000000..7ecc1385 --- /dev/null +++ b/templates/front/log_status_text.html @@ -0,0 +1,14 @@ +{% load humanize %} +{% with check.get_status as status %} + {% if status == "down" %} + This check is down. Last ping was {{ check.last_ping|naturaltime }}. + {% elif status == "up" %} + This check is up. Last ping was {{ check.last_ping|naturaltime }}. + {% elif status == "grace" %} + This check is late. Last ping was {{ check.last_ping|naturaltime }}. + {% elif status == "paused" %} + This check is paused. + {% elif status == "new" %} + This check has never received a ping. + {% endif %} +{% endwith %} \ No newline at end of file diff --git a/templates/front/my_checks.html b/templates/front/my_checks.html index 75cc8e4a..40dc26b5 100644 --- a/templates/front/my_checks.html +++ b/templates/front/my_checks.html @@ -79,8 +79,8 @@ - + {% endcompress %} {% endblock %}