Show bootstrap and server bot_code version

appengine/swarming/elements/res/imp/botpage/bot-page.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-page>
 
@@ skipping 45 matching lines @@
         white-space: pre;
         font-family: monospace;
         margin-bottom: 10px;
       }
 
       .tasks_table,
       .events_table {
         border: 3px solid #1F78B4;
       }
 
+      .old_version {
+        background-color: #ffffdd;
+      }
+
       paper-checkbox {
         --paper-checkbox-label-color: #fff;
         --paper-checkbox-checked-color: #fff;
         --paper-checkbox-checkmark-color: #000;
         --paper-checkbox-unchecked-color: #fff;
         padding: 3px;
       }
 
       paper-dialog {
         border-radius: 6px;
@@ skipping 10 matching lines @@
       value="{{_selected}}">
     </url-param>
     <url-param name="show_state"
       value="{{_show_state}}">
     </url-param>
 
     <swarming-app
       client_id="[[client_id]]"
       auth_headers="{{_auth_headers}}"
       permissions="{{_permissions}}"
+      server_version="{{_server_version}}"
       signed_in="{{_signed_in}}"
 
       busy="[[_busy]]"
       name="Swarming Bot Page">
 
       <h2 hidden$="[[_signed_in]]">You must sign in to see anything useful.</h2>
 
       <div hidden$="[[_not(_signed_in)]]">
 
         <bot-page-data
           id="data"
           auth_headers="[[_auth_headers]]"
           bot_id="[[bot_id]]"
 
           bot="{{_bot}}"
           busy="{{_busy}}"
           events="{{_events}}"
           tasks="{{_tasks}}">
         </bot-page-data>
 
         <div class="header horizontal layout">
           <paper-input class="id_input" label="Bot id" value="{{bot_id}}"></paper-input>
           <button on-click="_refresh">
             <iron-icon class="refresh" icon="icons:refresh"></iron-icon>
           </button>
         </div>
 
         <div>
           <table>
-            <tr class$="[[_isDead(_bot)]]">
+            <tr class$="[[_isDead(_bot)]]" title="Last time the bot contacted the server.">
               <td>Last Seen</td>
               <td title="[[_bot.human_last_seen_ts]]">
                 [[_timeDiffExact(_bot.last_seen_ts)]] ago</td>
               <td>
               <!-- dom-ifs are slightly less performant than hidden$=, but
               prevent things from first drawing and then hiding. We prefer to
               not flash buttons or quarantined messages -->
                 <template is="dom-if" if="[[_canShutdown(_bot,_permissions)]]">
                   <button class="raised" on-click="_promptShutdown">
                     Shut Down Gracefully
@@ skipping 30 matching lines @@
             <template
                 is="dom-repeat"
                 items="[[_bot.dimensions]]"
                 as="dim">
               <tr>
                 <td>[[dim.key]]</td>
                 <td>[[_concat(dim.value)]]</td>
               </tr>
             </template>
 
-            <tr>
+            <tr title="IP address that the server saw the connection from.">
               <td>External IP</td>
               <td><a href$="[[_bot.external_ip]]">[[_bot.external_ip]]</a></td>
               <td></td>
             </tr>
-            <tr>
-              <td>Swarming Revision</td>
+            <tr
+                class$="[[_classVersion(_server_version.bot_version,_bot.version)]]"
+                title="Version is based on the content of swarming_bot.zip which is the swarming bot code. The bot won't update if quarantined, dead, or busy.">
               <td>
-                <a target="_blank" href$="[[_luciLink(_bot.version)]]">[[_shorten(_bot.version,'8')]]</a>
-              </td>
+                  Bot Version</td>
+                <td>[[_shorten(_bot.version,'8')]]</td>
               <td></td>
             </tr>
-            <tr>
+            <tr title="The version the server expects the bot to be using.">
+              <td>Expected Bot Version</td>
+                <td>[[_shorten(_server_version.bot_version,'8')]]</td>
+              <td></td>
+            </tr>
+            <tr title="First time ever a bot with this id contacted the server.">
               <td>First seen</td>
               <td title="[[_bot.human_first_seen_ts]]">
                 [[_timeDiffApprox(_bot.first_seen_ts)]] ago
               </td>
               <td></td>
             </tr>
-            <tr>
+            <tr title="How the bot is authenticated by the server.">
               <td>Authenticated as</td>
               <td>[[_bot.authenticated_as]]</td>
               <td></td>
             </tr>
           </table>
 
           <span class="title">State</span>
 
           <template is="dom-if" if="[[_not(_show_state)]]">
             <button on-click="_toggleState">
@@ skipping 59 matching lines @@
                 <th>Version</th>
               </tr>
             </thead>
             <tbody>
               <template is="dom-repeat" items="{{_eventList(_events,_show_all)}}" as="event">
                 <tr>
                   <td class="message">[[event.message]]</a></td>
                   <td>[[event.event_type]]</td>
                   <td>[[event.human_ts]]</td>
                   <td><a target="_blank" href$="[[_taskLink(event.task_id)]]">[[event.task_id]]</a></td>
-                  <td>
+                  <td class$="[[_classVersion(_server_version.bot_version,event.version)]]">
                     <a target="_blank" href$="[[_luciLink(event.version)]]">[[_shorten(event.version,'8')]]</a>
                   </td>
                 </tr>
               </template>
             </tbody>
           </table>
         </template>
       </div>
     </swarming-app>
 
@@ skipping 53 matching lines @@
       },
 
       _canDelete: function(bot, permissions) {
         return bot && bot.is_dead && permissions.delete_bot;
       },
 
       _canShutdown: function(bot, permissions){
         return bot && !bot.is_dead && permissions.terminate_bot;
       },
 
+      _classVersion: function(serverVersion, otherVersion) {
+        if (serverVersion !== otherVersion) {
+          return "old_version";
+        }
+        return "";
+      },
+
       _concat: function(arr) {
         if (!arr) {
           return "";
         }
         return arr.join(" | ");
       },
 
       _deleteBot: function() {
         swarming.postWithToast("/_ah/api/swarming/v1/bot/"+this.bot_id+"/delete",
           "Deleting "+this.bot_id, this._auth_headers);
@@ skipping 99 matching lines @@
       },
 
       _toggleState: function() {
         this.set("_show_state", !this._show_state);
       }
 
     });
   })();
   </script>
 </dom-module>