mirror of https://github.com/apache/cloudstack.git
VPC UI: Add tier connector lines to chart
On VPC chart, connect router to tier networks via graph lines.
This commit is contained in:
Brian Federle
parent
84634d4cf6
commit
e71a54b3a9
|
|
@ -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 {
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue