홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
bfab9c7c 1 parent 99c92fde

GUI -- Table views auto refresh every two seconds while maintaining selected items. 

Change-Id: Idbb27cf1977ba5b9410b1d75ce12971195291091
Inline Side-by-side
Showing 13 changed files with 75 additions and 38 deletions
...@@ -189,7 +189,8 @@ ...@@ -189,7 +189,8 @@
189 function (_$log_, _is_) { 189 function (_$log_, _is_) {
190 return { 190 return {
191 scope: { 191 scope: {
192 - ctrlCallback: '&sortCallback' 192 + sortCallback: '&',
193 + sortParams: '='
193 }, 194 },
194 link: function (scope, element) { 195 link: function (scope, element) {
195 $log = _$log_; 196 $log = _$log_;
...@@ -204,8 +205,11 @@ ...@@ -204,8 +205,11 @@
204 205
205 if (col.attr('sortable') === '') { 206 if (col.attr('sortable') === '') {
206 updateSortDirection(col); 207 updateSortDirection(col);
207 - scope.ctrlCallback({ 208 + scope.$apply(function () {
208 - requestParams: sortRequestParams() 209 + scope.sortParams = sortRequestParams();
210 + });
211 + scope.sortCallback({
212 + requestParams: scope.sortParams
209 }); 213 });
210 } 214 }
211 }); 215 });
......
...@@ -21,7 +21,10 @@ ...@@ -21,7 +21,10 @@
21 'use strict'; 21 'use strict';
22 22
23 // injected refs 23 // injected refs
24 - var $log, fs, wss, ts; 24 + var $log, $interval, fs, wss, ts;
25 +
26 + // constants
27 + var refreshInterval = 2000;
25 28
26 // example params to buildTable: 29 // example params to buildTable:
27 // { 30 // {
...@@ -40,9 +43,11 @@ ...@@ -40,9 +43,11 @@
40 root = o.tag + 's', 43 root = o.tag + 's',
41 req = o.tag + 'DataRequest', 44 req = o.tag + 'DataRequest',
42 resp = o.tag + 'DataResponse', 45 resp = o.tag + 'DataResponse',
43 - onSel = fs.isF(o.selCb); 46 + onSel = fs.isF(o.selCb),
47 + promise;
44 48
45 o.scope.tableData = []; 49 o.scope.tableData = [];
50 + o.scope.sortParams = {};
46 51
47 function respCb(data) { 52 function respCb(data) {
48 o.scope.tableData = data[root]; 53 o.scope.tableData = data[root];
...@@ -55,16 +60,15 @@ ...@@ -55,16 +60,15 @@
55 } 60 }
56 o.scope.sortCallback = sortCb; 61 o.scope.sortCallback = sortCb;
57 62
58 - function selCb($event, sel) { 63 + function selCb($event, selRow) {
59 - o.scope.sel = (o.scope.sel === sel) ? null : sel; 64 + o.scope.selId = (o.scope.selId === selRow.id) ? null : selRow.id;
60 - onSel && onSel($event, o.scope.sel); 65 + onSel && onSel($event, selRow);
61 } 66 }
62 o.scope.selectCallback = selCb; 67 o.scope.selectCallback = selCb;
63 68
64 - function refresh() { 69 + function refresh(params) {
65 $log.debug('Refreshing ' + root + ' page'); 70 $log.debug('Refreshing ' + root + ' page');
66 - ts.resetSort(); 71 + sortCb(params);
67 - sortCb();
68 } 72 }
69 o.scope.refresh = refresh; 73 o.scope.refresh = refresh;
70 74
...@@ -75,17 +79,26 @@ ...@@ -75,17 +79,26 @@
75 o.scope.$on('$destroy', function () { 79 o.scope.$on('$destroy', function () {
76 wss.unbindHandlers(handlers); 80 wss.unbindHandlers(handlers);
77 ts.resetSort(); 81 ts.resetSort();
82 + if (angular.isDefined(promise)) {
83 + $interval.cancel(promise);
84 + promise = undefined;
85 + }
78 }); 86 });
79 87
80 sortCb(); 88 sortCb();
89 +
90 + promise = $interval(function () {
91 + refresh(o.scope.sortParams);
92 + }, refreshInterval);
81 } 93 }
82 94
83 angular.module('onosWidget') 95 angular.module('onosWidget')
84 .factory('TableBuilderService', 96 .factory('TableBuilderService',
85 - ['$log', 'FnService', 'WebSocketService', 'TableService', 97 + ['$log', '$interval', 'FnService', 'WebSocketService', 'TableService',
86 98
87 - function (_$log_, _fs_, _wss_, _ts_) { 99 + function (_$log_, _$interval_, _fs_, _wss_, _ts_) {
88 $log = _$log_; 100 $log = _$log_;
101 + $interval = _$interval_;
89 fs = _fs_; 102 fs = _fs_;
90 wss = _wss_; 103 wss = _wss_;
91 ts = _ts_; 104 ts = _ts_;
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div class="refresh active" 6 <div class="refresh active"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 - ng-click="refresh()"></div> 8 + ng-click="refresh(sortParams)"></div>
9 <div class="separator"></div> 9 <div class="separator"></div>
10 <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>
11 <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>
...@@ -25,7 +25,9 @@ ...@@ -25,7 +25,9 @@
25 <div class="summary-list" onos-fixed-header> 25 <div class="summary-list" onos-fixed-header>
26 26
27 <div class="table-header" 27 <div class="table-header"
28 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 28 + onos-sortable-header
29 + sort-params="sortParams"
30 + sort-callback="sortCallback(sortParams)">
29 <table> 31 <table>
30 <tr> 32 <tr>
31 <td colId="state" class="table-icon" sortable></td> 33 <td colId="state" class="table-icon" sortable></td>
...@@ -45,9 +47,9 @@ ...@@ -45,9 +47,9 @@
45 </td> 47 </td>
46 </tr> 48 </tr>
47 49
48 - <tr ng-repeat="app in tableData" 50 + <tr ng-repeat="app in tableData track by app.id"
49 ng-click="selectCallback($event, app)" 51 ng-click="selectCallback($event, app)"
50 - ng-class="{selected: app === sel}" 52 + ng-class="{selected: app.id === selId}"
51 ng-repeat-done> 53 ng-repeat-done>
52 <td class="table-icon"> 54 <td class="table-icon">
53 <div icon icon-id="{{app._iconid_state}}"></div> 55 <div icon icon-id="{{app._iconid_state}}"></div>
......
...@@ -21,14 +21,16 @@ ...@@ -21,14 +21,16 @@
21 <div class="ctrl-btns"> 21 <div class="ctrl-btns">
22 <div class="refresh active" 22 <div class="refresh active"
23 icon icon-size="36" icon-id="refresh" 23 icon icon-size="36" icon-id="refresh"
24 - ng-click="refresh()"></div> 24 + ng-click="refresh(sortParams)"></div>
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 <div class="summary-list" onos-fixed-header> 28 <div class="summary-list" onos-fixed-header>
29 29
30 <div class="table-header" 30 <div class="table-header"
31 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 31 + onos-sortable-header
32 + sort-params="sortParams"
33 + sort-callback="sortCallback(sortParams)">
32 <table> 34 <table>
33 <tr> 35 <tr>
34 <td colId="_iconid_state" class="table-icon" sortable></td> 36 <td colId="_iconid_state" class="table-icon" sortable></td>
......
...@@ -5,14 +5,16 @@ ...@@ -5,14 +5,16 @@
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div class="refresh active" 6 <div class="refresh active"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 - ng-click="refresh()"></div> 8 + ng-click="refresh(sortParams)"></div>
9 </div> 9 </div>
10 </div> 10 </div>
11 11
12 <div class="summary-list" onos-fixed-header> 12 <div class="summary-list" onos-fixed-header>
13 13
14 <div class="table-header" 14 <div class="table-header"
15 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 15 + onos-sortable-header
16 + sort-params="sortParams"
17 + sort-callback="sortCallback(sortParams)">
16 <table> 18 <table>
17 <tr> 19 <tr>
18 <td colId="available" class="table-icon" sortable></td> 20 <td colId="available" class="table-icon" sortable></td>
...@@ -36,9 +38,9 @@ ...@@ -36,9 +38,9 @@
36 </td> 38 </td>
37 </tr> 39 </tr>
38 40
39 - <tr ng-repeat="dev in tableData" 41 + <tr ng-repeat="dev in tableData track by dev.id"
40 ng-click="selectCallback($event, dev)" 42 ng-click="selectCallback($event, dev)"
41 - ng-class="{selected: dev === sel}" 43 + ng-class="{selected: dev.id === selId}"
42 ng-repeat-done> 44 ng-repeat-done>
43 <td class="table-icon"> 45 <td class="table-icon">
44 <div icon icon-id="{{dev._iconid_available}}"></div> 46 <div icon icon-id="{{dev._iconid_available}}"></div>
......
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
242 242
243 function selCb($event, row) { 243 function selCb($event, row) {
244 selRow = angular.element($event.currentTarget); 244 selRow = angular.element($event.currentTarget);
245 - if ($scope.sel) { 245 + if ($scope.selId) {
246 wss.sendEvent(detailsReq, { id: row.id }); 246 wss.sendEvent(detailsReq, { id: row.id });
247 } else { 247 } else {
248 detailsPanel.hide(); 248 detailsPanel.hide();
......
...@@ -8,14 +8,16 @@ ...@@ -8,14 +8,16 @@
8 <div class="ctrl-btns"> 8 <div class="ctrl-btns">
9 <div class="refresh active" 9 <div class="refresh active"
10 icon icon-size="36" icon-id="refresh" 10 icon icon-size="36" icon-id="refresh"
11 - ng-click="refresh()"></div> 11 + ng-click="refresh(sortParams)"></div>
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 <div class="summary-list" onos-fixed-header> 15 <div class="summary-list" onos-fixed-header>
16 16
17 <div class="table-header" 17 <div class="table-header"
18 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 18 + onos-sortable-header
19 + sort-params="sortParams"
20 + sort-callback="sortCallback(sortParams)">
19 <table> 21 <table>
20 <tr> 22 <tr>
21 <td colId="id" col-width="180px" sortable>Flow ID </td> 23 <td colId="id" col-width="180px" sortable>Flow ID </td>
......
...@@ -24,14 +24,16 @@ ...@@ -24,14 +24,16 @@
24 <div class="ctrl-btns"> 24 <div class="ctrl-btns">
25 <div class="refresh active" 25 <div class="refresh active"
26 icon icon-size="36" icon-id="refresh" 26 icon icon-size="36" icon-id="refresh"
27 - ng-click="refresh()"></div> 27 + ng-click="refresh(sortParams)"></div>
28 </div> 28 </div>
29 </div> 29 </div>
30 30
31 <div class="summary-list" onos-fixed-header> 31 <div class="summary-list" onos-fixed-header>
32 32
33 <div class="table-header" 33 <div class="table-header"
34 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 34 + onos-sortable-header
35 + sort-params="sortParams"
36 + sort-callback="sortCallback(sortParams)">
35 <table> 37 <table>
36 <tr> 38 <tr>
37 <td colId="id" sortable>Group ID </td> 39 <td colId="id" sortable>Group ID </td>
......
...@@ -5,14 +5,16 @@ ...@@ -5,14 +5,16 @@
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div class="refresh active" 6 <div class="refresh active"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 - ng-click="refresh()"></div> 8 + ng-click="refresh(sortParams)"></div>
9 </div> 9 </div>
10 </div> 10 </div>
11 11
12 <div class="summary-list" onos-fixed-header> 12 <div class="summary-list" onos-fixed-header>
13 13
14 <div class="table-header" 14 <div class="table-header"
15 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 15 + onos-sortable-header
16 + sort-params="sortParams"
17 + sort-callback="sortCallback(sortParams)">
16 <table> 18 <table>
17 <tr> 19 <tr>
18 <td colId="type" class="table-icon" sortable></td> 20 <td colId="type" class="table-icon" sortable></td>
......
...@@ -21,14 +21,16 @@ ...@@ -21,14 +21,16 @@
21 <div class="ctrl-btns"> 21 <div class="ctrl-btns">
22 <div class="refresh active" 22 <div class="refresh active"
23 icon icon-size="36" icon-id="refresh" 23 icon icon-size="36" icon-id="refresh"
24 - ng-click="refresh()"></div> 24 + ng-click="refresh(sortParams)"></div>
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 <div class="summary-list" onos-fixed-header> 28 <div class="summary-list" onos-fixed-header>
29 29
30 <div class="table-header" 30 <div class="table-header"
31 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 31 + onos-sortable-header
32 + sort-params="sortParams"
33 + sort-callback="sortCallback(sortParams)">
32 <table> 34 <table>
33 <tr> 35 <tr>
34 <td colId="appId" sortable>Application ID </td> 36 <td colId="appId" sortable>Application ID </td>
......
...@@ -21,14 +21,16 @@ ...@@ -21,14 +21,16 @@
21 <div class="ctrl-btns"> 21 <div class="ctrl-btns">
22 <div class="refresh active" 22 <div class="refresh active"
23 icon icon-size="36" icon-id="refresh" 23 icon icon-size="36" icon-id="refresh"
24 - ng-click="refresh()"></div> 24 + ng-click="refresh(sortParams)"></div>
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 <div class="summary-list" onos-fixed-header> 28 <div class="summary-list" onos-fixed-header>
29 29
30 <div class="table-header" 30 <div class="table-header"
31 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 31 + onos-sortable-header
32 + sort-params="sortParams"
33 + sort-callback="sortCallback(sortParams)">
32 <table> 34 <table>
33 <tr> 35 <tr>
34 <td colId="_iconid_state" class="table-icon" sortable></td> 36 <td colId="_iconid_state" class="table-icon" sortable></td>
......
...@@ -24,14 +24,16 @@ ...@@ -24,14 +24,16 @@
24 <div class="ctrl-btns"> 24 <div class="ctrl-btns">
25 <div class="refresh active" 25 <div class="refresh active"
26 icon icon-size="36" icon-id="refresh" 26 icon icon-size="36" icon-id="refresh"
27 - ng-click="refresh()"></div> 27 + ng-click="refresh(sortParams)"></div>
28 </div> 28 </div>
29 </div> 29 </div>
30 30
31 <div class="summary-list" onos-fixed-header> 31 <div class="summary-list" onos-fixed-header>
32 32
33 <div class="table-header" 33 <div class="table-header"
34 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 34 + onos-sortable-header
35 + sort-params="sortParams"
36 + sort-callback="sortCallback(sortParams)">
35 <table> 37 <table>
36 <tr> 38 <tr>
37 <td colId="id" col-width="60px" sortable>Port ID </td> 39 <td colId="id" col-width="60px" sortable>Port ID </td>
......
...@@ -5,14 +5,16 @@ ...@@ -5,14 +5,16 @@
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div class="refresh active" 6 <div class="refresh active"
7 icon icon-size="36" icon-id="refresh" 7 icon icon-size="36" icon-id="refresh"
8 - ng-click="refresh()"></div> 8 + ng-click="refresh(sortParams)"></div>
9 </div> 9 </div>
10 </div> 10 </div>
11 11
12 <div class="summary-list" onos-fixed-header> 12 <div class="summary-list" onos-fixed-header>
13 13
14 <div class="table-header" 14 <div class="table-header"
15 - onos-sortable-header sort-callback="sortCallback(requestParams)"> 15 + onos-sortable-header
16 + sort-params="sortParams"
17 + sort-callback="sortCallback(sortParams)">
16 <table> 18 <table>
17 <tr> 19 <tr>
18 <td colId="component" sortable col-width="400px">Component </td> 20 <td colId="component" sortable col-width="400px">Component </td>
......