Refactor post requests, implement bot cancel/terminate

appengine/swarming/elements/res/imp/botpage/bot-page.html

Index: appengine/swarming/elements/res/imp/botpage/bot-page.html
diff --git a/appengine/swarming/elements/res/imp/botpage/bot-page.html b/appengine/swarming/elements/res/imp/botpage/bot-page.html
index c0142e90cc56f7b9705a891d5bcd7035ef05103e..14b6a99dcde3f3c683b14c90afdd7b8a2cd21354 100644
--- a/appengine/swarming/elements/res/imp/botpage/bot-page.html
+++ b/appengine/swarming/elements/res/imp/botpage/bot-page.html
@@ -27,14 +27,16 @@
 <link rel="import" href="/res/imp/bower_components/iron-collapse/iron-collapse.html">
 <link rel="import" href="/res/imp/bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
 <link rel="import" href="/res/imp/bower_components/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">
 <link rel="import" href="/res/imp/bower_components/paper-tabs/paper-tabs.html">
-<link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="/res/imp/bower_components/polymer/polymer.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="/res/imp/common/error-toast.html">
 
 <link rel="import" href="bot-page-data.html">
 <link rel="import" href="bot-page-shared-behavior.html">
@@ -78,7 +80,7 @@
     .quarantined, .failed_task {
       background-color: #ffdddd;
     }
-    .dead {
+    .dead, .bot_died {

[jcgregorio, 2016/09/07 12:12:48]

Each class should be on a new line:

.dead,
.bot_died {

Here and above for .quarantined.

[kjlubick, 2016/09/07 12:36:38]

Done.  Should we add this to the style guide?

[jcgregorio, 2016/09/07 12:41:21]

Sure.

       background-color: #cccccc;
     }
 
@@ -121,6 +123,10 @@
       text-decoration: underline;
     }
 
+    paper-dialog {
+      border-radius: 6px;
+    }
+
     </style>
 
     <url-param name="id"
@@ -150,6 +156,7 @@
       <div hidden$="[[_not(_signed_in)]]">
 
         <bot-page-data
+          id="data"
           auth_headers="[[_auth_headers]]"
           bot_id="[[bot_id]]"
 
@@ -161,7 +168,7 @@
 
         <div class="header horizontal layout">
           <paper-input class="id_input" label="Bot id" value="{{bot_id}}"></paper-input>
-          <button>
+          <button on-click="_refresh">
             <iron-icon class="refresh" icon="icons:refresh"></iron-icon>
           </button>
         </div>
@@ -177,12 +184,12 @@
               prevent things from first drawing and then hiding. We prefer to
               not flash buttons or quarantined messages -->
                 <template is="dom-if" if="[[_canShutdown(_bot,_permissions)]]">
-                  <button class="raised">
+                  <button class="raised" on-click="_promptShutdown">
                     Shut Down Gracefully
                   </button>
                 </template>
                 <template is="dom-if" if="[[_canDelete(_bot,_permissions)]]">
-                  <button class="raised">
+                  <button class="raised" on-click="_promptDelete">
                     Delete
                   </button>
                 </template>
@@ -289,7 +296,7 @@
             </thead>
             <tbody>
               <template is="dom-repeat" items="{{_tasks}}" as="task">
-                <tr>
+                <tr class$="[[_taskClass(task)]]">
                   <td><a target="_blank" href$="[[_taskLink(task.task_id)]]">[[task.name]]</a></td>
                   <td>[[task.human_started_ts]]</td>
                   <td title="[[task.human_completed_ts]]">[[task.human_duration]]</td>
@@ -328,9 +335,19 @@
         </template>
         </div>
       </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(){
@@ -351,9 +368,16 @@
           type: String,
         },
 
+        _auth_headers: {
+          type: Object,
+        },
         _bot: {
           type: Object,
         },
+        _dialogPrompt: {
+          type: String,
+          value: "",
+        },
         _selected: {
           type: Number,
         },
@@ -384,6 +408,11 @@
         return arr.join(" | ");
       },
 
+      _deleteBot: function() {
+        swarming.postWithToast("/_ah/api/swarming/v1/bot/"+this.bot_id+"/delete",
+          "Deleting "+this.bot_id, this._auth_headers);
+      },
+
       _eventList(events, showAll) {
         if (!events) {
           return [];
@@ -420,6 +449,26 @@
         return JSON.stringify(obj, null, 2);
       },
 
+      _promptClosed: function(e) {
+        if (e.detail.confirmed) {
+          if (this._dialogPrompt.startsWith("shut down")) {
+            this._shutdownBot();
+          } else {
+            this._deleteBot();
+          }
+        }
+      },
+
+      _promptDelete: function() {
+        this.set("_dialogPrompt", "delete "+this.bot_id);
+        this.$.prompt.open();
+      },
+
+      _promptShutdown: function() {
+        this.set("_dialogPrompt", "shut down "+this.bot_id);
+        this.$.prompt.open();
+      },
+
       _quarantineMessage: function(bot) {
         if (bot && bot.quarantined) {
           var msg = bot.state.quarantined;
@@ -433,6 +482,10 @@
         return "";
       },
 
+      _refresh: function() {
+        this.$.data.request();
+      },
+
       _shorten: function(str, length) {
         if (!str || ! length) {
           return "";
@@ -440,10 +493,25 @@
         return str.substring(0, length);
       },
 
+      _shutdownBot: function() {
+        swarming.postWithToast("/_ah/api/swarming/v1/bot/"+this.bot_id+"/terminate",
+          "Shutting down "+this.bot_id, this._auth_headers);
+      },
+
       _task: function(bot) {
         return (bot && bot.task_id) || "idle";
       },
 
+      _taskClass: function(task) {
+        if (task && task.internal_failure) {
+          return "bot_died";
+        }
+        if (task && task.failure) {
+          return "failed_task";
+        }
+        return "";
+      },
+
       _taskLink: function(task_id) {
         // TODO(kjlubick): Migrate this to /newui/ when ready
         if (task_id) {