ui: further k/v improvements

ui/index.html

@@ -62,23 +62,49 @@
     {{outlet}}
   </script>
 
-  <script type="text/x-handlebars" data-template-name="kv">
+  <script type="text/x-handlebars" data-template-name="kv/show">
+    <a {{action 'linkToKey' parent }}>{{parent}}</a>
+
     <div class="row">
       <div class="col-md-5">
 
-        <ul>
-        {{#each child in model.children}}
-          <li {{action 'linkToKey' model.key child }}>{{ child }}</li>
+        {{#each item in model }}
+          <div {{action 'linkToKey' item.key }} class="panel panel-link panel-short">
+            <div {{bind-attr class=":panel-bar item.isFolder:bg-gray:bg-light-gray" }}></div>
+            <div class="panel-heading">
+              <h3 class="panel-title">
+                {{item.key}}
+              </h3>
+            </div>
+          </div>
         {{/each}}
-        </ul>
+
+      </div>
     </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}}
+  </script>
+
+  <script type="text/x-handlebars" data-template-name="kv/edit">
+    <a {{action 'linkToKey' parent }}>{{parent}}</a>
+
+    <div class="col-md-5">
+      <div class="row">
+          <div {{action 'linkToKey' model.key }} class="panel panel-link panel-short">
+            <div {{bind-attr class=":panel-bar model.isFolder:bg-gray:bg-light-gray" }}></div>
+            <div class="panel-heading">
+              <h3 class="panel-title">
+                {{model.key}}
+              </h3>
+            </div>
+          </div>
+      </div>
+
+    </div>
+
+    <div class="col-md-5 col-md-offset-1">
+      {{ input value=model.value class="form-control"}}
     </div>
   </script>
 

ui/javascripts/app/controllers.js

@@ -70,14 +70,3 @@ 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/models.js

@@ -76,3 +76,20 @@ App.Node = Ember.Object.extend({
   }.property('hasFailingChecks')
 });
 
+
+//
+// A key/value object
+//
+App.Key = Ember.Object.extend({
+  isFolder: function() {
+    return (this.get('key').slice(-1) == "/")
+  }.property('isFolder'),
+
+  parentKeys: function() {
+    var parts = this.get('key').split('/')
+    parts.pop()
+    console.log(parts)
+
+    return parts
+  }.property('parentKey')
+});

ui/javascripts/app/router.js

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

ui/javascripts/app/routes.js

@@ -4,6 +4,17 @@
 //
 //
 App.BaseRoute = Ember.Route.extend({
+  actions: {
+    linkToKey: function(key) {
+      key = key.replace(/\//g, "-")
+
+      if (key.slice(-1) === "-") {
+        this.transitionTo('kv.show', key)
+      } else {
+        this.transitionTo('kv.edit', key)
+      }
+    }
+  }
 });
 
 //
@@ -19,7 +30,6 @@ App.IndexRoute = Ember.Route.extend({
 
   setupController: function(controller, model) {
     controller.set('content', model);
-
     controller.set('dcs', window.fixtures.dcs);
   },
 
@@ -51,23 +61,39 @@ App.DcRoute = App.BaseRoute.extend({
   }
 });
 
-//
-// The route for for browsing and editing k/v data
-//
-//
-App.KvRoute = Ember.Route.extend({
+
+App.KvRoute = App.BaseRoute.extend({
+  beforeModel: function() {
+    this.transitionTo('kv.show', '-')
+  }
+});
+
+App.KvShowRoute = App.BaseRoute.extend({
   model: function(params) {
-    var parts = window.location.hash.split("/").slice(3)
+    var key = params.key.replace(/-/g, "/")
+    objs = [];
 
-    var key = parts.join("/")
+    window.fixtures.keys_full[key].map(function(obj){
+     objs.push(App.Key.create({key: obj}));
+    });
 
-    console.log(key);
-
-    return window.fixtures.keys_full[key];
+    return objs
   },
 
   setupController: function(controller, model) {
     controller.set('content', model);
+    controller.set('parent', model[0].get('parentKeys'));
+  }
+});
+
+App.KvEditRoute = App.BaseRoute.extend({
+  model: function(params) {
+    var key = params.key.replace(/-/g, "/")
+    return App.Key.create().setProperties(window.fixtures.keys_full[key]);
+  },
+  setupController: function(controller, model) {
+    controller.set('content', model);
+    controller.set('parent', model.get('parentKeys'));
   }
 });
 

ui/javascripts/app/views.js

@@ -47,3 +47,9 @@ App.NodesShowView = Ember.View.extend({
     //
     templateName: 'node'
 })
+
+
+
+App.KvListView = Ember.View.extend({
+    templateName: 'kv'
+})

ui/javascripts/fixtures.js

@@ -286,31 +286,27 @@ fixtures.nodes_full = {
 fixtures.dcs = ['nyc1', 'sf1', 'sg1']
 
 fixtures.keys_full = {
+  "/": [
+    'foobar',
+    'application',
+    'web/'
+  ],
   "application":  {
     'key': 'application',
-    'value': '',
-    'children': [
-      'secrets',
-      'foobar',
-      'baz'
-    ]
+    'value': 'foobarz'
   },
-  "application/foobar": {
-    'key': 'application/foobar',
-    'value': 'baz',
-    'children': []
-  }
-};
-
-// represents the root index key '/'
-fixtures.keys = [
-  {
-    'key': 'application',
-    'value': '',
-    'children': [
-      'secrets',
-      'foobar',
-      'baz'
+  "foobar": {
+    'key': 'foobar',
+    'value': 'baz'
+  },
+  "web/foo/bar": {
+    'key': 'web/foo/bar',
+    'value': 'baz'
+  },
+  "web/": [
+    "web/foo/"
+  ],
+  "web/foo/": [
+    "web/foo/bar"
   ]
-  }
-];
+};