Make the buttons on task-page work

appengine/swarming/elements/res/imp/taskpage/task-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:
 
     <task-page>
 
@@ skipping 15 matching lines @@
 
 <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-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/polymer/polymer.html">
 
 <link rel="import" href="/res/imp/common/common-behavior.html">
+<link rel="import" href="/res/imp/common/error-toast.html">
+<link rel="import" href="/res/imp/common/interval-timer.html">
 <link rel="import" href="/res/imp/common/single-page-style.html">
 <link rel="import" href="/res/imp/common/swarming-app.html">
 <link rel="import" href="/res/imp/common/task-behavior.html">
 <link rel="import" href="/res/imp/common/url-param.html">
 
 <link rel="import" href="task-page-data.html">
 
 <dom-module id="task-page">
   <template>
     <style include="iron-flex iron-flex-alignment swarming-app-style single-page-style task-style">
@@ skipping 42 matching lines @@
     <url-param name="id"
       value="{{task_id}}">
     </url-param>
     <url-param name="request_detail"
       value="{{_request_detail}}">
     </url-param>
     <url-param name="show_raw"
       value="{{_show_raw}}">
     </url-param>
     <url-param name="refresh"
-      value="{{_refresh}}"
+      value="{{_refresh_interval}}"
       default_value="10">
     </url-param>
 
     <swarming-app
       client_id="[[client_id]]"
       auth_headers="{{_auth_headers}}"
+      permissions="{{_permissions}}"
+      profile="{{_profile}}"
       signed_in="{{_signed_in}}"
 
       busy="[[_busy]]"
       name="Swarming Task Page">
 
       <h2 hidden$="[[_signed_in]]">You must sign in to see anything useful.</h2>
 
       <div hidden$="[[_not(_signed_in)]]">
 
         <task-page-data
+          id="data"
           auth_headers="[[_auth_headers]]"
+          refresh_interval="[[_refresh_interval]]"
           task_id="[[task_id]]"
 
           busy="{{_busy}}"
           request="{{_request}}"
           result="{{_result}}"
           stdout="{{_stdout}}">
         </task-page-data>
 
         <div class="horizontal layout wrap">
           <div class="left flex">
             <div class="horizontal layout">
               <paper-input class="id_input" label="Task id" value="{{task_id}}"></paper-input>
               <button on-click="_refresh">
                 <iron-icon class="refresh" icon="icons:refresh"></iron-icon>
               </button>
-              <button on-click="_retry"><span>Retry</span></button>
-              <button on-click="_cancel">Cancel</button>
+              <button on-click="_promptRetry">Retry</button>
+              <template is="dom-if" if="[[_canCancelTask(_result,_permissions)]]">
+                <button on-click="_promptCancel">Cancel</button>
+              </template>
             </div>
             <table>
               <tr>
                 <td>Name</td>
                 <td>[[_request.name]]</td>
               </tr>
               <tr>
                 <td>State</td>
                 <td class$="[[_stateClass(_result)]]">[[_state(_result)]]</td>
               </tr>
               <tr>
                 <td>Created</td>
-                <td>[[_request.human_created_ts]]</td>
+                <td title$="[[_request.created_ts]]">[[_request.human_created_ts]]</td>
               </tr>
               <template is="dom-if" if="[[_wasPickedUp(_result)]]">
                 <tr>
                   <td>Started</td>
-                  <td>[[_result.human_started_ts]]</td>
+                  <td title$="[[_result.started_ts]]">[[_result.human_started_ts]]</td>
                 </tr>
               </template>
               <template is="dom-if" if="[[_wasNotPickedUp(_result)]]">
                 <tr>
                   <td>Expires</td>
                   <td>[[_expires(_request)]]</td>
                 </tr>
               </template>
               <template is="dom-if" if="[[_result.human_completed_ts]]">
                 <tr>
                   <td>Completed</td>
-                  <td>[[_result.human_completed_ts]]</td>
+                  <td title$="[[_result.completed_ts]]">[[_result.human_completed_ts]]</td>
                 </tr>
               </template>
               <template is="dom-if" if="[[_result.human_abandoned_ts]]">
                 <tr>
                   <td>Abandoned</td>
-                  <td>[[_result.human_abandoned_ts]]</td>
+                  <td title$="[[_result.abandoned_ts]]">[[_result.human_abandoned_ts]]</td>
                 </tr>
               </template>
               <tr>
                 <td>Last Updated</td>
-                <td>[[_result.human_modified_ts]]</td>
+                <td title$="[[_result.modified_ts]]">[[_result.human_modified_ts]]</td>
               </tr>
               <template is="dom-if" if="[[_result.deduped_from]]">
                 <tr>
                   <td><b>Deduped from</b></td>
                   <td>
                     <a href$="[[_taskLink(_result.deduped_from)]]">
                       [[_result.deduped_from]]
                     </a>
                   </td>
                 </tr>
@@ skipping 32 matching lines @@
               </template>
               <template is="dom-if" if="[[_request.parent_task_id]]">
                 <tr>
                   <td>Parent Task</td>
                   <td>
                     <a href$="[[_taskLink(_request.parent_task_id)]]">[[_request.parent_task_id]]</a>
                   </td>
                 </tr>
               </template>
               <tr>
-                <td rowspan$="[[_rowspan(_request.properties.dimensions)]]">Requested Dimensions</td>
+                <td rowspan$="[[_rowspan(_request.properties.dimensions)]]">
+                  <a
+                      title="The list of bots that matches the list of dimensions"
+                      href$="[[_botListLink(_request.properties.dimensions)]]">
+                    Requested Dimensions
+                  </a>
+                </td>
               </tr>
               <template is="dom-repeat" items="{{_request.properties.dimensions}}" as="dimension">
                 <tr>
-                  <td><b>[[dimension.key]]:</b> [[dimension.value]]</td>
+                  <td><b>[[dimension.key]]:</b> [[_alias(dimension)]]</td>
                 </tr>
               </template>
               <tr>
                 <td>Isolated Inputs</td>
                 <td>
                   <a href$="[[_isolateLink(_request.properties.inputs_ref)]]">
                     [[_request.properties.inputs_ref.isolated]]
                   </a>
                 </td>
               </tr>
@@ skipping 81 matching lines @@
             </table>
 
             <div class="title">Task Execution</div>
             <template is="dom-if" if="[[_wasPickedUp(_result)]]">
               <table>
                 <tr>
                   <td>Bot assigned to task</td>
                   <td><a href$="[[_botLink(_result.bot_id)]]">[[_result.bot_id]]</td>
                 </tr>
                 <tr>
-                  <td rowspan$="[[_rowspan(_result.bot_dimensions)]]">Bot Dimensions</td>
+                  <td rowspan$="[[_rowspan(_result.bot_dimensions)]]">
+                    <a>Bot Dimensions</a>
+                  </td>
                 </tr>
                 <template is="dom-repeat" items="[[_result.bot_dimensions]]" as="dimension">
                   <tr>
-                    <td><b>[[dimension.key]]:</b> [[_join(dimension.value," | ")]]</td>
+                    <td><b>[[dimension.key]]:</b> [[_alias(dimension)]]</td>
                   </tr>
                 </template>
 
                 <tr>
                   <td>Exit code</td>
                   <td>[[_result.exit_code]]</td>
                 </tr>
                 <tr>
                   <td>Try number</td>
                   <td>[[_result.try_number]]</td>
@@ skipping 57 matching lines @@
               <div class="tabs">
                 <paper-tabs selected="{{_show_raw}}" no-bar>
                   <paper-tab disabled$="[[_noMilo(_request)]]">Milo Output</paper-tab>
                   <paper-tab>Raw Output</paper-tab>
                 </paper-tabs>
               </div>
 
               <paper-input
                 class="refresh_input"
                 label="Refresh Interval (seconds)"
-                value="{{_refresh}}"
+                value="{{_refresh_interval}}"
                 auto-validate
                 min="1"
                 max="1000"
                 pattern="[0-9]+">
               </paper-input>
             </div>
 
             <template is="dom-if" if="[[_supportsMilo(_request,_show_raw)]]">
               <iframe id="miloFrame" class="milo tabbed" src$="[[_getMiloLink(milo_prefix,task_id)]]"></iframe>
             </template>
             <template is="dom-if" if="[[_show_raw]]">
               <div class="code stdout tabbed">[[_stdout]]</div>
             </template>
           </div>
         </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>
+
+    <interval-timer period="[[_refresh_interval]]" on-trigger="_refreshOutput">
+    </interval-timer>
 
   </template>
   <script>
   (function(){
     Polymer({
       is: 'task-page',
 
       behaviors: [
           SwarmingBehaviors.CommonBehavior,
           SwarmingBehaviors.TaskBehavior,
       ],
 
       properties: {
         task_id: {
           type: String,
         },
         client_id: {
           type: String,
         },
         milo_prefix: {
           type: String,
         },
 
+
+        _dialogPrompt: {
+          type: String,
+          value: "",
+        },
+        _refresh_interval: {
+          type: Number,
+        },
         _request: {
           type: Object,
           observer: "_requestUpdated"
         },
         _request_detail: {
           type: Boolean,
+        },
+        _result: {
+          type: Object,
+        },
+        _stdout: {
+          type: String,
         }
       },
 
+      _alias: function(dim) {
+        var values = dim.value;
+        if (!Array.isArray(values)) {
+          values = [values];
+        }
+        if (swarming.alias.has(dim.key)) {
+          values.forEach(function(v, i){
+            values[i] = swarming.alias.apply(v, dim.key);
+          });
+        }
+        return values.join(" | ");
+      },
+
       _bytes: function(sizeInBytes) {
         return sk.human.bytes(sizeInBytes);
       },
 
+      _canCancelTask: function(result, permissions) {
+        return result && result.state === "PENDING" && permissions.cancel_task;
+      },
+
+      _cancelTask: function() {
+        var url = "/_ah/api/swarming/v1/task/" + this.task_id +"/cancel";
+        swarming.postWithToast(url, "Canceling task " + this.task_id, this._auth_headers);
+      },
+
       _cipdRowspan: function(request, result) {
         if (!request || !request.properties || !request.properties.cipd_input) {
           return 0;
         }
         // We always need to at least double the number of packages because we
         // show the path and then the requested.  If the actual package info
         // is available, we triple the number of packages to account for that.
         var rowSpan = (request.properties.cipd_input.packages || []).length;
         if (result && result.cipd_pins && result.cipd_pins.packages) {
           rowSpan *= 3;
@@ skipping 60 matching lines @@
       },
 
       _isolateLink: function(ref) {
         if (!ref || !ref.isolatedserver) {
           return undefined;
         }
         return ref.isolatedserver + "/browse?namespace="+ref.namespace +
           "&hash=" + ref.isolated;
       },
 
-      _join: function(arr, s) {
-        arr = arr || [];
-        return arr.join(s);
-      },
-
       _noMilo: function(result) {
         return !this._tag(result, "allow_milo");
       },
 
       _pending: function(result) {
         if (!result.created_ts) {
           return "";
         }
         var end = result.started_ts || result.abandoned_ts || new Date();
         // In the case of deduplicated tasks, started_ts comes before the task.
         if (end <= result.created_ts) {
           return "0s";
         }
         return this._timeDiffExact(result.created_ts, end);
       },
 
+      _promptClosed: function(e) {
+        if (e.detail.confirmed) {
+          if (this._dialogPrompt.startsWith("cancel")) {
+            this._cancelTask();
+          } else {
+            this._retryTask();
+          }
+        }
+      },
+
+      _promptCancel: function() {
+        this.set("_dialogPrompt", "cancel task "+this.task_id);
+        this.$.prompt.open();
+      },
+
+      _promptRetry: function() {
+        this.set("_dialogPrompt", "retry task "+this.task_id);
+        this.$.prompt.open();
+      },
+
+      _refresh: function() {
+        this.$.data.reload();
+      },
+
+      _refreshOutput: function() {
+        this.$.data.reloadStdout();
+        var miloFrame = this.$$("iframe")
+        if (miloFrame) {
+          miloFrame.src = this._getMiloLink(this.milo_prefix,this.task_id);
+        }
+      },
+
       _requestUpdated: function(request) {
         if (this._noMilo(request)) {
           this.set("_show_raw", 1);
         }
       },
 
+      _retryTask: function() {
+        if (!this._request) {
+          sk.errorMessage("Task not yet loaded", 3000);
+          return;
+        }
+        var newTask = {
+          expiration_secs: this._request.expiration_secs,
+          name: this._request.name +" (retry)",
+          parent_task_id: this._request.parent_task_id,
+          priority: this._request.priority,
+          properties:this._request.properties,
+          tags: this._request.tags,
+          user: this._profile.email,
+          service_account: this._request.service_account,
+        }
+        swarming.postWithToast("/_ah/api/swarming/v1/tasks/new", "Retrying task " + this.task_id,
+          this._auth_headers, newTask)
+        .then(function(response) {
+            response = JSON.parse(response);
+            if (response && response.task_id) {
+              this.set("task_id", response.task_id);
+            }
+          }.bind(this), function(e) {
+            console.log("Task could not be retried", e);
+          }
+        );
+      },
+
       _rowspan: function(dims) {
         dims = dims || [];
         return dims.length + 1;
       },
 
       _supportsMilo: function(request, showRaw) {
         return !showRaw && request && this._tag(request, "allow_milo");
       },
 
       _state: function(result) {
@@ skipping 31 matching lines @@
         return result && result.state !== this.PENDING && result.state !== this.CANCELED && result.state != this.EXPIRED;
       },
 
       _wasNotPickedUp: function(result) {
         return result && !this._wasPickedUp(result);
       },
     });
   })();
   </script>
 </dom-module>