ui: refactor nodes as embedded resource

ui/index.html

@@ -29,11 +29,11 @@
         </div>
 
         <div class="col-md-2 col-sm-3">
-         {{#link-to 'services' controllers.application.getDc class='btn btn-default'}}Services{{/link-to}}
+         {{#link-to 'services' class='btn btn-default'}}Services{{/link-to}}
         </div>
 
         <div class="col-md-2 col-sm-3">
-          {{#link-to 'nodes' controllers.application.getDc class='btn btn-default'}}Nodes{{/link-to}}
+          {{#link-to 'nodes' class='btn btn-default'}}Nodes{{/link-to}}
         </div>
 
         <div class="col-md-2 col-sm-3">
@@ -72,7 +72,7 @@
             </h4>
             <ul class="list-inline">
               {{#each node in service.Nodes }}
-              <li>{{#link-to 'node' controllers.application.getDc node class='subtle'}}{{node}}{{/link-to}}</li>
+              <li>{{#link-to 'nodes.show' node class='subtle'}}{{node}}{{/link-to}}</li>
               {{/each}}
             </ul>
           </div>
@@ -90,7 +90,6 @@
   </script>
 
   <script type="text/x-handlebars" id="service">
-        {{#if model}}
       <h2 class="no-margin">{{ model.1.ServiceName }}</h2>
       <hr>
       <h5>Tags</h5>
@@ -104,7 +103,7 @@
           <div class="panel-bar"></div>
           <div class="panel-heading">
             <h3 class="panel-title">
-                  {{#link-to 'node' controllers.application.getDc node.Node class='subtle'}}{{node.Node}}{{/link-to}}
+              {{#link-to 'nodes.show' node.Node class='subtle'}}{{node.Node}}{{/link-to}}
               <small>{{node.Address}}</small>
               <span class="panel-note">{{node.checkMessage}}</span>
             </h3>
@@ -122,7 +121,6 @@
         </div>
 
       {{/each}}
-        {{/if}}
   </script>
 
   <script type="text/x-handlebars" id="nodes">
@@ -130,10 +128,10 @@
 
       {{#each node in nodes}}
         <div class="row">
-          {{#link-to 'node' controllers.application.getDc node.Name tagName="div" href=false class="list-group-item list-link" }}
+          {{#link-to 'nodes.show' node.Name tagName="div" href=false class="list-group-item list-link" }}
             <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
             <h4 class="list-group-item-heading">
-              {{#link-to 'node' controllers.application.getDc node.Name class='subtle'}}{{node.Name}}{{/link-to}}
+              {{#link-to 'nodes.show' node.Name class='subtle'}}{{node.Name}}{{/link-to}}
               <small>{{node.Name}}</small>
               <div class="heading-helper">
                 <a class="subtle" href="#">{{node.checkMessage}}</a>
@@ -158,6 +156,56 @@
     </div>
   </script>
 
+  <script type="text/x-handlebars" id="node">
+      <h2 class="no-margin">{{ model.Node.Node }}</h2>
+      <hr>
+
+      <h5>Checks</h5>
+
+      {{#each check in model.Checks }}
+
+        <div {{bind-attr class=":panel model.hasFailingChecks:panel-warning:panel-success"}}>
+          <div class="panel-bar"></div>
+          <div class="panel-heading">
+            <h3 class="panel-title">
+              {{check.Name}}
+              <small>{{check.CheckID}}</small>
+              <span class="panel-note">{{check.Status}}</span>
+            </h3>
+          </div>
+
+          <div class="panel-body">
+            <h5>Notes</h5>
+            <p>{{ check.Notes }}</p>
+            <h5>Output</h5>
+            <pre>
+{{check.Output}}
+            </pre>
+          </div>
+        </div>
+
+      {{/each}}
+
+
+      <h5>Services</h5>
+
+      {{#each service in model.Services }}
+
+      {{#link-to 'services.show' service.Service }}
+          <div class="panel panel-default panel-link panel-short">
+            <div class="panel-bar"></div>
+            <div class="panel-heading">
+              <h3 class="panel-title">
+                {{service.Service}}
+                <small>{{sevice.ID}}</small>
+                <span class="panel-note">:{{service.Port}}</span>
+              </h3>
+            </div>
+        </div>
+      {{/link-to}}
+      {{/each}}
+  </script>
+
   <script type="text/x-handlebars" id="index">
     <div class="col-md-8 col-md-offset-2 vertical-center">
       {{#each item in model}}

ui/javascripts/app.js

@@ -5,16 +5,17 @@ window.App = Ember.Application.create({
 });
 
 App.Router.map(function() {
+
   this.resource("dc", {path: "/:dc"}, function() {
     this.resource("services", { path: "/services" }, function(){
       this.route("show", { path: "/:name" });
     });
+    this.resource("nodes", { path: "/nodes" }, function() {
+      this.route("show", { path: "/:name" });
     });
-  // this.route("services", { path: "/:dc/services" });
+  });
-  // this.route("service", { path: "/:dc/services/:name" });
+
   this.route("index", { path: "/" });
-  this.route("nodes", { path: "/:dc/nodes" });
-  this.route("node", { path: "/:dc/nodes/:name" });
   this.route("kv", { path: "/:dc/kv" });
 });
 
@@ -57,17 +58,6 @@ App.BaseRoute = Ember.Route.extend({
     if (controller.getDc === null) {
       this.transitionTo('index');
     };
-  },
-
-  actions: {
-    //
-    // Mimics the link-to helper for triggering actions on
-    // no <a> tags. Takes the route name, i.e nodes, the datacenter,
-    // i.e "ny1" and a name.
-    //
-    linkTo: function(route, dc, name) {
-      return this.transitionTo(route, dc, name);
-    },
   }
 });
 
@@ -265,7 +255,7 @@ App.ServicesShowView = Ember.View.extend({
     // array and have a simple conditional to display the nested
     // individual service resource.
     //
-    templateName: 'service',
+    templateName: 'service'
 })
 
 
@@ -291,7 +281,7 @@ App.ServicesShowController = Ember.Controller.extend({
   needs: ['application']
 })
 
-//
+//=
 // path: /:dc/nodes
 //
 App.NodesController = Ember.Controller.extend({
@@ -301,7 +291,7 @@ App.NodesController = Ember.Controller.extend({
 //
 // path: /:dc/nodes/:name
 //
-App.NodeController = Ember.Controller.extend({
+App.NodesShowController = Ember.Controller.extend({
   needs: ['application']
 })
 
@@ -309,18 +299,16 @@ App.NodeController = Ember.Controller.extend({
 // Nodes
 //
 App.NodesView = Ember.View.extend({
-    templateName: 'nodes',
+    templateName: 'nodes'
-    layoutName: 'default_layout'
 })
 
-App.NodeView = Ember.View.extend({
+App.NodesShowView = Ember.View.extend({
     //
     // We use the same template as we do for the nodes
     // array and have a simple conditional to display the nested
     // individual node resource.
     //
-    templateName: 'nodes',
+    templateName: 'node'
-    layoutName: 'default_layout'
 })
 
 
@@ -328,7 +316,7 @@ App.NodeView = Ember.View.extend({
 // Display an individual node, as well as the global nodes in the left
 // column.
 //
-App.NodeRoute = App.BaseRoute.extend({
+App.NodesShowRoute = App.BaseRoute.extend({
   //
   // Set the model on the route. We look up the specific node
   // by it's identifier passed via the route