From 92f4a3f466f3493effa8597da1dbc601fb3f60fe Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 30 May 2014 14:26:11 -0400
Subject: [PATCH] ui: add condensed node view

---
 ui/index.html                     | 56 +++++++++++++++++++++----------
 ui/javascripts/app/components.js  |  0
 ui/javascripts/app/controllers.js |  4 +++
 ui/javascripts/app/routes.js      |  7 ++++
 ui/scripts/compile.rb             |  1 +
 ui/styles/_lists.scss             | 34 ++++++++++++++++++-
 6 files changed, 83 insertions(+), 19 deletions(-)
 create mode 100644 ui/javascripts/app/components.js

diff --git a/ui/index.html b/ui/index.html
index 2d750e9cbf..ebca57b4e4 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -318,27 +318,46 @@
   <script type="text/x-handlebars" id="nodes">
     <div class="col-md-5">
 
-      {{#each node in nodes}}
-        <div class="row">
-          {{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-link" }}
-            <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
-            <h4 class="list-group-item-heading">
-              {{node.Node}}
-              <small>{{node.Address}}</small>
-              <div class="heading-helper">
-                <a class="subtle" href="#">{{node.checkMessage}}</a>
+      {{#if condensedView }}
+
+        {{#each node in nodes}}
+          <div class="row">
+            {{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-condensed-link" }}
+              <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
+              <div class="name">
+                {{node.Node}}
+                <small class="pull-right">
+                  {{ node.Services.length }} services
+                </small>
               </div>
-            </h4>
-            <ul class="list-inline">
-              {{#each service in node.Services }}
-                <li class="bold">{{service.Service}}</li>
-              {{/each}}
-            </ul>
-          </div>
-        {{/link-to}}
+            </div>
+          {{/link-to}}
 
-      {{/each}}
+        {{/each}}
 
+      {{else}}
+
+        {{#each node in nodes}}
+          <div class="row">
+            {{#link-to 'nodes.show' node.Node tagName="div" href=false class="list-group-item list-link" }}
+              <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
+              <h4 class="list-group-item-heading">
+                {{node.Node}}
+                <small>{{node.Address}}</small>
+                <div class="heading-helper">
+                  <a class="subtle" href="#">{{node.checkMessage}}</a>
+                </div>
+              </h4>
+              <ul class="list-inline">
+                {{#each service in node.Services }}
+                  <li class="bold">{{service.Service}}</li>
+                {{/each}}
+              </ul>
+            </div>
+          {{/link-to}}
+
+        {{/each}}
+      {{/if}}
     </div>
 
     <div class="col-md-1">
@@ -439,6 +458,7 @@
   <script src="javascripts/app/views.js"></script>
   <script src="javascripts/app/controllers.js"></script>
   <script src="javascripts/app/helpers.js"></script>
+  <script src="javascripts/app/components.js"></script>
   <!-- to activate the test runner, add the "?test" query string parameter -->
   <script src="tests/runner.js"></script>
   <!-- <script src="static/application.min.js"></script> -->
diff --git a/ui/javascripts/app/components.js b/ui/javascripts/app/components.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index f77d43cba9..d3da846826 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -216,3 +216,7 @@ App.KvEditController = KvBaseController.extend({
   }
 
 });
+
+App.NodesController = Ember.ArrayController.extend({
+  condensedView: true
+});
diff --git a/ui/javascripts/app/routes.js b/ui/javascripts/app/routes.js
index b0020b3968..db941d8fd4 100644
--- a/ui/javascripts/app/routes.js
+++ b/ui/javascripts/app/routes.js
@@ -246,6 +246,13 @@ App.NodesRoute = App.BaseRoute.extend({
       objs = [];
       data.map(function(obj){
        objs.push(App.Node.create(obj));
+       objs.push(App.Node.create(obj));
+       objs.push(App.Node.create(obj));
+       objs.push(App.Node.create(obj));
+       objs.push(App.Node.create(obj));
+       objs.push(App.Node.create(obj));
+       objs.push(App.Node.create(obj));
+       objs.push(App.Node.create(obj));
       });
       return objs
     });
diff --git a/ui/scripts/compile.rb b/ui/scripts/compile.rb
index f693695434..3c7e3f8edb 100644
--- a/ui/scripts/compile.rb
+++ b/ui/scripts/compile.rb
@@ -16,6 +16,7 @@ app = [
   "javascripts/app/controllers.js",
   "javascripts/app/views.js",
   "javascripts/app/helpers.js",
+  "javascripts/app/components.js",
 ]
 
 libs.each do |js_file|
diff --git a/ui/styles/_lists.scss b/ui/styles/_lists.scss
index b9fe9fc1ec..e7b54be088 100644
--- a/ui/styles/_lists.scss
+++ b/ui/styles/_lists.scss
@@ -42,16 +42,48 @@
         background-color: lighten($gray-background, 8%);
     }
 
+    &.list-condensed-link:hover {
+        cursor: pointer;
+        background-color: lighten($gray-background, 8%);
+    }
+
     &.active {
         @include transition(border-color .1s linear);
         border-color: $purple;
 
-        .list-bar {
+        .list-bar, .list-bar-horizontal {
             @include transition(background-color .1s linear);
             background-color: $purple;
         }
     }
 
+    &.list-condensed-link {
+        border-color: $gray-background;
+        margin-bottom: 4px;
+        margin-top: 4px;
+
+        height: 40px;
+        font-weight: 700;
+
+        .name {
+            font-size: 15px;
+            padding-top: 7px;
+
+            small {
+                padding-right: 8px;
+                padding-top: 1px;
+                font-size: 12px;
+                color: $gray-light;
+            }
+        }
+    }
+
+    .list-bar-horizontal {
+        width: 20px;
+        float: left;
+        height: 100%;
+        margin-right: 10px;
+    }
 }
 
 ul.list-broken {