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 3fef75f7da..e39a7f946f 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 d8dce362b0..b54ec780ee 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 d6a517fc3b..e5b8bb4770 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 356ac0f704..6a95a30e2f 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 @@ div.summary-list { 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 6a5ffb1fa0..59a857054d 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 85b044fb97..4ec1e01e42 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 @@