Mirror filters and sort preferences to url-params

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.
 
   Properties:
     None.  This is a top-level element.
 
   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/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">
       bot-filters, bot-list-summary {
@@ skipping 29 matching lines @@
         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>
+
     <swarming-app
       auth_headers="{{_auth_headers}}"
       signed_in="{{_signed_in}}"
 
       busy="[[_busy]]"
       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
             primary_map="[[_primary_map]]"
             primary_arr="[[_primary_arr]]"
 
             columns="{{_columns}}"
-            dimensions="{{_dimensions}}"
+            query_params="{{_query_params}}"
             filter="{{_filter}}"
             verbose="{{_verbose}}">
           </bot-filters>
 
           <bot-list-summary
+            columns="[[_columns]]"
             fleet="[[_fleet]]"
-            filtered_bots="[[_filteredSortedBots]]">
+            filtered_bots="[[_filteredSortedBots]]"
+            sort="[[_sortstr]]"
+            verbose="[[_verbose]]">
           </bot-list-summary>
 
         </div>
 
         <bot-list-data
           auth_headers="[[_auth_headers]]"
-          dimensions="[[_dimensions]]"
+          query_params="[[_query_params]]"
 
           bots="{{_bots}}"
           busy="{{_busy}}"
           fleet="{{_fleet}}"
           primary_map="{{_primary_map}}"
           primary_arr="{{_primary_arr}}">
         </bot-list-data>
 
         <table class="bot-list">
           <thead on-sort_change="_sortChange">
@@ skipping 144 matching lines @@
       device_type: function(bot){
         var dt = this._attribute(bot, "device_type", "none");
         if (this._verbose) {
           return dt.join(" | ");
         }
         return dt[0];
       },
       disk_space: function(bot) {
         var aliased = [];
         bot.disks.forEach(function(disk){
-          var alias = swarming.humanBytes(disk.mb, swarming.MB);
+          var alias = sk.human.bytes(disk.mb, swarming.MB);
           aliased.push(this._applyAlias(disk.mb, disk.id + " "+ alias));
         }.bind(this));
         if (this._verbose) {
           return aliased.join(" | ");
         }
         return aliased[0];
       },
       gpu: function(bot){
         var gpus = this._attribute(bot, "gpu", "none")
         var verbose = []
@@ skipping 30 matching lines @@
         return os[0];
       },
       pool: function(bot) {
         var pool = this._attribute(bot, "pool");
         return pool.join(" | ");
       },
       status: function(bot) {
         // If a bot is both dead and quarantined, show the deadness over the
         // quarentinedness.
         if (bot.is_dead) {
-          return "Dead.  Last seen " + swarming.diffDate(bot.last_seen_ts) +
+          return "Dead.  Last seen " + sk.human.diffDate(bot.last_seen_ts) +
               " ago";
         }
         if (bot.quarantined) {
           return "Quarantined: " + this._attribute(bot, "quarantined");
         }
         return "Alive";
       },
       task: function(bot){
         return this._taskId(bot);
       },
@@ skipping 67 matching lines @@
         },
 
         _plain_columns: {
           type: Array,
           computed: "_stripSpecial(_columns.*)",
         },
 
         // _sort is an Object {name:String, direction:String}.
         _sort: {
           type: Object,
-          value: function() {
-            return {
-              name: "id",
-              direction: "asc",
-            };
-          }
+          computed: "_makeObject(_sortstr)",
+        },
+
+        // We can't (easily) stick an object in query params, so we use
+        // a serialized string of key:dir and stick that in the query params.
+        // This is deserialized (into _sort) for easier use
+        _sortstr: {
+          type: String,
         },
 
         _verbose: {
           type: Boolean,
         }
       },
 
       _botClass: function(bot) {
         if (bot.is_dead) {
           return "dead";
@@ skipping 50 matching lines @@
       },
 
       _header: function(col){
         return headerMap[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 __filterAndSort
-        this.set("_sort", e.detail);
+        // 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>