GUI -- Table views auto refresh every two seconds while maintaining selected items.
Change-Id: Idbb27cf1977ba5b9410b1d75ce12971195291091
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index b2e1cc8..d8543fb 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -189,7 +189,8 @@
function (_$log_, _is_) {
return {
scope: {
- ctrlCallback: '&sortCallback'
+ sortCallback: '&',
+ sortParams: '='
},
link: function (scope, element) {
$log = _$log_;
@@ -204,8 +205,11 @@
if (col.attr('sortable') === '') {
updateSortDirection(col);
- scope.ctrlCallback({
- requestParams: sortRequestParams()
+ scope.$apply(function () {
+ scope.sortParams = sortRequestParams();
+ });
+ scope.sortCallback({
+ requestParams: scope.sortParams
});
}
});
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 ef3fd66..84f11b7 100644
--- a/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
+++ b/web/gui/src/main/webapp/app/fw/widget/tableBuilder.js
@@ -21,7 +21,10 @@
'use strict';
// injected refs
- var $log, fs, wss, ts;
+ var $log, $interval, fs, wss, ts;
+
+ // constants
+ var refreshInterval = 2000;
// example params to buildTable:
// {
@@ -40,9 +43,11 @@
root = o.tag + 's',
req = o.tag + 'DataRequest',
resp = o.tag + 'DataResponse',
- onSel = fs.isF(o.selCb);
+ onSel = fs.isF(o.selCb),
+ promise;
o.scope.tableData = [];
+ o.scope.sortParams = {};
function respCb(data) {
o.scope.tableData = data[root];
@@ -55,16 +60,15 @@
}
o.scope.sortCallback = sortCb;
- function selCb($event, sel) {
- o.scope.sel = (o.scope.sel === sel) ? null : sel;
- onSel && onSel($event, o.scope.sel);
+ function selCb($event, selRow) {
+ o.scope.selId = (o.scope.selId === selRow.id) ? null : selRow.id;
+ onSel && onSel($event, selRow);
}
o.scope.selectCallback = selCb;
- function refresh() {
+ function refresh(params) {
$log.debug('Refreshing ' + root + ' page');
- ts.resetSort();
- sortCb();
+ sortCb(params);
}
o.scope.refresh = refresh;
@@ -75,17 +79,26 @@
o.scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
ts.resetSort();
+ if (angular.isDefined(promise)) {
+ $interval.cancel(promise);
+ promise = undefined;
+ }
});
sortCb();
+
+ promise = $interval(function () {
+ refresh(o.scope.sortParams);
+ }, refreshInterval);
}
angular.module('onosWidget')
.factory('TableBuilderService',
- ['$log', 'FnService', 'WebSocketService', 'TableService',
+ ['$log', '$interval', 'FnService', 'WebSocketService', 'TableService',
- function (_$log_, _fs_, _wss_, _ts_) {
+ function (_$log_, _$interval_, _fs_, _wss_, _ts_) {
$log = _$log_;
+ $interval = _$interval_;
fs = _fs_;
wss = _wss_;
ts = _ts_;
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 fa072b9..6f27443 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -5,7 +5,7 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
<div class="separator"></div>
<div id="app-install" icon icon-size="36" icon-id="plus" class="active"></div>
<div id="app-activate" icon icon-size="36" icon-id="play"></div>
@@ -25,7 +25,9 @@
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="state" class="table-icon" sortable></td>
@@ -45,9 +47,9 @@
</td>
</tr>
- <tr ng-repeat="app in tableData"
+ <tr ng-repeat="app in tableData track by app.id"
ng-click="selectCallback($event, app)"
- ng-class="{selected: app === sel}"
+ ng-class="{selected: app.id === selId}"
ng-repeat-done>
<td class="table-icon">
<div icon icon-id="{{app._iconid_state}}"></div>
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 727974e..29c84b0 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.html
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.html
@@ -21,14 +21,16 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
</div>
</div>
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="_iconid_state" class="table-icon" sortable></td>
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 2e0045e..0ff488d 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -5,14 +5,16 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
</div>
</div>
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="available" class="table-icon" sortable></td>
@@ -36,9 +38,9 @@
</td>
</tr>
- <tr ng-repeat="dev in tableData"
+ <tr ng-repeat="dev in tableData track by dev.id"
ng-click="selectCallback($event, dev)"
- ng-class="{selected: dev === sel}"
+ ng-class="{selected: dev.id === selId}"
ng-repeat-done>
<td class="table-icon">
<div icon icon-id="{{dev._iconid_available}}"></div>
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index 9fbbd8a..4178653 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -242,7 +242,7 @@
function selCb($event, row) {
selRow = angular.element($event.currentTarget);
- if ($scope.sel) {
+ if ($scope.selId) {
wss.sendEvent(detailsReq, { id: row.id });
} else {
detailsPanel.hide();
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 70f73fe..88b15127 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -8,14 +8,16 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
</div>
</div>
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="id" col-width="180px" sortable>Flow ID </td>
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 3bc28c7..e19d6e1 100644
--- a/web/gui/src/main/webapp/app/view/group/group.html
+++ b/web/gui/src/main/webapp/app/view/group/group.html
@@ -24,14 +24,16 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
</div>
</div>
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="id" sortable>Group ID </td>
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 a4f8c4f..8f83132 100644
--- a/web/gui/src/main/webapp/app/view/host/host.html
+++ b/web/gui/src/main/webapp/app/view/host/host.html
@@ -5,14 +5,16 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
</div>
</div>
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="type" class="table-icon" sortable></td>
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 63dc91a..8096cea 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.html
+++ b/web/gui/src/main/webapp/app/view/intent/intent.html
@@ -21,14 +21,16 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
</div>
</div>
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="appId" sortable>Application ID </td>
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 e644593..f984c61 100644
--- a/web/gui/src/main/webapp/app/view/link/link.html
+++ b/web/gui/src/main/webapp/app/view/link/link.html
@@ -21,14 +21,16 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
</div>
</div>
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="_iconid_state" class="table-icon" sortable></td>
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 b8d4322..54611f3 100644
--- a/web/gui/src/main/webapp/app/view/port/port.html
+++ b/web/gui/src/main/webapp/app/view/port/port.html
@@ -24,14 +24,16 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
</div>
</div>
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="id" col-width="60px" sortable>Port ID </td>
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 a7fcdce..6e7dba5 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.html
+++ b/web/gui/src/main/webapp/app/view/settings/settings.html
@@ -5,14 +5,16 @@
<div class="ctrl-btns">
<div class="refresh active"
icon icon-size="36" icon-id="refresh"
- ng-click="refresh()"></div>
+ ng-click="refresh(sortParams)"></div>
</div>
</div>
<div class="summary-list" onos-fixed-header>
<div class="table-header"
- onos-sortable-header sort-callback="sortCallback(requestParams)">
+ onos-sortable-header
+ sort-params="sortParams"
+ sort-callback="sortCallback(sortParams)">
<table>
<tr>
<td colId="component" sortable col-width="400px">Component </td>