VPC UI, chart: Color connector lines for tiers w/ public network
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/934cee4e Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/934cee4e Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/934cee4e Branch: refs/heads/vpc_simulator Commit: 934cee4e38843a191487cfd14ead07ce4f98560c Parents: 73c381a Author: Brian Federle <bfede...@gmail.com> Authored: Tue Jun 4 09:00:54 2013 -0700 Committer: Prasanna Santhanam <t...@apache.org> Committed: Tue Jun 4 21:41:34 2013 +0530 ---------------------------------------------------------------------- ui/modules/vpc/vpc.css | 34 ++++++++++++++++++++++++++++++++-- ui/modules/vpc/vpc.js | 19 ++++++++++++++++++- ui/scripts/vpc.js | 13 ++++++++++++- 3 files changed, 62 insertions(+), 4 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/934cee4e/ui/modules/vpc/vpc.css ---------------------------------------------------------------------- diff --git a/ui/modules/vpc/vpc.css b/ui/modules/vpc/vpc.css index 466ce80..bdab35f 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; http://git-wip-us.apache.org/repos/asf/cloudstack/blob/934cee4e/ui/modules/vpc/vpc.js ---------------------------------------------------------------------- diff --git a/ui/modules/vpc/vpc.js b/ui/modules/vpc/vpc.js index a3c2ec7..6081c97 100644 --- a/ui/modules/vpc/vpc.js +++ b/ui/modules/vpc/vpc.js @@ -117,12 +117,17 @@ var $connector = $('<div></div>').addClass('connector-line'); var $router = args.$router; var $tier = args.$tier; + var isHighlighted = args.isHighlighted; var $connectorStart = $('<div></div>').addClass('connector-start'); var $connectorMid = $('<div></div>').addClass('connector-mid'); var $connectorEnd = $('<div></div>').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 = $('<div>').addClass('vpc-network-chart'); var $tiers = $('<div>').addClass('tiers'); var $toolbar = $('<div>').addClass('toolbar'); + var $info = $('<div>').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( + $('<span>').addClass('color-key'), + $('<span>').html('= Contains a public network') + ); + } } } }); http://git-wip-us.apache.org/repos/asf/cloudstack/blob/934cee4e/ui/scripts/vpc.js ---------------------------------------------------------------------- diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js index c186b15..196505a 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: [ {
