Add aliases to bot-page and refactor duplicated code

appengine/swarming/elements/res/imp/botpage/bot-page.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:
 
     <bot-page>
 
   bot-page shows the tasks, events, and dimensions of a bot.
 
   This is a top-level element.
 
   Properties:
     bot_id: String, Used in testing to specify a bot_id
     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-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">
 
 
 <dom-module id="bot-page">
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning swarming-app-style">
 
     .header {
@@ skipping 15 matching lines @@
       max-height: 50px;
       width: initial;
       height: initial;
     }
 
     table {
       border-collapse: collapse;
       margin-left: 5px;
       margin-bottom: 5px;
     }
-    td, th {
+    td,
+    th {
       border: 1px solid #BBB;
       padding: 5px;
     }
 
-    .quarantined, .failed_task {
+    .quarantined,
+    .failed_task {
       background-color: #ffdddd;
     }
-    .dead {
+    .dead,
+    .bot_died {
       background-color: #cccccc;
     }
 
     .message {
       white-space: pre-line;
       font-family: monospace;
     }
 
     .bot_state {
       white-space: pre;
       font-family: monospace;
       margin-bottom: 10px;
     }
 
     .tabs {
       background-color: #1F78B4;
       color: #fff;
       max-width: 600px;
       --paper-checkbox-label-color: #fff;
       margin-left: 5px;
     }
 
-    .tasks_table, .events_table {
+    .tasks_table,
+    .events_table {
       border: 3px solid #1F78B4;
     }
 
     paper-checkbox {
       --paper-checkbox-label-color: #fff;
       --paper-checkbox-checked-color: #fff;
       --paper-checkbox-checkmark-color: #000;
       --paper-checkbox-unchecked-color: #fff;
       padding: 3px;
     }
 
     paper-tab.iron-selected {
       background-color: #A6CEE3;
       border: 3px solid #1F78B4;
       color: #000;
       font-weight: bold;
       text-decoration: underline;
     }
 
+    paper-dialog {
+      border-radius: 6px;
+    }
+
     </style>
 
     <url-param name="id"
       value="{{bot_id}}">
     </url-param>
     <url-param name="show_all_events"
       value="{{_show_all}}">
     </url-param>
     <url-param name="selected"
       value="{{_selected}}">
     </url-param>
     <url-param name="show_state"
       value="{{_show_state}}">
     </url-param>
 
     <swarming-app
       client_id="[[client_id]]"
       auth_headers="{{_auth_headers}}"
       permissions="{{_permissions}}"
       signed_in="{{_signed_in}}"
 
       busy="[[_busy]]"
       name="Swarming Bot Page">
 
       <h2 hidden$="[[_signed_in]]">You must sign in to see anything useful.</h2>
 
       <div hidden$="[[_not(_signed_in)]]">
 
         <bot-page-data
+          id="data"
           auth_headers="[[_auth_headers]]"
           bot_id="[[bot_id]]"
 
           bot="{{_bot}}"
           busy="{{_busy}}"
           events="{{_events}}"
           tasks="{{_tasks}}">
         </bot-page-data>
 
         <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>
 
         <div>
           <table>
             <tr class$="[[_isDead(_bot)]]">
               <td>Last Seen</td>
               <td title="[[_bot.human_last_seen_ts]]">
                 [[_timeDiffExact(_bot.last_seen_ts)]] ago</td>
               <td>
               <!-- dom-ifs are slightly less performant than hidden$=, but
               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>
               </td>
             </tr>
             <template is="dom-if" if="[[_bot.quarantined]]">
               <tr class="quarantined">
                 <td>Quarantined</td>
                 <td colspan="2">[[_quarantineMessage(_bot)]]</td>
               </tr>
@@ skipping 86 matching lines @@
             <thead>
               <tr>
                 <th>Task</th>
                 <th>Started</th>
                 <th>Duration</th>
                 <th>Result</th>
               </tr>
             </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>
                   <td>[[task.state]]</td>
                 </tr>
               </template>
             </tbody>
           </table>
         </template>
 
@@ skipping 18 matching lines @@
                   <td>
                     <a target="_blank" href$="[[_luciLink(_bot.version)]]">[[_shorten(_bot.version,'8')]]</a>
                   </td>
                 </tr>
               </template>
             </tbody>
           </table>
         </template>
         </div>
       </div>
+    </swarming-app>
 
-    </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(){
 
 
     Polymer({
       is: 'bot-page',
 
       behaviors: [
           SwarmingBehaviors.BotPageBehavior,
       ],
 
       properties: {
         bot_id: {
           type: String,
         },
         client_id: {
           type: String,
         },
 
+        _auth_headers: {
+          type: Object,
+        },
         _bot: {
           type: Object,
         },
+        _dialogPrompt: {
+          type: String,
+          value: "",
+        },
         _selected: {
           type: Number,
         },
         _show_all: {
           type: Boolean,
         },
         _show_state: {
           type: Boolean,
         }
       },
@@ skipping 10 matching lines @@
         return bot && !bot.is_dead && permissions.terminate_bot;
       },
 
       _concat: function(arr) {
         if (!arr) {
           return "";
         }
         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 [];
         }
         return events.filter(function(e){
           return showAll || e.message;
         });
       },
 
       _isDead(bot){
@@ skipping 16 matching lines @@
           return 1;
         }
         return 1 + arr.length;
       },
 
       _prettyPrint: function(obj) {
         obj = obj || {};
         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;
           // Sometimes, the quarantined message is actually in "error".  This
           // happens when the bot code has thrown an exception.
           if (msg === undefined || msg === "true" || msg === true) {
             msg = this._attribute(bot, "error");
           }
           return msg || "True";
         }
         return "";
       },
 
+      _refresh: function() {
+        this.$.data.request();
+      },
+
       _shorten: function(str, length) {
         if (!str || ! length) {
           return "";
         }
         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) {
           return "/user/task/" + task_id;
         }
         return undefined;
       },
 
       _toggleState: function() {
         this.set("_show_state", !this._show_state);
       }
 
     });
   })();
   </script>
 </dom-module>