Three choices in timezone switcher (UTC / check's timezone / browser's timezone). Fixes #278

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable changes to this project will be documented in this file.
 - Show the number of downtimes and total downtime minutes in "Check Details" page
 - Add the `pruneflips` management command
 - Add Mattermost integration (#276)
+- Three choices in timezone switcher (UTC / check's timezone / browser's timezone) (#278)
 
 ## Bug Fixes
 - Fix javascript code to construct correct URLs when running from a subdirectory (#273)

hc/front/tests/test_log.py

@@ -22,7 +22,7 @@ class LogTestCase(BaseTestCase):
 
         self.client.login(username="alice@example.org", password="password")
         r = self.client.get(self.url)
-        self.assertContains(r, "Local Time", status_code=200)
+        self.assertContains(r, "Browser's time zone", status_code=200)
 
     def test_team_access_works(self):
 

static/js/details.js

@@ -109,12 +109,11 @@ $(function () {
     var lastFormat = "local";
     function switchDateFormat(format) {
         lastFormat = format;
+        var tz = format == "local" ? spacetime().timezone().name : format;
         $("#log tr").each(function(index, row) {
-            var dt = moment(row.getAttribute("data-dt"));
+            var s = spacetime(row.getAttribute("data-dt")).goto(tz);
-            format == "local" ? dt.local() : dt.utc();
+            $(".date", row).text(s.unixFmt("MMM d"));
-
+            $(".time", row).text(s.unixFmt("h:mm"));                
-            $(".date", row).text(dt.format("MMM D"));
-            $(".time", row).text(dt.format("HH:mm"));
         })
 
         // The table is initially hidden to avoid flickering as we convert dates.

static/js/log.js

@@ -4,19 +4,18 @@ $(function () {
         $('#ping-details-modal').modal("show");
 
         $.get(this.dataset.url, function(data) {
-            $("#ping-details-body" ).html(data);
+            $("#ping-details-body").html(data);
         });
 
         return false;
     });
 
     function switchDateFormat(format) {
+        var tz = format == "local" ? spacetime().timezone().name : format;
         $("#log tr").each(function(index, row) {
-            var dt = moment(row.getAttribute("data-dt"));
+            var s = spacetime(row.getAttribute("data-dt")).goto(tz);
-            format == "local" ? dt.local() : dt.utc();
+            $(".date", row).text(s.unixFmt("MMM d"));
-
+            $(".time", row).text(s.unixFmt("h:mm"));                
-            $(".date", row).text(dt.format("MMM D"));
-            $(".time", row).text(dt.format("HH:mm"));
         })
     }
 

static/js/update-timeout-modal.js

@@ -163,5 +163,6 @@ $(function () {
     $(".kind-cron").click(showCron);
 
     $("#schedule").on("keyup", updateCronPreview);
+    $("#tz").on("change", updateCronPreview);
 
 });

templates/front/details.html

@@ -208,14 +208,21 @@
             Log
             <small>Click on individual items for details</small>
             <div id="format-switcher" class="btn-group pull-right" data-toggle="buttons">
-                <label class="btn btn-default btn-xs" data-format="utc">
+                <label class="btn btn-default btn-xs" data-format="UTC">
-                    <input type="radio" name="date-format" checked>
+                    <input type="radio" name="date-format">
                     UTC
-                </label>
+                </label>                
+
+                {% if check.kind == "cron" and check.tz != "UTC" %}
+                <label class="btn btn-default btn-xs" data-format="{{ check.tz }}">
+                    <input type="radio" name="date-format">
+                    {{ check.tz }}
+                </label>                
+                {% endif %}
 
                 <label class="btn btn-default btn-xs active" data-format="local">
                     <input type="radio" name="date-format">
-                    Local Time
+                    Browser's time zone
                 </label>
             </div>
         </h2>
@@ -255,7 +262,7 @@
 <script src="{% static 'js/bootstrap-select.min.js' %}"></script>
 <script src="{% static 'js/nouislider.min.js' %}"></script>
 <script src="{% static 'js/snippet-copy.js' %}"></script>
-<script src="{% static 'js/moment.min.js' %}"></script>
+<script src="{% static 'js/spacetime.min.js' %}"></script>
 <script src="{% static 'js/update-timeout-modal.js' %}"></script>
 <script src="{% static 'js/adaptive-setinterval.js' %}"></script>
 <script src="{% static 'js/details.js' %}"></script>

templates/front/details_events.html

@@ -87,11 +87,9 @@
     {% endfor %}
     </table>
 
-    {% if check.n_pings > 20 %}
     <p class="text-center">
         <a href="{% url 'hc-log' check.code %}">Show More&hellip;</a>
     </p>
-    {% endif %}
 {% else %}
     <div class="alert alert-info">This check has not received any pings yet.</div>
 {% endif %}

templates/front/log.html

@@ -19,14 +19,21 @@
 
             <li id="format-switcher-container" class="pull-right">
                 <div id="format-switcher" class="btn-group" data-toggle="buttons">
-                    <label class="btn btn-default btn-xs" data-format="utc">
+                    <label class="btn btn-default btn-xs" data-format="UTC">
                         <input type="radio" name="date-format" checked>
                         UTC
                     </label>
 
+                    {% if check.kind == "cron" and check.tz != "UTC" %}
+                    <label class="btn btn-default btn-xs" data-format="{{ check.tz }}">
+                        <input type="radio" name="date-format">
+                        {{ check.tz }}
+                    </label>                
+                    {% endif %}
+
                     <label class="btn btn-default btn-xs active" data-format="local">
                         <input type="radio" name="date-format">
-                        Local Time
+                        Browser's time zone
                     </label>
                 </div>
             </li>
@@ -164,7 +171,7 @@
 {% compress js %}
 <script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
 <script src="{% static 'js/bootstrap.min.js' %}"></script>
-<script src="{% static 'js/moment.min.js' %}"></script>
+<script src="{% static 'js/spacetime.min.js' %}"></script>
 <script src="{% static 'js/log.js' %}"></script>
 {% endcompress %}
 {% endblock %}