Add filter to 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>
 
   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-toast/paper-toast.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/sort-toggle.html">
 <link rel="import" href="/res/imp/common/swarming-app.html">
 <link rel="import" href="/res/imp/common/url-param.html">
 
 <link rel="import" href="task-filters.html">
 <link rel="import" href="task-list-data.html">
 
 <dom-module id="task-list">
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning swarming-app-style dynamic-table-style">
-
+      task-filters {
+        margin-bottom: 8px;
+        margin-right: 10px;
+      }
       .task-list th > span {
         /* Leave space for sort-toggle*/
         padding-right: 30px;
       }
+
+      /* These colors are from buildbot */
+      .failed {
+        background-color: #ffdddd;
+      }
+      .died {
+        background-color: #cccccc;
+      }
+      .exception {
+        background-color: #edd2ff;
+      }
+      .pending {
+        background-color: #fffc6c;
+      }
     </style>
 
     <url-param name="sort"
       value="{{_sortstr}}"
-      default_value="id:asc">
+      default_value="created_ts:desc">
     </url-param>
 
     <swarming-app
       client_id="[[client_id]]"
       auth_headers="{{_auth_headers}}"
+      permissions="{{_permissions}}"
       signed_in="{{_signed_in}}"
       busy="[[_busy]]"
       name="Swarming Task List">
 
       <h2 hidden$="[[_signed_in]]">You must sign in to see anything useful.</h2>
 
       <div hidden$="[[_not(_signed_in)]]">
         <task-list-data
           auth_headers="[[_auth_headers]]"
           query_params="[[_query_params]]"
           tasks="{{_items}}"
-          busy="{{_busy}}">
+          busy="{{_busy}}"
+          primary_map="{{_primary_map}}"
+          primary_arr="{{_primary_arr}}">
         </task-list-data>
 
+        <paper-toast id="toast"></paper-toast>
+
         <div class="horizontal layout">
 
           <task-filters
+            primary_map="[[_primary_map]]"
+            primary_arr="[[_primary_arr]]"
             columns="{{_columns}}"
             query_params="{{_query_params}}"
-            filter="{{_filter}}"
-            verbose="{{_verbose}}">
+            filter="{{_filter}}">
           </task-filters>
 
         </div>
 
         <table class="task-list">
           <thead on-sort_change="_sortChange">
           <!-- To allow for dynamic columns without having a lot of copy-pasted
           code, we break columns up into "special" and "plain" columns. Special
           columns require some sort of HTML output (e.g. anchor tags) and plain
           columns just output text.  The plain columns use Polymer functions to
           insert their text [_header(), _column(), _deviceColumn()].  Polymer
           functions do not allow HTML (to avoid XSS), so special columns, like id
           and task are inserted in a fixed order.
           -->
             <tr>
               <th>
                 <span>Task Name</span>
                 <sort-toggle
                     name="name"
                     current="[[_sort]]">
                 </sort-toggle>
               </th>
               <!-- This wonky syntax is the proper way to listen to changes on an
               array (we are listening to all subproperties). The element returned is
               not of much use, so we'll ignore it in _hide() and use this._columns.
               -->
               <th hidden$="[[_hide('state', _columns.*)]]">
-                <span>Status</span>
+                <span>State</span>
                 <sort-toggle
                     name="state"
                     current="[[_sort]]">
                 </sort-toggle>
               </th>
 
+              <th hidden$="[[_hide('deduped_from', _columns.*)]]">
+                <span>Deduped from</span>
+                <sort-toggle
+                    name="deduped_from"
+                    current="[[_sort]]">
+                </sort-toggle>
+              </th>
+
               <template
                     is="dom-repeat"
                     items="[[_plainColumns]]"
                     as="c">
                 <th hidden$="[[_hide(c)]]">
                   <span>[[_header(c)]]</span>
                   <sort-toggle
                       name="[[c]]"
                       current="[[_sort]]">
                   </sort-toggle>
                 </th>
               </template>
             </tr>
           </thead>
           <tbody>
             <template
                 id="tasks_table"
                 is="dom-repeat"
                 items="[[_filteredSortedItems]]"
                 as="task"
                 initial-count=50>
 
               <tr class$="[[_taskClass(task)]]">
                 <td>
                   <a
                       class="center"
-                      href$="[[_taskLink(task)]]"
+                      href$="[[_taskLink(task.task_id)]]"
                       target="_blank">
                       [[task.name]]
                   </a>
                 </td>
                 <td hidden$="[[_hide('state', _columns.*)]]">
-                  [[_column('state', task, _verbose)]]
-                  <!-- TODO(kjlubick): Add button to stop pending.-->
+                  [[_column('state', task)]]
+                  <paper-button
+                      raised
+                      hidden$="[[_cannotCancel(task,_permissions)]]"
+                      on-tap="_cancelTask">
+                    Cancel
+                  </paper-button>
+                </td>
+                <td hidden$="[[_hide('deduped_from', _columns.*)]]">
+                  <a
+                      class="center"
+                      href$="[[_taskLink(task.deduped_from)]]"
+                      target="_blank">
+                      [[_column('deduped_from',task)]]
+                  </a>
                 </td>
 
                 <template
                     is="dom-repeat"
                     items="[[_plainColumns]]"
                     as="c">
                   <td hidden$="[[_hide(c)]]">
-                    [[_column(c, task, _verbose)]]
+                    [[_column(c, task)]]
                   </td>
                 </template>
 
               </tr>
             </template> <!--tasks_table repeat-->
           </tbody>
         </table>
       </div>
 
     </swarming-app>
 
   </template>
   <script>
   (function(){
-    var specialColumns = ["name", "state"];
-    var columnMap = {};
+    var specialColumns = ["deduped_from", "name", "state"];
+    var columnMap = {
+      costs_usd: function(task) {
+        return this._attribute(task, "costs_usd", 0)[0];
+      },
+      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 = {};
 
     Polymer({
       is: 'task-list',
       behaviors: [
           SwarmingBehaviors.DynamicTableBehavior,
       ],
 
       properties: {
         client_id: {
           type: String,
         },
 
         // For dynamic table.
         _columnMap: {
           type: Object,
-          value: columnMap,
+          value: function() {
+            var base = this._commonColumns();
+            for (var attr in columnMap) {
+              base[attr] = columnMap[attr];
+            }
+            return base;
+          },
         },
         _headerMap: {
           type: Object,
           value: headerMap,
         },
         _specialColumns: {
           type: Array,
           value: specialColumns,
         },
         _specialSort: {
           type: Object,
           value: specialSort,
         },
       },
 
       _attribute: function(task, col, def) {
-        var retVal = task[col] || [def];
+        if (def === undefined) {
+          def = "none";
+        }
+        var retVal = this._tag(task, col) || task[col] || [def];
         if (!Array.isArray(retVal)) {
           return [retVal];
         }
         return retVal;
       },
 
-      _taskLink: function(task) {
+      _cannotCancel: function(task, permissions) {
+        return !(permissions && permissions.can_cancel_task &&
+              this._column("state", task) === "PENDING");
+      },
+
+      _cancelTask: function(e) {
+        var task = e.model.task;
+        if (!task || !task.task_id) {
+          console.log("Missing task info", task);
+          return
+        }
+        var id = task.task_id
+
+        // Keep toast displayed until we hear back from the cancel.
+        this.$.toast.duration = 0;
+        this.$.toast.text="Canceling task " + id;
+        this.$.toast.open();
+        var url = "/_ah/api/swarming/v1/task/" + id +"/cancel";
+        sk.request("POST", url, undefined, this._auth_headers).then(function(response) {
+          this.$.toast.close();
+          this.$.toast.show({
+            text: "Request sent.  Response: "+response,
+            duration: 3000,
+          });
+        }.bind(this)).catch(function(reason) {
+          console.log("Cancellation failed", reason);
+          this.$.toast.close();
+          this.$.toast.show({
+            text: "Request failed.  Reason: "+reason,
+            duration: 3000,
+          });
+        }.bind(this));
+      },
+
+      _tag: function(task, col) {
+        if (!task || !task.tagMap) {
+          return undefined;
+        }
+        return task.tagMap[col];
+      },
+
+      _taskLink: function(taskId) {
+        if (!taskId) {
+          return undefined;
+        }
         // TODO(kjlubick) Make this point to /newui/ when appropriate.
-        return "/restricted/task/"+task.task_id;
+        return "/restricted/task/"+taskId;
       },
 
       _taskClass: function(task) {
-        // TODO(kjlubick): Color tasks?
+        var state = this._column("state", task);
+        if (state === "CANCELED" ||state === "TIMED_OUT" || state === "EXPIRED") {
+          return "exception";
+        }
+        if (state === "BOT_DIED") {
+          return "died";
+        }
+        if (state === "COMPLETED (FAILURE)") {
+          return "failed";
+        }
+        if (state === "RUNNING" || state === "PENDING") {
+          return "pending";
+        }
         return "";
       }
 
     });
   })();
   </script>
 </dom-module>