mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
02f80d3370
As notified in the 4.14.0.0 release notes, this deprecates the legacy UI and moves it under the ui/legacy directory which will be served at /client/legacy URL path. This will also ensure that users upgrading or installing 4.15.0.0 will get the new UI by default. This will also make it simpler to remove the old UI for future 4.16/master releases. Co-authored-by: Daan Hoogland <daan.hoogland@shapeblue.com>
941 lines
38 KiB
JavaScript
941 lines
38 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.length) { // 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').length) {
|
|
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));
|