mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-02 20:02:29 +01:00
CLOUDSTACK-4758: Add 'root disk size' field
Add 'root disk size' slider to instance wizard UI, under select template/iso, if the selected template's size is able to be customized.
This commit is contained in:
Brian Federle
parent
5795664bd2
commit
43b18025e3
@ -14,6 +14,7 @@
|
||||
# KIND, either express or implied. See the License for the
|
||||
# specific language governing permissions and limitations
|
||||
# under the License.
|
||||
label.root.disk.size=Root disk size
|
||||
label.s3.nfs.server=S3 NFS Server
|
||||
label.s3.nfs.path=S3 NFS Path
|
||||
label.delete.events=Delete events
|
||||
|
||||
@ -5977,11 +5977,11 @@ label.error {
|
||||
margin-top: 9px !important;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering.required.custom-disk-size .select-container {
|
||||
.multi-wizard.instance-wizard .custom-disk-size .select-container {
|
||||
height: 279px;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering.custom-disk-size .select-container {
|
||||
.multi-wizard.instance-wizard .custom-disk-size .select-container {
|
||||
height: 213px;
|
||||
margin: -7px 6px 0 8px;
|
||||
/*+border-radius:6px;*/
|
||||
@ -5992,21 +5992,21 @@ label.error {
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering .content .section input {
|
||||
.multi-wizard.instance-wizard .content .section input {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering .content .section input[type=radio] {
|
||||
.multi-wizard.instance-wizard .content .section input[type=radio] {
|
||||
margin: 8px 2px 0 17px;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering .content .section label {
|
||||
.multi-wizard.instance-wizard .content .section label {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 10px 7px 7px;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering .content .section label.size {
|
||||
.multi-wizard.instance-wizard .content .section label.size {
|
||||
color: #647A8E;
|
||||
font-weight: bold;
|
||||
/*+text-shadow:0px 1px 1px #FFFFFF;*/
|
||||
@ -6016,21 +6016,24 @@ label.error {
|
||||
text-shadow: 0px 1px 1px #FFFFFF;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering .content .section.custom-size {
|
||||
.multi-wizard.instance-wizard .section.custom-size {
|
||||
position: relative;
|
||||
background: white;
|
||||
padding: 7px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering .content .section.custom-size input[type=radio] {
|
||||
.multi-wizard.instance-wizard .section.custom-size input[type=radio] {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering .content .section.custom-size input[type=text] {
|
||||
.multi-wizard.instance-wizard .section.custom-size input[type=text] {
|
||||
float: left;
|
||||
width: 28px;
|
||||
margin: 6px -1px 0 8px;
|
||||
}
|
||||
|
||||
.multi-wizard.instance-wizard .data-disk-offering .content .section.custom-size label.error {
|
||||
.multi-wizard.instance-wizard .section.custom-size label.error {
|
||||
position: absolute;
|
||||
top: 29px;
|
||||
left: 242px;
|
||||
|
||||
@ -25,6 +25,7 @@ under the License.
|
||||
<% long now = System.currentTimeMillis(); %>
|
||||
<script language="javascript">
|
||||
dictionary = {
|
||||
'label.root.disk.size': '<fmt:message key="label.root.disk.size" />',
|
||||
'label.s3.nfs.path': '<fmt:message key="label.s3.nfs.path" />',
|
||||
'label.s3.nfs.server': '<fmt:message key="label.s3.nfs.server" />',
|
||||
'label.delete.events': '<fmt:message key="label.delete.events" />',
|
||||
|
||||
13
ui/index.jsp
13
ui/index.jsp
@ -162,6 +162,19 @@
|
||||
<div class="select-container">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom size slider -->
|
||||
<div class="section custom-size">
|
||||
<label><fmt:message key="label.root.disk.size"/></label>
|
||||
|
||||
<!-- Slider -->
|
||||
<label class="size">1 GB</label>
|
||||
<div class="slider custom-size"></div>
|
||||
<label class="size max"><span></span> GB</label>
|
||||
|
||||
<input type="text" class="required digits" name="root-size" value="1" />
|
||||
<label class="size">GB</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -237,7 +237,8 @@
|
||||
data: {
|
||||
templates: templatesObj,
|
||||
hypervisors: hypervisorObjs
|
||||
}
|
||||
},
|
||||
customFlag: 'isdynamicallyscalable', // Field determines if custom slider is shown
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -267,6 +267,8 @@
|
||||
},
|
||||
|
||||
'select-iso': function($step, formData) {
|
||||
$step.find('.section.custom-size').hide();
|
||||
|
||||
var originalValues = function(formData) {
|
||||
var $inputs = $step.find('.wizard-step-conditional:visible')
|
||||
.find('input[type=radio]');
|
||||
@ -288,7 +290,7 @@
|
||||
|
||||
return {
|
||||
response: {
|
||||
success: function(args) {
|
||||
success: function(args) {
|
||||
if (formData['select-template']) {
|
||||
$step.find('.wizard-step-conditional').filter(function() {
|
||||
return $(this).hasClass(formData['select-template']);
|
||||
@ -380,6 +382,73 @@
|
||||
});
|
||||
|
||||
originalValues(formData);
|
||||
|
||||
$step.find('input[type=radio]').bind('change', function() {
|
||||
var $target = $(this);
|
||||
var val = $target.val();
|
||||
var item;
|
||||
|
||||
$.map(args.data.templates, function(v, k) {
|
||||
if (!v) {
|
||||
return true;
|
||||
}
|
||||
|
||||
var target = $.grep(v, function(elem) {
|
||||
return elem.id == val;
|
||||
});
|
||||
|
||||
if (target.length) {
|
||||
item = target[0];
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
if (!item) return true;
|
||||
|
||||
var custom = item[args.customFlag];
|
||||
|
||||
$step.find('.custom-size-label').remove();
|
||||
|
||||
if (custom) {
|
||||
$target.parent().find('.name')
|
||||
.append(
|
||||
$('<span>').addClass('custom-size-label')
|
||||
.append(': ')
|
||||
.append(
|
||||
$('<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-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 {
|
||||
$step.find('.section.custom-size').hide();
|
||||
$step.removeClass('custom-disk-size');
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
$step.find('input[type=radio]:first').trigger('change');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -743,17 +812,17 @@
|
||||
}, {
|
||||
type: 'checkbox',
|
||||
'wizard-field': 'security-groups'
|
||||
});
|
||||
});
|
||||
$step.find('.security-groups .select-container').append($sgSelects);
|
||||
|
||||
|
||||
//If there is only one security group and the only one is 'default', make it selected by default
|
||||
if ($sgSelects.length == 1) {
|
||||
var $firstCheckbox = $sgSelects.eq(0);
|
||||
if ($firstCheckbox.find('div .name').text() == 'default') {
|
||||
$firstCheckbox.find('input:checkbox').click();
|
||||
}
|
||||
}
|
||||
|
||||
var $firstCheckbox = $sgSelects.eq(0);
|
||||
if ($firstCheckbox.find('div .name').text() == 'default') {
|
||||
$firstCheckbox.find('input:checkbox').click();
|
||||
}
|
||||
}
|
||||
|
||||
originalValues(formData);
|
||||
checkShowAddNetwork($newNetwork);
|
||||
}
|
||||
@ -1014,20 +1083,24 @@
|
||||
// Setup tabs and slider
|
||||
$wizard.find('.section.custom-size .size.max span').html(maxCustomDiskSize);
|
||||
$wizard.find('.tab-view').tabs();
|
||||
$wizard.find('.slider').slider({
|
||||
min: 1,
|
||||
max: maxCustomDiskSize,
|
||||
start: function(event) {
|
||||
$wizard.find('div.data-disk-offering div.custom-size input[type=radio]').click();
|
||||
},
|
||||
slide: function(event, ui) {
|
||||
$wizard.find('div.data-disk-offering div.custom-size input[type=text]').val(
|
||||
ui.value
|
||||
);
|
||||
$wizard.find('div.data-disk-offering span.custom-disk-size').html(
|
||||
ui.value
|
||||
);
|
||||
}
|
||||
$wizard.find('.slider').each(function() {
|
||||
var $slider = $(this);
|
||||
|
||||
$slider.slider({
|
||||
min: 1,
|
||||
max: maxCustomDiskSize,
|
||||
start: function(event) {
|
||||
$slider.closest('.section.custom-size').find('input[type=radio]').click();
|
||||
},
|
||||
slide: function(event, ui) {
|
||||
$slider.closest('.section.custom-size').find('input[type=text]').val(
|
||||
ui.value
|
||||
);
|
||||
$slider.closest('.step').find('span.custom-disk-size').html(
|
||||
ui.value
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$wizard.find('div.data-disk-offering div.custom-size input[type=text]').bind('change', function() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user