Several small changes to new UI pages

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 60 matching lines @@
 
       .stats {
         min-width: 700px;
         flex-grow: 2;
       }
 
       #collapse {
         max-width: 700px;
       }
 
+      .cloud {
+        white-space: nowrap;
+        margin-bottom: 5px;
+        margin-top: auto;
+      }
+
       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 34 matching lines @@
 
           bot="{{_bot}}"
           busy="{{_busy1}}"
           events="{{_events}}"
           tasks="{{_tasks}}"
           on-reload="_clearAndReload">
         </bot-page-data>
 
         <div class="header horizontal layout">
           <paper-input class="id_input" label="Bot id" value="{{bot_id}}"></paper-input>
+          <template is="dom-if" if="[[_cloudConsoleLink(_bot)]]">
+            <div class="vertical layout">
+              <a href$="[[_cloudConsoleLink(_bot)]]" class="cloud">Cloud Console</a>
+            </div>
+          </template>
           <button on-click="_refresh">
             <iron-icon class="refresh" icon="icons:refresh"></iron-icon>
           </button>
         </div>
 
         <div class="horizontal wrap layout">
           <div class="flex">
             <table>
               <tr class$="[[_isDead(_bot)]]" title="Last time the bot contacted the server.">
                 <td>Last Seen</td>
@@ skipping 17 matching lines @@
               </tr>
               <template is="dom-if" if="[[_bot.quarantined]]">
                 <tr class="quarantined">
                   <td>Quarantined</td>
                   <td colspan="2" class="message">[[_quarantineMessage(_bot)]]</td>
                 </tr>
               </template>
               <tr>
                 <td>Current Task</td>
                 <td>
-                  <a target="_blank" href$="[[_taskLink(_bot.task_id)]]">
+                  <a target="_blank" rel="noopener"
+                      href$="[[_taskLink(_bot.task_id)]]">
                     [[_task(_bot)]]
                   </a>
                 </td>
                 <td>
                 <!-- TODO(kjlubick) add the cancel button when swarming can
                 cancel running tasks -->
                 </td>
               </tr>
               <tr>
                 <td rowspan$="[[_numRows(_bot.dimensions)]]">Dimensions</td>
@@ skipping 83 matching lines @@
               <tr>
                 <th>Task</th>
                 <th>Started</th>
                 <th>Duration</th>
                 <th>Result</th>
               </tr>
             </thead>
             <tbody>
               <template is="dom-repeat" items="{{_tasks}}" as="task">
                 <tr class$="[[_taskClass(task)]]">
-                  <td><a target="_blank" href$="[[_taskLink(task.task_id)]]">[[task.name]]</a></td>
+                  <td>
+                    <a target="_blank" rel="noopener"
+                        href$="[[_taskLink(task.task_id)]]">
+                      [[task.name]]
+                    </a>
+                  </td>
                   <td>[[task.human_started_ts]]</td>
                   <td title="[[task.human_completed_ts]]">[[task.human_duration]]</td>
                   <td>[[task.state]]</td>
                 </tr>
               </template>
             </tbody>
           </table>
         </template>
 
         <template is="dom-if" if="[[_showEvents]]">
           <table class="events_table">
             <thead>
               <tr>
                 <th>Message</th>
                 <th>Type</th>
                 <th>Timestamp</th>
                 <th>Task ID</th>
                 <th>Version</th>
               </tr>
             </thead>
             <tbody>
               <template is="dom-repeat" items="{{_eventList(_show_all,_events.*)}}" as="event">
                 <tr>
                   <td class="message">[[event.message]]</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>
+                    <a target="_blank" rel="noopener"
+                        href$="[[_taskLink(event.task_id)]]">
+                      [[event.task_id]]
+                    </a>
+                  </td>
                   <td class$="[[_classVersion(_server_version.bot_version,event.version)]]">
-                    <a target="_blank" href$="[[_luciLink(event.version)]]">[[_shorten(event.version,'8')]]</a>
+                    <a target="_blank" rel="noopener"
+                        href$="[[_luciLink(event.version)]]">
+                      [[_shorten(event.version,'8')]]
+                    </a>
                   </td>
                 </tr>
               </template>
             </tbody>
           </table>
         </template>
         <!-- https://github.com/Polymer/polymer/issues/3669 hidden$ doesn't
             respect truthiness, only booleanness, so we have _showEvents
             instead of using _selected directly.-->
         <pageable-data
@@ skipping 102 matching lines @@
         }
         return "";
       },
 
       _clearAndReload: function(botID) {
         this.$.page_tasks.clear();
         this.$.page_events.clear();
         this._reload();
       },
 
+      _cloudConsoleLink(bot) {

[stephana, 2016/10/03 19:58:35]

Should this be  

_cloudConsoleLink: function(bot) {

...? 

[kjlubick, 2016/10/03 20:07:45]

yes.  I'm surprised it worked.

+        // We create a link to this bot in cloud console if we detect it is
+        // on GCE.  We look for the zone dimension and create the link using
+        // that.
+        if (!bot || !bot.dimensions) {
+          return undefined;

[stephana, 2016/10/03 19:58:35]

return false or empty string instead of undefined. 

[kjlubick, 2016/10/03 20:07:45]

Done.

+        }
+        var link;
+        bot.dimensions.forEach(function(d){
+          if (d.key === "zone") {
+            link = this._cloudConsoleLink(d.value[0], bot.bot_id);

[stephana, 2016/10/03 19:58:35]

what's the second argument ? wouldn't this make a recursive call. What's the
second argument ? 

[kjlubick, 2016/10/03 20:07:45]

This was, correctly but inexplicably, calling common-behavior._cloudConsoleLink

Naming has been updated to avoid this.

[stephana, 2016/10/04 13:24:31]

Acknowledged.

+          }
+        }.bind(this))
+        return link;
+      },
+
       _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 111 matching lines @@
       },
 
       _toggleState: function() {
         this.set("_show_state", !this._show_state);
       }
 
     });
   })();
   </script>
 </dom-module>