[onos-6337] Adding first set of changes ( server side with client side stub )
[onos-6337] Patchset-2 with changes addressing review comments
[onos-6337] Patchset-3 with changes addressing review comments
Change-Id: I37011ad7b8d2fbb01082736b1d787331aaad0a42
diff --git a/web/gui/src/main/webapp/app/view/port/port.css b/web/gui/src/main/webapp/app/view/port/port.css
index dd4b878..44c0abe 100644
--- a/web/gui/src/main/webapp/app/view/port/port.css
+++ b/web/gui/src/main/webapp/app/view/port/port.css
@@ -28,10 +28,20 @@
#ov-port td {
text-align: center;
}
+
#ov-port td.right {
text-align: right;
}
+#ov-port td.delta {
+ text-align: right;
+ font-weight: bold;
+}
+
+#ov-port td.delta:before {
+ content: "+";
+}
+
#ov-port tr.no-data td {
text-align: center;
}
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 8408718..5f077e0 100644
--- a/web/gui/src/main/webapp/app/view/port/port.html
+++ b/web/gui/src/main/webapp/app/view/port/port.html
@@ -14,6 +14,18 @@
<div class="separator"></div>
+ <div class="refresh" ng-class="{active: isNZ()}"
+ icon icon-size="42" icon-id="plus"
+ tooltip tt-msg="toggleNZTip"
+ ng-click="toggleNZ()"></div>
+
+ <div class="refresh" ng-class="{active: isDelta()}"
+ icon icon-size="42" icon-id="triangleUp"
+ tooltip tt-msg="toggleDeltaTip"
+ ng-click="toggleDelta()"></div>
+
+ <div class="separator"></div>
+
<div class="active"
icon icon-id="deviceTable" icon-size="42"
tooltip tt-msg="deviceTip"
@@ -82,13 +94,13 @@
<tr ng-repeat="port in tableData | filter:queryFilter track by $index"
ng-repeat-complete row-id="{{port.id}}">
<td>{{port.id}}</td>
- <td class="right">{{port.pkt_rx}}</td>
- <td class="right">{{port.pkt_tx}}</td>
- <td class="right">{{port.bytes_rx}}</td>
- <td class="right">{{port.bytes_tx}}</td>
- <td class="right">{{port.pkt_rx_drp}}</td>
- <td class="right">{{port.pkt_tx_drp}}</td>
- <td class="right">{{port.duration}}</td>
+ <td ng-class="(isDelta() ? 'delta' : 'right')">{{port.pkt_rx}}</td>
+ <td ng-class="(isDelta() ? 'delta' : 'right')">{{port.pkt_tx}}</td>
+ <td ng-class="(isDelta() ? 'delta' : 'right')">{{port.bytes_rx}}</td>
+ <td ng-class="(isDelta() ? 'delta' : 'right')">{{port.bytes_tx}}</td>
+ <td ng-class="(isDelta() ? 'delta' : 'right')">{{port.pkt_rx_drp}}</td>
+ <td ng-class="(isDelta() ? 'delta' : 'right')">{{port.pkt_tx_drp}}</td>
+ <td ng-class="(isDelta() ? 'delta' : 'right')">{{port.duration}}</td>
</tr>
</table>
</div>
diff --git a/web/gui/src/main/webapp/app/view/port/port.js b/web/gui/src/main/webapp/app/view/port/port.js
index 6d6645a..5453b78 100644
--- a/web/gui/src/main/webapp/app/view/port/port.js
+++ b/web/gui/src/main/webapp/app/view/port/port.js
@@ -22,33 +22,79 @@
'use strict';
// injected references
- var $log, $scope, $location, fs, tbs, ns;
+ var $log, $scope, $location, fs, tbs, wss, ns, ps;
+
+ var nz = 'nzFilter',
+ del = 'showDelta';
// internal state
var nzFilter = true,
showDelta = false;
- // TODO: (1) init nzFilter and showDelta from user preferences service
- // TODO: (2) track nzFilter and showDelta state from toggle buttons
- // (also setting new state in user preference service)
+ var defaultPortPrefsState = {
+ nzFilter : 1,
+ showDelta : 0,
+ };
+
+ var prefsState = {};
+
+ function updatePrefsState(what, b) {
+ prefsState[what] = b ? 1 : 0;
+ ps.setPrefs('port_prefs', prefsState);
+ }
+
+ function toggleNZState(b) {
+ if (b === undefined) {
+ nzFilter = !nzFilter;
+ } else {
+ nzFilter = b;
+ }
+ updatePrefsState(nz, nzFilter);
+ }
+
+ function toggleDeltaState(b) {
+ if (b === undefined) {
+ showDelta = !showDelta;
+ } else {
+ showDelta = b;
+ }
+ updatePrefsState(del, b);
+ }
+
+ function restoreConfigFromPrefs() {
+ prefsState = ps.asNumbers(
+ ps.getPrefs('port_prefs', defaultPortPrefsState)
+ );
+
+ $log.debug('Port - Prefs State:', prefsState);
+ toggleDeltaState(prefsState.showDelta);
+ toggleNZState(prefsState.nzFilter);
+ }
angular.module('ovPort', [])
.controller('OvPortCtrl',
['$log', '$scope', '$location',
- 'FnService', 'TableBuilderService', 'NavService',
+ 'FnService', 'TableBuilderService', 'WebSocketService', 'NavService',
+ 'PrefsService',
- function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _ns_) {
+ function (_$log_, _$scope_, _$location_, _fs_, _tbs_, _wss_, _ns_, _ps_) {
var params;
+ var tableApi;
$log = _$log_;
$scope = _$scope_;
$location = _$location_;
fs = _fs_;
tbs = _tbs_;
+ wss = _wss_;
ns = _ns_;
+ ps = _ps_;
+
$scope.deviceTip = 'Show device table';
$scope.flowTip = 'Show flow view for this device';
$scope.groupTip = 'Show group view for this device';
$scope.meterTip = 'Show meter view for selected device';
+ $scope.toggleDeltaTip = 'Toggle port delta statistics';
+ $scope.toggleNZTip = 'Toggle non zero port statistics';
params = $location.search();
if (params.hasOwnProperty('devId')) {
@@ -60,18 +106,45 @@
showDelta: showDelta
};
- tbs.buildTable({
+ tableApi = tbs.buildTable({
scope: $scope,
tag: 'port',
query: params
});
+ function filterToggleState() {
+ return {
+ nzFilter: nzFilter,
+ showDelta: showDelta
+ };
+ }
+
$scope.nav = function (path) {
if ($scope.devId) {
ns.navTo(path, { devId: $scope.devId });
}
};
+ $scope.toggleNZ = function () {
+ toggleNZState();
+ $scope.payloadParams = filterToggleState();
+ tableApi.forceRefesh();
+ };
+
+ $scope.toggleDelta = function () {
+ toggleDeltaState();
+ $scope.payloadParams = filterToggleState();
+ tableApi.forceRefesh();
+ };
+
+ $scope.isDelta = function() {
+ return showDelta;
+ };
+
+ $scope.isNZ = function() {
+ return nzFilter;
+ };
+
Object.defineProperty($scope, "queryFilter", {
get: function() {
var out = {};
@@ -80,6 +153,7 @@
}
});
+ restoreConfigFromPrefs();
$log.log('OvPortCtrl has been created');
}]);
}());