From 24e5e83bbcdd221e99642c0265251f8cbbf0bf0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C4=93teris=20Caune?= <cuu508@gmail.com>
Date: Wed, 29 May 2024 15:43:06 +0300
Subject: [PATCH] Update Ping Details dialog to also show formatted datetimes
Fixes: #975
---
CHANGELOG.md | 1 +
static/css/ping_details.css | 14 +++++++++++++-
static/js/ping_details.js | 7 +++++++
templates/front/checks.html | 2 ++
templates/front/ping_details.html | 21 ++++++++++++++++++++-
5 files changed, 43 insertions(+), 2 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 48b34d66..b153e13c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to this project will be documented in this file.
- Update email notifications to include the timestamps of status flips
- Update the Sign In page to hide "Email Link" option if SMTP is not configured (#922)
- Update Slack integration to use channel name as the integration name (#1003)
+- Update Ping Details dialog to also show formatted datetimes (#975)
### Bug Fixes
- Fix hc.front.views.docs_search to handle words "AND", "OR", "NOT" as queries
diff --git a/static/css/ping_details.css b/static/css/ping_details.css
index a39a0558..88562ad2 100644
--- a/static/css/ping_details.css
+++ b/static/css/ping_details.css
@@ -11,6 +11,18 @@
margin: 0 0 24px 0;
}
+#ping-details-body .times {
+ display: flex;
+ gap: 10px;
+}
+
+#ping-details-body .times > div {
+ min-width: 100px;
+ background: var(--panel-bg);
+ border: 1px solid var(--border-color);
+ padding: 8px 10px;
+}
+
#ping-details-body .ua {
font-size: 11px;
font-family: monospace;
@@ -58,4 +70,4 @@
#ping-details-body .download {
margin: 10px 0 0 0;
-}
\ No newline at end of file
+}
diff --git a/static/js/ping_details.js b/static/js/ping_details.js
index cb899c57..0a954b73 100644
--- a/static/js/ping_details.js
+++ b/static/js/ping_details.js
@@ -6,6 +6,13 @@ function loadPingDetails(url) {
$.get(url, function(data) {
$("#ping-details-body").html(data);
+ var created = moment.unix($("#ping-details-body .times").data("dt"));
+ $("#ping-details-body .times span").each(function(i, el) {
+ var format = el.dataset.format;
+ var createdNaive = format == "local" ? created.local() : created.tz(format);
+ el.innerText = createdNaive.format("MMM D, HH:mm");
+ });
+
var htmlPre = $("#email-body-html pre");
if (htmlPre.length) {
var opts = {USE_PROFILES: {html: true}};
diff --git a/templates/front/checks.html b/templates/front/checks.html
index d8d4e2ae..fa433383 100644
--- a/templates/front/checks.html
+++ b/templates/front/checks.html
@@ -153,6 +153,8 @@
<script src="{% static 'js/initialize-timezone-selects.js' %}"></script>
<script src="{% static 'js/update-timeout-modal.js' %}"></script>
<script src="{% static 'js/adaptive-setinterval.js' %}"></script>
+<script src="{% static 'js/moment.min.js' %}"></script>
+<script src="{% static 'js/moment-timezone-with-data-10-year-range.min.js' %}"></script>
<script src="{% static 'js/ping_details.js' %}"></script>
<script src="{% static 'js/checks.js' %}"></script>
<script src="{% static 'js/add-check-modal.js' %}"></script>
diff --git a/templates/front/ping_details.html b/templates/front/ping_details.html
index 3321b26e..d1bda41c 100644
--- a/templates/front/ping_details.html
+++ b/templates/front/ping_details.html
@@ -18,10 +18,29 @@
</h3>
<div class="row">
- <div class="col-sm-6">
+ <div class="col-sm-12">
<p>
<strong>Time Received</strong>
<code>{{ ping.created.isoformat }}</code>
+ <div class="times" data-dt="{{ ping.created|timestamp }}">
+ {% if check.kind == "simple" or check.tz != "UTC" %}
+ <div>
+ UTC<br>
+ <span data-format="UTC"></span>
+ </div>
+ {% endif %}
+ {% if check.kind == "cron" or check.kind == "oncalendar" %}
+ <div data-format="{{ check.tz }}">
+ {{ check.tz }}<br>
+ <span data-format="{{ check.tz }}"></span>
+ </div>
+ {% endif %}
+ <div>
+ Browser's time zone<br>
+ <span data-format="local"></span>
+ </div>
+ </div>
+
</p>
</div>