[ONOS-3851] Initial implementation of Web GUI of CPMan

- Revise chart model to provide default label
- Visualize control message stats per device

Change-Id: I88b8e63ce92114907bba185b1906569fa8cc0b83

@@ -17,6 +17,7 @@ package org.onosproject.cpman;
 
 
 import com.google.common.base.MoreObjects;
 import com.google.common.base.MoreObjects;
 
 
+import java.util.Arrays;
 import java.util.Objects;
 import java.util.Objects;
 
 
 import static com.google.common.base.MoreObjects.toStringHelper;
 import static com.google.common.base.MoreObjects.toStringHelper;
@@ -29,13 +30,14 @@ public class ControlLoadSnapshot {
     private final long latest;
     private final long latest;
     private final long average;
     private final long average;
     private final long time;
     private final long time;
+    private long[] recent;
 
 
     /**
     /**
      * Instantiates a new control metric response with given latest, average, time.
      * Instantiates a new control metric response with given latest, average, time.
      *
      *
      * @param latest  latest value of control metric
      * @param latest  latest value of control metric
      * @param average average value of control metric
      * @param average average value of control metric
-     * @param time last logging time fo control metric
+     * @param time    last logging time of control metric
      */
      */
     public ControlLoadSnapshot(long latest, long average, long time) {
     public ControlLoadSnapshot(long latest, long average, long time) {
         this.latest = latest;
         this.latest = latest;
@@ -44,6 +46,22 @@ public class ControlLoadSnapshot {
     }
     }
 
 
     /**
     /**
+     * Instantiates a new control metric response with given latest, average, time,
+     * recent values.
+     *
+     * @param latest  latest value of control metric
+     * @param average average value of control metric
+     * @param time last logging time of control metric
+     * @param recent a set of historical data
+     */
+    public ControlLoadSnapshot(long latest, long average, long time, long[] recent) {
+        this.latest = latest;
+        this.average = average;
+        this.time = time;
+        this.recent = recent;
+    }
+
+    /**
      * Returns latest value of control metric.
      * Returns latest value of control metric.
      *
      *
      * @return latest value of control metric
      * @return latest value of control metric
@@ -70,9 +88,18 @@ public class ControlLoadSnapshot {
         return average;
         return average;
     }
     }
 
 
+    /**
+     * Returns a set of historical recent of control metric.
+     *
+     * @return a set of historical recent of control metric
+     */
+    public long[] recent() {
+        return recent;
+    }
+
     @Override
     @Override
     public int hashCode() {
     public int hashCode() {
-        return Objects.hash(latest, average, time);
+        return Objects.hash(latest, average, time, recent);
     }
     }
 
 
     @Override
     @Override
@@ -84,7 +111,8 @@ public class ControlLoadSnapshot {
             final ControlLoadSnapshot other = (ControlLoadSnapshot) obj;
             final ControlLoadSnapshot other = (ControlLoadSnapshot) obj;
             return Objects.equals(this.latest, other.latest) &&
             return Objects.equals(this.latest, other.latest) &&
                     Objects.equals(this.average, other.average) &&
                     Objects.equals(this.average, other.average) &&
-                    Objects.equals(this.time, other.time);
+                    Objects.equals(this.time, other.time) &&
+                    Arrays.equals(this.recent, other.recent);
         }
         }
         return false;
         return false;
     }
     }
@@ -95,7 +123,9 @@ public class ControlLoadSnapshot {
         helper = toStringHelper(this)
         helper = toStringHelper(this)
                 .add("latest", latest)
                 .add("latest", latest)
                 .add("average", average)
                 .add("average", average)
-                .add("time", time);
+                .add("time", time)
+                .add("recent", recent);
+
         return helper.toString();
         return helper.toString();
     }
     }
 }
 }

@@ -16,44 +16,122 @@
 package org.onosproject.cpman.gui;
 package org.onosproject.cpman.gui;
 
 
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
+import com.google.common.base.Strings;
 import com.google.common.collect.ImmutableSet;
 import com.google.common.collect.ImmutableSet;
+import com.google.common.collect.Maps;
+import org.apache.commons.lang.ArrayUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.joda.time.LocalDateTime;
+import org.onosproject.cluster.ClusterService;
+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.RequestHandler;
 import org.onosproject.ui.UiMessageHandler;
 import org.onosproject.ui.UiMessageHandler;
+import org.onosproject.ui.chart.ChartModel;
+import org.onosproject.ui.chart.ChartRequestHandler;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
 
 
 import java.util.Collection;
 import java.util.Collection;
-import java.util.Random;
+import java.util.Map;
+import java.util.Optional;
+import java.util.concurrent.ExecutionException;
+import java.util.concurrent.TimeUnit;
+
+import static org.onosproject.cpman.ControlResource.CONTROL_MESSAGE_METRICS;
+import static org.onosproject.cpman.ControlResource.Type.CONTROL_MESSAGE;
 
 
 /**
 /**
  * CpmanViewMessageHandler class implementation.
  * CpmanViewMessageHandler class implementation.
  */
  */
 public class CpmanViewMessageHandler extends UiMessageHandler {
 public class CpmanViewMessageHandler extends UiMessageHandler {
 
 
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
     private static final String CPMAN_DATA_REQ = "cpmanDataRequest";
     private static final String CPMAN_DATA_REQ = "cpmanDataRequest";
     private static final String CPMAN_DATA_RESP = "cpmanDataResponse";
     private static final String CPMAN_DATA_RESP = "cpmanDataResponse";
+    private static final String CPMANS = "cpmans";
+
+    // TODO: we assume that server side always returns 60 data points
+    // to feed 1 hour time slots, later this should make to be configurable
+    private static final int NUM_OF_DATA_POINTS = 60;
 
 
-    private static final String RANDOM = "random";
+    private static final int MILLI_CONV_UNIT = 1000;
 
 
     @Override
     @Override
     protected Collection<RequestHandler> createRequestHandlers() {
     protected Collection<RequestHandler> createRequestHandlers() {
         return ImmutableSet.of(
         return ImmutableSet.of(
-                new CpmanDataRequestHandler()
+                new ControlMessageRequest()
         );
         );
     }
     }
 
 
-    // handler for sample data requests
-    private final class CpmanDataRequestHandler extends RequestHandler {
+    private final class ControlMessageRequest extends ChartRequestHandler {
 
 
-        private CpmanDataRequestHandler() {
-            super(CPMAN_DATA_REQ);
+        private ControlMessageRequest() {
+            super(CPMAN_DATA_REQ, CPMAN_DATA_RESP, CPMANS);
+        }
+
+        @Override
+        protected String[] getSeries() {
+            return CONTROL_MESSAGE_METRICS.stream().map(type ->
+                    StringUtils.lowerCase(type.name())).toArray(String[]::new);
         }
         }
 
 
         @Override
         @Override
-        public void process(long sid, ObjectNode payload) {
-            ObjectNode result = objectNode();
-            Random random = new Random();
-            result.put(RANDOM, random.nextInt(50) + 1);
+        protected void populateChart(ChartModel cm, ObjectNode payload) {
+            String uri = string(payload, "devId");
+            if (!Strings.isNullOrEmpty(uri)) {
+                Map<ControlMetricType, Long[]> data = Maps.newHashMap();
+                DeviceId deviceId = DeviceId.deviceId(uri);
+                ClusterService cs = get(ClusterService.class);
+                ControlPlaneMonitorService cpms = get(ControlPlaneMonitorService.class);
+
+                if (cpms.availableResources(CONTROL_MESSAGE).contains(deviceId.toString())) {
+                    LocalDateTime ldt = null;
+
+                    try {
+                        for (ControlMetricType cmt : CONTROL_MESSAGE_METRICS) {
+                            ControlLoadSnapshot cls = cpms.getLoad(cs.getLocalNode().id(),
+                                    cmt, NUM_OF_DATA_POINTS, TimeUnit.MINUTES,
+                                    Optional.of(deviceId)).get();
+                            data.put(cmt, ArrayUtils.toObject(cls.recent()));
+                            if (ldt == null) {
+                                ldt = new LocalDateTime(cls.time() * MILLI_CONV_UNIT);
+                            }
+                        }
+
+                        for (int i = 0; i < NUM_OF_DATA_POINTS; i++) {
+                            Map<String, Long> local = Maps.newHashMap();
+                            for (ControlMetricType cmt : CONTROL_MESSAGE_METRICS) {
+                                local.put(StringUtils.lowerCase(cmt.name()), data.get(cmt)[i]);
+                            }
+
+                            local.put(LABEL, ldt.minusMinutes(NUM_OF_DATA_POINTS - i).toDateTime().getMillis());
+
+                            populateMetric(cm.addDataPoint(ldt.minusMinutes(NUM_OF_DATA_POINTS - i)
+                                    .toDateTime().getMillis()), local);
+                        }
+
+                    } catch (InterruptedException | ExecutionException e) {
+                        log.warn(e.getMessage());
+                    }
+                }
+            } else {
+                DeviceService ds = get(DeviceService.class);
+                ds.getAvailableDevices();
+            }
+        }
+
+        private void populateAllDevs(ChartModel.DataPoint dataPoint, Map<String, Long> data) {
+
+        }
 
 
-            sendMessage(CPMAN_DATA_RESP, 0, result);
+        private void populateMetric(ChartModel.DataPoint dataPoint,
+                                    Map<String, Long> data) {
+            data.forEach((k, v) -> dataPoint.data(k, v.doubleValue()));
         }
         }
     }
     }
 }
 }

@@ -81,10 +81,10 @@ public class ControlPlaneManager {
             // TODO: this can be changed to switch-case if we have more than
             // TODO: this can be changed to switch-case if we have more than
             // one event type
             // one event type
             if (event.type().equals(STATS_UPDATE)) {
             if (event.type().equals(STATS_UPDATE)) {
-                controlMessages.forEach(c -> {
+                controlMessages.forEach(c ->
                     monitorService.updateMetric(getControlMetric(c), 1,
                     monitorService.updateMetric(getControlMetric(c), 1,
-                            Optional.of(c.deviceId()));
-                });
+                            Optional.of(c.deviceId()))
+                );
             }
             }
         }
         }
     }
     }

@@ -169,7 +169,7 @@ public class ControlPlaneMonitor implements ControlPlaneMonitorService {
                 if (ctrlMsgBuf.get(deviceId.get()).keySet()
                 if (ctrlMsgBuf.get(deviceId.get()).keySet()
                         .containsAll(CONTROL_MESSAGE_METRICS)) {
                         .containsAll(CONTROL_MESSAGE_METRICS)) {
                     updateControlMessages(ctrlMsgBuf.get(deviceId.get()), deviceId.get());
                     updateControlMessages(ctrlMsgBuf.get(deviceId.get()), deviceId.get());
-                    ctrlMsgBuf.get(deviceId.get());
+                    ctrlMsgBuf.clear();
                 }
                 }
             }
             }
         } else {
         } else {
@@ -327,8 +327,10 @@ public class ControlPlaneMonitor implements ControlPlaneMonitorService {
      */
      */
     private void updateNetworkMetrics(Map<ControlMetricType, Double> metricMap,
     private void updateNetworkMetrics(Map<ControlMetricType, Double> metricMap,
                                       String resourceName) {
                                       String resourceName) {
-        networkMetricsMap.putIfAbsent(resourceName, genMDbBuilder(resourceName,
+        if (!networkMetricsMap.containsKey(resourceName)) {
+            networkMetricsMap.put(resourceName, genMDbBuilder(resourceName,
                     Type.NETWORK, NETWORK_METRICS));
                     Type.NETWORK, NETWORK_METRICS));
+        }
         networkMetricsMap.get(resourceName).updateMetrics(convertMap(metricMap));
         networkMetricsMap.get(resourceName).updateMetrics(convertMap(metricMap));
     }
     }
 
 
@@ -340,8 +342,10 @@ public class ControlPlaneMonitor implements ControlPlaneMonitorService {
      */
      */
     private void updateDiskMetrics(Map<ControlMetricType, Double> metricMap,
     private void updateDiskMetrics(Map<ControlMetricType, Double> metricMap,
                                    String resourceName) {
                                    String resourceName) {
-        diskMetricsMap.putIfAbsent(resourceName, genMDbBuilder(resourceName,
+        if (!diskMetricsMap.containsKey(resourceName)) {
+            diskMetricsMap.put(resourceName, genMDbBuilder(resourceName,
                     Type.DISK, DISK_METRICS));
                     Type.DISK, DISK_METRICS));
+        }
         diskMetricsMap.get(resourceName).updateMetrics(convertMap(metricMap));
         diskMetricsMap.get(resourceName).updateMetrics(convertMap(metricMap));
     }
     }
 
 
@@ -353,8 +357,10 @@ public class ControlPlaneMonitor implements ControlPlaneMonitorService {
      */
      */
     private void updateControlMessages(Map<ControlMetricType, Double> metricMap,
     private void updateControlMessages(Map<ControlMetricType, Double> metricMap,
                                        DeviceId deviceId) {
                                        DeviceId deviceId) {
-        controlMessageMap.putIfAbsent(deviceId, genMDbBuilder(deviceId.toString(),
+        if (!controlMessageMap.containsKey(deviceId)) {
+            controlMessageMap.put(deviceId, genMDbBuilder(deviceId.toString(),
                     Type.CONTROL_MESSAGE, CONTROL_MESSAGE_METRICS));
                     Type.CONTROL_MESSAGE, CONTROL_MESSAGE_METRICS));
+        }
         controlMessageMap.get(deviceId).updateMetrics(convertMap(metricMap));
         controlMessageMap.get(deviceId).updateMetrics(convertMap(metricMap));
     }
     }
 
 
@@ -478,7 +484,9 @@ public class ControlPlaneMonitor implements ControlPlaneMonitorService {
      */
      */
     private ControlLoadSnapshot snapshot(ControlLoad cl, int duration, TimeUnit unit) {
     private ControlLoadSnapshot snapshot(ControlLoad cl, int duration, TimeUnit unit) {
         if (cl != null) {
         if (cl != null) {
-            return new ControlLoadSnapshot(cl.latest(), cl.average(duration, unit), cl.time());
+
+            return new ControlLoadSnapshot(cl.latest(), cl.average(duration, unit),
+                    cl.time(), cl.recent(duration, unit));
         }
         }
         return null;
         return null;
     }
     }

 <!-- partial HTML -->
 <!-- partial HTML -->
 <div id="ov-cpman">
 <div id="ov-cpman">
-    <div class="button-panel">
-        <div class="my-button" ng-click="getData()">
-            Fetch Data
-        </div>
-    </div>
-
-    <div class="data-panel">
-        <table>
-            <tr>
-                <td> Number </td>
-                <td class="number"> {{data.random}} </td>
-            </tr>
-        </table>
+    <div>
+        <canvas id="line" class="chart chart-line" chart-data="data"
+                chart-labels="labels" chart-legend="true" chart-series="series">
+        </canvas>
     </div>
     </div>
 </div>
 </div>

@@ -20,66 +20,60 @@
 (function () {
 (function () {
     'use strict';
     'use strict';
 
 
-    // injected refs
-    var $log, $scope, wss, ks;
+    // injected references
+    var $log, $scope, $location, ks, fs, cbs;
 
 
-    // constants
-    var dataReq = 'cpmanDataRequest',
-        dataResp = 'cpmanDataResponse';
+    var labels = new Array(60);
+    var data = new Array(new Array(60), new Array(60), new Array(60),
+                         new Array(60), new Array(60), new Array(60));
 
 
-    function addKeyBindings() {
-        var map = {
-            space: [getData, 'Fetch data from server'],
-
-            _helpFormat: [
-                ['space']
-            ]
-        };
-
-        ks.keyBindings(map);
-    }
-
-    function getData() {
-        wss.sendEvent(dataReq);
-    }
-
-    function respDataCb(data) {
-        $scope.data = data;
-        $scope.$apply();
-    }
-
-
-    angular.module('ovCpman', [])
+    angular.module('ovCpman', ["chart.js"])
         .controller('OvCpmanCtrl',
         .controller('OvCpmanCtrl',
-        ['$log', '$scope', 'WebSocketService', 'KeyService',
+        ['$log', '$scope', '$location', 'FnService', 'ChartBuilderService',
 
 
-        function (_$log_, _$scope_, _wss_, _ks_) {
+        function (_$log_, _$scope_, _$location_, _fs_, _cbs_) {
+            var params;
             $log = _$log_;
             $log = _$log_;
             $scope = _$scope_;
             $scope = _$scope_;
-            wss = _wss_;
-            ks = _ks_;
-
-            var handlers = {};
-            $scope.data = {};
+            $location = _$location_;
+            fs = _fs_;
+            cbs = _cbs_;
 
 
-            // data response handler
-            handlers[dataResp] = respDataCb;
-            wss.bindHandlers(handlers);
+            params = $location.search();
+            if (params.hasOwnProperty('devId')) {
+                $scope.devId = params['devId'];
+            }
 
 
-            addKeyBindings();
+            cbs.buildChart({
+                scope: $scope,
+                tag: 'cpman',
+                query: params
+            });
 
 
-            // custom click handler
-            $scope.getData = getData;
+            var idx = 0;
+            var date;
+            $scope.$watch('chartData', function () {
+                idx = 0;
+                if (!fs.isEmptyObject($scope.chartData)) {
+                    $scope.chartData.forEach(function (cm) {
+                        data[0][idx] = cm.inbound_packet;
+                        data[1][idx] = cm.outbound_packet;
+                        data[2][idx] = cm.flow_mod_packet;
+                        data[3][idx] = cm.flow_removed_packet;
+                        data[4][idx] = cm.request_packet;
+                        data[5][idx] = cm.reply_packet;
+                        date = new Date(cm.label);
+                        labels[idx] = date.getHours() + ":" + date.getMinutes();
+                        idx++;
+                    });
+                }
+            });
 
 
-            // get data the first time...
-            getData();
+            $scope.series = ['INBOUND', 'OUTBOUND', 'FLOW-MOD',
+                             'FLOW-REMOVED', 'STATS-REQUEST', 'STATS-REPLY'];
+            $scope.labels = labels;
 
 
-            // cleanup
-            $scope.$on('$destroy', function () {
-                wss.unbindHandlers(handlers);
-                ks.unbindKeys();
-                $log.log('OvCpmanCtrl has been destroyed');
-            });
+            $scope.data = data;
 
 
             $log.log('OvCpmanCtrl has been created');
             $log.log('OvCpmanCtrl has been created');
         }]);
         }]);

@@ -149,11 +149,13 @@ public class MetricsDatabaseTest {
         devMetricsMap = Maps.newHashMap();
         devMetricsMap = Maps.newHashMap();
 
 
         Set<DeviceId> devices = ImmutableSet.of(devId1, devId2);
         Set<DeviceId> devices = ImmutableSet.of(devId1, devId2);
-        devices.forEach(dev ->
-            devMetricsMap.putIfAbsent(dev,
-                    genMDbBuilder(type, ControlResource.CONTROL_MESSAGE_METRICS)
+        devices.forEach(dev -> {
+            if (!devMetricsMap.containsKey(dev)) {
+                devMetricsMap.put(dev, genMDbBuilder(type, ControlResource.CONTROL_MESSAGE_METRICS)
                         .withResourceName(dev.toString())
                         .withResourceName(dev.toString())
-                            .build()));
+                        .build());
+            }
+        });
 
 
         Map<String, Double> metrics1 = new HashMap<>();
         Map<String, Double> metrics1 = new HashMap<>();
         ControlResource.CONTROL_MESSAGE_METRICS.forEach(msgType ->
         ControlResource.CONTROL_MESSAGE_METRICS.forEach(msgType ->

@@ -18,6 +18,10 @@ package org.onosproject.ui.chart;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import org.onosproject.ui.RequestHandler;
 import org.onosproject.ui.RequestHandler;
 
 
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
 /**
 /**
  * Message handler specifically for the chart views.
  * Message handler specifically for the chart views.
  */
  */
@@ -25,6 +29,7 @@ public abstract class ChartRequestHandler extends RequestHandler {
 
 
     private final String respType;
     private final String respType;
     private final String nodeName;
     private final String nodeName;
+    protected static final String LABEL = "label";
 
 
     /**
     /**
      * Constructs a chart model handler for a specific graph view. When chart
      * Constructs a chart model handler for a specific graph view. When chart
@@ -61,7 +66,11 @@ public abstract class ChartRequestHandler extends RequestHandler {
      * @return an empty chart model
      * @return an empty chart model
      */
      */
     protected ChartModel createChartModel() {
     protected ChartModel createChartModel() {
-        return new ChartModel(getSeries());
+        List<String> series = new ArrayList<>();
+        series.addAll(Arrays.asList(getSeries()));
+        series.add(LABEL);
+        String[] seiresArray = new String[series.size()];
+        return new ChartModel(series.toArray(seiresArray));
     }
     }
 
 
     /**
     /**