Swarming UI: Added piechart for timing information.

appengine/swarming/ui/res/imp/taskpage/task-page.html

Index: appengine/swarming/ui/res/imp/taskpage/task-page.html
diff --git a/appengine/swarming/ui/res/imp/taskpage/task-page.html b/appengine/swarming/ui/res/imp/taskpage/task-page.html
index 3a042a58ffc650bd456cca1c0c39751762de6912..725d96894bae39a4f1284d59d7138e6c2aaeab9b 100644
--- a/appengine/swarming/ui/res/imp/taskpage/task-page.html
+++ b/appengine/swarming/ui/res/imp/taskpage/task-page.html
@@ -32,6 +32,7 @@
 <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">
@@ -236,38 +237,6 @@
                     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>
@@ -278,14 +247,6 @@
                     </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>
@@ -456,6 +417,63 @@
               </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)]]">
@@ -623,6 +641,7 @@
     </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({
@@ -674,6 +693,7 @@
           type: Boolean,
           value: false,
         },
+
         _dialog_prompt: {
           type: String,
           value: "",
@@ -805,6 +825,33 @@
         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;