ui: initial pass at filtering and condensed view for nodes/services

ui/index.html

@@ -48,6 +48,22 @@
     </div>
   </script>
 
+  <script type="text/x-handlebars" id="actionbar">
+    <div class="row">
+      <div class="col-md-8">
+        {{ input type="text" value=filter class="form-control" placeholder="Filter by name"}}
+      </div>
+      <div class="col-md-4">
+        <div class="checkbox">
+          <label>
+            {{input type="checkbox" name="condensedView" checked=condensedView}}
+            Condensed
+          </label>
+        </div>
+      </div>
+    </div>
+  </script>
+
   <script type="text/x-handlebars" data-template-name="dc">
     <div class="row">
       <div class="col-md-12 col-sm-12 col-xs-12 topbar">
@@ -238,12 +254,26 @@
   </script>
 
   <script type="text/x-handlebars" id="services">
-
-    <div {{ bind-attr class=":col-md-5" }}>
-
-      {{#each service in services}}
-
     <div class="row">
+      <div class="col-md-5 scrollable">
+        {{view App.ActionBarView }}
+
+        {{#each service in filteredContent}}
+
+            {{#if condensedView }}
+
+              {{#link-to 'services.show' service.Name tagName="div" href=false class="list-group-item list-condensed-link" }}
+                <div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
+                <div class="name">
+                  {{service.Name}}
+                  <small class="pull-right">
+                    {{ service.checkMessage }}
+                  </small>
+                </div>
+              {{/link-to}}
+
+            {{else}}
+
               {{#link-to 'services.show' service.Name tagName="div" href=false class="list-group-item list-link" }}
                 <div {{bind-attr class="service.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
                 <h4 class="list-group-item-heading">
@@ -258,7 +288,8 @@
                   {{/each}}
                 </ul>
               {{/link-to}}
-        </div>
+
+            {{/if}}
 
         {{/each}}
 
@@ -274,11 +305,12 @@
         <hr>
       </div>
 
-    <div class="col-md-6">
+      <div class="col-md-6 scrollable">
         <div class="row">
           {{outlet}}
         </div>
       </div>
+    </div>
   </script>
 
   <script type="text/x-handlebars" id="service">
@@ -316,29 +348,26 @@
   </script>
 
   <script type="text/x-handlebars" id="nodes">
-    <div class="col-md-5">
+    <div class="row">
+      <div class="col-md-5 scrollable">
+        {{view App.ActionBarView }}
+
+          {{#each node in filteredContent}}
 
             {{#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
+                    {{ node.numServices }} services
                   </small>
                 </div>
-            </div>
               {{/link-to}}
 
-        {{/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">
@@ -353,11 +382,10 @@
                     <li class="bold">{{service.Service}}</li>
                   {{/each}}
                 </ul>
-            </div>
               {{/link-to}}
+            {{/if}}
 
           {{/each}}
-      {{/if}}
       </div>
 
       <div class="col-md-1">
@@ -371,11 +399,12 @@
       </div>
 
 
-    <div class="col-md-6">
+      <div class="col-md-6 scrollable">
         <div class="row">
           {{outlet}}
         </div>
       </div>
+    </div>
   </script>
 
   <script type="text/x-handlebars" id="node">

ui/javascripts/app/controllers.js

@@ -217,6 +217,27 @@ App.KvEditController = KvBaseController.extend({
 
 });
 
-App.NodesController = Ember.ArrayController.extend({
-  condensedView: true
+ItemBaseController = Ember.ArrayController.extend({
+  needs: ["dc"],
+  dc: Ember.computed.alias("controllers.dc"),
+  condensedView: true,
+  filter: "",
+
+  filteredContent: function() {
+    var filter = this.get('filter');
+
+    return this.get('items').filter(function(item, index, enumerable){
+      return item.get('filterKey').toLowerCase().match(filter.toLowerCase());
+    });
+  }.property('filter', 'items.@each'),
 });
+
+App.NodesController = ItemBaseController.extend({
+  items: Ember.computed.alias("nodes"),
+});
+
+
+App.ServicesController = ItemBaseController.extend({
+  items: Ember.computed.alias("services"),
+});
+

ui/javascripts/app/models.js

@@ -51,7 +51,11 @@ App.Service = Ember.Object.extend({
   //
   hasFailingChecks: function() {
     return (this.get('failingChecks') > 0);
-  }.property('Checks')
+  }.property('Checks'),
+
+  filterKey: function() {
+    return this.get('Name')
+  }.property('Name')
 });
 
 //
@@ -93,7 +97,18 @@ App.Node = Ember.Object.extend({
   //
   hasFailingChecks: function() {
     return (this.get('failingChecks') > 0);
-  }.property('Checks')
+  }.property('Checks'),
+
+  //
+  // The number of services on the node
+  //
+  numServices: function() {
+    return (this.get('Services').length)
+  }.property('Services'),
+
+  filterKey: function() {
+    return this.get('Node')
+  }.property('Node')
 });
 
 

ui/javascripts/app/routes.js

@@ -3,6 +3,7 @@
 //
 App.BaseRoute = Ember.Route.extend({
   rootKey: '',
+  condensedView: false,
 
   getParentAndGrandparent: function(key) {
     var parentKey = this.rootKey,
@@ -246,13 +247,6 @@ 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
     });

ui/javascripts/app/views.js

@@ -14,6 +14,11 @@ App.DcView = Ember.View.extend({
     }
 })
 
+
+App.ItemView = Ember.View.extend({
+    templateName: 'item'
+})
+
 //
 // Services
 //
@@ -45,6 +50,15 @@ App.NodesLoadingView = Ember.View.extend({
     templateName: 'item/loading'
 })
 
+
+// KV
+
 App.KvListView = Ember.View.extend({
     templateName: 'kv'
 })
+
+// Actions
+
+App.ActionBarView = Ember.View.extend({
+    templateName: 'actionbar'
+})

ui/styles/_lists.scss

@@ -47,17 +47,9 @@
         background-color: lighten($gray-background, 8%);
     }
 
-    &.active {
-        @include transition(border-color .1s linear);
-        border-color: $purple;
-
-        .list-bar, .list-bar-horizontal {
-            @include transition(background-color .1s linear);
-            background-color: $purple;
-        }
-    }
-
     &.list-condensed-link {
+        border-top-right-radius: 4px;
+        border-top-left-radius: 4px;
         border-color: $gray-background;
         margin-bottom: 4px;
         margin-top: 4px;
@@ -84,15 +76,16 @@
         height: 100%;
         margin-right: 10px;
     }
-}
 
-ul.list-broken {
-    li {
-        // border-top: 2px lighten($gray-background, 5%) solid;
+
+    &.active {
+        @include transition(border-color .1s linear);
+        border-color: $purple;
+
+        .list-bar, .list-bar-horizontal {
+            @include transition(background-color .1s linear);
+            background-color: $purple;
         }
-
-    &:last-child {
-        // border-bottom: 2px lighten($gray-background, 5%) solid;
     }
 
 }