Merge pull request #194 from hashicorp/f-ui-improvements

UI Improvements

ui/javascripts/app/controllers.js

@@ -1,3 +1,9 @@
+App.ApplicationController = Ember.ObjectController.extend({
+  updateCurrentPath: function() {
+    App.set('currentPath', this.get('currentPath'));
+  }.observes('currentPath')
+});
+
 App.DcController = Ember.Controller.extend({
   // Whether or not the dropdown menu can be seen
   isDropdownVisible: false,
@@ -45,6 +51,18 @@ App.DcController = Ember.Controller.extend({
 
   }.property('nodes'),
 
+  //
+  //
+  //
+  checkStatus: function() {
+    if (this.get('hasFailingChecks') == true) {
+      return "failing";
+    } else {
+      return "passing";
+    }
+
+  }.property('nodes'),
+
   //
   // Boolean if the datacenter has any failing checks.
   //
@@ -216,3 +234,54 @@ App.KvEditController = KvBaseController.extend({
   }
 
 });
+
+ItemBaseController = Ember.ArrayController.extend({
+  needs: ["dc", "application"],
+  queryParams: ["filter", "status", "condensed"],
+  dc: Ember.computed.alias("controllers.dc"),
+  condensed: true,
+  filter: "", // default
+  status: "any status", // default
+  statuses: ["any status", "passing", "failing"],
+
+  isShowingItem: function() {
+    var currentPath = this.get('controllers.application.currentPath');
+    return (currentPath === "dc.nodes.show" || currentPath === "dc.services.show");
+  }.property('controllers.application.currentPath'),
+
+  filteredContent: function() {
+    var filter = this.get('filter');
+    var status = this.get('status');
+
+    var items = this.get('items').filter(function(item, index, enumerable){
+      return item.get('filterKey').toLowerCase().match(filter.toLowerCase());
+    });
+
+    switch (status) {
+      case "passing":
+        return items.filterBy('hasFailingChecks', false)
+        break;
+      case "failing":
+        return items.filterBy('hasFailingChecks', true)
+        break;
+      default:
+        return items
+    }
+
+  }.property('filter', 'status', 'items.@each'),
+
+  actions: {
+    toggleCondensed: function() {
+      this.set('condensed', !this.get('condensed'))
+    }
+  }
+});
+
+App.NodesController = ItemBaseController.extend({
+  items: Ember.computed.alias("nodes"),
+});
+
+App.ServicesController = ItemBaseController.extend({
+  items: Ember.computed.alias("services"),
+});
+

ui/javascripts/app/helpers.js

@@ -8,3 +8,14 @@ Ember.Handlebars.helper('panelBar', function(status) {
   }
   return new Handlebars.SafeString('<div class="panel-bar ' + highlightClass + '"></div>');
 });
+
+Ember.Handlebars.helper('listBar', function(status) {
+  var highlightClass;
+
+  if (status == "passing") {
+    highlightClass = "bg-green";
+  } else {
+    highlightClass = "bg-orange";
+  }
+  return new Handlebars.SafeString('<div class="list-bar-horizontal ' + highlightClass + '"></div>');
+});

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'),
 
@@ -45,13 +46,25 @@ App.Service = Ember.Object.extend({
     }
   }.property('Checks'),
 
+  nodes: function() {
+    return (this.get('Nodes'))
+  }.property('Nodes'),
+
   //
   // Boolean of whether or not there are failing checks in the service.
   // This is used to set color backgrounds and so on.
   //
   hasFailingChecks: function() {
     return (this.get('failingChecks') > 0);
-  }.property('Checks')
+  }.property('Checks'),
+
+  //
+  // Key used for filtering through an array of this model, i.e s
+  // searching
+  //
+  filterKey: function() {
+    return this.get('Name')
+  }.property('Name'),
 });
 
 //
@@ -93,7 +106,43 @@ 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'),
+  // The number of services on the node
+  //
+
+  services: function() {
+    return (this.get('Services'))
+  }.property('Services'),
+
+  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/javascripts/app/router.js

@@ -1,5 +1,6 @@
 window.App = Ember.Application.create({
-  rootElement: "#app"
+  rootElement: "#app",
+  currentPath: ''
 });
 
 

ui/javascripts/app/routes.js

@@ -3,6 +3,15 @@
 //
 App.BaseRoute = Ember.Route.extend({
   rootKey: '',
+  condensedView: false,
+
+  // Don't record characters in browser history
+  // for the "search" query item (filter)
+  queryParams: {
+    filter: {
+      replace: true
+    }
+  },
 
   getParentAndGrandparent: function(key) {
     var parentKey = this.rootKey,

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'
+})