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
Showing
7 changed files
with
286 additions
and
8 deletions
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> | ... | ... |
-
Please register or login to post a comment