ONOS-2186 - GUI Topo Overlay - (WIP)
- Showing traffic on selected intent now subdues other elements.
- Augmented Highlights to allow for retrieval by ID.
- Reparented HostHighlight and DeviceHighlight to NodeHighlight.
- Added a few extra highlight unit tests.
Change-Id: I0de1cefdcfda58a6fec6e90be5fe898d35aa1b37
diff --git a/web/gui/src/main/webapp/app/view/topo/topoForce.js b/web/gui/src/main/webapp/app/view/topo/topoForce.js
index 555fa50..dbe8f9f 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoForce.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoForce.js
@@ -242,6 +242,10 @@
// ========================
+ function nodeById(id) {
+ return lu[id];
+ }
+
function makeNodeKey(node1, node2) {
return node1 + '-' + node2;
}
@@ -515,10 +519,10 @@
});
}
- function unsuppressLink(id, less) {
+ function unsuppressLink(key, less) {
var cls = supAmt(less);
link.each(function (n) {
- if (n.id === id) {
+ if (n.key === key) {
n.el.classed(cls, false);
}
});
@@ -922,6 +926,7 @@
clearLinkTrafficStyle: clearLinkTrafficStyle,
removeLinkLabels: removeLinkLabels,
findLinkById: tms.findLinkById,
+ findNodeById: nodeById,
updateLinks: updateLinks,
updateNodes: updateNodes,
supLayers: suppressLayers,
diff --git a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
index 4a432e0..6bd7762 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
@@ -301,11 +301,12 @@
clearLinkTrafficStyle()
removeLinkLabels()
findLinkById( id )
+ findNodeById( id )
updateLinks()
updateNodes()
supLayers( bool, [less] )
unsupNode( id, [less] )
- unsupLink( id, [less] )
+ unsupLink( key, [less] )
*/
// TODO: clear node highlighting
@@ -322,16 +323,30 @@
api.supLayers(false, true);
}
- // TODO: device and host highlights
+ data.hosts.forEach(function (host) {
+ var hdata = api.findNodeById(host.id);
+ if (hdata && !hdata.el.empty()) {
+ api.unsupNode(hdata.id, less);
+ // TODO: further highlighting?
+ }
+ });
- data.links.forEach(function (lnk) {
- var ldata = api.findLinkById(lnk.id),
- lab = lnk.label,
+ data.devices.forEach(function (device) {
+ var ddata = api.findNodeById(device.id);
+ if (ddata && !ddata.el.empty()) {
+ api.unsupNode(ddata.id, less);
+ // TODO: further highlighting?
+ }
+ });
+
+ data.links.forEach(function (link) {
+ var ldata = api.findLinkById(link.id),
+ lab = link.label,
units, portcls, magnitude;
if (ldata && !ldata.el.empty()) {
- api.unsupLink(ldata.id, less);
- ldata.el.classed(lnk.css, true);
+ api.unsupLink(ldata.key, less);
+ ldata.el.classed(link.css, true);
ldata.label = lab;
// inject additional styling for port-based traffic