홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
9b1fb9aa 1 parent f3ae3fb9

ONOS-2202 - GUI -- Moved flow, port, and group navigation buttons out of device … 

…details panel. Created tab-like behavior to switch between the three views when viewing any of them.

Change-Id: Ibc4291689e913a3537bd621e8e579f5e198ae5f2
Inline Side-by-side
Showing 16 changed files with 154 additions and 65 deletions
...@@ -47,6 +47,9 @@ ...@@ -47,6 +47,9 @@
47 47
48 devIcon_SWITCH: 'switch', 48 devIcon_SWITCH: 'switch',
49 devIcon_ROADM: 'roadm', 49 devIcon_ROADM: 'roadm',
50 + flowTable: 'flowTable',
51 + portTable: 'portTable',
52 + groupTable: 'groupTable',
50 53
51 hostIcon_endstation: 'endstation', 54 hostIcon_endstation: 'endstation',
52 hostIcon_router: 'router', 55 hostIcon_router: 'router',
......
...@@ -115,6 +115,12 @@ div.ctrl-btns div { ...@@ -115,6 +115,12 @@ div.ctrl-btns div {
115 cursor: pointer; 115 cursor: pointer;
116 } 116 }
117 117
118 +div.ctrl-btns div.separator {
119 + cursor: auto;
120 + width: 24px;
121 + border: none;
122 +}
123 +
118 /* Inactive */ 124 /* Inactive */
119 .light .ctrl-btns div g.icon rect, 125 .light .ctrl-btns div g.icon rect,
120 .light .ctrl-btns div:hover g.icon rect { 126 .light .ctrl-btns div:hover g.icon rect {
......
...@@ -26,12 +26,6 @@ ...@@ -26,12 +26,6 @@
26 width: 290px; 26 width: 290px;
27 } 27 }
28 28
29 -#ov-app div.ctrl-btns div.separator {
30 - cursor: auto;
31 - width: 24px;
32 - border: none;
33 -}
34 -
35 #ov-app form#inputFileForm, 29 #ov-app form#inputFileForm,
36 #ov-app input#uploadFile { 30 #ov-app input#uploadFile {
37 display: none; 31 display: none;
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 } 23 }
24 24
25 #ov-device div.ctrl-btns { 25 #ov-device div.ctrl-btns {
26 - width: 45px; 26 + width: 240px;
27 } 27 }
28 28
29 /* More in generic panel.css */ 29 /* More in generic panel.css */
......
...@@ -4,8 +4,21 @@ ...@@ -4,8 +4,21 @@
4 <h2>Devices ({{tableData.length}} total)</h2> 4 <h2>Devices ({{tableData.length}} total)</h2>
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div class="refresh" ng-class="{active: autoRefresh}" 6 <div class="refresh" ng-class="{active: autoRefresh}"
7 - icon icon-size="36" icon-id="refresh" 7 + icon icon-id="refresh" icon-size="36"
8 ng-click="toggleRefresh()"></div> 8 ng-click="toggleRefresh()"></div>
9 + <div class="separator"></div>
10 +
11 + <div ng-class="{active: !!selId}"
12 + icon icon-id="flowTable" icon-size="36"
13 + ng-click="nav('flow')"></div>
14 +
15 + <div ng-class="{active: !!selId}"
16 + icon icon-id="portTable" icon-size="36"
17 + ng-click="nav('port')"></div>
18 +
19 + <div ng-class="{active: !!selId}"
20 + icon icon-id="groupTable" icon-size="36"
21 + ng-click="nav('group')"></div>
9 </div> 22 </div>
10 </div> 23 </div>
11 24
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 'use strict'; 22 'use strict';
23 23
24 // injected refs 24 // injected refs
25 - var $log, $scope, fs, mast, ps, wss, is, bns, ns, ttip; 25 + var $log, $scope, fs, mast, ps, wss, is, ns;
26 26
27 // internal state 27 // internal state
28 var detailsPanel, 28 var detailsPanel,
...@@ -35,12 +35,8 @@ ...@@ -35,12 +35,8 @@
35 ctnrPdg = 24, 35 ctnrPdg = 24,
36 scrollSize = 17, 36 scrollSize = 17,
37 portsTblPdg = 50, 37 portsTblPdg = 50,
38 - flowPath = 'flow',
39 - portPath = 'port',
40 - groupPath = 'group',
41 38
42 pName = 'device-details-panel', 39 pName = 'device-details-panel',
43 - bName = 'dev-dets-p',
44 detailsReq = 'deviceDetailsRequest', 40 detailsReq = 'deviceDetailsRequest',
45 detailsResp = 'deviceDetailsResponse', 41 detailsResp = 'deviceDetailsResponse',
46 42
...@@ -85,7 +81,6 @@ ...@@ -85,7 +81,6 @@
85 tblDiv.append('div').classed('left', true).append('table'); 81 tblDiv.append('div').classed('left', true).append('table');
86 tblDiv.append('div').classed('right', true).append('table'); 82 tblDiv.append('div').classed('right', true).append('table');
87 83
88 - top.append('div').classed('actionBtns', true);
89 top.append('hr'); 84 top.append('hr');
90 85
91 bottom = container.append('div').classed('bottom', true); 86 bottom = container.append('div').classed('bottom', true);
...@@ -103,7 +98,7 @@ ...@@ -103,7 +98,7 @@
103 addCell('value', value); 98 addCell('value', value);
104 } 99 }
105 100
106 - function populateTop(tblDiv, btnsDiv, details) { 101 + function populateTop(tblDiv, details) {
107 var leftTbl = tblDiv.select('.left') 102 var leftTbl = tblDiv.select('.left')
108 .select('table') 103 .select('table')
109 .append('tbody'), 104 .append('tbody'),
...@@ -118,34 +113,6 @@ ...@@ -118,34 +113,6 @@
118 // properties are split into two tables 113 // properties are split into two tables
119 addProp(i < 3 ? leftTbl : rightTbl, i, details[prop]); 114 addProp(i < 3 ? leftTbl : rightTbl, i, details[prop]);
120 }); 115 });
121 -
122 - bns.button(
123 - btnsDiv,
124 - bName + '-flows',
125 - 'flowTable',
126 - function () {
127 - ns.navTo(flowPath, { devId: details.id });
128 - },
129 - 'Show flow view for this device'
130 - );
131 - bns.button(
132 - btnsDiv,
133 - bName + '-ports',
134 - 'portTable',
135 - function () {
136 - ns.navTo(portPath, { devId: details.id });
137 - },
138 - 'Show port view for this device'
139 - );
140 - bns.button(
141 - btnsDiv,
142 - bName + '-groups',
143 - 'groupTable',
144 - function () {
145 - ns.navTo(groupPath, { devId: details.id });
146 - },
147 - 'Show group view for this device'
148 - );
149 } 116 }
150 117
151 function addPortRow(tbody, port) { 118 function addPortRow(tbody, port) {
...@@ -187,15 +154,14 @@ ...@@ -187,15 +154,14 @@
187 } 154 }
188 155
189 function populateDetails(details) { 156 function populateDetails(details) {
190 - var topTbs, btnsDiv, btmTbl, ports; 157 + var topTbs, btmTbl, ports;
191 setUpPanel(); 158 setUpPanel();
192 159
193 topTbs = top.select('.top-tables'); 160 topTbs = top.select('.top-tables');
194 - btnsDiv = top.select('.actionBtns');
195 btmTbl = bottom.select('table'); 161 btmTbl = bottom.select('table');
196 ports = details.ports; 162 ports = details.ports;
197 163
198 - populateTop(topTbs, btnsDiv, details); 164 + populateTop(topTbs, details);
199 populateBottom(btmTbl, ports); 165 populateBottom(btmTbl, ports);
200 166
201 detailsPanel.height(pHeight); 167 detailsPanel.height(pHeight);
...@@ -223,10 +189,10 @@ ...@@ -223,10 +189,10 @@
223 .controller('OvDeviceCtrl', 189 .controller('OvDeviceCtrl',
224 ['$log', '$scope', 'TableBuilderService', 'FnService', 190 ['$log', '$scope', 'TableBuilderService', 'FnService',
225 'MastService', 'PanelService', 'WebSocketService', 'IconService', 191 'MastService', 'PanelService', 'WebSocketService', 'IconService',
226 - 'ButtonService', 'NavService', 'TooltipService', 192 + 'NavService',
227 193
228 function (_$log_, _$scope_, 194 function (_$log_, _$scope_,
229 - tbs, _fs_, _mast_, _ps_, _wss_, _is_, _bns_, _ns_, _ttip_) { 195 + tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_) {
230 $log = _$log_; 196 $log = _$log_;
231 $scope = _$scope_; 197 $scope = _$scope_;
232 fs = _fs_; 198 fs = _fs_;
...@@ -234,9 +200,7 @@ ...@@ -234,9 +200,7 @@
234 ps = _ps_; 200 ps = _ps_;
235 wss = _wss_; 201 wss = _wss_;
236 is = _is_; 202 is = _is_;
237 - bns = _bns_;
238 ns = _ns_; 203 ns = _ns_;
239 - ttip = _ttip_;
240 var handlers = {}; 204 var handlers = {};
241 $scope.panelData = []; 205 $scope.panelData = [];
242 206
...@@ -260,6 +224,12 @@ ...@@ -260,6 +224,12 @@
260 handlers[detailsResp] = respDetailsCb; 224 handlers[detailsResp] = respDetailsCb;
261 wss.bindHandlers(handlers); 225 wss.bindHandlers(handlers);
262 226
227 + $scope.nav = function (path) {
228 + if ($scope.selId) {
229 + ns.navTo(path, { devId: $scope.selId });
230 + }
231 + };
232 +
263 $scope.$on('$destroy', function () { 233 $scope.$on('$destroy', function () {
264 wss.unbindHandlers(handlers); 234 wss.unbindHandlers(handlers);
265 }); 235 });
...@@ -293,7 +263,7 @@ ...@@ -293,7 +263,7 @@
293 return { 263 return {
294 h: $window.innerHeight, 264 h: $window.innerHeight,
295 w: $window.innerWidth 265 w: $window.innerWidth
296 - } 266 + };
297 }, function () { 267 }, function () {
298 if (!fs.isEmptyObject(scope.panelData)) { 268 if (!fs.isEmptyObject(scope.panelData)) {
299 heightCalc(); 269 heightCalc();
......
...@@ -23,7 +23,21 @@ ...@@ -23,7 +23,21 @@
23 } 23 }
24 24
25 #ov-flow div.ctrl-btns { 25 #ov-flow div.ctrl-btns {
26 - width: 45px; 26 + width: 240px;
27 +}
28 +
29 +.light #ov-flow .current-view use {
30 + fill: white;
31 +}
32 +.dark #ov-flow .current-view use {
33 + fill: #304860;
34 +}
35 +
36 +.light #ov-flow .current-view rect {
37 + fill: deepskyblue;
38 +}
39 +.dark #ov-flow .current-view rect {
40 + fill: #eee;
27 } 41 }
28 42
29 .light #ov-flow tr:nth-child(6n + 1), 43 .light #ov-flow tr:nth-child(6n + 1),
......
...@@ -9,6 +9,19 @@ ...@@ -9,6 +9,19 @@
9 <div class="refresh" ng-class="{active: autoRefresh}" 9 <div class="refresh" ng-class="{active: autoRefresh}"
10 icon icon-size="36" icon-id="refresh" 10 icon icon-size="36" icon-id="refresh"
11 ng-click="toggleRefresh()"></div> 11 ng-click="toggleRefresh()"></div>
12 +
13 + <div class="separator"></div>
14 +
15 + <div class="current-view"
16 + icon icon-id="flowTable" icon-size="36"></div>
17 +
18 + <div class="active"
19 + icon icon-id="portTable" icon-size="36"
20 + ng-click="nav('port')"></div>
21 +
22 + <div class="active"
23 + icon icon-id="groupTable" icon-size="36"
24 + ng-click="nav('group')"></div>
12 </div> 25 </div>
13 </div> 26 </div>
14 27
......
...@@ -22,20 +22,21 @@ ...@@ -22,20 +22,21 @@
22 'use strict'; 22 'use strict';
23 23
24 // injected references 24 // injected references
25 - var $log, $scope, $location, fs, tbs; 25 + var $log, $scope, $location, fs, tbs, ns;
26 26
27 angular.module('ovFlow', []) 27 angular.module('ovFlow', [])
28 .controller('OvFlowCtrl', 28 .controller('OvFlowCtrl',
29 ['$log', '$scope', '$location', 29 ['$log', '$scope', '$location',
30 - 'FnService', 'TableBuilderService', 30 + 'FnService', 'TableBuilderService', 'NavService',
31 31
32 - function (_$log_, _$scope_, _$location_, _fs_, _tbs_) { 32 + function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _ns_) {
33 var params; 33 var params;
34 $log = _$log_; 34 $log = _$log_;
35 $scope = _$scope_; 35 $scope = _$scope_;
36 $location = _$location_; 36 $location = _$location_;
37 fs = _fs_; 37 fs = _fs_;
38 tbs = _tbs_; 38 tbs = _tbs_;
39 + ns = _ns_;
39 40
40 params = $location.search(); 41 params = $location.search();
41 if (params.hasOwnProperty('devId')) { 42 if (params.hasOwnProperty('devId')) {
...@@ -48,6 +49,12 @@ ...@@ -48,6 +49,12 @@
48 query: params 49 query: params
49 }); 50 });
50 51
52 + $scope.nav = function (path) {
53 + if ($scope.devId) {
54 + ns.navTo(path, { devId: $scope.devId });
55 + }
56 + };
57 +
51 $log.log('OvFlowCtrl has been created'); 58 $log.log('OvFlowCtrl has been created');
52 }]); 59 }]);
53 }()); 60 }());
......
...@@ -23,7 +23,21 @@ ...@@ -23,7 +23,21 @@
23 } 23 }
24 24
25 #ov-group div.ctrl-btns { 25 #ov-group div.ctrl-btns {
26 - width: 45px; 26 + width: 240px;
27 +}
28 +
29 +.light #ov-group .current-view use {
30 + fill: white;
31 +}
32 +.dark #ov-group .current-view use {
33 + fill: #304860;
34 +}
35 +
36 +.light #ov-group .current-view rect {
37 + fill: deepskyblue;
38 +}
39 +.dark #ov-group .current-view rect {
40 + fill: #eee;
27 } 41 }
28 42
29 .light #ov-group tr:nth-child(4n + 1), 43 .light #ov-group tr:nth-child(4n + 1),
......
...@@ -25,6 +25,19 @@ ...@@ -25,6 +25,19 @@
25 <div class="refresh" ng-class="{active: autoRefresh}" 25 <div class="refresh" ng-class="{active: autoRefresh}"
26 icon icon-size="36" icon-id="refresh" 26 icon icon-size="36" icon-id="refresh"
27 ng-click="toggleRefresh()"></div> 27 ng-click="toggleRefresh()"></div>
28 +
29 + <div class="separator"></div>
30 +
31 + <div class="active"
32 + icon icon-id="flowTable" icon-size="36"
33 + ng-click="nav('flow')"></div>
34 +
35 + <div class="active"
36 + icon icon-id="portTable" icon-size="36"
37 + ng-click="nav('port')"></div>
38 +
39 + <div class="current-view"
40 + icon icon-id="groupTable" icon-size="36"></div>
28 </div> 41 </div>
29 </div> 42 </div>
30 43
......
...@@ -22,20 +22,21 @@ ...@@ -22,20 +22,21 @@
22 'use strict'; 22 'use strict';
23 23
24 // injected references 24 // injected references
25 - var $log, $scope, $location, fs, tbs; 25 + var $log, $scope, $location, fs, tbs, ns;
26 26
27 angular.module('ovGroup', []) 27 angular.module('ovGroup', [])
28 .controller('OvGroupCtrl', 28 .controller('OvGroupCtrl',
29 ['$log', '$scope', '$location', '$sce', 29 ['$log', '$scope', '$location', '$sce',
30 - 'FnService', 'TableBuilderService', 30 + 'FnService', 'TableBuilderService', 'NavService',
31 31
32 - function (_$log_, _$scope_, _$location_, $sce, _fs_, _tbs_) { 32 + function (_$log_, _$scope_, _$location_, $sce, _fs_, _tbs_, _ns_) {
33 var params; 33 var params;
34 $log = _$log_; 34 $log = _$log_;
35 $scope = _$scope_; 35 $scope = _$scope_;
36 $location = _$location_; 36 $location = _$location_;
37 fs = _fs_; 37 fs = _fs_;
38 tbs = _tbs_; 38 tbs = _tbs_;
39 + ns = _ns_;
39 40
40 params = $location.search(); 41 params = $location.search();
41 if (params.hasOwnProperty('devId')) { 42 if (params.hasOwnProperty('devId')) {
...@@ -56,6 +57,12 @@ ...@@ -56,6 +57,12 @@
56 } 57 }
57 }); 58 });
58 59
60 + $scope.nav = function (path) {
61 + if ($scope.devId) {
62 + ns.navTo(path, { devId: $scope.devId });
63 + }
64 + };
65 +
59 $log.log('OvGroupCtrl has been created'); 66 $log.log('OvGroupCtrl has been created');
60 }]); 67 }]);
61 }()); 68 }());
......
...@@ -23,9 +23,23 @@ ...@@ -23,9 +23,23 @@
23 } 23 }
24 24
25 #ov-port div.ctrl-btns { 25 #ov-port div.ctrl-btns {
26 - width: 45px; 26 + width: 240px;
27 } 27 }
28 28
29 -#ov-port tr:not(.no-data) td { 29 +.light #ov-port .current-view use {
30 + fill: white;
31 +}
32 +.dark #ov-port .current-view use {
33 + fill: #304860;
34 +}
35 +
36 +.light #ov-port .current-view rect {
37 + fill: deepskyblue;
38 +}
39 +.dark #ov-port .current-view rect {
40 + fill: #eee;
41 +}
42 +
43 +#ov-port td {
30 text-align: right; 44 text-align: right;
31 } 45 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -25,6 +25,19 @@ ...@@ -25,6 +25,19 @@
25 <div class="refresh" ng-class="{active: autoRefresh}" 25 <div class="refresh" ng-class="{active: autoRefresh}"
26 icon icon-size="36" icon-id="refresh" 26 icon icon-size="36" icon-id="refresh"
27 ng-click="toggleRefresh()"></div> 27 ng-click="toggleRefresh()"></div>
28 +
29 + <div class="separator"></div>
30 +
31 + <div class="active"
32 + icon icon-id="flowTable" icon-size="36"
33 + ng-click="nav('flow')"></div>
34 +
35 + <div class="current-view"
36 + icon icon-id="portTable" icon-size="36"></div>
37 +
38 + <div class="active"
39 + icon icon-id="groupTable" icon-size="36"
40 + ng-click="nav('group')"></div>
28 </div> 41 </div>
29 </div> 42 </div>
30 43
......
...@@ -22,19 +22,21 @@ ...@@ -22,19 +22,21 @@
22 'use strict'; 22 'use strict';
23 23
24 // injected references 24 // injected references
25 - var $log, $scope, $location, fs, tbs; 25 + var $log, $scope, $location, fs, tbs, ns;
26 26
27 angular.module('ovPort', []) 27 angular.module('ovPort', [])
28 .controller('OvPortCtrl', 28 .controller('OvPortCtrl',
29 - ['$log', '$scope', '$location', 'FnService', 'TableBuilderService', 29 + ['$log', '$scope', '$location',
30 + 'FnService', 'TableBuilderService', 'NavService',
30 31
31 - function (_$log_, _$scope_, _$location_, _fs_, _tbs_) { 32 + function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _ns_) {
32 var params; 33 var params;
33 $log = _$log_; 34 $log = _$log_;
34 $scope = _$scope_; 35 $scope = _$scope_;
35 $location = _$location_; 36 $location = _$location_;
36 fs = _fs_; 37 fs = _fs_;
37 tbs = _tbs_; 38 tbs = _tbs_;
39 + ns = _ns_;
38 40
39 params = $location.search(); 41 params = $location.search();
40 if (params.hasOwnProperty('devId')) { 42 if (params.hasOwnProperty('devId')) {
...@@ -47,6 +49,12 @@ ...@@ -47,6 +49,12 @@
47 query: params 49 query: params
48 }); 50 });
49 51
52 + $scope.nav = function (path) {
53 + if ($scope.devId) {
54 + ns.navTo(path, { devId: $scope.devId });
55 + }
56 + };
57 +
50 $log.log('OvPortCtrl has been created'); 58 $log.log('OvPortCtrl has been created');
51 }]); 59 }]);
52 }()); 60 }());
......
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
81 self.$route = $route; 81 self.$route = $route;
82 self.$routeParams = $routeParams; 82 self.$routeParams = $routeParams;
83 self.$location = $location; 83 self.$location = $location;
84 - self.version = '1.2.0'; 84 + self.version = '1.3.0';
85 85
86 // initialize services... 86 // initialize services...
87 ts.init(); 87 ts.init();
......