Milo: Add timestamp name and tooltip

milo/appengine/frontend/static/common/js/time.js

 // Copyright 2016 The LUCI Authors. All rights reserved.
 // Use of this source code is governed under the Apache License, Version 2.0
 // that can be found in the LICENSE file.
 
 // A Series of time based utilites for Milo.
+// Requires: moment.js, moment-timezone.js, jquery, jquery-ui
 
 
 (function(window) {
   'use strict';
 
   var milo = window.milo || {};
 
+  milo.tz = moment.tz.guess();
+
   /**
    * Given a Date, return a time string in the user's local timezone.
+   * Also return the time string in relative time from now, MTV time, and UTC
+   * time.
    */
   milo.formatDate = function(t) {
-    if (!t || t.toString() == "Invalid Date") {
-        return null;
+    var mt = moment.tz(t, milo.tz);
+    if (!mt.isValid()) {
+      return null;
     }
-    var shortDayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    var hover = mt.fromNow();
+    hover += "\n" + moment.tz(mt, "America/Los_Angeles").format("YYYY-MM-DD LT [(MTV)]");
+    hover += "\n" + moment.tz(mt, "UTC").format("YYYY-MM-DD LT [(UTC)]");
 
-    var month = (t.getMonth() + 1);
-    if (month < 10) {
-      month = '0' + month;
+    return {
+      main: mt.format("YYYY-MM-DD LT (z)"),
+      hover: hover
     }
-    var date = t.getDate();
-    if (date < 10) {
-      date = '0' + date;
+  };
+
+  /**
+   * Given two Dates (or a Date and null, prepresenting "now"), return
+   * a duration string, with a hover string of the start/end time in the user's
+   * timezone and locale.
+   */
+  milo.formatDuration = function(start, end) {
+    var st = moment.tz(start, milo.tz);
+    if (!st.isValid()) {
+      return null;
     }
-    var s = shortDayNames[t.getDay()] + ', ';
-    s += t.getFullYear() + '-' + month + '-' + date + ' ';
-    s += t.toLocaleTimeString() + ' (local time)';
-
-    return s;
+    var hover = st.format("[Started: ] YYYY-MM-DD LT (z)")
+    hover += "\nEnded: "
+    if (end == null) {
+      hover += "N/A";
+    } else {
+      var et =  moment.tz(end, milo.tz)
+      if (!et.isValid()) {
+        return null
+      }
+      hover += et.format("YYYY-MM-DD LT (z)");
+    }
+    return hover;
   };
 
   milo.makeTimesLocal = function() {
     var timeSpans = document.getElementsByClassName('local-time');
     for (var i = 0; i < timeSpans.length; i++) {
       var span = timeSpans[i];
       try {
         var oldTimestamp = span.innerText;
         var timestamp = span.getAttribute('data-timestamp');
         var date = new Date(parseInt(timestamp, 10));
         var newTimestamp = milo.formatDate(date);
         if (newTimestamp != null) {
-          span.innerText = newTimestamp;
-          span.setAttribute("title", oldTimestamp)
+          span.innerText = newTimestamp.main;
+          span.setAttribute("title", newTimestamp.hover);
         }
-      }
-      catch (e) {
+      } catch (e) {
         console.error('could not convert time of span', span, 'to local:', e)
       }
     }
   };
 
+  milo.annotateDurations = function() {
+    var durations = document.getElementsByClassName('duration');
+    for (var i = 0; i < durations.length; i++) {
+      var dur = durations[i];
+      try {
+        var start = dur.getAttribute('data-starttime');
+        var end = dur.getAttribute('data-endtime');
+        var hover = milo.formatDuration(start, end);
+        if (hover != null) {
+          dur.setAttribute("title", hover);
+        }
+      } catch (e) {
+        console.error('could not annotate duration', dur, e)
+      }
+    }
+  }
+
   window.milo = milo;
 
 }(window));