홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
3d4d01cb 1 parent 35fa3d41

ONOS-1783 - GUI -- Refresh buttons for tabular views added. Minor table.js refactor. 

Change-Id: Iee6c65fa8477b367e40a556c3c820ca454601a5f
Inline Side-by-side
Showing 25 changed files with 288 additions and 134 deletions
...@@ -24,3 +24,63 @@ ...@@ -24,3 +24,63 @@
24 padding-top: 20px; 24 padding-top: 20px;
25 padding-bottom: 20px; 25 padding-bottom: 20px;
26 } 26 }
27 +
28 +/* Tabular view upper right control buttons */
29 +
30 +div.ctrl-btns {
31 + display: inline-block;
32 + float: right;
33 + height: 44px;
34 + margin-right: 24px;
35 + margin-top: 7px;
36 +}
37 +
38 +
39 +div.ctrl-btns div {
40 + display: inline-block;
41 + padding: 4px;
42 + cursor: pointer;
43 +}
44 +
45 +/* Inactive */
46 +.light .ctrl-btns div g.icon rect,
47 +.light .ctrl-btns div:hover g.icon rect {
48 + fill: #eee;
49 +}
50 +.dark .ctrl-btns div g.icon rect,
51 +.dark .ctrl-btns div:hover g.icon rect {
52 + fill: #222;
53 +}
54 +
55 +.light .ctrl-btns div g.icon use {
56 + fill: #ddd;
57 +}
58 +.dark .ctrl-btns div g.icon use {
59 + fill: #333;
60 +}
61 +
62 +/* Active hover */
63 +.light .ctrl-btns div.active:hover g.icon rect {
64 + fill: #800;
65 +}
66 +
67 +.dark .ctrl-btns div.active:hover g.icon rect {
68 + fill: #CE5650;
69 +}
70 +
71 +/* Active */
72 +.light .ctrl-btns div.active g.icon use {
73 + fill: #fff;
74 +}
75 +.dark .ctrl-btns div.active g.icon use {
76 + fill: #eee;
77 +}
78 +
79 +.light .ctrl-btns div.active g.icon rect {
80 + fill: #bbb;
81 +}
82 +.dark .ctrl-btns div.active g.icon rect {
83 + fill: #444;
84 +}
85 +
86 +
......
...@@ -37,6 +37,8 @@ ...@@ -37,6 +37,8 @@
37 play: 'play', 37 play: 'play',
38 stop: 'stop', 38 stop: 'stop',
39 39
40 + crown: 'crown',
41 +
40 upArrow: 'triangleUp', 42 upArrow: 'triangleUp',
41 downArrow: 'triangleDown', 43 downArrow: 'triangleDown',
42 44
...@@ -191,7 +193,7 @@ ...@@ -191,7 +193,7 @@
191 return g; 193 return g;
192 } 194 }
193 195
194 - function createSortIcon() { 196 + function sortIcons() {
195 function sortAsc(div) { 197 function sortAsc(div) {
196 div.style('display', 'inline-block'); 198 div.style('display', 'inline-block');
197 loadEmbeddedIcon(div, 'upArrow', 10); 199 loadEmbeddedIcon(div, 'upArrow', 10);
...@@ -236,7 +238,7 @@ ...@@ -236,7 +238,7 @@
236 addDeviceIcon: addDeviceIcon, 238 addDeviceIcon: addDeviceIcon,
237 addHostIcon: addHostIcon, 239 addHostIcon: addHostIcon,
238 iconConfig: function () { return config; }, 240 iconConfig: function () { return config; },
239 - createSortIcon: createSortIcon 241 + sortIcons: sortIcons
240 }; 242 };
241 }]); 243 }]);
242 244
......
...@@ -27,11 +27,15 @@ ...@@ -27,11 +27,15 @@
27 var tableIconTdSize = 33, 27 var tableIconTdSize = 33,
28 pdg = 12, 28 pdg = 12,
29 colWidth = 'col-width', 29 colWidth = 'col-width',
30 - tableIcon = 'table-icon'; 30 + tableIcon = 'table-icon',
31 + asc = 'asc',
32 + desc = 'desc',
33 + none = 'none';
31 34
32 // internal state 35 // internal state
33 var currCol = {}, 36 var currCol = {},
34 - prevCol = {}; 37 + prevCol = {},
38 + sortIconAPI;
35 39
36 // Functions for creating a fixed header on a table (Angular Directive) 40 // Functions for creating a fixed header on a table (Angular Directive)
37 41
...@@ -115,48 +119,49 @@ ...@@ -115,48 +119,49 @@
115 setTableHeight(th, tb); 119 setTableHeight(th, tb);
116 } 120 }
117 121
118 - // Functions for sorting table rows by header and choosing appropriate icon 122 + // Functions for sorting table rows by header
119 123
120 - function updateSortingIcons(thElem, api) { 124 + function updateSortDirection(thElem) {
121 - var div; 125 + sortIconAPI.sortNone(thElem.select('div'));
126 + currCol.div = thElem.append('div');
122 currCol.colId = thElem.attr('colId'); 127 currCol.colId = thElem.attr('colId');
123 128
124 if (currCol.colId === prevCol.colId) { 129 if (currCol.colId === prevCol.colId) {
125 - (currCol.icon === 'downArrow') ? 130 + (currCol.dir === desc) ? currCol.dir = asc : currCol.dir = desc;
126 - currCol.icon = 'upArrow' : 131 + prevCol.dir = currCol.dir;
127 - currCol.icon = 'downArrow';
128 - prevCol.icon = currCol.icon;
129 } else { 132 } else {
130 - currCol.icon = 'upArrow'; 133 + currCol.dir = asc;
131 - prevCol.icon = 'tableColSortNone'; 134 + prevCol.dir = none;
132 } 135 }
136 + (currCol.dir === asc) ?
137 + sortIconAPI.sortAsc(currCol.div) : sortIconAPI.sortDesc(currCol.div);
133 138
134 - div = thElem.select('div'); 139 + if (prevCol.colId && prevCol.dir === none) {
135 - api.sortNone(div); 140 + sortIconAPI.sortNone(prevCol.div);
136 - div = thElem.append('div');
137 -
138 - if (currCol.icon === 'upArrow') {
139 - api.sortAsc(div);
140 - } else {
141 - api.sortDesc(div);
142 - }
143 -
144 - if (prevCol.colId !== undefined &&
145 - prevCol.icon === 'tableColSortNone') {
146 - api.sortNone(prevCol.elem.select('div'));
147 } 141 }
148 142
149 prevCol.colId = currCol.colId; 143 prevCol.colId = currCol.colId;
150 - prevCol.elem = thElem; 144 + prevCol.div = currCol.div;
151 } 145 }
152 146
153 function sortRequestParams() { 147 function sortRequestParams() {
154 return { 148 return {
155 sortCol: currCol.colId, 149 sortCol: currCol.colId,
156 - sortDir: (currCol.icon === 'upArrow' ? 'asc' : 'desc') 150 + sortDir: currCol.dir
157 }; 151 };
158 } 152 }
159 153
154 + function resetSortIcons() {
155 + if (currCol.div) {
156 + sortIconAPI.sortNone(currCol.div);
157 + }
158 + if (prevCol.div) {
159 + sortIconAPI.sortNone(prevCol.div);
160 + }
161 + currCol = {};
162 + prevCol = {};
163 + }
164 +
160 angular.module('onosWidget') 165 angular.module('onosWidget')
161 .directive('onosFixedHeader', ['$window', 'FnService', 'MastService', 166 .directive('onosFixedHeader', ['$window', 'FnService', 'MastService',
162 function (_$window_, _fs_, _mast_) { 167 function (_$window_, _fs_, _mast_) {
...@@ -210,8 +215,8 @@ ...@@ -210,8 +215,8 @@
210 link: function (scope, element) { 215 link: function (scope, element) {
211 $log = _$log_; 216 $log = _$log_;
212 is = _is_; 217 is = _is_;
213 - var table = d3.select(element[0]), 218 + var table = d3.select(element[0]);
214 - sortIconAPI = is.createSortIcon(); 219 + sortIconAPI = is.sortIcons();
215 220
216 // when a header is clicked, change its icon tag 221 // when a header is clicked, change its icon tag
217 // and get sorting order to send to the server. 222 // and get sorting order to send to the server.
...@@ -219,7 +224,7 @@ ...@@ -219,7 +224,7 @@
219 var thElem = d3.select(this); 224 var thElem = d3.select(this);
220 225
221 if (thElem.attr('sortable') === '') { 226 if (thElem.attr('sortable') === '') {
222 - updateSortingIcons(thElem, sortIconAPI); 227 + updateSortDirection(thElem);
223 scope.ctrlCallback({ 228 scope.ctrlCallback({
224 requestParams: sortRequestParams() 229 requestParams: sortRequestParams()
225 }); 230 });
...@@ -227,6 +232,16 @@ ...@@ -227,6 +232,16 @@
227 }); 232 });
228 } 233 }
229 }; 234 };
235 + }])
236 +
237 + .factory('TableService', ['$log', 'IconService',
238 +
239 + function ($log, is) {
240 + sortIconAPI = is.sortIcons();
241 +
242 + return {
243 + resetSortIcons: resetSortIcons
244 + };
230 }]); 245 }]);
231 246
232 }()); 247 }());
......
...@@ -23,59 +23,11 @@ ...@@ -23,59 +23,11 @@
23 } 23 }
24 24
25 #ov-app div.ctrl-btns { 25 #ov-app div.ctrl-btns {
26 - display:inline-block; 26 + width: 290px;
27 - float: right;
28 - width: 200px;
29 - height: 44px;
30 - margin-right: 24px;
31 - margin-top: 7px;
32 } 27 }
33 28
34 -div.ctrl-btns div { 29 +#ov-app div.ctrl-btns div.separator {
35 - display: inline-block; 30 + cursor: auto;
36 - padding: 4px; 31 + width: 24px;
37 - cursor: pointer; 32 + border: none;
38 -}
39 -
40 -
41 -/* Inactive */
42 -.light .ctrl-btns div g.icon rect,
43 -.light .ctrl-btns div:hover g.icon rect {
44 - fill: #eee;
45 -}
46 -.dark .ctrl-btns div g.icon rect,
47 -.dark .ctrl-btns div:hover g.icon rect {
48 - fill: #222;
49 -}
50 -
51 -.light .ctrl-btns div g.icon use {
52 - fill: #ddd;
53 -}
54 -.dark .ctrl-btns div g.icon use {
55 - fill: #333;
56 -}
57 -
58 -/* Active hover */
59 -.light .ctrl-btns div.active:hover g.icon rect {
60 - fill: #800;
61 } 33 }
62 -
63 -.dark .ctrl-btns div.active:hover g.icon rect {
64 - fill: #CE5650;
65 -}
66 -
67 -/* Active */
68 -.light .ctrl-btns div.active g.icon use {
69 - fill: #fff;
70 -}
71 -.dark .ctrl-btns div.active g.icon use {
72 - fill: #eee;
73 -}
74 -
75 -.light .ctrl-btns div.active g.icon rect {
76 - fill: #bbb;
77 -}
78 -.dark .ctrl-btns div.active g.icon rect {
79 - fill: #444;
80 -}
81 -
......
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
3 <div class="tabular-header"> 3 <div class="tabular-header">
4 <h2>Applications ({{ctrl.tableData.length}} total)</h2> 4 <h2>Applications ({{ctrl.tableData.length}} total)</h2>
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 + <div class="refresh active"
7 + icon icon-size="36" icon-id="crown"
8 + ng-click="refresh()"></div>
9 + <div class="separator"></div>
6 <div id="app-install" icon icon-size="36" icon-id="plus" class="active"></div> 10 <div id="app-install" icon icon-size="36" icon-id="plus" class="active"></div>
7 <div id="app-activate" icon icon-size="36" icon-id="play"></div> 11 <div id="app-activate" icon icon-size="36" icon-id="play"></div>
8 <div id="app-deactivate" icon icon-size="36" icon-id="stop"></div> 12 <div id="app-deactivate" icon icon-size="36" icon-id="stop"></div>
......
...@@ -25,9 +25,9 @@ ...@@ -25,9 +25,9 @@
25 25
26 angular.module('ovApp', []) 26 angular.module('ovApp', [])
27 .controller('OvAppCtrl', 27 .controller('OvAppCtrl',
28 - ['$log', '$scope', 'TableBuilderService', 'WebSocketService', 28 + ['$log', '$scope', 'TableService', 'TableBuilderService', 'WebSocketService',
29 29
30 - function ($log, $scope, tbs, wss) { 30 + function ($log, $scope, ts, tbs, wss) {
31 function selCb($event, row) { 31 function selCb($event, row) {
32 selRow = angular.element($event.currentTarget); 32 selRow = angular.element($event.currentTarget);
33 selection = row; 33 selection = row;
...@@ -45,6 +45,12 @@ ...@@ -45,6 +45,12 @@
45 document.getElementById('file').dispatchEvent(evt); 45 document.getElementById('file').dispatchEvent(evt);
46 }); 46 });
47 47
48 + $scope.refresh = function () {
49 + $log.debug('Refreshing application page');
50 + ts.resetSortIcons();
51 + $scope.sortCallback();
52 + };
53 +
48 function appAction(action) { 54 function appAction(action) {
49 if (selection) { 55 if (selection) {
50 $log.debug('Initiating uninstall of', selection); 56 $log.debug('Initiating uninstall of', selection);
......
...@@ -18,5 +18,10 @@ ...@@ -18,5 +18,10 @@
18 ONOS GUI -- Cluster View -- CSS file 18 ONOS GUI -- Cluster View -- CSS file
19 */ 19 */
20 20
21 -#ov-cluster td { 21 +#ov-cluster h2 {
22 + display: inline-block;
23 +}
24 +
25 +#ov-cluster div.ctrl-btns {
26 + width: 45px;
22 } 27 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -18,6 +18,11 @@ ...@@ -18,6 +18,11 @@
18 <div id="ov-cluster"> 18 <div id="ov-cluster">
19 <div class="tabular-header"> 19 <div class="tabular-header">
20 <h2>Cluster Nodes ({{ctrl.tableData.length}} total)</h2> 20 <h2>Cluster Nodes ({{ctrl.tableData.length}} total)</h2>
21 + <div class="ctrl-btns">
22 + <div class="refresh active"
23 + icon icon-size="36" icon-id="crown"
24 + ng-click="refresh()"></div>
25 + </div>
21 </div> 26 </div>
22 27
23 <table class="summary-list" 28 <table class="summary-list"
......
...@@ -23,15 +23,21 @@ ...@@ -23,15 +23,21 @@
23 23
24 angular.module('ovCluster', []) 24 angular.module('ovCluster', [])
25 .controller('OvClusterCtrl', 25 .controller('OvClusterCtrl',
26 - ['$log', '$scope', 'TableBuilderService', 26 + ['$log', '$scope', 'TableService', 'TableBuilderService',
27 27
28 - function ($log, $scope, tbs) { 28 + function ($log, $scope, ts, tbs) {
29 tbs.buildTable({ 29 tbs.buildTable({
30 self: this, 30 self: this,
31 scope: $scope, 31 scope: $scope,
32 tag: 'cluster' 32 tag: 'cluster'
33 }); 33 });
34 34
35 + $scope.refresh = function () {
36 + $log.debug('Refreshing cluster nodes page');
37 + ts.resetSortIcons();
38 + $scope.sortCallback();
39 + };
40 +
35 $log.log('OvClusterCtrl has been created'); 41 $log.log('OvClusterCtrl has been created');
36 }]); 42 }]);
37 }()); 43 }());
......
...@@ -18,6 +18,14 @@ ...@@ -18,6 +18,14 @@
18 ONOS GUI -- Device View -- CSS file 18 ONOS GUI -- Device View -- CSS file
19 */ 19 */
20 20
21 +#ov-device h2 {
22 + display: inline-block;
23 +}
24 +
25 +#ov-device div.ctrl-btns {
26 + width: 45px;
27 +}
28 +
21 /* More in generic panel.css */ 29 /* More in generic panel.css */
22 30
23 #device-details-panel.floatpanel { 31 #device-details-panel.floatpanel {
......
...@@ -2,6 +2,11 @@ ...@@ -2,6 +2,11 @@
2 <div id="ov-device"> 2 <div id="ov-device">
3 <div class="tabular-header"> 3 <div class="tabular-header">
4 <h2>Devices ({{ctrl.tableData.length}} total)</h2> 4 <h2>Devices ({{ctrl.tableData.length}} total)</h2>
5 + <div class="ctrl-btns">
6 + <div class="refresh active"
7 + icon icon-size="36" icon-id="crown"
8 + ng-click="refresh()"></div>
9 + </div>
5 </div> 10 </div>
6 11
7 <table class="summary-list" 12 <table class="summary-list"
......
...@@ -203,12 +203,12 @@ ...@@ -203,12 +203,12 @@
203 203
204 angular.module('ovDevice', []) 204 angular.module('ovDevice', [])
205 .controller('OvDeviceCtrl', 205 .controller('OvDeviceCtrl',
206 - ['$log', '$scope', 'TableBuilderService', 'FnService', 206 + ['$log', '$scope', 'TableService', 'TableBuilderService', 'FnService',
207 'MastService', 'PanelService', 'WebSocketService', 'IconService', 207 'MastService', 'PanelService', 'WebSocketService', 'IconService',
208 'ButtonService', 'NavService', 'TooltipService', 208 'ButtonService', 'NavService', 'TooltipService',
209 209
210 function (_$log_, _$scope_, 210 function (_$log_, _$scope_,
211 - tbs, _fs_, _mast_, _ps_, _wss_, _is_, _bns_, _ns_, _ttip_) { 211 + ts, tbs, _fs_, _mast_, _ps_, _wss_, _is_, _bns_, _ns_, _ttip_) {
212 $log = _$log_; 212 $log = _$log_;
213 $scope = _$scope_; 213 $scope = _$scope_;
214 fs = _fs_; 214 fs = _fs_;
...@@ -243,6 +243,12 @@ ...@@ -243,6 +243,12 @@
243 tag: 'device', 243 tag: 'device',
244 selCb: selCb 244 selCb: selCb
245 }); 245 });
246 +
247 + $scope.refresh = function () {
248 + $log.debug('Refreshing devices page');
249 + ts.resetSortIcons();
250 + $scope.sortCallback();
251 + };
246 createDetailsPane(); 252 createDetailsPane();
247 253
248 // details panel handlers 254 // details panel handlers
......
...@@ -18,6 +18,14 @@ ...@@ -18,6 +18,14 @@
18 ONOS GUI -- Flow View -- CSS file 18 ONOS GUI -- Flow View -- CSS file
19 */ 19 */
20 20
21 +#ov-flow h2 {
22 + display: inline-block;
23 +}
24 +
25 +#ov-flow div.ctrl-btns {
26 + width: 45px;
27 +}
28 +
21 .light #ov-flow tr:nth-child(6n + 2), 29 .light #ov-flow tr:nth-child(6n + 2),
22 .light #ov-flow tr:nth-child(6n + 3), 30 .light #ov-flow tr:nth-child(6n + 3),
23 .light #ov-flow tr:nth-child(6n + 4) { 31 .light #ov-flow tr:nth-child(6n + 4) {
......
...@@ -2,9 +2,14 @@ ...@@ -2,9 +2,14 @@
2 <div id="ov-flow"> 2 <div id="ov-flow">
3 <div class="tabular-header"> 3 <div class="tabular-header">
4 <h2> 4 <h2>
5 - Flows for Device {{ctrl.devId || "none"}} 5 + Flows for Device {{ctrl.devId || "(No device selected)"}}
6 ({{ctrl.tableData.length}} total) 6 ({{ctrl.tableData.length}} total)
7 </h2> 7 </h2>
8 + <div class="ctrl-btns">
9 + <div class="refresh active"
10 + icon icon-size="36" icon-id="crown"
11 + ng-click="refresh()"></div>
12 + </div>
8 </div> 13 </div>
9 14
10 <table class="summary-list" 15 <table class="summary-list"
......
...@@ -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, ts, tbs;
26 26
27 angular.module('ovFlow', []) 27 angular.module('ovFlow', [])
28 .controller('OvFlowCtrl', 28 .controller('OvFlowCtrl',
29 - ['$log', '$scope', '$location', 'FnService', 'TableBuilderService', 29 + ['$log', '$scope', '$location',
30 + 'FnService', 'TableService', 'TableBuilderService',
30 31
31 - function (_$log_, _$scope_, _$location_, _fs_, _tbs_) { 32 + function (_$log_, _$scope_, _$location_, _fs_, _ts_, _tbs_) {
32 var self = this, 33 var self = this,
33 params; 34 params;
34 $log = _$log_; 35 $log = _$log_;
35 $scope = _$scope_; 36 $scope = _$scope_;
36 $location = _$location_; 37 $location = _$location_;
37 fs = _fs_; 38 fs = _fs_;
39 + ts = _ts_;
38 tbs = _tbs_; 40 tbs = _tbs_;
39 41
40 params = $location.search(); 42 params = $location.search();
...@@ -48,6 +50,12 @@ ...@@ -48,6 +50,12 @@
48 tag: 'flow', 50 tag: 'flow',
49 query: params 51 query: params
50 }); 52 });
53 +
54 + $scope.refresh = function () {
55 + $log.debug('Refreshing flows page');
56 + ts.resetSortIcons();
57 + $scope.sortCallback();
58 + };
51 59
52 $log.log('OvFlowCtrl has been created'); 60 $log.log('OvFlowCtrl has been created');
53 }]); 61 }]);
......
...@@ -18,5 +18,10 @@ ...@@ -18,5 +18,10 @@
18 ONOS GUI -- Host View -- CSS file 18 ONOS GUI -- Host View -- CSS file
19 */ 19 */
20 20
21 -#ov-host td { 21 +#ov-host h2 {
22 + display: inline-block;
23 +}
24 +
25 +#ov-host div.ctrl-btns {
26 + width: 45px;
22 } 27 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,6 +2,11 @@ ...@@ -2,6 +2,11 @@
2 <div id="ov-host"> 2 <div id="ov-host">
3 <div class="tabular-header"> 3 <div class="tabular-header">
4 <h2>Hosts ({{ctrl.tableData.length}} total)</h2> 4 <h2>Hosts ({{ctrl.tableData.length}} total)</h2>
5 + <div class="ctrl-btns">
6 + <div class="refresh active"
7 + icon icon-size="36" icon-id="crown"
8 + ng-click="refresh()"></div>
9 + </div>
5 </div> 10 </div>
6 11
7 <table class="summary-list" 12 <table class="summary-list"
......
...@@ -23,14 +23,20 @@ ...@@ -23,14 +23,20 @@
23 23
24 angular.module('ovHost', []) 24 angular.module('ovHost', [])
25 .controller('OvHostCtrl', 25 .controller('OvHostCtrl',
26 - ['$log', '$scope', 'TableBuilderService', 26 + ['$log', '$scope', 'TableService', 'TableBuilderService',
27 27
28 - function ($log, $scope, tbs) { 28 + function ($log, $scope, ts, tbs) {
29 tbs.buildTable({ 29 tbs.buildTable({
30 self: this, 30 self: this,
31 scope: $scope, 31 scope: $scope,
32 tag: 'host' 32 tag: 'host'
33 }); 33 });
34 +
35 + $scope.refresh = function () {
36 + $log.debug('Refreshing hosts page');
37 + ts.resetSortIcons();
38 + $scope.sortCallback();
39 + };
34 40
35 $log.log('OvHostCtrl has been created'); 41 $log.log('OvHostCtrl has been created');
36 }]); 42 }]);
......
...@@ -18,6 +18,14 @@ ...@@ -18,6 +18,14 @@
18 ONOS GUI -- Intent View -- CSS file 18 ONOS GUI -- Intent View -- CSS file
19 */ 19 */
20 20
21 +#ov-intent h2 {
22 + display: inline-block;
23 +}
24 +
25 +#ov-intent div.ctrl-btns {
26 + width: 45px;
27 +}
28 +
21 .light #ov-intent tr:nth-child(6n + 2), 29 .light #ov-intent tr:nth-child(6n + 2),
22 .light #ov-intent tr:nth-child(6n + 3), 30 .light #ov-intent tr:nth-child(6n + 3),
23 .light #ov-intent tr:nth-child(6n + 4) { 31 .light #ov-intent tr:nth-child(6n + 4) {
......
...@@ -18,6 +18,11 @@ ...@@ -18,6 +18,11 @@
18 <div id="ov-intent"> 18 <div id="ov-intent">
19 <div class="tabular-header"> 19 <div class="tabular-header">
20 <h2>Intents ({{ctrl.tableData.length}} total)</h2> 20 <h2>Intents ({{ctrl.tableData.length}} total)</h2>
21 + <div class="ctrl-btns">
22 + <div class="refresh active"
23 + icon icon-size="36" icon-id="crown"
24 + ng-click="refresh()"></div>
25 + </div>
21 </div> 26 </div>
22 <table class="summary-list" 27 <table class="summary-list"
23 onos-fixed-header 28 onos-fixed-header
......
...@@ -23,15 +23,21 @@ ...@@ -23,15 +23,21 @@
23 23
24 angular.module('ovIntent', []) 24 angular.module('ovIntent', [])
25 .controller('OvIntentCtrl', 25 .controller('OvIntentCtrl',
26 - ['$log', '$scope', 'TableBuilderService', 26 + ['$log', '$scope', 'TableService', 'TableBuilderService',
27 27
28 - function ($log, $scope, tbs) { 28 + function ($log, $scope, ts, tbs) {
29 tbs.buildTable({ 29 tbs.buildTable({
30 self: this, 30 self: this,
31 scope: $scope, 31 scope: $scope,
32 tag: 'intent' 32 tag: 'intent'
33 }); 33 });
34 34
35 + $scope.refresh = function () {
36 + $log.debug('Refreshing intents page');
37 + ts.resetSortIcons();
38 + $scope.sortCallback();
39 + };
40 +
35 $log.log('OvIntentCtrl has been created'); 41 $log.log('OvIntentCtrl has been created');
36 }]); 42 }]);
37 }()); 43 }());
......
...@@ -18,5 +18,10 @@ ...@@ -18,5 +18,10 @@
18 ONOS GUI -- Link View -- CSS file 18 ONOS GUI -- Link View -- CSS file
19 */ 19 */
20 20
21 -#ov-link td { 21 +#ov-link h2 {
22 + display: inline-block;
23 +}
24 +
25 +#ov-link div.ctrl-btns {
26 + width: 45px;
22 } 27 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -18,6 +18,11 @@ ...@@ -18,6 +18,11 @@
18 <div id="ov-link"> 18 <div id="ov-link">
19 <div class="tabular-header"> 19 <div class="tabular-header">
20 <h2>Links ({{ctrl.tableData.length}} total)</h2> 20 <h2>Links ({{ctrl.tableData.length}} total)</h2>
21 + <div class="ctrl-btns">
22 + <div class="refresh active"
23 + icon icon-size="36" icon-id="crown"
24 + ng-click="refresh()"></div>
25 + </div>
21 </div> 26 </div>
22 27
23 <table class="summary-list" 28 <table class="summary-list"
......
...@@ -23,14 +23,20 @@ ...@@ -23,14 +23,20 @@
23 23
24 angular.module('ovLink', []) 24 angular.module('ovLink', [])
25 .controller('OvLinkCtrl', 25 .controller('OvLinkCtrl',
26 - ['$log', '$scope', 'TableBuilderService', 26 + ['$log', '$scope', 'TableService', 'TableBuilderService',
27 27
28 - function ($log, $scope, tbs) { 28 + function ($log, $scope, ts, tbs) {
29 tbs.buildTable({ 29 tbs.buildTable({
30 self: this, 30 self: this,
31 scope: $scope, 31 scope: $scope,
32 tag: 'link' 32 tag: 'link'
33 }); 33 });
34 +
35 + $scope.refresh = function () {
36 + $log.debug('Refreshing links page');
37 + ts.resetSortIcons();
38 + $scope.sortCallback();
39 + };
34 40
35 $log.log('OvLinkCtrl has been created'); 41 $log.log('OvLinkCtrl has been created');
36 }]); 42 }]);
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 */ 19 */
20 describe('factory: fw/widget/table.js', function () { 20 describe('factory: fw/widget/table.js', function () {
21 var $log, $compile, $rootScope, 21 var $log, $compile, $rootScope,
22 - fs, mast, is, 22 + fs, ts, mast, is,
23 scope, compiled, 23 scope, compiled,
24 table, thead, tbody, mockHeader, 24 table, thead, tbody, mockHeader,
25 mockH2Height = 20, 25 mockH2Height = 20,
...@@ -99,11 +99,12 @@ describe('factory: fw/widget/table.js', function () { ...@@ -99,11 +99,12 @@ describe('factory: fw/widget/table.js', function () {
99 }); 99 });
100 100
101 beforeEach(inject(function (_$log_, _$compile_, _$rootScope_, 101 beforeEach(inject(function (_$log_, _$compile_, _$rootScope_,
102 - FnService, MastService, IconService) { 102 + FnService, TableService, MastService, IconService) {
103 $log = _$log_; 103 $log = _$log_;
104 $compile = _$compile_; 104 $compile = _$compile_;
105 $rootScope = _$rootScope_; 105 $rootScope = _$rootScope_;
106 fs = FnService; 106 fs = FnService;
107 + ts = TableService;
107 mast = MastService; 108 mast = MastService;
108 is = IconService; 109 is = IconService;
109 })); 110 }));
...@@ -127,6 +128,16 @@ describe('factory: fw/widget/table.js', function () { ...@@ -127,6 +128,16 @@ describe('factory: fw/widget/table.js', function () {
127 mockHeader.remove(); 128 mockHeader.remove();
128 }); 129 });
129 130
131 + it('should define TableBuilderService', function () {
132 + expect(ts).toBeDefined();
133 + });
134 +
135 + it('should define api functions', function () {
136 + expect(fs.areFunctions(ts, [
137 + 'resetSortIcons'
138 + ])).toBeTruthy();
139 + });
140 +
130 function compileTable() { 141 function compileTable() {
131 compiled = $compile(table); 142 compiled = $compile(table);
132 compiled(scope); 143 compiled(scope);
...@@ -204,26 +215,22 @@ describe('factory: fw/widget/table.js', function () { ...@@ -204,26 +215,22 @@ describe('factory: fw/widget/table.js', function () {
204 thElems[1].click(); 215 thElems[1].click();
205 currentTh = angular.element(thElems[1]); 216 currentTh = angular.element(thElems[1]);
206 div = currentTh.find('div'); 217 div = currentTh.find('div');
207 - expect(div.html()).toBe('<svg class="embeddedIcon" ' + 218 + expect(div.html()).toBe(
208 - 'width="10" height="10" viewBox="0 0 50 50">' + 219 + '<svg class="embeddedIcon" width="10" height="10" viewBox="0 0 ' +
209 - '<g class="icon upArrow">' + 220 + '50 50"><g class="icon upArrow"><rect width="50" height="50" ' +
210 - '<rect width="50" height="50" rx="5"></rect>' + 221 + 'rx="5"></rect><use width="50" height="50" class="glyph" xmlns:' +
211 - '<use width="50" height="50" class="glyph" ' + 222 + 'xlink="http://www.w3.org/1999/xlink" xlink:href="#triangleUp">' +
212 - 'xmlns:xlink="http://www.w3.org/1999/xlink" ' + 223 + '</use></g></svg>'
213 - 'xlink:href="#triangleUp">' + 224 + );
214 - '</use>' +
215 - '</g></svg>');
216 thElems[1].click(); 225 thElems[1].click();
217 div = currentTh.find('div'); 226 div = currentTh.find('div');
218 - expect(div.html()).toBe('<svg class="embeddedIcon" ' + 227 + expect(div.html()).toBe(
219 - 'width="10" height="10" viewBox="0 0 50 50">' + 228 + '<svg class="embeddedIcon" width="10" height="10" viewBox="0 0 ' +
220 - '<g class="icon downArrow">' + 229 + '50 50"><g class="icon downArrow"><rect width="50" height="50" ' +
221 - '<rect width="50" height="50" rx="5"></rect>' + 230 + 'rx="5"></rect><use width="50" height="50" class="glyph" xmlns:' +
222 - '<use width="50" height="50" class="glyph" ' + 231 + 'xlink="http://www.w3.org/1999/xlink" xlink:href="#triangleDown">' +
223 - 'xmlns:xlink="http://www.w3.org/1999/xlink" ' + 232 + '</use></g></svg>'
224 - 'xlink:href="#triangleDown">' + 233 + );
225 - '</use>' +
226 - '</g></svg>');
227 234
228 thElems[2].click(); 235 thElems[2].click();
229 div = currentTh.children(); 236 div = currentTh.children();
...@@ -233,15 +240,13 @@ describe('factory: fw/widget/table.js', function () { ...@@ -233,15 +240,13 @@ describe('factory: fw/widget/table.js', function () {
233 // the new element should have the ascending icon 240 // the new element should have the ascending icon
234 currentTh = angular.element(thElems[2]); 241 currentTh = angular.element(thElems[2]);
235 div = currentTh.children(); 242 div = currentTh.children();
236 - expect(div.html()).toBe('<svg class="embeddedIcon" ' + 243 + expect(div.html()).toBe(
237 - 'width="10" height="10" viewBox="0 0 50 50">' + 244 + '<svg class="embeddedIcon" width="10" height="10" viewBox="0 0 ' +
238 - '<g class="icon upArrow">' + 245 + '50 50"><g class="icon upArrow"><rect width="50" height="50" ' +
239 - '<rect width="50" height="50" rx="5"></rect>' + 246 + 'rx="5"></rect><use width="50" height="50" class="glyph" xmlns:' +
240 - '<use width="50" height="50" class="glyph" ' + 247 + 'xlink="http://www.w3.org/1999/xlink" xlink:href="#triangleUp">' +
241 - 'xmlns:xlink="http://www.w3.org/1999/xlink" ' + 248 + '</use></g></svg>'
242 - 'xlink:href="#triangleUp">' + 249 + );
243 - '</use>' +
244 - '</g></svg>');
245 } 250 }
246 251
247 it('should affirm that onos-fixed-header is working', function () { 252 it('should affirm that onos-fixed-header is working', function () {
...@@ -264,8 +269,7 @@ describe('factory: fw/widget/table.js', function () { ...@@ -264,8 +269,7 @@ describe('factory: fw/widget/table.js', function () {
264 269
265 compileTable(); 270 compileTable();
266 verifyGivenTags('onos-sortable-header'); 271 verifyGivenTags('onos-sortable-header');
267 - // ctrlCallback functionality is tested in device-spec 272 +
268 - // only checking that it has been called correctly in the directive
269 scope.sortCallback = jasmine.createSpy('sortCallback'); 273 scope.sortCallback = jasmine.createSpy('sortCallback');
270 274
271 thElems = thead.find('th'); 275 thElems = thead.find('th');
...@@ -273,4 +277,8 @@ describe('factory: fw/widget/table.js', function () { ...@@ -273,4 +277,8 @@ describe('factory: fw/widget/table.js', function () {
273 verifyIcons(thElems); 277 verifyIcons(thElems);
274 }); 278 });
275 279
280 + // Note: testing resetSortIcons isn't feasible because due to the nature of
281 + // directive compilation: they are jQuery elements, not d3 elements,
282 + // so the function doesn't work.
283 +
276 }); 284 });
......