mirror of
https://github.com/opennetworkinglab/onos.git
synced 2026-05-04 11:51:43 +02:00
ONOS-7190 - Adding the missing Toolbar items (for current functionality)
ONOS-7188 - Added Overlay Key Commands The traffic overlay was added to the Toolbar for testing purposes Change-Id: I59947080763a3fa67394f3a0e222b99491d4b646
This commit is contained in:
Steven Burrows
Thomas Vachuska
parent
e7f5101319
commit
58bdbddcf2
@ -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
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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_;
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user