ONOS-4359: continued work on theming UI
- topo view: fixed device/host badge rendering
- added "mojoColor" mock server scenario
Change-Id: I5d2da657580503abd8015875d45d2e715d44033a
(cherry picked from commit 44c440f)
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index 5cc4171..3a9092d 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -144,31 +144,7 @@
function loadEmbeddedIcon(div, iconCls, size) {
loadIconByClass(div, iconCls, size, true);
}
-
-
- // configuration for device and host icons in the topology view
- var config = {
- device: {
- dim: 36
- },
- host: {
- badge: {
- dx: 14,
- dy: -14
- },
- radius: {
- noGlyph: 9,
- withGlyph: 14
- },
- glyphed: {
- endstation: 1,
- bgpSpeaker: 1,
- router: 1
- }
- }
- };
-
-
+
// Adds a device glyph to the specified element.
// Returns the D3 selection of the glyph (use) element.
function addDeviceIcon(elem, glyphId, iconDim) {
@@ -254,7 +230,6 @@
loadEmbeddedIcon: loadEmbeddedIcon,
addDeviceIcon: addDeviceIcon,
addHostIcon: addHostIcon,
- iconConfig: function () { return config; },
sortIcons: sortIcons,
registerIconMapping: registerIconMapping
};
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 a7bc4b0..e0b88e3 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
@@ -226,7 +226,7 @@
stroke: #a3a596;
fill: #e0dfd6;
}
-#ov-topo svg .node.host.selected circle {
+#ov-topo svg .node.host.selected .hostIcon > circle {
stroke-width: 2.0;
stroke: #009fdb;
}
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 278fc25..5e2c7c5 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoD3.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoD3.js
@@ -39,24 +39,23 @@
*/
// configuration
- var devIconDim = 36;
- var labelPad = 4;
-
- var badgeConfig = {
+ var devIconDim = 36,
+ labelPad = 4,
+ hostRadius = 14,
+ badgeConfig = {
radius: 12,
yoff: 5,
gdelta: 10
+ },
+ halfDevIcon = devIconDim / 2,
+ devBadgeOff = { dx: -halfDevIcon, dy: -halfDevIcon },
+ hostBadgeOff = { dx: -hostRadius, dy: -hostRadius },
+ status = {
+ i: 'badgeInfo',
+ w: 'badgeWarn',
+ e: 'badgeError'
};
- // TODO: remove dependence on this
- var icfg;
-
- var status = {
- i: 'badgeInfo',
- w: 'badgeWarn',
- e: 'badgeError'
- };
-
// NOTE: this type of hack should go away once we have implemented
// the server-side UiModel code.
// {virtual -> cord} is for the E-CORD demo at ONS 2016
@@ -76,7 +75,7 @@
var deviceLabelIndex = 0,
hostLabelIndex = 0;
- // note: these are the device icon colors without affinity
+ // note: these are the device icon colors without affinity (no master)
var dColTheme = {
light: {
online: '#444444',
@@ -160,9 +159,8 @@
.transition()
.attr(iconBox(devIconDim, labelWidth));
- // TODO: verify badge placement
if (bdg) {
- renderBadge(node, bdg, { dx: devIconDim, dy: 0 });
+ renderBadge(node, bdg, devBadgeOff);
}
}
@@ -173,7 +171,7 @@
updateHostLabel(d);
if (bdg) {
- renderBadge(node, bdg, icfg.host.badge);
+ renderBadge(node, bdg, hostBadgeOff);
}
}
@@ -243,7 +241,6 @@
var node = d3.select(this),
glyphId = mapDeviceTypeToGlyph(d.type),
label = trimLabel(deviceLabel(d)),
- xlate = -devIconDim/2,
rect, text, glyph, labelWidth;
d.el = node;
@@ -253,7 +250,7 @@
text = node.append('text').text(label)
.attr('text-anchor', 'left')
.attr('y', '0.3em')
- .attr('x', devIconDim / 2 + labelPad);
+ .attr('x', halfDevIcon + labelPad);
glyph = is.addDeviceIcon(node, glyphId, devIconDim);
@@ -262,20 +259,18 @@
rect.attr(iconBox(devIconDim, labelWidth));
glyph.attr(iconBox(devIconDim, 0));
- node.attr('transform', sus.translate(xlate, xlate));
+ node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
}
function hostEnter(d) {
var node = d3.select(this),
gid = d.type || 'unknown',
- rad = icfg.host.radius,
- r = d.type ? rad.withGlyph : rad.noGlyph,
- textDy = r + 10;
+ textDy = hostRadius + 10;
d.el = node;
sus.visible(node, api.showHosts());
- is.addHostIcon(node, r, gid);
+ is.addHostIcon(node, hostRadius, gid);
node.append('text')
.text(hostLabel)
@@ -527,8 +522,6 @@
ps = _ps_;
ttbs = _ttbs_;
- icfg = is.iconConfig();
-
function initD3(_api_) {
api = _api_;
}
diff --git a/web/gui/src/main/webapp/app/view/topo/topoModel.js b/web/gui/src/main/webapp/app/view/topo/topoModel.js
index d104449..7679fe1 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoModel.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoModel.js
@@ -69,7 +69,7 @@
}
// else if we have [x,y] cached in meta data, use that...
- if (x && y) {
+ if (x !== undefined && y !== undefined) {
node.fixed = true;
node.px = node.x = x;
node.py = node.y = y;