Add select control box in chart view
Provide the ability to navigate different device's chart view.
Change-Id: Iebf87965580295ca31e93bdf799d5d3d334a1102
diff --git a/apps/cpman/app/src/main/java/org/onosproject/cpman/gui/CpmanViewMessageHandler.java b/apps/cpman/app/src/main/java/org/onosproject/cpman/gui/CpmanViewMessageHandler.java
index 5a11419..0ba1f83 100644
--- a/apps/cpman/app/src/main/java/org/onosproject/cpman/gui/CpmanViewMessageHandler.java
+++ b/apps/cpman/app/src/main/java/org/onosproject/cpman/gui/CpmanViewMessageHandler.java
@@ -15,10 +15,12 @@
*/
package org.onosproject.cpman.gui;
+import com.fasterxml.jackson.databind.node.ArrayNode;
import com.fasterxml.jackson.databind.node.ObjectNode;
import com.google.common.base.Strings;
import com.google.common.collect.ImmutableSet;
import com.google.common.collect.Maps;
+import com.google.common.collect.Sets;
import org.apache.commons.lang.ArrayUtils;
import org.apache.commons.lang3.StringUtils;
import org.joda.time.LocalDateTime;
@@ -27,6 +29,7 @@
import org.onosproject.cpman.ControlMetricType;
import org.onosproject.cpman.ControlPlaneMonitorService;
import org.onosproject.net.DeviceId;
+import org.onosproject.net.device.DeviceService;
import org.onosproject.ui.RequestHandler;
import org.onosproject.ui.UiMessageHandler;
import org.onosproject.ui.chart.ChartModel;
@@ -56,8 +59,10 @@
private static final String CPMAN_DATA_RESP = "cpmanDataResponse";
private static final String CPMANS = "cpmans";
+ private static final String DEVICE_IDS = "deviceIds";
+
// TODO: we assume that server side always returns 20 data points
- // to feed 1 hour time slots, later this should make to be configurable
+ // to feed 20 minutes time slots, later this should make to be configurable
private static final int NUM_OF_DATA_POINTS = 20;
private static final int MILLI_CONV_UNIT = 1000;
@@ -90,6 +95,8 @@
String uri = string(payload, "devId");
ControlPlaneMonitorService cpms = get(ControlPlaneMonitorService.class);
ClusterService cs = get(ClusterService.class);
+ DeviceService ds = get(DeviceService.class);
+
if (!Strings.isNullOrEmpty(uri)) {
DeviceId deviceId = DeviceId.deviceId(uri);
if (cpms.availableResources(CONTROL_MESSAGE).contains(deviceId.toString())) {
@@ -97,6 +104,10 @@
LocalDateTime ldt = new LocalDateTime(timestamp * MILLI_CONV_UNIT);
populateMetrics(cm, data, ldt, NUM_OF_DATA_POINTS);
+
+ Set<DeviceId> deviceIds = Sets.newHashSet();
+ ds.getAvailableDevices().forEach(device -> deviceIds.add(device.id()));
+ attachDeviceList(cm, deviceIds);
}
} else {
Set<String> deviceIds = cpms.availableResources(CONTROL_MESSAGE);
@@ -189,7 +200,13 @@
private void populateMetric(ChartModel.DataPoint dataPoint,
Map<String, Object> data) {
- data.forEach((k, v) -> dataPoint.data(k, v));
+ data.forEach(dataPoint::data);
+ }
+
+ private void attachDeviceList(ChartModel cm, Set<DeviceId> deviceIds) {
+ ArrayNode array = arrayNode();
+ deviceIds.forEach(id -> array.add(id.toString()));
+ cm.addAnnotation(DEVICE_IDS, array);
}
}
}
diff --git a/apps/cpman/app/src/main/resources/app/view/cpman/cpman.html b/apps/cpman/app/src/main/resources/app/view/cpman/cpman.html
index edf24ad..a970f22 100644
--- a/apps/cpman/app/src/main/resources/app/view/cpman/cpman.html
+++ b/apps/cpman/app/src/main/resources/app/view/cpman/cpman.html
@@ -13,6 +13,12 @@
<h2>
Chart for Device {{devId || "(No device selected)"}}
</h2>
+ <div class="ctrl-btns">
+ <select ng-options="deviceId as deviceId for deviceId in deviceIds"
+ ng-model="selectedItem" ng-change="onChange(selectedItem)">
+ <option value="">-- select a device --</option>
+ </select>
+ </div>
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-legend="true"
chart-series="series" chart-options="options" height="100%">
diff --git a/apps/cpman/app/src/main/resources/app/view/cpman/cpman.js b/apps/cpman/app/src/main/resources/app/view/cpman/cpman.js
index 4b603ee..603bd53 100644
--- a/apps/cpman/app/src/main/resources/app/view/cpman/cpman.js
+++ b/apps/cpman/app/src/main/resources/app/view/cpman/cpman.js
@@ -66,7 +66,6 @@
$scope.devId = params['devId'];
hasDeviceId = true;
} else {
- $scope.type = 'StackedBar';
hasDeviceId = false;
}
@@ -113,6 +112,14 @@
$log.log(points[0].label);
}
};
+
+ if (!fs.isEmptyObject($scope.annots)) {
+ $scope.deviceIds = JSON.parse($scope.annots.deviceIds);
+ }
+
+ $scope.onChange = function (deviceId) {
+ ns.navTo('cpman', { devId: deviceId });
+ };
});
$scope.series = ['INBOUND', 'OUTBOUND', 'FLOW-MOD',