diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index ef81697e464..2101e2bf84a 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -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 { diff --git a/ui/images/sprites.png b/ui/images/sprites.png index 71674d13b77..f1f5b8c5820 100644 Binary files a/ui/images/sprites.png and b/ui/images/sprites.png differ diff --git a/ui/scripts/ui-custom/vpc.js b/ui/scripts/ui-custom/vpc.js index a4934bc9836..ab636a867c4 100644 --- a/ui/scripts/ui-custom/vpc.js +++ b/ui/scripts/ui-custom/vpc.js @@ -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 = $('
').addClass('config-area'); var $configIcon = $('').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 = $('
  • ').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( - $('').addClass('total').html(virtualMachines.length), + $('').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 = $('
      ').addClass('tiers'); var $router = elems.router(); var $chart = $('
      ').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 = $('
      ').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,