ui: basic k/v layout

ui/index.html

@@ -62,6 +62,26 @@
     {{outlet}}
   </script>
 
+  <script type="text/x-handlebars" data-template-name="kv">
+    <div class="row">
+      <div class="col-md-5">
+
+        <ul>
+        {{#each child in model.children}}
+          <li {{action 'linkToKey' model.key child }}>{{ child }}</li>
+        {{/each}}
+        </ul>
+      </div>
+
+      {{#if model.value}}
+      <div class="col-md-5 col-md-offset-1">
+      <h4>{{ model.key }}</h4>
+      {{ input value=model.value class="form-control"}}
+      </div>
+      {{/if}}
+    </div>
+  </script>
+
   <script type="text/x-handlebars" id="services">
     <div {{ bind-attr class=":col-md-5 hasChild:hidden" }}>
 
@@ -72,7 +92,6 @@
               <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}}
-                <small>{{service.Name}}</small>
                 <div class="heading-helper">
                   <a class="subtle" href="#">{{service.checkMessage}}</a>
                 </div>
@@ -141,7 +160,7 @@
             <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
             <h4 class="list-group-item-heading">
               {{#link-to 'nodes.show' node.Name class='subtle'}}{{node.Name}}{{/link-to}}
-              <small>{{node.Name}}</small>
+              <small>{{node.Address}}</small>
               <div class="heading-helper">
                 <a class="subtle" href="#">{{node.checkMessage}}</a>
               </div>

ui/javascripts/app/controllers.js

@@ -70,3 +70,14 @@ App.ServicesController = Ember.ArrayController.extend({
 App.ServicesShowController = Ember.Controller.extend({
   needs: ['services']
 });
+
+
+// Key value controller
+App.KvController = Ember.Controller.extend({
+  actions: {
+    linkToKey: function(top, child) {
+      var route = top + "/" + child
+      this.transitionToRoute('kv.key', route)
+    }
+  }
+});

ui/javascripts/app/router.js

@@ -12,7 +12,9 @@ App.Router.map(function() {
     this.resource("nodes", { path: "/nodes" }, function() {
       this.route("show", { path: "/:name" });
     });
-    this.resource("kv", { path: "/kv" });
+    this.resource("kv", { path: "/kv" }, function() {
+      this.route("key", { path: "/*wildcard" });
+    });
   });
 
   this.route("index", { path: "/" });

ui/javascripts/app/routes.js

@@ -51,6 +51,25 @@ App.DcRoute = App.BaseRoute.extend({
   }
 });
 
+//
+// The route for for browsing and editing k/v data
+//
+//
+App.KvRoute = Ember.Route.extend({
+  model: function(params) {
+    var parts = window.location.hash.split("/").slice(3)
+
+    var key = parts.join("/")
+
+    console.log(key);
+
+    return window.fixtures.keys_full[key];
+  },
+
+  setupController: function(controller, model) {
+    controller.set('content', model);
+  }
+});
 
 /// services
 

ui/javascripts/fixtures.js

@@ -285,4 +285,32 @@ fixtures.nodes_full = {
 
 fixtures.dcs = ['nyc1', 'sf1', 'sg1']
 
-localStorage.setItem("current_dc", fixtures.dcs[0]);
+fixtures.keys_full = {
+  "application":  {
+    'key': 'application',
+    'value': '',
+    'children': [
+      'secrets',
+      'foobar',
+      'baz'
+    ]
+  },
+  "application/foobar": {
+    'key': 'application/foobar',
+    'value': 'baz',
+    'children': []
+  }
+};
+
+// represents the root index key '/'
+fixtures.keys = [
+  {
+    'key': 'application',
+    'value': '',
+    'children': [
+      'secrets',
+      'foobar',
+      'baz'
+    ]
+  }
+];