ONOS-1479 - GUI Topology Overlay Work - (WIP)
- UiExtension now uses Builder Pattern; added topology overlay factory.
- Refactored UiExtensionTest (and other classes) to use builder.
- Created UiTopoOverlayFactory, UiTopoOverlay, and TopoOverlayCache.
- Started implementation of TrafficOverlay.
- Inject TopoOverlayCache into TopologyViewMessageHandler; added TopoSelectOverlay request handler.
- Modified UiExtensionManager to create traffic overlay.
- Augmented UiWebSocket to create overlays on demand, and inject overlay cache into topo view message handler.
- added client side wiring to switch overlays.
Change-Id: I6f99596aefb3b87382517ce929d268a2447545ee
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 e1efe47..fd704a6 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoOverlay.js
@@ -30,10 +30,11 @@
var tos = 'TopoOverlayService: ';
// injected refs
- var $log, fs, gs;
+ var $log, fs, gs, wss;
// internal state
- var overlays = {};
+ var overlays = {},
+ current = null;
function error(fn, msg) {
$log.error(tos + fn + '(): ' + msg);
@@ -108,20 +109,42 @@
return overlays[id];
}
+ // an overlay was selected via toolbar radio button press from user
+ function tbSelection(id) {
+ var same = current && current.overlayId === id,
+ payload = {};
+
+ function doop(op) {
+ var oid = current.overlayId;
+ $log.debug('Overlay:', op, oid);
+ current[op]();
+ payload[op] = oid;
+ }
+
+ if (!same) {
+ current && doop('deactivate');
+ current = overlay(id);
+ current && doop('activate');
+ wss.sendEvent('topoSelectOverlay', payload);
+ }
+ }
+
angular.module('ovTopo')
.factory('TopoOverlayService',
- ['$log', 'FnService', 'GlyphService',
+ ['$log', 'FnService', 'GlyphService', 'WebSocketService',
- function (_$log_, _fs_, _gs_) {
+ function (_$log_, _fs_, _gs_, _wss_) {
$log = _$log_;
fs = _fs_;
gs = _gs_;
+ wss = _wss_;
return {
register: register,
unregister: unregister,
list: list,
- overlay: overlay
+ overlay: overlay,
+ tbSelection: tbSelection
}
}]);
diff --git a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
index 342e108..cbf443a 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoToolbar.js
@@ -50,14 +50,14 @@
L: { id: 'cycleLabels-btn', gid: 'cycleLabels' },
R: { id: 'resetZoom-btn', gid: 'resetZoom' },
+ E: { id: 'eqMaster-btn', gid: 'eqMaster' },
+
V: { id: 'relatedIntents-btn', gid: 'relatedIntents' },
leftArrow: { id: 'prevIntent-btn', gid: 'prevIntent' },
rightArrow: { id: 'nextIntent-btn', gid: 'nextIntent' },
W: { id: 'intentTraffic-btn', gid: 'intentTraffic' },
A: { id: 'allTraffic-btn', gid: 'allTraffic' },
- F: { id: 'flows-btn', gid: 'flows' },
-
- E: { id: 'eqMaster-btn', gid: 'eqMaster' }
+ F: { id: 'flows-btn', gid: 'flows' }
};
// initial toggle state: default settings and tag to key mapping
@@ -153,14 +153,6 @@
addButton('E');
}
- function setOverlay(overlayId) {
- if (!overlayId) {
- $log.debug('CLEAR overlay');
- } else {
- $log.debug('SET overlay', overlayId);
- }
- }
-
function addOverlays() {
toolbar.addSeparator();
@@ -168,7 +160,9 @@
var rset = [{
gid: 'unknown',
tooltip: 'No Overlay',
- cb: function () { setOverlay(); }
+ cb: function () {
+ tov.tbSelection(null);
+ }
}];
tov.list().forEach(function (key) {
@@ -177,7 +171,7 @@
gid: ov._glyphId,
tooltip: (ov.tooltip || '(no tooltip)'),
cb: function () {
- setOverlay(ov.overlayId);
+ tov.tbSelection(ov.overlayId);
}
});
});
@@ -186,6 +180,7 @@
}
// TODO: 3rd row needs to be swapped in/out based on selected overlay
+ // NOTE: This particular row of buttons is for the traffic overlay
function addThirdRow() {
addButton('V');
addButton('leftArrow');