Add select control box in chart view

Provide the ability to navigate different device's chart view. Change-Id: Iebf87965580295ca31e93bdf799d5d3d334a1102

Add select control box in chart view
Provide the ability to navigate different device's chart view. Change-Id: Iebf87965580295ca31e93bdf799d5d3d334a1102
Jian Li · Gerrit Code Review
Commit 92b0d2ec2aef225997af8324f977ac2b68d619ef 92b0d2ec 1 parent a5704f3b
Showing 3 changed files with 33 additions and 3 deletions
apps/cpman/app/src/main/java/org/onosproject/cpman/gui/CpmanViewMessageHandler.java
apps/cpman/app/src/main/resources/app/view/cpman/cpman.html
apps/cpman/app/src/main/resources/app/view/cpman/cpman.js
--- a/apps/cpman/app/src/main/java/org/onosproject/cpman/gui/CpmanViewMessageHandler.java
View file @92b0d2e
+++ b/apps/cpman/app/src/main/java/org/onosproject/cpman/gui/CpmanViewMessageHandler.java
View file @92b0d2e
@@ -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.ControlLoadSnapshot;
 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 @@ public class CpmanViewMessageHandler extends UiMessageHandler {
     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 @@ public class CpmanViewMessageHandler extends UiMessageHandler {
             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 @@ public class CpmanViewMessageHandler extends UiMessageHandler {
                     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 @@ public class CpmanViewMessageHandler extends UiMessageHandler {
         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);
         }
     }
 }
--- a/apps/cpman/app/src/main/resources/app/view/cpman/cpman.html
View file @92b0d2e
+++ b/apps/cpman/app/src/main/resources/app/view/cpman/cpman.html
View file @92b0d2e
@@ -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%">
--- a/apps/cpman/app/src/main/resources/app/view/cpman/cpman.js
View file @92b0d2e
+++ b/apps/cpman/app/src/main/resources/app/view/cpman/cpman.js
View file @92b0d2e
@@ -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',