ONOS-3518: Refactored badge-rendering code.
- augmented badges test scenario.
Change-Id: I7cef224daacfd52056440fb2ad068002f740b51f
diff --git a/web/gui/src/main/webapp/app/view/topo/topoD3.js b/web/gui/src/main/webapp/app/view/topo/topoD3.js
index 168e9ce..5bf2eb4 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -200,7 +200,6 @@
};
}
-
function updateDeviceRendering(d) {
var label = trimLabel(deviceLabel(d)),
noLabel = !label,
@@ -237,76 +236,50 @@
// handle badge, if defined
if (bdg) {
- node.select('g.badge').remove();
-
- bsel = node.append('g')
- .classed('badge', true)
- .classed(badgeStatus(bdg), true)
- .attr('transform', sus.translate(dx + dim, dy));
-
- bsel.append('circle')
- .attr('r', bcr);
-
- if (bdg.txt) {
- bsel.append('text')
- .attr('dy', badgeConfig.yoff)
- .attr('text-anchor', 'middle')
- .text(bdg.txt);
- } else if (bdg.gid) {
- bsel.append('use')
- .attr({
- width: bcgd * 2,
- height: bcgd * 2,
- transform: sus.translate(-bcgd, -bcgd),
- 'xlink:href': '#' + bdg.gid
- });
-
- }
+ renderBadge(node, bdg, { dx: dx + dim, dy: dy });
}
}
function updateHostRendering(d) {
var node = d.el,
- dim = icfg.host.radius.withGlyph,
- box, dx, dy, bsel,
- bdg = d.badge,
- bcr = badgeConfig.radius,
- bcgd = badgeConfig.gdelta;
-
+ bdg = d.badge;
updateHostLabel(d);
-
- // TODO: fine-tune dx, dy for badge placement relative to host Circle.
- dx = -dim/2;
- dy = -dim/2;
// handle badge, if defined
if (bdg) {
- node.select('g.badge').remove();
+ renderBadge(node, bdg, icfg.host.badge);
+ }
+ }
- bsel = node.append('g')
- .classed('badge', true)
- .classed(badgeStatus(bdg), true)
- .attr('transform', sus.translate(dx + dim, dy));
+ function renderBadge(node, bdg, boff) {
+ var bsel,
+ bcr = badgeConfig.radius,
+ bcgd = badgeConfig.gdelta;
- bsel.append('circle')
- .attr('r', bcr);
+ node.select('g.badge').remove();
- if (bdg.txt) {
- bsel.append('text')
- .attr('dy', badgeConfig.yoff)
- .attr('text-anchor', 'middle')
- .text(bdg.txt);
- } else if (bdg.gid) {
- bsel.append('use')
- .attr({
- width: bcgd * 2,
- height: bcgd * 2,
- transform: sus.translate(-bcgd, -bcgd),
- 'xlink:href': '#' + bdg.gid
- });
+ bsel = node.append('g')
+ .classed('badge', true)
+ .classed(badgeStatus(bdg), true)
+ .attr('transform', sus.translate(boff.dx, boff.dy));
- }
+ bsel.append('circle')
+ .attr('r', bcr);
+
+ if (bdg.txt) {
+ bsel.append('text')
+ .attr('dy', badgeConfig.yoff)
+ .attr('text-anchor', 'middle')
+ .text(bdg.txt);
+ } else if (bdg.gid) {
+ bsel.append('use')
+ .attr({
+ width: bcgd * 2,
+ height: bcgd * 2,
+ transform: sus.translate(-bcgd, -bcgd),
+ 'xlink:href': '#' + bdg.gid
+ });
}
}