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

appengine/swarming/elements/res/imp/botlist/bot-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:
 
     <bot-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/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/sort-toggle.html">
 <link rel="import" href="/res/imp/common/swarming-app.html">
 <link rel="import" href="/res/imp/common/url-param.html">
+<link rel="import" href="/res/imp/common/pageable-data.html">
 
 <link rel="import" href="bot-filters.html">
 <link rel="import" href="bot-list-data.html">
 <link rel="import" href="bot-list-shared-behavior.html">
 <link rel="import" href="bot-list-summary.html">
 
 <dom-module id="bot-list">
   <template>
     <style include="iron-flex iron-flex-alignment iron-positioning swarming-app-style dynamic-table-style">
       bot-filters, bot-list-summary {
@@ skipping 15 matching lines @@
     <url-param name="s"
       value="{{_sortstr}}"
       default_value="id:asc">
     </url-param>
 
     <swarming-app
       client_id="[[client_id]]"
       auth_headers="{{_auth_headers}}"
       signed_in="{{_signed_in}}"
 
-      busy="[[_busy]]"
+      busy="[[_or(_busy1,_busy2)]]"
       name="Swarming Bot List">
 
       <h2 hidden$="[[_signed_in]]">You must sign in to see anything useful.</h2>
 
       <div hidden$="[[_not(_signed_in)]]">
 
         <div class="horizontal layout">
 
           <bot-filters
             dimensions="[[_dimensions]]"
@@ skipping 10 matching lines @@
             columns="[[_columns]]"
             fleet="[[_fleet]]"
             filtered_bots="[[_filteredSortedItems]]"
             sort="[[_sortstr]]"
             verbose="[[_verbose]]">
           </bot-list-summary>
 
         </div>
 
         <bot-list-data
+          id="data"
           auth_headers="[[_auth_headers]]"
           query_params="[[_query_params]]"
 
-          bots="{{_items}}"
-          busy="{{_busy}}"
+          busy="{{_busy1}}"
           dimensions="{{_dimensions}}"
           fleet="{{_fleet}}"
           primary_map="{{_primary_map}}"
           primary_arr="{{_primary_arr}}">
         </bot-list-data>
 
         <table class="bot-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
@@ skipping 83 matching lines @@
                       as="c">
                     <td hidden$="[[_hide(c)]]">
                       [[_deviceColumn(c, device, _verbose)]]
                     </td>
                   </template>
                 </tr>
               </template> <!--devices repeat-->
             </template> <!--bot-table repeat-->
           </tbody>
         </table>
+        <pageable-data
+          id="page_bots"
+          busy="{{_busy2}}"
+          label="Show more bots"
+          output="{{_items}}"
+          parse="[[_parseBots]]">
+        </pageable-data>
       </div>
 
       <error-toast></error-toast>
     </swarming-app>
 
   </template>
   <script>
   (function(){
     var UNKNOWN = "unknown";
     // see dynamic-table for more information on specialColumns, headerMap,
@@ skipping 230 matching lines @@
       behaviors: [
           SwarmingBehaviors.BotListBehavior,
           SwarmingBehaviors.DynamicTableBehavior,
       ],
 
       properties: {
         client_id: {
           type: String,
         },
 
+        _busy1: {
+          type: Boolean,
+          value: false
+        },
+         _busy2: {
+          type: Boolean,
+          value: false
+        },
+        _parseBots: {
+          type: Function,
+          value: function() {
+            return this.$.data.parseBots.bind(this);
+          }
+        },
+
         // For dynamic table.
         _columnMap: {
           type: Object,
           value: function() {
             var base = this._commonColumns();
             for (var attr in columnMap) {
               base[attr] = columnMap[attr];
             }
             return base;
           },
         },
         _headerMap: {
           type: Object,
           value: headerMap,
         },
         _specialColumns: {
           type: Array,
           value: specialColumns,
         },
         _specialSort: {
           type: Object,
           value: specialSort,
         },
+      },
 
-      },
+      observers:["reload(_query_params,_auth_headers)"],
 
       _botClass: function(bot) {
         if (bot.is_dead) {
           return "dead";
         }
         if (bot.quarantined) {
           return "quarantined";
         }
         return "";
       },
@@ skipping 13 matching lines @@
         return f.bind(this)(device);
       },
 
       _deviceClass: function(device) {
         if (!device.okay) {
           return "bad-device";
         }
         return "";
       },
 
+      reload: function() {

[stephana, 2016/10/03 17:34:57]

Should be _reload, unless reload is exposed by the element, in which case it
should go into the description. 

[kjlubick, 2016/10/03 18:03:01]

renamed _reload

+        if (!this._auth_headers || !this._query_params) {
+          return;
+        }
+        var url = "/_ah/api/swarming/v1/bots/list?" + sk.query.fromParamSet(this._query_params);
+        this.$.page_bots.load(url,this._auth_headers);
+      }
+
     });
   })();
   </script>
 </dom-module>