Update topo devices / hosts to new glyphs (mojo designs)
Change-Id: I8d8a5a7b01b0a13a269288bd99e971d5ca9349fc
diff --git a/web/gui/src/main/webapp/app/view/topo/topo-theme.css b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
index 7b15a0d..80021d5 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
@@ -159,7 +159,7 @@
}
#ov-topo svg .node.device use {
/*TODO: theme*/
- fill: #777;
+ fill: #eee;
}
@@ -170,8 +170,7 @@
fill: #3c3a3a;
}
#ov-topo svg .node.device.online use {
- /* NOTE: this gets overridden programatically */
- fill: #454545;
+ fill: #fff;
}
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 5b669ce..f9fc421 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -40,6 +40,7 @@
// configuration
var devIconDim = 36,
+ devColorDim = 32,
labelPad = 4,
hostRadius = 14,
badgeConfig = {
@@ -60,13 +61,32 @@
// the server-side UiModel code.
// {virtual -> cord} is for the E-CORD demo at ONS 2016
var remappedDeviceTypes = {
- virtual: 'cord'
+ virtual: 'cord',
+
+ // for now, map to the new glyphs via this lookup.
+ // may have to find a better way to do this...
+ 'switch': 'm_switch',
+ roadm: 'm_roadm',
+ otn: 'm_otn',
+ roadm_otn: 'm_roadm_otn',
+ fiber_switch: 'm_fiberSwitch',
+ microwave: 'm_microwave',
+ };
+
+ var remappedHostTypes = {
+ router: 'm_router',
+ endstation: 'm_endstation',
+ bgpSpeaker: 'm_bgpSpeaker'
};
function mapDeviceTypeToGlyph(type) {
return remappedDeviceTypes[type] || type || 'unknown';
}
+ function mapHostTypeToGlyph(type) {
+ return remappedHostTypes[type] || type || 'unknown';
+ }
+
function badgeStatus(badge) {
return status[badge.status] || status.i;
}
@@ -97,7 +117,8 @@
}
function setDeviceColor(d) {
- d.el.select('use')
+ // want to color the square rectangle (no longer the 'use' glyph)
+ d.el.selectAll('rect').filter(function (d, i) {return i === 1;})
.style('fill', devGlyphColor(d));
}
@@ -241,11 +262,12 @@
var node = d3.select(this),
glyphId = mapDeviceTypeToGlyph(d.type),
label = trimLabel(deviceLabel(d)),
- rect, text, glyph, labelWidth;
+ rect, crect, text, glyph, labelWidth;
d.el = node;
rect = node.append('rect');
+ crect = node.append('rect');
text = node.append('text').text(label)
.attr('text-anchor', 'left')
@@ -257,6 +279,7 @@
labelWidth = label ? computeLabelWidth(node) : 0;
rect.attr(iconBox(devIconDim, labelWidth));
+ crect.attr(iconBox(devColorDim, 0));
glyph.attr(iconBox(devIconDim, 0));
node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
@@ -264,13 +287,13 @@
function hostEnter(d) {
var node = d3.select(this),
- gid = d.type || 'unknown',
+ glyphId = mapHostTypeToGlyph(d.type),
textDy = hostRadius + 10;
d.el = node;
sus.visible(node, api.showHosts());
- is.addHostIcon(node, hostRadius, gid);
+ is.addHostIcon(node, hostRadius, glyphId);
node.append('text')
.text(hostLabel)