mirror of https://github.com/apache/cloudstack.git
Various fixes to network section
-bug 12141: Show VM details on static NAT chart -Move VPN actions from list view to detail view, to avoid excessive server calls from being made (due to needing additional calls to get VPN/network data) -Fix network action refresh for list view and detail view
This commit is contained in:
Brian Federle
parent
626efa585c
commit
6e303c10e3
|
|
@ -5691,6 +5691,35 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
|||
top: 44px;
|
||||
}
|
||||
|
||||
.network-chart li.static-nat-enabled .vmname {
|
||||
/*+placement:shift 16px 41px;*/
|
||||
position: relative;
|
||||
left: 16px;
|
||||
top: 41px;
|
||||
cursor: pointer;
|
||||
padding: 7px;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
color: #485563;
|
||||
font-weight: bold;
|
||||
/*+text-shadow:0px 1px 1px #000000;*/
|
||||
-moz-text-shadow: 0px 1px 1px #000000;
|
||||
-webkit-text-shadow: 0px 1px 1px #000000;
|
||||
-o-text-shadow: 0px 1px 1px #000000;
|
||||
text-shadow: 0px 1px 1px #000000;
|
||||
background: url(../images/bg-gradients.png) repeat-x 2px -221px;
|
||||
color: #FFFFFF;
|
||||
/*+border-radius:9px;*/
|
||||
-moz-border-radius: 9px;
|
||||
-webkit-border-radius: 9px;
|
||||
-khtml-border-radius: 9px;
|
||||
border-radius: 9px 9px 9px 9px;
|
||||
}
|
||||
|
||||
.network-chart li.static-nat-enabled .vmname:hover {
|
||||
background-position: 0px -946px;
|
||||
}
|
||||
|
||||
.network-chart li.static-nat-enabled .name {
|
||||
background: url(../images/sprites.png) no-repeat -6px -460px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -707,6 +707,7 @@
|
|||
<ul>
|
||||
<li class="static-nat-enabled">
|
||||
<div class="name"><span>Static NAT Enabled</span></div>
|
||||
<div class="vmname"></div>
|
||||
</li>
|
||||
<li class="firewall">
|
||||
<div class="name"><span>Firewall</span></div>
|
||||
|
|
|
|||
|
|
@ -707,6 +707,7 @@
|
|||
<ul>
|
||||
<li class="static-nat-enabled">
|
||||
<div class="name"><span>Static NAT Enabled</span></div>
|
||||
<div class="vmname"></div>
|
||||
</li>
|
||||
<li class="firewall">
|
||||
<div class="name"><span>Firewall</span></div>
|
||||
|
|
|
|||
|
|
@ -162,10 +162,13 @@
|
|||
_custom: {
|
||||
jobId: data.associateipaddressresponse.jobid,
|
||||
getUpdatedItem: function(data) {
|
||||
return data.queryasyncjobresultresponse.jobresult.ipaddress;
|
||||
var newIP = data.queryasyncjobresultresponse.jobresult.ipaddress;
|
||||
return $.extend(newIP, {
|
||||
state: 'Allocated'
|
||||
});
|
||||
},
|
||||
getActionFilter: function(args) {
|
||||
return ['enableStaticNAT', 'destroy'];
|
||||
getActionFilter: function() {
|
||||
return actionFilters.ipAddress;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -213,75 +216,6 @@
|
|||
poll: pollAsyncJobResult
|
||||
}
|
||||
},
|
||||
enableVPN: {
|
||||
label: 'Enable VPN',
|
||||
action: function(args) {
|
||||
$.ajax({
|
||||
url: createURL('createRemoteAccessVpn'),
|
||||
data: {
|
||||
publicipid: args.context.ipAddresses[0].id,
|
||||
domainid: args.context.ipAddresses[0].domainid
|
||||
},
|
||||
dataType: 'json',
|
||||
async: true,
|
||||
success: function(data) {
|
||||
args.response.success({
|
||||
_custom: { jobId: data.createremoteaccessvpnresponse.jobid }
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
messages: {
|
||||
confirm: function(args) {
|
||||
return 'Please confirm that you want VPN enabled for this IP address.';
|
||||
},
|
||||
notification: function(args) {
|
||||
return 'Enabled VPN';
|
||||
},
|
||||
complete: function(args) {
|
||||
return 'VPN is now enabled for IP ' + args.publicip + '.'
|
||||
+ '<br/>Your IPsec pre-shared key is:<br/>' + args.presharedkey;
|
||||
}
|
||||
},
|
||||
notification: {
|
||||
poll: pollAsyncJobResult
|
||||
}
|
||||
},
|
||||
disableVPN: {
|
||||
label: 'Disable VPN',
|
||||
action: function(args) {
|
||||
$.ajax({
|
||||
url: createURL('deleteRemoteAccessVpn'),
|
||||
data: {
|
||||
publicipid: args.context.ipAddresses[0].id,
|
||||
domainid: args.context.ipAddresses[0].domainid
|
||||
},
|
||||
dataType: 'json',
|
||||
async: true,
|
||||
success: function(data) {
|
||||
args.response.success({
|
||||
_custom: {
|
||||
getUpdatedItem: function(data) {
|
||||
|
||||
},
|
||||
jobId: data.deleteremoteaccessvpnresponse.jobid
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
messages: {
|
||||
confirm: function(args) {
|
||||
return 'Are you sure you want to disable VPN?';
|
||||
},
|
||||
notification: function(args) {
|
||||
return 'Disabled VPN';
|
||||
}
|
||||
},
|
||||
notification: {
|
||||
poll: pollAsyncJobResult
|
||||
}
|
||||
},
|
||||
enableStaticNAT: {
|
||||
label: 'Enable static NAT',
|
||||
action: {
|
||||
|
|
@ -314,7 +248,11 @@
|
|||
},
|
||||
notification: {
|
||||
poll: function(args) {
|
||||
args.complete();
|
||||
args.complete({
|
||||
data: {
|
||||
isstaticnat: true
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -332,10 +270,13 @@
|
|||
args.response.success({
|
||||
_custom: {
|
||||
jobId: data.disablestaticnatresponse.jobid,
|
||||
getUpdatedItem: function(json) {
|
||||
return $.extend(args.context.ipAddresses[0], {
|
||||
isstaticnat: false
|
||||
});
|
||||
},
|
||||
getActionFilter: function() {
|
||||
return function(args) {
|
||||
return ['enableStaticNAT'];
|
||||
};
|
||||
return actionFilters.ipAddresses;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -397,7 +338,6 @@
|
|||
}
|
||||
},
|
||||
|
||||
//dataProvider: testData.dataProvider.listView('network'),
|
||||
dataProvider: function(args) {
|
||||
var data = {
|
||||
page: args.page,
|
||||
|
|
@ -435,46 +375,9 @@
|
|||
return;
|
||||
}
|
||||
|
||||
// Get network data
|
||||
$(items).each(function() {
|
||||
var item = this;
|
||||
$.ajax({
|
||||
url: createURL('listNetworks'),
|
||||
data: {
|
||||
networkid: this.networkid
|
||||
},
|
||||
dataType: 'json',
|
||||
async: true,
|
||||
success: function(data) {
|
||||
// Get VPN data
|
||||
$.ajax({
|
||||
url: createURL('listRemoteAccessVpns'),
|
||||
data: {
|
||||
publicipid: item.id
|
||||
},
|
||||
dataType: 'json',
|
||||
async: true,
|
||||
success: function(vpnResponse) {
|
||||
var isVPNEnabled = vpnResponse.listremoteaccessvpnsresponse.count;
|
||||
if (isVPNEnabled) {
|
||||
item.vpnenabled = true;
|
||||
item.remoteaccessvpn = vpnResponse.listremoteaccessvpnsresponse.remoteaccessvpn[0];
|
||||
};
|
||||
|
||||
// Check if data retrieval complete
|
||||
item.network = data.listnetworksresponse.network[0];
|
||||
processedItems++;
|
||||
|
||||
if (processedItems == items.length) {
|
||||
args.response.success({
|
||||
actionFilter: actionFilters.ipAddress,
|
||||
data: items
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
args.response.success({
|
||||
actionFilter: actionFilters.ipAddress,
|
||||
data: items
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -484,6 +387,25 @@
|
|||
detailView: {
|
||||
name: 'IP address detail',
|
||||
tabFilter: function(args) {
|
||||
var item = args.context.ipAddresses[0];
|
||||
|
||||
// Get VPN data
|
||||
$.ajax({
|
||||
url: createURL('listRemoteAccessVpns'),
|
||||
data: {
|
||||
publicipid: item.id
|
||||
},
|
||||
dataType: 'json',
|
||||
async: false,
|
||||
success: function(vpnResponse) {
|
||||
var isVPNEnabled = vpnResponse.listremoteaccessvpnsresponse.count;
|
||||
if (isVPNEnabled) {
|
||||
item.vpnenabled = true;
|
||||
item.remoteaccessvpn = vpnResponse.listremoteaccessvpnsresponse.remoteaccessvpn[0];
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var disabledTabs = [];
|
||||
var ipAddress = args.context.ipAddresses[0];
|
||||
|
||||
|
|
@ -508,7 +430,18 @@
|
|||
async: true,
|
||||
success: function(data) {
|
||||
args.response.success({
|
||||
_custom: { jobId: data.createremoteaccessvpnresponse.jobid }
|
||||
_custom: {
|
||||
getUpdatedItem: function(json) {
|
||||
return {
|
||||
vpn: json.queryasyncjobresultresponse.jobresult.remoteaccessvpn,
|
||||
vpnenabled: true
|
||||
};
|
||||
},
|
||||
getActionFilter: function() {
|
||||
return actionFilters.ipAddress;
|
||||
},
|
||||
jobId: data.createremoteaccessvpnresponse.jobid
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -521,8 +454,8 @@
|
|||
return 'Enabled VPN';
|
||||
},
|
||||
complete: function(args) {
|
||||
return 'VPN is now enabled for IP ' + args.publicip + '.'
|
||||
+ '<br/>Your IPsec pre-shared key is:<br/>' + args.presharedkey;
|
||||
return 'VPN is now enabled for IP ' + args.vpn.publicip + '.'
|
||||
+ '<br/>Your IPsec pre-shared key is:<br/>' + args.vpn.presharedkey;
|
||||
}
|
||||
},
|
||||
notification: {
|
||||
|
|
@ -544,8 +477,11 @@
|
|||
args.response.success({
|
||||
_custom: {
|
||||
getUpdatedItem: function(data) {
|
||||
|
||||
return {
|
||||
vpnenabled: false
|
||||
};
|
||||
},
|
||||
getActionFilter: function() { return actionFilters.ipAddress; },
|
||||
jobId: data.deleteremoteaccessvpnresponse.jobid
|
||||
}
|
||||
});
|
||||
|
|
@ -587,16 +523,17 @@
|
|||
})
|
||||
},
|
||||
messages: {
|
||||
confirm: function(args) {
|
||||
return 'Are you sure you want to enable static NAT?';
|
||||
},
|
||||
notification: function(args) {
|
||||
return 'Enabled Static NAT';
|
||||
}
|
||||
},
|
||||
notification: {
|
||||
poll: function(args) {
|
||||
args.complete();
|
||||
args.complete({
|
||||
data: {
|
||||
isstaticnat: true
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -614,6 +551,11 @@
|
|||
args.response.success({
|
||||
_custom: {
|
||||
jobId: data.disablestaticnatresponse.jobid,
|
||||
getUpdatedItem: function() {
|
||||
return {
|
||||
isstaticnat: false
|
||||
};
|
||||
},
|
||||
getActionFilter: function() {
|
||||
return function(args) {
|
||||
return ['enableStaticNAT'];
|
||||
|
|
@ -695,18 +637,49 @@
|
|||
|
||||
//dataProvider: testData.dataProvider.detailView('network')
|
||||
dataProvider: function(args) {
|
||||
var items = args.context.ipAddresses;
|
||||
|
||||
// Get network data
|
||||
$.ajax({
|
||||
url: createURL("listPublicIpAddresses&id="+args.id),
|
||||
dataType: "json",
|
||||
async: true,
|
||||
success: function(json) {
|
||||
var items = json.listpublicipaddressesresponse.publicipaddress;
|
||||
if(items != null && items.length > 0) {
|
||||
args.response.success({
|
||||
actionFilter: actionFilters.ipAddress,
|
||||
data: items[0]
|
||||
});
|
||||
}
|
||||
var item = items[0];
|
||||
$.ajax({
|
||||
url: createURL('listNetworks'),
|
||||
data: {
|
||||
networkid: this.networkid
|
||||
},
|
||||
dataType: 'json',
|
||||
async: true,
|
||||
success: function(data) {
|
||||
// Get VPN data
|
||||
$.ajax({
|
||||
url: createURL('listRemoteAccessVpns'),
|
||||
data: {
|
||||
publicipid: item.id
|
||||
},
|
||||
dataType: 'json',
|
||||
async: true,
|
||||
success: function(vpnResponse) {
|
||||
var isVPNEnabled = vpnResponse.listremoteaccessvpnsresponse.count;
|
||||
if (isVPNEnabled) {
|
||||
item.vpnenabled = true;
|
||||
item.remoteaccessvpn = vpnResponse.listremoteaccessvpnsresponse.remoteaccessvpn[0];
|
||||
};
|
||||
|
||||
// Check if data retrieval complete
|
||||
item.network = data.listnetworksresponse.network[0];
|
||||
|
||||
args.response.success({
|
||||
actionFilter: actionFilters.ipAddress,
|
||||
data: item
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -841,6 +814,24 @@
|
|||
}
|
||||
},
|
||||
|
||||
vmDataProvider: function(args) {
|
||||
$.ajax({
|
||||
url: createURL('listVirtualMachines'),
|
||||
data: {
|
||||
id: args.context.ipAddresses[0].virtualmachineid
|
||||
},
|
||||
dataType: 'json',
|
||||
async: true,
|
||||
success: function(data) {
|
||||
args.response.success({
|
||||
data: data.listvirtualmachinesresponse.virtualmachine[0]
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
vmDetails: cloudStack.sections.instances.listView.detailView,
|
||||
|
||||
staticNAT: {
|
||||
noSelect: true,
|
||||
fields: {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
cloudStack.ipRules = function(args) {
|
||||
return function(detailArgs) {
|
||||
var context = detailArgs.context;
|
||||
|
||||
|
||||
var portMultiEdit = function(args) {
|
||||
return $('<div>').multiEdit(args);
|
||||
};
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
var makeMultiEditPanel = function($item, options) {
|
||||
if (!options) options = {};
|
||||
if ($item.closest('li').hasClass('disabled')) return false;
|
||||
|
||||
|
||||
var targetId = $item.attr('net-target');
|
||||
var targetName = $item.parent().find('.name').find('span').html();
|
||||
var target = args[targetId];
|
||||
|
|
@ -44,11 +44,50 @@
|
|||
|
||||
var staticNATChart = function(args) {
|
||||
var $chart = $('#template').find('.network-chart.static-nat').clone();
|
||||
var $vmName = $chart.find('li.static-nat-enabled .vmname');
|
||||
var $browser = $('#browser .container');
|
||||
var vmID = context.ipAddresses[0].virtualmachineid;
|
||||
var vmName = context.ipAddresses[0].virtualmachinename;
|
||||
var vmDetails = args.vmDetails;
|
||||
var vmDataProvider = args.vmDataProvider;
|
||||
|
||||
$chart.find('li.firewall .view-details').click(function() {
|
||||
makeMultiEditPanel($(this), { title: 'NAT Port Range'});
|
||||
});
|
||||
|
||||
|
||||
$vmName.append(
|
||||
$('<span>').html('VM: ' + vmName)
|
||||
);
|
||||
|
||||
$vmName.click(function() {
|
||||
$browser.cloudBrowser('addPanel', {
|
||||
title: 'Static NAT VM Details',
|
||||
complete: function($newPanel) {
|
||||
vmDataProvider({
|
||||
context: context,
|
||||
response: {
|
||||
success: function(args) {
|
||||
var instance = args.data;
|
||||
var detailViewArgs = $.extend(true, {}, vmDetails, {
|
||||
$browser: $browser,
|
||||
context: $.extend(true, {}, context, {
|
||||
instances: [instance]
|
||||
}),
|
||||
jsonObj: instance,
|
||||
id: instance.id
|
||||
});
|
||||
|
||||
// No actions available
|
||||
detailViewArgs.actions = {};
|
||||
|
||||
$newPanel.detailView(detailViewArgs);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return $chart;
|
||||
};
|
||||
|
||||
|
|
@ -67,11 +106,11 @@
|
|||
} else {
|
||||
$(preFilter).each(function() {
|
||||
var id = this;
|
||||
|
||||
|
||||
var $li = $chart.find('li').filter(function() {
|
||||
return $(this).hasClass(id);
|
||||
}).addClass('disabled');
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue