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>
+                        <font color="#EE8788">[[_pending(_result)]]</font>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>Duration</td>
+                      <td>
+                        <font color="#1E78B4">[[_result.human_duration]]</font>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div class="right flex">
+                <template is="dom-if" if="[[_result.human_completed_ts]]">
+                  <center>
+                    <svg-piechart 
+                      data="[[_computePiechartData(_result)]]"
+                      colors="[&quot;rgb(238,135,136)&quot;, &quot;rgb(30,120,180)&quot;]">

[kjlubick, 2017/06/07 12:12:58]

Are these colors okay for people with various types of color blindness?

If you aren't sure, see http://mkweb.bcgsc.ca/colorblind/
For example, the orange could be 230,159,0 and the blue could be 0,114, 178 and
those colors are sufficiently different under the most common color blind
conditions.

[ayanaadylova, 2017/06/07 17:01:54]

Done.

+                    </svg-piechart>
+                  </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 198 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(" ");
       },
 
+      _computePiechartData: function(result) {
+        var created = new Date(result.created_ts);

[kjlubick, 2017/06/07 12:12:58]

I don't think you need to create Date objects, *_ts should already be Dates
because of
https://github.com/luci/luci-py/blob/84f310bf2dc0b37dfbefc3ad207fb3175413e41e...
which is called in task-page-data:
https://github.com/luci/luci-py/blob/84f310bf2dc0b37dfbefc3ad207fb3175413e41e...

[ayanaadylova, 2017/06/07 17:01:54]

Done.

+        var started = new Date(result.started_ts);
+        var completed = new Date(result.completed_ts);
+        return [
+          this._duration(created, started),
+          this._duration(started, completed)];
+      },
+
       _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;
         }
         return result.try_number > 1;
       },
 
+      _duration: function(start, end) {
+        return end.getTime() - start.getTime();
+      },
+
       _empty: function(array) {
         return !array || array.length == 0;
       },
 
       _eq: function(a,b) {
         return a === b;
       },
 
       _expires: function(request) {
         var delta = parseInt(request.expiration_secs);
@@ skipping 232 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>