Fix small glitches in bot-page and 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-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/polymer/polymer.html">
 
 <link rel="import" href="/res/imp/common/dynamic-table-behavior.html">
 <link rel="import" href="/res/imp/common/error-toast.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">
@@ skipping 43 matching lines @@
       <div hidden$="[[_not(_signed_in)]]">
         <task-list-data
           auth_headers="[[_auth_headers]]"
           query_params="[[_query_params]]"
           tasks="{{_items}}"
           busy="{{_busy}}"
           primary_map="{{_primary_map}}"
           primary_arr="{{_primary_arr}}">
         </task-list-data>
 
-        <error-toast></error-toast>
-
         <div class="horizontal layout">
 
           <task-filters
             primary_map="[[_primary_map]]"
             primary_arr="[[_primary_arr]]"
             columns="{{_columns}}"
             query_params="{{_query_params}}"
             filter="{{_filter}}">
           </task-filters>
 
@@ skipping 66 matching lines @@
                       href$="[[_taskLink(task.task_id)]]"
                       target="_blank">
                       [[task.name]]
                   </a>
                 </td>
                 <td hidden$="[[_hide('state', _columns.*)]]">
                   [[_column('state', task)]]
                   <paper-button
                       raised
                       hidden$="[[_cannotCancel(task,_permissions)]]"
-                      on-tap="_cancelTask">
+                      on-tap="_promptCancel">
                     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)]]
                   </td>
                 </template>
 
               </tr>
             </template> <!--tasks_table repeat-->
           </tbody>
         </table>
       </div>
 
     </swarming-app>
 
+    <paper-dialog id="prompt" modal on-iron-overlay-closed="_promptClosed">
+      <h2>Are you sure?</h2>
+      <div>Are you sure you want to [[_dialogPrompt]]?</div>
+      <div class="buttons">
+        <paper-button dialog-dismiss autofocus>No</paper-button>
+        <paper-button dialog-confirm>Yes</paper-button>
+      </div>
+    </paper-dialog>
+
+    <error-toast></error-toast>
+
   </template>
   <script>
   (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) {
@@ skipping 56 matching lines @@
       is: 'task-list',
       behaviors: [
           SwarmingBehaviors.DynamicTableBehavior,
       ],
 
       properties: {
         client_id: {
           type: String,
         },
 
+        // The task id to cancel if the prompt is accepted.
+        _toCancel: {
+          type: String,
+        },
+
         // For dynamic table.
         _columnMap: {
           type: Object,
           value: function() {
             var base = this._commonColumns();
             for (var attr in columnMap) {
               base[attr] = columnMap[attr];
             }
             return base;
           },
@@ skipping 21 matching lines @@
           return [retVal];
         }
         return retVal;
       },
 
       _cannotCancel: function(task, permissions) {
         return !(permissions && permissions.cancel_task &&
               this._column("state", task) === "PENDING");
       },
 
-      _cancelTask: function(e) {
+      _cancelTask: function() {
+        var url = "/_ah/api/swarming/v1/task/" + this._toCancel +"/cancel";
+        swarming.postWithToast(url, "Canceling task " + this._toCancel, this._auth_headers);
+        this.set("_toCancel", "");
+      },
+
+      _promptClosed: function(e) {
+        if (e.detail.confirmed) {
+          this._cancelTask();
+        }
+      },
+
+      _promptCancel: function(e) {
         var task = e.model.task;
         if (!task || !task.task_id) {
           console.log("Missing task info", task);
           return
         }
-        var id = task.task_id
-
-        var url = "/_ah/api/swarming/v1/task/" + id +"/cancel";
-        swarming.postWithToast(url, "Canceling task " + id, this._auth_headers);
+        this.set("_toCancel", task.task_id);
+        this.set("_dialogPrompt", 'cancel task "'+ task.name +'"');
+        this.$.prompt.open();
       },
 
       _tag: function(task, col) {
         if (!task || !task.tagMap) {
           return undefined;
         }
         return task.tagMap[col];
       },
 
       _taskLink: function(taskId) {
@@ skipping 18 matching lines @@
         if (state === "RUNNING" || state === "PENDING") {
           return "pending";
         }
         return "";
       }
 
     });
   })();
   </script>
 </dom-module>