diff --git a/ui/modules/vpc/vpc.css b/ui/modules/vpc/vpc.css index 466ce80cf85..bdab35f0d07 100644 --- a/ui/modules/vpc/vpc.css +++ b/ui/modules/vpc/vpc.css @@ -25,8 +25,30 @@ position: relative; } +.vpc-network-chart .info-box { + font-size: 12px; + color: #6E6B6B; + padding: 9px 1px 10px 20px; + background: #FFFFFF; + border: 1px dotted #808080; + position: absolute; + top: 42px; + left: 10px; + width: 737px; +} + +.vpc-network-chart .info-box .color-key { + display: block; + background: #2983E3; + padding: 1px; + float: left; + width: 10px; + height: 10px; + margin: 0px 9px 1px 0px; +} + .vpc-network-chart .tiers { - margin: 40px 46px 0 0; + margin: 66px 46px 0 0; width: 362px; float: right; } @@ -249,8 +271,10 @@ float: left; /*+placement:shift 10px 176px;*/ position: relative; + left: 10px; + top: 176px; left: 0px; - top: 214px; + top: 240px; } .vpc-network-chart .tier-item.router .header { @@ -325,6 +349,12 @@ background: #CCCCCC; } +.vpc-network-chart .connector-line.highlighted .connector-start, +.vpc-network-chart .connector-line.highlighted .connector-mid, +.vpc-network-chart .connector-line.highlighted .connector-end { + background: #2983E3; +} + .vpc-network-chart .connector-line .connector-start, .vpc-network-chart .connector-line .connector-end { height: 3px; diff --git a/ui/modules/vpc/vpc.js b/ui/modules/vpc/vpc.js index a3c2ec738e9..6081c972be7 100644 --- a/ui/modules/vpc/vpc.js +++ b/ui/modules/vpc/vpc.js @@ -117,12 +117,17 @@ var $connector = $('
').addClass('connector-line'); var $router = args.$router; var $tier = args.$tier; + var isHighlighted = args.isHighlighted; var $connectorStart = $('
').addClass('connector-start'); var $connectorMid = $('
').addClass('connector-mid'); var $connectorEnd = $('
').addClass('connector-end'); $connector.append($connectorStart, $connectorMid, $connectorEnd); + if (isHighlighted) { + $connector.addClass('highlighted'); + } + var posStartOffsetLeft = 5; var posStartOffsetTop = 10; var posStart = { @@ -309,6 +314,7 @@ var $chart = $('
').addClass('vpc-network-chart'); var $tiers = $('
').addClass('tiers'); var $toolbar = $('
').addClass('toolbar'); + var $info = $('
').addClass('info-box'); $toolbar.appendTo($chart); $tiers.appendTo($chart); @@ -344,7 +350,11 @@ // -- Needs to execute after chart generation is complete, // so that chart elements have positioning in place. $chart.bind('cloudStack.vpc.chartReady', function() { - elems.connectorLine({ $tier: $tier, $router: $router }).appendTo($chart); + elems.connectorLine({ + $tier: $tier, + $router: $router, + isHighlighted: tier._highlighted + }).appendTo($chart); }); }); @@ -362,6 +372,13 @@ if (args.complete) { args.complete($chart); } + + if ($chart.find('.connector-line.highlighted').size()) { + $info.appendTo($chart).append( + $('').addClass('color-key'), + $('').html('= Contains a public network') + ); + } } } }); diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js index 55f84f5a1ea..4ad565787b7 100644 --- a/ui/scripts/vpc.js +++ b/ui/scripts/vpc.js @@ -3379,7 +3379,18 @@ error = true; } }); - + + // Highlight if any tier VM contains guest network + $.grep( + virtualMachines.virtualmachine ? virtualMachines.virtualmachine : [], + function(vm) { + return $.grep(vm.nic, + function(nic) { + return nic.type == 'Shared'; + }).length; + } + ).length ? tier._highlighted = true : tier._highlighted = false; + return $.extend(tier, { _dashboardItems: [ {