Cleans up web UI and fixes ACL token "stuckness" issue. (#3245)

* Removes GitHub reference.

* Doesn't display ACL token on the unauthorized page.

* Removes useless fetch for nodes and cleans up comments.

* Provides a path to reset the ACL token when it's invalid.

This included making the settings page global so it's reachable, and adding
some more information about an error on the error page.

* Updates built-in web assets.

index.html

@@ -56,10 +56,16 @@ <h2>JavaScript Required</h2>
           {{#if controller.model.statusText }}
             <p class="bold">HTTP error code from Consul: <code>{{controller.model.status}} {{controller.model.statusText}}</code></p>
           {{/if}}
-          <p>This is an error page for the Consul web UI. You may have visited a URL that is loading an
-          unknown resource, so you can try going back to the <a href="#">root</a>.</p>
-          <p>Otherwise, please report any unexpected
-          issues on the <a href="https://github.com/hashicorp/consul">GitHub page</a>.</p>
+          {{#if controller.model.responseText }}
+            <p class="bold">Error message from Consul: <code>{{limit controller.model.responseText 255}}</code></p>
+          {{/if}}
+          <p>Consul returned an error. You may have visited a URL that is loading an unknown resource, so you
+            can try going back to the root. If your ACL token was not found you can reset it, and then you
+            will be redirected to the settings page to enter a new ACL token.</p>
+          <div class="form-group">
+            <button {{ action "resetToken" }} {{ bind-attr class=":btn :btn-danger" }}>Reset ACL Token</button>
+            <button {{ action "backHome" }} {{ bind-attr class=":btn :btn-default" }}>Go Back to Root</button>
+          </div>
         </div>
       </div>
     </div>
@@ -70,13 +76,7 @@ <h2>JavaScript Required</h2>
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
         <div class="text-center vertical-center">
           <p class="bold">Access Denied</p>
-          {{#if aclToken}}
-          <p>Your ACL token, <code>{{aclToken}}</code>, does not
-          have the appropriate permissions to perform the expected action.</p>
-          {{else}}
-          <p>The default agent token does not
-          have the appropriate permissions to perform the expected action.</p>
-          {{/if}}
+          <p>Your ACL token does not have the appropriate permissions to perform the expected action.</p>
           <p>Learn more in the <a href="https://www.consul.io/docs/guides/acl.html" target="_blank">ACL documentation</a>.</p>
         </div>
       </div>
@@ -759,14 +759,15 @@ <h3>Settings</h3>
       <p>These settings allow you to configure your browser for the Consul Web UI. Everything is saved to localstorage,
       and should persist through visits and browser usage.</p>
       <p>Settings are automatically persisted upon modification, so no manual save is required.</p>
-      <h5>Access Token</h5>
+      <h5>ACL Token</h5>
       <div class="form-group">
         {{ input type="text" value=model.token class="form-control form-mono" placeholder="token"}}
         <span class="help-block">The token is sent with requests as the <code>?token</code> parameter. This is used to control the ACL for the
         web UI.</span>
       </div>
       <div class="form-group">
         <button {{ action "reset" }} {{ bind-attr class=":btn :btn-danger" }}>Reset Defaults</button>
+        <button {{ action "close" }} {{ bind-attr class=":btn :btn-default" }}>Close</button>
       </div>
     </div>
   </script>

javascripts/app/controllers.js

@@ -501,6 +501,23 @@ App.SettingsController = Ember.ObjectController.extend({
         notify('Settings reset', 3000);
         this.set('isLoading', false);
       }
+    },
+
+    close: function() {
+      this.transitionToRoute('index');
+    }
+  }
+});
+
+App.ErrorController = Ember.ObjectController.extend({
+  actions: {
+    resetToken: function() {
+      App.set('settings.token', '');
+      this.transitionToRoute('settings');
+    },
+
+    backHome: function() {
+      this.transitionToRoute('index');
     }
   }
 });

javascripts/app/helpers.js

@@ -50,7 +50,6 @@ Ember.Handlebars.helper('aclName', function(name, id) {
   }
 });
 
-
 Ember.Handlebars.helper('formatRules', function(rules) {
   if (rules === "") {
     return "No rules defined";
@@ -59,6 +58,11 @@ Ember.Handlebars.helper('formatRules', function(rules) {
   }
 });
 
+Ember.Handlebars.helper('limit', function(str, limit) {
+  if (str.length > limit)
+    return str.substring(0, limit) + '...';
+  return str;
+});
 
 // We need to do this because of our global namespace properties. The
 // service.Tags

javascripts/app/router.js

@@ -43,15 +43,17 @@ App.Router.map(function() {
 
     // Shows a page explaining that ACLs haven't been set-up
     this.route("aclsdisabled", { path: "/aclsdisabled" });
-    // Shows a page explaining that the ACL key being used isn't
+
+    // Shows a page explaining that the ACL token being used isn't
     // authorized
     this.route("unauthorized", { path: "/unauthorized" });
-
-    this.resource("settings", { path: "/settings" });
   });
 
   // Shows a datacenter picker. If you only have one
   // it just redirects you through.
   this.route("index", { path: "/" });
+
+  // The settings page is global.
+  this.resource("settings", { path: "/settings" });
 });
 

javascripts/app/routes.js

@@ -327,7 +327,7 @@ App.NodesShowRoute = App.BaseRoute.extend({
       max = 0;
     }
 
-    // Return a promise hash of the node and nodes
+    // Return a promise hash of the node
     return Ember.RSVP.hash({
       dc: dc.dc,
       token: token,
@@ -340,9 +340,6 @@ App.NodesShowRoute = App.BaseRoute.extend({
       },
       node: Ember.$.getJSON(formatUrl(consulHost + '/v1/internal/ui/node/' + params.name, dc.dc, token)).then(function(data) {
         return App.Node.create(data);
-      }),
-      nodes: Ember.$.getJSON(formatUrl(consulHost + '/v1/internal/ui/node/' + params.name, dc.dc, token)).then(function(data) {
-        return App.Node.create(data);
       })
     });
   },
@@ -431,7 +428,7 @@ App.AclsShowRoute = App.BaseRoute.extend({
     var dc = this.modelFor('dc').dc;
     var token = App.get('settings.token');
 
-    // Return a promise hash of the node and nodes
+    // Return a promise hash of the ACLs
     return Ember.RSVP.hash({
       dc: dc,
       acl: Ember.$.getJSON(formatUrl(consulHost + '/v1/acl/info/'+ params.id, dc, token)).then(function(data) {