diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.js b/web/gui/src/main/webapp/app/view/topo2/topo2.js index 35a3b1efac..94a704f011 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2.js +++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js @@ -25,7 +25,7 @@ // references to injected services var $scope, $log, fs, mast, ks, wss, - gs, sus, t2es, t2fs, t2is, t2bcs, t2kcs, t2ms, t2zs; + gs, sus, t2es, t2fs, t2is, t2bcs, t2kcs, t2ms, t2zs, t2ts; // DOM elements var ovtopo2, svg, defs, zoomLayer, forceG; @@ -100,7 +100,7 @@ 'Topo2BreadcrumbService', 'Topo2KeyCommandService', 'Topo2MapService', 'Topo2ZoomService', 'Topo2SpriteLayerService', 'Topo2SummaryPanelService', 'Topo2DeviceDetailsPanel', 'Topo2ToolbarService', - 'Topo2NoDevicesConnectedService', 'Topo2OverlayService', + 'Topo2NoDevicesConnectedService', 'Topo2OverlayService', 'Topo2TrafficService', function ( _$scope_, _$log_, _$loc_, @@ -109,7 +109,8 @@ _t2es_, _t2fs_, _t2is_, _t2bcs_, _t2kcs_, _t2ms_, _t2zs_, t2sls, - summaryPanel, detailsPanel, t2tbs, t2ndcs, t2os + summaryPanel, detailsPanel, t2tbs, t2ndcs, t2os, + _t2ts_ ) { var params = _$loc_.search(), dim, @@ -136,6 +137,7 @@ t2kcs = _t2kcs_; t2ms = _t2ms_; t2zs = _t2zs_; + t2ts = _t2ts_; // capture selected intent parameters (if they are set in the // query string) so that the traffic overlay can highlight diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js index f8273b20ed..73a2325c9c 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js +++ b/web/gui/src/main/webapp/app/view/topo2/topo2HostsPanel.js @@ -65,7 +65,6 @@ init(); hostData = formatHostData(data); - console.log(data); render(); } @@ -88,7 +87,6 @@ title.text(hostData.title); gs.addGlyph(svg, 'bird', 24, 0, [1, 1]); - console.log() ls.listProps(tbody, hostData); } diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js b/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js index feef3b565a..25cea72d1a 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js +++ b/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js @@ -43,6 +43,13 @@ esc: handleEscape, + // topology overlay selections + F1: function () { t2tbs.fnKey(0); }, + F2: function () { t2tbs.fnKey(1); }, + F3: function () { t2tbs.fnKey(2); }, + F4: function () { t2tbs.fnKey(3); }, + F5: function () { t2tbs.fnKey(4); }, + _keyListener: t2tbs.keyListener.bind(t2tbs), _helpFormat: [ @@ -241,7 +248,7 @@ 'Topo2RegionService', 'Topo2DetailsPanelService', 'SvgUtilService', function (_$log_, _fs_, _ks_, _flash_, _wss_, _t2ps_, _t2bgs_, _ps_, - _t2is_, _t2sp_, _t2vs_, _t2rs_, _t2dp_, _sus_) { + _t2is_, _t2sp_, _t2vs_, _t2rs_, _t2dp_, _t2tbs_, _sus_) { $log = _$log_; fs = _fs_; diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Overlay.js b/web/gui/src/main/webapp/app/view/topo2/topo2Overlay.js index 49f76eac7b..1f26220ddb 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Overlay.js +++ b/web/gui/src/main/webapp/app/view/topo2/topo2Overlay.js @@ -26,7 +26,8 @@ // internal state var overlays = {}, - current = null; + current = null, + reset = true; function error(fn, msg) { $log.error(t2os + fn + '(): ' + msg); @@ -36,6 +37,39 @@ $log.warn(t2os + fn + '(): ' + msg); } + function mkGlyphId(oid, gid) { + return (gid[0] === '*') ? oid + '-' + gid.slice(1) : gid; + } + + function handleGlyphs(o) { + var gdata = fs.isO(o.glyphs), + oid = o.overlayId, + gid = o.glyphId || 'unknown', + data = {}, + note = []; + + o._glyphId = mkGlyphId(oid, gid); + + o.mkGid = function (g) { + return mkGlyphId(oid, g); + }; + o.mkId = function (s) { + return oid + '-' + s; + }; + + // process glyphs if defined + if (gdata) { + angular.forEach(gdata, function (value, key) { + var fullkey = oid + '-' + key; + data['_' + fullkey] = value.vb; + data[fullkey] = value.d; + note.push('*' + key); + }); + gs.registerGlyphs(data); + $log.debug('registered overlay glyphs:', oid, note); + } + } + function register(overlay) { var r = 'register', over = fs.isO(overlay), @@ -49,7 +83,7 @@ return warn(r, 'already registered: "' + id + '"'); } overlays[id] = overlay; - // TODO handleGlyphs(overlay) ... see topoOverlay.js + handleGlyphs(overlay); if (kb) { if (!fs.isA(kb._keyOrder)) { @@ -66,6 +100,48 @@ $log.debug(t2os + 'registered overlay: ' + id, overlay); } + // add a radio button for each registered overlay + // return an overlay id to index map + function augmentRbset(rset, switchFn) { + var map = {}, + idx = 1; + + angular.forEach(overlays, function (ov) { + rset.push({ + gid: ov._glyphId, + tooltip: (ov.tooltip || ''), + cb: function () { + tbSelection(ov.overlayId, switchFn); + }, + }); + map[ov.overlayId] = idx++; + }); + return map; + } + + // an overlay was selected via toolbar radio button press from user + function tbSelection(id, switchFn) { + var same = current && current.overlayId === id, + payload = {}, + actions; + + function doop(op) { + var oid = current.overlayId; + $log.debug('Overlay:', op, oid); + current[op](); + payload[op] = oid; + } + + if (reset || !same) { + current && doop('deactivate'); + current = overlays[id]; + current && doop('activate'); + actions = current && fs.isO(current.keyBindings); + switchFn(id, actions); + // TODO: Update Summary Panel + } + } + // TODO: check topoOverlay.js for more code // TODO: medium term -- factor out common code // TODO: longer term -- deprecate classic topology view @@ -163,6 +239,9 @@ return { register: register, setOverlay: setOverlay, + augmentRbset: augmentRbset, + tbSelection: tbSelection, + mkGlyphId: mkGlyphId, hooks: { escape: escapeHook, diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Toolbar.js b/web/gui/src/main/webapp/app/view/topo2/topo2Toolbar.js index ae1cc90c76..c9e5285dd4 100644 --- a/web/gui/src/main/webapp/app/view/topo2/topo2Toolbar.js +++ b/web/gui/src/main/webapp/app/view/topo2/topo2Toolbar.js @@ -26,13 +26,12 @@ var k2b = { O: { id: 'topo2-summary-tog', gid: 'm_summary', isel: true }, I: { id: 'topo2-instance-tog', gid: 'm_uiAttached', isel: true }, - // D: { id: 'details-tog', gid: 'm_details', isel: true }, - // H: { id: 'hosts-tog', gid: 'm_endstation', isel: false }, - // M: { id: 'offline-tog', gid: 'm_switch', isel: true }, + D: { id: 'details-tog', gid: 'm_details', isel: true }, + H: { id: 'hosts-tog', gid: 'm_endstation', isel: false }, + M: { id: 'offline-tog', gid: 'm_switch', isel: true }, P: { id: 'topo2-ports-tog', gid: 'm_ports', isel: true }, B: { id: 'topo2-bkgrnd-tog', gid: 'm_map', isel: true }, - // Z: { id: 'oblique-tog', gid: 'm_oblique', isel: false }, // N: { id: 'filters-btn', gid: 'm_filters' }, L: { id: 'topo2-cycleLabels-btn', gid: 'm_cycleLabels' }, R: { id: 'topo2-resetZoom-btn', gid: 'm_resetZoom' }, @@ -43,7 +42,8 @@ angular.module('ovTopo2') .factory('Topo2ToolbarService', [ 'FnService', 'ToolbarService', 'Topo2KeyCommandService', - function (fs, tbs, t2kcs) { + 'Topo2OverlayService', + function (fs, tbs, t2kcs, t2ov) { var Toolbar = function () { instance = this; @@ -55,11 +55,14 @@ init: function () { this.el = tbs.createToolbar(this.className); + this.radioSet; + this.ovIndex; + this.initKeyData(); this.addFirstRow(); this.el.addRow(); this.addSecondRow(); - + this.addOverlays(); this.el.hide(); }, initKeyData: function () { @@ -97,20 +100,34 @@ this.el.toggle(); }, + selectOverlay: function (ovid) { + var index = this.ovIndex[defaultOverlay] || 0, + pidx = (ovid === null) ? 0 : this.ovIndex[ovid] || -1; + if (pidx >= 0 && pidx < this.radioSet.size()) { + index = pidx; + } + + this.radioSet.selectedIndex(index); + }, + + fnKey: function (index) { + if (index < this.radioSet.size() && index !== this.radioSet.selectedIndex()) { + this.radioSet.selectedIndex(index); + } + }, + addFirstRow: function () { this.addToggle('I'); this.addToggle('O'); - // this.addToggle('D'); + this.addToggle('D'); this.el.addSeparator(); - // this.addToggle('H'); - // this.addToggle('M'); + this.addToggle('H'); + this.addToggle('M'); this.addToggle('P', true); this.addToggle('B'); }, addSecondRow: function () { - // addToggle('X'); - // this.addToggle('Z'); // this.addButton('N'); this.addButton('L'); this.addButton('R'); @@ -118,6 +135,28 @@ this.addButton('E'); }, + switchOverlayActions: function () { + // TODO: see TopoToolbar.js + // NOTE: Should add overlay buttons on the third row + }, + + addOverlays: function () { + var _this = this; // Keep context in callback + this.el.addSeparator(); + + // generate radio button set for overlays; start with 'none' + var rset = [{ + gid: 'm_unknown', + tooltip: 'ov_tt_none', + cb: function () { + t2ov.tbSelection(null, _this.switchOverlayActions); + }, + }]; + + t2ov.augmentRbset(rset, this.switchOverlayActions); + this.radioSet = this.el.addRadioSet('topo-overlays', rset); + }, + destroy: function () { // TODO: Should the tbs remove button id's in the destroyToolbar method? // If you go topo2 -> topo -> topo2 there's a button id conflict