Update Ping Details dialog to also show formatted datetimes

Fixes: #975

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

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;
-}
+}

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}};

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>

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>