Make durations look nice on the task list

appengine/swarming/elements/build/elements.html

Index: appengine/swarming/elements/build/elements.html
diff --git a/appengine/swarming/elements/build/elements.html b/appengine/swarming/elements/build/elements.html
index 26e499a1751bf56bb4c49d90995d59dbb2d8eba2..1dbcae54b63a63f054aa2f05a5c226dea9f25ee0 100644
--- a/appengine/swarming/elements/build/elements.html
+++ b/appengine/swarming/elements/build/elements.html
@@ -24251,7 +24251,8 @@ the fleet.">
         // Date.toString() looks like "Mon Aug 29 2016 09:03:41 GMT-0400 (EDT)"
         // we want to extract the time zone part and append it to the
         // locale time.
-        var str = (new Date()).toString();
+        var now = new Date();
+        var str = now.toString();
         var timeZone = str.substring(str.indexOf("("))
 
         // Do any preprocessing here
@@ -24266,11 +24267,19 @@ the fleet.">
           t.tagMap = tagMap;
           TIMES.forEach(function(time) {
             if (t[time]) {
-              var d = new Date(t[time]);
-              var locale = d.toLocaleString();
+              t[time] = new Date(t[time]);
+              var locale = t[time].toLocaleString();
               t["human_"+time] = locale + " " + timeZone;
             }
           });
+          // Running tasks have no duration set, so we can figure it out.
+          if (!t.duration && t.state === "RUNNING" && t.started_ts){
+            t.duration = (now - t.started_ts) / 1000;
+          }
+          // Make the duration human readable
+          if (t.duration){
+            t.human_duration = sk.human.strDuration(t.duration);
+          }
         });
         return this._list.items;
       }
@@ -24396,6 +24405,9 @@ the fleet.">
   (function(){
     var specialColumns = ["deduped_from", "name", "state"];
 
+    // Given a time attribute like "abandoned_ts", humanTime returns a function
+    // that returns the human-friendly version of that attribute. The human
+    // friendly time was created in task-list-data.
     function humanTime(attr) {
       return function(task) {
         return this._attribute(task, "human_" + attr)[0];
@@ -24408,6 +24420,7 @@ the fleet.">
         return this._attribute(task, "costs_usd", 0)[0];
       },
       created_ts: humanTime("created_ts"),
+      duration: humanTime("duration"),
       modified_ts: humanTime("modified_ts"),
       started_ts: humanTime("started_ts"),
       state: function(task) {
@@ -24430,6 +24443,8 @@ the fleet.">
       "user": "Requesting User",
     };
 
+    // Given a time attribute like "abandoned_ts", sortableTime returns a function
+    // that compares the tasks based on the attribute.  This is used for sorting.
     function sortableTime(attr) {
       // sort times based on the string they come with, formatted like
       // "2016-08-16T13:12:40.606300" which sorts correctly.  Locale time
@@ -24438,13 +24453,14 @@ the fleet.">
         var aCol = this._attribute(a, attr)[0];
         var bCol = this._attribute(b, attr)[0];
 
-        return dir * swarming.naturalCompare(aCol, bCol);
+        return dir * (aCol - bCol);
       }
     }
     var specialSort = {
       abandoned_ts: sortableTime("abandoned_ts"),
       completed_ts: sortableTime("completed_ts"),
       created_ts: sortableTime("created_ts"),
+      duration: sortableTime("duration"),
       modified_ts: sortableTime("modified_ts"),
       started_ts: sortableTime("started_ts"),
     };
@@ -24542,7 +24558,7 @@ the fleet.">
           return undefined;
         }
         // TODO(kjlubick) Make this point to /newui/ when appropriate.
-        return "/restricted/task/"+taskId;
+        return "/user/task/"+taskId;
       },
 
       _taskClass: function(task) {