mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
906 lines
28 KiB
JavaScript
906 lines
28 KiB
JavaScript
// Licensed to the Apache Software Foundation (ASF) under one
|
|
// or more contributor license agreements. See the NOTICE file
|
|
// distributed with this work for additional information
|
|
// regarding copyright ownership. The ASF licenses this file
|
|
// to you under the Apache License, Version 2.0 (the
|
|
// "License"); you may not use this file except in compliance
|
|
// with the License. You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing,
|
|
// software distributed under the License is distributed on an
|
|
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
// KIND, either express or implied. See the License for the
|
|
// specific language governing permissions and limitations
|
|
// 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: _l('label.configure.network.ACLs'),
|
|
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': _l('label.menu.ipaddresses'),
|
|
'gateways': _l('label.private.Gateway'),
|
|
'site-to-site-vpn': _l('label.site.to.site.VPN'),
|
|
'network-acls': _l('label.network.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) {
|
|
var $link = $('<li>').addClass('link').addClass(id);
|
|
var $label = $('<span>').html(label);
|
|
|
|
$link.append($label);
|
|
$link.appendTo($links);
|
|
|
|
// Link event
|
|
$link.click(function() {
|
|
switch (id) {
|
|
case 'network-acls':
|
|
$browser.cloudBrowser('addPanel', {
|
|
title: _l('label.network.ACLs'),
|
|
maximizeIfSelected: true,
|
|
complete: function($panel) {
|
|
$panel.listView(
|
|
$.extend(true, {}, acl.listView, {
|
|
listView: {
|
|
actions: {
|
|
add: {
|
|
label: 'label.add.network.ACL',
|
|
action: {
|
|
custom: function() {
|
|
elems.aclDialog({
|
|
isDialog: true,
|
|
actionArgs: acl,
|
|
context: context
|
|
});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
detailView: function() {
|
|
var detailView = $.extend(true, {}, tierDetailView);
|
|
|
|
detailView.tabs = {
|
|
acl: tierDetailView.tabs.acl
|
|
};
|
|
|
|
return detailView;
|
|
}
|
|
}
|
|
}),
|
|
{ context: acl.context }
|
|
);
|
|
}
|
|
});
|
|
break;
|
|
|
|
case 'ip-addresses':
|
|
$browser.cloudBrowser('addPanel', {
|
|
title: _l('label.menu.ipaddresses'),
|
|
maximizeIfSelected: true,
|
|
complete: function($panel) {
|
|
//ipAddresses.listView is a function
|
|
$panel.listView(ipAddresses.listView(), {context: ipAddresses.context});
|
|
}
|
|
});
|
|
break;
|
|
case 'gateways':
|
|
//siteToSiteVPN is an object
|
|
var addAction = gateways.add;
|
|
var isGatewayPresent = addAction.preCheck({ context: gateways.context });
|
|
var showGatewayListView = function() {
|
|
$browser.cloudBrowser('addPanel', {
|
|
title: _l('label.private.Gateway'),
|
|
maximizeIfSelected: true,
|
|
complete: function($panel) {
|
|
$panel.listView(gateways.listView(), { context: gateways.context });
|
|
}
|
|
});
|
|
};
|
|
|
|
if (isGatewayPresent) {
|
|
showGatewayListView();
|
|
} else {
|
|
cloudStack.dialog.createForm({
|
|
form: addAction.createForm,
|
|
context: args.gateways.context,
|
|
after: function(args) {
|
|
var data = args.data;
|
|
var error = function(message) {
|
|
cloudStack.dialog.notice({ message: message });
|
|
};
|
|
|
|
addAction.action({
|
|
data: data,
|
|
$form:args.$form,
|
|
context: gateways.context,
|
|
response: {
|
|
success: function(args) {
|
|
var _custom = args._custom;
|
|
var notification = {
|
|
poll: addAction.notification.poll,
|
|
_custom: _custom,
|
|
desc: addAction.messages.notification()
|
|
};
|
|
var success = function(args) {
|
|
if (!$chart.is(':visible')) return;
|
|
|
|
cloudStack.dialog.confirm({
|
|
message: 'Gateway for VPC has been created successfully. Would you like to see its details?',
|
|
action: showGatewayListView
|
|
});
|
|
};
|
|
|
|
cloudStack.dialog.notice({
|
|
message: 'Your gateway is being created; please see notifications window.'
|
|
});
|
|
|
|
cloudStack.ui.notifications.add(
|
|
notification,
|
|
success, {},
|
|
error, {}
|
|
);
|
|
},
|
|
error: error
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
case 'site-to-site-vpn':
|
|
//siteToSiteVPN is an object
|
|
var addAction = siteToSiteVPN.add;
|
|
var isVPNPresent = addAction.preCheck({ context: siteToSiteVPN.context });
|
|
var showVPNListView = function() {
|
|
$browser.cloudBrowser('addPanel', {
|
|
title: _l('label.site.to.site.VPN'),
|
|
maximizeIfSelected: true,
|
|
complete: function($panel) {
|
|
$panel.listView(siteToSiteVPN, {context: siteToSiteVPN.context});
|
|
}
|
|
});
|
|
};
|
|
|
|
if (isVPNPresent) {
|
|
showVPNListView();
|
|
} else {
|
|
cloudStack.dialog.confirm({
|
|
message: 'Please confirm that you want to add a Site-to-Site VPN gateway.',
|
|
action: function() {
|
|
var error = function(message) {
|
|
cloudStack.dialog.notice({ message: message });
|
|
};
|
|
|
|
addAction.action({
|
|
context: siteToSiteVPN.context,
|
|
response: {
|
|
success: function(args) {
|
|
var _custom = args._custom;
|
|
var notification = {
|
|
poll: addAction.notification.poll,
|
|
_custom: _custom,
|
|
desc: addAction.messages.notification()
|
|
};
|
|
var success = function(args) {
|
|
if (!$chart.is(':visible')) return;
|
|
cloudStack.dialog.confirm({
|
|
message: 'Gateway for VPC has been created successfully. Would you like to see its details?',
|
|
action: showVPNListView
|
|
});
|
|
};
|
|
|
|
cloudStack.dialog.notice({
|
|
message: 'Your VPN is being created; please see notifications window.'
|
|
});
|
|
|
|
cloudStack.ui.notifications.add(
|
|
notification,
|
|
success, {},
|
|
error, {}
|
|
);
|
|
},
|
|
error: error
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
});
|
|
});
|
|
|
|
$tooltip.append($links);
|
|
|
|
// Tooltip hover event
|
|
$tooltip.hover(
|
|
function() {
|
|
$tooltip.addClass('active');
|
|
},
|
|
function() {
|
|
$tooltip.removeClass('active');
|
|
|
|
setTimeout(function() {
|
|
if (!$tooltip.hasClass('active')) {
|
|
$tooltip.remove();
|
|
}
|
|
}, 500);
|
|
}
|
|
);
|
|
|
|
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,
|
|
acl: acl,
|
|
siteToSiteVPN: siteToSiteVPN,
|
|
tierDetailView: tierDetailView
|
|
});
|
|
|
|
// Make sure tooltip is center aligned with icon
|
|
$tooltip.css({ left: $configIcon.position().left });
|
|
$tooltip.appendTo($config).hide();
|
|
$tooltip.stop().fadeIn('fast');
|
|
});
|
|
|
|
return $config;
|
|
},
|
|
router: function(args) {
|
|
var $browser = args.$browser;
|
|
var detailView = args.detailView;
|
|
var $router = $('<li>').addClass('tier virtual-router');
|
|
var $title = $('<span>').addClass('title').html(_l('label.virtual.router'));
|
|
|
|
$router.append($title);
|
|
|
|
// Append horizontal chart line
|
|
$router.append($('<div>').addClass('connect-line'));
|
|
|
|
$router.click(function() {
|
|
if ($router.hasClass('disabled')) return false;
|
|
|
|
$browser.cloudBrowser('addPanel', {
|
|
title: _l('label.VPC.router.details'),
|
|
complete: function($panel) {
|
|
$panel.detailView(detailView);
|
|
}
|
|
});
|
|
});
|
|
|
|
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;
|
|
var vmListView = args.vmListView;
|
|
var actionPreFilter = args.actionPreFilter;
|
|
var actions = $.map(
|
|
args.actions ? args.actions : {}, function(value, key) {
|
|
return {
|
|
id: key,
|
|
action: value
|
|
};
|
|
}
|
|
);
|
|
var detailView = args.detailView;
|
|
var $browser = args.$browser;
|
|
var isPlaceholder = args.isPlaceholder;
|
|
var virtualMachines = args.virtualMachines;
|
|
var $tier = $('<li>').addClass('tier');
|
|
var $title = $('<span>').addClass('title');
|
|
var $cidr = $('<span>').addClass('cidr');
|
|
var $vmCount = $('<span>').addClass('vm-count');
|
|
var $actions = $('<div>').addClass('actions');
|
|
|
|
// Ignore special actions
|
|
// -- Add tier action is handled separately
|
|
actions = $.grep(actions, function(action) {
|
|
return action.id != 'add';
|
|
});
|
|
|
|
// Add loading indicator
|
|
$vmCount.append(
|
|
$('<div>').addClass('loading-overlay')
|
|
.attr('title', 'VMs are launching in this tier.')
|
|
);
|
|
|
|
// VM count shows instance list
|
|
$vmCount.click(function() {
|
|
var $dialog = $('<div>');
|
|
var $listView = $('<div>').listView($.extend(true, {}, vmListView, {
|
|
context: context
|
|
}));
|
|
|
|
$dialog.append($listView);
|
|
$dialog.dialog({
|
|
title: _l('label.VMs.in.tier') + ': ' + name,
|
|
dialogClass: 'multi-edit-add-list panel configure-acl',
|
|
width: 825,
|
|
height: 600,
|
|
buttons: {
|
|
'Done': function() {
|
|
$(':ui-dialog').remove();
|
|
$('.overlay').remove();
|
|
}
|
|
}
|
|
}).closest('.ui-dialog').overlay();
|
|
});
|
|
|
|
// Title shows tier details
|
|
$title.click(function() {
|
|
if ($browser && $browser.size()) { // Fix null exception, if add tier returns error
|
|
$browser.cloudBrowser('addPanel', {
|
|
title: name,
|
|
maximizeIfSelected: true,
|
|
complete: function($panel) {
|
|
$panel.detailView($.extend(true, {}, detailView, {
|
|
$browser: $browser,
|
|
context: context
|
|
}));
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
if (isPlaceholder) {
|
|
$tier.addClass('placeholder');
|
|
$title.html(_l('label.add.new.tier'));
|
|
} else {
|
|
$title.html(
|
|
cloudStack.concat(name, 8)
|
|
);
|
|
$title.attr('title', name);
|
|
$cidr.html(cidr);
|
|
$vmCount.append(
|
|
$('<span>').addClass('total').html(virtualMachines != null? virtualMachines.length: 0),
|
|
_l('label.vms')
|
|
);
|
|
$tier.append($actions);
|
|
|
|
// Build action buttons
|
|
$(actions).map(function(index, action) {
|
|
var $action = $('<div>').addClass('action');
|
|
var shortLabel = action.action.shortLabel;
|
|
var label = action.action.label;
|
|
|
|
$action.addClass(action.id);
|
|
|
|
if (action.id != 'remove') {
|
|
$action.append($('<span>').addClass('label').html(_l(shortLabel)));
|
|
} else {
|
|
$action.append($('<span>').addClass('icon').html(' '));
|
|
}
|
|
|
|
$actions.append($action);
|
|
$action.attr('title', label);
|
|
$action.data('vpc-tier-action-id', action.id);
|
|
|
|
// Action event
|
|
$action.click(function() {
|
|
if ($action.hasClass('disabled')) {
|
|
return false;
|
|
}
|
|
|
|
tierAction({
|
|
action: action,
|
|
actionPreFilter: actionPreFilter,
|
|
context: context,
|
|
$tier: $tier,
|
|
$actions: $actions
|
|
});
|
|
|
|
return true;
|
|
});
|
|
});
|
|
}
|
|
|
|
$tier.prepend($title);
|
|
|
|
if (!isPlaceholder) {
|
|
$tier.append($title, $cidr, $vmCount);
|
|
}
|
|
|
|
// Append horizontal chart line
|
|
$tier.append($('<div>').addClass('connect-line'));
|
|
|
|
// Handle action filter
|
|
filterActions({
|
|
$actions: $actions,
|
|
actionPreFilter: actionPreFilter,
|
|
context: context
|
|
});
|
|
|
|
return $tier;
|
|
},
|
|
chart: function(args) {
|
|
var $browser = args.$browser;
|
|
var acl = args.acl;
|
|
var ipAddresses = args.ipAddresses;
|
|
var gateways = args.gateways;
|
|
var siteToSiteVPN = args.siteToSiteVPN;
|
|
var tiers = args.tiers;
|
|
var vmListView = args.vmListView;
|
|
var actions = args.actions;
|
|
var actionPreFilter = args.actionPreFilter;
|
|
var vpcName = args.vpcName;
|
|
var context = args.context;
|
|
var tierDetailView = args.tierDetailView;
|
|
var $tiers = $('<ul>').addClass('tiers');
|
|
var $router;
|
|
|
|
$router = elems.router({
|
|
$browser:$browser,
|
|
detailView:$.extend(true, {}, args.routerDetailView(), {
|
|
context:context
|
|
})
|
|
});
|
|
|
|
if (!isAdmin()) $router.addClass('disabled');
|
|
|
|
var $chart = $('<div>').addClass('vpc-chart');
|
|
var $title = $('<div>').addClass('vpc-title')
|
|
.append(
|
|
$('<span>').html(vpcName)
|
|
)
|
|
.append(
|
|
elems.vpcConfigureArea({
|
|
context:context,
|
|
$browser:$browser,
|
|
$chart:$chart,
|
|
ipAddresses:$.extend(ipAddresses, {context:context}),
|
|
gateways:$.extend(gateways, {context:context}),
|
|
siteToSiteVPN:$.extend(siteToSiteVPN, {context:context}),
|
|
acl:$.extend(acl, {context:context}),
|
|
tierDetailView:tierDetailView
|
|
})
|
|
);
|
|
|
|
var showAddTierDialog = function () {
|
|
if ($(this).find('.loading-overlay').size()) {
|
|
return false;
|
|
}
|
|
|
|
addTierDialog({
|
|
ipAddresses:ipAddresses,
|
|
$browser:$browser,
|
|
tierDetailView:tierDetailView,
|
|
$tiers:$tiers,
|
|
acl:acl,
|
|
context:context,
|
|
actions:actions,
|
|
vmListView:vmListView,
|
|
actionPreFilter:actionPreFilter
|
|
});
|
|
|
|
return true;
|
|
};
|
|
|
|
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,
|
|
cidr:tier.cidr,
|
|
virtualMachines:tier.virtualMachines,
|
|
vmListView:vmListView,
|
|
actions:actions,
|
|
actionPreFilter:actionPreFilter,
|
|
context:$.extend(true, {}, context, {
|
|
networks:[tier]
|
|
})
|
|
});
|
|
|
|
$tier.appendTo($tiers);
|
|
});
|
|
|
|
}
|
|
|
|
elems.tier({ isPlaceholder:true }).appendTo($tiers)
|
|
.click(showAddTierDialog);
|
|
$tiers.prepend($router);
|
|
$chart.append($title, $tiers);
|
|
|
|
if (!tiers || !tiers.length) {
|
|
showAddTierDialog();
|
|
}
|
|
|
|
return $chart;
|
|
}
|
|
};
|
|
|
|
var filterActions = function(args) {
|
|
var $actions = args.$actions;
|
|
var actionPreFilter = args.actionPreFilter;
|
|
var context = args.context;
|
|
var disabledActions, allowedActions;
|
|
|
|
disabledActions = actionPreFilter ? actionPreFilter({
|
|
context: context
|
|
}) : [];
|
|
|
|
// Visual appearance for disabled actions
|
|
$actions.find('.action').map(function(index, action) {
|
|
var $action = $(action);
|
|
var actionID = $action.data('vpc-tier-action-id');
|
|
|
|
if ($.inArray(actionID, disabledActions) > -1) {
|
|
$action.addClass('disabled');
|
|
} else {
|
|
$action.removeClass('disabled');
|
|
}
|
|
});
|
|
};
|
|
|
|
// Handles tier action, including UI effects
|
|
var tierAction = function(args) {
|
|
var $tier = args.$tier;
|
|
var $loading = $('<div>').addClass('loading-overlay');
|
|
var $actions = args.$actions;
|
|
var actionArgs = args.action.action;
|
|
var action = actionArgs.action;
|
|
var actionID = args.action.id;
|
|
var notification = actionArgs.notification;
|
|
var label = actionArgs.label;
|
|
var context = args.context;
|
|
var actionPreFilter = args.actionPreFilter;
|
|
|
|
var success = function(args) {
|
|
var remove = args ? args.remove : false;
|
|
var _custom = args ? args._custom : {};
|
|
|
|
var updateVMLoadingState = function() {
|
|
var pendingVMs = $tier.data('vpc-tier-pending-vms');
|
|
|
|
pendingVMs = pendingVMs ? pendingVMs - 1 : 0;
|
|
|
|
if (!pendingVMs) {
|
|
$tier.data('vpc-tier-pending-vms', 0);
|
|
$tier.removeClass('loading');
|
|
} else {
|
|
$tier.data('vpc-tier-pending-vms', pendingVMs);
|
|
}
|
|
};
|
|
|
|
cloudStack.ui.notifications.add(
|
|
// Notification
|
|
{
|
|
desc: label,
|
|
poll: notification.poll,
|
|
_custom: _custom
|
|
},
|
|
|
|
// Success
|
|
function(args) {
|
|
if (actionID == 'addVM') {
|
|
// Increment VM total
|
|
var $total = $tier.find('.vm-count .total');
|
|
var prevTotal = parseInt($total.html());
|
|
var newTotal = prevTotal + 1;
|
|
var newVM = args.data;
|
|
var newContext = $.extend(true, {}, context, {
|
|
vms: [newVM]
|
|
});
|
|
|
|
$total.html(newTotal);
|
|
|
|
filterActions({
|
|
$actions: $actions,
|
|
actionPreFilter: actionPreFilter,
|
|
context: newContext
|
|
});
|
|
|
|
updateVMLoadingState();
|
|
} else if (actionID == 'remove') { //remove tier
|
|
$loading.remove();
|
|
$tier.remove();
|
|
} else {
|
|
$loading.remove();
|
|
}
|
|
|
|
},
|
|
|
|
{},
|
|
|
|
// Error
|
|
function(args) {
|
|
if (actionID == 'addVM') {
|
|
updateVMLoadingState();
|
|
} else {
|
|
$loading.remove();
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
switch(actionID) {
|
|
case 'addVM':
|
|
action({
|
|
context: context,
|
|
complete: function(args) {
|
|
var pendingVMs = $tier.data('vpc-tier-pending-vms');
|
|
|
|
pendingVMs = pendingVMs ? pendingVMs + 1 : 1;
|
|
$tier.addClass('loading');
|
|
$tier.data('vpc-tier-pending-vms', pendingVMs);
|
|
success(args);
|
|
}
|
|
});
|
|
break;
|
|
case 'remove':
|
|
$loading.appendTo($tier);
|
|
action({
|
|
context: context,
|
|
response: {
|
|
success: function(args) {
|
|
success($.extend(args, {
|
|
remove: true
|
|
}));
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 'acl':
|
|
elems.aclDialog({
|
|
isDialog: true,
|
|
actionArgs: actionArgs,
|
|
context: context
|
|
}).closest('.ui-dialog').overlay();
|
|
break;
|
|
default:
|
|
$loading.appendTo($tier);
|
|
action({
|
|
context: context,
|
|
complete: success,
|
|
response: {
|
|
success: success,
|
|
error: function(args) { $loading.remove(); }
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
// 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;
|
|
var context = args.context;
|
|
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;
|
|
|
|
$tiers.find('li.placeholder')
|
|
.before(
|
|
elems.tier(tier)
|
|
.hide()
|
|
.fadeIn('slow')
|
|
);
|
|
};
|
|
|
|
// 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;
|
|
var actionPreFilter = args.actionPreFilter;
|
|
var $tiers = args.$tiers;
|
|
var $browser = args.$browser;
|
|
var tierDetailView = args.tierDetailView;
|
|
var acl = args.acl;
|
|
|
|
cloudStack.dialog.createForm({
|
|
context: context,
|
|
form: actions.add.createForm,
|
|
after: function(args) {
|
|
var $loading = $('<div>').addClass('loading-overlay').prependTo($tiers.find('li.placeholder'));
|
|
actions.add.action({
|
|
context: context,
|
|
data: args.data,
|
|
response: {
|
|
success: function(args) {
|
|
var tier = args.data;
|
|
|
|
cloudStack.ui.notifications.add(
|
|
// Notification
|
|
{
|
|
desc: actions.add.label
|
|
},
|
|
|
|
// Success
|
|
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,
|
|
vmListView: vmListView
|
|
});
|
|
},
|
|
|
|
{},
|
|
|
|
// Error
|
|
function(args) {
|
|
$loading.remove();
|
|
}
|
|
);
|
|
},
|
|
error: function(errorMsg) {
|
|
cloudStack.dialog.notice({ message: _s(errorMsg) });
|
|
$loading.remove();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
cloudStack.uiCustom.vpc = function(args) {
|
|
var vmListView = args.vmListView;
|
|
var tierArgs = args.tiers;
|
|
var ipAddresses = args.ipAddresses;
|
|
var gateways = args.gateways;
|
|
var acl = args.acl;
|
|
var siteToSiteVPN = args.siteToSiteVPN;
|
|
var routerDetailView = args.routerDetailView;
|
|
|
|
return function(args) {
|
|
var context = args.context;
|
|
var $browser = $('#browser .container');
|
|
var $toolbar = $('<div>').addClass('toolbar');
|
|
var vpc = args.context.vpc[0];
|
|
|
|
$browser.cloudBrowser('addPanel', {
|
|
maximizeIfSelected: true,
|
|
title: _l('label.configure.vpc') + ': ' + vpc.name,
|
|
complete: function($panel) {
|
|
var $loading = $('<div>').addClass('loading-overlay').appendTo($panel);
|
|
|
|
$panel.append($toolbar);
|
|
|
|
// Load data
|
|
tierArgs.dataProvider({
|
|
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,
|
|
acl: acl,
|
|
tierDetailView: tierDetailView,
|
|
routerDetailView: routerDetailView,
|
|
siteToSiteVPN: siteToSiteVPN,
|
|
vmListView: vmListView,
|
|
context: context,
|
|
actions: tierArgs.actions,
|
|
actionPreFilter: tierArgs.actionPreFilter,
|
|
vpcName: vpc.name,
|
|
tiers: tiers
|
|
}).appendTo($panel);
|
|
|
|
$loading.remove();
|
|
$chart.fadeIn(function() {
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
};
|
|
}(jQuery, cloudStack));
|