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,45 +254,61 @@
   </script>
 
   <script type="text/x-handlebars" id="services">
+    <div class="row">
+      <div class="col-md-5 scrollable">
+        {{view App.ActionBarView }}
 
-    <div {{ bind-attr class=":col-md-5" }}>
+        {{#each service in filteredContent}}
 
-      {{#each service in services}}
+            {{#if condensedView }}
 
-        <div class="row">
-            {{#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">
-                {{#link-to 'services.show' service.Name class='subtle'}}{{service.Name}}{{/link-to}}
-                <div class="heading-helper">
-                  <a class="subtle" href="#">{{service.checkMessage}}</a>
+              {{#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>
-              </h4>
-              <ul class="list-inline">
-                {{#each node in service.Nodes }}
-                <li class="bold">{{node}}</li>
-                {{/each}}
-              </ul>
-          {{/link-to}}
-        </div>
+              {{/link-to}}
 
-      {{/each}}
+            {{else}}
 
-    </div>
+              {{#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">
+                  {{#link-to 'services.show' service.Name class='subtle'}}{{service.Name}}{{/link-to}}
+                  <div class="heading-helper">
+                    <a class="subtle" href="#">{{service.checkMessage}}</a>
+                  </div>
+                </h4>
+                <ul class="list-inline">
+                  {{#each node in service.Nodes }}
+                  <li class="bold">{{node}}</li>
+                  {{/each}}
+                </ul>
+              {{/link-to}}
+
+            {{/if}}
+
+        {{/each}}
 
-    <div class="col-md-1">
-      <div class="border-left hidden-xs hidden-sm">
-        <div class="line"></div>
       </div>
-    </div>
 
-    <div class="visible-xs visible-sm">
-      <hr>
-    </div>
+      <div class="col-md-1">
+        <div class="border-left hidden-xs hidden-sm">
+          <div class="line"></div>
+        </div>
+      </div>
 
-    <div class="col-md-6">
-      <div class="row">
-        {{outlet}}
+      <div class="visible-xs visible-sm">
+        <hr>
+      </div>
+
+      <div class="col-md-6 scrollable">
+        <div class="row">
+          {{outlet}}
+        </div>
       </div>
     </div>
   </script>
@@ -316,64 +348,61 @@
   </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 }}
 
-      {{#if condensedView }}
+          {{#each node in filteredContent}}
 
-        {{#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>
-            </div>
-          {{/link-to}}
+            {{#if condensedView }}
 
-        {{/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>
+              {{#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.numServices }} services
+                  </small>
                 </div>
-              </h4>
-              <ul class="list-inline">
-                {{#each service in node.Services }}
-                  <li class="bold">{{service.Service}}</li>
-                {{/each}}
-              </ul>
-            </div>
-          {{/link-to}}
+              {{/link-to}}
 
-        {{/each}}
-      {{/if}}
-    </div>
+            {{else}}
 
-    <div class="col-md-1">
-      <div class="border-left hidden-xs hidden-sm">
-        <div class="line"></div>
+              {{#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>
+              {{/link-to}}
+            {{/if}}
+
+          {{/each}}
       </div>
-    </div>
 
-    <div class="visible-xs visible-sm">
-      <hr>
-    </div>
+      <div class="col-md-1">
+        <div class="border-left hidden-xs hidden-sm">
+          <div class="line"></div>
+        </div>
+      </div>
+
+      <div class="visible-xs visible-sm">
+        <hr>
+      </div>
 
 
-    <div class="col-md-6">
-      <div class="row">
-        {{outlet}}
+      <div class="col-md-6 scrollable">
+        <div class="row">
+          {{outlet}}
+        </div>
       </div>
     </div>
   </script>

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;
-    }
 
-    &:last-child {
-        // border-bottom: 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;
+        }
     }
 
 }