ui: better kv parent navigation

ui/index.html

@@ -64,7 +64,7 @@
 
   <script type="text/x-handlebars" data-template-name="kv/show">
   <div class="row">
-    <a {{action 'linkToKey' parent }} class="btn btn-default">{{parent}}</a>
+    <h5><a href="" {{action 'linkToKey' topModel.grandParentKey }}>{{topModel.parentKey}}</a></h5>
   </div>
 
   <div class="row">
@@ -92,7 +92,7 @@
 
   <script type="text/x-handlebars" data-template-name="kv/edit">
   <div class="row">
-    <a {{action 'linkToKey' parent }} class="btn btn-default">{{parent}}</a>
+    <h5><a href="" {{action 'linkToKey' model.grandParentKey }}>{{model.parentKey}}</a></h5>
   </div>
 
   <div class="row">
@@ -114,7 +114,18 @@
 
 
     <div class="col-md-5 col-md-offset-1">
-      {{ input value=model.value class="form-control"}}
+      <div class="panel">
+        <div class="panel-bar bg-green"></div>
+          <div class="panel-heading">
+            <h3 class="panel-title">
+              {{model.key}}
+            </h3>
+          </div>
+
+          <div class="panel-body">
+            {{ textarea value=model.value class="form-control"}}
+          </div>
+        </div>
     </div>
   </div>
   </script>

ui/javascripts/app/models.js

@@ -7,14 +7,14 @@ App.Service = Ember.Object.extend({
   //
   failingChecks: function() {
     return this.get('Checks').filterBy('Status', 'critical').get('length');
-  }.property('failingChecks'),
+  }.property('Checks'),
 
   //
   // The number of passing checks within the service.
   //
   passingChecks: function() {
     return this.get('Checks').filterBy('Status', 'passing').get('length');
-  }.property('passingChecks'),
+  }.property('Checks'),
 
   //
   // The formatted message returned for the user which represents the
@@ -26,7 +26,7 @@ App.Service = Ember.Object.extend({
     } else {
       return this.get('failingChecks') + ' failing';
     }
-  }.property('checkMessage'),
+  }.property('Checks'),
 
   //
   // Boolean of whether or not there are failing checks in the service.
@@ -34,7 +34,7 @@ App.Service = Ember.Object.extend({
   //
   hasFailingChecks: function() {
     return (this.get('failingChecks') > 0);
-  }.property('hasFailingChecks')
+  }.property('Checks')
 });
 
 //
@@ -53,7 +53,7 @@ App.Node = Ember.Object.extend({
   //
   passingChecks: function() {
     return this.get('Checks').filterBy('Status', 'passing').get('length');
-  }.property('passingChecks'),
+  }.property('Checks'),
 
   //
   // The formatted message returned for the user which represents the
@@ -65,7 +65,7 @@ App.Node = Ember.Object.extend({
     } else {
       return this.get('failingChecks') + ' failing';
     }
-  }.property('checkMessage'),
+  }.property('Checks'),
 
   //
   // Boolean of whether or not there are failing checks in the service.
@@ -73,7 +73,7 @@ App.Node = Ember.Object.extend({
   //
   hasFailingChecks: function() {
     return (this.get('failingChecks') > 0);
-  }.property('hasFailingChecks')
+  }.property('Checks')
 });
 
 
@@ -83,7 +83,7 @@ App.Node = Ember.Object.extend({
 App.Key = Ember.Object.extend({
   isFolder: function() {
     return (this.get('key').slice(-1) == "/")
-  }.property('isFolder'),
+  }.property('key'),
 
   keyParts: function() {
     var key = this.get('key');
@@ -92,22 +92,23 @@ App.Key = Ember.Object.extend({
       key = key.substring(0, key.length - 1);
     }
     return key.split('/');
-  }.property('keyParts'),
+  }.property('key'),
 
   parentKey: function() {
-    var parts = this.get('keyParts');
+    var parts = this.get('keyParts').toArray();
 
     parts.pop();
 
     return parts.join("/") + "/";
-  }.property('parentKey'),
+  }.property('key'),
 
   grandParentKey: function() {
-    var parts = this.get('keyParts');
+    var parts = this.get('keyParts').toArray();
+    console.log(parts)
 
     parts.pop();
     parts.pop();
 
     return parts.join("/") + "/";
-  }.property('grandParentKey')
+  }.property('key')
 });

ui/javascripts/app/routes.js

@@ -82,7 +82,7 @@ App.KvShowRoute = App.BaseRoute.extend({
 
   setupController: function(controller, model) {
     controller.set('content', model);
-    controller.set('parent', model[0].get('grandParentKey'));
+    controller.set('topModel', model[0]);
   }
 });
 
@@ -105,8 +105,6 @@ App.KvEditRoute = App.BaseRoute.extend({
     } else {
       controller.set('siblings', this.modelFor('kv.show'));
     }
-
-    controller.set('parent', controller.get('siblings')[0].get('grandParentKey'));
   }
 });