You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by bf...@apache.org on 2013/06/04 02:05:53 UTC
git commit: updated refs/heads/master to e71a54b
Updated Branches:
refs/heads/master 84634d4cf -> e71a54b3a
VPC UI: Add tier connector lines to chart
On VPC chart, connect router to tier networks via graph lines.
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/e71a54b3
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/e71a54b3
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/e71a54b3
Branch: refs/heads/master
Commit: e71a54b3a9fc96ec3b69112db5aefc9ceb478cd7
Parents: 84634d4
Author: Brian Federle <bf...@gmail.com>
Authored: Mon Jun 3 16:52:09 2013 -0700
Committer: Brian Federle <bf...@gmail.com>
Committed: Mon Jun 3 17:05:42 2013 -0700
----------------------------------------------------------------------
ui/modules/vpc/vpc.css | 51 +++++++++++++++++++-----
ui/modules/vpc/vpc.js | 90 ++++++++++++++++++++++++++++++++++++++----
2 files changed, 122 insertions(+), 19 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/e71a54b3/ui/modules/vpc/vpc.css
----------------------------------------------------------------------
diff --git a/ui/modules/vpc/vpc.css b/ui/modules/vpc/vpc.css
index 51c3f7e..466ce80 100644
--- a/ui/modules/vpc/vpc.css
+++ b/ui/modules/vpc/vpc.css
@@ -21,6 +21,8 @@
width: 100%;
height: 100%;
overflow: auto;
+ overflow-x: hidden;
+ position: relative;
}
.vpc-network-chart .tiers {
@@ -247,29 +249,29 @@
float: left;
/*+placement:shift 10px 176px;*/
position: relative;
- left: 10px;
- top: 176px;
+ left: 0px;
+ top: 214px;
}
.vpc-network-chart .tier-item.router .header {
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 +313,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/e71a54b3/ui/modules/vpc/vpc.js
----------------------------------------------------------------------
diff --git a/ui/modules/vpc/vpc.js b/ui/modules/vpc/vpc.js
index a6037c0..a3c2ec7 100644
--- a/ui/modules/vpc/vpc.js
+++ b/ui/modules/vpc/vpc.js
@@ -113,6 +113,64 @@
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);
+
+ var posStartOffsetLeft = 5;
+ var posStartOffsetTop = 10;
+ var posStart = {
+ top: $router.position().top + ($router.outerHeight() / 2 + ($tier.index() * posStartOffsetTop)),
+ left: $router.position().left + $router.outerWidth()
+ };
+ var posStartWidth = 60 - (($tier.index() + 1) * posStartOffsetLeft);
+
+ var posEndOffset = 15;
+ var posEnd = {
+ top: $tier.position().top + ($tier.outerHeight() / 2),
+ left: posStart.left + posStartWidth + posEndOffset
+ };
+ var posEndWidth = Math.abs($tier.position().left -
+ (posStart.left + posStartWidth)) - posEndOffset;
+
+ // Start line (next to router)
+ $connectorStart.css({
+ top: posStart.top,
+ left: posStart.left
+ });
+ $connectorStart.width(posStartWidth);
+
+ // End line (next to tier)
+ $connectorEnd.css({
+ top: posEnd.top,
+ left: posEnd.left
+ });
+ $connectorEnd.width(posEndWidth);
+
+ // Mid line (connect start->end)
+ if (posStart.top > posEnd.top) { // Tier above router
+ $connectorMid.css({
+ top: posEnd.top,
+ left: posEnd.left
+ });
+ $connectorMid.height(posStart.top - posEnd.top);
+ } else { // Tier below router
+ $connectorMid.css({
+ top: posStart.top,
+ left: posStart.left + posStartWidth + posEndOffset
+ });
+ $connectorMid.height(posEnd.top - posStart.top);
+ }
+
+ return $connector;
+ },
+
router: function(args) {
var $router = elems.tier({
context: args.context,
@@ -171,7 +229,7 @@
var section = cloudStack.vpc.sections[id];
var $section = $('<div>');
var $loading = $('<div>').addClass('loading-overlay');
-
+
if ($.isFunction(section)) {
section = cloudStack.vpc.sections[id]();
}
@@ -193,7 +251,7 @@
$section.appendTo($panel);
}
- });
+ });
};
if (before) {
@@ -262,10 +320,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 +338,14 @@
dashboardItems: tier._dashboardItems
});
$tier.appendTo($tiers);
+
+ // Connect tier to router via line
+ //
+ // -- 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);
+ });
});
// Add placeholder tier
@@ -289,12 +362,6 @@
if (args.complete) {
args.complete($chart);
}
-
- // Router
- elems.router({
- context: context,
- dashboardItems: data.routerDashboard
- }).appendTo($chart);
}
}
});
@@ -303,6 +370,7 @@
chart({
complete: function($newChart) {
$chart.replaceWith($newChart);
+ $newChart.trigger('cloudStack.vpc.chartReady');
}
});
});
@@ -314,7 +382,11 @@
title: vpcItem.displaytext ? vpcItem.displaytext : vpcItem.name,
maximizeIfSelected: true,
complete: function($panel) {
- var $chart = chart();
+ var $chart = chart({
+ complete: function($chart) {
+ $chart.trigger('cloudStack.vpc.chartReady');
+ }
+ });
$chart.appendTo($panel);
}