ui: light up the nav, aggregate checks

ui/index.html

@@ -41,14 +41,20 @@
         </div>
 
         <div class="col-md-2 col-md-offset-1 col-sm-3 col-sm-offset-0">
-            <a class="btn btn-warning" href="#">5 checks failing</a>
+            {{#link-to 'services'}}<button {{bind-attr class=":btn hasFailingChecks:btn-warning:btn-success"}}>{{ checkMessage }}</button>{{/link-to}}
         </div>
 
         <div class="col-md-2 col-sm-3">
-            <a class="btn btn-dropdown btn-default" href="#">
+          <button type="button" {{bind-attr class=":btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </button>
-              {{model}}
+
-              <span class="caret"></span>
+          {{#if isDropdownVisible}}
-            </a>
+            <ul class="dropdown-menu" style="display:block;">
+              {{#each dc in dcs}}
+                <li {{action "toggle"}}>{{#link-to 'services' dc}}{{dc}}{{/link-to}}</li>
+              {{/each}}
+            </ul>
+          {{/if}}
+
         </div>
       </div>
     </div>
@@ -209,9 +215,9 @@
   <script type="text/x-handlebars" id="index">
     <div class="col-md-8 col-md-offset-2 vertical-center">
       {{#each item in model}}
-        {{#link-to 'dc' item }}
+        {{#link-to 'services' item }}
-            <div class="panel panel-success panel-link panel-short">
+            <div class="panel panel-link panel-short">
-              <div class="panel-bar"></div>
+              <div class="panel-bar bg-green"></div>
               <div class="panel-heading">
                 <h3 class="panel-title">
                   {{item}}

ui/javascripts/app/controllers.js

@@ -10,6 +10,47 @@ App.IndexController = Ember.Controller.extend({
 // path: /:dc
 //
 App.DcController = Ember.Controller.extend({
+  isDropdownVisible: false,
+
+  checks: function() {
+    var services = this.get('services');
+    var checks = Ember.A()
+
+    // loop over all of the services we have,
+    // merge their checks into one.
+    services.forEach(function(item) {
+      checks = checks.concat(item.Checks)
+    });
+
+    // return the checks
+    return checks
+  }.property('checks'),
+
+  checkMessage: function() {
+    var checks = this.get('checks')
+
+    // return the message for display
+    if (this.get('hasFailingChecks') == true) {
+      return checks.filterBy('Status', 'critical').get('length') + ' checks failing';
+    } else {
+      return checks.filterBy('Status', 'passing').get('length') + ' checks passing';
+    }
+
+  }.property('checkMessage'),
+
+  hasFailingChecks: function() {
+    var checks = this.get('checks')
+
+    // Return a boolean if checks are failing.
+    return (checks.filterBy('Status', 'critical').get('length') > 0);
+
+  }.property('hasFailingChecks'),
+
+  actions: {
+    toggle: function(item){
+      this.toggleProperty('isDropdownVisible');
+    }
+  }
 })
 
 

ui/javascripts/app/routes.js

@@ -43,6 +43,18 @@ App.DcRoute = App.BaseRoute.extend({
   //
   model: function(params) {
     return params.dc;
+  },
+
+  setupController: function(controller, model) {
+    controller.set('content', model);
+
+    controller.set('services', [App.Service.create(window.fixtures.services[0]), App.Service.create(window.fixtures.services[1])]);
+
+    controller.set('dcs', window.fixtures.dcs);
+  },
+
+  afterModel: function(dcs, transition) {
+    this.transitionTo('services');
   }
 });
 

ui/javascripts/app/views.js

@@ -5,6 +5,13 @@
 
 App.DcView = Ember.View.extend({
     templateName: 'dc',
+    classNames: 'dropdowns',
+
+    click: function(e){
+        if ($(e.target).is('.dropdowns')){
+          $('ul.dropdown-menu').hide();
+        }
+    }
 })
 
 //
@@ -40,4 +47,3 @@ App.NodesShowView = Ember.View.extend({
     //
     templateName: 'node'
 })
-

ui/styles/_buttons.scss

@@ -5,6 +5,7 @@
     border-width: 2px;
     color: $gray;
     @include transition(background-color .1s ease-in-out);
+    outline: none;
 
     &:hover {
         color: darken($gray, 10%);

ui/styles/_nav.scss

@@ -23,4 +23,23 @@
         width: auto;
     }
 
+    ul.dropdown-menu {
+        li {
+
+            a {
+                text-transform: uppercase;
+                font-weight: 600;
+                font-size: 12px;
+                color: $gray;
+                @include transition(background-color .1s ease-in-out);
+
+                &:hover {
+                    color: darken($gray, 10%);
+                    background-color: lighten($gray-background, 5%);
+                }
+
+            }
+        }
+    }
+
 }