Refactor out reusable pieces from new Botlist

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>
 
   bot-list creats a dynamic table for viewing swarming bots.  Columns can be
   dynamically filtered and it supports client-side filtering.
 
   This is a top-level element.
 
   Properties:
     client_id: String, will be set by server-side template evaluation.
 
   Methods:
     None.
 
   Events:
     None.
 -->
 
 <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.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="bot-filters.html">
 <link rel="import" href="bot-list-data.html">
 <link rel="import" href="bot-list-shared.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">
+    <style include="iron-flex iron-flex-alignment iron-positioning swarming-app-style dynamic-table-style">
       bot-filters, bot-list-summary {
         margin-bottom: 8px;
         margin-right: 10px;
       }
-      .bot {
-        margin:5px;
-        max-width:400px;
-        min-height:100px;
-        min-width:300px;
-      }
-      table {
-        border-collapse: collapse;
-        margin-left: 5px;
-      }
-      td, th {
-        border: 1px solid #DDD;
-        padding: 5px;
-      }
-
       .quarantined, .bad-device {
         background-color: #ffdddd;
       }
       .dead {
         background-color: #cccccc;
       }
-
-      th {
-        position: relative;
-      }
-      sort-toggle {
-        position: absolute;
-        right: 0;
-        top: 0.4em;
-      }
       .bot-list th > span {
         /* Leave space for sort-toggle*/
         padding-right: 30px;
       }
     </style>
 
     <url-param name="sort"
       value="{{_sortstr}}"
       default_value="id:asc">
     </url-param>
@@ skipping 19 matching lines @@
 
             columns="{{_columns}}"
             query_params="{{_query_params}}"
             filter="{{_filter}}"
             verbose="{{_verbose}}">
           </bot-filters>
 
           <bot-list-summary
             columns="[[_columns]]"
             fleet="[[_fleet]]"
-            filtered_bots="[[_filteredSortedBots]]"
+            filtered_bots="[[_filteredSortedItems]]"
             sort="[[_sortstr]]"
             verbose="[[_verbose]]">
           </bot-list-summary>
 
         </div>
 
         <bot-list-data
           auth_headers="[[_auth_headers]]"
           query_params="[[_query_params]]"
 
-          bots="{{_bots}}"
+          bots="{{_items}}"
           busy="{{_busy}}"
           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
@@ skipping 18 matching lines @@
               -->
               <th hidden$="[[_hide('task', _columns.*)]]">
                 <span>Current Task</span>
                 <sort-toggle
                     name="task"
                     current="[[_sort]]">
                 </sort-toggle>
               </th>
 
               <template is="dom-repeat"
-                    items="[[_plain_columns]]"
+                    items="[[_plainColumns]]"
                     as="c">
                 <th hidden$="[[_hide(c)]]">
                   <span>[[_header(c)]]</span>
                   <sort-toggle
                       name="[[c]]"
                       current="[[_sort]]">
                   </sort-toggle>
                 </th>
               </template>
             </tr>
           </thead>
           <tbody>
             <template id="bot_table" is="dom-repeat"
-                  items="[[_filteredSortedBots]]"
+                  items="[[_filteredSortedItems]]"
                   as="bot"
                   initial-count=50>
 
               <tr class$="[[_botClass(bot)]]">
                 <td>
                   <a class="center"
                      href$="[[_botLink(bot.bot_id)]]"
                      target="_blank">
                      [[bot.bot_id]]
                   </a>
                 </td>
                 <td hidden$="[[_hide('task', _columns.*)]]">
                   <a href$="[[_taskLink(bot)]]">[[_taskId(bot)]]</a>
                 </td>
 
                 <template is="dom-repeat"
-                      items="[[_plain_columns]]"
+                      items="[[_plainColumns]]"
                       as="c">
                   <td hidden$="[[_hide(c)]]">
                     [[_column(c, bot, _verbose)]]
                   </td>
                 </template>
 
               </tr>
               <template is="dom-repeat"
                     items="[[_devices(bot)]]"
                     as="device">
                 <tr hidden$="[[_hide('android_devices', _columns.*)]]"
                     class$="[[_deviceClass(device)]]">
                   <td></td>
                   <td hidden$="[[_hide('task', _columns.*)]]"></td>
                   <template is="dom-repeat"
-                        items="[[_plain_columns]]"
+                        items="[[_plainColumns]]"
                         as="c">
                     <td hidden$="[[_hide(c)]]">
                       [[_deviceColumn(c, device, _verbose)]]
                     </td>
                   </template>
                 </tr>
               </template> <!--devices repeat-->
             </template> <!--bot-table repeat-->
           </tbody>
         </table>
       </div>
 
     </swarming-app>
 
   </template>
   <script>
   (function(){
-    var special_columns = ["id", "task"];
+    // see dynamic-table for more information on specialColumns, headerMap,
+    // columnMap, and specialSort
+    var specialColumns = ["id", "task"];
 
     var headerMap = {
-      // "id" and "task" are special, so they don't go here and have their
-      // headers hard-coded below.
+      // "id" and "task" are special, so they don't go here. They have their
+      // headers hard-coded above.
       "android_devices": "Android Devices",
       "cores": "Cores",
       "cpu": "CPU",
       "device": "Non-android Device",
       "device_os": "Device OS",
       "device_type": "Device Type",
       "disk_space": "Free Space (MB)",
       "gpu": "GPU",
       "os": "OS",
       "pool": "Pool",
       "status": "Status",
       "xcode_version": "XCode Version",
     };
 
-    // This maps column name to a function that will return the content for a
-    // given bot. These functions are bound to this element, and have access
-    // to all functions defined here and in bot-list-shared. If a column
-    // is not listed here, a sane default will be used (see _column()).
     var columnMap = {
       android_devices: function(bot) {
         var devs = this._attribute(bot, "android_devices", "0");
         if (this._verbose) {
           return devs.join(" | ") + " devices available";
         }
         // max() works on strings as long as they can be coerced to Number.
         return Math.max(...devs) + " devices available";
       },
       device_type: function(bot) {
@@ skipping 79 matching lines @@
         if (device.build) {
           return device.build["build.id"];
         }
         return "unknown";
       },
       status: function(device) {
         return device.state;
       }
     }
 
-    // specialSort defines any custom sorting rules. By default, a
-    // naturalCompare of the column content is done.
     var specialSort = {
       android_devices: function(dir, botA, botB) {
         // We sort on the number of attached devices. Note that this
         // may not be the same as android_devices, because _devices().length
         // counts all devices plugged into the bot, whereas android_devices
         // counts just devices ready for work.
         var botACol = this._devices(botA).length;
         var botBCol = this._devices(botB).length;
         return dir * swarming.naturalCompare(botACol, botBCol);
       },
       disk_space: function(dir, botA, botB) {
         // We sort based on the raw number of MB of the first disk.
         var botACol = botA.disks[0].mb;
         var botBCol = botB.disks[0].mb;;
         return dir * swarming.naturalCompare(botACol, botBCol);
       },
     };
 
     Polymer({
       is: 'bot-list',
-      behaviors: [SwarmingBehaviors.BotListBehavior],
+      behaviors: [SwarmingBehaviors.BotListBehavior,
+                  SwarmingBehaviors.DynamicTableBehavior],
 
       properties: {
 
         client_id: {
           type: String,
         },
 
-        _bots: {
+        // for dynamic table
+        _columnMap: {
+          type: Object,
+          value: function() {
+            return columnMap;
+          }
+        },
+        _headerMap: {
+          type: Object,
+          value: function() {
+            return headerMap;
+          },
+        },
+        // special columns contain html.  non-special (i.e. normal colunns) just
+        // contain text.
+        _specialColumns: {
           type: Array,
+          value: function() {

[stephana, 2016/08/16 13:28:06]

This will always return the same reference to specialColumns, which might be
what you want. In that case you should not need to wrap it in a function, IMO. 

[kjlubick, 2016/08/16 13:41:25]

Good call, will address on next CL.

+            return specialColumns;
+          }
+        },
+        _specialSort: {
+          type: Object,
+          value: function() {
+            return specialSort;
+          }
         },
 
-        _columns: {
-          type: Array,
-        },
-
-        _filter: {
-          type: Function,
-          value: function() {
-            return true;
-          },
-        },
-
-        _filteredSortedBots: {
-          type: Array,
-          computed: "_filterAndSort(_bots,_filter.*,_sort.*)"
-        },
-
-        _plain_columns: {
-          type: Array,
-          computed: "_stripSpecial(_columns.*)",
-        },
-
-        // _sort is an Object {name:String, direction:String}.
-        _sort: {
-          type: Object,
-          computed: "_makeObject(_sortstr)",
-        },
-
-        _verbose: {
-          type: Boolean,
-        }
       },
 
       _botClass: function(bot) {
         if (bot.is_dead) {
           return "dead";
         }
         if (bot.quarantined) {
           return "quarantined";
         }
         return "";
       },
 
       _botLink: function(id) {
         // TODO(kjlubick) Make this point to /newui/ when appropriate.
         return "/restricted/bot/"+id;
       },
 
 
-      _column: function(col, bot) {
-        var f = columnMap[col];
-        if (!f) {
-          f = function(bot) {
-            var c = this._attribute(bot, col, "none");
-            if (this._verbose) {
-              return c.join(" | ");
-            }
-            return c[0];
-          }
-        }
-        return f.bind(this)(bot);
-      },
-
       _androidAliasDevice: function(device) {
         if (device.notReady) {
           return UNAUTHENTICATED.toUpperCase();
         }
         return this._androidAlias(this._deviceType(device));
       },
 
       _deviceColumn: function(col, device) {
         var f = deviceColumnMap[col];
         if (!f || !device) {
           return "";
         }
         return f.bind(this)(device);
       },
 
       _deviceClass: function(device) {
         if (!device.okay) {
           return "bad-device";
         }
         return "";
       },
 
-      _filterAndSort: function(a,b,c) {
-        // We intentionally sort this._bots (and not a copy) to allow users to
-        // "chain" sorts, that is, sort by one thing and then another, and
-        // have both orderings properly impact the list.
-        swarming.stableSort(this._bots, this._sortBotTable.bind(this));
-        var bots = this._bots;
-        if (this._filter) {
-          bots = bots.filter(this._filter.bind(this));
-        }
-
-        return bots;
-      },
-
-      _header: function(col){
-        return headerMap[col] || col;
-      },
-
-      _hide: function(col) {
-        return this._columns.indexOf(col) === -1;
-      },
-
-      _makeObject: function(sortstr){
-        if (!sortstr) {
-          return undefined;
-        }
-        var pieces = sortstr.split(":");
-        if (pieces.length != 2) {
-          // fail safe
-          return {name: "id", direction:"desc"};
-        }
-        return {
-          name: pieces[0],
-          direction: pieces[1],
-        }
-      },
-
-      _reRender: function(filter, sort) {
-        this.$.bot_table.render();
-      },
-
-      _sortBotTable: function(botA, botB) {
-        if (!this._sort) {
-          return 0;
-        }
-        var dir = 1;
-        if (this._sort.direction === "desc") {
-          dir = -1;
-        }
-        var sort = specialSort[this._sort.name];
-        if (sort) {
-          return sort.bind(this)(dir, botA, botB);
-        }
-        // Default to a natural compare of the columns.
-        var botACol = this._column(this._sort.name, botA);
-        var botBCol = this._column(this._sort.name, botB);
-
-        return dir * swarming.naturalCompare(botACol, botBCol);
-      },
-
-      _sortChange: function(e) {
-        // The event we get from sort-toggle tells us the name of what needs
-        // to be sorting and how to sort it.
-        if (!(e && e.detail && e.detail.name)) {
-          return;
-        }
-        // should trigger the computation of _sort and __filterAndSort
-        this.set("_sortstr", e.detail.name +":"+e.detail.direction);
-      },
-
-      // _stripSpecial removes the special columns and sorts the remaining
-      // columns so they always appear in the same order, regardless of
-      // the order they are added.
-      _stripSpecial: function(){
-        return this._columns.filter(function(c){
-          return special_columns.indexOf(c) === -1;
-        }).sort();
-      },
-
       _taskLink: function(data) {
         if (data && data.task_id) {
           return "/user/task/" + data.task_id;
         }
         return undefined;
       }
 
     });
   })();
   </script>
 </dom-module>