Skip to content

Commit e71a54b

Browse files
bfederlebfederle
committed
VPC UI: Add tier connector lines to chart
On VPC chart, connect router to tier networks via graph lines.
1 parent 84634d4 commit e71a54b

2 files changed

Lines changed: 122 additions & 19 deletions

File tree

‎ui/modules/vpc/vpc.css‎

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@
2121
width: 100%;
2222
height: 100%;
2323
overflow: auto;
24+
overflow-x: hidden;
25+
position: relative;
2426
}
2527

2628
.vpc-network-chart .tiers {
@@ -247,29 +249,29 @@
247249
float: left;
248250
/*+placement:shift 10px 176px;*/
249251
position: relative;
250-
left: 10px;
251-
top: 176px;
252+
left: 0px;
253+
top: 214px;
252254
}
253255

254256
.vpc-network-chart .tier-item.router .header {
255257
padding: 15px 0 14px;
256258
border-bottom: 1px solid #808080;
257259
background: #C3C6C9;
258-
/*Old browsers*/
260+
/*Old browsers*/
259261
background: -moz-linear-gradient(top, #c3c6c9 0%, #909497 100%);
260-
/*FF3.6+*/
262+
/*FF3.6+*/
261263
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3c6c9), color-stop(100%,#909497));
262-
/*Chrome,Safari4+*/
264+
/*Chrome,Safari4+*/
263265
background: -webkit-linear-gradient(top, #c3c6c9 0%,#909497 100%);
264-
/*Chrome10+,Safari5.1+*/
266+
/*Chrome10+,Safari5.1+*/
265267
background: -o-linear-gradient(top, #c3c6c9 0%,#909497 100%);
266-
/*Opera 11.10+*/
268+
/*Opera 11.10+*/
267269
background: -ms-linear-gradient(top, #c3c6c9 0%,#909497 100%);
268-
/*IE10+*/
270+
/*IE10+*/
269271
background: linear-gradient(to bottom, #c3c6c9 0%,#909497 100%);
270-
/*W3C*/
272+
/*W3C*/
271273
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3c6c9', endColorstr='#909497',GradientType=0 );
272-
/*IE6-8*/
274+
/*IE6-8*/
273275
}
274276

275277
.vpc-network-chart .tier-item.router .header .title {
@@ -311,3 +313,32 @@
311313
background-color: #818181;
312314
}
313315

316+
.vpc-network-chart .connector-line {
317+
}
318+
319+
.vpc-network-chart .connector-line .connector-start,
320+
.vpc-network-chart .connector-line .connector-mid,
321+
.vpc-network-chart .connector-line .connector-end {
322+
position: absolute;
323+
top: 0px;
324+
left: 0px;
325+
background: #CCCCCC;
326+
}
327+
328+
.vpc-network-chart .connector-line .connector-start,
329+
.vpc-network-chart .connector-line .connector-end {
330+
height: 3px;
331+
}
332+
333+
.vpc-network-chart .connector-line .connector-start {
334+
width: 50px;
335+
margin-left: 18px;
336+
}
337+
338+
.vpc-network-chart .connector-line .connector-mid {
339+
width: 3px;
340+
}
341+
342+
.vpc-network-chart .connector-line .connector-end {
343+
}
344+

‎ui/modules/vpc/vpc.js‎

Lines changed: 81 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,64 @@
113113
return $tier;
114114
},
115115

116+
connectorLine: function(args) {
117+
var $connector = $('<div></div>').addClass('connector-line');
118+
var $router = args.$router;
119+
var $tier = args.$tier;
120+
var $connectorStart = $('<div></div>').addClass('connector-start');
121+
var $connectorMid = $('<div></div>').addClass('connector-mid');
122+
var $connectorEnd = $('<div></div>').addClass('connector-end');
123+
124+
$connector.append($connectorStart, $connectorMid, $connectorEnd);
125+
126+
var posStartOffsetLeft = 5;
127+
var posStartOffsetTop = 10;
128+
var posStart = {
129+
top: $router.position().top + ($router.outerHeight() / 2 + ($tier.index() * posStartOffsetTop)),
130+
left: $router.position().left + $router.outerWidth()
131+
};
132+
var posStartWidth = 60 - (($tier.index() + 1) * posStartOffsetLeft);
133+
134+
var posEndOffset = 15;
135+
var posEnd = {
136+
top: $tier.position().top + ($tier.outerHeight() / 2),
137+
left: posStart.left + posStartWidth + posEndOffset
138+
};
139+
var posEndWidth = Math.abs($tier.position().left -
140+
(posStart.left + posStartWidth)) - posEndOffset;
141+
142+
// Start line (next to router)
143+
$connectorStart.css({
144+
top: posStart.top,
145+
left: posStart.left
146+
});
147+
$connectorStart.width(posStartWidth);
148+
149+
// End line (next to tier)
150+
$connectorEnd.css({
151+
top: posEnd.top,
152+
left: posEnd.left
153+
});
154+
$connectorEnd.width(posEndWidth);
155+
156+
// Mid line (connect start->end)
157+
if (posStart.top > posEnd.top) { // Tier above router
158+
$connectorMid.css({
159+
top: posEnd.top,
160+
left: posEnd.left
161+
});
162+
$connectorMid.height(posStart.top - posEnd.top);
163+
} else { // Tier below router
164+
$connectorMid.css({
165+
top: posStart.top,
166+
left: posStart.left + posStartWidth + posEndOffset
167+
});
168+
$connectorMid.height(posEnd.top - posStart.top);
169+
}
170+
171+
return $connector;
172+
},
173+
116174
router: function(args) {
117175
var $router = elems.tier({
118176
context: args.context,
@@ -171,7 +229,7 @@
171229
var section = cloudStack.vpc.sections[id];
172230
var $section = $('<div>');
173231
var $loading = $('<div>').addClass('loading-overlay');
174-
232+
175233
if ($.isFunction(section)) {
176234
section = cloudStack.vpc.sections[id]();
177235
}
@@ -193,7 +251,7 @@
193251

194252
$section.appendTo($panel);
195253
}
196-
});
254+
});
197255
};
198256

199257
if (before) {
@@ -262,17 +320,32 @@
262320
response: {
263321
success: function(data) {
264322
var tiers = data.tiers;
323+
var $router;
265324
var $placeholder = elems.tierPlaceholder({
266325
context: context
267326
});
268327

328+
// Router
329+
$router = elems.router({
330+
context: context,
331+
dashboardItems: data.routerDashboard
332+
}).appendTo($chart);
333+
269334
$(tiers).map(function(index, tier) {
270335
var $tier = elems.tier({
271336
context: context,
272337
tier: tier,
273338
dashboardItems: tier._dashboardItems
274339
});
275340
$tier.appendTo($tiers);
341+
342+
// Connect tier to router via line
343+
//
344+
// -- Needs to execute after chart generation is complete,
345+
// so that chart elements have positioning in place.
346+
$chart.bind('cloudStack.vpc.chartReady', function() {
347+
elems.connectorLine({ $tier: $tier, $router: $router }).appendTo($chart);
348+
});
276349
});
277350

278351
// Add placeholder tier
@@ -289,12 +362,6 @@
289362
if (args.complete) {
290363
args.complete($chart);
291364
}
292-
293-
// Router
294-
elems.router({
295-
context: context,
296-
dashboardItems: data.routerDashboard
297-
}).appendTo($chart);
298365
}
299366
}
300367
});
@@ -303,6 +370,7 @@
303370
chart({
304371
complete: function($newChart) {
305372
$chart.replaceWith($newChart);
373+
$newChart.trigger('cloudStack.vpc.chartReady');
306374
}
307375
});
308376
});
@@ -314,7 +382,11 @@
314382
title: vpcItem.displaytext ? vpcItem.displaytext : vpcItem.name,
315383
maximizeIfSelected: true,
316384
complete: function($panel) {
317-
var $chart = chart();
385+
var $chart = chart({
386+
complete: function($chart) {
387+
$chart.trigger('cloudStack.vpc.chartReady');
388+
}
389+
});
318390

319391
$chart.appendTo($panel);
320392
}

0 commit comments

Comments
 (0)