From 5cb356024f9ff393a78b596315ab8e7130cd670d Mon Sep 17 00:00:00 2001 From: Brian Federle Date: Fri, 3 Aug 2012 11:21:48 -0700 Subject: [PATCH] CS-15802: Add VPC filter to instance wizard network select Adds drop-down select to filter networks by VPC. -If no VPC is selected, only show non-VPC isolated networks -If VPC is selected, show tiers from specified VPC. Note that only one tier/network can be checked at a time in this mode, and 'add network' text field is hidden --- ui/scripts/instanceWizard.js | 38 +++++++++-- ui/scripts/ui-custom/instanceWizard.js | 91 +++++++++++++++++++++++++- 2 files changed, 122 insertions(+), 7 deletions(-) diff --git a/ui/scripts/instanceWizard.js b/ui/scripts/instanceWizard.js index 05a561ec57c..8265d0c83e1 100644 --- a/ui/scripts/instanceWizard.js +++ b/ui/scripts/instanceWizard.js @@ -16,7 +16,7 @@ // under the License. (function($, cloudStack) { - var zoneObjs, hypervisorObjs, featuredTemplateObjs, communityTemplateObjs, myTemplateObjs, featuredIsoObjs, community + var zoneObjs, hypervisorObjs, featuredTemplateObjs, communityTemplateObjs, myTemplateObjs, featuredIsoObjs, community; var selectedZoneObj, selectedTemplateObj, selectedHypervisor, selectedDiskOfferingObj; var step5ContainerType = 'nothing-to-select'; //'nothing-to-select', 'select-network', 'select-security-group' @@ -24,6 +24,17 @@ maxDiskOfferingSize: function() { return g_capabilities.customdiskofferingmaxsize; }, + + // Called in networks list, when VPC drop-down is changed + // -- if vpcID given, return true if in network specified by vpcID + // -- if vpcID == -1, return true if network is not associated with a VPC + vpcFilter: function(data, vpcID) { + return vpcID != -1? + data.vpcid == vpcID : + !data.vpcid; + }, + + // Data providers for each wizard step steps: [ // Step 1: Setup function(args) { @@ -308,11 +319,23 @@ networkData.account = g_account; } - var networkObjs; + var networkObjs, vpcObjs; + + // Get VPCs + $.ajax({ + url: createURL('listVPCs'), + data: isDomainAdmin() ? + { account: args.context.users[0].account, domainid: args.context.users[0].domainid } : + { listAll: true }, + async: false, + success: function(json) { + vpcObjs = json.listvpcsresponse.vpc ? json.listvpcsresponse.vpc : []; + } + }); + $.ajax({ url: createURL('listNetworks'), data: networkData, - dataType: "json", async: false, success: function(json) { networkObjs = json.listnetworksresponse.network ? json.listnetworksresponse.network : []; @@ -344,7 +367,8 @@ myNetworks: [], //not used any more sharedNetworks: networkObjs, securityGroups: [], - networkOfferings: networkOfferingObjs + networkOfferings: networkOfferingObjs, + vpcs: vpcObjs } }); } @@ -377,7 +401,8 @@ myNetworks: [], //not used any more sharedNetworks: [], securityGroups: securityGroupArray, - networkOfferings: [] + networkOfferings: [], + vpcs: [] } }); } @@ -389,7 +414,8 @@ myNetworks: [], //not used any more sharedNetworks: [], securityGroups: [], - networkOfferings: [] + networkOfferings: [], + vpcs: [] } }); } diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js index 1e8dca9bca1..8415fa933f6 100644 --- a/ui/scripts/ui-custom/instanceWizard.js +++ b/ui/scripts/ui-custom/instanceWizard.js @@ -108,6 +108,14 @@ .click(function() { var $radio = $(this).closest('.select').find('input[type=radio]'); + if ($(this).attr('type') == 'checkbox') { + if ($(this).closest('.select-container').hasClass('single-select')) { + $(this).closest('.select').siblings().find('input[type=checkbox]') + .attr('checked', false); + $(this).closest('.select').find('input[type=radio]').click(); + } + } + if ($radio.is(':checked') && !$(this).is(':checked')) { if (!$radio.closest('.select').index()) { return false; @@ -126,7 +134,8 @@ $('
').addClass('select-desc') .append($('
').addClass('name').html(this[fields.name])) .append($('
').addClass('desc').html(this[fields.desc])) - ); + ) + .data('json-obj', this); $selects.append($select); @@ -145,6 +154,11 @@ if (!$checkbox.is(':checked')) { $checkbox.attr('checked', true); } + + if ($(this).closest('.select-container').hasClass('single-select')) { + $(this).closest('.select').siblings().find('input[type=checkbox]') + .attr('checked', false); + } }) .after( $('
').addClass('name').html(options.secondary.desc) @@ -486,9 +500,81 @@ // Show relevant conditional sub-step if present $step.find('.wizard-step-conditional').hide(); + // Filter network list by VPC ID + var filterNetworkList = function(vpcID) { + var $selects = $step.find('.my-networks .select-container .select'); + var $visibleSelects = $($.grep($selects, function(select) { + var $select = $(select); + + return args.vpcFilter($select.data('json-obj'), vpcID); + })); + var $addNetworkForm = $step.find('.select.new-network'); + var $addNewNetworkCheck = $addNetworkForm.find('input[name=new-network]'); + + // VPC networks cannot be created via instance wizard + if (vpcID != -1) { + $step.find('.my-networks .select-container').addClass('single-select'); + $addNetworkForm.hide(); + + if ($addNewNetworkCheck.is(':checked')) { + $addNewNetworkCheck.click(); + $addNewNetworkCheck.attr('checked', false); + } + } else { + $step.find('.my-networks .select-container').removeClass('single-select'); + $addNetworkForm.show(); + } + + $selects.find('input[type=checkbox]').attr('checked', false); + $selects.hide(); + $visibleSelects.show(); + + // Select first visible item by default + $visibleSelects.filter(':first') + .find('input[type=radio]') + .click(); + + cloudStack.evenOdd($visibleSelects, 'div.select', { + even: function($elem) { + $elem.removeClass('odd'); + $elem.addClass('even'); + }, + odd: function($elem) { + $elem.removeClass('even'); + $elem.addClass('odd'); + } + }); + }; + + var $vpcSelect = $step.find('select[name=vpc-filter]'); + + $vpcSelect.unbind('change'); + $vpcSelect.change(function() { + filterNetworkList($vpcSelect.val()); + }); + return { response: { success: function(args) { + var vpcs = args.data.vpcs; + + // Populate VPC drop-down + $vpcSelect.html(''); + $(vpcs).map(function(index, vpc) { + var $option = $('