Move error-toast up and make server details problems easy to see

appengine/swarming/ui/res/imp/common/swarming-app.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:
 
     <swarming-app>
 
@@ skipping 33 matching lines @@
 <link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="/res/imp/bower_components/iron-media-query/iron-media-query.html">
 <link rel="import" href="/res/imp/bower_components/paper-fab/paper-fab.html">
 <link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="/res/imp/bower_components/paper-item/paper-item.html">
 <link rel="import" href="/res/imp/bower_components/paper-menu/paper-menu.html">
 <link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner-lite.html">
 
 <link rel="import" href="auth-signin.html">
 <link rel="import" href="common-behavior.html">
+<link rel="import" href="error-toast.html">
 
 <dom-module id="swarming-app">
   <template>
     <style include="iron-flex">
       :host {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
       }
 
       app-toolbar {
         background-color: #1F78B4;
         color: #fff;
       }
 
+      app-toolbar.error {
+        background-color: #b41f1f;
+        color: #fff;
+      }
+
       app-toolbar a {
         color: #fff;
       }
       .left {
         margin-right:15px;
       }
       .right {
         margin-left:15px;
       }
       .main-content {
@@ skipping 41 matching lines @@
     </style>
 
     <app-header-layout>
       <app-drawer id="mobile_menu">
           <div class="menu-item"><a class="left" href="/">Home</a></div>
           <div class="menu-item"><a class="left" href="/botlist">Bot List</a></div>
           <div class="menu-item"><a class="left" href="/tasklist">Task List</a></div>
           <div class="menu-item"><a class="left" href="/oldui">Old UI</a></div>
       </app-drawer>
       <app-header fixed>
-        <app-toolbar>
+        <app-toolbar class$="[[_toolbarClass(client_id)]]">
           <paper-icon-button
               class="menu-button"
               icon="icons:menu"
               on-tap="_toggleMobileMenu"
               hidden$="[[wide_layout]]">
           </paper-icon-button>
           <div class="title left">[[name]]</div>
           <paper-spinner-lite class="left" active="[[_or(busy,_busy1,_busy2)]]"></paper-spinner-lite>
 
           <a class="left" href="/" hidden$="[[!wide_layout]]">Home</a>
           <a class="left" href="/botlist" hidden$="[[!wide_layout]]">Bot List</a>
           <a class="left" href="/tasklist" hidden$="[[!wide_layout]]">Task List</a>
           <div class="flex" hidden$="[[!wide_layout]]"></div>
-          <a class="small right" href="/oldui" hidden$="[[!wide_layout]]">Old UI</a>
-          <div class="small right">
-            Server:
-            <a href$="[[_versionLink(server_details)]]">
-              [[server_details.server_version]]
-            </a>
-          </div>
-          <auth-signin
-              class="right"
-              client_id="[[client_id]]"
-              auth_headers="{{auth_headers}}"
-              profile="{{profile}}"
-              signed_in="{{signed_in}}">
-          </auth-signin>
+          <template is="dom-if" if="[[client_id]]">
+            <div class="small right">
+              Server:
+              <a href$="[[_versionLink(server_details)]]">
+                [[server_details.server_version]]
+              </a>
+            </div>
+            <auth-signin
+                class="right"
+                client_id="[[client_id]]"
+                auth_headers="{{auth_headers}}"
+                profile="{{profile}}"
+                signed_in="{{signed_in}}">
+            </auth-signin>
+          </template>
+          <template is="dom-if" if="[[!client_id]]">
+            <div class="right">No OAauth client id found.</div>
+          </template>
         </app-toolbar>
       </app-header>
       <div class="main-content">
         <content></content>
       </div>
-        <a target="_blank" rel="noopener" href="https://bugs.chromium.org/p/chromium/issues/entry?components=Infra%3EPlatform%3ESwarming&owner=kjlubick@chromium.org&status=Assigned">
-          <paper-fab mini icon="icons:bug-report"></paper-fab>
-        </a>
+      <error-toast></error-toast>
+      <a target="_blank" rel="noopener" href="https://bugs.chromium.org/p/chromium/issues/entry?components=Infra%3EPlatform%3ESwarming&owner=kjlubick@chromium.org&status=Assigned">
+        <paper-fab mini icon="icons:bug-report"></paper-fab>
+      </a>
     </app-header-layout>
 
     <iron-media-query query="min-width: 600px" query-matches="{{wide_layout}}"></iron-media-query>
 
   </template>
   <script>
     Polymer({
       is: 'swarming-app',
 
       behaviors: [
@@ skipping 51 matching lines @@
           type: Boolean,
           value: false,
         }
 
       },
 
       _load: function() {
         this._getJsonAsync("permissions", "/api/swarming/v1/server/permissions",
           "_busy1", this.auth_headers);
         this._getJsonAsync("server_details", "/api/swarming/v1/server/details",
-          "_busy2", this.auth_headers)
+          "_busy2", this.auth_headers).catch(function(r){
+            sk.errorMessage("Http response: "+ (r.status || " ") + " " + r.response);
+          });
       },
 
       _toggleMobileMenu: function() {
         this.$.mobile_menu.toggle();
       },
 
+      _toolbarClass: function(client_id) {
+        if (!client_id) {
+          return "error";
+        }
+        return "";
+      },
+
       _versionLink: function(version) {
         if (!version || !version.server_version) {
           return undefined;
         }
         var split = version.server_version.split("-");
         if (split.length !== 2) {
           return undefined;
         }
         return "https://github.com/luci/luci-py/commit/"+split[1];
       }
@@ skipping 87 matching lines @@
         border: none;
         line-height: 20px;
         vertical-align: middle;
       }
 
       select {
         overflow-y: auto;
       }
   </style>
 </dom-module>