GUI: Migrated table views to use the new custom "ONOS Loading..." animation.
- cleaned up the logic for the table refresh task.
Change-Id: I5f1e1ef5ad171c83eed3a08bbe25b5bd8d44a93b
diff --git a/web/gui/src/main/webapp/app/fw/remote/websocket.js b/web/gui/src/main/webapp/app/fw/remote/websocket.js
index 3fef75f..e39a7f9 100644
--- a/web/gui/src/main/webapp/app/fw/remote/websocket.js
+++ b/web/gui/src/main/webapp/app/fw/remote/websocket.js
@@ -323,7 +323,8 @@
unbindHandlers: unbindHandlers,
addOpenListener: addOpenListener,
removeOpenListener: removeOpenListener,
- sendEvent: sendEvent
+ sendEvent: sendEvent,
+ isConnected: function () { return wsUp; }
};
}
]);
diff --git a/web/gui/src/main/webapp/app/fw/svg/glyph.js b/web/gui/src/main/webapp/app/fw/svg/glyph.js
index d8dce36..b54ec78 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyph.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyph.js
@@ -175,44 +175,6 @@
'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' +
'c0,2.1,1.2,3.8,2.7,3.8h0.7c1.5,0,2.7-1.7,2.7-3.8V37.7z',
- loading: 'M103.1,53.1c0,0,0,0.2,0,0.5c0,0.2,0,0.4,0,0.7c0,0.3,0,0' +
- '.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.' +
- '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' +
- '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' +
- '.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-' +
- '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.' +
- '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.' +
- '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' +
- '-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' +
- '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' +
- ',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' +
- '.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' +
- '-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,' +
- '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,' +
- '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' +
- '.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,' +
- '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.' +
- '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' +
- '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' +
- '-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' +
- '.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' +
- '.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' +
- '-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' +
- '-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' +
- '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' +
- '.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.' +
- '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' +
- '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' +
- '.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' +
- '.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' +
- '-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.' +
- '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' +
- '-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' +
- ',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-' +
- '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,' +
- '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,' +
- '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' +
- '-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',
// --- Navigation glyphs ------------------------------------
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index d6a517f..e5b8bb4 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -45,8 +45,6 @@
upArrow: 'triangleUp',
downArrow: 'triangleDown',
- loading: 'loading',
-
appInactive: 'unknown',
devIcon_SWITCH: 'switch',
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.css b/web/gui/src/main/webapp/app/fw/widget/table.css
index 356ac0f..6a95a30 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.css
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css
@@ -22,31 +22,6 @@
border-spacing: 0;
}
-div.loading-wheel {
- display: inline-block;
- position: absolute;
- margin-top: 40px;
- left: 47%;
- animation: spin reverse 2s ease infinite;
- z-index: 1000;
-}
-
-@keyframes spin {
- to {
- transform: rotate(360deg);
- }
-}
-
-div.loading-wheel svg.embeddedIcon g.icon .glyph {
- opacity: .8;
-}
-.light div.loading-wheel svg.embeddedIcon g.icon .glyph {
- fill: #964949;
-}
-.dark div.loading-wheel svg.embeddedIcon g.icon .glyph {
- fill: whitesmoke;
-}
-
div.summary-list table {
border-collapse: collapse;
table-layout: fixed;
diff --git a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
index 6a5ffb1..59a8570 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
@@ -21,11 +21,11 @@
'use strict';
// injected refs
- var $log, $interval, $timeout, fs, wss;
+ var $log, $interval, $timeout, fs, wss, ls;
// constants
var refreshInterval = 2000,
- loadingWait = 500;
+ tardyWait = 500;
// example params to buildTable:
// {
@@ -49,21 +49,20 @@
onResp = fs.isF(o.respCb),
idKey = o.idKey || 'id',
oldTableData = [],
- loaded = false,
- refreshPromise, loadingPromise;
+ refreshPromise,
+ tardyPromise;
o.scope.tableData = [];
o.scope.changedData = [];
o.scope.sortParams = {};
- o.scope.loading = true;
o.scope.autoRefresh = true;
o.scope.autoRefreshTip = 'Toggle auto refresh';
// === websocket functions --------------------
// response
function respCb(data) {
- loaded = true;
- o.scope.loading = false;
+ cancelTardy();
+ ls.stop();
o.scope.tableData = data[root];
onResp && onResp();
@@ -85,23 +84,28 @@
handlers[resp] = respCb;
wss.bindHandlers(handlers);
+ // handle "loading..." animation
+ function scheduleTardy() {
+ tardyPromise = $timeout(ls.start, tardyWait);
+ }
+
+ function cancelTardy() {
+ if (tardyPromise) {
+ $timeout.cancel(tardyPromise);
+ tardyPromise = null;
+ }
+ }
+
// request
function sortCb(params) {
var p = angular.extend({}, params, o.query);
- wss.sendEvent(req, p);
- stillLoading();
+ if (wss.isConnected()) {
+ wss.sendEvent(req, p);
+ scheduleTardy();
+ }
}
o.scope.sortCallback = sortCb;
- // show loading wheel if it's taking a while for the server to respond
- function stillLoading() {
- loaded = false;
- loadingPromise = $timeout(function () {
- if (!loaded) {
- o.scope.loading = true;
- }
- }, loadingWait);
- }
// === selecting a row functions ----------------
function selCb($event, selRow) {
@@ -112,19 +116,23 @@
o.scope.selectCallback = selCb;
// === autoRefresh functions ------------------
- function startRefresh() {
- refreshPromise = $interval(function () {
+ function fetchDataIfNotWaiting() {
+ if (!tardyPromise) {
if (fs.debugOn('widget')) {
$log.debug('Refreshing ' + root + ' page');
}
sortCb(o.scope.sortParams);
- }, refreshInterval);
+ }
+ }
+
+ function startRefresh() {
+ refreshPromise = $interval(fetchDataIfNotWaiting, refreshInterval);
}
function stopRefresh() {
- if (angular.isDefined(refreshPromise)) {
+ if (refreshPromise) {
$interval.cancel(refreshPromise);
- refreshPromise = undefined;
+ refreshPromise = null;
}
}
@@ -138,10 +146,7 @@
o.scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
stopRefresh();
- if (angular.isDefined(loadingPromise)) {
- $timeout.cancel(loadingPromise);
- loadingPromise = undefined;
- }
+ cancelTardy();
});
sortCb();
@@ -151,13 +156,15 @@
angular.module('onosWidget')
.factory('TableBuilderService',
['$log', '$interval', '$timeout', 'FnService', 'WebSocketService',
+ 'LoadingService',
- function (_$log_, _$interval_, _$timeout_, _fs_, _wss_) {
+ function (_$log_, _$interval_, _$timeout_, _fs_, _wss_, _ls_) {
$log = _$log_;
$interval = _$interval_;
$timeout = _$timeout_;
fs = _fs_;
wss = _wss_;
+ ls = _ls_;
return {
buildTable: buildTable
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index 85b044f..4ec1e01 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -37,9 +37,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.html b/web/gui/src/main/webapp/app/view/cluster/cluster.html
index c504888..50bb01b 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.html
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.html
@@ -27,9 +27,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 6f1813a..31e2eb2 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -30,9 +30,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index 8fc1839..f7142d3 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -34,9 +34,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/group/group.html b/web/gui/src/main/webapp/app/view/group/group.html
index 93484dc..538b979 100644
--- a/web/gui/src/main/webapp/app/view/group/group.html
+++ b/web/gui/src/main/webapp/app/view/group/group.html
@@ -50,9 +50,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/host/host.html b/web/gui/src/main/webapp/app/view/host/host.html
index 19a7ee1..41e4bd8 100644
--- a/web/gui/src/main/webapp/app/view/host/host.html
+++ b/web/gui/src/main/webapp/app/view/host/host.html
@@ -11,9 +11,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.html b/web/gui/src/main/webapp/app/view/intent/intent.html
index 98aa565..b0238c3 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.html
+++ b/web/gui/src/main/webapp/app/view/intent/intent.html
@@ -16,9 +16,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/link/link.html b/web/gui/src/main/webapp/app/view/link/link.html
index 371d6b1..f62a628 100644
--- a/web/gui/src/main/webapp/app/view/link/link.html
+++ b/web/gui/src/main/webapp/app/view/link/link.html
@@ -27,9 +27,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/port/port.html b/web/gui/src/main/webapp/app/view/port/port.html
index fa79e5e..ef4f37e 100644
--- a/web/gui/src/main/webapp/app/view/port/port.html
+++ b/web/gui/src/main/webapp/app/view/port/port.html
@@ -50,9 +50,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/processor/processor.html b/web/gui/src/main/webapp/app/view/processor/processor.html
index 1c61504..11aa83f 100644
--- a/web/gui/src/main/webapp/app/view/processor/processor.html
+++ b/web/gui/src/main/webapp/app/view/processor/processor.html
@@ -24,9 +24,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.html b/web/gui/src/main/webapp/app/view/settings/settings.html
index 6108101..419ad2c 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.html
+++ b/web/gui/src/main/webapp/app/view/settings/settings.html
@@ -11,9 +11,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>
diff --git a/web/gui/src/main/webapp/app/view/tunnel/tunnel.html b/web/gui/src/main/webapp/app/view/tunnel/tunnel.html
index 4909cc0..abeb9f9 100644
--- a/web/gui/src/main/webapp/app/view/tunnel/tunnel.html
+++ b/web/gui/src/main/webapp/app/view/tunnel/tunnel.html
@@ -27,9 +27,6 @@
</div>
<div class="summary-list" onos-table-resize>
- <div ng-show="loading" class="loading-wheel"
- icon icon-id="loading" icon-size="75"></div>
-
<div class="table-header" onos-sortable-header>
<table>
<tr>