ui: clickable nodes in list

ui/index.html

@@ -127,7 +127,7 @@
 
       {{#each node in nodes}}
         <div class="row">
-          <div class="list-group-item">
+          <div {{action 'linkTo' 'node' controllers.application.getDc node.Name}} 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}}
@@ -171,17 +171,34 @@
               <div class="panel-body">
                 <h5>Notes</h5>
                 <p>{{ check.Notes }}</p>
-                <ul class="list-unstyled list-broken">
+                <h5>Output</h5>
-                  {{#each check in node.Checks }}
+                <pre>
-                    <li>
+{{check.Output}}
-                      <h4>{{ check.Name }} <small>{{ check.CheckID }}</small> <span class="pull-right"><small>{{check.Status}}</small></h4>
+                </pre>
-                    </li>
-                  {{/each}}
-                </ul>
               </div>
             </div>
 
           {{/each}}
+
+
+          <h5>Services</h5>
+
+          {{#each service in model.Services }}
+
+          {{#link-to 'service' controllers.application.getDc service.Service }}
+              <div class="panel panel-default panel-link">
+                <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}}
+
         {{/if}}
       </div>
     </div>

ui/javascripts/app.js

@@ -52,6 +52,17 @@ 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);
+    },
   }
 });
 

ui/javascripts/fixtures.js

@@ -213,8 +213,8 @@ fixtures.nodes_full = {
       {
         "Port": 0,
         "Tags": null,
-        "Service": "vagrant-cloud-http",
+        "Service": "vagrant-share-mux",
-        "ID": "vagrant-cloud-http"
+        "ID": "vagrant-share-mux"
       },
       {
         "Port": 80,
@@ -254,8 +254,8 @@ fixtures.nodes_full = {
       {
         "Port": 0,
         "Tags": null,
-        "Service": "vagrant-cloud-http",
+        "Service": "vagrant-share-mux",
-        "ID": "vagrant-cloud-http"
+        "ID": "vagrant-share-mux"
       },
       {
         "Port": 80,
@@ -272,7 +272,7 @@ fixtures.nodes_full = {
         {
           "ServiceName": "",
           "ServiceID": "",
-          "Notes": "",
+          "Notes": "Checks if the food is healthy",
           "Output": "foobar baz",
           "Status": "passing",
           "Name": "Foo Healthy",

ui/styles/_lists.scss

@@ -2,6 +2,8 @@
     padding: 0;
     border-width: 2px;
     border-radius: 0px;
+    margin-bottom: 15px;
+    margin-top: 15px;
 
     .list-group-item-heading, .list-inline {
         margin: 10px 15px 10px 15px;
@@ -35,6 +37,11 @@
         border-top-right-radius: 0px;
         border-top-left-radius: 0px;
     }
+
+    &.list-link:hover {
+        cursor: pointer;
+        background-color: lighten($gray-background, 8%);
+    }
 }
 
 ul.list-broken {