From 6b2022b780b462ddd614ccbd3d8b3a565a807691 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 25 Apr 2014 16:24:36 -0400
Subject: [PATCH] ui: light up the nav, aggregate checks

---
 ui/index.html                     | 22 +++++++++++------
 ui/javascripts/app/controllers.js | 41 +++++++++++++++++++++++++++++++
 ui/javascripts/app/routes.js      | 12 +++++++++
 ui/javascripts/app/views.js       |  8 +++++-
 ui/styles/_buttons.scss           |  1 +
 ui/styles/_nav.scss               | 19 ++++++++++++++
 6 files changed, 94 insertions(+), 9 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index a18cfb1fe..ed73a38cb 100644
--- a/ui/index.html
+++ b/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="#">
-              {{model}}
-              <span class="caret"></span>
-            </a>
+          <button type="button" {{bind-attr class=":btn isDropDownVisible:btn-primary:btn-default"}} {{action "toggle"}}> {{model}} <span class="caret"></span> </button>
+
+          {{#if isDropdownVisible}}
+            <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 }}
-            <div class="panel panel-success panel-link panel-short">
-              <div class="panel-bar"></div>
+        {{#link-to 'services' item }}
+            <div class="panel panel-link panel-short">
+              <div class="panel-bar bg-green"></div>
               <div class="panel-heading">
                 <h3 class="panel-title">
                   {{item}}
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index 64960e391..379b83a21 100644
--- a/ui/javascripts/app/controllers.js
+++ b/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');
+    }
+  }
 })
 
 
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index 0627dda55..fa866c18e 100644
--- a/ui/javascripts/app/routes.js
+++ b/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');
   }
 });
 
diff --git a/ui/javascripts/app/views.js b/ui/javascripts/app/views.js
index bb2eec8d1..ee3a94921 100644
--- a/ui/javascripts/app/views.js
+++ b/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'
 })
-
diff --git a/ui/styles/_buttons.scss b/ui/styles/_buttons.scss
index 79bd79b1f..fee15b459 100644
--- a/ui/styles/_buttons.scss
+++ b/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%);
diff --git a/ui/styles/_nav.scss b/ui/styles/_nav.scss
index d74a0ba46..cd87a8838 100644
--- a/ui/styles/_nav.scss
+++ b/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%);
+                }
+
+            }
+        }
+    }
+
 }