Make the new index page more useful

appengine/swarming/elements/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>
 
   <swarming-app> is meant to be used in top level elements to provide the header
       toolbar and authentication.
 
   It contains the definition of the following style modules:
 
     swarming-app-style
 
   <style include="shared-style"> contains styles to be shared among all
       apps, such as colors.
 
   Properties:
-    auth_headers: Object, Use this in iron-ajax to set oauth2 headers.
     busy: Boolean, If the busy spinner should be active.
+    client_id: String, Oauth 2.0 client id.  It will be set by server-side
+        template evaluation.
     name: String, the name of the app to be displayed.
 
+    auth_headers: Object, Use this as an argument to sk.request to set oauth2 headers.
+    permissions: Object, {String:Boolean} of permissions to perform various
+        behaviors, such as terminate_bot.
+    signed_in: Boolean, if the user is signed in.
   Methods:
     None.
 
   Events:
     None.
 -->
 
 <link rel="import" href="/res/imp/bower_components/app-layout/app-layout.html">
 <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.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">
 
 <dom-module id="swarming-app">
   <template>
     <style include="iron-flex">
       :host {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
@@ skipping 22 matching lines @@
       }
 
       paper-spinner-lite {
         --paper-spinner-color: var(--google-yellow-500);
       }
     </style>
     <app-header-layout>
       <app-header fixed>
         <app-toolbar>
           <div class="title left">[[name]]</div>
-          <paper-spinner-lite class="left" active="[[busy]]"></paper-spinner-lite>
+          <paper-spinner-lite class="left" active="[[_or(busy,_busy)]]"></paper-spinner-lite>
 
           <a class="left" href="/newui/">Home</a>
           <a class="left" href="/newui/botlist">Bot List</a>
           <a class="left" href="/newui/tasklist">Task List</a>
           <div class="flex"></div>
           <auth-signin
               class="right"
-              client-id="[[client_id]]"
-              auth-headers="{{auth_headers}}"
-              signed-in="{{signed_in}}">
+              client_id="[[client_id]]"
+              auth_headers="{{auth_headers}}"
+              signed_in="{{signed_in}}">
           </auth-signin>
         </app-toolbar>
       </app-header>
       <div class="main-content">
         <content></content>
       </div>
     </app-header-layout>
 
   </template>
   <script>
     Polymer({
       is: 'swarming-app',
+
+      behaviors: [
+          SwarmingBehaviors.CommonBehavior,
+      ],
+
       properties: {
+        // input
+        busy: {
+          type: Boolean,
+        },
         client_id: {
           type: String,
         },
+        name: {
+          type: String,
+        },
+        // outputs
         auth_headers: {
           type: Object,
           notify: true,
+          observer: "_loadPermissions"
         },
+
+        permissions: {
+          type: Object,
+          value: function() {
+            // If we aren't logged in, default to no permissions.
+            return {};
+          },
+          notify: true,
+        },
+
         signed_in: {
           type: Boolean,
           value: false,
           notify:true,
         },
-        permissions: {
-          type: Object,
-          value: function() {
-            // TODO(kjlubick): Make this call the whoami endpoint after signing in.
-            return {
-              can_cancel_task: true,
-            }
-          },
-          notify: true,
-        },
 
-        busy: {
+        // private
+        _busy: {
           type: Boolean,
-        },
-        name: {
-          type: String,
-        },
+          value: false,
+        }
+
+      },
+
+      _loadPermissions: function() {
+        this._getJsonAsync("permissions", "/_ah/api/swarming/v1/server/permissions",
+          "_busy", this.auth_headers);
       },
 
     });
   </script>
 </dom-module>
 
 <dom-module id="swarming-app-style">
   <style>
       * {
         font-family: sans-serif;
       }
       /* Only style anchor tags that are actually linking somewhere.*/
       a[href] {
         color: #1F78B4;
       }
   </style>
 </dom-module>