GUI -- TopoView - Reimplemented 'traffic' related functionality.
Change-Id: I86d16324e4ce2cd2e0eb8d8f48f72804d7ce101f
Showing
10 changed files
with
368 additions
and
72 deletions
... | @@ -86,6 +86,7 @@ | ... | @@ -86,6 +86,7 @@ |
86 | <script src="view/topo/topoModel.js"></script> | 86 | <script src="view/topo/topoModel.js"></script> |
87 | <script src="view/topo/topoPanel.js"></script> | 87 | <script src="view/topo/topoPanel.js"></script> |
88 | <script src="view/topo/topoSelect.js"></script> | 88 | <script src="view/topo/topoSelect.js"></script> |
89 | + <script src="view/topo/topoTraffic.js"></script> | ||
89 | <script src="view/device/device.js"></script> | 90 | <script src="view/device/device.js"></script> |
90 | <!-- TODO: inject javascript refs server-side --> | 91 | <!-- TODO: inject javascript refs server-side --> |
91 | 92 | ... | ... |
... | @@ -28,7 +28,7 @@ | ... | @@ -28,7 +28,7 @@ |
28 | ]; | 28 | ]; |
29 | 29 | ||
30 | // references to injected services etc. | 30 | // references to injected services etc. |
31 | - var $log, fs, ks, zs, gs, ms, sus, tes, tfs, tps, tis, tss; | 31 | + var $log, fs, ks, zs, gs, ms, sus, tes, tfs, tps, tis, tss, tts; |
32 | 32 | ||
33 | // DOM elements | 33 | // DOM elements |
34 | var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer; | 34 | var ovtopo, svg, defs, zoomLayer, mapG, forceG, noDevsLayer; |
... | @@ -57,12 +57,12 @@ | ... | @@ -57,12 +57,12 @@ |
57 | U: [tfs.unpin, 'Unpin node (hover mouse over)'], | 57 | U: [tfs.unpin, 'Unpin node (hover mouse over)'], |
58 | R: [resetZoom, 'Reset pan / zoom'], | 58 | R: [resetZoom, 'Reset pan / zoom'], |
59 | 59 | ||
60 | - //V: [showRelatedIntentsAction, 'Show all related intents'], | 60 | + V: [tts.showRelatedIntentsAction, 'Show all related intents'], |
61 | - //rightArrow: [showNextIntentAction, 'Show next related intent'], | 61 | + rightArrow: [tts.showNextIntentAction, 'Show next related intent'], |
62 | - //leftArrow: [showPrevIntentAction, 'Show previous related intent'], | 62 | + leftArrow: [tts.showPrevIntentAction, 'Show previous related intent'], |
63 | - //W: [showSelectedIntentTrafficAction, 'Monitor traffic of selected intent'], | 63 | + W: [tts.showSelectedIntentTrafficAction, 'Monitor traffic of selected intent'], |
64 | - //A: [showAllTrafficAction, 'Monitor all traffic'], | 64 | + A: [tts.showAllTrafficAction, 'Monitor all traffic'], |
65 | - //F: [showDeviceLinkFlowsAction, 'Show device link flows'], | 65 | + F: [tts.showDeviceLinkFlowsAction, 'Show device link flows'], |
66 | 66 | ||
67 | //E: [equalizeMasters, 'Equalize mastership roles'], | 67 | //E: [equalizeMasters, 'Equalize mastership roles'], |
68 | 68 | ||
... | @@ -222,11 +222,11 @@ | ... | @@ -222,11 +222,11 @@ |
222 | 'FnService', 'MastService', 'KeyService', 'ZoomService', | 222 | 'FnService', 'MastService', 'KeyService', 'ZoomService', |
223 | 'GlyphService', 'MapService', 'SvgUtilService', | 223 | 'GlyphService', 'MapService', 'SvgUtilService', |
224 | 'TopoEventService', 'TopoForceService', 'TopoPanelService', | 224 | 'TopoEventService', 'TopoForceService', 'TopoPanelService', |
225 | - 'TopoInstService', 'TopoSelectService', | 225 | + 'TopoInstService', 'TopoSelectService', 'TopoTrafficService', |
226 | 226 | ||
227 | function ($scope, _$log_, $loc, $timeout, _fs_, mast, | 227 | function ($scope, _$log_, $loc, $timeout, _fs_, mast, |
228 | _ks_, _zs_, _gs_, _ms_, _sus_, | 228 | _ks_, _zs_, _gs_, _ms_, _sus_, |
229 | - _tes_, _tfs_, _tps_, _tis_, _tss_) { | 229 | + _tes_, _tfs_, _tps_, _tis_, _tss_, _tts_) { |
230 | var self = this, | 230 | var self = this, |
231 | projection, | 231 | projection, |
232 | dim, | 232 | dim, |
... | @@ -249,6 +249,7 @@ | ... | @@ -249,6 +249,7 @@ |
249 | tps = _tps_; | 249 | tps = _tps_; |
250 | tis = _tis_; | 250 | tis = _tis_; |
251 | tss = _tss_; | 251 | tss = _tss_; |
252 | + tts = _tts_; | ||
252 | 253 | ||
253 | self.notifyResize = function () { | 254 | self.notifyResize = function () { |
254 | svgResized(fs.windowSize(mast.mastHeight())); | 255 | svgResized(fs.windowSize(mast.mastHeight())); | ... | ... |
... | @@ -27,7 +27,7 @@ | ... | @@ -27,7 +27,7 @@ |
27 | 'use strict'; | 27 | 'use strict'; |
28 | 28 | ||
29 | // injected refs | 29 | // injected refs |
30 | - var $log, wss, wes, tps, tis, tfs, tss; | 30 | + var $log, wss, wes, tps, tis, tfs, tss, tts; |
31 | 31 | ||
32 | // internal state | 32 | // internal state |
33 | var wsock, evApis; | 33 | var wsock, evApis; |
... | @@ -40,6 +40,8 @@ | ... | @@ -40,6 +40,8 @@ |
40 | 40 | ||
41 | showDetails: tss, | 41 | showDetails: tss, |
42 | 42 | ||
43 | + showTraffic: tts, | ||
44 | + | ||
43 | addInstance: tis, | 45 | addInstance: tis, |
44 | updateInstance: tis, | 46 | updateInstance: tis, |
45 | removeInstance: tis, | 47 | removeInstance: tis, |
... | @@ -53,8 +55,6 @@ | ... | @@ -53,8 +55,6 @@ |
53 | addLink: tfs, | 55 | addLink: tfs, |
54 | updateLink: tfs, | 56 | updateLink: tfs, |
55 | removeLink: tfs | 57 | removeLink: tfs |
56 | - | ||
57 | - // TODO: add remaining event api vectors | ||
58 | }; | 58 | }; |
59 | } | 59 | } |
60 | 60 | ||
... | @@ -106,9 +106,10 @@ | ... | @@ -106,9 +106,10 @@ |
106 | .factory('TopoEventService', | 106 | .factory('TopoEventService', |
107 | ['$log', '$location', 'WebSocketService', 'WsEventService', | 107 | ['$log', '$location', 'WebSocketService', 'WsEventService', |
108 | 'TopoPanelService', 'TopoInstService', 'TopoForceService', | 108 | 'TopoPanelService', 'TopoInstService', 'TopoForceService', |
109 | - 'TopoSelectService', | 109 | + 'TopoSelectService', 'TopoTrafficService', |
110 | 110 | ||
111 | - function (_$log_, $loc, _wss_, _wes_, _tps_, _tis_, _tfs_, _tss_) { | 111 | + function (_$log_, $loc, _wss_, _wes_, |
112 | + _tps_, _tis_, _tfs_, _tss_, _tts_) { | ||
112 | $log = _$log_; | 113 | $log = _$log_; |
113 | wss = _wss_; | 114 | wss = _wss_; |
114 | wes = _wes_; | 115 | wes = _wes_; |
... | @@ -116,6 +117,7 @@ | ... | @@ -116,6 +117,7 @@ |
116 | tis = _tis_; | 117 | tis = _tis_; |
117 | tfs = _tfs_; | 118 | tfs = _tfs_; |
118 | tss = _tss_; | 119 | tss = _tss_; |
120 | + tts = _tts_; | ||
119 | 121 | ||
120 | bindApis(); | 122 | bindApis(); |
121 | 123 | ... | ... |
... | @@ -23,7 +23,7 @@ | ... | @@ -23,7 +23,7 @@ |
23 | 'use strict'; | 23 | 'use strict'; |
24 | 24 | ||
25 | // injected refs | 25 | // injected refs |
26 | - var $log, fs, sus, is, ts, flash, tis, tms, tss, icfg, uplink; | 26 | + var $log, fs, sus, is, ts, flash, tis, tms, tss, tts, icfg, uplink; |
27 | 27 | ||
28 | // configuration | 28 | // configuration |
29 | var labelConfig = { | 29 | var labelConfig = { |
... | @@ -996,6 +996,21 @@ | ... | @@ -996,6 +996,21 @@ |
996 | return true; | 996 | return true; |
997 | } | 997 | } |
998 | 998 | ||
999 | + // ========================== | ||
1000 | + // function entry points for traffic module | ||
1001 | + | ||
1002 | + var allTrafficClasses = 'primary secondary animated optical'; | ||
1003 | + | ||
1004 | + function clearLinkTrafficStyle() { | ||
1005 | + link.style('stroke-width', null) | ||
1006 | + .classed(allTrafficClasses, false); | ||
1007 | + } | ||
1008 | + | ||
1009 | + function removeLinkLabels() { | ||
1010 | + network.links.forEach(function (d) { | ||
1011 | + d.label = ''; | ||
1012 | + }); | ||
1013 | + } | ||
999 | 1014 | ||
1000 | // ========================== | 1015 | // ========================== |
1001 | // Module definition | 1016 | // Module definition |
... | @@ -1018,13 +1033,27 @@ | ... | @@ -1018,13 +1033,27 @@ |
1018 | }; | 1033 | }; |
1019 | } | 1034 | } |
1020 | 1035 | ||
1036 | + function mkTrafficApi(uplink) { | ||
1037 | + return { | ||
1038 | + clearLinkTrafficStyle: clearLinkTrafficStyle, | ||
1039 | + removeLinkLabels: removeLinkLabels, | ||
1040 | + updateLinks: updateLinks, | ||
1041 | + findLinkById: tms.findLinkById, | ||
1042 | + hovered: tss.hovered, | ||
1043 | + validateSelectionContext: tss.validateSelectionContext, | ||
1044 | + selectOrder: tss.selectOrder, | ||
1045 | + sendEvent: uplink.sendEvent | ||
1046 | + } | ||
1047 | + } | ||
1048 | + | ||
1021 | angular.module('ovTopo') | 1049 | angular.module('ovTopo') |
1022 | .factory('TopoForceService', | 1050 | .factory('TopoForceService', |
1023 | ['$log', 'FnService', 'SvgUtilService', 'IconService', 'ThemeService', | 1051 | ['$log', 'FnService', 'SvgUtilService', 'IconService', 'ThemeService', |
1024 | 'FlashService', 'TopoInstService', 'TopoModelService', | 1052 | 'FlashService', 'TopoInstService', 'TopoModelService', |
1025 | - 'TopoSelectService', | 1053 | + 'TopoSelectService', 'TopoTrafficService', |
1026 | 1054 | ||
1027 | - function (_$log_, _fs_, _sus_, _is_, _ts_, _flash_, _tis_, _tms_, _tss_) { | 1055 | + function (_$log_, _fs_, _sus_, _is_, _ts_, _flash_, |
1056 | + _tis_, _tms_, _tss_, _tts_) { | ||
1028 | $log = _$log_; | 1057 | $log = _$log_; |
1029 | fs = _fs_; | 1058 | fs = _fs_; |
1030 | sus = _sus_; | 1059 | sus = _sus_; |
... | @@ -1034,6 +1063,7 @@ | ... | @@ -1034,6 +1063,7 @@ |
1034 | tis = _tis_; | 1063 | tis = _tis_; |
1035 | tms = _tms_; | 1064 | tms = _tms_; |
1036 | tss = _tss_; | 1065 | tss = _tss_; |
1066 | + tts = _tts_; | ||
1037 | 1067 | ||
1038 | icfg = is.iconConfig(); | 1068 | icfg = is.iconConfig(); |
1039 | 1069 | ||
... | @@ -1049,6 +1079,7 @@ | ... | @@ -1049,6 +1079,7 @@ |
1049 | 1079 | ||
1050 | tms.initModel(mkModelApi(uplink), dim); | 1080 | tms.initModel(mkModelApi(uplink), dim); |
1051 | tss.initSelect(mkSelectApi(uplink)); | 1081 | tss.initSelect(mkSelectApi(uplink)); |
1082 | + tts.initTraffic(mkTrafficApi(uplink)); | ||
1052 | 1083 | ||
1053 | settings = angular.extend({}, defaultSettings, opts); | 1084 | settings = angular.extend({}, defaultSettings, opts); |
1054 | 1085 | ||
... | @@ -1083,7 +1114,9 @@ | ... | @@ -1083,7 +1114,9 @@ |
1083 | } | 1114 | } |
1084 | 1115 | ||
1085 | function destroyForce() { | 1116 | function destroyForce() { |
1086 | - | 1117 | + tts.destroyTraffic(); |
1118 | + tss.destroySelect(); | ||
1119 | + tms.destroyModel(); | ||
1087 | } | 1120 | } |
1088 | 1121 | ||
1089 | return { | 1122 | return { | ... | ... |
... | @@ -376,9 +376,12 @@ | ... | @@ -376,9 +376,12 @@ |
376 | dim = _dim_; | 376 | dim = _dim_; |
377 | } | 377 | } |
378 | 378 | ||
379 | + function destroyModel() { } | ||
380 | + | ||
379 | return { | 381 | return { |
380 | initModel: initModel, | 382 | initModel: initModel, |
381 | newDim: newDim, | 383 | newDim: newDim, |
384 | + destroyModel: destroyModel, | ||
382 | 385 | ||
383 | positionNode: positionNode, | 386 | positionNode: positionNode, |
384 | createDeviceNode: createDeviceNode, | 387 | createDeviceNode: createDeviceNode, | ... | ... |
... | @@ -23,7 +23,7 @@ | ... | @@ -23,7 +23,7 @@ |
23 | 'use strict'; | 23 | 'use strict'; |
24 | 24 | ||
25 | // injected refs | 25 | // injected refs |
26 | - var $log, fs, flash, tps; | 26 | + var $log, fs, flash, tps, tts; |
27 | 27 | ||
28 | // api to topoForce | 28 | // api to topoForce |
29 | var api; | 29 | var api; |
... | @@ -65,7 +65,7 @@ | ... | @@ -65,7 +65,7 @@ |
65 | $log.debug("MouseOver()...", m); | 65 | $log.debug("MouseOver()...", m); |
66 | if (hovered != m) { | 66 | if (hovered != m) { |
67 | hovered = m; | 67 | hovered = m; |
68 | - requestTrafficForMode(); | 68 | + tts.requestTrafficForMode(); |
69 | } | 69 | } |
70 | } | 70 | } |
71 | } | 71 | } |
... | @@ -74,7 +74,7 @@ | ... | @@ -74,7 +74,7 @@ |
74 | if (!m.dragStarted) { | 74 | if (!m.dragStarted) { |
75 | if (hovered) { | 75 | if (hovered) { |
76 | hovered = null; | 76 | hovered = null; |
77 | - requestTrafficForMode(); | 77 | + tts.requestTrafficForMode(); |
78 | } | 78 | } |
79 | $log.debug("MouseOut()...", m); | 79 | $log.debug("MouseOut()...", m); |
80 | } | 80 | } |
... | @@ -118,8 +118,6 @@ | ... | @@ -118,8 +118,6 @@ |
118 | n.classed('selected', true); | 118 | n.classed('selected', true); |
119 | api.updateDeviceColors(obj); | 119 | api.updateDeviceColors(obj); |
120 | updateDetail(); | 120 | updateDetail(); |
121 | - | ||
122 | - debugSel(); | ||
123 | } | 121 | } |
124 | 122 | ||
125 | function deselectObject(id) { | 123 | function deselectObject(id) { |
... | @@ -130,8 +128,6 @@ | ... | @@ -130,8 +128,6 @@ |
130 | fs.removeFromArray(id, selectOrder); | 128 | fs.removeFromArray(id, selectOrder); |
131 | api.updateDeviceColors(obj.obj); | 129 | api.updateDeviceColors(obj.obj); |
132 | } | 130 | } |
133 | - | ||
134 | - debugSel(); | ||
135 | } | 131 | } |
136 | 132 | ||
137 | function deselectAll() { | 133 | function deselectAll() { |
... | @@ -141,12 +137,6 @@ | ... | @@ -141,12 +137,6 @@ |
141 | selectOrder = []; | 137 | selectOrder = []; |
142 | api.updateDeviceColors(); | 138 | api.updateDeviceColors(); |
143 | updateDetail(); | 139 | updateDetail(); |
144 | - | ||
145 | - debugSel(); | ||
146 | - } | ||
147 | - | ||
148 | - function debugSel() { | ||
149 | - $log.debug(' ..... Selected now >> ', selectOrder); | ||
150 | } | 140 | } |
151 | 141 | ||
152 | // === ----------------------------------------------------- | 142 | // === ----------------------------------------------------- |
... | @@ -175,14 +165,14 @@ | ... | @@ -175,14 +165,14 @@ |
175 | function emptySelect() { | 165 | function emptySelect() { |
176 | haveDetails = false; | 166 | haveDetails = false; |
177 | tps.hideDetailPanel(); | 167 | tps.hideDetailPanel(); |
178 | - cancelTraffic(); | 168 | + tts.cancelTraffic(); |
179 | } | 169 | } |
180 | 170 | ||
181 | function singleSelect() { | 171 | function singleSelect() { |
182 | // NOTE: detail is shown from 'showDetails' event callback | 172 | // NOTE: detail is shown from 'showDetails' event callback |
183 | requestDetails(); | 173 | requestDetails(); |
184 | - cancelTraffic(); | 174 | + tts.cancelTraffic(); |
185 | - requestTrafficForMode(); | 175 | + tts.requestTrafficForMode(); |
186 | } | 176 | } |
187 | 177 | ||
188 | function multiSelect() { | 178 | function multiSelect() { |
... | @@ -192,17 +182,17 @@ | ... | @@ -192,17 +182,17 @@ |
192 | tps.displayMulti(selectOrder); | 182 | tps.displayMulti(selectOrder); |
193 | 183 | ||
194 | // always add the 'show traffic' action | 184 | // always add the 'show traffic' action |
195 | - tps.addAction('Show Related Traffic', showRelatedIntentsAction); | 185 | + tps.addAction('Show Related Traffic', tts.showRelatedIntentsAction); |
196 | 186 | ||
197 | // add other actions, based on what is selected... | 187 | // add other actions, based on what is selected... |
198 | if (nSel() === 2 && allSelectionsClass('host')) { | 188 | if (nSel() === 2 && allSelectionsClass('host')) { |
199 | - tps.addAction('Create Host-to-Host Flow', addHostIntentAction); | 189 | + tps.addAction('Create Host-to-Host Flow', tts.addHostIntentAction); |
200 | } else if (nSel() >= 2 && allSelectionsClass('host')) { | 190 | } else if (nSel() >= 2 && allSelectionsClass('host')) { |
201 | - tps.addAction('Create Multi-Source Flow', addMultiSourceIntentAction); | 191 | + tps.addAction('Create Multi-Source Flow', tts.addMultiSourceIntentAction); |
202 | } | 192 | } |
203 | 193 | ||
204 | - cancelTraffic(); | 194 | + tts.cancelTraffic(); |
205 | - requestTrafficForMode(); | 195 | + tts.requestTrafficForMode(); |
206 | } | 196 | } |
207 | 197 | ||
208 | 198 | ||
... | @@ -216,11 +206,11 @@ | ... | @@ -216,11 +206,11 @@ |
216 | tps.displaySingle(data); | 206 | tps.displaySingle(data); |
217 | 207 | ||
218 | // always add the 'show traffic' action | 208 | // always add the 'show traffic' action |
219 | - tps.addAction('Show Related Traffic', showRelatedIntentsAction); | 209 | + tps.addAction('Show Related Traffic', tts.showRelatedIntentsAction); |
220 | 210 | ||
221 | // add other actions, based on what is selected... | 211 | // add other actions, based on what is selected... |
222 | if (data.type === 'switch') { | 212 | if (data.type === 'switch') { |
223 | - tps.addAction('Show Device Flows', showDeviceLinkFlowsAction); | 213 | + tps.addAction('Show Device Flows', tts.showDeviceLinkFlowsAction); |
224 | } | 214 | } |
225 | 215 | ||
226 | // only show the details panel if the user hasn't "hidden" it | 216 | // only show the details panel if the user hasn't "hidden" it |
... | @@ -242,47 +232,28 @@ | ... | @@ -242,47 +232,28 @@ |
242 | } | 232 | } |
243 | } | 233 | } |
244 | 234 | ||
245 | - // === ----------------------------------------------------- | 235 | + function validateSelectionContext() { |
246 | - // TODO: migrate these to topoTraffic.js | 236 | + if (!hovered && !nSel()) { |
247 | - | 237 | + tts.cancelTraffic(); |
248 | - function cancelTraffic() { | 238 | + return false; |
249 | - $log.debug('TODO: cancelTraffic'); | 239 | + } |
250 | - | 240 | + return true; |
251 | - } | ||
252 | - function requestTrafficForMode() { | ||
253 | - $log.debug('TODO: requestTrafficForMode'); | ||
254 | - | ||
255 | - } | ||
256 | - function showRelatedIntentsAction () { | ||
257 | - $log.debug('TODO: showRelatedIntentsAction'); | ||
258 | - | ||
259 | - } | ||
260 | - function addHostIntentAction () { | ||
261 | - $log.debug('TODO: addHostIntentAction'); | ||
262 | - | ||
263 | - } | ||
264 | - function addMultiSourceIntentAction () { | ||
265 | - $log.debug('TODO: addMultiSourceIntentAction'); | ||
266 | - | ||
267 | - } | ||
268 | - function showDeviceLinkFlowsAction () { | ||
269 | - $log.debug('TODO: showDeviceLinkFlowsAction'); | ||
270 | - | ||
271 | } | 241 | } |
272 | 242 | ||
273 | - | ||
274 | // === ----------------------------------------------------- | 243 | // === ----------------------------------------------------- |
275 | // === MODULE DEFINITION === | 244 | // === MODULE DEFINITION === |
276 | 245 | ||
277 | angular.module('ovTopo') | 246 | angular.module('ovTopo') |
278 | .factory('TopoSelectService', | 247 | .factory('TopoSelectService', |
279 | ['$log', 'FnService', 'FlashService', 'TopoPanelService', | 248 | ['$log', 'FnService', 'FlashService', 'TopoPanelService', |
249 | + 'TopoTrafficService', | ||
280 | 250 | ||
281 | - function (_$log_, _fs_, _flash_, _tps_) { | 251 | + function (_$log_, _fs_, _flash_, _tps_, _tts_) { |
282 | $log = _$log_; | 252 | $log = _$log_; |
283 | fs = _fs_; | 253 | fs = _fs_; |
284 | flash = _flash_; | 254 | flash = _flash_; |
285 | tps = _tps_; | 255 | tps = _tps_; |
256 | + tts = _tts_; | ||
286 | 257 | ||
287 | function initSelect(_api_) { | 258 | function initSelect(_api_) { |
288 | api = _api_; | 259 | api = _api_; |
... | @@ -302,8 +273,11 @@ | ... | @@ -302,8 +273,11 @@ |
302 | selectObject: selectObject, | 273 | selectObject: selectObject, |
303 | deselectObject: deselectObject, | 274 | deselectObject: deselectObject, |
304 | deselectAll: deselectAll, | 275 | deselectAll: deselectAll, |
276 | + | ||
305 | hovered: function () { return hovered; }, | 277 | hovered: function () { return hovered; }, |
306 | - haveDetails: function () { return haveDetails; } | 278 | + haveDetails: function () { return haveDetails; }, |
279 | + selectOrder: function () { return selectOrder; }, | ||
280 | + validateSelectionContext: validateSelectionContext | ||
307 | }; | 281 | }; |
308 | }]); | 282 | }]); |
309 | }()); | 283 | }()); | ... | ... |
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 | + ONOS GUI -- Topology Traffic Module. | ||
19 | + Defines behavior for viewing different traffic modes. | ||
20 | + */ | ||
21 | + | ||
22 | +(function () { | ||
23 | + 'use strict'; | ||
24 | + | ||
25 | + // injected refs | ||
26 | + var $log, fs, flash; | ||
27 | + | ||
28 | + // api to topoForce | ||
29 | + var api; | ||
30 | + /* | ||
31 | + clearLinkTrafficStyle() | ||
32 | + removeLinkLabels() | ||
33 | + updateLinks() | ||
34 | + findLinkById( id ) | ||
35 | + hovered() | ||
36 | + validateSelectionContext() | ||
37 | + sendEvent( type, {payload} ) | ||
38 | + */ | ||
39 | + | ||
40 | + // constants | ||
41 | + var hoverModeNone = 0, | ||
42 | + hoverModeAll = 1, | ||
43 | + hoverModeFlows = 2, | ||
44 | + hoverModeIntents = 3; | ||
45 | + | ||
46 | + // internal state | ||
47 | + var hoverMode = hoverModeNone; | ||
48 | + | ||
49 | + | ||
50 | + // === ----------------------------------------------------- | ||
51 | + // Event Handlers | ||
52 | + | ||
53 | + function showTraffic(data) { | ||
54 | + var paths = data.paths; | ||
55 | + | ||
56 | + api.clearLinkTrafficStyle(); | ||
57 | + api.removeLinkLabels(); | ||
58 | + | ||
59 | + // Now highlight all links in the paths payload, and attach | ||
60 | + // labels to them, if they are defined. | ||
61 | + paths.forEach(function (p) { | ||
62 | + var n = p.links.length, | ||
63 | + i, ldata; | ||
64 | + | ||
65 | + for (i=0; i<n; i++) { | ||
66 | + ldata = api.findLinkById(p.links[i]); | ||
67 | + if (ldata && ldata.el) { | ||
68 | + ldata.el.classed(p.class, true); | ||
69 | + ldata.label = p.labels[i]; | ||
70 | + } | ||
71 | + } | ||
72 | + }); | ||
73 | + | ||
74 | + api.updateLinks(); | ||
75 | + } | ||
76 | + | ||
77 | + // === ----------------------------------------------------- | ||
78 | + // Helper functions | ||
79 | + | ||
80 | + function requestDeviceLinkFlows() { | ||
81 | + var hov = api.hovered(); | ||
82 | + | ||
83 | + function hoverValid() { | ||
84 | + return hoverMode === hoverModeFlows && | ||
85 | + hov && (hov.class === 'device'); | ||
86 | + } | ||
87 | + | ||
88 | + if (api.validateSelectionContext()) { | ||
89 | + api.sendEvent('requestDeviceLinkFlows', { | ||
90 | + ids: api.selectOrder(), | ||
91 | + hover: hoverValid() ? hov.id : '' | ||
92 | + }); | ||
93 | + } | ||
94 | + } | ||
95 | + | ||
96 | + function requestRelatedIntents() { | ||
97 | + var hov = api.hovered(); | ||
98 | + | ||
99 | + function hoverValid() { | ||
100 | + return hoverMode === hoverModeIntents && | ||
101 | + hov && (hov.class === 'host' || hov.class === 'device'); | ||
102 | + } | ||
103 | + | ||
104 | + if (api.validateSelectionContext()) { | ||
105 | + api.sendEvent('requestRelatedIntents', { | ||
106 | + ids: api.selectOrder(), | ||
107 | + hover: hoverValid() ? hov.id : '' | ||
108 | + }); | ||
109 | + } | ||
110 | + } | ||
111 | + | ||
112 | + | ||
113 | + // === ----------------------------------------------------- | ||
114 | + // Traffic requests | ||
115 | + | ||
116 | + function cancelTraffic() { | ||
117 | + api.sendEvent('cancelTraffic'); | ||
118 | + } | ||
119 | + | ||
120 | + // invoked in response to change in selection and/or mouseover/out: | ||
121 | + function requestTrafficForMode() { | ||
122 | + if (hoverMode === hoverModeFlows) { | ||
123 | + requestDeviceLinkFlows(); | ||
124 | + } else if (hoverMode === hoverModeIntents) { | ||
125 | + requestRelatedIntents(); | ||
126 | + } | ||
127 | + } | ||
128 | + | ||
129 | + // === ----------------------------- | ||
130 | + // keystroke commands | ||
131 | + | ||
132 | + // keystroke-right-arrow (see topo.js) | ||
133 | + function showNextIntentAction() { | ||
134 | + hoverMode = hoverModeNone; | ||
135 | + api.sendEvent('requestNextRelatedIntent'); | ||
136 | + flash.flash('>'); | ||
137 | + } | ||
138 | + | ||
139 | + // keystroke-left-arrow (see topo.js) | ||
140 | + function showPrevIntentAction() { | ||
141 | + hoverMode = hoverModeNone; | ||
142 | + api.sendEvent('requestPrevRelatedIntent'); | ||
143 | + flash.flash('<'); | ||
144 | + } | ||
145 | + | ||
146 | + // keystroke-W (see topo.js) | ||
147 | + function showSelectedIntentTrafficAction() { | ||
148 | + hoverMode = hoverModeNone; | ||
149 | + api.sendEvent('requestSelectedIntentTraffic'); | ||
150 | + flash.flash('Traffic on Selected Path'); | ||
151 | + } | ||
152 | + | ||
153 | + // keystroke-A (see topo.js) | ||
154 | + function showAllTrafficAction() { | ||
155 | + hoverMode = hoverModeAll; | ||
156 | + api.sendEvent('requestAllTraffic'); | ||
157 | + flash.flash('All Traffic'); | ||
158 | + } | ||
159 | + | ||
160 | + // === ----------------------------- | ||
161 | + // action buttons on detail panel | ||
162 | + | ||
163 | + // also, keystroke-V (see topo.js) | ||
164 | + function showRelatedIntentsAction () { | ||
165 | + hoverMode = hoverModeIntents; | ||
166 | + requestRelatedIntents(); | ||
167 | + flash.flash('Related Paths'); | ||
168 | + } | ||
169 | + | ||
170 | + function addHostIntentAction () { | ||
171 | + var so = api.selectOrder(); | ||
172 | + api.sendEvent('addHostIntent', { | ||
173 | + one: so[0], | ||
174 | + two: so[1], | ||
175 | + ids: so | ||
176 | + }); | ||
177 | + flash.flash('Host-to-Host flow added'); | ||
178 | + } | ||
179 | + | ||
180 | + function addMultiSourceIntentAction () { | ||
181 | + var so = api.selectOrder(); | ||
182 | + api.sendEvent('addMultiSourceIntent', { | ||
183 | + src: so.slice(0, so.length - 1), | ||
184 | + dst: so[so.length - 1], | ||
185 | + ids: so | ||
186 | + }); | ||
187 | + flash.flash('Multi-Source flow added'); | ||
188 | + } | ||
189 | + | ||
190 | + // also, keystroke-F (see topo.js) | ||
191 | + function showDeviceLinkFlowsAction () { | ||
192 | + hoverMode = hoverModeFlows; | ||
193 | + requestDeviceLinkFlows(); | ||
194 | + flash.flash('Device Flows'); | ||
195 | + } | ||
196 | + | ||
197 | + | ||
198 | + // === ----------------------------------------------------- | ||
199 | + // === MODULE DEFINITION === | ||
200 | + | ||
201 | + angular.module('ovTopo') | ||
202 | + .factory('TopoTrafficService', | ||
203 | + ['$log', 'FnService', 'FlashService', | ||
204 | + | ||
205 | + function (_$log_, _fs_, _flash_) { | ||
206 | + $log = _$log_; | ||
207 | + fs = _fs_; | ||
208 | + flash = _flash_; | ||
209 | + | ||
210 | + function initTraffic(_api_) { | ||
211 | + api = _api_; | ||
212 | + } | ||
213 | + | ||
214 | + function destroyTraffic() { } | ||
215 | + | ||
216 | + return { | ||
217 | + initTraffic: initTraffic, | ||
218 | + destroyTraffic: destroyTraffic, | ||
219 | + | ||
220 | + showTraffic: showTraffic, | ||
221 | + | ||
222 | + cancelTraffic: cancelTraffic, | ||
223 | + requestTrafficForMode: requestTrafficForMode, | ||
224 | + showRelatedIntentsAction: showRelatedIntentsAction, | ||
225 | + addHostIntentAction: addHostIntentAction, | ||
226 | + addMultiSourceIntentAction: addMultiSourceIntentAction, | ||
227 | + showDeviceLinkFlowsAction: showDeviceLinkFlowsAction, | ||
228 | + showNextIntentAction: showNextIntentAction, | ||
229 | + showPrevIntentAction: showPrevIntentAction, | ||
230 | + showSelectedIntentTrafficAction: showSelectedIntentTrafficAction, | ||
231 | + showAllTrafficAction: showAllTrafficAction | ||
232 | + }; | ||
233 | + }]); | ||
234 | +}()); |
... | @@ -207,7 +207,7 @@ describe('factory: view/topo/topoModel.js', function() { | ... | @@ -207,7 +207,7 @@ describe('factory: view/topo/topoModel.js', function() { |
207 | 207 | ||
208 | it('should define api functions', function () { | 208 | it('should define api functions', function () { |
209 | expect(fs.areFunctions(tms, [ | 209 | expect(fs.areFunctions(tms, [ |
210 | - 'initModel', 'newDim', | 210 | + 'initModel', 'newDim', 'destroyModel', |
211 | 'positionNode', 'createDeviceNode', 'createHostNode', | 211 | 'positionNode', 'createDeviceNode', 'createHostNode', |
212 | 'createHostLink', 'createLink', | 212 | 'createHostLink', 'createLink', |
213 | 'coordFromLngLat', 'lngLatFromCoord', | 213 | 'coordFromLngLat', 'lngLatFromCoord', | ... | ... |
... | @@ -36,7 +36,8 @@ describe('factory: view/topo/topoSelect.js', function() { | ... | @@ -36,7 +36,8 @@ describe('factory: view/topo/topoSelect.js', function() { |
36 | expect(fs.areFunctions(tss, [ | 36 | expect(fs.areFunctions(tss, [ |
37 | 'initSelect', 'destroySelect', 'showDetails', 'toggleDetails', | 37 | 'initSelect', 'destroySelect', 'showDetails', 'toggleDetails', |
38 | 'nodeMouseOver', 'nodeMouseOut', 'selectObject', 'deselectObject', | 38 | 'nodeMouseOver', 'nodeMouseOut', 'selectObject', 'deselectObject', |
39 | - 'deselectAll', 'hovered', 'haveDetails' | 39 | + 'deselectAll', 'hovered', 'haveDetails', 'selectOrder', |
40 | + 'validateSelectionContext' | ||
40 | ])).toBeTruthy(); | 41 | ])).toBeTruthy(); |
41 | }); | 42 | }); |
42 | 43 | ... | ... |
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 | + ONOS GUI -- Topo View -- Topo Traffic Service - Unit Tests | ||
19 | + */ | ||
20 | +describe('factory: view/topo/topoTraffic.js', function() { | ||
21 | + var $log, fs, tts; | ||
22 | + | ||
23 | + beforeEach(module('ovTopo', 'onosUtil', 'onosLayer')); | ||
24 | + | ||
25 | + beforeEach(inject(function (_$log_, FnService, TopoTrafficService) { | ||
26 | + $log = _$log_; | ||
27 | + fs = FnService; | ||
28 | + tts = TopoTrafficService; | ||
29 | + })); | ||
30 | + | ||
31 | + it('should define TopoTrafficService', function () { | ||
32 | + expect(tts).toBeDefined(); | ||
33 | + }); | ||
34 | + | ||
35 | + it('should define api functions', function () { | ||
36 | + expect(fs.areFunctions(tts, [ | ||
37 | + 'initTraffic', 'destroyTraffic', 'showTraffic', | ||
38 | + 'cancelTraffic', 'requestTrafficForMode', | ||
39 | + 'showRelatedIntentsAction', 'addHostIntentAction', | ||
40 | + 'addMultiSourceIntentAction', 'showDeviceLinkFlowsAction', | ||
41 | + 'showNextIntentAction', 'showPrevIntentAction', | ||
42 | + 'showSelectedIntentTrafficAction', 'showAllTrafficAction' | ||
43 | + ])).toBeTruthy(); | ||
44 | + }); | ||
45 | + | ||
46 | + // TODO: more tests... | ||
47 | +}); |
-
Please register or login to post a comment