You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bf...@apache.org on 2014/04/03 01:27:52 UTC
git commit: updated refs/heads/4.4 to 7c06ec5
Repository: cloudstack
Updated Branches:
refs/heads/4.4 eb41250a4 -> 7c06ec5bc
WIP: Instance wizard UI: Support multi-disk offerings
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.
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/7c06ec5b
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/7c06ec5b
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/7c06ec5b
Branch: refs/heads/4.4
Commit: 7c06ec5bc53491705f151a9e16ce68896fdc2b02
Parents: eb41250
Author: Brian Federle <br...@citrix.com>
Authored: Wed Apr 2 16:25:12 2014 -0700
Committer: Brian Federle <br...@citrix.com>
Committed: Wed Apr 2 16:25:12 2014 -0700
----------------------------------------------------------------------
ui/css/cloudstack3.css | 101 +++++++++++++++++--
ui/index.jsp | 2 +-
ui/scripts/instanceWizard.js | 9 +-
ui/scripts/ui-custom/instanceWizard.js | 148 +++++++++++++++++++++-------
4 files changed, 216 insertions(+), 44 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/7c06ec5b/ui/css/cloudstack3.css
----------------------------------------------------------------------
diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index bcb82d3..6602c16 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -1835,6 +1835,7 @@ div.list-view td.state.off span {
float: left;
width: 245px;
}
+
.detail-group .main-groups table td.value > span.copypasteenabledvalue {
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
@@ -1849,7 +1850,7 @@ div.list-view td.state.off span {
}
div.copypasteicon {
- background: url("../images/sprites.png") no-repeat scroll -271px -65px;
+ background: url("../images/sprites.png") no-repeat -271px -65px;
float: left;
height: 21px;
margin-left: 6px;
@@ -1858,7 +1859,7 @@ div.copypasteicon {
}
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 {
@@ -1875,7 +1876,7 @@ div.copypasteicon:hover {
}
div.copypasteicon {
- background: url("../images/sprites.png") no-repeat scroll -271px -65px;
+ background: url("../images/sprites.png") no-repeat -271px -65px;
float: left;
height: 21px;
margin-left: 6px;
@@ -1884,10 +1885,9 @@ div.copypasteicon {
}
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 {
width: 100% !important;
}
@@ -6050,6 +6050,94 @@ label.error {
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 {
height: 344px;
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;
}
-.reset .icon, .reinstall .icon {
+.reset .icon,
+.reinstall .icon {
background-position: -168px -31px;
}
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/7c06ec5b/ui/index.jsp
----------------------------------------------------------------------
diff --git a/ui/index.jsp b/ui/index.jsp
index 4910b9f..5840e71 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -250,7 +250,7 @@
</div>
<!-- Custom size slider -->
- <div class="section custom-size">
+ <div class="section custom-size custom-disk-size">
<label><fmt:message key="label.disk.size"/></label>
<!-- Slider -->
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/7c06ec5b/ui/scripts/instanceWizard.js
----------------------------------------------------------------------
diff --git a/ui/scripts/instanceWizard.js b/ui/scripts/instanceWizard.js
index c2d3030..d602074 100644
--- a/ui/scripts/instanceWizard.js
+++ b/ui/scripts/instanceWizard.js
@@ -335,7 +335,14 @@
customIopsDoFlag: 'iscustomizediops',
data: {
diskOfferings: diskOfferingObjs
- }
+ },
+ multiDisk: false
+ // multiDisk:
+ // [
+ // { id: 1, label: 'vm-disk-1' },
+ // { id: 2, label: 'vm-disk-2' },
+ // { id: 3, label: 'vm-disk-3' }
+ // ]
});
}
});
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/7c06ec5b/ui/scripts/ui-custom/instanceWizard.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js
index 1a0c323..0174cfc 100644
--- a/ui/scripts/ui-custom/instanceWizard.js
+++ b/ui/scripts/ui-custom/instanceWizard.js
@@ -491,7 +491,11 @@
return {
response: {
success: function(args) {
+ var multiDisk = args.multiDisk;
+
+ $step.find('.multi-disk-select-container').remove();
$step.removeClass('custom-disk-size');
+
if (args.required) {
$step.find('.section.no-thanks').hide();
$step.addClass('required');
@@ -500,15 +504,67 @@
$step.removeClass('required');
}
- $step.find('.content .select-container').append(
- makeSelects('diskofferingid', args.data.diskOfferings, {
- id: 'id',
- name: 'name',
- desc: 'displaytext'
- }, {
- 'wizard-field': 'disk-offering'
- })
- );
+ var $selectContainer = $step.find('.content .select-container:not(.multi-disk)');
+
+ if (multiDisk) { // Render as multiple groups for each disk
+ var $multiDiskSelect = $('<div>').addClass('multi-disk-select-container');
+
+ $(multiDisk).map(function(index, disk) {
+ 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() {
var $target = $(this);
@@ -516,53 +572,73 @@
var item = $.grep(args.data.diskOfferings, function(elem) {
return elem.id == val;
})[0];
+ var isMultiDisk = $step.find('.multi-disk-select').size();
- if (!item) {
- // handle removal of custom size controls
- $step.find('.section.custom-size').hide();
- $step.removeClass('custom-disk-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);
- // handle removal of custom IOPS controls
- $step.removeClass('custom-iops-do');
+ return true;
+ }
+ if (!item) {
+ if (isMultiDisk) {
+ $(this).closest('.disk-select-group .section.custom-size').hide();
+ $(this).closest('.disk-select-group').removeClass('custom-size');
+ } else {
+ // handle removal of custom size controls
+ $step.find('.section.custom-size').hide();
+ $step.removeClass('custom-disk-size');
+
+ // handle removal of custom IOPS controls
+ $step.removeClass('custom-iops-do');
+ }
+
return true;
}
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')
+ .append(
+ $('<span>').addClass('custom-size-label')
+ .append(': ')
.append(
- $('<span>').addClass('custom-size-label')
- .append(': ')
- .append(
- $('<span>').addClass('custom-disk-size').html(
- $step.find('.custom-size input[name=size]').val()
- )
- )
- .append(' GB')
+ $('<span>').addClass('custom-disk-size').html(
+ $step.find('.custom-size input[name=size]').val()
+ )
+ )
+ .append(' GB')
);
$target.parent().find('.select-desc .desc')
+ .append(
+ $('<span>').addClass('custom-size-label')
+ .append(', ')
.append(
- $('<span>').addClass('custom-size-label')
- .append(', ')
- .append(
- $('<span>').addClass('custom-disk-size').html(
- $step.find('.custom-size input[name=size]').val()
- )
- )
- .append(' GB')
+ $('<span>').addClass('custom-disk-size').html(
+ $step.find('.custom-size input[name=size]').val()
+ )
+ )
+ .append(' GB')
);
$step.find('.section.custom-size').show();
$step.addClass('custom-disk-size');
$target.closest('.select-container').scrollTop(
$target.position().top
);
+ } else if (custom && isMultiDisk) {
+ $(this).closest('.disk-select-group').addClass('custom-size');
} else {
- $step.find('.section.custom-size').hide();
- $step.removeClass('custom-disk-size');
+ if (isMultiDisk) {
+ $(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];
@@ -1118,7 +1194,7 @@
$wizard.find('.tab-view').tabs();
$wizard.find('.slider').each(function() {
var $slider = $(this);
-
+
$slider.slider({
min: minCustomDiskSize,
max: maxCustomDiskSize,