Updated Branches: refs/heads/vpc ccac50594 -> 42a9fd641
VPC UI: New ACL flow -Remove the ACL action from the tier chart item -Adds an ACL overview list view under the VPC configure menu which displays each tier and their total # of ACLs. -Add ACL edit to tier detail view - (misc) Also add IP address tab to tier detail view Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/42a9fd64 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/42a9fd64 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/42a9fd64 Branch: refs/heads/vpc Commit: 42a9fd641e819eef6f8bd91a668853467e121b84 Parents: ccac505 Author: Brian Federle <[email protected]> Authored: Fri Aug 10 12:58:17 2012 -0700 Committer: Brian Federle <[email protected]> Committed: Fri Aug 10 13:04:20 2012 -0700 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 37 ++++++ ui/scripts/ui-custom/vpc.js | 144 ++++++++++++++++++++---- ui/scripts/ui/widgets/multiEdit.js | 1 + ui/scripts/vpc.js | 190 ++++++++++++++++++++++++++---- 4 files changed, 324 insertions(+), 48 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/42a9fd64/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index f7d7b3d..ac27ff5 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -9698,6 +9698,43 @@ div.panel.ui-dialog div.list-view div.fixed-header { max-width: 184px !important; } +div.ui-dialog div.acl div.multi-edit table.multi-edit thead tr th, +div.ui-dialog div.acl div.multi-edit table.multi-edit tbody tr td { + min-width: 75px; +} + +div.ui-dialog div.acl div.multi-edit div.data div.data-body div.data-item table tbody tr td { + width: 100%; + min-width: 77px; +} + +.detail-view .acl .multi-edit { +} + +.detail-view .acl .multi-edit th, +.detail-view .acl .multi-edit td { + padding-right: 0px !important; + min-width: 25px !important; +} + +.detail-view .acl .multi-edit th { + font-size: 10px; +} + +.detail-view .acl .multi-edit input { + width: 50px; +} + +.detail-view .acl .multi-edit .add-vm { + width: 51px; + text-indent: 0px; + padding-right: 0px; +} + +.detail-view .acl .multi-edit td.multi-actions { + width: 65px; +} + /*Autoscaler*/ .ui-dialog div.autoscaler { overflow: auto; http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/42a9fd64/ui/scripts/ui-custom/vpc.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/vpc.js b/ui/scripts/ui-custom/vpc.js index f4bd5e0..4e43280 100644 --- a/ui/scripts/ui-custom/vpc.js +++ b/ui/scripts/ui-custom/vpc.js @@ -16,21 +16,53 @@ // under the License. (function($, cloudStack) { var elems = { + aclDialog: function(args) { + var isDialog = args.isDialog; + var actionArgs = args.actionArgs; + var context = args.context; + var $acl = $('<div>').addClass('acl').multiEdit( + $.extend(true, {}, actionArgs.multiEdit, { + context: context + }) + ); + + // Show ACL dialog + if (isDialog) { + $acl.dialog({ + title: 'Configure ACL', + dialogClass: 'configure-acl', + width: 900, + height: 600, + buttons: { + 'Done': function() { + $(':ui-dialog').remove(); + $('.overlay').remove(); + } + } + }); + } + + return $acl; + }, vpcConfigureTooltip: function(args) { + var context = args.context; var $browser = args.$browser; var $chart = args.$chart; var ipAddresses = args.ipAddresses; + var acl = args.acl; var gateways = args.gateways; var siteToSiteVPN = args.siteToSiteVPN; var links = { 'ip-addresses': 'IP Addresses', 'gateways': 'Private Gateway', - 'site-to-site-vpn': 'Site-to-site VPN' + 'site-to-site-vpn': 'Site-to-site VPN', + 'network-acls': 'ACLs' }; var $links = $('<ul>').addClass('links'); var $tooltip = $('<div>').addClass('vpc-configure-tooltip').append( $('<div>').addClass('arrow') ); + var tierDetailView = args.tierDetailView; // Make links $.map(links, function(label, id) { @@ -43,6 +75,37 @@ // Link event $link.click(function() { switch (id) { + case 'network-acls': + $browser.cloudBrowser('addPanel', { + title: 'Network ACLs', + maximizeIfSelected: true, + complete: function($panel) { + $panel.listView( + $.extend(true, {}, acl.listView, { + listView: { + actions: { + add: { + label: 'Add network ACL', + action: { + custom: function() { + elems.aclDialog({ + isDialog: true, + actionArgs: acl, + context: context + }); + } + } + } + }, + detailView: tierDetailView + } + }), + { context: acl.context } + ); + } + }); + break; + case 'ip-addresses': $browser.cloudBrowser('addPanel', { title: 'IP Addresses', @@ -200,24 +263,30 @@ return $tooltip; }, vpcConfigureArea: function(args) { + var context = args.context; var $browser = args.$browser; var $chart = args.$chart; var ipAddresses = args.ipAddresses; + var acl = args.acl; var gateways = args.gateways; var siteToSiteVPN = args.siteToSiteVPN; var $config = $('<div>').addClass('config-area'); var $configIcon = $('<span>').addClass('icon').html(' '); - + var tierDetailView = args.tierDetailView; + $config.append($configIcon); // Tooltip event $configIcon.mouseover(function() { var $tooltip = elems.vpcConfigureTooltip({ + context: context, $browser: $browser, $chart: $chart, ipAddresses: ipAddresses, gateways: gateways, - siteToSiteVPN: siteToSiteVPN + acl: acl, + siteToSiteVPN: siteToSiteVPN, + tierDetailView: tierDetailView }); // Make sure tooltip is center aligned with icon @@ -240,6 +309,8 @@ return $router; }, tier: function(args) { + var ipAddresses = args.ipAddresses; + var acl = args.acl; var name = args.name; var cidr = args.cidr; var context = args.context; @@ -316,7 +387,7 @@ if (isPlaceholder) { $tier.addClass('placeholder'); $title.html('Create Tier'); - } else { + } else { $title.html( cloudStack.concat(name, 8) ); @@ -385,6 +456,7 @@ }, chart: function(args) { var $browser = args.$browser; + var acl = args.acl; var ipAddresses = args.ipAddresses; var gateways = args.gateways; var siteToSiteVPN = args.siteToSiteVPN; @@ -404,11 +476,14 @@ ) .append( elems.vpcConfigureArea({ + context: context, $browser: $browser, $chart: $chart, ipAddresses: $.extend(ipAddresses, {context: context}), gateways: $.extend(gateways, {context: context}), - siteToSiteVPN: $.extend(siteToSiteVPN, {context: context}) + siteToSiteVPN: $.extend(siteToSiteVPN, {context: context}), + acl: $.extend(acl, {context: context}), + tierDetailView: tierDetailView }) ); @@ -418,9 +493,11 @@ } addTierDialog({ + ipAddresses: ipAddresses, $browser: $browser, tierDetailView: tierDetailView, $tiers: $tiers, + acl: acl, context: context, actions: actions, vmListView: vmListView, @@ -433,6 +510,8 @@ if (tiers != null && tiers.length > 0) { $(tiers).map(function(index, tier) { var $tier = elems.tier({ + ipAddresses: ipAddresses, + acl: acl, $browser: $browser, detailView: tierDetailView, name: tier.name, @@ -596,22 +675,10 @@ }); break; case 'acl': - // Show ACL dialog - $('<div>').addClass('acl').multiEdit( - $.extend(true, {}, actionArgs.multiEdit, { - context: context - }) - ).dialog({ - title: 'Configure ACL for tier: ' + $tier.find('.title').attr('title'), - dialogClass: 'configure-acl', - width: 900, - height: 600, - buttons: { - 'Done': function() { - $(':ui-dialog').remove(); - $('.overlay').remove(); - } - } + elems.aclDialog({ + isDialog: true, + actionArgs: actionArgs, + context: context }).closest('.ui-dialog').overlay(); break; default: @@ -629,6 +696,8 @@ // Appends a new tier to chart var addNewTier = function(args) { + var ipAddresses = args.ipAddresses; + var acl = args.acl; var actions = args.actions; var vmListView = args.vmListView; var actionPreFilter = args.actionPreFilter; @@ -636,12 +705,14 @@ var $browser = args.$browser; var tierDetailView = args.tierDetailView; var tier = $.extend(args.tier, { + ipAddresses: ipAddresses, $browser: $browser, detailView: tierDetailView, context: context, vmListView: vmListView, actions: actions, actionPreFilter: actionPreFilter, + acl: acl, virtualMachines: [] }); var $tiers = args.$tiers; @@ -656,6 +727,7 @@ // Renders the add tier form, in a dialog var addTierDialog = function(args) { + var ipAddresses = args.ipAddresses; var actions = args.actions; var context = args.context; var vmListView = args.vmListView; @@ -663,6 +735,7 @@ var $tiers = args.$tiers; var $browser = args.$browser; var tierDetailView = args.tierDetailView; + var acl = args.acl; cloudStack.dialog.createForm({ context: context, @@ -686,12 +759,14 @@ function(args) { $loading.remove(); addNewTier({ + ipAddresses: ipAddresses, $browser: $browser, tierDetailView: tierDetailView, context: $.extend(true, {}, context, { networks: [tier] }), tier: tier, + acl: acl, $tiers: $tiers, actions: actions, actionPreFilter: actionPreFilter, @@ -722,6 +797,7 @@ var tierArgs = args.tiers; var ipAddresses = args.ipAddresses; var gateways = args.gateways; + var acl = args.acl; var siteToSiteVPN = args.siteToSiteVPN; return function(args) { @@ -743,12 +819,36 @@ context: context, response: { success: function(args) { + // Setup detail view tabs + var tierDetailView = $.extend(true, {}, tierArgs.detailView, { + tabs: { + acl: { + custom: function(args) { + var $acl = elems.aclDialog({ + isDialog: false, + actionArgs: acl, + context: args.context + }); + + return $acl; + } + }, + ipAddresses: { + custom: function(args) { + return $('<div>').listView(ipAddresses.listView(), + {context: args.context}); + } + } + } + }); + var tiers = args.tiers; var $chart = elems.chart({ $browser: $browser, ipAddresses: ipAddresses, gateways: gateways, - tierDetailView: tierArgs.detailView, + acl: acl, + tierDetailView: tierDetailView, siteToSiteVPN: siteToSiteVPN, vmListView: vmListView, context: context, http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/42a9fd64/ui/scripts/ui/widgets/multiEdit.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/multiEdit.js b/ui/scripts/ui/widgets/multiEdit.js index 870d085..cece45e 100644 --- a/ui/scripts/ui/widgets/multiEdit.js +++ b/ui/scripts/ui/widgets/multiEdit.js @@ -893,6 +893,7 @@ context: context, data: data, itemData: itemData, + $multi: $multi, response: { success: function(successArgs) { var notification = successArgs ? successArgs.notification : null; http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/42a9fd64/ui/scripts/vpc.js ---------------------------------------------------------------------- diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js index a9f01ab..234818e 100644 --- a/ui/scripts/vpc.js +++ b/ui/scripts/vpc.js @@ -65,6 +65,42 @@ }, 'startport': { edit: true, label: 'label.start.port' }, 'endport': { edit: true, label: 'label.end.port' }, + 'networkid': { + label: 'Select Tier', + select: function(args) { + var data = { + listAll: true, + vpcid: args.context.vpc[0].id + }; + + // Only show selected tier, if viewing from detail view + if (args.context.networks && + args.context.networks[0] && + args.context.networks[0].vpcid) { + $.extend(data, { + id: args.context.networks[0].id + }); + } + + // Ajax Call to display the Tiers + $.ajax({ + url: createURL('listNetworks'), + data: data, + success: function(json) { + var networks = json.listnetworksresponse.network; + + args.response.success({ + data: $(networks).map(function(index, network) { + return { + name: network.id, + description: network.name + }; + }) + }); + } + }); + } + }, 'icmptype': { edit: true, label: 'ICMP.type', isDisabled: true }, 'icmpcode': { edit: true, label: 'ICMP.code', isDisabled: true }, 'traffictype' : { @@ -89,16 +125,31 @@ add: { label: 'Add', action: function(args) { + var $multi = args.$multi; + $.ajax({ url: createURL('createNetworkACL'), data: $.extend(args.data, { - networkid: args.context.networks[0].id + networkid: args.data.networkid }), dataType: 'json', success: function(data) { args.response.success({ _custom: { - jobId: data.createnetworkaclresponse.jobid + jobId: data.createnetworkaclresponse.jobid, + getUpdatedItem: function(json) { + var networkName = $multi.find('select[name=networkid] option[value=' + args.data.networkid + ']').html(); + var data = $.extend(json.queryasyncjobresultresponse.jobresult.networkacl, { + networkid: networkName + }); + var aclRules = $multi.data('acl-rules'); + + aclRules.push(data); + $multi.data('acl-rules', aclRules); + $(window).trigger('cloudStack.fullRefresh'); + + return data; + } }, notification: { label: 'Add ACL', @@ -127,7 +178,10 @@ var jobID = data.deletenetworkaclresponse.jobid; args.response.success({ _custom: { - jobId: jobID + jobId: jobID, + getUpdatedItem: function() { + $(window).trigger('cloudStack.fullRefresh'); + } }, notification: { label: 'Remove ACL', @@ -143,23 +197,42 @@ } }, dataProvider: function(args) { - $.ajax({ - url: createURL('listNetworkACLs'), - data: { - listAll: true, - networkid: args.context.networks[0].id - }, - dataType: 'json', - async: true, - success: function(json) { - args.response.success({ - data: json.listnetworkaclsresponse.networkacl - }); - }, - error: function(XMLHttpResponse) { - args.response.error(parseXMLHttpResponse(XMLHttpResponse)); - } - }); + var $multi = args.$multi; + var data = { + vpcid: args.context.vpc[0].id, + listAll: true + }; + + if (!$multi.data('acl-rules')) { + $multi.data('acl-rules', []); + } + + if (args.context.networks && + args.context.networks[0] && + args.context.networks[0].vpcid) { + data.networkid = args.context.networks[0].id; + + $.ajax({ + url: createURL('listNetworkACLs'), + data: data, + dataType: 'json', + async: true, + success: function(json) { + args.response.success({ + data: $(json.listnetworkaclsresponse.networkacl).map(function(index, acl) { + return $.extend(acl, { + networkid: args.context.networks[0].name + }); + }) + }); + }, + error: function(XMLHttpResponse) { + args.response.error(parseXMLHttpResponse(XMLHttpResponse)); + } + }); + } else { + args.response.success({ data: $multi.data('acl-rules') }); + } } }; @@ -443,6 +516,54 @@ return cloudStack.sections.network.sections.ipAddresses; } }, + acl: { + multiEdit: aclMultiEdit, + + listView: { + listView: { + id: 'networks', + fields: { + tierName: { label: 'Tier' }, + aclTotal: { label: 'ACL Total' } + }, + dataProvider: function(args) { + $.ajax({ + url: createURL('listNetworks'), + data: { + listAll: true, + vpcid: args.context.vpc[0].id + }, + success: function(json) { + args.response.success({ + data: $.map(json.listnetworksresponse.network, function(tier) { + var aclTotal = 0; + + // Get ACL total + $.ajax({ + url: createURL('listNetworkACLs'), + async: false, + data: { + listAll: true, + networkid: tier.id + }, + success: function(json) { + aclTotal = json.listnetworkaclsresponse.networkacl ? + json.listnetworkaclsresponse.networkacl.length : 0; + } + }); + + return $.extend(tier, { + tierName: tier.name, + aclTotal: aclTotal + }); + }) + }); + } + }); + } + } + } + }, gateways: { add: { preCheck: function(args) { @@ -1433,7 +1554,7 @@ isMaximized: true, tabs: { details: { - title: 'label.tier.details', + title: 'Network Details', preFilter: function(args) { var hiddenFields = []; var zone; @@ -1575,6 +1696,22 @@ } }, + acl: { + title: 'Network ACL', + custom: function(args) { + // Widget renders ACL multi-edit, overriding this fn + return $('<div>'); + } + }, + + ipAddresses: { + title: 'label.menu.ipaddresses', + custom: function(args) { + // Widget renders IP addresses, overriding this fn + return $('<div>'); + } + }, + addloadBalancer: { title: 'label.add.load.balancer', custom: function(args) { @@ -1931,13 +2068,14 @@ poll: pollAsyncJobResult } }, - - acl: { + + // Removing ACL buttons from the tier chart + /* acl: { label: 'Configure ACL for tier', shortLabel: 'ACL', - multiEdit: aclMultiEdit - }, - + multiEdit: aclMultiEdit + }, */ + remove: { label: 'Remove tier', action: function(args) {
