Add the ability to filter by time to task list.

appengine/swarming/ui/res/imp/tasklist/task-list-summary.html

 <!--
   This in an HTML Import-able file that contains the definition
   of the following elements:
 
     <task-list-summary>
 
   Usage:
 
     <task-list-summary></task-list-summary>
 
@@ skipping 59 matching lines @@
         <table>
           <thead>
             <th class="header right" colspan=2>Selected</th>
           </thead>
           <tr>
             <td class="right">
               Displayed:
             </td>
             <td class="left">[[num_tasks]]</td>
           </tr>
-          <tr title="By default, these counts are from the last 24 hours">
+          <tr title="These counts reflect the time period selected">
             <td class="right" >
               Total:
             </td>
             <td class="left">[[_selected_exact.count]]</td>
           </tr>
           <template is="dom-repeat" items="[[_selected_summary]]" as="item" index-as="idx">
-            <tr title="By default, these counts are from the last 24 hours">
+            <tr title="These counts reflect the time period selected">
               <td class="right">
-                <a href$="[[_makeURL(item.name,'true',columns.*,sort)]]">[[item.human]]</a>:
+                <a href$="[[_makeURL(item.name,'true',columns.*,sort,count_params.*)]]">[[item.human]]</a>:
               </td>
               <td class="left">[[_idx(_selected_counts, idx, _selected_counts.*)]]</td>
             </tr>
           </template>
         </table>
       </div>
 
       <div class="left column">
         <table>
           <thead>
-            <!-- TODO(kjlubick) when user can update time, use the human readable value instead of 12h-->
             <th class="header right" colspan=2>All Tasks in last 24h</th>
           </thead>
           <template is="dom-repeat" items="[[_all_summary]]" as="item" index-as="idx">
-            <tr title="By default, this is the last 24 hours">
+            <tr title="These counts are all from the last 24 hours">
               <td class="right">
                 <a href$="[[_makeURL(item.name,'',columns.*,sort)]]">[[item.human]]</a>:
               </td>
               <td class="left">[[_idx(_all_counts, idx, _all_counts.*)]]</td>
             </tr>
           </template>
         </table>
       </div>
 
     </div>
@@ skipping 120 matching lines @@
       _idx: function(obj, idx) {
         return obj && obj[idx] && obj[idx].count;
       },
 
       // Recount all the task counts. This will make use of _getJsonAsyncArr because
       // the results will be generated in a dom-repeat.
       _recountEverything: function() {
         if (!this.auth_headers || !this.count_params) {
           return;
         }
+        // We round 24 hours ago down to the nearest minute to mirror what
+        // the UI can select. Additionally, this may allow for easier
+        // server-side caching.
+        var now = new Date();
+        now.setSeconds(0);
+        now.setMilliseconds(0);
         // convert to seconds because API uses seconds.
-        var now = (new Date()).getTime()/1000;
-        var last2Days = now - 24 * 60 * 60;
-
-        // TODO(kjlubick): Once users can specify their own times, respect those limits here.
+        var last24hrs = now.getTime()/1000 - 24 * 60 * 60;
 
         var queryObj = {
-          start: [last2Days],
+          start: [last24hrs],
         };
-
+        // ALL_TASKS summary is always the last 24 hours
         for (var i = 0; i < ALL_TASKS_SUMMARY.length; i++) {
           if (this._all_counts.length < ALL_TASKS_SUMMARY.length) {
             this.push("_all_counts", {});
           }
           queryObj.state = [ALL_TASKS_SUMMARY[i].name];
           this._getJsonAsyncArr(i, "_all_counts","/api/swarming/v1/tasks/count","_busyArr1",
           this.auth_headers, queryObj);
         }
 
         queryObj = JSON.parse(JSON.stringify(this.count_params));
-        queryObj.start = [last2Days];
         this._getJsonAsync("_selected_exact","/api/swarming/v1/tasks/count","_busy3",
           this.auth_headers, queryObj);
 
         for (var j = 0; j < SELECTED_TASKS_SUMMARY.length; j++) {
           if (this._selected_counts.length < SELECTED_TASKS_SUMMARY.length) {
             this.push("_selected_counts", {});
           }
           queryObj.state = [SELECTED_TASKS_SUMMARY[j].name];
           this._getJsonAsyncArr(j, "_selected_counts","/api/swarming/v1/tasks/count","_busyArr2",
           this.auth_headers, queryObj);
         }
       },
 
       // _makeURL creates a task-list url that keeps the columns and sort requirements the same
       // while changing which state is represented. The preserveOthers signifies if other
       // filtering parameters (e.g. tags) should be kept as well.
       _makeURL: function(state, preserveOthers) {
         var fstr = "state:"+state;
-        if (preserveOthers) {
-          var fstr = encodeURIComponent(fstr);
-          var url = window.location.href;
-          if (url.indexOf(fstr+"&") !== -1) {
-            // The state filter is already on the list.
-            return undefined;
-          }
-          if (url.indexOf("f=state") === -1) {
-            return url + "&f=" + fstr;
-          }
-          // Things can't be in multiple states at once - so replace it.
-          // %3A is url encoded colon (:)
-          return url.replace(/f=state%3A[A-Z_]+/, `f=state%3A${fstr}`);
-        }
+        var cp = this.count_params;
         var params = {
           s: [this.sort],
           c: this.columns,
+          f: [],
+        }
+        if (cp.start && cp.start[0]) {
+          // timestamps gleaned from count_params are in seconds, so we convert back to ms.
+          params.st = [cp.start[0] + "000"];
+        }
+        if (cp.end && cp.end[0]) {
+          // timestamps gleaned from count_params are in seconds, so we convert back to ms.
+          params.et = [cp.end[0] + "000"];
+        } else {
+          params.n = [true];
         }
         if (state) {
-          params["f"] = [fstr];
+          params.f.push(fstr);
+        }
+        if (preserveOthers && cp.tags) {
+          cp.tags.forEach(function(t){
+            params.f.push(t);
+          });
+        }
+        if (!preserveOthers) {
+          params.n = [true];
         }
 
         return window.location.href.split('?')[0] + '?' + sk.query.fromParamSet(params);
       },
 
     });
     })();
   </script>
 </dom-module>