Roles Assign dialog stub, some UI refactor
This commit is contained in:
Vitaly Kramskikh
parent
79cf12a2c1
commit
5f034650a3
@ -241,6 +241,10 @@ behavior: url(/static/css/pie.htc);
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.cluster-control .btn {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.dialog-node {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
@ -10,18 +10,6 @@
|
||||
<link href="/static/css/overlap.css" rel="stylesheet">
|
||||
<link href="/static/css/buttons.css" rel="stylesheet">
|
||||
<link href="/static/css/font-awesome.css" rel="stylesheet">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
src: url('/static/font/fontawesome-webfont.eot');
|
||||
src: url('/static/font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('/static/font/fontawesome-webfont.woff') format('woff'),
|
||||
url('/static/font/fontawesome-webfont.ttf') format('truetype'),
|
||||
url('/static/font/fontawesome-webfont.svg#FontAwesome') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
|
||||
@ -16,11 +16,15 @@ function(models, dialogViews, taskViews, clusterPageTemplate, clusterNodeTemplat
|
||||
updateInterval: 5000,
|
||||
template: _.template(clusterPageTemplate),
|
||||
events: {
|
||||
'click .js-add-nodes': 'addRemoveNodes'
|
||||
'click .add-nodes-btn': 'addRemoveNodes',
|
||||
'click .assign-roles-btn': 'assignRoles'
|
||||
},
|
||||
addRemoveNodes: function(e) {
|
||||
(new dialogViews.addRemoveNodesDialog({model: this.model})).render();
|
||||
},
|
||||
assignRoles: function(e) {
|
||||
(new dialogViews.assignRolesDialog({model: this.model})).render();
|
||||
},
|
||||
initialize: function() {
|
||||
this.model.bind('change', this.render, this);
|
||||
this.scheduleUpdate();
|
||||
|
||||
@ -3,20 +3,20 @@ define(
|
||||
'models',
|
||||
'text!templates/dialogs/add_remove_nodes.html',
|
||||
'text!templates/dialogs/create_cluster.html',
|
||||
'text!templates/dialogs/node_list.html'
|
||||
'text!templates/dialogs/node_list.html',
|
||||
'text!templates/dialogs/assign_roles.html'
|
||||
],
|
||||
function(models, addRemoveNodesDialogTemplate, createClusterDialogTemplate, nodeDialogNodeListTemplate) {
|
||||
function(models, addRemoveNodesDialogTemplate, createClusterDialogTemplate, nodeDialogNodeListTemplate, assignRolesDialogTemplate) {
|
||||
var views = {}
|
||||
|
||||
views.addRemoveNodesDialog = Backbone.View.extend({
|
||||
className: 'modal fade',
|
||||
template: _.template(addRemoveNodesDialogTemplate),
|
||||
events: {
|
||||
'click .js-save-changes': 'saveChanges',
|
||||
'click .save-changes-btn': 'saveChanges',
|
||||
'click .dialog-node': 'toggleNode'
|
||||
},
|
||||
saveChanges: function(e) {
|
||||
e.preventDefault();
|
||||
var nodes = this.$('.node-checked').map(function(){return $(this).attr('data-node-id')}).get();
|
||||
this.model.update({nodes: nodes});
|
||||
this.$el.modal('hide');
|
||||
@ -45,11 +45,10 @@ function(models, addRemoveNodesDialogTemplate, createClusterDialogTemplate, node
|
||||
className: 'modal fade',
|
||||
template: _.template(createClusterDialogTemplate),
|
||||
events: {
|
||||
'click .js-create-cluster': 'createCluster',
|
||||
'click .create-cluster-btn': 'createCluster',
|
||||
'click .dialog-node': 'toggleNode'
|
||||
},
|
||||
createCluster: function(e) {
|
||||
e.preventDefault();
|
||||
this.$('.help-inline').text('');
|
||||
this.$('.control-group').removeClass('error');
|
||||
var nodes = this.$('.node-checked').map(function(){return $(this).attr('data-node-id')}).get();
|
||||
@ -111,5 +110,23 @@ function(models, addRemoveNodesDialogTemplate, createClusterDialogTemplate, node
|
||||
}
|
||||
});
|
||||
|
||||
views.assignRolesDialog = Backbone.View.extend({
|
||||
className: 'modal fade',
|
||||
template: _.template(assignRolesDialogTemplate),
|
||||
events: {
|
||||
'click .assign-roles-btn': 'assignRoles'
|
||||
},
|
||||
assignRoles: function() {
|
||||
// TODO
|
||||
this.$el.modal('hide');
|
||||
},
|
||||
render: function() {
|
||||
this.$el.html(this.template());
|
||||
this.$el.on('hidden', function() {$(this).remove()});
|
||||
this.$el.modal();
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
return views;
|
||||
});
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
<% } else if (node.get('status') == 'error') { %>
|
||||
<div class="statusbar-text msg-error">
|
||||
<i class="icon-warning-sign"></i><strong>Error</strong>
|
||||
<i class="icon-exclamation-sign"></i><strong>Error</strong>
|
||||
</div>
|
||||
<% } else if (node.get('status') == 'deploying') { %>
|
||||
<div class="statusbar-text msg-warning">
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
<div class="row">
|
||||
<div class="span8"><h1><%= cluster.get('name') %></h1></div>
|
||||
<div class="span2"><button class="btn pull-right"><i class="icon-wrench icon-white"></i>Settings</button></div>
|
||||
<div class="span2"><button class="btn btn-success pull-right js-add-nodes"><i class="icon-plus-sign icon-white"></i>Add Nodes</button></div>
|
||||
<div class="span6">
|
||||
<h1><%= cluster.get('name') %></h1>
|
||||
</div>
|
||||
<div class="span6 cluster-control">
|
||||
<button class="btn btn-success pull-right add-nodes-btn"><i class="icon-plus-sign icon-white"></i>Add Nodes</button>
|
||||
<button class="btn pull-right assign-roles-btn"><i class="icon-tags icon-white"></i>Assign Roles</button>
|
||||
<button class="btn pull-right"><i class="icon-wrench icon-white"></i>Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deployment-control"></div>
|
||||
<div class="task-status"></div>
|
||||
|
||||
@ -19,6 +19,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn" data-dismiss="modal">Close</a>
|
||||
<a href="#" class="btn btn-success js-save-changes">Save changes</a>
|
||||
<button class="btn" data-dismiss="modal">Close</button>
|
||||
<button class="btn btn-success save-changes-btn">Save changes</button>
|
||||
</div>
|
||||
|
||||
39
nailgun/nailgun/static/templates/dialogs/assign_roles.html
Normal file
39
nailgun/nailgun/static/templates/dialogs/assign_roles.html
Normal file
@ -0,0 +1,39 @@
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h2>Assign Roles</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h3>Please choose deployment type</h3>
|
||||
<form>
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width: 16px;">
|
||||
<label class="radio">
|
||||
<input type="radio" name="type">
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<p>Simple Deployment</p>
|
||||
<p><small>Simple OpenStack deployment</small></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 16px;">
|
||||
<label class="radio">
|
||||
<input type="radio" name="type">
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<p>HA Deployment</p>
|
||||
<p><small>Highly-available OpenStack deployment</small></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" data-dismiss="modal">Cancel</button>
|
||||
<button class="btn btn-success assign-roles-btn">Assign Roles</button>
|
||||
</div>
|
||||
@ -35,6 +35,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn" data-dismiss="modal">Cancel</a>
|
||||
<a href="#" class="btn btn-success js-create-cluster">Create Cluster</a>
|
||||
<button class="btn" data-dismiss="modal">Cancel</button>
|
||||
<button class="btn btn-success create-cluster-btn">Create Cluster</button>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user