From 1a89a673a2e87668f05c616beb0dbb9ccad454bf Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Fri, 25 Apr 2014 13:32:41 -0400
Subject: [PATCH] ui: refactor nodes as embedded resource

---
 ui/index.html         | 114 ++++++++++++++++++++++++++++++------------
 ui/javascripts/app.js |  36 +++++--------
 2 files changed, 93 insertions(+), 57 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index a9c42ceeb1..4ebe2d8a25 100644
--- a/ui/index.html
+++ b/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,39 +90,37 @@
   </script>
 
   <script type="text/x-handlebars" id="service">
-        {{#if model}}
-          <h2 class="no-margin">{{ model.1.ServiceName }}</h2>
-          <hr>
-          <h5>Tags</h5>
-          <p>Pending...</p>
+      <h2 class="no-margin">{{ model.1.ServiceName }}</h2>
+      <hr>
+      <h5>Tags</h5>
+      <p>Pending...</p>
 
-          <h5>Nodes</h5>
+      <h5>Nodes</h5>
 
-          {{#each node in model }}
+      {{#each node in model }}
 
-            <div {{bind-attr class=":panel node.hasFailingChecks:panel-warning:panel-success"}}>
-              <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}}
-                  <small>{{node.Address}}</small>
-                  <span class="panel-note">{{node.checkMessage}}</span>
-                </h3>
-              </div>
+        <div {{bind-attr class=":panel node.hasFailingChecks:panel-warning:panel-success"}}>
+          <div class="panel-bar"></div>
+          <div class="panel-heading">
+            <h3 class="panel-title">
+              {{#link-to 'nodes.show' node.Node class='subtle'}}{{node.Node}}{{/link-to}}
+              <small>{{node.Address}}</small>
+              <span class="panel-note">{{node.checkMessage}}</span>
+            </h3>
+          </div>
 
-              <div class="panel-body">
-                <ul class="list-unstyled list-broken">
-                  {{#each check in node.Checks }}
-                    <li>
-                      <h4>{{ check.Name }} <small>{{ check.CheckID }}</small> <span class="pull-right"><small>{{check.Status}}</small></h4>
-                    </li>
-                  {{/each}}
-                </ul>
-              </div>
-            </div>
+          <div class="panel-body">
+            <ul class="list-unstyled list-broken">
+              {{#each check in node.Checks }}
+                <li>
+                  <h4>{{ check.Name }} <small>{{ check.CheckID }}</small> <span class="pull-right"><small>{{check.Status}}</small></h4>
+                </li>
+              {{/each}}
+            </ul>
+          </div>
+        </div>
 
-          {{/each}}
-        {{/if}}
+      {{/each}}
   </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}}
diff --git a/ui/javascripts/app.js b/ui/javascripts/app.js
index b48649c71b..3b497012fa 100755
--- a/ui/javascripts/app.js
+++ b/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',
-    layoutName: 'default_layout'
+    templateName: 'nodes'
 })
 
-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',
-    layoutName: 'default_layout'
+    templateName: 'node'
 })
 
 
@@ -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