ui: show tags on node view

ui/index.html

@@ -134,7 +134,6 @@
       </div>
 
       <div class="border-left hidden-xs hidden-sm">
-        <div class="line"></div>
       </div>
 
       <div class="col-md-6 col-lg-7 scrollable border-left">
@@ -201,7 +200,6 @@
       </div>
 
     <div class="border-left hidden-xs hidden-sm">
-      <div class="line"></div>
     </div>
 
       <div class="col-md-6 col-lg-7 border-left">
@@ -293,7 +291,6 @@
       </div>
 
       <div class="border-left hidden-xs hidden-sm">
-        <div class="line"></div>
       </div>
 
       <div class="visible-xs visible-sm">
@@ -309,7 +306,7 @@
   </script>
 
   <script type="text/x-handlebars" id="service">
-      <h2 class="no-margin">{{ model.0.Service.Service }}</h2>
+      <h3 class="no-margin">{{ model.0.Service.Service }}</h3>
       <hr>
 
       <h5>Nodes</h5>
@@ -344,7 +341,7 @@
 
   <script type="text/x-handlebars" id="nodes">
     <div class="row">
-      <div class="col-md-6 col-lg-5 scrollable">
+      <div class="col-md-6 col-lg-5 scrollable padded-right-middle">
         {{view App.ActionBarView }}
 
           {{#if filteredContent}}
@@ -388,7 +385,6 @@
       </div>
 
       <div class="border-left hidden-xs hidden-sm">
-        <div class="line"></div>
       </div>
 
       <div class="visible-xs visible-sm">
@@ -405,25 +401,29 @@
   </script>
 
   <script type="text/x-handlebars" id="node">
-      <h2 class="no-margin">{{ model.Node }} <small> {{ model.Address }}</small></h2>
+      <h3 class="no-margin">{{ model.Node }} <small> {{ model.Address }}</small></h3>
       <hr>
+      <h5>Tags</h5>
+
+      {{#if model.nodeTags}}
+        <p class="bold">{{model.nodeTags}}</p>
+      {{else}}
+        <p class="light small">No tags</p>
+      {{/if}}
 
       <h5>Services</h5>
 
       {{#each service in model.Services }}
-
-      {{#link-to 'services.show' service.Service }}
-          <div class="panel panel-link panel-short">
-            <div class="panel-bar bg-light-gray"></div>
-            <div class="panel-heading">
-              <h3 class="panel-title">
-                {{service.Service}}
-                <small>{{sevice.ID}}</small>
-                <span class="panel-note">:{{service.Port}}</span>
-              </h3>
+        {{#link-to 'services.show' service.Service tagName="div" href=false class="list-group-item list-condensed-link" }}
+          <div class="list-bar-horizontal bg-light-gray"></div>
+            <div class="name">
+              {{service.Service}}
+              <small class="pull-right">
+                :{{service.Port}}
+              </small>
             </div>
-        </div>
-      {{/link-to}}
+        {{/link-to}}
+
       {{/each}}
 
       <h5>Checks</h5>

ui/javascripts/app/controllers.js

@@ -235,6 +235,7 @@ ItemBaseController = Ember.ArrayController.extend({
 
     switch (filterStatus) {
       case "passing":
+        console.log(items)
         return items.filterBy('hasFailingChecks', false)
         break;
       case "failing":

ui/javascripts/app/models.js

@@ -13,8 +13,9 @@ App.Service = Ember.Object.extend({
     // Otherwise, we need to filter the child checks by both failing
     // states
     } else {
-    return (checks.filterBy('Status', 'critical').get('length') +
-      checks.filterBy('Status', 'warning').get('length'))
+      var checks = this.get('Checks');
+      return (checks.filterBy('Status', 'critical').get('length') +
+        checks.filterBy('Status', 'warning').get('length'))
     }
   }.property('Checks'),
 
@@ -53,9 +54,13 @@ App.Service = Ember.Object.extend({
     return (this.get('failingChecks') > 0);
   }.property('Checks'),
 
+  //
+  // Key used for filtering through an array of this model, i.e s
+  // searching
+  //
   filterKey: function() {
     return this.get('Name')
-  }.property('Name')
+  }.property('Name'),
 });
 
 //
@@ -109,6 +114,25 @@ App.Node = Ember.Object.extend({
   filterKey: function() {
     return this.get('Node')
   }.property('Node'),
+
+  //
+  // Returns a combined and distinct list of the tags on the services
+  // running on the node
+  //
+  nodeTags: function() {
+    var tags = [];
+
+    // Collect the services tags
+    this.get('Services').map(function(Service){
+      tags.push(Service.Tags)
+    })
+
+    // strip nulls
+    tags = tags.filter(function(n){ return n != undefined });
+
+    // only keep unique tags and convert to comma sep
+    return tags.uniq().join(', ')
+  }.property('Services')
 });
 
 

ui/styles/_type.scss

@@ -66,6 +66,6 @@ pre {
     font-weight: 700;
 }
 
-p.light {
+.light {
     color: $gray;
 }

ui/styles/base.scss

@@ -51,9 +51,12 @@ a {
   border-left: 1px $gray-background solid;
 
   .padded-border{
-    padding-left: 20px;
+    padding-left: 30px;
   }
 }
+.padded-right-middle {
+  padding-right: 30px;
+}
 
 .no-margin {
     margin: 0;