Commit dbdf42b3 authored by Kostas Papadimitriou's avatar Kostas Papadimitriou Committed by Christos Stavrakakis

ui: Volumes/projects views fixes

as reported by drig@grnet.gr

- Include css class and text mappings for DETACHING_VOLUME
  and ATTACHING_VOLUME vm states.
- Fix vm resources summary in project reassign overlay.
- Prevent user from reassinging resource to the currently assigned
  project.
- Enable resize actions from vm info subview in both icon/single vm
  list views.
- Properly set minimum volume size to fit the selected image in
  volume create wizard.
- Styling fix in vm password overlay. signed-off-by: olgabrani@grnet.gr
- Fix misalinged vm status indicators in volume create wizard. signed-off-by: olgabrani@grnet.gr
- Enforce closing of select2 widget when create wizard overlay gets
  hidden.
- Minor wording fixes.
- Display project name in both vm/volume create wizard confirmation
  steps.
- Handle invalid non-numeric values typed in volume size input in
  volume create wizard.
- Properly set volume_id to match the id of the selected volume item
  in snapshot create call.
- Set max-{width,height} of volume description textarea in volume create
  wizard.

closes grnet/synnefo#140
parent 6b3f6cae
......@@ -1177,6 +1177,14 @@ div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
background: transparent;
}
.connecting-state .indicator1, .connecting-state .indicator2, .connecting-state .indicator3, .connecting-state .indicator4 {
background-color: #d4aa00;
}
.disconnecting-state .indicator1, .disconnecting-state .indicator2, .disconnecting-state .indicator3, .disconnecting-state .indicator4 {
background-color: #d4aa00;
}
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
background-color: #63cf1c;
}
......@@ -2527,6 +2535,10 @@ div.list table thead .vmname {
margin: 10px 6px 0 15px;
}
.progress-indicator.spinner {
margin-top: 50px;
}
.icon .spinner {
margin: 33px 4px 0 15px !important;
}
......@@ -4298,6 +4310,7 @@ h3.overlay-inner-title {
margin-right: 2em;
float: right;
margin-top: -4px;
width: 200px;
}
.feedback-form .description {
......@@ -5666,10 +5679,11 @@ table.list-machines .wave {
width: 98%;
height: 250px;
padding: 4px;
max-width: 582px;
max-height: 250px;
}
.create-wizard-overlay.create-volume .vms-list .model-item .indicators {
margin-top: -17px;
float: right;
}
......@@ -6155,7 +6169,7 @@ table.list-machines .wave {
}
.create-wizard-overlay .images-info-cont h4, .create-vm .create-step-cont .param h4{
.create-wizard-overlay .images-info-cont h4, .create-vm .create-step-cont .param h4, h4.project-name {
color: #FF9955;
margin-bottom: 1em;
font-size: 1.2em;
......@@ -6625,10 +6639,12 @@ table.list-machines .wave {
width: auto;
}
.create-wizard-overlay .create-step-cont .list-cont ul li.flavor-project .value,
.create-wizard-overlay .create-step-cont .list-cont ul li.image-name .value {
width: 120px;
text-indent: 0;
margin-left: 0;
text-align: left;
}
.create-wizard-overlay .create-step-cont .list-cont ul li {
......
......@@ -633,7 +633,7 @@
}
if (key == 'disk') {
parser = synnefo.util.readablizeBytes
getter = this.ram_to_bytes
getter = this.disk_to_bytes
}
if (key == 'cpu') {
parser = function(v) { return v + 'x' }
......@@ -1796,6 +1796,8 @@
'START' : ['destroy'],
'CONNECT' : ['destroy'],
'DISCONNECT' : ['destroy'],
'DETACH_VOLUME' : ['destroy'],
'ATTACH_VOLUME' : ['destroy'],
'RESIZE' : ['destroy'],
'REASSIGN' : ['destroy']
}
......@@ -1830,6 +1832,8 @@
'CONNECT',
'DISCONNECT',
'FIREWALL',
'DETACH_VOLUME',
'ATTACH_VOLUME',
'REASSIGN',
'RESIZE'
]);
......@@ -2626,6 +2630,9 @@
},
'ip': {
'cyclades.floating_ip': 1
},
'volume': {
'cyclades.disk': 1
}
},
......
......@@ -718,6 +718,10 @@
this.handle_project_select(this.parent.project);
},
hide: function() {
this.hide_step();
},
hide_step: function() {
this.project_select_view && this.project_select_view.hide(true);
},
......@@ -1665,7 +1669,7 @@
this.name = this.$("h3.vm-name");
this.keys = this.$(".confirm-params.ssh");
this.meta = this.$(".confirm-params.meta");
this.project = this.$(".confirm-cont.flavor .project-name");
this.project = this.$(".confirm-cont.image .project-name");
this.ip_addresses = this.$(".confirm-params.ip-addresses");
this.private_networks = this.$(".confirm-params.private-networks");
this.init_handlers();
......@@ -1991,6 +1995,7 @@
},
onClose: function() {
this.current_view && this.current_view.hide && this.current_view.hide(true);
if (this.steps && this.steps[3]) {
this.steps[3].remove();
}
......
......@@ -688,9 +688,7 @@
init_handlers: function() {
this.resize_actions.bind('click', _.bind(function(e){
if (this.vm.in_error_state()) { return }
if (this.vm.can_resize()) {
ui.main.vm_resize_view.show(this.vm);
}
ui.main.vm_resize_view.show(this.vm);
}, this));
},
......@@ -882,8 +880,8 @@
vm.get('fqdn') || synnefo.config.no_fqdn_message);
el.find("div.status").text(STATE_TEXTS[vm.state()]);
// set state class
el.find("div.state").removeClass().addClass(
views.IconView.STATE_CLASSES[vm.state()].join(" "));
var cls = views.IconView.STATE_CLASSES[vm.state()] || ['state'];
el.find("div.state").removeClass().addClass(cls.join(" "));
// os icon
el.find("div.logo").css({
'background-image': "url(" +
......@@ -961,6 +959,8 @@
'START': ['state', 'starting-state'],
'CONNECT': ['state', 'connecting-state'],
'DISCONNECT': ['state', 'disconnecting-state'],
'ATTACH_VOLUME': ['state', 'connecting-state'],
'DETACH_VOLUME': ['state', 'disconnecting-state'],
'RESIZE': ['state', 'rebooting-state']
};
......
......@@ -335,8 +335,9 @@
},
get_vm_table_data: function(vm) {
var cls = views.ListView.STATE_CLASSES[vm.state()] || [];
var checkbox = '<input type="checkbox" class="' +
views.ListView.STATE_CLASSES[vm.state()].join(" ") +
cls.join(" ") +
' list-vm-checkbox" id="checkbox-' + this.id_tpl + vm.id + '"/>';
var img = '<img class="os_icon" src="'+ this.get_vm_icon_path(vm, "small") +'" />';
......@@ -487,7 +488,7 @@
return views.ListView.VM_OS_ICON_TPLS()[icon_type].format(os, st);
}
})
});
views.ListView.VM_OS_ICON_TPLS = function() {
return {
......@@ -510,6 +511,8 @@
'START': ['starting-state'],
'CONNECT': ['connecting-state'],
'DISCONNECT': ['disconnecting-state'],
'ATTACH_VOLUME': ['connecting-state'],
'DETACH_VOLUME': ['disconnecting-state'],
'RESIZE': ['rebooting-state']
};
......
......@@ -224,6 +224,11 @@
filter_func: _.bind(this.can_fit_func, this),
quotas_keys: this.resources
});
this.collection_view.bind("change:select", function(item) {
this.handle_project_change(item.model);
}, this);
this.collection_view.show(true);
this.collection_view.model_usage = this.model_usage;
this.collection_view.resource_model = this.model;
......@@ -233,6 +238,16 @@
this.collection_view.set_selected(this.model.get('project'));
}
this.list.append($(this.collection_view.el));
this.handle_project_change();
},
handle_project_change: function(project) {
var project = project || this.collection_view.get_selected();
if (project.id == this.model.get('project').id) {
this.submit_button.addClass("disabled");
} else {
this.submit_button.removeClass("disabled");
}
},
init_handlers: function() {
......@@ -240,6 +255,7 @@
},
submit: function() {
if (this.submit_button.hasClass("disabled")) { return }
if (this.in_progress) { return }
var project = this.collection_view.get_selected();
if (project.id == this.model.get('project').id) {
......@@ -280,6 +296,7 @@
description: 'Select project assign machine to',
resources: ['cyclades.vm', 'cyclades.ram',
'cyclades.cpu', 'cyclades.disk'],
model_usage: function(model) {
var quotas = model.get_flavor().quotas();
var total = false;
......
......@@ -506,6 +506,8 @@
'START': ['state', 'starting-state'],
'CONNECT': ['state', 'connecting-state'],
'DISCONNECT': ['state', 'disconnecting-state'],
'ATTACH_VOLUME': ['state', 'connecting-state'],
'DETACH_VOLUME': ['state', 'disconnecting-state'],
'RESIZE': ['state', 'rebooting-state']
};
......
......@@ -340,11 +340,7 @@
}
var el = this.vm(vm);
if (vm.can_resize()) {
el.addClass("can-resize");
} else {
el.removeClass("can-resize");
}
el.addClass("can-resize");
if (vm.get('suspended')) {
el.addClass("suspended");
......
......@@ -51,6 +51,8 @@
'SHUTDOWN': ['shutting-state'],
'START': ['starting-state'],
'CONNECT': ['connecting-state'],
'DETACH_VOLUME': ['disconnecting-state'],
'ATTACH_VOLUME': ['connecting-state'],
'DISCONNECT': ['disconnecting-state'],
'RESIZE': ['rebooting-state']
};
......@@ -59,9 +61,10 @@
views.CreateVMSelectProjectView.extend({
tpl: '#create-view-projects-select-tpl',
required_quota: function() {
var size = 1;
var size = Math.pow(1024, 3);
var img = this.parent_view.parent.steps[1].selected_image;
if (img) {
if (img && !img.id == "empty-disk") {
size = img.get("size");
}
return {'cyclades.disk': size}
......@@ -105,6 +108,7 @@
}
return views.CreateVolumeImageStepView.__super__.get_image_icon_tag.call(this, image);
},
display_warning_for_image: function(image) {
if (image && !image.is_system_image() &&
!image.owned_by(synnefo.user) && image.get("id") != "empty-disk") {
......@@ -170,12 +174,17 @@
this.size_input.bind("keyup", _.bind(function() {
window.setTimeout(_.bind(function() {
var value = this.size_input.val();
if (!parseInt(value)) {
value = this.min_size;
this.size_input.val(value);
}
if (parseInt(value)) {
this.size_input.simpleSlider("setValue", value);
}
}, this), 200);
}, this), 50);
}, this));
this.size_input.simpleSlider(this.slider_settings);
this.min_size = 1;
},
slider_settings: {
......@@ -215,11 +224,12 @@
hide_step: function() {
window.setTimeout(_.bind(function() {
this.project_select_view && this.project_select_view.hide(true);
}, this), 200);
}, this), 50);
},
hide: function() {
this.project_select_view.unbind("change");
this.project_select_view && this.project_select_view.hide(true);
views.CreateVolumeProjectStepView.__super__.hide.apply(this, arguments);
},
......@@ -248,7 +258,12 @@
if (!this.parent.project) { return }
this.current_image = image;
var size = image ? image.get("size") : 1;
this.set_slider_min(size / Math.pow(1024, 3));
size = size / Math.pow(1024, 3);
if (size > parseInt(size)) {
size = parseInt(size) + 1;
}
this.set_slider_min(size);
this.min_size = size || 1;
this.update_layout();
},
......@@ -456,6 +471,9 @@
image_name = params.image.get("name");
}
this.$(".image-name").text(snf.util.truncate(image_name, 44));
var project_name = params.project.get("name");
this.$(".project-name").text(snf.util.truncate(project_name, 44));
var name = params.name;
this.$(".volume-name").text(snf.util.truncate(name, 54));
......@@ -496,6 +514,7 @@
validate: function() { return true },
onClose: function() {
this.current_view && this.current_view.hide && this.current_view.hide(true);
},
submit: function() {
......@@ -882,7 +901,8 @@
this.creating = true;
this.vm.create_snapshot({
display_name: name,
display_description: desc
display_description: desc,
volume_id: this.volume.id
}, _.bind(function() {
this.creating = false;
this.show_success();
......
......@@ -44,6 +44,16 @@
},
proxy_attrs: {
'_status': [['vm', 'vm.state', 'vm.status', 'status'], function() {
return this.get('status');
}],
'in_progress': [['status', 'vm', 'vm.status'], function() {
var vm = this.get('vm');
if (vm && vm.get('in_progress')) {
return true
}
return false;
}],
'ext': [['vm', 'volume_type'], function() {
var vm = this.get('vm');
if (!vm) { return false }
......@@ -214,6 +224,7 @@
'display_description': description || null,
'size': parseInt(size),
'server_id': vm.id,
'project': project.id,
'metadata': {}
}
......
......@@ -144,6 +144,9 @@
'START': '{% trans "Starting..." %}',
'CONNECT': '{% trans "Connecting..." %}',
'DISCONNECT': '{% trans "Disconnecting..." %}',
'ATTACH_VOLUME': '{% trans "Attaching disk..." %}',
'DETACH_VOLUME': '{% trans "Detaching disk..." %}',
'MODIFY_VOLUME': '{% trans "Modifying disk..." %}',
'RESIZE': '{% trans "Resizing..." %}'
}
......
......@@ -256,14 +256,17 @@
<span class="value"></span>
</li>
</ul>
<h4>{% trans "Project" %}</h4>
<ul class="confirm-params">
<li class="param flavor-project clearfix">
<h4 class="project-name value"></h4>
</li>
</ul>
</div>
<div class="list-cont confirm-cont flavor">
<h4>{% trans "Flavor" %}</h4>
<ul class="confirm-params">
<li class="param flavor-project clearfix">
<span class="project-name value"></span>
</li>
<li class="param flavor-cpu clearfix">
<span class="title">{% trans "CPUs" %}</span>
<span class="value"></span>
......
......@@ -186,6 +186,12 @@
</ul>
</div>
<div class="list-cont confirm-cont wide info last">
<h4>{% trans "Project" %}</h4>
<ul class="confirm-params">
<li class="param flavor-project clearfix">
<h4 class="project-name value"></h4>
</li>
</ul>
<h4>{% trans "Info" %}</h4>
<ul class="confirm-params">
<li class="param volume-info clearfix"></li>
......
......@@ -49,13 +49,13 @@
<div class="name">
<span class="" data-rv-text="model.name|truncate_title"></span>
<div data-rv-class="model.state|status_cls">
<span data-rv-text="model.state|status_display"></span>
<div class="indicators">
<div class="indicator1"></div>
<div class="indicator2"></div>
<div class="indicator3"></div>
<div class="indicator4"></div>
</div>
<span data-rv-text="model.state|status_display"></span>
</div>
</div>
</div>
......
......@@ -14,7 +14,7 @@
</div>
<div class="empty-list hidden">
<p>{% trans "No disks available" %}</p>
<p>{% trans "No disks available." %}</p>
</div>
<div class="items-list clearfix">
......@@ -87,10 +87,9 @@
</div>
</div>
<div class="entry-right">
<div data-rv-class="model.status|status_cls" class="status">
<div data-rv-class="model._status|status_cls" class="status">
<div class="status-title">
<span data-rv-text="model.status|status_display">Active</span>
<span data-rv-show="model.in_progress">...</span>
<span data-rv-text="model._status|status_display">Active</span>
</div>
<div class="status-indicator clearfix">
<div class="indicator indicator1"></div>
......@@ -101,7 +100,9 @@
<div class="state state-indicator">
<div class="action-indicator"></div>
</div>
<div data-show="model.status|in_progress" class="status-progress"></div>
<img data-rv-show="model.in_progress"
src="{{ SYNNEFO_IMAGES_URL }}icons/indicators/small/progress.gif"
class="progress-indicator spinner" />
</div>
</div>
</div>
......
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