Add pageable data widget

appengine/swarming/elements/res/imp/botpage/bot-page.html

Index: appengine/swarming/elements/res/imp/botpage/bot-page.html
diff --git a/appengine/swarming/elements/res/imp/botpage/bot-page.html b/appengine/swarming/elements/res/imp/botpage/bot-page.html
index c22be1766b6c5f6f175c2a76c71282647783e86e..804ccc85681984e985050e2c831b8ff59fd424ab 100644
--- a/appengine/swarming/elements/res/imp/botpage/bot-page.html
+++ b/appengine/swarming/elements/res/imp/botpage/bot-page.html
@@ -35,6 +35,7 @@
 <link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
 
 <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">
@@ -95,7 +96,7 @@
       permissions="{{_permissions}}"
       signed_in="{{_signed_in}}"
 
-      busy="[[_busy]]"
+      busy="[[_or(_busy1,_busy2,_busy3)]]"
       name="Swarming Bot Page">
 
       <h2 hidden$="[[_signed_in]]">You must sign in to see anything useful.</h2>
@@ -108,9 +109,10 @@
           bot_id="[[bot_id]]"
 
           bot="{{_bot}}"
-          busy="{{_busy}}"
+          busy="{{_busy1}}"
           events="{{_events}}"
-          tasks="{{_tasks}}">
+          tasks="{{_tasks}}"
+          on-reload="_clearAndReload">
         </bot-page-data>
 
         <div class="header horizontal layout">
@@ -266,7 +268,7 @@
               </tr>
             </thead>
             <tbody>
-              <template is="dom-repeat" items="{{_eventList(_events,_show_all)}}" as="event">
+              <template is="dom-repeat" items="{{_eventList(_show_all,_events.*)}}" as="event">
                 <tr>
                   <td class="message">[[event.message]]</a></td>
                   <td>[[event.event_type]]</td>
@@ -280,6 +282,22 @@
             </tbody>
           </table>
         </template>
+        <pageable-data
+          id="page_tasks"
+          hidden$="[[_truthy(_selected)]]"

[stephana, 2016/09/28 13:25:23]

who does 'selected' alone not work here ? 

[kjlubick, 2016/09/28 13:50:36]

I'm not entirely sure, but it seems that when _selected is the string "0", i.e.
show tasks, hidden$= evaluates to true.  This hack seems to make it properly be
false.

[stephana, 2016/09/28 15:45:33]

if _selected is string "0", _truthy will return true. And in this scenario
_selected should always an integer, so it can be used directly. 

+          busy="{{_busy2}}"
+          label="Show more tasks"
+          output="{{_tasks}}"
+          parse="[[_parseTasks]]">
+        </pageable-data>
+        <pageable-data
+          id="page_events"
+          hidden$="[[_not(_selected)]]"
+          busy="{{_busy3}}"
+          label="Show more events"
+          output="{{_events}}"
+          parse="[[_parseEvents]]">
+        </pageable-data>
       </div>
     </swarming-app>
 
@@ -315,6 +333,7 @@
 
         _auth_headers: {
           type: Object,
+          observer: "_reload",
         },
         _bot: {
           type: Object,
@@ -331,6 +350,19 @@
         },
         _show_state: {
           type: Boolean,
+        },
+
+        _parseEvents: {

[stephana, 2016/09/28 13:25:23]

This don't need to be defined in properties. Why can't you just define them as
functions on the element below. 

[kjlubick, 2016/09/28 13:50:36]

I tried defining the functions below, but Polymer didn't pass them as I expected
into pageable-data.

[stephana, 2016/09/28 15:45:33]

Acknowledged.

+          type: Function,
+          value: function() {
+            return this.$.data.parseEvents.bind(this);
+          }
+        },
+        _parseTasks: {
+          type: Function,
+          value: function() {
+            return this.$.data.parseTasks.bind(this);
+          }
         }
       },
 
@@ -346,6 +378,12 @@
         return bot && !bot.is_dead && permissions.terminate_bot;
       },
 
+      _clearAndReload: function(botID) {
+        this.$.page_tasks.clear();
+        this.$.page_events.clear();
+        this._reload();
+      },
+
       _concat: function(arr) {
         if (!arr) {
           return "";
@@ -358,11 +396,11 @@
           "Deleting "+this.bot_id, this._auth_headers);
       },
 
-      _eventList(events, showAll) {
-        if (!events) {
+      _eventList(showAll) {
+        if (!this._events) {
           return [];
         }
-        return events.filter(function(e){
+        return this._events.filter(function(e){
           return showAll || e.message;
         });
       },
@@ -431,6 +469,18 @@
         this.$.data.request();
       },
 
+      _reload: function() {
+        if (!this._auth_headers) {
+          return;
+        }
+        var baseUrl = "/_ah/api/swarming/v1/bot/"+this.bot_id;
+        // We limit the fields on these two queries to make them faster.
+        this.$.page_tasks.load(baseUrl + "/tasks?fields=cursor%2Citems(abandoned_ts%2Cbot_version%2Ccompleted_ts%2Cduration%2Cexit_code%2Cfailure%2Cinternal_failure%2Cmodified_ts%2Cname%2Cstarted_ts%2Cstate%2Ctask_id%2Ctry_number)",
+          this._auth_headers, 30);
+        this.$.page_events.load(baseUrl + "/events?fields=cursor%2Citems(event_type%2Cmessage%2Cquarantined%2Ctask_id%2Cts%2Cversion)",
+          this._auth_headers, 50);
+      },
+
       _shorten: function(str, length) {
         if (!str || ! length) {
           return "";