Move bot-list and task-list to use pageable-data

appengine/swarming/elements/res/imp/tasklist/task-list.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-list>
 
@@ skipping 14 matching lines @@
 -->
 
 <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
 <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
 <link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
 
 <link rel="import" href="/res/imp/common/dynamic-table-behavior.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/sort-toggle.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-filters.html">
 <link rel="import" href="task-list-data.html">
 
 <dom-module id="task-list">
   <template>
@@ skipping 11 matching lines @@
     <url-param name="s"
       value="{{_sortstr}}"
       default_value="created_ts:desc">
     </url-param>
 
     <swarming-app
       client_id="[[client_id]]"
       auth_headers="{{_auth_headers}}"
       permissions="{{_permissions}}"
       signed_in="{{_signed_in}}"
-      busy="[[_busy]]"
+      busy="[[_or(_busy1,_busy2)]]"
       name="Swarming Task List">
 
       <h2 hidden$="[[_signed_in]]">You must sign in to see anything useful.</h2>
 
       <div hidden$="[[_not(_signed_in)]]">
         <task-list-data
+          id="data"
           auth_headers="[[_auth_headers]]"
           query_params="[[_query_params]]"
-          tasks="{{_items}}"
-          busy="{{_busy}}"
+          tasks="[[_items]]"
+          busy="{{_busy1)}}"
           primary_map="{{_primary_map}}"
           primary_arr="{{_primary_arr}}">
         </task-list-data>
 
         <div class="horizontal layout">
-
           <task-filters
             primary_map="[[_primary_map]]"
             primary_arr="[[_primary_arr]]"
             columns="{{_columns}}"
             query_params="{{_query_params}}"
             filter="{{_filter}}">
           </task-filters>
-
         </div>
 
         <table class="task-list">
           <thead on-sort_change="_sortChange">
           <!-- To allow for dynamic columns without having a lot of copy-pasted
           code, we break columns up into "special" and "plain" columns. Special
           columns require some sort of HTML output (e.g. anchor tags) and plain
           columns just output text.  The plain columns use Polymer functions to
           insert their text [_header(), _column(), _deviceColumn()].  Polymer
           functions do not allow HTML (to avoid XSS), so special columns, like id
@@ skipping 98 matching lines @@
                     as="c">
                   <td hidden$="[[_hide(c)]]">
                     [[_column(c, task)]]
                   </td>
                 </template>
 
               </tr>
             </template> <!--tasks_table repeat-->
           </tbody>
         </table>
+
+        <pageable-data
+          id="page_tasks"
+          busy="{{_busy2}}"
+          label="Show more tasks"
+          output="{{_items}}"
+          parse="[[_parseTasks]]">
+        </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>
     </paper-dialog>
@@ skipping 73 matching lines @@
       behaviors: [
           SwarmingBehaviors.DynamicTableBehavior,
           SwarmingBehaviors.TaskBehavior,
       ],
 
       properties: {
         client_id: {
           type: String,
         },
 
+        _busy1: {
+          type: Boolean,
+          value: false
+        },
+         _busy2: {
+          type: Boolean,
+          value: false
+        },
+        _parseTasks: {
+          type: Function,
+          value: function() {
+            return this.$.data.parseTasks.bind(this);
+          }
+        },
         // The task id to cancel if the prompt is accepted.
         _toCancel: {
           type: String,
         },
 
         // For dynamic table.
         _columnMap: {
           type: Object,
           value: function() {
             var base = this._commonColumns();
@@ skipping 10 matching lines @@
         _specialColumns: {
           type: Array,
           value: specialColumns,
         },
         _specialSort: {
           type: Object,
           value: specialSort,
         },
       },
 
+      observers:["reload(_query_params,_auth_headers)"],
+
       _attribute: function(task, col, def) {
         if (def === undefined) {
           def = "none";
         }
         var retVal = this._tag(task, col) || task[col] || [def];
         if (!Array.isArray(retVal)) {
           return [retVal];
         }
         return retVal;
       },
@@ skipping 19 matching lines @@
         var task = e.model.task;
         if (!task || !task.task_id) {
           console.log("Missing task info", task);
           return
         }
         this.set("_toCancel", task.task_id);
         this.set("_dialogPrompt", 'cancel task "'+ task.name +'"');
         this.$.prompt.open();
       },
 
+      reload: function() {
+        if (!this._auth_headers || !this._query_params) {
+          return;
+        }
+        var url = "/_ah/api/swarming/v1/tasks/list?" + sk.query.fromParamSet(this._query_params);
+        this.$.page_tasks.load(url,this._auth_headers);
+      },
+
       _tag: function(task, col) {
         if (!task || !task.tagMap) {
           return undefined;
         }
         return task.tagMap[col];
       },
 
       _taskClass: function(task) {
         return this.stateClass(this._column("state", task));
       }
     });
   })();
   </script>
 </dom-module>