Committed by
Gerrit Code Review
ONOS-3518: Refactored badge-rendering code.
- augmented badges test scenario. Change-Id: I7cef224daacfd52056440fb2ad068002f740b51f
Showing
11 changed files
with
117 additions
and
45 deletions
... | @@ -452,7 +452,7 @@ html[data-platform='iPad'] #topo-p-detail { | ... | @@ -452,7 +452,7 @@ html[data-platform='iPad'] #topo-p-detail { |
452 | } | 452 | } |
453 | 453 | ||
454 | #ov-topo svg .node .badge.badgeInfo circle { | 454 | #ov-topo svg .node .badge.badgeInfo circle { |
455 | - fill: #ccf; | 455 | + fill: #99d; |
456 | } | 456 | } |
457 | 457 | ||
458 | #ov-topo svg .node .badge.badgeWarn circle { | 458 | #ov-topo svg .node .badge.badgeWarn circle { |
... | @@ -464,7 +464,7 @@ html[data-platform='iPad'] #topo-p-detail { | ... | @@ -464,7 +464,7 @@ html[data-platform='iPad'] #topo-p-detail { |
464 | } | 464 | } |
465 | 465 | ||
466 | #ov-topo svg .node .badge use { | 466 | #ov-topo svg .node .badge use { |
467 | - fill: white; | 467 | + fill: white !important; |
468 | } | 468 | } |
469 | 469 | ||
470 | #ov-topo svg .node .badge.badgeInfo use { | 470 | #ov-topo svg .node .badge.badgeInfo use { |
... | @@ -472,7 +472,7 @@ html[data-platform='iPad'] #topo-p-detail { | ... | @@ -472,7 +472,7 @@ html[data-platform='iPad'] #topo-p-detail { |
472 | } | 472 | } |
473 | 473 | ||
474 | #ov-topo svg .node .badge text { | 474 | #ov-topo svg .node .badge text { |
475 | - fill: white; | 475 | + fill: white !important; |
476 | } | 476 | } |
477 | 477 | ||
478 | #ov-topo svg .node .badge.badgeInfo text { | 478 | #ov-topo svg .node .badge.badgeInfo text { | ... | ... |
... | @@ -200,7 +200,6 @@ | ... | @@ -200,7 +200,6 @@ |
200 | }; | 200 | }; |
201 | } | 201 | } |
202 | 202 | ||
203 | - | ||
204 | function updateDeviceRendering(d) { | 203 | function updateDeviceRendering(d) { |
205 | var label = trimLabel(deviceLabel(d)), | 204 | var label = trimLabel(deviceLabel(d)), |
206 | noLabel = !label, | 205 | noLabel = !label, |
... | @@ -237,57 +236,33 @@ | ... | @@ -237,57 +236,33 @@ |
237 | 236 | ||
238 | // handle badge, if defined | 237 | // handle badge, if defined |
239 | if (bdg) { | 238 | if (bdg) { |
240 | - node.select('g.badge').remove(); | 239 | + renderBadge(node, bdg, { dx: dx + dim, dy: dy }); |
241 | - | ||
242 | - bsel = node.append('g') | ||
243 | - .classed('badge', true) | ||
244 | - .classed(badgeStatus(bdg), true) | ||
245 | - .attr('transform', sus.translate(dx + dim, dy)); | ||
246 | - | ||
247 | - bsel.append('circle') | ||
248 | - .attr('r', bcr); | ||
249 | - | ||
250 | - if (bdg.txt) { | ||
251 | - bsel.append('text') | ||
252 | - .attr('dy', badgeConfig.yoff) | ||
253 | - .attr('text-anchor', 'middle') | ||
254 | - .text(bdg.txt); | ||
255 | - } else if (bdg.gid) { | ||
256 | - bsel.append('use') | ||
257 | - .attr({ | ||
258 | - width: bcgd * 2, | ||
259 | - height: bcgd * 2, | ||
260 | - transform: sus.translate(-bcgd, -bcgd), | ||
261 | - 'xlink:href': '#' + bdg.gid | ||
262 | - }); | ||
263 | - | ||
264 | - } | ||
265 | } | 240 | } |
266 | } | 241 | } |
267 | 242 | ||
268 | function updateHostRendering(d) { | 243 | function updateHostRendering(d) { |
269 | var node = d.el, | 244 | var node = d.el, |
270 | - dim = icfg.host.radius.withGlyph, | 245 | + bdg = d.badge; |
271 | - box, dx, dy, bsel, | ||
272 | - bdg = d.badge, | ||
273 | - bcr = badgeConfig.radius, | ||
274 | - bcgd = badgeConfig.gdelta; | ||
275 | - | ||
276 | 246 | ||
277 | updateHostLabel(d); | 247 | updateHostLabel(d); |
278 | 248 | ||
279 | - // TODO: fine-tune dx, dy for badge placement relative to host Circle. | ||
280 | - dx = -dim/2; | ||
281 | - dy = -dim/2; | ||
282 | - | ||
283 | // handle badge, if defined | 249 | // handle badge, if defined |
284 | if (bdg) { | 250 | if (bdg) { |
251 | + renderBadge(node, bdg, icfg.host.badge); | ||
252 | + } | ||
253 | + } | ||
254 | + | ||
255 | + function renderBadge(node, bdg, boff) { | ||
256 | + var bsel, | ||
257 | + bcr = badgeConfig.radius, | ||
258 | + bcgd = badgeConfig.gdelta; | ||
259 | + | ||
285 | node.select('g.badge').remove(); | 260 | node.select('g.badge').remove(); |
286 | 261 | ||
287 | bsel = node.append('g') | 262 | bsel = node.append('g') |
288 | .classed('badge', true) | 263 | .classed('badge', true) |
289 | .classed(badgeStatus(bdg), true) | 264 | .classed(badgeStatus(bdg), true) |
290 | - .attr('transform', sus.translate(dx + dim, dy)); | 265 | + .attr('transform', sus.translate(boff.dx, boff.dy)); |
291 | 266 | ||
292 | bsel.append('circle') | 267 | bsel.append('circle') |
293 | .attr('r', bcr); | 268 | .attr('r', bcr); |
... | @@ -305,8 +280,6 @@ | ... | @@ -305,8 +280,6 @@ |
305 | transform: sus.translate(-bcgd, -bcgd), | 280 | transform: sus.translate(-bcgd, -bcgd), |
306 | 'xlink:href': '#' + bdg.gid | 281 | 'xlink:href': '#' + bdg.gid |
307 | }); | 282 | }); |
308 | - | ||
309 | - } | ||
310 | } | 283 | } |
311 | } | 284 | } |
312 | 285 | ... | ... |
1 | +{ | ||
2 | + "event": "addHost", | ||
3 | + "payload": { | ||
4 | + "id": "0E:2A:69:30:13:97/-1", | ||
5 | + "ingress": "0E:2A:69:30:13:97/-1/0-of:0000000000000002/3", | ||
6 | + "egress": "of:0000000000000002/3-0E:2A:69:30:13:97/-1/0", | ||
7 | + "cp": { | ||
8 | + "device": "of:0000000000000002", | ||
9 | + "port": 3 | ||
10 | + }, | ||
11 | + "labels": [ | ||
12 | + "192.168.0.2", | ||
13 | + "0E:2A:69:30:13:97" | ||
14 | + ], | ||
15 | + "metaUi": { | ||
16 | + "x": 340, | ||
17 | + "y": 100 | ||
18 | + }, | ||
19 | + "props": {} | ||
20 | + } | ||
21 | +} |
1 | +{ | ||
2 | + "event": "addHost", | ||
3 | + "payload": { | ||
4 | + "id": "0E:2A:69:30:13:a8/-1", | ||
5 | + "ingress": "0E:2A:69:30:13:a8/-1/0-of:0000000000000002/4", | ||
6 | + "egress": "of:0000000000000002/4-0E:2A:69:30:13:a8/-1/0", | ||
7 | + "cp": { | ||
8 | + "device": "of:0000000000000002", | ||
9 | + "port": 4 | ||
10 | + }, | ||
11 | + "labels": [ | ||
12 | + "192.168.0.3", | ||
13 | + "0E:2A:69:30:13:a8" | ||
14 | + ], | ||
15 | + "metaUi": { | ||
16 | + "x": 480, | ||
17 | + "y": 90 | ||
18 | + }, | ||
19 | + "props": {} | ||
20 | + } | ||
21 | +} |
1 | +{ | ||
2 | + "event": "showHighlights", | ||
3 | + "payload": { | ||
4 | + "devices": [], | ||
5 | + "hosts": [ | ||
6 | + { | ||
7 | + "id": "0E:2A:69:30:13:86/-1", | ||
8 | + "badge": { | ||
9 | + "status": "e", | ||
10 | + "txt": "99", | ||
11 | + "msg": "cadbury's flake" | ||
12 | + } | ||
13 | + }, | ||
14 | + { | ||
15 | + "id": "0E:2A:69:30:13:97/-1", | ||
16 | + "badge": { | ||
17 | + "status": "i", | ||
18 | + "gid": "xMark", | ||
19 | + "msg": "x marks the spot" | ||
20 | + } | ||
21 | + }, | ||
22 | + { | ||
23 | + "id": "0E:2A:69:30:13:a8/-1", | ||
24 | + "badge": { | ||
25 | + "status": "w", | ||
26 | + "gid": "crown" | ||
27 | + } | ||
28 | + } | ||
29 | + ], | ||
30 | + "links": [] | ||
31 | + } | ||
32 | +} |
1 | +{ | ||
2 | + "event": "addHost", | ||
3 | + "payload": { | ||
4 | + "id": "0E:2A:69:30:13:86/-1", | ||
5 | + "ingress": "0E:2A:69:30:13:86/-1/0-of:0000000000000001/2", | ||
6 | + "egress": "of:0000000000000001/2-0E:2A:69:30:13:86/-1/0", | ||
7 | + "cp": { | ||
8 | + "device": "of:0000000000000001", | ||
9 | + "port": 2 | ||
10 | + }, | ||
11 | + "labels": [ | ||
12 | + "192.168.0.1", | ||
13 | + "0E:2A:69:30:13:86" | ||
14 | + ], | ||
15 | + "metaUi": { | ||
16 | + "x": 210, | ||
17 | + "y": 100 | ||
18 | + }, | ||
19 | + "props": {} | ||
20 | + } | ||
21 | +} |
1 | { | 1 | { |
2 | "comments": [ | 2 | "comments": [ |
3 | - "Demo of adding badges to devices" | 3 | + "Demo of adding badges to devices and hosts" |
4 | ], | 4 | ], |
5 | "title": "Demo adding badges", | 5 | "title": "Demo adding badges", |
6 | "params": { | 6 | "params": { |
7 | - "lastAuto": 9 | 7 | + "lastAuto": 12 |
8 | }, | 8 | }, |
9 | "description": [ | 9 | "description": [ |
10 | - "Demonstrate the device badging feature." | 10 | + "Demonstrate the device/host badging feature." |
11 | ] | 11 | ] |
12 | } | 12 | } | ... | ... |
-
Please register or login to post a comment