apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Instance wizard UI: Support multi-disk offerings

Browse Source 
Adds front-end support to instance wizard UI for service offerings
supporting multiple disks.

The UI changes will show if a list 'multipleDisks: []' is passed with
the disk offering data options.
This commit is contained in:
Brian Federle 2014-04-02 16:25:12 -07:00
parent cd8801f6f7
commit a82a1299ec
4 changed files with 216 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
ui/css/cloudstack3.css
View File

@ -1835,6 +1835,7 @@ div.list-view td.state.off span {
float: left; float: left;
width: 245px; width: 245px;
} }
.detail-group .main-groups table td.value > span.copypasteenabledvalue { .detail-group .main-groups table td.value > span.copypasteenabledvalue {
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
@ -1849,7 +1850,7 @@ div.list-view td.state.off span {
} }
div.copypasteicon { div.copypasteicon {
background: url("../images/sprites.png") no-repeat scroll -271px -65px; background: url("../images/sprites.png") no-repeat -271px -65px;
float: left; float: left;
height: 21px; height: 21px;
margin-left: 6px; margin-left: 6px;
@ -1858,7 +1859,7 @@ div.copypasteicon {
} }
div.copypasteicon:hover { div.copypasteicon:hover {
background: url("../images/sprites.png") no-repeat scroll -271px -646px; background: url("../images/sprites.png") no-repeat -271px -646px;
} }
.detail-group .main-groups table td.value > span.copypasteenabledvalue { .detail-group .main-groups table td.value > span.copypasteenabledvalue {
@ -1875,7 +1876,7 @@ div.copypasteicon:hover {
} }
div.copypasteicon { div.copypasteicon {
background: url("../images/sprites.png") no-repeat scroll -271px -65px; background: url("../images/sprites.png") no-repeat -271px -65px;
float: left; float: left;
height: 21px; height: 21px;
margin-left: 6px; margin-left: 6px;
@ -1884,10 +1885,9 @@ div.copypasteicon {
} }
div.copypasteicon:hover { div.copypasteicon:hover {
background: url("../images/sprites.png") no-repeat scroll -271px -646px; background: url("../images/sprites.png") no-repeat -271px -646px;
} }
.detail-group .main-groups table td.value > span select { .detail-group .main-groups table td.value > span select {
width: 100% !important; width: 100% !important;
} }
@ -6050,6 +6050,94 @@ label.error {
border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px;
} }
.multi-wizard.instance-wizard .data-disk-offering .disk-select-group {
float: left;
margin-top: 12px;
width: 100%;
}
.multi-wizard.instance-wizard .data-disk-offering .disk-select-header {
border-bottom: 1px solid #D4D4D4;
/*+border-radius:4px;*/
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
background: #C2C2C2 0px 4px;
padding: 6px;
height: 17px;
}
.multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header {
background: #505050;
/*+border-radius:4px 4px 0 0;*/
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-khtml-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.multi-wizard.instance-wizard .data-disk-offering .disk-select-header input {
float: left;
}
.multi-wizard.instance-wizard .data-disk-offering .disk-select-header .title {
float: left;
font-size: 14px;
padding: 2px;
}
.multi-wizard.instance-wizard .disk-select-group.selected .disk-select-header .title {
color: #FFFFFF;
/*+text-shadow:0px -1px #000000;*/
-moz-text-shadow: 0px -1px #000000;
-webkit-text-shadow: 0px -1px #000000;
-o-text-shadow: 0px -1px #000000;
text-shadow: 0px -1px #000000;
}
.multi-wizard.instance-wizard .data-disk-offering .multi-disk-select-container {
max-height: 257px;
overflow: auto;
border: 1px solid #DDDBDB;
padding: 13px;
background: #E4E4E4;
}
.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select-container {
max-height: 114px;
float: left;
margin: 0;
border: none;
/*+border-radius:0;*/
-moz-border-radius: 0;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
border-radius: 0;
display: none;
}
.multi-wizard.instance-wizard .data-disk-offering .disk-select-group.selected .select-container {
display: block;
}
.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select {
padding: 0 0 17px;
height: 0;
}
.multi-wizard.instance-wizard .data-disk-offering .disk-select-group.custom-size .section.custom-size {
display: block !important;
}
.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select input {
margin: 13px 12px 12px;
}
.multi-wizard.instance-wizard .data-disk-offering .disk-select-group .select-desc {
margin: 13px 0 0;
}
.multi-wizard.instance-wizard .data-disk-offering.required .select-container { .multi-wizard.instance-wizard .data-disk-offering.required .select-container {
height: 344px; height: 344px;
position: relative; position: relative;
@ -12491,7 +12579,8 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
background-position: -168px -31px; background-position: -168px -31px;
} }
.reset .icon, .reinstall .icon { .reset .icon,
.reinstall .icon {
background-position: -168px -31px; background-position: -168px -31px;
} }

2
ui/index.jsp
View File

@ -250,7 +250,7 @@
</div> </div>
<!-- Custom size slider --> <!-- Custom size slider -->
<div class="section custom-size"> <div class="section custom-size custom-disk-size">
<label><fmt:message key="label.disk.size"/></label> <label><fmt:message key="label.disk.size"/></label>
<!-- Slider --> <!-- Slider -->

9
ui/scripts/instanceWizard.js
View File

@ -335,7 +335,14 @@
customIopsDoFlag: 'iscustomizediops', customIopsDoFlag: 'iscustomizediops',
data: { data: {
diskOfferings: diskOfferingObjs diskOfferings: diskOfferingObjs
} },
multiDisk: false
// multiDisk:
// [
// { id: 1, label: 'vm-disk-1' },
// { id: 2, label: 'vm-disk-2' },
// { id: 3, label: 'vm-disk-3' }
// ]
}); });
} }
}); });

148
ui/scripts/ui-custom/instanceWizard.js
View File

@ -491,7 +491,11 @@
return { return {
response: { response: {
success: function(args) { success: function(args) {
var multiDisk = args.multiDisk;
$step.find('.multi-disk-select-container').remove();
$step.removeClass('custom-disk-size'); $step.removeClass('custom-disk-size');
if (args.required) { if (args.required) {
$step.find('.section.no-thanks').hide(); $step.find('.section.no-thanks').hide();
$step.addClass('required'); $step.addClass('required');
@ -500,15 +504,67 @@
$step.removeClass('required'); $step.removeClass('required');
} }
$step.find('.content .select-container').append( var $selectContainer = $step.find('.content .select-container:not(.multi-disk)');
makeSelects('diskofferingid', args.data.diskOfferings, {
id: 'id', if (multiDisk) { // Render as multiple groups for each disk
name: 'name', var $multiDiskSelect = $('<div>').addClass('multi-disk-select-container');
desc: 'displaytext'
}, { $(multiDisk).map(function(index, disk) {
'wizard-field': 'disk-offering' var $group = $('<div>').addClass('disk-select-group');
}) var $header = $('<div>').addClass('disk-select-header').append(
); $('<div>').addClass('title').html(disk.label)
).appendTo($group);
var $checkbox = $('<input>').addClass('multi-disk-select')
.attr({
type: 'checkbox',
'disk-id': disk.id
})
.prependTo($header);
var $multiSelectContainer = $selectContainer.clone().append(
makeSelects('diskofferingid.' + disk.id, args.data.diskOfferings, {
id: 'id',
name: 'name',
desc: 'displaytext'
}, {
'wizard-field': 'disk-offering'
})
).appendTo($group).addClass('multi-disk');
$group.appendTo($multiDiskSelect);
// Show-hide disk group selects
$checkbox.click(function() {
$group.toggleClass('selected');
$group.find('.select:first input[type=radio]').click();
if (!$multiDiskSelect.find('input[type=checkbox]:checked').size()) {
$step.find('.no-thanks input[type=radio]').click();
} else {
$step.find('.no-thanks input[type=radio]').attr('checked', false);
}
});
// Add custom disk size box
$step.find('.section.custom-size').clone().hide().appendTo($group);
});
$multiDiskSelect.insertAfter($selectContainer);
$selectContainer.hide();
// Fix issue with containers always showing after reload
$multiDiskSelect.find('.select-container').attr('style', null);
} else {
$selectContainer.show();
$step.find('.content .select-container').append(
makeSelects('diskofferingid', args.data.diskOfferings, {
id: 'id',
name: 'name',
desc: 'displaytext'
}, {
'wizard-field': 'disk-offering'
})
);
}
$step.find('input[type=radio]').bind('change', function() { $step.find('input[type=radio]').bind('change', function() {
var $target = $(this); var $target = $(this);
@ -516,53 +572,73 @@
var item = $.grep(args.data.diskOfferings, function(elem) { var item = $.grep(args.data.diskOfferings, function(elem) {
return elem.id == val; return elem.id == val;
})[0]; })[0];
var isMultiDisk = $step.find('.multi-disk-select').size();
// Uncheck any multi-select groups
if ($target.closest('.no-thanks').size() && isMultiDisk) {
$step.find('.disk-select-group input[type=checkbox]:checked').click();
$(this).attr('checked', true);
return true;
}
if (!item) { if (!item) {
// handle removal of custom size controls if (isMultiDisk) {
$step.find('.section.custom-size').hide(); $(this).closest('.disk-select-group .section.custom-size').hide();
$step.removeClass('custom-disk-size'); $(this).closest('.disk-select-group').removeClass('custom-size');
} else {
// handle removal of custom IOPS controls // handle removal of custom size controls
$step.removeClass('custom-iops-do'); $step.find('.section.custom-size').hide();
$step.removeClass('custom-disk-size');
// handle removal of custom IOPS controls
$step.removeClass('custom-iops-do');
}
return true; return true;
} }
var custom = item[args.customFlag]; var custom = item[args.customFlag];
$step.find('.custom-size-label').remove(); if (!isMultiDisk) $step.find('.custom-size-label').remove();
if (custom) { if (custom && !isMultiDisk) {
$target.parent().find('.name') $target.parent().find('.name')
.append(
$('<span>').addClass('custom-size-label')
.append(': ')
.append( .append(
$('<span>').addClass('custom-size-label') $('<span>').addClass('custom-disk-size').html(
.append(': ') $step.find('.custom-size input[name=size]').val()
.append( )
$('<span>').addClass('custom-disk-size').html( )
$step.find('.custom-size input[name=size]').val() .append(' GB')
)
)
.append(' GB')
); );
$target.parent().find('.select-desc .desc') $target.parent().find('.select-desc .desc')
.append(
$('<span>').addClass('custom-size-label')
.append(', ')
.append( .append(
$('<span>').addClass('custom-size-label') $('<span>').addClass('custom-disk-size').html(
.append(', ') $step.find('.custom-size input[name=size]').val()
.append( )
$('<span>').addClass('custom-disk-size').html( )
$step.find('.custom-size input[name=size]').val() .append(' GB')
)
)
.append(' GB')
); );
$step.find('.section.custom-size').show(); $step.find('.section.custom-size').show();
$step.addClass('custom-disk-size'); $step.addClass('custom-disk-size');
$target.closest('.select-container').scrollTop( $target.closest('.select-container').scrollTop(
$target.position().top $target.position().top
); );
} else if (custom && isMultiDisk) {
$(this).closest('.disk-select-group').addClass('custom-size');
} else { } else {
$step.find('.section.custom-size').hide(); if (isMultiDisk) {
$step.removeClass('custom-disk-size'); $(this).closest('.disk-select-group').removeClass('custom-size');
} else {
$step.find('.section.custom-size').hide();
$step.removeClass('custom-disk-size');
}
} }
var customIops = item[args.customIopsDoFlag]; var customIops = item[args.customIopsDoFlag];
@ -1118,7 +1194,7 @@
$wizard.find('.tab-view').tabs(); $wizard.find('.tab-view').tabs();
$wizard.find('.slider').each(function() { $wizard.find('.slider').each(function() {
var $slider = $(this); var $slider = $(this);
$slider.slider({ $slider.slider({
min: minCustomDiskSize, min: minCustomDiskSize,
max: maxCustomDiskSize, max: maxCustomDiskSize,