Refactor post requests, implement bot cancel/terminate

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/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">
 
 <dom-module id="task-list">
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning swarming-app-style dynamic-table-style">
@@ skipping 39 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>
 
-        <paper-toast id="toast"></paper-toast>
+        <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 222 matching lines @@
       },
 
       _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));
+        swarming.postWithToast(url, "Canceling task " + id, this._auth_headers);
       },
 
       _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>