Updated Branches: refs/heads/ui-vpc-redesign 2a966f35f -> 04cc92dee
WIP chart connector lines Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/04cc92de Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/04cc92de Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/04cc92de Branch: refs/heads/ui-vpc-redesign Commit: 04cc92deee848f2c82bb69fa0a350ddce955bfdd Parents: 2a966f3 Author: Brian Federle <[email protected]> Authored: Thu May 30 14:58:34 2013 -0700 Committer: Brian Federle <[email protected]> Committed: Thu May 30 14:58:34 2013 -0700 ---------------------------------------------------------------------- ui/modules/vpc/vpc.css | 45 ++++++++++++++++++++++++++++++------ ui/modules/vpc/vpc.js | 52 ++++++++++++++++++++++++++++++++++++++----- 2 files changed, 83 insertions(+), 14 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/04cc92de/ui/modules/vpc/vpc.css ---------------------------------------------------------------------- diff --git a/ui/modules/vpc/vpc.css b/ui/modules/vpc/vpc.css index 51c3f7e..e558e4b 100644 --- a/ui/modules/vpc/vpc.css +++ b/ui/modules/vpc/vpc.css @@ -255,21 +255,21 @@ padding: 15px 0 14px; border-bottom: 1px solid #808080; background: #C3C6C9; -/*Old browsers*/ + /*Old browsers*/ background: -moz-linear-gradient(top, #c3c6c9 0%, #909497 100%); -/*FF3.6+*/ + /*FF3.6+*/ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3c6c9), color-stop(100%,#909497)); -/*Chrome,Safari4+*/ + /*Chrome,Safari4+*/ background: -webkit-linear-gradient(top, #c3c6c9 0%,#909497 100%); -/*Chrome10+,Safari5.1+*/ + /*Chrome10+,Safari5.1+*/ background: -o-linear-gradient(top, #c3c6c9 0%,#909497 100%); -/*Opera 11.10+*/ + /*Opera 11.10+*/ background: -ms-linear-gradient(top, #c3c6c9 0%,#909497 100%); -/*IE10+*/ + /*IE10+*/ background: linear-gradient(to bottom, #c3c6c9 0%,#909497 100%); -/*W3C*/ + /*W3C*/ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3c6c9', endColorstr='#909497',GradientType=0 ); -/*IE6-8*/ + /*IE6-8*/ } .vpc-network-chart .tier-item.router .header .title { @@ -311,3 +311,32 @@ background-color: #818181; } +.vpc-network-chart .connector-line { +} + +.vpc-network-chart .connector-line .connector-start, +.vpc-network-chart .connector-line .connector-mid, +.vpc-network-chart .connector-line .connector-end { + position: absolute; + top: 0px; + left: 0px; + background: #CCCCCC; +} + +.vpc-network-chart .connector-line .connector-start, +.vpc-network-chart .connector-line .connector-end { + height: 3px; +} + +.vpc-network-chart .connector-line .connector-start { + width: 50px; + margin-left: 18px; +} + +.vpc-network-chart .connector-line .connector-mid { + width: 3px; +} + +.vpc-network-chart .connector-line .connector-end { +} + http://git-wip-us.apache.org/repos/asf/cloudstack/blob/04cc92de/ui/modules/vpc/vpc.js ---------------------------------------------------------------------- diff --git a/ui/modules/vpc/vpc.js b/ui/modules/vpc/vpc.js index a6037c0..1f6745f 100644 --- a/ui/modules/vpc/vpc.js +++ b/ui/modules/vpc/vpc.js @@ -113,6 +113,42 @@ return $tier; }, + connectorLine: function(args) { + var $connector = $('<div></div>').addClass('connector-line'); + var $router = args.$router; + var $tier = args.$tier; + 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); + + // Start line (next to router) + $connectorStart.css({ + top: $router.position().top + ($router.outerHeight() / 2 + ($tier.index() * 30)), + left: $router.position().left + $router.outerWidth() + }); + $connectorStart.width(50 + ($tier.index() * 10)); + + // End line (next to tier) + $connectorEnd.width(50); + $connectorEnd.css({ + top: $tier.position().top + ($tier.outerHeight() / 2), + left: $tier.position().left - $connectorEnd.width() + }); + + // Mid line (connect start->end) + $connectorMid.css({ + left: $connectorEnd.position().left, + top: $connectorEnd.position().top + }); + $connectorMid.height( + $connectorStart.position().top - $connectorEnd.position().top + ); + + return $connector; + }, + router: function(args) { var $router = elems.tier({ context: args.context, @@ -262,10 +298,17 @@ response: { success: function(data) { var tiers = data.tiers; + var $router; var $placeholder = elems.tierPlaceholder({ context: context }); + // Router + $router = elems.router({ + context: context, + dashboardItems: data.routerDashboard + }).appendTo($chart); + $(tiers).map(function(index, tier) { var $tier = elems.tier({ context: context, @@ -273,6 +316,9 @@ dashboardItems: tier._dashboardItems }); $tier.appendTo($tiers); + + // Connect tier to router via line + elems.connectorLine({ $tier: $tier, $router: $router }).appendTo($chart); }); // Add placeholder tier @@ -289,12 +335,6 @@ if (args.complete) { args.complete($chart); } - - // Router - elems.router({ - context: context, - dashboardItems: data.routerDashboard - }).appendTo($chart); } } });
