ui: list sessions on the nodes and allow invalidation

ui/index.html

@@ -327,7 +327,7 @@
         <hr>
       </div>
 
-      <div class="col-md-6 col-lg-7 border-left">
+      <div class="col-md-6 col-lg-7 border-left scrollable">
         <div class="row padded-border">
           {{outlet}}
         </div>
@@ -429,7 +429,7 @@
       <div class="border-left hidden-xs hidden-sm">
       </div>
 
-      <div class="col-md-6 col-lg-7 border-left">
+      <div class="col-md-6 col-lg-7 border-left scrollable">
         <div class="row padded-border">
           {{outlet}}
         </div>
@@ -445,7 +445,6 @@
 
       <h3 class="no-margin">{{ model.Node }} <small> {{ model.Address }}</small></h3>
       <hr>
-      {{foobar}}
 
       <h5>Service Tags</h5>
       {{#if model.nodeTags}}
@@ -492,6 +491,25 @@
         </div>
 
       {{/each}}
+
+      <h5>Lock Sessions</h5>
+
+      {{#if sessions }}
+        {{errorMessage}}
+
+        {{#each session in sessions }}
+          <div class="list-group-item list-condensed">
+            <div class="bg-light-gray list-bar-horizontal"></div>
+            <div class="name">
+              {{session.ID}}
+              <button {{ action "invalidateSession" session.ID }} {{ bind-attr class=":btn :btn-danger :pull-right :btn-list isLoading:btn-warning" }}>Invalidate</button>
+            </div>
+          </div>
+        {{/each}}
+
+      {{else}}
+        <p class="light small">No sessions</p>
+      {{/if}}
   </script>
 
   <script type="text/x-handlebars" id="index">

ui/javascripts/app/controllers.js

@@ -161,11 +161,12 @@ App.KvShowController.reopen({
       this.set('isLoading', true);
 
       var controller = this;
+      var dc = controller.get('dc').get('datacenter');
       var grandParent = controller.get('grandParentKey');
 
       // Delete the folder
       Ember.$.ajax({
-          url: ("/v1/kv/" + controller.get('parentKey') + '?recurse'),
+          url: ("/v1/kv/" + controller.get('parentKey') + '?recurse&dc=' + dc),
           type: 'DELETE'
       }).then(function(response) {
         controller.transitionToNearestParent(grandParent);
@@ -277,6 +278,35 @@ ItemBaseController = Ember.ArrayController.extend({
   }
 });
 
+App.NodesShowController = Ember.ObjectController.extend({
+  needs: ["dc"],
+  dc: Ember.computed.alias("controllers.dc"),
+
+  actions: {
+    invalidateSession: function(sessionId) {
+      this.set('isLoading', true);
+      var controller = this;
+      var node = controller.get('model');
+      var dc = controller.get('dc').get('datacenter');
+
+      if (window.confirm("Are you sure you want to invalidate this session?")) {
+        // Delete the session
+        Ember.$.ajax({
+            url: ("/v1/session/destroy/" + sessionId + '?dc=' + dc),
+            type: 'PUT'
+        }).then(function(response) {
+          return Ember.$.getJSON('/v1/session/node/' + node.Node + '?dc=' + dc).then(function(data) {
+            controller.set('sessions', data)
+          });
+        }).fail(function(response) {
+          // Render the error message on the form if the request failed
+          controller.set('errorMessage', 'Received error while processing: ' + response.statusText)
+        });
+      }
+    }
+  }
+});
+
 App.NodesController = ItemBaseController.extend({
   items: Ember.computed.alias("nodes"),
 });

ui/javascripts/app/routes.js

@@ -241,6 +241,7 @@ App.NodesShowRoute = App.BaseRoute.extend({
     var dc = this.modelFor('dc').dc
     // Return a promise hash of the node and nodes
     return Ember.RSVP.hash({
+      dc: dc,
       node: Ember.$.getJSON('/v1/internal/ui/node/' + params.name + '?dc=' + dc).then(function(data) {
         return App.Node.create(data)
       }),
@@ -250,8 +251,17 @@ App.NodesShowRoute = App.BaseRoute.extend({
     });
   },
 
+  // Load the sessions for the node
+  afterModel: function(models) {
+    return Ember.$.getJSON('/v1/session/node/' + models.node.Node + '?dc=' + models.dc).then(function(data) {
+      models.sessions = data
+      return models
+    });
+  },
+
   setupController: function(controller, models) {
       controller.set('content', models.node);
+      controller.set('sessions', models.sessions);
       //
       // Since we have 2 column layout, we need to also display the
       // list of nodes on the left. Hence setting the attribute

ui/styles/_buttons.scss

@@ -81,4 +81,11 @@
         padding: 8px;
     }
 
+    &.btn-list {
+        font-size: 10px;
+        padding: 3px 5px 3px 5px;
+        margin-right: 5px;
+        border-radius: 3px;
+    }
+
 }

ui/styles/_lists.scss

@@ -45,7 +45,7 @@
         background-color: lighten($gray-background, 8%);
     }
 
-    &.list-condensed-link {
+    &.list-condensed-link, &.list-condensed {
         border-color: $gray-background;
         margin-bottom: 4px;
         margin-top: 4px;
@@ -55,7 +55,7 @@
 
         .name {
             font-size: 15px;
-            padding-top: 7px;
+            padding-top: 6px;
 
             small {
                 padding-right: 8px;

ui/styles/base.scss

@@ -107,6 +107,7 @@ a {
 .ember-list-view {
   overflow: auto;
   position: relative;
+  margin-bottom: 30px;
 }
 
 .ember-list-item-view {
@@ -117,4 +118,5 @@ a {
 .scrollable {
   overflow: auto;
   height: 800px;
+  margin-bottom: 30px;
 }