Swarming UI: Added piechart for timing information.

appengine/swarming/ui/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 14 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-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/polymer/polymer.html">
+<link rel="import" href="/res/imp/bower_components/svg-piechart/svg-piechart.html">
 
 <link rel="import" href="/res/imp/common/common-behavior.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">
 <link rel="import" href="task-retry-prompt.html">
@@ skipping 184 matching lines @@
                     <a
                         title="The list of bots that matches the list of dimensions"
                         href$="[[_botListLink(_request.properties.dimensions)]]">bots</a>
                     can run this task
                     (<span class$="[[_it(_bots_count.dead)]]">[[_bots_count.dead]]</span>
                     dead,
                     <span class$="[[_it(_bots_count.dead)]]">[[_bots_count.quarantined]]</span>
                     quarantined)
                   </td>
                 </tr>
-                <tr>
-                  <td>Created</td>
-                  <td title$="[[_request.created_ts]]">[[_request.human_created_ts]]</td>
-                </tr>
-                <template is="dom-if" if="[[_wasPickedUp(_result)]]">
-                  <tr>
-                    <td>Started</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 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 title$="[[_result.abandoned_ts]]">[[_result.human_abandoned_ts]]</td>
-                  </tr>
-                </template>
-                <tr>
-                  <td>Last Updated</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>
                 </template>
                 <tr>
-                  <td>Pending Time</td>
-                  <td>[[_pending(_result)]]</td>
-                </tr>
-                <tr>
-                  <td>Duration</td>
-                  <td>[[_result.human_duration]]</td>
-                </tr>
-                <tr>
                   <td>Priority</td>
                   <td>[[_request.priority]]</td>
                 </tr>
                 <tr>
                   <td>User</td>
                   <td>[[_request.user]]</td>
                 </tr>
                 <tr>
                   <td>Authenticated</td>
                   <td>[[_request.authenticated]]</td>
@@ skipping 149 matching lines @@
                 </tr>
                 <template is="dom-repeat" items="[[_request.properties.caches]]" as="cache">
                   <tr>
                     <td><span>[[cache.name]]</span>:<span>[[cache.path]]</span></td>
                   </tr>
                 </template>
 
               </tbody>
             </table>
 
+            <div class="title" hidden$="[[_not(_task_exists)]]">Task Timing Information</div>
+            <div class="horizontal layout wrap">
+              <div class="left flex">
+                <table class="task-info" hidden$="[[_not(_task_exists)]]">
+                  <tbody>
+                    <tr>
+                      <td>Created</td>
+                      <td title$="[[_request.created_ts]]">[[_request.human_created_ts]]</td>
+                    </tr>
+                    <template is="dom-if" if="[[_wasPickedUp(_result)]]">
+                      <tr>
+                        <td>Started</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 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 title$="[[_result.abandoned_ts]]">[[_result.human_abandoned_ts]]</td>
+                      </tr>
+                    </template>
+                    <tr>
+                      <td>Last updated</td>
+                      <td title$="[[_result.modified_ts]]">[[_result.human_modified_ts]]</td>
+                    </tr>
+                    <tr>
+                      <td>Pending Time</td>
+                      <td>[[_pending(_result)]]</td>
+                    </tr>
+                    <tr>
+                      <td>Duration</td>
+                      <td>[[_result.human_duration]]</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div class="right flex">
+                <template is="dom-if" if="[[_result.human_completed_ts]]">
+                  <center>
+                    <svg-piechart data="[[_computePiechartData(_result, _result.human_duration)]]"></svg-piechart>

[Sergey Berezin (google), 2017/06/05 22:43:02]

I'd use _result.duration, which I believe is always in seconds. This way you
don't have to translate it back to seconds again.

+                  </center>
+                </template>
+              </div>
+            </div>
+
             <div class="title" hidden$="[[_not(_task_exists)]]">Task Execution</div>
             <template is="dom-if" if="[[_wasPickedUp(_result)]]">
               <table hidden$="[[_not(_task_exists)]]">
                 <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)]]">
                     <a>Bot Dimensions</a>
@@ skipping 147 matching lines @@
       <div class="buttons">
         <paper-button dialog-dismiss>Cancel</paper-button>
         <paper-button dialog-confirm>OK</paper-button>
       </div>
     </paper-dialog>
 
     <interval-timer period="[[_refresh_interval]]" on-trigger="_softRefresh">
     </interval-timer>
 
   </template>
+  <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

[Ryan Tseng, 2017/06/05 22:25:48]

You're using polymer already, you might not actually need this import.  I think
this polyfill is used for browsers that did not support webcomponents.

[ayanaadylova, 2017/06/06 01:25:01]

Done.

   <script>
   (function(){
     Polymer({
       is: 'task-page',
 
       behaviors: [
           SwarmingBehaviors.CommonBehavior,
           SwarmingBehaviors.TaskBehavior,
       ],
 
@@ skipping 31 matching lines @@
           value: false,
         },
         _busyPendingCount: {
           type: Boolean,
           value: false,
         },
         _busyBotCount: {
           type: Boolean,
           value: false,
         },
+
         _dialog_prompt: {
           type: String,
           value: "",
         },
         _host_url: {
           type: String,
           value: function(){
             return window.location.hostname;
           }
         },
@@ skipping 111 matching lines @@
       },
 
       _command: function(request) {
         if (!request || !request.properties) {
           return "";
         }
         var args = request.properties.command || [];
         return args.join(" ");
       },
 
+      _convertToInteger: function(time) {

[Ryan Tseng, 2017/06/05 22:25:48]

I think instead of taking a human duration and converting it to an integer, this
function should take two Date objects and return the duration.  I favor that
approach because we should avoid parsing strings meant for human consumption
when machine readable versions are available.  And then just call this function
_duration(start, end)

You can use end.getTime() - start.getTime() to get the duration in seconds.

So in _computePiechartData, it would just be
function(result) {
  var created = new Date(result.created_ts);
  var started = new Date(result.started_ts);
  var completed = new Date(result.completed_ts);
  return [
      this._duration(created, started),
      this._duration(started, completed)];
}

[ayanaadylova, 2017/06/06 01:25:02]

Done.

+        if (time == "") {
+          return 0;
+        }
+        var args = time.split(" ");
+        var sec = 0;
+        args.forEach(function(element) {
+          if (element.includes("h")){
+            element = element.substring(0, element.length - 1);
+            sec += parseInt(element)*60*60;
+          }
+          if (element.includes("m")){
+            element = element.substring(0, element.length - 1);
+            sec += parseInt(element)*60;
+          }
+          if (element.includes("s")){
+            element = element.substring(0, element.length - 1);
+            sec += parseInt(element);
+          }
+        });
+        return sec;
+      },
+
+      _computePiechartData: function(result, duration) {
+        return [this._convertToInteger(this._pending(result)), this._convertToInteger(duration)]; 

[Sergey Berezin (google), 2017/06/05 22:43:02]

IIUC, this would draw the piechart with no legend. Unfortunately, svg-piechart
doesn't support legend, and only allows custom colors. Maybe we can use custom
colors, so the color in the piechart matches the color in the corresponding
table entry?

[ayanaadylova, 2017/06/06 01:25:01]

Done.

+      },
+
       _cost: function(result) {
         if (!result || !result.costs_usd || !result.costs_usd.length) {
           return 0;
         }
         return result.costs_usd[0].toFixed(4);
       },
 
       _disambiguate: function(taskId, result) {
         if (!taskId.endsWith("0") || !result) {
           return false;
@@ skipping 246 matching lines @@
           this._getJsonAsync("_other_running", "/api/swarming/v1/tasks/count", "_busyRunningCount", this._auth_headers, taskCountParams);
           // change running to pending
           taskCountParams.state = ["PENDING"];
           this._getJsonAsync("_other_pending", "/api/swarming/v1/tasks/count", "_busyPendingCount", this._auth_headers, taskCountParams);
         }
       }
     });
   })();
   </script>
 </dom-module>