Make times easier to read on task list

appengine/swarming/elements/res/imp/tasklist/task-list.html

 <!--
   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.
 
   This in an HTML Import-able file that contains the definition
   of the following elements:
 
     <task-list>
 
@@ skipping 193 matching lines @@
           </tbody>
         </table>
       </div>
 
     </swarming-app>
 
   </template>
   <script>
   (function(){
     var specialColumns = ["deduped_from", "name", "state"];
+
+    function humanTime(attr) {

[stephana, 2016/08/29 13:41:10]

There is a lot of abstraction, could you add a comment that describes what
humanTime does?

[kjlubick, 2016/08/29 13:46:33]

Done.  This idiom is probably more Go-like, but I think is worth the
deduplication value.

+      return function(task) {
+        return this._attribute(task, "human_" + attr)[0];
+      }
+    }
     var columnMap = {
+      abandoned_ts: humanTime("abandoned_ts"),
+      completed_ts: humanTime("completed_ts"),
       costs_usd: function(task) {
         return this._attribute(task, "costs_usd", 0)[0];
       },
+      created_ts: humanTime("created_ts"),
+      modified_ts: humanTime("modified_ts"),
+      started_ts: humanTime("started_ts"),
       state: function(task) {
         var state = this._attribute(task, "state")[0];
         if (state === "COMPLETED") {
 
           if (this._attribute(task, "failure", false)[0]) {
             return "COMPLETED (FAILURE)";
           }
           var tryNum = this._attribute(task, "try_number", "-1")[0];
           if (tryNum === "0") {
             return "COMPLETED (DEDUPED)";
           }
           return "COMPLETED (SUCCESS)";
         }
         return state;
       },
     };
     var headerMap = {
       "user": "Requesting User",
     };
-    var specialSort = {};
+
+    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
+      // (used in the columns), does not.
+      return function(dir, a, b) {
+        var aCol = this._attribute(a, attr)[0];
+        var bCol = this._attribute(b, attr)[0];
+
+        return dir * swarming.naturalCompare(aCol, bCol);
+      }
+    }
+    var specialSort = {
+      abandoned_ts: sortableTime("abandoned_ts"),
+      completed_ts: sortableTime("completed_ts"),
+      created_ts: sortableTime("created_ts"),
+      modified_ts: sortableTime("modified_ts"),
+      started_ts: sortableTime("started_ts"),
+    };
 
     Polymer({
       is: 'task-list',
       behaviors: [
           SwarmingBehaviors.DynamicTableBehavior,
       ],
 
       properties: {
         client_id: {
           type: String,
@@ skipping 98 matching lines @@
         if (state === "RUNNING" || state === "PENDING") {
           return "pending";
         }
         return "";
       }
 
     });
   })();
   </script>
 </dom-module>