mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
49c3c8b2e3
Add link in tooltip for site-to-site VPN, which opens a new panel showing the list view. This draws from the existing 'siteToSiteVpn' network subsection, so no modification should be required to the existing list view.
567 lines
16 KiB
JavaScript
567 lines
16 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 = {
|
|
vpcConfigureTooltip: function(args) {
|
|
var $browser = args.$browser;
|
|
var siteToSiteVPN = args.siteToSiteVPN;
|
|
var links = {
|
|
'ip-addresses': 'IP Addresses',
|
|
'gateways': 'Gateways',
|
|
'site-to-site-vpn': 'Site-to-site VPN'
|
|
};
|
|
var $links = $('<ul>').addClass('links');
|
|
var $tooltip = $('<div>').addClass('vpc-configure-tooltip').append(
|
|
$('<div>').addClass('arrow')
|
|
);
|
|
|
|
// 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 'site-to-site-vpn':
|
|
$browser.cloudBrowser('addPanel', {
|
|
title: 'Site-to-site VPNs',
|
|
maximizeIfSelected: true,
|
|
complete: function($panel) {
|
|
$panel.listView(
|
|
$.isFunction(siteToSiteVPN.listView) ?
|
|
siteToSiteVPN.listView() : siteToSiteVPN.listView
|
|
);
|
|
}
|
|
});
|
|
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 $browser = args.$browser;
|
|
var siteToSiteVPN = args.siteToSiteVPN;
|
|
var $config = $('<div>').addClass('config-area');
|
|
var $configIcon = $('<span>').addClass('icon').html(' ');
|
|
|
|
$config.append($configIcon);
|
|
|
|
// Tooltip event
|
|
$configIcon.mouseover(function() {
|
|
var $tooltip = elems.vpcConfigureTooltip({
|
|
$browser: $browser,
|
|
siteToSiteVPN: siteToSiteVPN
|
|
});
|
|
|
|
// 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() {
|
|
var $router = $('<li>').addClass('tier virtual-router');
|
|
var $title = $('<span>').addClass('title').html('Virtual Router');
|
|
|
|
$router.append($title);
|
|
|
|
// Append horizontal chart line
|
|
$router.append($('<div>').addClass('connect-line'));
|
|
|
|
return $router;
|
|
},
|
|
tier: function(args) {
|
|
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 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';
|
|
});
|
|
|
|
// 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: 'VMs in this tier',
|
|
dialogClass: 'multi-edit-add-list panel configure-acl',
|
|
width: 825,
|
|
height: 600,
|
|
buttons: {
|
|
'Done': function() {
|
|
$(':ui-dialog').remove();
|
|
$('.overlay').remove();
|
|
}
|
|
}
|
|
}).closest('.ui-dialog').overlay();
|
|
});
|
|
|
|
if (isPlaceholder) {
|
|
$tier.addClass('placeholder');
|
|
$title.html('Create Tier');
|
|
} else {
|
|
$title.html(name);
|
|
$cidr.html(cidr);
|
|
$vmCount.append(
|
|
$('<span>').addClass('total').html(virtualMachines.length),
|
|
' 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(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 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 $tiers = $('<ul>').addClass('tiers');
|
|
var $router = elems.router();
|
|
var $chart = $('<div>').addClass('vpc-chart');
|
|
var $title = $('<div>').addClass('vpc-title')
|
|
.append(
|
|
$('<span>').html(vpcName)
|
|
)
|
|
.append(
|
|
elems.vpcConfigureArea({
|
|
$browser: $browser,
|
|
siteToSiteVPN: siteToSiteVPN
|
|
})
|
|
);
|
|
|
|
var showAddTierDialog = function() {
|
|
if ($(this).find('.loading-overlay').size()) {
|
|
return false;
|
|
}
|
|
|
|
addTierDialog({
|
|
$tiers: $tiers,
|
|
context: context,
|
|
actions: actions,
|
|
vmListView: vmListView,
|
|
actionPreFilter: actionPreFilter
|
|
});
|
|
|
|
return true;
|
|
};
|
|
|
|
if (tiers.length) {
|
|
$(tiers).map(function(index, tier) {
|
|
var $tier = elems.tier({
|
|
name: tier.name,
|
|
cidr: tier.cidr,
|
|
virtualMachines: tier.virtualMachines,
|
|
vmListView: vmListView,
|
|
actions: actions,
|
|
actionPreFilter: actionPreFilter,
|
|
context: $.extend(true, {}, context, {
|
|
tiers: [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 : {};
|
|
|
|
cloudStack.ui.notifications.add(
|
|
// Notification
|
|
{
|
|
desc: label,
|
|
poll: notification.poll,
|
|
_custom: _custom
|
|
},
|
|
|
|
// Success
|
|
function(args) {
|
|
var newData = args.data ? args.data : {};
|
|
var newTier = $.extend(true, {}, context.tiers[0], newData);
|
|
var newContext = $.extend(true, {}, context);
|
|
|
|
// Update data
|
|
newContext.tiers = [newTier];
|
|
|
|
if (remove) {
|
|
$tier.remove();
|
|
} else {
|
|
$loading.remove();
|
|
}
|
|
|
|
if (actionID == 'addVM') {
|
|
// Increment VM total
|
|
var $total = $tier.find('.vm-count .total');
|
|
var prevTotal = parseInt($total.html());
|
|
var newTotal = prevTotal + 1;
|
|
|
|
$total.html(newTotal);
|
|
}
|
|
|
|
filterActions({
|
|
$actions: $actions,
|
|
actionPreFilter: actionPreFilter,
|
|
context: newContext
|
|
});
|
|
},
|
|
|
|
{},
|
|
|
|
// Error
|
|
function(args) {
|
|
$loading.remove();
|
|
}
|
|
);
|
|
};
|
|
|
|
switch(actionID) {
|
|
case 'addVM':
|
|
action({
|
|
context: context,
|
|
complete: function(args) {
|
|
$loading.appendTo($tier);
|
|
success(args);
|
|
}
|
|
});
|
|
break;
|
|
case 'remove':
|
|
$loading.appendTo($tier);
|
|
action({
|
|
context: context,
|
|
response: {
|
|
success: function(args) {
|
|
success({ remove: true });
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 'acl':
|
|
// Show ACL dialog
|
|
$('<div>').multiEdit(
|
|
$.extend(true, {}, actionArgs.multiEdit, {
|
|
context: context
|
|
})
|
|
).dialog({
|
|
title: 'Configure ACL',
|
|
dialogClass: 'configure-acl',
|
|
width: 820,
|
|
height: 600,
|
|
buttons: {
|
|
'Done': function() {
|
|
$(':ui-dialog').remove();
|
|
$('.overlay').remove();
|
|
}
|
|
}
|
|
}).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 actions = args.actions;
|
|
var vmListView = args.vmListView;
|
|
var actionPreFilter = args.actionPreFilter;
|
|
var context = args.context;
|
|
var tier = $.extend(args.tier, {
|
|
context: context,
|
|
vmListView: vmListView,
|
|
actions: actions,
|
|
actionPreFilter: actionPreFilter,
|
|
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 actions = args.actions;
|
|
var context = args.context;
|
|
var vmListView = args.vmListView;
|
|
var actionPreFilter = args.actionPreFilter;
|
|
var $tiers = args.$tiers;
|
|
|
|
cloudStack.dialog.createForm({
|
|
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,
|
|
poll: actions.add.notification.poll
|
|
},
|
|
|
|
// Success
|
|
function(args) {
|
|
$loading.remove();
|
|
addNewTier({
|
|
context: $.extend(true, {}, context, {
|
|
tiers: [tier]
|
|
}),
|
|
tier: tier,
|
|
$tiers: $tiers,
|
|
actions: actions,
|
|
actionPreFilter: actionPreFilter,
|
|
vmListView: vmListView
|
|
});
|
|
},
|
|
|
|
{},
|
|
|
|
// Error
|
|
function(args) {
|
|
$loading.remove();
|
|
}
|
|
);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
cloudStack.uiCustom.vpc = function(args) {
|
|
var vmListView = args.vmListView;
|
|
var tierArgs = args.tiers;
|
|
var siteToSiteVPN = args.siteToSiteVPN;
|
|
|
|
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: '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) {
|
|
var tiers = args.data.tiers;
|
|
var $chart = elems.chart({
|
|
$browser: $browser,
|
|
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));
|