홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
412adc82 1 parent 52bb4856

GUI: Migrated table views to use the new custom "ONOS Loading..." animation. 

- cleaned up the logic for the table refresh task.

Change-Id: I5f1e1ef5ad171c83eed3a08bbe25b5bd8d44a93b
Inline Side-by-side
Showing 17 changed files with 37 additions and 130 deletions
...@@ -323,7 +323,8 @@ ...@@ -323,7 +323,8 @@
323 unbindHandlers: unbindHandlers, 323 unbindHandlers: unbindHandlers,
324 addOpenListener: addOpenListener, 324 addOpenListener: addOpenListener,
325 removeOpenListener: removeOpenListener, 325 removeOpenListener: removeOpenListener,
326 - sendEvent: sendEvent 326 + sendEvent: sendEvent,
327 + isConnected: function () { return wsUp; }
327 }; 328 };
328 } 329 }
329 ]); 330 ]);
......
...@@ -175,44 +175,6 @@ ...@@ -175,44 +175,6 @@
175 '83.5,37.7c0-2.1-1.2-3.8-2.7-3.8h-0.7c-1.5,0-2.7,1.7-2.7,3.8v55.9' + 175 '83.5,37.7c0-2.1-1.2-3.8-2.7-3.8h-0.7c-1.5,0-2.7,1.7-2.7,3.8v55.9' +
176 'c0,2.1,1.2,3.8,2.7,3.8h0.7c1.5,0,2.7-1.7,2.7-3.8V37.7z', 176 'c0,2.1,1.2,3.8,2.7,3.8h0.7c1.5,0,2.7-1.7,2.7-3.8V37.7z',
177 177
178 - loading: 'M103.1,53.1c0,0,0,0.2,0,0.5c0,0.2,0,0.4,0,0.7c0,0.3,0,0' +
179 - '.6,0,0.9c-0.1,1.3-0.2,3-0.5,4.8c-0.5,3.4-1.6,6.8-1.6,6.8l-9.2-2.' +
180 - '7c0,0,0.8-2.7,1.1-5.5c0.2-1.4,0.3-2.8,0.3-3.8c0-0.3,0-0.5,0-0.7c' +
181 - '0-0.2,0-0.4,0-0.6c0-0.3,0-0.5,0-0.5L103.1,53.1z M87.3,74.3c0,0-0' +
182 - '.1,0.2-0.3,0.5c-0.2,0.3-0.4,0.6-0.7,1.1c-0.6,0.9-1.4,2-2.3,3.1c-' +
183 - '1.8,2.2-3.9,4.1-3.9,4.1l5.7,6.5c0,0,0.7-0.5,1.6-1.4c1-0.9,2.2-2.' +
184 - '1,3.3-3.4c1.1-1.3,2.2-2.6,3-3.7c0.4-0.5,0.7-1,0.9-1.3c0.2-0.3,0.' +
185 - '3-0.4,0.3-0.4L87.3,74.3z M70.8,89.2c0,0-0.2,0.1-0.5,0.2c-0.3,0.2' +
186 - '-0.6,0.3-1.2,0.5c-1,0.4-2.3,0.9-3.7,1.4c-2.7,0.9-5.5,1.3-5.5,1.3' +
187 - 'l1.1,7.6c0,0,0.8-0.1,2.1-0.3c1.3-0.2,2.9-0.6,4.6-1c1.6-0.5,3.3-1' +
188 - ',4.5-1.5c0.6-0.2,1.2-0.5,1.5-0.6c0.3-0.1,0.5-0.2,0.5-0.2L70.8,89' +
189 - '.2z M48.6,92.9c0,0-0.2,0-0.5-0.1c-0.4,0-0.7-0.1-1.3-0.2c-1.1-0.2' +
190 - '-2.5-0.5-3.9-0.8c-2.8-0.7-5.4-1.9-5.4-1.9L34.6,96c0,0,3,1.5,6.3,' +
191 - '2.5c1.6,0.5,3.3,0.9,4.5,1.2c0.6,0.1,1.2,0.2,1.5,0.3c0.3,0.1,0.5,' +
192 - '0.1,0.5,0.1L48.6,92.9z M27.6,83.8c0,0-0.1-0.1-0.4-0.3c-0.3-0.2-0' +
193 - '.6-0.5-1-0.9c-0.8-0.7-1.8-1.8-2.8-2.8c-2-2.2-3.6-4.6-3.6-4.6l-5,' +
194 - '3.2c0,0,0.4,0.7,1.1,1.7c0.7,1,1.7,2.4,2.8,3.7c1.1,1.3,2.2,2.5,3.' +
195 - '1,3.4c0.4,0.4,0.9,0.8,1.1,1.1c0.3,0.2,0.4,0.4,0.4,0.4L27.6,83.8z' +
196 - 'M14.8,64.7c0,0-0.1-0.2-0.2-0.5c-0.1-0.3-0.2-0.7-0.4-1.3c-0.3-1.1' +
197 - '-0.6-2.5-0.8-4c-0.5-2.9-0.5-5.9-0.5-5.9l-5,0c0,0,0,0.8,0,2.1c0,1' +
198 - '.2,0.1,2.9,0.3,4.5c0.2,1.6,0.5,3.3,0.8,4.5c0.1,0.6,0.3,1.2,0.4,1' +
199 - '.5c0.1,0.3,0.1,0.5,0.1,0.5L14.8,64.7z M14.3,41.4c0,0,0.1-0.2,0.1' +
200 - '-0.5c0.1-0.3,0.2-0.7,0.4-1.3c0.3-1.1,0.8-2.5,1.4-3.8c1.2-2.7,2.8' +
201 - '-5.3,2.8-5.3l-3.4-2.2c0,0-1.8,2.7-3.2,5.7c-0.7,1.5-1.3,3-1.7,4.2' +
202 - 'c-0.2,0.6-0.4,1.1-0.5,1.4C10,39.9,10,40.1,10,40.1L14.3,41.4z M26' +
203 - '.7,21.3c0,0,0.1-0.1,0.4-0.4c0.3-0.2,0.6-0.5,1-0.9c0.9-0.7,2.1-1.' +
204 - '6,3.3-2.5c1.2-0.8,2.5-1.6,3.5-2.1c1-0.5,1.7-0.9,1.7-0.9l-1.3-2.9' +
205 - 'c0,0-0.7,0.3-1.8,0.9c-1.1,0.5-2.5,1.3-3.9,2.2c-1.4,0.9-2.7,1.8-3' +
206 - '.7,2.5c-0.5,0.4-0.9,0.7-1.2,0.9c-0.3,0.2-0.4,0.3-0.4,0.3L26.7,21' +
207 - '.3z M48.2,11c0,0,0.2,0,0.5-0.1c0.3,0,0.8-0.1,1.4-0.2c1.1-0.1,2.6' +
208 - '-0.3,4.2-0.3c3-0.1,6.1,0.3,6.1,0.3l0.3-2.3c0,0-0.8-0.1-2-0.3C57.' +
209 - '4,8.1,55.8,8,54.2,8c-1.6,0-3.2,0-4.4,0.1c-0.6,0-1.1,0.1-1.5,0.1c' +
210 - '-0.3,0-0.5,0.1-0.5,0.1L48.2,11z M72,14c0,0,0.7,0.3,1.7,0.8c1,0.5' +
211 - ',2.4,1.2,3.7,2c2.6,1.6,5,3.6,5,3.6l0.9-1c0,0-2.4-2.1-5-3.9c-1.3-' +
212 - '0.9-2.7-1.7-3.8-2.3c-1.1-0.6-1.8-0.9-1.8-0.9L72,14zM90.7,29.6c0,' +
213 - '0,0.4,0.6,1,1.6c0.6,1,1.4,2.3,2,3.7c0.7,1.4,1.3,2.8,1.7,3.9c0.4,' +
214 - '1.1,0.6,1.8,0.6,1.8l0.4-0.1c0,0-0.2-0.8-0.6-1.9c-0.4-1.1-0.9-2.6' +
215 - '-1.5-4c-0.6-1.4-1.3-2.9-1.9-3.9c-0.6-1-1-1.7-1-1.7L90.7,29.6z',
216 178
217 // --- Navigation glyphs ------------------------------------ 179 // --- Navigation glyphs ------------------------------------
218 180
......
...@@ -45,8 +45,6 @@ ...@@ -45,8 +45,6 @@
45 upArrow: 'triangleUp', 45 upArrow: 'triangleUp',
46 downArrow: 'triangleDown', 46 downArrow: 'triangleDown',
47 47
48 - loading: 'loading',
49 -
50 appInactive: 'unknown', 48 appInactive: 'unknown',
51 49
52 devIcon_SWITCH: 'switch', 50 devIcon_SWITCH: 'switch',
......
...@@ -22,31 +22,6 @@ div.summary-list { ...@@ -22,31 +22,6 @@ div.summary-list {
22 border-spacing: 0; 22 border-spacing: 0;
23 } 23 }
24 24
25 -div.loading-wheel {
26 - display: inline-block;
27 - position: absolute;
28 - margin-top: 40px;
29 - left: 47%;
30 - animation: spin reverse 2s ease infinite;
31 - z-index: 1000;
32 -}
33 -
34 -@keyframes spin {
35 - to {
36 - transform: rotate(360deg);
37 - }
38 -}
39 -
40 -div.loading-wheel svg.embeddedIcon g.icon .glyph {
41 - opacity: .8;
42 -}
43 -.light div.loading-wheel svg.embeddedIcon g.icon .glyph {
44 - fill: #964949;
45 -}
46 -.dark div.loading-wheel svg.embeddedIcon g.icon .glyph {
47 - fill: whitesmoke;
48 -}
49 -
50 div.summary-list table { 25 div.summary-list table {
51 border-collapse: collapse; 26 border-collapse: collapse;
52 table-layout: fixed; 27 table-layout: fixed;
......
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
21 'use strict'; 21 'use strict';
22 22
23 // injected refs 23 // injected refs
24 - var $log, $interval, $timeout, fs, wss; 24 + var $log, $interval, $timeout, fs, wss, ls;
25 25
26 // constants 26 // constants
27 var refreshInterval = 2000, 27 var refreshInterval = 2000,
28 - loadingWait = 500; 28 + tardyWait = 500;
29 29
30 // example params to buildTable: 30 // example params to buildTable:
31 // { 31 // {
...@@ -49,21 +49,20 @@ ...@@ -49,21 +49,20 @@
49 onResp = fs.isF(o.respCb), 49 onResp = fs.isF(o.respCb),
50 idKey = o.idKey || 'id', 50 idKey = o.idKey || 'id',
51 oldTableData = [], 51 oldTableData = [],
52 - loaded = false, 52 + refreshPromise,
53 - refreshPromise, loadingPromise; 53 + tardyPromise;
54 54
55 o.scope.tableData = []; 55 o.scope.tableData = [];
56 o.scope.changedData = []; 56 o.scope.changedData = [];
57 o.scope.sortParams = {}; 57 o.scope.sortParams = {};
58 - o.scope.loading = true;
59 o.scope.autoRefresh = true; 58 o.scope.autoRefresh = true;
60 o.scope.autoRefreshTip = 'Toggle auto refresh'; 59 o.scope.autoRefreshTip = 'Toggle auto refresh';
61 60
62 // === websocket functions -------------------- 61 // === websocket functions --------------------
63 // response 62 // response
64 function respCb(data) { 63 function respCb(data) {
65 - loaded = true; 64 + cancelTardy();
66 - o.scope.loading = false; 65 + ls.stop();
67 o.scope.tableData = data[root]; 66 o.scope.tableData = data[root];
68 onResp && onResp(); 67 onResp && onResp();
69 68
...@@ -85,23 +84,28 @@ ...@@ -85,23 +84,28 @@
85 handlers[resp] = respCb; 84 handlers[resp] = respCb;
86 wss.bindHandlers(handlers); 85 wss.bindHandlers(handlers);
87 86
87 + // handle "loading..." animation
88 + function scheduleTardy() {
89 + tardyPromise = $timeout(ls.start, tardyWait);
90 + }
91 +
92 + function cancelTardy() {
93 + if (tardyPromise) {
94 + $timeout.cancel(tardyPromise);
95 + tardyPromise = null;
96 + }
97 + }
98 +
88 // request 99 // request
89 function sortCb(params) { 100 function sortCb(params) {
90 var p = angular.extend({}, params, o.query); 101 var p = angular.extend({}, params, o.query);
91 - wss.sendEvent(req, p); 102 + if (wss.isConnected()) {
92 - stillLoading(); 103 + wss.sendEvent(req, p);
104 + scheduleTardy();
105 + }
93 } 106 }
94 o.scope.sortCallback = sortCb; 107 o.scope.sortCallback = sortCb;
95 108
96 - // show loading wheel if it's taking a while for the server to respond
97 - function stillLoading() {
98 - loaded = false;
99 - loadingPromise = $timeout(function () {
100 - if (!loaded) {
101 - o.scope.loading = true;
102 - }
103 - }, loadingWait);
104 - }
105 109
106 // === selecting a row functions ---------------- 110 // === selecting a row functions ----------------
107 function selCb($event, selRow) { 111 function selCb($event, selRow) {
...@@ -112,19 +116,23 @@ ...@@ -112,19 +116,23 @@
112 o.scope.selectCallback = selCb; 116 o.scope.selectCallback = selCb;
113 117
114 // === autoRefresh functions ------------------ 118 // === autoRefresh functions ------------------
115 - function startRefresh() { 119 + function fetchDataIfNotWaiting() {
116 - refreshPromise = $interval(function () { 120 + if (!tardyPromise) {
117 if (fs.debugOn('widget')) { 121 if (fs.debugOn('widget')) {
118 $log.debug('Refreshing ' + root + ' page'); 122 $log.debug('Refreshing ' + root + ' page');
119 } 123 }
120 sortCb(o.scope.sortParams); 124 sortCb(o.scope.sortParams);
121 - }, refreshInterval); 125 + }
126 + }
127 +
128 + function startRefresh() {
129 + refreshPromise = $interval(fetchDataIfNotWaiting, refreshInterval);
122 } 130 }
123 131
124 function stopRefresh() { 132 function stopRefresh() {
125 - if (angular.isDefined(refreshPromise)) { 133 + if (refreshPromise) {
126 $interval.cancel(refreshPromise); 134 $interval.cancel(refreshPromise);
127 - refreshPromise = undefined; 135 + refreshPromise = null;
128 } 136 }
129 } 137 }
130 138
...@@ -138,10 +146,7 @@ ...@@ -138,10 +146,7 @@
138 o.scope.$on('$destroy', function () { 146 o.scope.$on('$destroy', function () {
139 wss.unbindHandlers(handlers); 147 wss.unbindHandlers(handlers);
140 stopRefresh(); 148 stopRefresh();
141 - if (angular.isDefined(loadingPromise)) { 149 + cancelTardy();
142 - $timeout.cancel(loadingPromise);
143 - loadingPromise = undefined;
144 - }
145 }); 150 });
146 151
147 sortCb(); 152 sortCb();
...@@ -151,13 +156,15 @@ ...@@ -151,13 +156,15 @@
151 angular.module('onosWidget') 156 angular.module('onosWidget')
152 .factory('TableBuilderService', 157 .factory('TableBuilderService',
153 ['$log', '$interval', '$timeout', 'FnService', 'WebSocketService', 158 ['$log', '$interval', '$timeout', 'FnService', 'WebSocketService',
159 + 'LoadingService',
154 160
155 - function (_$log_, _$interval_, _$timeout_, _fs_, _wss_) { 161 + function (_$log_, _$interval_, _$timeout_, _fs_, _wss_, _ls_) {
156 $log = _$log_; 162 $log = _$log_;
157 $interval = _$interval_; 163 $interval = _$interval_;
158 $timeout = _$timeout_; 164 $timeout = _$timeout_;
159 fs = _fs_; 165 fs = _fs_;
160 wss = _wss_; 166 wss = _wss_;
167 + ls = _ls_;
161 168
162 return { 169 return {
163 buildTable: buildTable 170 buildTable: buildTable
......
...@@ -37,9 +37,6 @@ ...@@ -37,9 +37,6 @@
37 </div> 37 </div>
38 38
39 <div class="summary-list" onos-table-resize> 39 <div class="summary-list" onos-table-resize>
40 - <div ng-show="loading" class="loading-wheel"
41 - icon icon-id="loading" icon-size="75"></div>
42 -
43 <div class="table-header" onos-sortable-header> 40 <div class="table-header" onos-sortable-header>
44 <table> 41 <table>
45 <tr> 42 <tr>
......
...@@ -27,9 +27,6 @@ ...@@ -27,9 +27,6 @@
27 </div> 27 </div>
28 28
29 <div class="summary-list" onos-table-resize> 29 <div class="summary-list" onos-table-resize>
30 - <div ng-show="loading" class="loading-wheel"
31 - icon icon-id="loading" icon-size="75"></div>
32 -
33 <div class="table-header" onos-sortable-header> 30 <div class="table-header" onos-sortable-header>
34 <table> 31 <table>
35 <tr> 32 <tr>
......
...@@ -30,9 +30,6 @@ ...@@ -30,9 +30,6 @@
30 </div> 30 </div>
31 31
32 <div class="summary-list" onos-table-resize> 32 <div class="summary-list" onos-table-resize>
33 - <div ng-show="loading" class="loading-wheel"
34 - icon icon-id="loading" icon-size="75"></div>
35 -
36 <div class="table-header" onos-sortable-header> 33 <div class="table-header" onos-sortable-header>
37 <table> 34 <table>
38 <tr> 35 <tr>
......
...@@ -34,9 +34,6 @@ ...@@ -34,9 +34,6 @@
34 </div> 34 </div>
35 35
36 <div class="summary-list" onos-table-resize> 36 <div class="summary-list" onos-table-resize>
37 - <div ng-show="loading" class="loading-wheel"
38 - icon icon-id="loading" icon-size="75"></div>
39 -
40 <div class="table-header" onos-sortable-header> 37 <div class="table-header" onos-sortable-header>
41 <table> 38 <table>
42 <tr> 39 <tr>
......
...@@ -50,9 +50,6 @@ ...@@ -50,9 +50,6 @@
50 </div> 50 </div>
51 51
52 <div class="summary-list" onos-table-resize> 52 <div class="summary-list" onos-table-resize>
53 - <div ng-show="loading" class="loading-wheel"
54 - icon icon-id="loading" icon-size="75"></div>
55 -
56 <div class="table-header" onos-sortable-header> 53 <div class="table-header" onos-sortable-header>
57 <table> 54 <table>
58 <tr> 55 <tr>
......
...@@ -11,9 +11,6 @@ ...@@ -11,9 +11,6 @@
11 </div> 11 </div>
12 12
13 <div class="summary-list" onos-table-resize> 13 <div class="summary-list" onos-table-resize>
14 - <div ng-show="loading" class="loading-wheel"
15 - icon icon-id="loading" icon-size="75"></div>
16 -
17 <div class="table-header" onos-sortable-header> 14 <div class="table-header" onos-sortable-header>
18 <table> 15 <table>
19 <tr> 16 <tr>
......
...@@ -16,9 +16,6 @@ ...@@ -16,9 +16,6 @@
16 </div> 16 </div>
17 17
18 <div class="summary-list" onos-table-resize> 18 <div class="summary-list" onos-table-resize>
19 - <div ng-show="loading" class="loading-wheel"
20 - icon icon-id="loading" icon-size="75"></div>
21 -
22 <div class="table-header" onos-sortable-header> 19 <div class="table-header" onos-sortable-header>
23 <table> 20 <table>
24 <tr> 21 <tr>
......
...@@ -27,9 +27,6 @@ ...@@ -27,9 +27,6 @@
27 </div> 27 </div>
28 28
29 <div class="summary-list" onos-table-resize> 29 <div class="summary-list" onos-table-resize>
30 - <div ng-show="loading" class="loading-wheel"
31 - icon icon-id="loading" icon-size="75"></div>
32 -
33 <div class="table-header" onos-sortable-header> 30 <div class="table-header" onos-sortable-header>
34 <table> 31 <table>
35 <tr> 32 <tr>
......
...@@ -50,9 +50,6 @@ ...@@ -50,9 +50,6 @@
50 </div> 50 </div>
51 51
52 <div class="summary-list" onos-table-resize> 52 <div class="summary-list" onos-table-resize>
53 - <div ng-show="loading" class="loading-wheel"
54 - icon icon-id="loading" icon-size="75"></div>
55 -
56 <div class="table-header" onos-sortable-header> 53 <div class="table-header" onos-sortable-header>
57 <table> 54 <table>
58 <tr> 55 <tr>
......
...@@ -24,9 +24,6 @@ ...@@ -24,9 +24,6 @@
24 </div> 24 </div>
25 25
26 <div class="summary-list" onos-table-resize> 26 <div class="summary-list" onos-table-resize>
27 - <div ng-show="loading" class="loading-wheel"
28 - icon icon-id="loading" icon-size="75"></div>
29 -
30 <div class="table-header" onos-sortable-header> 27 <div class="table-header" onos-sortable-header>
31 <table> 28 <table>
32 <tr> 29 <tr>
......
...@@ -11,9 +11,6 @@ ...@@ -11,9 +11,6 @@
11 </div> 11 </div>
12 12
13 <div class="summary-list" onos-table-resize> 13 <div class="summary-list" onos-table-resize>
14 - <div ng-show="loading" class="loading-wheel"
15 - icon icon-id="loading" icon-size="75"></div>
16 -
17 <div class="table-header" onos-sortable-header> 14 <div class="table-header" onos-sortable-header>
18 <table> 15 <table>
19 <tr> 16 <tr>
......
...@@ -27,9 +27,6 @@ ...@@ -27,9 +27,6 @@
27 </div> 27 </div>
28 28
29 <div class="summary-list" onos-table-resize> 29 <div class="summary-list" onos-table-resize>
30 - <div ng-show="loading" class="loading-wheel"
31 - icon icon-id="loading" icon-size="75"></div>
32 -
33 <div class="table-header" onos-sortable-header> 30 <div class="table-header" onos-sortable-header>
34 <table> 31 <table>
35 <tr> 32 <tr>
......