홍길동 / 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 @@
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
});
}
});
......
......@@ -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_;
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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();
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......