Simon Hunt

ONOS-1479 - GUI Topology Overlay Work - (WIP)

- created TopoOverlayService to allow registration of topology overlays
- modified topoToolbar to include a radio button set for each registered overlay
- created seed traffic overlay

Change-Id: I70770cb1c691730914c81e497823ea08703587f1
1 +// sample topology overlay - client side
2 +(function () {
3 + 'use strict';
4 +
5 + // injected refs
6 + var $log;
7 +
8 + // our overlay definition
9 + var overlay = {
10 + overlayId: 'sampleTopoOver',
11 +
12 + // NOTE: for the glyph, could alternately use id: <existingGlyphId>
13 + // instead of defining viewbox and data (vb, d)
14 + // glyph: { id: 'crown' }
15 + glyph: {
16 + vb: '0 0 8 8',
17 + d: 'M1,4l2,-1l1,-2l1,2l2,1l-2,1l-1,2l-1,-2z'
18 + },
19 + tooltip: 'Sample Topology Overlay',
20 +
21 + activate: activateOverlay,
22 + deactivate: deactivateOverlay
23 + };
24 +
25 + // === implementation of overlay API (essentially callbacks)
26 + function activateOverlay() {
27 + $log.debug("sample topology overlay ACTIVATED");
28 + }
29 +
30 + function deactivateOverlay() {
31 + $log.debug("sample topology overlay DEACTIVATED");
32 + }
33 +
34 +
35 + // invoke code to register with the overlay service
36 + angular.module('ovSample')
37 + .run(['$log', 'TopoOverlayService',
38 +
39 + function (_$log_, tov) {
40 + $log = _$log_;
41 + tov.register(overlay);
42 + }]);
43 +
44 +}());
...@@ -477,7 +477,6 @@ ...@@ -477,7 +477,6 @@
477 } 477 }
478 478
479 function init() { 479 function init() {
480 - clear();
481 registerGlyphs(birdData); 480 registerGlyphs(birdData);
482 registerGlyphSet(glyphDataSet); 481 registerGlyphSet(glyphDataSet);
483 registerGlyphSet(badgeDataSet); 482 registerGlyphSet(badgeDataSet);
...@@ -595,6 +594,10 @@ ...@@ -595,6 +594,10 @@
595 addGlyph: addGlyph 594 addGlyph: addGlyph
596 }; 595 };
597 }] 596 }]
598 - ); 597 + )
598 + .run(['$log', function ($log) {
599 + $log.debug('Clearing glyph cache');
600 + clear();
601 + }]);
599 602
600 }()); 603 }());
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
30 30
31 // references to injected services etc. 31 // references to injected services etc.
32 var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps, 32 var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps,
33 - tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, ttip; 33 + tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, ttip, tov;
34 34
35 // DOM elements 35 // DOM elements
36 var ovtopo, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer; 36 var ovtopo, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
...@@ -396,11 +396,12 @@ ...@@ -396,11 +396,12 @@
396 'TopoInstService', 'TopoSelectService', 'TopoLinkService', 396 'TopoInstService', 'TopoSelectService', 'TopoLinkService',
397 'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService', 397 'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
398 'TopoToolbarService', 'TopoSpriteService', 'TooltipService', 398 'TopoToolbarService', 'TopoSpriteService', 'TooltipService',
399 + 'TopoOverlayService',
399 400
400 function (_$scope_, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_, 401 function (_$scope_, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_,
401 _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _tes_, _tfs_, 402 _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _tes_, _tfs_,
402 _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_, _ttbs_, tspr, 403 _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_, _ttbs_, tspr,
403 - _ttip_) { 404 + _ttip_, _tov_) {
404 var projection, 405 var projection,
405 dim, 406 dim,
406 uplink = { 407 uplink = {
...@@ -438,6 +439,7 @@ ...@@ -438,6 +439,7 @@
438 fltr = _fltr_; 439 fltr = _fltr_;
439 ttbs = _ttbs_; 440 ttbs = _ttbs_;
440 ttip = _ttip_; 441 ttip = _ttip_;
442 + tov = _tov_;
441 443
442 $scope.notifyResize = function () { 444 $scope.notifyResize = function () {
443 svgResized(fs.windowSize(mast.mastHeight())); 445 svgResized(fs.windowSize(mast.mastHeight()));
...@@ -496,6 +498,8 @@ ...@@ -496,6 +498,8 @@
496 // temporary solution for persisting user settings 498 // temporary solution for persisting user settings
497 restoreConfigFromPrefs(); 499 restoreConfigFromPrefs();
498 500
501 + $log.debug('registered overlays...', tov.list());
502 +
499 $log.log('OvTopoCtrl has been created'); 503 $log.log('OvTopoCtrl has been created');
500 }]); 504 }]);
501 }()); 505 }());
......
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + *
16 + */
17 +
18 +/*
19 + ONOS GUI -- Topology Overlay Module.
20 +
21 + Provides overlay capabilities, allowing ONOS apps to provide additional
22 + custom data/behavior for the topology view.
23 +
24 + */
25 +
26 +(function () {
27 + 'use strict';
28 +
29 + // constants
30 + var tos = 'TopoOverlayService: ';
31 +
32 + // injected refs
33 + var $log, fs, gs;
34 +
35 + // internal state
36 + var overlays = {};
37 +
38 + function error(fn, msg) {
39 + $log.error(tos + fn + '(): ' + msg);
40 + }
41 +
42 + function warn(fn, msg) {
43 + $log.warn(tos + fn + '(): ' + msg);
44 + }
45 +
46 + function handleGlyph(o) {
47 + var gdata = fs.isO(o.glyph),
48 + oid,
49 + data = {};
50 +
51 + if (!gdata) {
52 + o._glyphId = 'unknown';
53 + } else {
54 + if (gdata.id) {
55 + o._glyphId = gdata.id;
56 + } else if (gdata.vb && gdata.d) {
57 + oid = o.overlayId;
58 + data['_' + oid] = gdata.vb;
59 + data[oid] = gdata.d;
60 + gs.registerGlyphs(data);
61 + o._glyphId = oid;
62 + $log.debug('registered overlay glyph:', oid);
63 + } else {
64 + warn('registerGlyph', 'problem with glyph data');
65 + }
66 + }
67 + }
68 +
69 + function register(overlay) {
70 + var r = 'register',
71 + over = fs.isO(overlay),
72 + id = over ? over.overlayId : '';
73 +
74 + if (!id) {
75 + return error(r, 'not a recognized overlay');
76 + }
77 + if (overlays[id]) {
78 + return warn(r, 'already registered: "' + id + '"');
79 + }
80 + overlays[id] = overlay;
81 + handleGlyph(overlay);
82 + $log.debug(tos + 'registered overlay: ' + id, overlay);
83 + }
84 +
85 + // NOTE: unregister needs to be called if an app is ever
86 + // deactivated/uninstalled via the applications view
87 + function unregister(overlay) {
88 + var u = 'unregister',
89 + over = fs.isO(overlay),
90 + id = over ? over.overlayId : '';
91 +
92 + if (!id) {
93 + return error(u, 'not a recognized overlay');
94 + }
95 + if (!overlays[id]) {
96 + return warn(u, 'not registered: "' + id + "'")
97 + }
98 + delete overlays[id];
99 + $log.debug(tos + 'unregistered overlay: ' + id);
100 + // TODO: rebuild the toolbar overlay radio button set
101 + }
102 +
103 + function list() {
104 + return d3.map(overlays).keys();
105 + }
106 +
107 + function overlay(id) {
108 + return overlays[id];
109 + }
110 +
111 + angular.module('ovTopo')
112 + .factory('TopoOverlayService',
113 + ['$log', 'FnService', 'GlyphService',
114 +
115 + function (_$log_, _fs_, _gs_) {
116 + $log = _$log_;
117 + fs = _fs_;
118 + gs = _gs_;
119 +
120 + return {
121 + register: register,
122 + unregister: unregister,
123 + list: list,
124 + overlay: overlay
125 + }
126 + }]);
127 +
128 +}());
...\ No newline at end of file ...\ No newline at end of file
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 'use strict'; 23 'use strict';
24 24
25 // injected references 25 // injected references
26 - var $log, fs, tbs, ps, api; 26 + var $log, fs, tbs, ps, tov, api;
27 27
28 // internal state 28 // internal state
29 var toolbar, keyData, cachedState; 29 var toolbar, keyData, cachedState;
...@@ -142,13 +142,50 @@ ...@@ -142,13 +142,50 @@
142 addToggle('B'); 142 addToggle('B');
143 addToggle('S', true); 143 addToggle('S', true);
144 } 144 }
145 +
145 function addSecondRow() { 146 function addSecondRow() {
146 //addToggle('X'); 147 //addToggle('X');
147 addToggle('Z'); 148 addToggle('Z');
148 addButton('N'); 149 addButton('N');
149 addButton('L'); 150 addButton('L');
150 addButton('R'); 151 addButton('R');
152 + toolbar.addSeparator();
153 + addButton('E');
154 + }
155 +
156 + function setOverlay(overlayId) {
157 + if (!overlayId) {
158 + $log.debug('CLEAR overlay');
159 + } else {
160 + $log.debug('SET overlay', overlayId);
161 + }
162 + }
163 +
164 + function addOverlays() {
165 + toolbar.addSeparator();
166 +
167 + // generate radio button set for overlays; start with 'none'
168 + var rset = [{
169 + gid: 'unknown',
170 + tooltip: 'No Overlay',
171 + cb: function () { setOverlay(); }
172 + }];
173 +
174 + tov.list().forEach(function (key) {
175 + var ov = tov.overlay(key);
176 + rset.push({
177 + gid: ov._glyphId,
178 + tooltip: (ov.tooltip || '(no tooltip)'),
179 + cb: function () {
180 + setOverlay(ov.overlayId);
181 + }
182 + });
183 + });
184 +
185 + toolbar.addRadioSet('topo-overlays', rset);
151 } 186 }
187 +
188 + // TODO: 3rd row needs to be swapped in/out based on selected overlay
152 function addThirdRow() { 189 function addThirdRow() {
153 addButton('V'); 190 addButton('V');
154 addButton('leftArrow'); 191 addButton('leftArrow');
...@@ -156,8 +193,6 @@ ...@@ -156,8 +193,6 @@
156 addButton('W'); 193 addButton('W');
157 addButton('A'); 194 addButton('A');
158 addButton('F'); 195 addButton('F');
159 - toolbar.addSeparator();
160 - addButton('E');
161 } 196 }
162 197
163 function createToolbar() { 198 function createToolbar() {
...@@ -166,8 +201,10 @@ ...@@ -166,8 +201,10 @@
166 addFirstRow(); 201 addFirstRow();
167 toolbar.addRow(); 202 toolbar.addRow();
168 addSecondRow(); 203 addSecondRow();
204 + addOverlays();
169 toolbar.addRow(); 205 toolbar.addRow();
170 addThirdRow(); 206 addThirdRow();
207 +
171 if (cachedState.toolbar) { 208 if (cachedState.toolbar) {
172 toolbar.show(); 209 toolbar.show();
173 } else { 210 } else {
...@@ -199,12 +236,14 @@ ...@@ -199,12 +236,14 @@
199 angular.module('ovTopo') 236 angular.module('ovTopo')
200 .factory('TopoToolbarService', 237 .factory('TopoToolbarService',
201 ['$log', 'FnService', 'ToolbarService', 'PrefsService', 238 ['$log', 'FnService', 'ToolbarService', 'PrefsService',
239 + 'TopoOverlayService',
202 240
203 - function (_$log_, _fs_, _tbs_, _ps_) { 241 + function (_$log_, _fs_, _tbs_, _ps_, _tov_) {
204 $log = _$log_; 242 $log = _$log_;
205 fs = _fs_; 243 fs = _fs_;
206 tbs = _tbs_; 244 tbs = _tbs_;
207 ps = _ps_; 245 ps = _ps_;
246 + tov = _tov_;
208 247
209 return { 248 return {
210 init: init, 249 init: init,
......
1 +/*
2 + * Copyright 2015 Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + *
16 + */
17 +
18 +/*
19 + ONOS GUI -- Topology Traffic Module.
20 + Defines behavior for viewing different traffic modes.
21 + Installed as a Topology Overlay.
22 + */
23 +(function () {
24 + 'use strict';
25 +
26 + // injected refs
27 + var $log;
28 +
29 + // traffic overlay definition
30 + var overlay = {
31 + overlayId: 'traffic',
32 + glyph: { id: 'allTraffic' },
33 + tooltip: 'Traffic Overlay',
34 +
35 + activate: activateTraffic,
36 + deactivate: deactivateTraffic
37 + };
38 +
39 + // === implementation of overlay API (essentially callbacks)
40 + function activateTraffic() {
41 + $log.debug("Topology traffic overlay ACTIVATED");
42 + }
43 +
44 + function deactivateTraffic() {
45 + $log.debug("Topology traffic overlay DEACTIVATED");
46 + }
47 +
48 +
49 + // invoke code to register with the overlay service
50 + angular.module('ovTopo')
51 + .run(['$log', 'TopoOverlayService',
52 +
53 + function (_$log_, tov) {
54 + $log = _$log_;
55 + tov.register(overlay);
56 + }]);
57 +
58 +}());
...@@ -104,10 +104,12 @@ ...@@ -104,10 +104,12 @@
104 <script src="app/view/topo/topoLink.js"></script> 104 <script src="app/view/topo/topoLink.js"></script>
105 <script src="app/view/topo/topoModel.js"></script> 105 <script src="app/view/topo/topoModel.js"></script>
106 <script src="app/view/topo/topoOblique.js"></script> 106 <script src="app/view/topo/topoOblique.js"></script>
107 + <script src="app/view/topo/topoOverlay.js"></script>
107 <script src="app/view/topo/topoPanel.js"></script> 108 <script src="app/view/topo/topoPanel.js"></script>
108 <script src="app/view/topo/topoSelect.js"></script> 109 <script src="app/view/topo/topoSelect.js"></script>
109 <script src="app/view/topo/topoSprite.js"></script> 110 <script src="app/view/topo/topoSprite.js"></script>
110 <script src="app/view/topo/topoTraffic.js"></script> 111 <script src="app/view/topo/topoTraffic.js"></script>
112 + <script src="app/view/topo/topoTrafficNew.js"></script>
111 <script src="app/view/topo/topoToolbar.js"></script> 113 <script src="app/view/topo/topoToolbar.js"></script>
112 <script src="app/view/device/device.js"></script> 114 <script src="app/view/device/device.js"></script>
113 <script src="app/view/flow/flow.js"></script> 115 <script src="app/view/flow/flow.js"></script>
......