Revision 8a6915df
b/snf-cyclades-app/synnefo/ui/static/snf/css/main.css | ||
---|---|---|
3597 | 3597 |
|
3598 | 3598 |
.single .single-actions { |
3599 | 3599 |
width: 150px; |
3600 |
height: 77px;
|
|
3600 |
height: 80px;
|
|
3601 | 3601 |
margin-bottom: 45px; |
3602 | 3602 |
margin-left: -10px; |
3603 | 3603 |
} |
... | ... | |
3963 | 3963 |
.single div.upper { |
3964 | 3964 |
background: transparent; |
3965 | 3965 |
margin-bottom: 10px; |
3966 |
overflow: visible; |
|
3967 | 3966 |
overflow: hidden; |
3967 |
overflow: visible; |
|
3968 | 3968 |
width: 700px; |
3969 | 3969 |
background: #EFF7FA repeat scroll 0 0; |
3970 | 3970 |
} |
... | ... | |
7644 | 7644 |
float: left; |
7645 | 7645 |
width: 5%; |
7646 | 7646 |
} |
7647 |
|
|
7648 |
|
|
7649 |
/* snapshots */ |
|
7650 |
.snapshot-create-form .form-field { |
|
7651 |
margin-bottom: 10px; |
|
7652 |
} |
|
7653 |
|
|
7654 |
.snapshot-create-form .form-field input { |
|
7655 |
width: 100%; |
|
7656 |
} |
|
7657 |
|
|
7658 |
.snapshot-create-desc { |
|
7659 |
width: 99.5%; |
|
7660 |
height: 90px; |
|
7661 |
border: 1px solid #aaa; |
|
7662 |
margin-top: 3px; |
|
7663 |
} |
b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_main_view.js | ||
---|---|---|
696 | 696 |
|
697 | 697 |
init_overlays: function() { |
698 | 698 |
this.create_vm_view = new views.CreateVMView(); |
699 |
this.create_snapshot_view = new views.CreateSnapshotView(); |
|
699 | 700 |
this.api_info_view = new views.ApiInfoView(); |
700 | 701 |
this.details_view = new views.DetailsView(); |
701 | 702 |
this.suspended_view = new views.SuspendedVMView(); |
b/snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_vms_base_view.js | ||
---|---|---|
54 | 54 |
|
55 | 55 |
var hasKey = Object.prototype.hasOwnProperty; |
56 | 56 |
|
57 |
views.CreateSnapshotView = views.Overlay.extend({ |
|
58 |
view_id: "snapshot_create_view", |
|
59 |
content_selector: "#snapshot-create-content", |
|
60 |
css_class: 'overlay-snapshot-create overlay-info', |
|
61 |
overlay_id: "snapshot-create-overlay", |
|
62 |
|
|
63 |
title: "Create new snapshot", |
|
64 |
subtitle: "Machines", |
|
65 |
|
|
66 |
initialize: function(options) { |
|
67 |
views.CreateSnapshotView.__super__.initialize.apply(this); |
|
68 |
|
|
69 |
this.create_button = this.$("form .form-action.create"); |
|
70 |
this.text = this.$(".snapshot-create-name"); |
|
71 |
this.description = this.$(".snapshot-create-desc"); |
|
72 |
this.form = this.$("form"); |
|
73 |
this.init_handlers(); |
|
74 |
}, |
|
75 |
|
|
76 |
show: function(vm) { |
|
77 |
this.vm = vm; |
|
78 |
views.CreateSnapshotView.__super__.show.apply(this); |
|
79 |
}, |
|
80 |
|
|
81 |
init_handlers: function() { |
|
82 |
|
|
83 |
this.create_button.click(_.bind(function(e){ |
|
84 |
this.submit(); |
|
85 |
}, this)); |
|
86 |
|
|
87 |
this.form.submit(_.bind(function(e){ |
|
88 |
e.preventDefault(); |
|
89 |
this.submit(); |
|
90 |
return false; |
|
91 |
}, this)) |
|
92 |
|
|
93 |
this.text.keypress(_.bind(function(e){ |
|
94 |
if (e.which == 13) {this.submit()}; |
|
95 |
},this)) |
|
96 |
}, |
|
97 |
|
|
98 |
submit: function() { |
|
99 |
if (this.validate()) { |
|
100 |
this.create(); |
|
101 |
}; |
|
102 |
}, |
|
103 |
|
|
104 |
validate: function() { |
|
105 |
// sanitazie |
|
106 |
var t = this.text.val(); |
|
107 |
t = t.replace(/^\s+|\s+$/g,""); |
|
108 |
this.text.val(t); |
|
109 |
|
|
110 |
if (this.text.val() == "") { |
|
111 |
this.text.closest(".form-field").addClass("error"); |
|
112 |
this.text.focus(); |
|
113 |
return false; |
|
114 |
} else { |
|
115 |
this.text.closest(".form-field").removeClass("error"); |
|
116 |
} |
|
117 |
return true; |
|
118 |
}, |
|
119 |
|
|
120 |
create: function() { |
|
121 |
this.create_button.addClass("in-progress"); |
|
122 |
|
|
123 |
var name = this.text.val(); |
|
124 |
var desc = this.description.val(); |
|
125 |
|
|
126 |
this.vm.create_snapshot(name, desc, _.bind(function() { |
|
127 |
this.hide(); |
|
128 |
}, this)); |
|
129 |
}, |
|
130 |
|
|
131 |
_default_values: function() { |
|
132 |
var date = (new Date()).toString(); |
|
133 |
var vmname = this.vm.get('name'); |
|
134 |
var id = this.vm.id; |
|
135 |
|
|
136 |
var name = "snf-{0} '{1}' snapshot ({2})".format(id, vmname, date); |
|
137 |
var description = "Snapshot created at: {0}".format(date); |
|
138 |
description += "\n" + "Machine name: '{0}'".format(vmname); |
|
139 |
description += "\n" + "Machine id: '{0}'".format(id); |
|
140 |
|
|
141 |
return { |
|
142 |
'name': name, |
|
143 |
'description': description |
|
144 |
} |
|
145 |
}, |
|
146 |
|
|
147 |
beforeOpen: function() { |
|
148 |
this.create_button.removeClass("in-progress") |
|
149 |
this.text.closest(".form-field").removeClass("error"); |
|
150 |
var defaults = this._default_values(); |
|
151 |
|
|
152 |
this.text.val(defaults.name); |
|
153 |
this.description.val(defaults.description); |
|
154 |
this.text.show(); |
|
155 |
this.text.focus(); |
|
156 |
this.description.show(); |
|
157 |
}, |
|
158 |
|
|
159 |
onOpen: function() { |
|
160 |
this.text.focus(); |
|
161 |
} |
|
162 |
}); |
|
163 |
|
|
57 | 164 |
// base class for views that contain/handle VMS |
58 | 165 |
views.VMListView = views.View.extend({ |
59 | 166 |
|
... | ... | |
636 | 743 |
// initial hide |
637 | 744 |
if (this.hide) { $(this.el).hide() }; |
638 | 745 |
|
746 |
if (this.$('.snapshot').length) { |
|
747 |
this.$('.snapshot').click(_.bind(function() { |
|
748 |
synnefo.ui.main.create_snapshot_view.show(this.vm); |
|
749 |
}, this)); |
|
750 |
} |
|
639 | 751 |
// action links events |
640 | 752 |
_.each(models.VM.ACTIONS, function(action) { |
641 | 753 |
var action = action; |
b/snf-cyclades-app/synnefo/ui/templates/home.html | ||
---|---|---|
112 | 112 |
|
113 | 113 |
//populate available image icons array |
114 | 114 |
var os_icons = {{image_icons|safe}}; |
115 |
os_icons.push('snapshot'); |
|
115 | 116 |
|
116 | 117 |
// timeout value from settings.py |
117 | 118 |
var TIMEOUT = {{ timeout }}; |
b/snf-cyclades-app/synnefo/ui/templates/partials/create_snapshot.html | ||
---|---|---|
1 |
<div id="snapshot-create-content" class="overlay-content hidden"> |
|
2 |
<div class="create-form snapshot-create-form"> |
|
3 |
<p class="info"></p> |
|
4 |
<form> |
|
5 |
<div class="col-fields bordered clearfix"> |
|
6 |
<div class="form-field"> |
|
7 |
<label for="snapshot-create-name">Snapshot name:</label> |
|
8 |
<input type="text" class="snapshot-create-name" name="snapshot-create-name" id="snapshot-create-name" /> |
|
9 |
</div> |
|
10 |
<div class="form-field"> |
|
11 |
<div> |
|
12 |
<label for="snapshot-create-name">Snapshot description:</label> |
|
13 |
</div> |
|
14 |
<textarea class="snapshot-create-desc" name="snapshot-create-desc" id="snapshot-create-desc"> |
|
15 |
</textarea> |
|
16 |
</div> |
|
17 |
</div> |
|
18 |
<div class="form-actions plain clearfix"> |
|
19 |
<span class="form-action create">create snapshot</span> |
|
20 |
</div> |
|
21 |
</form> |
|
22 |
</div> |
|
23 |
|
|
24 |
<div class="ajax-submit"></div> |
|
25 |
</div> |
b/snf-cyclades-app/synnefo/ui/templates/partials/machines.html | ||
---|---|---|
31 | 31 |
{% include "partials/create_vm.html" %} |
32 | 32 |
{% include "partials/manage_metadata.html" %} |
33 | 33 |
{% include "partials/vm_connect.html" %} |
34 |
{% include "partials/create_snapshot.html" %} |
|
34 | 35 |
|
35 | 36 |
<div id="vm-select-collection-tpl" class="hidden"> |
36 | 37 |
<div class="collection fixed-ips-list"> |
b/snf-cyclades-app/synnefo/ui/templates/partials/machines_single.html | ||
---|---|---|
102 | 102 |
</div> |
103 | 103 |
<div class="action-container resize"> |
104 | 104 |
<a class="single-action action-resize">{% trans "Resize" %}</a> |
105 |
<div class="action-container snapshot"> |
|
106 |
<a class="single-action action-snapshot">{% trans "Snapshot" %}</a> |
|
105 | 107 |
<div class="confirm_single"> |
106 | 108 |
<button class="yes">{% trans "Confirm" %}</button> |
107 | 109 |
<button class="no">X</button> |
Also available in: Unified diff