ui/acls: compact nav, add ACL and url helpers

ui/index.html

@@ -56,7 +56,7 @@
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
         <div class="text-center vertical-center">
           <p class="bold">ACLs Disabled</p>
-          <p>ACLs are disabled in this Consul cluster. This is the default behavior, as you have to implicitly enable them.</p>
+          <p>ACLs are disabled in this Consul cluster. This is the default behavior, as you have to implictly enable them.</p>
           </p>Learn more in the <a href="http://www.consul.io/docs/internals/acl.html">ACL documentation</a>.</p>
         </div>
       </div>
@@ -100,28 +100,32 @@
     <div class="row">
       <div class="col-md-12 col-sm-12 col-xs-12 topbar">
 
-        <div class="col-md-1 col-sm-2 col-xs-10 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-1 col-sm-2 col-xs-8 col-sm-offset-0 col-xs-offset-1">
           <a href="#"><div class="top-brand"></div></a>
         </div>
 
-        <div class="col-md-2 col-sm-3 col-xs-10 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
          {{#link-to 'services' class='btn btn-default col-xs-12'}}Services{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3 col-xs-10 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
           {{#link-to 'nodes' class='btn btn-default col-xs-12'}}Nodes{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3 col-xs-10 col-sm-offset-0 col-xs-offset-1">
+        <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
           {{#link-to 'kv' class='btn btn-default col-xs-12'}}Key/Value{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-5 col-xs-10 col-xs-offset-1">
+        <div class="col-md-2 col-sm-2 col-xs-8 col-md-offset-0 col-sm-offset-2 col-xs-offset-1">
+          {{#link-to 'acls' class='btn btn-default col-xs-12'}}ACL{{/link-to}}
+        </div>
+
+        <div class="col-md-1 col-md-offset-1 col-sm-3 col-sm-offset-1 col-xs-10 col-xs-offset-1">
             {{#link-to 'services' (query-params status=checkStatus) tagName="div" href=false }}<a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</a>{{/link-to}}
         </div>
 
-        <div class="col-md-2 col-sm-3 col-xs-10 col-sm-offset-0 col-xs-offset-1">
-          <a {{bind-attr class=":col-xs-12 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </a>
+        <div class="col-md-1 col-sm-2 col-xs-6 col-sm-offset-0 col-xs-offset-1">
+          <a {{bind-attr class=":col-xs-6 :btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> <span class="elip-overflow">{{model}} <span class="caret"></span></span> </a>
 
           {{#if isDropdownVisible}}
             <ul class="dropdown-menu col-xs-8" style="display:block;">

ui/javascripts/app/controllers.js

@@ -44,9 +44,9 @@ App.DcController = Ember.Controller.extend({
     var passingChecks = checks.filterBy('Status', 'passing').get('length');
 
     if (this.get('hasFailingChecks') === true) {
-      return  failingChecks + ' checks failing';
+      return  failingChecks + ' failing';
     } else {
-      return  passingChecks + ' checks passing';
+      return  passingChecks + ' passing';
     }
 
   }.property('nodes'),

ui/javascripts/app/router.js

@@ -1,6 +1,11 @@
 window.App = Ember.Application.create({
   rootElement: "#app",
-  currentPath: ''
+  currentPath: '',
+
+  initialize: function(container, application) {
+    console.log("initialize");
+    console.log(localStorage.getItem("foobars"));
+  }
 });
 
 
@@ -33,6 +38,9 @@ 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
+    // authorized
+    this.route("unauthorized", { path: "/unauthorized" });
   });
 
   // Shows a datacenter picker. If you only have one

ui/javascripts/app/routes.js

@@ -305,7 +305,7 @@ App.AclsRoute = App.BaseRoute.extend({
   model: function(params) {
     var dc = this.modelFor('dc').dc;
     // Return a promise containing the ACLS
-    return Ember.$.getJSON('/v1/acl/list?dc=' + dc).then(function(data) {
+    return Ember.$.getJSON(formatUrl('/v1/acl/list', dc, "")).then(function(data) {
       objs = [];
       data.map(function(obj){
        objs.push(App.Acl.create(obj));
@@ -332,3 +332,17 @@ App.AclsRoute = App.BaseRoute.extend({
       controller.set('acls', model);
   }
 });
+
+// Adds any global parameters we need to set to a url/path
+function formatUrl(url, dc, token) {
+  if (url.indexOf("?") > 0) {
+    // If our url has existing params
+    url = url + "&dc=" + dc;
+    url = url + "&token=" + token;
+  } else {
+    // Our url doesn't have params
+    url = url + "?dc=" + dc;
+    url = url + "&token=" + token;
+  }
+  return url;
+}

ui/styles/_nav.scss

@@ -18,7 +18,7 @@
 
     .btn {
         margin-top: 20px;
-        min-width: 140px;
+        min-width: 100px;
     }
 
     .btn-dropdown {

ui/styles/base.scss

@@ -120,3 +120,10 @@ a {
   height: 800px;
   margin-bottom: 30px;
 }
+
+.elip-overflow {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}