GUI Topo -- Badges - Fixed glyph positioning. Added CSS for info/warn/error statuses.
Change-Id: I9e37863a3425df9a9ecd2d20f5526e4f63c6ad00
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index f4b089a..255ddbc 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -427,6 +427,39 @@
fill: #f90;
}
+/* Badges */
+/* (... works for both light and dark themes...) */
+#ov-topo svg .node .badge circle {
+ stroke: #aaa;
+}
+
+#ov-topo svg .node .badge.badgeInfo circle {
+ fill: #ccf;
+}
+
+#ov-topo svg .node .badge.badgeWarn circle {
+ fill: #da2;
+}
+
+#ov-topo svg .node .badge.badgeError circle {
+ fill: #e44;
+}
+
+#ov-topo svg .node .badge use {
+ fill: white;
+}
+
+#ov-topo svg .node .badge.badgeInfo use {
+ fill: #448;
+}
+
+#ov-topo svg .node .badge text {
+ fill: white;
+}
+
+#ov-topo svg .node .badge.badgeInfo text {
+ fill: #448;
+}
/* Host Nodes */
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 8353de5..1d2c5b1 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -57,7 +57,8 @@
},
badgeConfig = {
radius: 12,
- yoff: 5
+ yoff: 5,
+ gdelta: 10
},
icfg;
@@ -207,7 +208,8 @@
dim = icfg.device.dim,
box, dx, dy, bsel,
bdg = d.badge,
- bcr = badgeConfig.radius;
+ bcr = badgeConfig.radius,
+ bcgd = badgeConfig.gdelta;
node.select('text')
.text(label)
@@ -235,6 +237,8 @@
// handle badge, if defined
if (bdg) {
+ node.select('g.badge').remove();
+
bsel = node.append('g')
.classed('badge', true)
.classed(badgeStatus(bdg), true)
@@ -251,8 +255,9 @@
} else if (bdg.gid) {
bsel.append('use')
.attr({
- width: bcr * 2,
- height: bcr * 2,
+ width: bcgd * 2,
+ height: bcgd * 2,
+ transform: sus.translate(-bcgd, -bcgd),
'xlink:href': '#' + bdg.gid
});