mirror of https://github.com/apache/cloudstack.git
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
This commit is contained in:
Brian Federle
parent
ccac505944
commit
42a9fd641e
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -893,6 +893,7 @@
|
|||
context: context,
|
||||
data: data,
|
||||
itemData: itemData,
|
||||
$multi: $multi,
|
||||
response: {
|
||||
success: function(successArgs) {
|
||||
var notification = successArgs ? successArgs.notification : null;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue