Add UI to new botlist to show summary

appengine/swarming/elements/res/imp/botlist/bot-list-summary.html

+<!--
+  This in an HTML Import-able file that contains the definition
+  of the following elements:
+
+    <bot-list-summary>
+
+
+  Usage:
+
+    <bot-list-summary></bot-list-summary>
+
+    This element summarizes and displays the results of the current query.
+
+  Properties:
+    filtered_bots: Array<Object>, The bot list that is currently being shown
+        (after filtering). The alive, dead, etc bots in this will be counted up
+        for the summary.
+    fleet: Object, counts of all bots in the fleet.  Contains "alive", "busy",
+        "idle", "dead", and "quarantined".
+  Methods:
+    None.
+
+  Events:
+    None.
+-->
+
+
+<link rel="import" href="/res/imp/common/swarming-app.html">
+
+<link rel="import" href="bot-list-shared.html">
+
+<dom-module id="bot-list-summary">
+  <template>
+    <style include="swarming-app-style">
+      :host {
+        display: block;
+        border-left: 1px solid black;
+        padding: 1px 5px;
+        font-family: sans-serif;
+      }
+      .header {
+        font-size: 1.2em;
+        font-weight: bold;
+      }
+      ul {
+        list-style-type: none;
+      }
+    </style>
+
+    <div class="header">Fleet</div>
+    <!-- TODO(kjlubick) Once url params have been implemented, have these

[jcgregorio, 2016/08/03 13:11:50]

Yeah, look at
https://github.com/google/skia-buildbot/blob/master/res/js/common.js#L571 for
mirroring state to/from the URL.

[kjlubick, 2016/08/03 14:23:20]

Acknowledged.  I also like
https://github.com/google/skia-buildbot/blob/master/res/imp/url-params-sk.html

+    properly link to the botlist with the given features preloaded.-->
+    <ul>
+      <li><a href="/newui/botlist?alive">Bots Alive</a>: [[fleet.alive]]</li>
+      <li><a href="/newui/botlist?busy">Bots Busy</a>: [[fleet.busy]]</li>
+      <li><a href="/newui/botlist?idle">Bots Idle</a>: [[fleet.idle]]</li>
+      <li><a href="/newui/botlist?dead">Bots Dead</a>: [[fleet.dead]]</li>
+      <li><a href="/newui/botlist?quaren">Bots Quarantined</a>: [[fleet.quarantined]]</li>
+    </ul>
+
+    <div class="header">Currently Showing</div>
+    <ul>
+      <li><a href="/newui/botlist?alive2">Bots Alive</a>: [[_currently_showing.alive]]</li>
+      <li><a href="/newui/botlist?busy2">Bots Busy</a>: [[_currently_showing.busy]]</li>
+      <li><a href="/newui/botlist?idle2">Bots Idle</a>: [[_currently_showing.idle]]</li>
+      <li><a href="/newui/botlist?dead2">Bots Dead</a>: [[_currently_showing.dead]]</li>
+      <li><a href="/newui/botlist?quaren2">Bots Quarantined</a>: [[_currently_showing.quarantined]]</li>
+    </ul>
+
+  </template>
+  <script>
+    Polymer({
+      is: 'bot-list-summary',
+
+      behaviors: [SwarmingBehaviors.BotListBehavior],
+
+      properties: {
+        filtered_bots: {
+          type: Array,
+        },
+        fleet: {
+          type: Object,
+        },
+
+        _currently_showing: {
+          type: Object,
+          value: function() {
+            return {
+              alive:  -1,
+              busy:  -1,
+              idle: -1,
+              dead: -1,
+              quarantined: -1,
+            };
+          },
+        },
+      },
+
+      // Do this because Array changes in Polymer don't always trigger normal
+      // property observers
+      observers: ["_recount(filtered_bots.*)"],
+
+      _recount: function() {
+        var curr = {
+          alive: 0,
+          busy: 0,
+          idle: 0,
+          dead: 0,
+          quarantined: 0,
+        };
+        if (!this.filtered_bots) {
+          return curr;
+        }
+        this.filtered_bots.forEach(function(bot) {
+          if (this._taskId(bot) === "idle") {
+            curr.idle++;
+          } else {
+            curr.busy++;
+          }
+          if (bot.quarantined) {
+            curr.quarantined++;
+          }
+          if (bot.is_dead) {
+            curr.dead++;
+          } else {
+            curr.alive++;
+          }
+        }.bind(this));
+        this.set("_currently_showing", curr);
+      }
+    });
+  </script>
+</dom-module>