Committed by
Gerrit Code Review
ONOS-1749, ONOS-2386 - GUI -- Can jump to selected device in Device View from To…
…po View by clicking on Detail Panel title or action button. Bug fix for deselecting action buttons on Device View upon details panel close. Change-Id: If0afe487cf486c17cca7a5950e2a49d3bd8d28bb
Showing
4 changed files
with
49 additions
and
17 deletions
... | @@ -22,13 +22,13 @@ | ... | @@ -22,13 +22,13 @@ |
22 | 'use strict'; | 22 | 'use strict'; |
23 | 23 | ||
24 | // injected refs | 24 | // injected refs |
25 | - var $log, $scope, fs, mast, ps, wss, is, ns; | 25 | + var $log, $scope, $location, fs, mast, ps, wss, is, ns; |
26 | 26 | ||
27 | // internal state | 27 | // internal state |
28 | var detailsPanel, | 28 | var detailsPanel, |
29 | pStartY, pHeight, | 29 | pStartY, pHeight, |
30 | top, bottom, iconDiv, | 30 | top, bottom, iconDiv, |
31 | - wSize, selRow; | 31 | + wSize; |
32 | 32 | ||
33 | // constants | 33 | // constants |
34 | var topPdg = 13, | 34 | var topPdg = 13, |
... | @@ -60,8 +60,8 @@ | ... | @@ -60,8 +60,8 @@ |
60 | div.select('g').attr('transform', 'translate(25, 0) rotate(45)'); | 60 | div.select('g').attr('transform', 'translate(25, 0) rotate(45)'); |
61 | 61 | ||
62 | div.on('click', function () { | 62 | div.on('click', function () { |
63 | + $scope.selId = null; | ||
63 | detailsPanel.hide(); | 64 | detailsPanel.hide(); |
64 | - selRow.removeClass('selected'); | ||
65 | }); | 65 | }); |
66 | } | 66 | } |
67 | 67 | ||
... | @@ -187,28 +187,39 @@ | ... | @@ -187,28 +187,39 @@ |
187 | 187 | ||
188 | angular.module('ovDevice', []) | 188 | angular.module('ovDevice', []) |
189 | .controller('OvDeviceCtrl', | 189 | .controller('OvDeviceCtrl', |
190 | - ['$log', '$scope', 'TableBuilderService', 'FnService', | 190 | + ['$log', '$scope', '$location', 'TableBuilderService', 'FnService', |
191 | 'MastService', 'PanelService', 'WebSocketService', 'IconService', | 191 | 'MastService', 'PanelService', 'WebSocketService', 'IconService', |
192 | 'NavService', | 192 | 'NavService', |
193 | 193 | ||
194 | - function (_$log_, _$scope_, | 194 | + function (_$log_, _$scope_, _$location_, |
195 | tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_) { | 195 | tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_) { |
196 | $log = _$log_; | 196 | $log = _$log_; |
197 | $scope = _$scope_; | 197 | $scope = _$scope_; |
198 | + $location = _$location_; | ||
198 | fs = _fs_; | 199 | fs = _fs_; |
199 | mast = _mast_; | 200 | mast = _mast_; |
200 | ps = _ps_; | 201 | ps = _ps_; |
201 | wss = _wss_; | 202 | wss = _wss_; |
202 | is = _is_; | 203 | is = _is_; |
203 | ns = _ns_; | 204 | ns = _ns_; |
204 | - var handlers = {}; | 205 | + var params = $location.search(), |
206 | + handlers = {}; | ||
205 | $scope.panelData = []; | 207 | $scope.panelData = []; |
206 | $scope.flowTip = 'Show flow view for selected device'; | 208 | $scope.flowTip = 'Show flow view for selected device'; |
207 | $scope.portTip = 'Show port view for selected device'; | 209 | $scope.portTip = 'Show port view for selected device'; |
208 | $scope.groupTip = 'Show group view for selected device'; | 210 | $scope.groupTip = 'Show group view for selected device'; |
209 | 211 | ||
212 | + // details panel handlers | ||
213 | + handlers[detailsResp] = respDetailsCb; | ||
214 | + wss.bindHandlers(handlers); | ||
215 | + | ||
216 | + // query for if a certain device needs to be highlighted | ||
217 | + if (params.hasOwnProperty('devId')) { | ||
218 | + $scope.selId = params['devId']; | ||
219 | + wss.sendEvent(detailsReq, { id: $scope.selId }); | ||
220 | + } | ||
221 | + | ||
210 | function selCb($event, row) { | 222 | function selCb($event, row) { |
211 | - selRow = angular.element($event.currentTarget); | ||
212 | if ($scope.selId) { | 223 | if ($scope.selId) { |
213 | wss.sendEvent(detailsReq, { id: row.id }); | 224 | wss.sendEvent(detailsReq, { id: row.id }); |
214 | } else { | 225 | } else { |
... | @@ -223,10 +234,6 @@ | ... | @@ -223,10 +234,6 @@ |
223 | selCb: selCb | 234 | selCb: selCb |
224 | }); | 235 | }); |
225 | 236 | ||
226 | - // details panel handlers | ||
227 | - handlers[detailsResp] = respDetailsCb; | ||
228 | - wss.bindHandlers(handlers); | ||
229 | - | ||
230 | $scope.nav = function (path) { | 237 | $scope.nav = function (path) { |
231 | if ($scope.selId) { | 238 | if ($scope.selId) { |
232 | ns.navTo(path, { devId: $scope.selId }); | 239 | ns.navTo(path, { devId: $scope.selId }); | ... | ... |
... | @@ -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, $window, $rootScope, fs, ps, gs, flash, wss, bns, mast; | 26 | + var $log, $window, $rootScope, fs, ps, gs, flash, wss, bns, mast, ns; |
27 | 27 | ||
28 | // constants | 28 | // constants |
29 | var pCls = 'topo-p', | 29 | var pCls = 'topo-p', |
... | @@ -33,7 +33,8 @@ | ... | @@ -33,7 +33,8 @@ |
33 | width: 260 | 33 | width: 260 |
34 | }, | 34 | }, |
35 | sumMax = 240, | 35 | sumMax = 240, |
36 | - padTop = 20; | 36 | + padTop = 20, |
37 | + devPath = 'device'; | ||
37 | 38 | ||
38 | // internal state | 39 | // internal state |
39 | var useDetails = true, // should we show details if we have 'em? | 40 | var useDetails = true, // should we show details if we have 'em? |
... | @@ -218,14 +219,22 @@ | ... | @@ -218,14 +219,22 @@ |
218 | detail.setup(); | 219 | detail.setup(); |
219 | 220 | ||
220 | var svg = detail.appendHeader('div') | 221 | var svg = detail.appendHeader('div') |
221 | - .classed('icon', true) | 222 | + .classed('icon clickable', true) |
222 | .append('svg'), | 223 | .append('svg'), |
223 | - title = detail.appendHeader('h2'), | 224 | + title = detail.appendHeader('h2') |
225 | + .classed('clickable', true), | ||
224 | table = detail.appendBody('table'), | 226 | table = detail.appendBody('table'), |
225 | tbody = table.append('tbody'); | 227 | tbody = table.append('tbody'); |
226 | 228 | ||
227 | gs.addGlyph(svg, (data.type || 'unknown'), 40); | 229 | gs.addGlyph(svg, (data.type || 'unknown'), 40); |
228 | title.text(data.id); | 230 | title.text(data.id); |
231 | + svg.on('click', function () { | ||
232 | + ns.navTo(devPath, { devId: data.id }); | ||
233 | + }); | ||
234 | + title.on('click', function () { | ||
235 | + ns.navTo(devPath, { devId: data.id }); | ||
236 | + }); | ||
237 | + | ||
229 | listProps(tbody, data); | 238 | listProps(tbody, data); |
230 | addBtnFooter(); | 239 | addBtnFooter(); |
231 | } | 240 | } |
... | @@ -475,9 +484,10 @@ | ... | @@ -475,9 +484,10 @@ |
475 | .factory('TopoPanelService', | 484 | .factory('TopoPanelService', |
476 | ['$log', '$window', '$rootScope', 'FnService', 'PanelService', 'GlyphService', | 485 | ['$log', '$window', '$rootScope', 'FnService', 'PanelService', 'GlyphService', |
477 | 'FlashService', 'WebSocketService', 'ButtonService', 'MastService', | 486 | 'FlashService', 'WebSocketService', 'ButtonService', 'MastService', |
487 | + 'NavService', | ||
478 | 488 | ||
479 | function (_$log_, _$window_, _$rootScope_, | 489 | function (_$log_, _$window_, _$rootScope_, |
480 | - _fs_, _ps_, _gs_, _flash_, _wss_, _bns_, _mast_) { | 490 | + _fs_, _ps_, _gs_, _flash_, _wss_, _bns_, _mast_, _ns_) { |
481 | $log = _$log_; | 491 | $log = _$log_; |
482 | $window = _$window_; | 492 | $window = _$window_; |
483 | $rootScope = _$rootScope_; | 493 | $rootScope = _$rootScope_; |
... | @@ -488,6 +498,7 @@ | ... | @@ -488,6 +498,7 @@ |
488 | wss = _wss_; | 498 | wss = _wss_; |
489 | bns = _bns_; | 499 | bns = _bns_; |
490 | mast = _mast_; | 500 | mast = _mast_; |
501 | + ns = _ns_; | ||
491 | 502 | ||
492 | return { | 503 | return { |
493 | initPanels: initPanels, | 504 | initPanels: initPanels, | ... | ... |
... | @@ -41,7 +41,8 @@ | ... | @@ -41,7 +41,8 @@ |
41 | consumeClick = false; // used to coordinate with SVG click handler | 41 | consumeClick = false; // used to coordinate with SVG click handler |
42 | 42 | ||
43 | // constants | 43 | // constants |
44 | - var flowPath = 'flow', | 44 | + var devPath = 'device', |
45 | + flowPath = 'flow', | ||
45 | portPath ='port', | 46 | portPath ='port', |
46 | groupPath = 'group'; | 47 | groupPath = 'group'; |
47 | 48 | ||
... | @@ -252,6 +253,14 @@ | ... | @@ -252,6 +253,14 @@ |
252 | // for now, we assume the node is a device if it has a URI | 253 | // for now, we assume the node is a device if it has a URI |
253 | if ((data.props).hasOwnProperty('URI')) { | 254 | if ((data.props).hasOwnProperty('URI')) { |
254 | tps.addAction({ | 255 | tps.addAction({ |
256 | + id: 'device-table-btn', | ||
257 | + gid: data.type, | ||
258 | + cb: function () { | ||
259 | + ns.navTo(devPath, { devId: data.props['URI'] }); | ||
260 | + }, | ||
261 | + tt: 'Show device view' | ||
262 | + }); | ||
263 | + tps.addAction({ | ||
255 | id: 'flows-table-btn', | 264 | id: 'flows-table-btn', |
256 | gid: 'flowTable', | 265 | gid: 'flowTable', |
257 | cb: function () { | 266 | cb: function () { | ... | ... |
-
Please register or login to post a comment