Add bot-page summary with utilization stats

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>
 
@@ skipping 25 matching lines @@
 
 <link rel="import" href="/res/imp/common/error-toast.html">
 <link rel="import" href="/res/imp/common/pageable-data.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="bot-page-data.html">
 <link rel="import" href="bot-page-shared-behavior.html">
+<link rel="import" href="bot-page-summary.html">
 
 
 <dom-module id="bot-page">
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning swarming-app-style single-page-style task-style">
       .message {
         white-space: pre-line;
         font-family: monospace;
       }
 
       .bot_state {
         white-space: pre;
         font-family: monospace;
         margin-bottom: 10px;
       }
 
       .tasks_table,
       .events_table {
         border: 3px solid #1F78B4;
       }
 
       .old_version {
         background-color: #ffffdd;
       }
 
+      .stats {
+        min-width: 700px;
+        flex-grow: 2;
+      }
+
+      #collapse {
+        max-width: 700px;
+      }
+
       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-dialog {
         border-radius: 6px;
@@ skipping 39 matching lines @@
           on-reload="_clearAndReload">
         </bot-page-data>
 
         <div class="header horizontal layout">
           <paper-input class="id_input" label="Bot id" value="{{bot_id}}"></paper-input>
           <button on-click="_refresh">
             <iron-icon class="refresh" icon="icons:refresh"></iron-icon>
           </button>
         </div>
 
-        <div>
-          <table>
-            <tr class$="[[_isDead(_bot)]]" title="Last time the bot contacted the server.">
-              <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" on-click="_promptShutdown">
-                    Shut Down Gracefully
-                  </button>
-                </template>
-                <template is="dom-if" if="[[_canDelete(_bot,_permissions)]]">
-                  <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" class="message">[[_quarantineMessage(_bot)]]</td>
+        <div class="horizontal wrap layout">
+          <div class="flex">
+            <table>
+              <tr class$="[[_isDead(_bot)]]" title="Last time the bot contacted the server.">
+                <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" on-click="_promptShutdown">
+                      Shut Down Gracefully
+                    </button>
+                  </template>
+                  <template is="dom-if" if="[[_canDelete(_bot,_permissions)]]">
+                    <button class="raised" on-click="_promptDelete">
+                      Delete
+                    </button>
+                  </template>
+                </td>
               </tr>
-            </template>
-            <tr>
-              <td>Current Task</td>
-              <td>
-                <a target="_blank" href$="[[_taskLink(_bot.task_id)]]">
-                  [[_task(_bot)]]
-                </a>
-              </td>
-              <td>
-              <!-- TODO(kjlubick) add the cancel button when swarming can
-              cancel running tasks -->
-              </td>
-            </tr>
-            <tr>
-              <td rowspan$="[[_numRows(_bot.dimensions)]]">Dimensions</td>
-            </tr>
-            <template
-                is="dom-repeat"
-                items="[[_bot.dimensions]]"
-                as="dim">
+              <template is="dom-if" if="[[_bot.quarantined]]">
+                <tr class="quarantined">
+                  <td>Quarantined</td>
+                  <td colspan="2" class="message">[[_quarantineMessage(_bot)]]</td>
+                </tr>
+              </template>
               <tr>
-                <td>[[dim.key]]</td>
-                <td>[[_concat(dim.value)]]</td>
+                <td>Current Task</td>
+                <td>
+                  <a target="_blank" href$="[[_taskLink(_bot.task_id)]]">
+                    [[_task(_bot)]]
+                  </a>
+                </td>
+                <td>
+                <!-- TODO(kjlubick) add the cancel button when swarming can
+                cancel running tasks -->
+                </td>
               </tr>
+              <tr>
+                <td rowspan$="[[_numRows(_bot.dimensions)]]">Dimensions</td>
+              </tr>
+              <template
+                  is="dom-repeat"
+                  items="[[_bot.dimensions]]"
+                  as="dim">
+                <tr>
+                  <td>[[dim.key]]</td>
+                  <td>[[_concat(dim.value)]]</td>
+                </tr>
+              </template>
+
+              <tr title="IP address that the server saw the connection from.">
+                <td>External IP</td>
+                <td><a href$="[[_bot.external_ip]]">[[_bot.external_ip]]</a></td>
+                <td></td>
+              </tr>
+              <tr
+                  class$="[[_classVersion(_server_version.bot_version,_bot.version)]]"
+                  title="Version is based on the content of swarming_bot.zip which is the swarming bot code. The bot won't update if quarantined, dead, or busy.">
+                <td>Bot Version</td>
+                <td>[[_shorten(_bot.version,'8')]]</td>
+                <td></td>
+              </tr>
+              <tr title="The version the server expects the bot to be using.">
+                <td>Expected Bot Version</td>
+                <td>[[_shorten(_server_version.bot_version,'8')]]</td>
+                <td></td>
+              </tr>
+              <tr title="First time ever a bot with this id contacted the server.">
+                <td>First seen</td>
+                <td title="[[_bot.human_first_seen_ts]]">
+                  [[_timeDiffApprox(_bot.first_seen_ts)]] ago
+                </td>
+                <td></td>
+              </tr>
+              <tr title="How the bot is authenticated by the server.">
+                <td>Authenticated as</td>
+                <td colspan=2>[[_bot.authenticated_as]]</td>
+              </tr>
+            </table>
+
+            <span class="title">State</span>
+
+            <template is="dom-if" if="[[_not(_show_state)]]">
+              <button on-click="_toggleState">
+                <iron-icon icon="icons:add-circle-outline"></iron-icon>
+              </button>
             </template>
 
-            <tr title="IP address that the server saw the connection from.">
-              <td>External IP</td>
-              <td><a href$="[[_bot.external_ip]]">[[_bot.external_ip]]</a></td>
-              <td></td>
-            </tr>
-            <tr
-                class$="[[_classVersion(_server_version.bot_version,_bot.version)]]"
-                title="Version is based on the content of swarming_bot.zip which is the swarming bot code. The bot won't update if quarantined, dead, or busy.">
-              <td>
-                  Bot Version</td>
-                <td>[[_shorten(_bot.version,'8')]]</td>
-              <td></td>
-            </tr>
-            <tr title="The version the server expects the bot to be using.">
-              <td>Expected Bot Version</td>
-                <td>[[_shorten(_server_version.bot_version,'8')]]</td>
-              <td></td>
-            </tr>
-            <tr title="First time ever a bot with this id contacted the server.">
-              <td>First seen</td>
-              <td title="[[_bot.human_first_seen_ts]]">
-                [[_timeDiffApprox(_bot.first_seen_ts)]] ago
-              </td>
-              <td></td>
-            </tr>
-            <tr title="How the bot is authenticated by the server.">
-              <td>Authenticated as</td>
-              <td>[[_bot.authenticated_as]]</td>
-              <td></td>
-            </tr>
-          </table>
+            <template is="dom-if" if="[[_show_state]]">
+              <button on-click="_toggleState">
+                <iron-icon icon="icons:remove-circle-outline"></iron-icon>
+              </button>
+            </template>
 
-          <span class="title">State</span>
+            <iron-collapse id="collapse" opened="[[_show_state]]">
+              <div class="bot_state">[[_prettyPrint(_bot.state)]]</div>
+            </iron-collapse>
+          </div>
 
-          <template is="dom-if" if="[[_not(_show_state)]]">
-            <button on-click="_toggleState">
-              <iron-icon icon="icons:add-circle-outline"></iron-icon>
-            </button>
-          </template>
-
-          <template is="dom-if" if="[[_show_state]]">
-            <button on-click="_toggleState">
-              <iron-icon icon="icons:remove-circle-outline"></iron-icon>
-            </button>
-          </template>
-
-          <iron-collapse id="collapse" opened="[[_show_state]]">
-            <div class="bot_state">[[_prettyPrint(_bot.state)]]</div>
-          </iron-collapse>
+          <div class="stats flex">
+            <bot-page-summary
+              tasks="[[_tasks]]">
+            </bot-page-summary>
+          </div>
         </div>
 
         <div class="tabs">
           <paper-tabs selected="{{_selected}}" no-bar>
             <paper-tab>Tasks</paper-tab>
             <paper-tab>Events</paper-tab>
           </paper-tabs>
 
           <template is="dom-if" if="[[_showEvents]]">
             <paper-checkbox checked="{{_show_all}}">
@@ skipping 32 matching lines @@
                 <th>Message</th>
                 <th>Type</th>
                 <th>Timestamp</th>
                 <th>Task ID</th>
                 <th>Version</th>
               </tr>
             </thead>
             <tbody>
               <template is="dom-repeat" items="{{_eventList(_show_all,_events.*)}}" as="event">
                 <tr>
-                  <td class="message">[[event.message]]</a></td>
+                  <td class="message">[[event.message]]</td>
                   <td>[[event.event_type]]</td>
                   <td>[[event.human_ts]]</td>
                   <td><a target="_blank" href$="[[_taskLink(event.task_id)]]">[[event.task_id]]</a></td>
                   <td class$="[[_classVersion(_server_version.bot_version,event.version)]]">
                     <a target="_blank" href$="[[_luciLink(event.version)]]">[[_shorten(event.version,'8')]]</a>
                   </td>
                 </tr>
               </template>
             </tbody>
           </table>
@@ skipping 10 matching lines @@
           parse="[[_parseTasks]]">
         </pageable-data>
         <pageable-data
           id="page_events"
           hidden$="[[_not(_showEvents)]]"
           busy="{{_busy3}}"
           label="Show more events"
           output="{{_events}}"
           parse="[[_parseEvents]]">
         </pageable-data>
-      </div>
+      </div> <!-- hidden when not signed in-->
     </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>
@@ skipping 207 matching lines @@
       },
 
       _toggleState: function() {
         this.set("_show_state", !this._show_state);
       }
 
     });
   })();
   </script>
 </dom-module>