mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-03 04:12:31 +01:00
Update VPC UI
This commit is contained in:
bfederle
parent
e9ae7336c1
commit
71bfeae487
@ -9097,17 +9097,20 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
||||
|
||||
.vpc-chart li.tier span.title {
|
||||
color: #FFFFFF;
|
||||
/*+placement:shift 11px 13px;*/
|
||||
/*+placement:shift 8px 7px;*/
|
||||
position: relative;
|
||||
left: 11px;
|
||||
top: 13px;
|
||||
left: 8px;
|
||||
top: 7px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
font-size: 24px;
|
||||
/*+text-shadow:1px 2px 2px #000000;*/
|
||||
-moz-text-shadow: 1px 2px 2px #000000;
|
||||
-webkit-text-shadow: 1px 2px 2px #000000;
|
||||
-o-text-shadow: 1px 2px 2px #000000;
|
||||
text-shadow: 1px 2px 2px #000000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier span.cidr {
|
||||
@ -9257,9 +9260,11 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
||||
width: 100px;
|
||||
border: 1px solid transparent;
|
||||
margin: 4px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier .vm-count:hover {
|
||||
.vpc-chart li.tier .vm-count:hover,
|
||||
.vpc-chart li.tier .title:hover {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #4C545E;
|
||||
background: url(../images/bg-gradients.png) 0px -2751px;
|
||||
@ -9304,6 +9309,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
||||
-webkit-text-shadow: none;
|
||||
-o-text-shadow: none;
|
||||
text-shadow: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.placeholder:hover span {
|
||||
@ -9313,6 +9319,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
||||
-webkit-text-shadow: 0px 0px 7px #FFFFFF;
|
||||
-o-text-shadow: 0px 0px 7px #FFFFFF;
|
||||
text-shadow: 0px 0px 7px #FFFFFF;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.virtual-router {
|
||||
@ -9340,6 +9348,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
|
||||
position: relative;
|
||||
left: 53px;
|
||||
top: 22px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.vpc-chart li.tier.virtual-router span:hover {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 175 KiB |
@ -18,6 +18,8 @@
|
||||
var elems = {
|
||||
vpcConfigureTooltip: function(args) {
|
||||
var $browser = args.$browser;
|
||||
var ipAddresses = args.ipAddresses;
|
||||
var gateways = args.gateways;
|
||||
var siteToSiteVPN = args.siteToSiteVPN;
|
||||
var links = {
|
||||
'ip-addresses': 'IP Addresses',
|
||||
@ -38,21 +40,39 @@
|
||||
$link.appendTo($links);
|
||||
|
||||
// Link event
|
||||
$link.click(function() {
|
||||
$link.click(function() {
|
||||
switch (id) {
|
||||
case 'site-to-site-vpn':
|
||||
case 'ip-addresses':
|
||||
$browser.cloudBrowser('addPanel', {
|
||||
title: 'IP Addresses',
|
||||
maximizeIfSelected: true,
|
||||
complete: function($panel) {
|
||||
//ipAddresses.listView is a function
|
||||
$panel.listView(ipAddresses.listView(), {context: ipAddresses.context});
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'gateways':
|
||||
$browser.cloudBrowser('addPanel', {
|
||||
title: 'Gateways',
|
||||
maximizeIfSelected: true,
|
||||
complete: function($panel) {
|
||||
//ipAddresses.listView is a function
|
||||
$panel.listView(gateways.listView(), {context: gateways.context});
|
||||
}
|
||||
});
|
||||
break;
|
||||
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
|
||||
);
|
||||
complete: function($panel) {
|
||||
//siteToSiteVPN is an object
|
||||
$panel.listView(siteToSiteVPN, {context: siteToSiteVPN.context});
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -76,9 +96,11 @@
|
||||
|
||||
return $tooltip;
|
||||
},
|
||||
vpcConfigureArea: function(args) {
|
||||
vpcConfigureArea: function(args) {
|
||||
var $browser = args.$browser;
|
||||
var siteToSiteVPN = args.siteToSiteVPN;
|
||||
var ipAddresses = args.ipAddresses;
|
||||
var gateways = args.gateways;
|
||||
var siteToSiteVPN = args.siteToSiteVPN;
|
||||
var $config = $('<div>').addClass('config-area');
|
||||
var $configIcon = $('<span>').addClass('icon').html(' ');
|
||||
|
||||
@ -88,6 +110,8 @@
|
||||
$configIcon.mouseover(function() {
|
||||
var $tooltip = elems.vpcConfigureTooltip({
|
||||
$browser: $browser,
|
||||
ipAddresses: ipAddresses,
|
||||
gateways: gateways,
|
||||
siteToSiteVPN: siteToSiteVPN
|
||||
});
|
||||
|
||||
@ -124,6 +148,8 @@
|
||||
};
|
||||
}
|
||||
);
|
||||
var detailView = args.detailView;
|
||||
var $browser = args.$browser;
|
||||
var isPlaceholder = args.isPlaceholder;
|
||||
var virtualMachines = args.virtualMachines;
|
||||
var $tier = $('<li>').addClass('tier');
|
||||
@ -147,7 +173,7 @@
|
||||
|
||||
$dialog.append($listView);
|
||||
$dialog.dialog({
|
||||
title: 'VMs in this tier',
|
||||
title: 'VMs in tier: ' + name,
|
||||
dialogClass: 'multi-edit-add-list panel configure-acl',
|
||||
width: 825,
|
||||
height: 600,
|
||||
@ -160,6 +186,21 @@
|
||||
}).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, {
|
||||
context: context
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (isPlaceholder) {
|
||||
$tier.addClass('placeholder');
|
||||
$title.html('Create Tier');
|
||||
@ -167,7 +208,7 @@
|
||||
$title.html(name);
|
||||
$cidr.html(cidr);
|
||||
$vmCount.append(
|
||||
$('<span>').addClass('total').html(virtualMachines.length),
|
||||
$('<span>').addClass('total').html(virtualMachines != null? virtualMachines.length: 0),
|
||||
' VMs'
|
||||
);
|
||||
$tier.append($actions);
|
||||
@ -227,15 +268,18 @@
|
||||
|
||||
return $tier;
|
||||
},
|
||||
chart: function(args) {
|
||||
chart: function(args) {
|
||||
var $browser = args.$browser;
|
||||
var siteToSiteVPN = args.siteToSiteVPN;
|
||||
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 = elems.router();
|
||||
var $chart = $('<div>').addClass('vpc-chart');
|
||||
@ -246,7 +290,9 @@
|
||||
.append(
|
||||
elems.vpcConfigureArea({
|
||||
$browser: $browser,
|
||||
siteToSiteVPN: siteToSiteVPN
|
||||
ipAddresses: $.extend(ipAddresses, {context: context}),
|
||||
gateways: $.extend(gateways, {context: context}),
|
||||
siteToSiteVPN: $.extend(siteToSiteVPN, {context: context})
|
||||
})
|
||||
);
|
||||
|
||||
@ -256,6 +302,8 @@
|
||||
}
|
||||
|
||||
addTierDialog({
|
||||
$browser: $browser,
|
||||
tierDetailView: tierDetailView,
|
||||
$tiers: $tiers,
|
||||
context: context,
|
||||
actions: actions,
|
||||
@ -266,9 +314,11 @@
|
||||
return true;
|
||||
};
|
||||
|
||||
if (tiers.length) {
|
||||
if (tiers != null && tiers.length > 0) {
|
||||
$(tiers).map(function(index, tier) {
|
||||
var $tier = elems.tier({
|
||||
$browser: $browser,
|
||||
detailView: tierDetailView,
|
||||
name: tier.name,
|
||||
cidr: tier.cidr,
|
||||
virtualMachines: tier.virtualMachines,
|
||||
@ -276,7 +326,7 @@
|
||||
actions: actions,
|
||||
actionPreFilter: actionPreFilter,
|
||||
context: $.extend(true, {}, context, {
|
||||
tiers: [tier]
|
||||
networks: [tier]
|
||||
})
|
||||
});
|
||||
|
||||
@ -347,34 +397,31 @@
|
||||
},
|
||||
|
||||
// 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
|
||||
});
|
||||
function(args) {
|
||||
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);
|
||||
|
||||
$loading.remove();
|
||||
|
||||
var newVM = args.data;
|
||||
var newContext = $.extend(true, {}, context, {
|
||||
vms: [newVM]
|
||||
});
|
||||
filterActions({
|
||||
$actions: $actions,
|
||||
actionPreFilter: actionPreFilter,
|
||||
context: newContext
|
||||
});
|
||||
}
|
||||
|
||||
else if (actionID == 'remove') { //remove tier
|
||||
$tier.remove();
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
{},
|
||||
@ -401,8 +448,10 @@
|
||||
action({
|
||||
context: context,
|
||||
response: {
|
||||
success: function(args) {
|
||||
success({ remove: true });
|
||||
success: function(args) {
|
||||
success($.extend(args, {
|
||||
remove: true
|
||||
}));
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -414,9 +463,9 @@
|
||||
context: context
|
||||
})
|
||||
).dialog({
|
||||
title: 'Configure ACL',
|
||||
title: 'Configure ACL for tier: ' + $tier.find('.title').html(),
|
||||
dialogClass: 'configure-acl',
|
||||
width: 820,
|
||||
width: 900,
|
||||
height: 600,
|
||||
buttons: {
|
||||
'Done': function() {
|
||||
@ -445,7 +494,11 @@
|
||||
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, {
|
||||
$browser: $browser,
|
||||
detailView: tierDetailView,
|
||||
context: context,
|
||||
vmListView: vmListView,
|
||||
actions: actions,
|
||||
@ -469,8 +522,11 @@
|
||||
var vmListView = args.vmListView;
|
||||
var actionPreFilter = args.actionPreFilter;
|
||||
var $tiers = args.$tiers;
|
||||
var $browser = args.$browser;
|
||||
var tierDetailView = args.tierDetailView;
|
||||
|
||||
cloudStack.dialog.createForm({
|
||||
context: context,
|
||||
form: actions.add.createForm,
|
||||
after: function(args) {
|
||||
var $loading = $('<div>').addClass('loading-overlay').prependTo($tiers.find('li.placeholder'));
|
||||
@ -478,22 +534,23 @@
|
||||
context: context,
|
||||
data: args.data,
|
||||
response: {
|
||||
success: function(args) {
|
||||
success: function(args) {
|
||||
var tier = args.data;
|
||||
|
||||
cloudStack.ui.notifications.add(
|
||||
// Notification
|
||||
{
|
||||
desc: actions.add.label,
|
||||
poll: actions.add.notification.poll
|
||||
desc: actions.add.label
|
||||
},
|
||||
|
||||
// Success
|
||||
function(args) {
|
||||
$loading.remove();
|
||||
addNewTier({
|
||||
$browser: $browser,
|
||||
tierDetailView: tierDetailView,
|
||||
context: $.extend(true, {}, context, {
|
||||
tiers: [tier]
|
||||
networks: [tier]
|
||||
}),
|
||||
tier: tier,
|
||||
$tiers: $tiers,
|
||||
@ -510,7 +567,11 @@
|
||||
$loading.remove();
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
error: function(errorMsg) {
|
||||
cloudStack.dialog.notice({ message: _s(errorMsg) });
|
||||
$loading.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -520,7 +581,9 @@
|
||||
cloudStack.uiCustom.vpc = function(args) {
|
||||
var vmListView = args.vmListView;
|
||||
var tierArgs = args.tiers;
|
||||
var siteToSiteVPN = args.siteToSiteVPN;
|
||||
var ipAddresses = args.ipAddresses;
|
||||
var gateways = args.gateways;
|
||||
var siteToSiteVPN = args.siteToSiteVPN;
|
||||
|
||||
return function(args) {
|
||||
var context = args.context;
|
||||
@ -540,10 +603,13 @@
|
||||
tierArgs.dataProvider({
|
||||
context: context,
|
||||
response: {
|
||||
success: function(args) {
|
||||
var tiers = args.data.tiers;
|
||||
success: function(args) {
|
||||
var tiers = args.tiers;
|
||||
var $chart = elems.chart({
|
||||
$browser: $browser,
|
||||
ipAddresses: ipAddresses,
|
||||
gateways: gateways,
|
||||
tierDetailView: tierArgs.detailView,
|
||||
siteToSiteVPN: siteToSiteVPN,
|
||||
vmListView: vmListView,
|
||||
context: context,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user