Merge pull request #196 from hashicorp/ui-key-locking

UI Key Locking
This commit is contained in:
Jack Pearkes 2014-06-09 08:14:23 -07:00
commit 94b47466fc
9 changed files with 191 additions and 34 deletions

View file

@ -145,9 +145,9 @@
<div class="panel">
<div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
<div class="panel-heading">
<h3 class="panel-title">
<h4 class="panel-title">
Create Key
</h3>
</h4>
</div>
<div class="panel-body panel-form">
@ -203,41 +203,62 @@
{{/each}}
</div>
<div class="border-left hidden-xs hidden-sm">
</div>
<div class="border-left hidden-xs hidden-sm">
</div>
<div class="visible-xs visible-sm">
<hr>
</div>
<div class="visible-xs visible-sm">
<hr>
</div>
<div class="col-md-6 col-lg-7 border-left">
<div class="padded-border">
<div class="panel">
<div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green" }}></div>
<div class="panel-heading">
<h3 class="panel-title">
{{model.Key}}
</h3>
</div>
<div class="panel-body panel-form">
<div class="form-group">
{{errorMessage}}
</div>
<form class="form">
<div class="form-group">
{{ textarea value=model.valueDecoded class="form-control"}}
</div>
<button {{ action "updateKey"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn isLoading:btn-warning:btn-success" }}>Update</button>
<button {{ action "cancelEdit"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn isLoading:btn-warning:btn-default" }}>Cancel</button>
<button {{ action "deleteKey"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger" }}>Delete key</button>
</form>
</div>
<div class="panel">
<div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green isLocked:bg-light-gray" }}></div>
<div class="panel-heading">
<h4 {{bind-attr class=":panel-title isLocked:locked"}}>
{{model.Key}}
{{#if model.isLocked}}
<small class="pull-right">
KEY LOCKED
</small>
{{/if}}
</h4>
</div>
<div class="panel-body panel-form">
<div class="form-group">
{{errorMessage}}
</div>
<form class="form">
<div class="form-group">
{{ textarea value=model.valueDecoded class="form-control" disabled=model.isLocked}}
</div>
<button {{action "updateKey"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn isLoading:btn-warning:btn-success"}} {{bind-attr disabled=isLocked}}>Update</button>
<button {{action "cancelEdit"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn isLoading:btn-warning:btn-default"}}>Cancel</button>
<button {{action "deleteKey"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger"}} {{bind-attr disabled=isLocked}}>Delete key</button>
</form>
</div>
</div>
{{#if model.isLocked}}
<h5>Lock Session</h5>
{{#link-to 'nodes.show' model.session.Node tagName="div" href=false class="list-group-item list-condensed-link" }}
<div class="bg-light-gray list-bar-horizontal"></div>
<div class="name">
{{session.Node}}
<small class="pull-right">
{{session.ID}}
</small>
</div>
{{/link-to}}
{{/if}}
</div>
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="item/loading">
@ -306,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>
@ -408,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>
@ -424,7 +445,6 @@
<h3 class="no-margin">{{ model.Node }} <small> {{ model.Address }}</small></h3>
<hr>
{{foobar}}
<h5>Service Tags</h5>
{{#if model.nodeTags}}
@ -471,6 +491,30 @@
</div>
{{/each}}
<h5>Lock Sessions</h5>
{{#if sessions }}
{{errorMessage}}
{{#each session in sessions }}
<div class="list-group-item list-condensed double-line">
<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>
<ul class="list-inline sub">
{{#each check in session.Checks}}
<li class="bold">{{check}}</li>
{{/each}}
</ul>
</div>
{{/each}}
{{else}}
<p class="light small">No sessions</p>
{{/if}}
</script>
<script type="text/x-handlebars" id="index">

View file

@ -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"),
});

View file

@ -176,6 +176,15 @@ App.Key = Ember.Object.extend(Ember.Validations.Mixin, {
return (this.get('Key').slice(-1) === '/')
}.property('Key'),
// Boolean if the key is locked or now
isLocked: function() {
if (!this.get('Session')) {
return false;
} else {
return true;
}
}.property('Session'),
// Determines what route to link to. If it's a folder,
// it will link to kv.show. Otherwise, kv.edit
linkToRoute: function() {

View file

@ -161,6 +161,7 @@ App.KvEditRoute = App.BaseRoute.extend({
// Return a promise hash to get the data for both columns
return Ember.RSVP.hash({
dc: dc,
key: Ember.$.getJSON('/v1/kv/' + key + '?dc=' + dc).then(function(data) {
// Convert the returned data to a Key
return App.Key.create().setProperties(data[0]);
@ -175,6 +176,18 @@ App.KvEditRoute = App.BaseRoute.extend({
});
},
// Load the session on the key, if there is one
afterModel: function(models) {
if (models.key.get('isLocked')) {
return Ember.$.getJSON('/v1/session/info/' + models.key.Session + '?dc=' + models.dc).then(function(data) {
models.session = data[0]
return models
});
} else {
return models
}
},
setupController: function(controller, models) {
var key = models.key;
var parentKeys = this.getParentAndGrandparent(key.get('Key'));
@ -186,6 +199,7 @@ App.KvEditRoute = App.BaseRoute.extend({
controller.set('isRoot', parentKeys.isRoot);
controller.set('siblings', models.keys);
controller.set('rootKey', this.rootKey);
controller.set('session', models.session);
}
});
@ -227,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)
}),
@ -236,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

View file

View file

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

View file

@ -45,17 +45,22 @@
background-color: lighten($gray-background, 8%);
}
&.list-condensed-link {
&.list-condensed-link, &.list-condensed {
border-color: $gray-background;
margin-bottom: 4px;
margin-top: 4px;
height: 40px;
&.double-line {
height: 50px;
}
font-weight: 700;
.name {
font-size: 15px;
padding-top: 7px;
padding-top: 6px;
small {
padding-right: 8px;
@ -64,6 +69,16 @@
color: $gray-light;
}
}
ul.sub {
li {
padding: 0;
}
margin: 0;
font-size: 12px;
color: $gray-light;
}
}
.list-bar-horizontal {

View file

@ -10,6 +10,32 @@
border-color: $gray-background;
}
h4.panel-title {
padding: 4px 10px 4px 10px;
font-size: 20px;
color: $gray-light;
color: $gray-darker;
border-radius: 3px;
opacity: 0.8;
small {
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
margin-left: 5px;
padding-top: 2px;
}
.panel-note {
margin-top: 5px;
float: right;
font-weight: 600;
color: $gray-light;
font-size: 14px;
}
}
h3.panel-title {
padding: 4px 0px 4px 0px;
font-size: 20px;

View file

@ -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;
}