Updated Branches: refs/heads/vpc 20b079075 -> 5cb356024
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 Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/5cb35602 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/5cb35602 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/5cb35602 Branch: refs/heads/vpc Commit: 5cb356024f9ff393a78b596315ab8e7130cd670d Parents: 20b0790 Author: Brian Federle <[email protected]> Authored: Fri Aug 3 11:21:48 2012 -0700 Committer: Brian Federle <[email protected]> Committed: Fri Aug 3 11:42:40 2012 -0700 ---------------------------------------------------------------------- ui/scripts/instanceWizard.js | 38 +++++++++-- ui/scripts/ui-custom/instanceWizard.js | 91 ++++++++++++++++++++++++++- 2 files changed, 122 insertions(+), 7 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/5cb35602/ui/scripts/instanceWizard.js ---------------------------------------------------------------------- diff --git a/ui/scripts/instanceWizard.js b/ui/scripts/instanceWizard.js index 05a561e..8265d0c 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: [] } }); } http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/5cb35602/ui/scripts/ui-custom/instanceWizard.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/instanceWizard.js b/ui/scripts/ui-custom/instanceWizard.js index 1e8dca9..8415fa9 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 @@ $('<div>').addClass('select-desc') .append($('<div>').addClass('name').html(this[fields.name])) .append($('<div>').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( $('<div>').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 = $('<option>'); + var id = vpc.id; + var description = vpc.name; + + $option.attr('value', id); + $option.html(description); + $option.appendTo($vpcSelect); + }); + + // 'No VPC' option + $('<option>').attr('value', '-1').html('None').prependTo($vpcSelect); + + $vpcSelect.val(-1); + // Populate network offering drop-down $(args.data.networkOfferings).each(function() { $('<option>') @@ -523,6 +609,9 @@ }) ); + // Show non-VPC networks by default + filterNetworkList(-1); + // Security groups (alt. page) $step.find('.security-groups .select-container').append( makeSelects('security-groups', args.data.securityGroups, {
