Add the ability to filter by time to task list.

appengine/swarming/ui/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>
 
   task-list creats a dynamic table for viewing swarming tasks. Columns can be
   dynamically filtered and it supports client-side filtering.
 
   This is a top-level element.
 
   Properties:
     client_id: String, Oauth 2.0 client id.  It will be set by server-side
         template evaluation.
 
   Methods:
     None.
 
   Events:
     None.
 -->
 
 <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
 <link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="/res/imp/bower_components/paper-time-picker/paper-time-picker.html">
+<link rel="import" href="/res/imp/bower_components/polymer-paper-date-picker/paper-date-picker.html">
 <link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
 
 <link rel="import" href="/res/imp/common/dynamic-table-behavior.html">
 <link rel="import" href="/res/imp/common/pageable-data.html">
 <link rel="import" href="/res/imp/common/sort-toggle.html">
 <link rel="import" href="/res/imp/common/swarming-app.html">
 <link rel="import" href="/res/imp/common/task-behavior.html">
 <link rel="import" href="/res/imp/common/url-param.html">
 
 <link rel="import" href="task-filters.html">
@@ skipping 36 matching lines @@
           query_params="[[_query_params]]"
           tasks="[[_items]]"
           busy="{{_busy1)}}"
           dimensions="{{_dimensions}}"
           primary_map="{{_primary_map}}"
           primary_arr="{{_primary_arr}}">
         </task-list-data>
 
         <div class="horizontal layout">
           <task-filters
+            id="task_filters"
             dimensions="[[_dimensions]]"
             permissions="[[_permissions]]"
             primary_map="[[_primary_map]]"
             primary_arr="[[_primary_arr]]"
             special_columns="[[_specialColumns]]"
 
             columns="{{_columns}}"
             query_params="{{_query_params}}"
             filter="{{_filter}}"
 
-            on-cancel-all="_promptCancelAll">
+            on-cancel-all="_promptCancelAll"
+            on-prompt-date="_promptDate"
+            on-prompt-time="_promptTime">
           </task-filters>
 
            <task-list-summary
             auth_headers="[[_auth_headers]]"
             busy="{{_busy3}}"
             columns="[[_columns]]"
             count_params="[[_query_params]]"
             num_tasks="[[_filteredSortedItems.length]]"
             sort="[[_sortstr]]">
           </task-list-summary>
@@ skipping 163 matching lines @@
       <div class="buttons" >
         <paper-button dialog-dismiss autofocus hidden$="[[_started_canceling]]">
           Go Back - Don't Cancel Anything
         </paper-button>
         <paper-button dialog-dismiss autofocus hidden$="[[!_finished_canceling]]">
           Done
         </paper-button>
       </div>
     </paper-dialog>
 
+    <paper-dialog id="date_picker_dialog" modal on-iron-overlay-closed="_setDate">
+      <paper-date-picker id="date_picker"></paper-date-picker>
+      <div class="buttons">
+        <paper-button dialog-dismiss>Cancel</paper-button>
+        <paper-button dialog-confirm>OK</paper-button>
+      </div>
+    </paper-dialog>
+
+    <paper-dialog id="time_picker_dialog" modal on-iron-overlay-closed="_setTime">
+      <paper-time-picker id="time_picker"></paper-time-picker>
+      <div class="buttons">
+        <paper-button dialog-dismiss>Cancel</paper-button>
+        <paper-button dialog-confirm>OK</paper-button>
+      </div>
+    </paper-dialog>
+
   </template>
   <script>
   (function(){
     var specialColumns = ["deduped_from", "name", "state", "bot", "source_revision"];
 
     // 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) {
@@ skipping 165 matching lines @@
       _promptCancelAll: function(e) {
         this.$.mass_cancel.tags = e.detail.tags;
         this.$.mass_cancel.prompt();
         this.$.cancel_all_dialog.open();
       },
 
       _closeCancelAll: function() {
         this.$.cancel_all_dialog.close();
       },
 
+      _promptDate: function(e) {
+        this.$.date_picker.date = e.detail.date;
+        this.$.date_picker.name = e.detail.name;
+        this.$.date_picker_dialog.open();
+      },
+
+      _setDate: function(e) {
+        if (!e.detail.confirmed) {
+          return;
+        }
+        var date = this.$.date_picker.date;
+        var y = date.getFullYear();
+        var m = date.getMonth();
+        var d = date.getDate();
+        if ("start" === this.$.date_picker.name) {
+          this.$.task_filters.setStartDate(y,m,d);
+        } else {
+          this.$.task_filters.setEndDate(y,m,d);
+        }
+      },
+
+      _promptTime: function(e) {
+        this.$.time_picker.date = e.detail.date;
+        this.$.time_picker.hour = e.detail.date.getHours();
+        this.$.time_picker.minute = e.detail.date.getMinutes();
+        this.$.time_picker.name = e.detail.name;
+        this.$.time_picker_dialog.open();
+      },
+
+      _setTime: function(e) {
+        if (!e.detail.confirmed) {
+          return;
+        }
+        var h = this.$.time_picker.hour;
+        var m = this.$.time_picker.minute;
+        if ("start" === this.$.time_picker.name) {
+          this.$.task_filters.setStartTime(h,m,0);
+        } else {
+          this.$.task_filters.setEndTime(h,m,0);
+        }
+      },
+
       reload: function() {
         if (!this._auth_headers || !this._query_params) {
           return;
         }
         var url = "/api/swarming/v1/tasks/list?" + sk.query.fromParamSet(this._query_params);
         this.$.page_tasks.load(url,this._auth_headers);
       },
 
       _sourceLink: function(task) {
         var rev = this._attribute(task, "source_revision")[0];
@@ skipping 11 matching lines @@
         return task.tagMap[col];
       },
 
       _taskClass: function(task) {
         return this.stateClass(this._column("state", task));
       }
     });
   })();
   </script>
 </dom-module>