Commit 0a4f7839 authored by Kostas Papadimitriou's avatar Kostas Papadimitriou Committed by Christos Stavrakakis
Browse files

ui: Create vm snapshot view

- New overlay view to handle vm snapshot creation
- Snapshot action available from vm single view
parent fa999091
......@@ -3602,7 +3602,7 @@ div.machine a.manage-metadata:hover {
.single .single-actions {
width: 150px;
height: 77px;
height: 80px;
margin-bottom: 45px;
margin-left: -10px;
}
......@@ -7812,4 +7812,19 @@ option.project.select-item.selected {
.project.select-item.current {
background-color: #C7DEE9;
/* snapshots */
.snapshot-create-form .form-field {
margin-bottom: 10px;
}
.snapshot-create-form .form-field input {
width: 100%;
}
.snapshot-create-desc {
width: 99.5%;
height: 90px;
border: 1px solid #aaa;
margin-top: 3px;
}
......@@ -696,6 +696,7 @@
init_overlays: function() {
this.create_vm_view = new views.CreateVMView();
this.create_snapshot_view = new views.CreateSnapshotView();
this.api_info_view = new views.ApiInfoView();
this.details_view = new views.DetailsView();
this.suspended_view = new views.SuspendedVMView();
......
......@@ -53,7 +53,114 @@
var debug = _.bind(logger.debug, logger);
var hasKey = Object.prototype.hasOwnProperty;
views.CreateSnapshotView = views.Overlay.extend({
view_id: "snapshot_create_view",
content_selector: "#snapshot-create-content",
css_class: 'overlay-snapshot-create overlay-info',
overlay_id: "snapshot-create-overlay",
title: "Create new snapshot",
subtitle: "Machines",
initialize: function(options) {
views.CreateSnapshotView.__super__.initialize.apply(this);
this.create_button = this.$("form .form-action.create");
this.text = this.$(".snapshot-create-name");
this.description = this.$(".snapshot-create-desc");
this.form = this.$("form");
this.init_handlers();
},
show: function(vm) {
this.vm = vm;
views.CreateSnapshotView.__super__.show.apply(this);
},
init_handlers: function() {
this.create_button.click(_.bind(function(e){
this.submit();
}, this));
this.form.submit(_.bind(function(e){
e.preventDefault();
this.submit();
return false;
}, this))
this.text.keypress(_.bind(function(e){
if (e.which == 13) {this.submit()};
},this))
},
submit: function() {
if (this.validate()) {
this.create();
};
},
validate: function() {
// sanitazie
var t = this.text.val();
t = t.replace(/^\s+|\s+$/g,"");
this.text.val(t);
if (this.text.val() == "") {
this.text.closest(".form-field").addClass("error");
this.text.focus();
return false;
} else {
this.text.closest(".form-field").removeClass("error");
}
return true;
},
create: function() {
this.create_button.addClass("in-progress");
var name = this.text.val();
var desc = this.description.val();
this.vm.create_snapshot(name, desc, _.bind(function() {
this.hide();
}, this));
},
_default_values: function() {
var date = (new Date()).toString();
var vmname = this.vm.get('name');
var id = this.vm.id;
var name = "snf-{0} '{1}' snapshot ({2})".format(id, vmname, date);
var description = "Snapshot created at: {0}".format(date);
description += "\n" + "Machine name: '{0}'".format(vmname);
description += "\n" + "Machine id: '{0}'".format(id);
return {
'name': name,
'description': description
}
},
beforeOpen: function() {
this.create_button.removeClass("in-progress")
this.text.closest(".form-field").removeClass("error");
var defaults = this._default_values();
this.text.val(defaults.name);
this.description.val(defaults.description);
this.text.show();
this.text.focus();
this.description.show();
},
onOpen: function() {
this.text.focus();
}
});
// base class for views that contain/handle VMS
views.VMListView = views.View.extend({
......@@ -640,6 +747,11 @@
// initial hide
if (this.hide) { $(this.el).hide() };
if (this.$('.snapshot').length) {
this.$('.snapshot').click(_.bind(function() {
synnefo.ui.main.create_snapshot_view.show(this.vm);
}, this));
}
// action links events
_.each(models.VM.ACTIONS, function(action) {
var action = action;
......
......@@ -113,6 +113,7 @@
//populate available image icons array
var os_icons = {{image_icons|safe}};
os_icons.push('snapshot');
// timeout value from settings.py
var TIMEOUT = {{ timeout }};
......
<div id="snapshot-create-content" class="overlay-content hidden">
<div class="create-form snapshot-create-form">
<p class="info"></p>
<form>
<div class="col-fields bordered clearfix">
<div class="form-field">
<label for="snapshot-create-name">Snapshot name:</label>
<input type="text" class="snapshot-create-name" name="snapshot-create-name" id="snapshot-create-name" />
</div>
<div class="form-field">
<div>
<label for="snapshot-create-name">Snapshot description:</label>
</div>
<textarea class="snapshot-create-desc" name="snapshot-create-desc" id="snapshot-create-desc">
</textarea>
</div>
</div>
<div class="form-actions plain clearfix">
<span class="form-action create">create snapshot</span>
</div>
</form>
</div>
<div class="ajax-submit"></div>
</div>
......@@ -31,6 +31,7 @@
{% include "partials/create_vm.html" %}
{% include "partials/manage_metadata.html" %}
{% include "partials/vm_connect.html" %}
{% include "partials/create_snapshot.html" %}
<div id="vm-select-collection-tpl" class="hidden">
<div class="collection fixed-ips-list">
......
......@@ -105,6 +105,8 @@
</div>
<div class="action-container resize">
<a class="single-action action-resize">{% trans "Resize" %}</a>
<div class="action-container snapshot">
<a class="single-action action-snapshot">{% trans "Snapshot" %}</a>
<div class="confirm_single">
<button class="yes">{% trans "Confirm" %}</button>
<button class="no">X</button>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment