Add informational messages to clarify what can be filtered on.

appengine/swarming/ui/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 33 matching lines @@
       bot-filters, bot-list-summary {
         margin-bottom: 8px;
         margin-right: 10px;
       }
       .quarantined, .bad-device {
         background-color: #ffdddd;
       }
       .dead {
         background-color: #cccccc;
       }
+      .alt {
+        background-color: #f8f8f8;
+      }
       .bot-list th > span {
         /* Leave space for sort-toggle*/
         padding-right: 30px;
       }
     </style>
 
     <url-param name="s"
       value="{{_sortstr}}"
       default_value="id:asc">
     </url-param>
@@ skipping 10 matching lines @@
       <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]]"
             primary_map="[[_primary_map]]"
             primary_arr="[[_primary_arr]]"
+            special_columns="[[_specialColumns]]"
 
             columns="{{_columns}}"
             query_params="{{_query_params}}"
             filter="{{_filter}}"
             verbose="{{_verbose}}">
           </bot-filters>
 
           <bot-list-summary
             auth_headers="[[_auth_headers]]"
             busy="{{_busy3}}"
@@ skipping 116 matching lines @@
                   </td>
                 </template>
 
               </tr>
               <template
                   is="dom-repeat"
                   items="[[_devices(bot)]]"
                   as="device">
                 <tr
                     hidden$="[[_hide('android_devices', _columns.*)]]"
-                    class$="[[_deviceClass(device)]]">
+                    class$="[[_deviceClass(device,index)]]">
                   <td></td>
+                  <td hidden$="[[_hide('cloud_console_link', _columns.*)]]"></td>
+                  <td hidden$="[[_hide('mp_lease_id', _columns.*)]]"></td>
                   <td hidden$="[[_hide('task', _columns.*)]]"></td>
                   <template
                       is="dom-repeat"
                       items="[[_plainColumns]]"
                       as="c">
                     <td hidden$="[[_hide(c)]]">
                       [[_deviceColumn(c, device, _verbose)]]
                     </td>
                   </template>
                 </tr>
@@ skipping 11 matching lines @@
       </div>
 
     </swarming-app>
 
   </template>
   <script>
   (function(){
     var UNKNOWN = "unknown";
     // see dynamic-table for more information on specialColumns, headerMap,
     // columnMap, and specialSort
-    var specialColumns = ["id", "task", "cloud_console_link", "mp_lease_id"];
+    var specialColumns = ["id", "cloud_console_link", "mp_lease_id", "task"];
 
     var deviceColumns = ["battery_health", "battery_level", "battery_status", "battery_temperature", "battery_voltage", "device_temperature"];
 
     var headerMap = {
-      // "id" and "task" are special, so they don't go here. They have their
+      // "id", "task" and other special columns don't go here. They have their
       // headers hard-coded above.
       "android_devices": "Android Devices",
       "battery_health": "Battery Health",
       "battery_level": "Battery Level (%)",
       "battery_status": "Battery Status",
       "battery_temperature": "Battery Temp (°C)",
       "battery_voltage": "Battery Voltage (mV)",
       "bot_temperature": "Bot Temp (°C)",
       "cores": "Cores",
       "cpu": "CPU",
       "device": "Non-android Device",
       "device_os": "Device OS",
       "device_temperature": "Device Temp (°C)",
       "device_type": "Device Type",
       "disk_space": "Free Space (MB)",
+      "external_ip": "External IP",
       "first_seen": "First Seen",
       "gpu": "GPU",
+      "internal_ip": "Internal or Local IP",
       "last_seen": "Last Seen",
       "mp_lease_expires": "Machine Provider Lease Expires",
       "os": "OS",
       "pool": "Pool",
       "running_time": "Swarming Uptime",
       "status": "Status",
       "uptime": "Bot Uptime",
       "xcode_version": "XCode Version",
     };
 
@@ skipping 46 matching lines @@
       },
       external_ip: function(bot) {
         return bot.external_ip || "none";
       },
       first_seen: function(bot) {
         return sk.human.localeTime(bot.first_seen_ts)
       },
       id: function(bot) {
         return bot.bot_id;
       },
+      internal_ip: function(bot) {
+        return this._attribute(bot, "ip", "none")[0];
+      },
       last_seen: function(bot) {
         if (this._verbose) {
           return sk.human.localeTime(bot.last_seen_ts);
         }
         return this._timeDiffApprox(bot.last_seen_ts) + " ago";
       },
       mp_lease_id: function(bot) {
         var id = bot.lease_id || "none";
         if (this._verbose) {
           return id;
@@ skipping 148 matching lines @@
         // 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);
       },
       first_seen: function(dir, botA, botB) {
         var botACol = botA.first_seen_ts;
         var botBCol = botB.first_seen_ts;
         return dir * swarming.naturalCompare(botACol, botBCol);
       },
-      gpu: function(dir, botA, botB) {
-        // We want all the "none" GPU bots to come last in the list.
-        var botACol = this._column("gpu", botA);
-        if (botACol === "none") {
-          botACol = "ZZZ";
-        }
-        var botBCol = this._column("gpu", botB);
-        if (botBCol === "none") {
-          botBCol = "ZZZ";
-        }
-        return dir * swarming.naturalCompare(botACol, botBCol);
-      },
       last_seen: function(dir, botA, botB) {
         var botACol = botA.last_seen_ts;
         var botBCol = botB.last_seen_ts;
         return dir * swarming.naturalCompare(botACol, botBCol)
       },
       running_time: function(dir, botA, botB) {
         var botACol = this._state(botA, "running_time") || 0;
         var botBCol = this._state(botB, "running_time") || 0;
         return dir * swarming.naturalCompare(botACol, botBCol)
       },
@@ skipping 115 matching lines @@
       },
 
       _deviceColumn: function(col, device) {
         var f = deviceColumnMap[col];
         if (!f || !device) {
           return "";
         }
         return f.bind(this)(device);
       },
 
-      _deviceClass: function(device) {
+      _deviceClass: function(device, idx) {
         if (!device.okay) {
           return "bad-device";
         }
+        if (idx % 2 === 0){
+          return "alt";
+        }
         return "";
       },
 
       _mpLink: function(bot, template) {
         if (!bot || !bot.lease_id || !template) {
           return false;
         }
         return template.replace("%s", bot.lease_id);
       },
 
       _reload: function() {
         if (!this._auth_headers || !this._query_params) {
           return;
         }
         var url = "/api/swarming/v1/bots/list?" + sk.query.fromParamSet(this._query_params);
         this.$.page_bots.load(url,this._auth_headers);
       }
 
     });
   })();
   </script>
 </dom-module>