diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 993673bbd71..c7e84e5b1bc 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -6109,6 +6109,10 @@ label.error { color: #000000; } +.multi-wizard.instance-wizard .select-network .select.advanced .secondary-input { + height: 73px; +} + .multi-wizard.instance-wizard .select-network .select .secondary-input input { margin: 0 !important; padding: 0 !important; @@ -6130,10 +6134,54 @@ label.error { width: 100%; float: left; padding: 0; + position: relative; +} + +.multi-wizard.instance-wizard .select-network .select-container .select.advanced { + height: 74px; +} + +.multi-wizard.instance-wizard .select-network .select .advanced-options { + background: url(../images/sprites.png) -7px -795px; + width: 20px; + height: 20px; + float: right; + cursor: pointer; + margin-top: 15px; + margin-right: 13px; +} + +.multi-wizard.instance-wizard .select-network .select .advanced-options:hover, +.multi-wizard.instance-wizard .select-network .select.advanced .advanced-options { + background: url(../images/sprites.png) -32px -795px; +} + +.multi-wizard.instance-wizard .select-network .select .specify-ip { + display: none; + position: absolute; + top: 45px; + left: 0px; + width: 100%; +} + +.multi-wizard.instance-wizard .select-network .select.advanced .specify-ip { + display: block; +} + +.multi-wizard.instance-wizard .select-network .select.advanced .specify-ip input { + margin: 0px 0 0 15px; } .multi-wizard.instance-wizard .select-network .select-container .select input { margin: 21px 15px 0px; + float: left; +} + +.multi-wizard.instance-wizard .select-network .select-container .select label { + float: left; + font-size: 11px; + margin: 4px 0 0 42px; + color: #4E6B82; } .multi-wizard.instance-wizard .select-network .select-vpc { diff --git a/ui/images/sprites.png b/ui/images/sprites.png index 778eda23fd0..84d354606cc 100644 Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js index d5203c84d9c..ed044a5de2a 100644 --- a/ui/scripts/ui-custom/instanceWizard.js +++ b/ui/scripts/ui-custom/instanceWizard.js @@ -45,6 +45,19 @@ var data = cloudStack.serializeForm($form); var $wizardLoading = $('
').addClass('loading-overlay').appendTo($wizard).css('z-index', '10000'); + // Pass network IPs + data['my-network-ips'] = []; + $form.find('.my-networks .select .specify-ip input[type=text]').each(function() { + var $input = $(this); + + if (!$input.closest('.select').find('input[type=checkbox]').is(':checked')) return true; + + data['my-network-ips'].push( + $input.closest('.select').hasClass('advanced') ? + $input.val() : null + ); + }); + args.action({ // Populate data context: context, @@ -770,6 +783,21 @@ }) ); + // Add IP/advanced option fields + $step.find('.my-networks .select-container .select').each(function () { + var $select = $(this); + var $advancedLink = $('
').addClass('advanced-options'); + var $specifyIpField = $('
').addClass('specify-ip').append( + $('