Add pageable data widget

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 17 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/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">
 
 
 <dom-module id="bot-page">
@@ skipping 45 matching lines @@
       value="{{_show_state}}">
     </url-param>
 
     <swarming-app
       client_id="[[client_id]]"
       auth_headers="{{_auth_headers}}"
       permissions="{{_permissions}}"
       server_version="{{_server_version}}"
       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>
 
       <div hidden$="[[_not(_signed_in)]]">
 
         <bot-page-data
           id="data"
           auth_headers="[[_auth_headers]]"
           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">
           <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>
@@ skipping 99 matching lines @@
             <div class="bot_state">[[_prettyPrint(_bot.state)]]</div>
           </iron-collapse>
         </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="[[_selected]]">
+          <template is="dom-if" if="[[_showEvents]]">
             <paper-checkbox checked="{{_show_all}}">
                 Show all events
             </paper-checkbox>
           </template>
         </div>
 
-        <template is="dom-if" if="[[_not(_selected)]]">
+        <template is="dom-if" if="[[_not(_showEvents)]]">
           <table class="tasks_table">
             <thead>
               <tr>
                 <th>Task</th>
                 <th>Started</th>
                 <th>Duration</th>
                 <th>Result</th>
               </tr>
             </thead>
             <tbody>
               <template is="dom-repeat" items="{{_tasks}}" as="task">
                 <tr class$="[[_taskClass(task)]]">
                   <td><a target="_blank" href$="[[_taskLink(task.task_id)]]">[[task.name]]</a></td>
                   <td>[[task.human_started_ts]]</td>
                   <td title="[[task.human_completed_ts]]">[[task.human_duration]]</td>
                   <td>[[task.state]]</td>
                 </tr>
               </template>
             </tbody>
           </table>
         </template>
 
-        <template is="dom-if" if="[[_selected]]">
+        <template is="dom-if" if="[[_showEvents]]">
           <table class="events_table">
             <thead>
               <tr>
                 <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(_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>
                   <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>
         </template>
+        <!-- https://github.com/Polymer/polymer/issues/3669 hidden$ doesn't
+            respect truthiness, only booleanness, so we have _showEvents
+            instead of using _selected directly.-->
+        <pageable-data
+          id="page_tasks"
+          hidden$="[[_showEvents]]"
+          busy="{{_busy2}}"
+          label="Show more tasks"
+          output="{{_tasks}}"
+          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>
     </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>
@@ skipping 15 matching lines @@
       properties: {
         bot_id: {
           type: String,
         },
         client_id: {
           type: String,
         },
 
         _auth_headers: {
           type: Object,
+          observer: "_reload",
         },
         _bot: {
           type: Object,
         },
         _dialogPrompt: {
           type: String,
           value: "",
         },
         _selected: {
           type: Number,
         },
         _show_all: {
           type: Boolean,
         },
+        _showEvents: {
+          type: Boolean,
+          computed: "_truthy(_selected)"
+        },
         _show_state: {
           type: Boolean,
+        },
+
+        _parseEvents: {
+          type: Function,
+          value: function() {
+            return this.$.data.parseEvents.bind(this);
+          }
+        },
+        _parseTasks: {
+          type: Function,
+          value: function() {
+            return this.$.data.parseTasks.bind(this);
+          }
         }
       },
 
       _canCancel: function(bot, permissions) {
         return bot && bot.task_id && permissions.cancel_task;
       },
 
       _canDelete: function(bot, permissions) {
         return bot && bot.is_dead && permissions.delete_bot;
       },
 
       _canShutdown: function(bot, permissions){
         return bot && !bot.is_dead && permissions.terminate_bot;
       },
 
       _classVersion: function(serverVersion, otherVersion) {
         if (serverVersion !== otherVersion) {
           return "old_version";
         }
         return "";
       },
 
+      _clearAndReload: function(botID) {
+        this.$.page_tasks.clear();
+        this.$.page_events.clear();
+        this._reload();
+      },
+
       _concat: function(arr) {
         if (!arr) {
           return "";
         }
         return arr.join(" | ");
       },
 
       _deleteBot: function() {
         swarming.postWithToast("/_ah/api/swarming/v1/bot/"+this.bot_id+"/delete",
           "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;
         });
       },
 
       _isDead(bot){
         if (bot && bot.is_dead) {
           return "dead";
         }
         return "";
       },
@@ skipping 48 matching lines @@
           }
           return msg || "True";
         }
         return "";
       },
 
       _refresh: function() {
         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 "";
         }
         return str.substring(0, length);
       },
 
       _shutdownBot: function() {
         swarming.postWithToast("/_ah/api/swarming/v1/bot/"+this.bot_id+"/terminate",
           "Shutting down "+this.bot_id, this._auth_headers);
@@ skipping 14 matching lines @@
       },
 
       _toggleState: function() {
         this.set("_show_state", !this._show_state);
       }
 
     });
   })();
   </script>
 </dom-module>