Merge branch 'master' into job_headers

src/root/common.tt

@@ -7,13 +7,27 @@ USE Math;
 
 USE mibs=format("%.2f");
 
-
-BLOCK renderDateTime;
+# Formatted date time, in hydra-local timezone.
+# Use only where an HTML element cannot be used.
+BLOCK dateTimeText;
 date.format(timestamp, '%Y-%m-%d %H:%M:%S');
 END;
 
+# HTML-rendered date. Formatted in hydra-local timezone.
+# It is enhanced with JavaScript to show user-local and UTC time zones.
+BLOCK renderDateTime %]
+<time [% HTML.attributes(
+    "data-timestamp" => timestamp,
+    title => date.format(timestamp, '%Y-%m-%d %H:%M:%S (%Z)'),
+    datetime => date.format(timestamp, "%Y-%m-%dT%H:%M:%SZ", gmt => 1),
+) %] class="date is-absolute">
+[% INCLUDE dateTimeText %]
+</time>
+[% END;
 
-BLOCK renderRelativeDate;
+# Relative date, as text.
+# Use only where an HTML element cannot be used.
+BLOCK relativeDateText;
   ago = date.now - timestamp;
   IF ago >= 0 && ago < 60; THEN;
     ago _ 's ago';
@@ -28,6 +42,17 @@ BLOCK renderRelativeDate;
   END;
 END;
 
+# HTML-rendered relative date.
+# It is enhanced with JavaScript to show user-local and UTC time zones.
+BLOCK renderRelativeDate %]
+<time [% HTML.attributes(
+    "data-timestamp" => timestamp,
+    title => date.format(timestamp, '%Y-%m-%d %H:%M:%S (%Z)'),
+    datetime => date.format(timestamp, "%Y-%m-%dT%H:%M:%SZ", gmt => 1),
+) %] class="date is-relative">
+[% INCLUDE relativeDateText %]
+</time>
+[% END;
 
 BLOCK renderProjectName %]
 <a [% IF inRow %]class="row-link"[% END %] href="[% c.uri_for('/project' project) %]"><tt>[% project %]</tt></a>

src/root/layout.tt

@@ -13,6 +13,7 @@
 
     <script type="text/javascript" src="[% c.uri_for("/static/js/jquery/jquery-1.12.3.min.js") %]"></script>
     <script type="text/javascript" src="[% c.uri_for("/static/js/jquery/jquery-ui-1.10.4.min.js") %]"></script>
+    <script type="text/javascript" src="[% c.uri_for("/static/js/moment/moment-2.24.0.min.js") %]"></script>
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
@@ -57,7 +58,7 @@
             [% IF logo == "" %]
               Hydra
             [% ELSE %]
-              <img src="[% logo %]" alt="Hydra Logo" class="logo" />
+              <img src="[% c.uri_for(logo) %]" alt="Hydra Logo" class="logo" />
             [% END %]
           </a>
           <div class="nav-collapse collapse">

src/root/lazy_error.tt

@@ -0,0 +1,5 @@
+[% PROCESS common.tt %]
+
+[% FOREACH error IN errors %]
+   <div class="alert alert-error">[% HTML.escape(error).replace('\n', '<br/>') %]</div>
+[% END %]

src/root/static/css/hydra.css

@@ -147,3 +147,8 @@ td.step-status span.warn {
 .table thead th {
     border-top: 0;
 }
+
+.date {
+	cursor: help;
+	border-bottom: 1px dotted #999;
+}

src/root/static/js/common.js

@@ -97,6 +97,35 @@ $(document).ready(function() {
             }
         });
     });
+
+    /* Makes dates more user friendly. */
+    // Friendly date format
+    var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";
+    // Local timezone offset to display.
+    var tz = moment().format("Z");
+    $("time.date").each(function(i, el) {
+        var el = $(el);
+        var localTime = moment(el.data("timestamp"), "%X");
+        var hydraTime = el.attr("title");
+        if (el.hasClass("is-absolute")) {
+            el.attr( "title", [
+                "Adjusted to local time (" + tz + ")",
+                "Other timezones:",
+                "  UTC: " + localTime.clone().utc().format(DATE_FORMAT),
+                "  As Hydra reported: " + hydraTime,
+            ].join("\n"));
+            el.text(localTime.format(DATE_FORMAT));
+            el.addClass("is-local");
+        }
+        else if (el.hasClass("is-relative")) {
+            el.attr( "title", [
+                "Local (" + tz + "): " + localTime.format(DATE_FORMAT),
+                "UTC: " + localTime.clone().utc().format(DATE_FORMAT),
+                "As Hydra reported: " + hydraTime,
+            ].join("\n"));
+            el.addClass("is-local");
+        }
+    });
 });
 
 var tabsLoaded = {};
@@ -108,9 +137,13 @@ function makeLazyTab(tabName, uri) {
         if (id == '#' + tabName && !tabsLoaded[id]) {
           tabsLoaded[id] = 1;
           $('#' + tabName).load(uri, function(response, status, xhr) {
-            if (status == "error") {
+            var lazy = xhr.getResponseHeader("X-Hydra-Lazy") === "Yes";
+            if (status == "error" && !lazy) {
               $('#' + tabName).html("<div class='alert alert-error'>Error loading tab: " + xhr.status + " " + xhr.statusText + "</div>");
             }
+            else {
+              $('#' + tabName).html(response);
+            }
           });
         }
     });