Add a message handler for Openstack Telemetry view

Change-Id: I2803ac6e8f3c90e005bc73c43a5b867934daa80f
diff --git a/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/Constants.java b/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/Constants.java
index 9621467..f34c0dc 100644
--- a/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/Constants.java
+++ b/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/Constants.java
@@ -69,4 +69,7 @@
     public static final String VXLAN = "VXLAN";
     public static final String VLAN = "VLAN";
     public static final String FLAT = "FLAT";
+
+    // default configuration variables for ONOS GUI
+    public static final int DEFAULT_DATA_POINT_SIZE = 17280;
 }
diff --git a/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/FlowInfo.java b/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/FlowInfo.java
index 5efd77d..48ccc0b 100644
--- a/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/FlowInfo.java
+++ b/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/FlowInfo.java
@@ -134,6 +134,13 @@
      */
     boolean roughEquals(FlowInfo flowInfo);
 
+    /**
+     * Make a key with IP Address and Transport Port information.
+     *
+     * @return unique flow info key in String
+     */
+    String uniqueFlowInfoKey();
+
     interface Builder {
 
         /**
diff --git a/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/StatsFlowRuleAdminService.java b/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/StatsFlowRuleAdminService.java
index dcf682d..cba2a33 100644
--- a/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/StatsFlowRuleAdminService.java
+++ b/apps/openstacktelemetry/api/src/main/java/org/onosproject/openstacktelemetry/api/StatsFlowRuleAdminService.java
@@ -15,6 +15,8 @@
  */
 package org.onosproject.openstacktelemetry.api;
 
+import java.util.Map;
+import java.util.Queue;
 import java.util.Set;
 
 /**
@@ -52,4 +54,12 @@
      * @param statFlowRule stat flow rule for a VM
      */
     void deleteStatFlowRule(StatsFlowRule statFlowRule);
+
+    /**
+     * Gets a map of flow information.
+     *
+     * @return a map of flow infos
+     */
+    Map<String, Queue<FlowInfo>> getFlowInfoMap();
+
 }
diff --git a/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/gui/OpensteckTelemetryUI.java b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/gui/OpensteckTelemetryUI.java
new file mode 100644
index 0000000..bf8ae4b
--- /dev/null
+++ b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/gui/OpensteckTelemetryUI.java
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2018-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.onosproject.openstacktelemetry.gui;
+
+import com.google.common.collect.ImmutableList;
+import org.apache.felix.scr.annotations.Activate;
+import org.apache.felix.scr.annotations.Component;
+import org.apache.felix.scr.annotations.Deactivate;
+import org.apache.felix.scr.annotations.Reference;
+import org.apache.felix.scr.annotations.ReferenceCardinality;
+import org.apache.felix.scr.annotations.Service;
+import org.onosproject.ui.UiExtension;
+import org.onosproject.ui.UiExtensionService;
+import org.onosproject.ui.UiMessageHandlerFactory;
+import org.onosproject.ui.UiView;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.util.List;
+
+import static org.onosproject.ui.UiView.Category.NETWORK;
+
+/**
+ * Mechanism to stream data to the GUI.
+ */
+@Component(immediate = true, enabled = true)
+@Service(value = OpensteckTelemetryUI.class)
+public class OpensteckTelemetryUI {
+    private static final String OPENSTACKTELEMETRY_ID = "openstacktelemetry";
+    private static final String OPENSTACKTELEMETRY_TEXT = "Openstack Telemetry";
+    private static final String RESOURCE_PATH = "gui";
+    private static final ClassLoader CL = OpensteckTelemetryUI.class.getClassLoader();
+
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+    @Reference(cardinality = ReferenceCardinality.MANDATORY_UNARY)
+    protected UiExtensionService uiExtensionService;
+
+    // Factory for UI message handlers
+    private final UiMessageHandlerFactory messageHandlerFactory =
+            () -> ImmutableList.of(new OpensteckTelemetryViewMessageHandler());
+
+    // List of application views
+    private final List<UiView> views = ImmutableList.of(
+            new UiView(NETWORK, OPENSTACKTELEMETRY_ID, OPENSTACKTELEMETRY_TEXT)
+    );
+
+    // Application UI extension
+    private final UiExtension uiExtension =
+            new UiExtension.Builder(CL, views)
+                    .messageHandlerFactory(messageHandlerFactory)
+                    .resourcePath(RESOURCE_PATH)
+                    .build();
+
+    @Activate
+    protected void activate() {
+        uiExtensionService.register(uiExtension);
+        log.info("Started");
+    }
+
+    @Deactivate
+    protected void deactivate() {
+        uiExtensionService.unregister(uiExtension);
+        log.info("Stopped");
+    }
+}
diff --git a/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/gui/OpensteckTelemetryViewMessageHandler.java b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/gui/OpensteckTelemetryViewMessageHandler.java
new file mode 100644
index 0000000..8d1df10
--- /dev/null
+++ b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/gui/OpensteckTelemetryViewMessageHandler.java
@@ -0,0 +1,207 @@
+/*
+ * Copyright 2018-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.onosproject.openstacktelemetry.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.ImmutableMap;
+import com.google.common.collect.ImmutableSet;
+import com.google.common.collect.Maps;
+import org.onosproject.openstacktelemetry.api.FlowInfo;
+import org.onosproject.openstacktelemetry.api.StatsFlowRuleAdminService;
+import org.onosproject.ui.RequestHandler;
+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.text.SimpleDateFormat;
+import java.util.Collection;
+import java.util.Date;
+import java.util.Map;
+import java.util.Queue;
+
+/**
+ * Message handler for Openstack Telemetry view related messages.
+ */
+public class OpensteckTelemetryViewMessageHandler extends UiMessageHandler {
+    private final Logger log = LoggerFactory.getLogger(getClass());
+
+    private static final String OST_DATA_REQ = "openstacktelemetryDataRequest";
+    private static final String OST_DATA_RESP = "openstacktelemetryDataResponse";
+    private static final String OSTS = "openstacktelemetrys";
+    private static final String ANNOT_FLOW_IDS = "flowIds";
+    private static final String ANNOT_PERIOD_OPTIONS = "periodOptions";
+
+    private static final String STAT_CURR_ACC_PACKET = "curr_acc_packet";
+    private static final String STAT_PREV_ACC_PACKET = "prev_acc_packet";
+    private static final String STAT_CURR_ACC_BYTE = "curr_acc_byte";
+    private static final String STAT_PREV_ACC_BYTE = "prev_acc_byte";
+    private static final String STAT_ERROR_PACKET = "error_packet";
+    private static final String STAT_DROP_PACKET = "drop_packet";
+
+    private static final String CHART_TIME_FORMAT = "HH:mm:ss";
+
+    // JSON node name
+    private static final String JSON_NODE_FLOW = "flowOpt";
+    private static final String JSON_NODE_PERIOD = "periodOpt";
+
+    private static final String DEFAULT_PERIOD_OPTION_1MIN = "1 MIN";
+
+    // Statistics period of statistics chart
+    private static final Map<String, Integer> PERIOD_OPTION_MAP =
+                            ImmutableMap.<String, Integer>builder()
+                            .put(DEFAULT_PERIOD_OPTION_1MIN, 12)
+                            .put("3 MIN", 36)
+                            .put("5 MIN", 60)
+                            .put("30 MIN", 360)
+                            .put("1 HOUR", 720)
+                            .put("2 HOUR", 1440)
+                            .put("6 HOUR", 4320)
+                            .put("24 HOUR", 17280)
+                            .build();
+
+    @Override
+    protected Collection<RequestHandler> createRequestHandlers() {
+        return ImmutableSet.of(
+                new ControlMessageRequest()
+        );
+    }
+
+    private final class ControlMessageRequest extends ChartRequestHandler {
+        private StatsFlowRuleAdminService statsFlowRuleService = null;
+        private Map<String, Queue<FlowInfo>> flowInfoMap = null;
+        private String currentFlowKey = null;
+        private String currentPeriod = DEFAULT_PERIOD_OPTION_1MIN;
+
+        private ControlMessageRequest() {
+            super(OST_DATA_REQ, OST_DATA_RESP, OSTS);
+        }
+
+        @Override
+        protected String[] getSeries() {
+            String[] series = {STAT_CURR_ACC_PACKET, STAT_PREV_ACC_PACKET,
+                    STAT_CURR_ACC_BYTE, STAT_PREV_ACC_BYTE, STAT_ERROR_PACKET, STAT_DROP_PACKET};
+            return series;
+        }
+
+        @Override
+        protected void populateChart(ChartModel cm, ObjectNode payload) {
+            if (statsFlowRuleService == null) {
+                statsFlowRuleService = get(StatsFlowRuleAdminService.class);
+            }
+            if (flowInfoMap == null) {
+                flowInfoMap = statsFlowRuleService.getFlowInfoMap();
+            }
+
+            String flowKey = string(payload, JSON_NODE_FLOW);
+            String period = string(payload, JSON_NODE_PERIOD);
+
+            if (!Strings.isNullOrEmpty(flowKey) || !Strings.isNullOrEmpty(period)) {
+                if (!Strings.isNullOrEmpty(flowKey)) {
+                    currentFlowKey = flowKey;
+                }
+                if (!Strings.isNullOrEmpty(period)) {
+                    currentPeriod = period;
+                }
+
+                Queue<FlowInfo> flowInfoQ = flowInfoMap.get(currentFlowKey);
+
+                if (flowInfoQ == null) {
+                    log.warn("No such flow key {}", currentFlowKey);
+                    return;
+                } else {
+                    populateMetrics(cm, flowInfoQ);
+                    attachFlowList(cm);
+                    attachPeriodList(cm);
+                }
+            } else {
+                flowInfoMap.keySet().forEach(key -> {
+                    Queue<FlowInfo> flowInfoQ = flowInfoMap.get(key);
+                    if (flowInfoQ == null) {
+                        log.warn("Key {} is not found in FlowInfoMap", key);
+                        return;
+                    }
+                    FlowInfo flowInfo = getLatestFlowInfo(flowInfoQ);
+
+                    Map<String, Object> local = Maps.newHashMap();
+                    local.put(LABEL, key);
+                    local.put(STAT_CURR_ACC_PACKET, flowInfo.statsInfo().currAccPkts());
+                    local.put(STAT_PREV_ACC_PACKET, flowInfo.statsInfo().prevAccPkts());
+                    local.put(STAT_CURR_ACC_BYTE, flowInfo.statsInfo().currAccBytes());
+                    local.put(STAT_PREV_ACC_BYTE, flowInfo.statsInfo().prevAccBytes());
+                    local.put(STAT_ERROR_PACKET, flowInfo.statsInfo().errorPkts());
+                    local.put(STAT_DROP_PACKET, flowInfo.statsInfo().dropPkts());
+
+                    populateMetric(cm.addDataPoint(key), local);
+                });
+            }
+        }
+
+        private void populateMetrics(ChartModel cm, Queue<FlowInfo> flowInfoQ) {
+            FlowInfo[] flowInfos = flowInfoQ.toArray(new FlowInfo[flowInfoQ.size()]);
+            SimpleDateFormat form = new SimpleDateFormat(CHART_TIME_FORMAT);
+            int timeOffset = 0;
+            Integer dataPointCount = PERIOD_OPTION_MAP.get(currentPeriod);
+            if (dataPointCount != null) {
+                timeOffset = flowInfos.length - (int) dataPointCount;
+                if (timeOffset < 0) {
+                    timeOffset = 0;
+                }
+            }
+
+            for (int idx = timeOffset; idx < flowInfos.length; idx++) {
+                Map<String, Object> local = Maps.newHashMap();
+                local.put(LABEL, form.format(new Date(flowInfos[idx].statsInfo().fstPktArrTime())));
+                local.put(STAT_CURR_ACC_PACKET, flowInfos[idx].statsInfo().currAccPkts());
+                local.put(STAT_PREV_ACC_PACKET, flowInfos[idx].statsInfo().prevAccPkts());
+                local.put(STAT_CURR_ACC_BYTE, flowInfos[idx].statsInfo().currAccBytes());
+                local.put(STAT_PREV_ACC_BYTE, flowInfos[idx].statsInfo().prevAccBytes());
+                local.put(STAT_ERROR_PACKET, flowInfos[idx].statsInfo().errorPkts());
+                local.put(STAT_DROP_PACKET, flowInfos[idx].statsInfo().dropPkts());
+                populateMetric(cm.addDataPoint(flowInfos[idx].uniqueFlowInfoKey()), local);
+            }
+        }
+
+        private void populateMetric(ChartModel.DataPoint dataPoint,
+                                    Map<String, Object> data) {
+            data.forEach(dataPoint::data);
+        }
+
+        private void attachFlowList(ChartModel cm) {
+            ArrayNode array = arrayNode();
+            flowInfoMap.keySet().forEach(key -> {
+                array.add(key);
+            });
+            cm.addAnnotation(ANNOT_FLOW_IDS, array);
+        }
+
+        private void attachPeriodList(ChartModel cm) {
+            ArrayNode array = arrayNode();
+            PERIOD_OPTION_MAP.keySet().forEach(period -> {
+                array.add(period);
+            });
+            cm.addAnnotation(ANNOT_PERIOD_OPTIONS, array);
+        }
+
+        private FlowInfo getLatestFlowInfo(Queue<FlowInfo> flowInfoQ) {
+            FlowInfo[] flowInfos = flowInfoQ.toArray(new FlowInfo[flowInfoQ.size()]);
+            return flowInfos[flowInfos.length - 1];
+        }
+    }
+}
diff --git a/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/gui/package-info.java b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/gui/package-info.java
new file mode 100644
index 0000000..59bd5f4
--- /dev/null
+++ b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/gui/package-info.java
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2018-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Web GUI for the control plane manager.
+ */
+package org.onosproject.openstacktelemetry.gui;
diff --git a/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/impl/DefaultFlowInfo.java b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/impl/DefaultFlowInfo.java
index 6033483..2f67050 100644
--- a/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/impl/DefaultFlowInfo.java
+++ b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/impl/DefaultFlowInfo.java
@@ -32,6 +32,8 @@
  * Implementation class of FlowInfo.
  */
 public final class DefaultFlowInfo implements FlowInfo {
+    private static final String INGRESS_STATS = "Ingress Port :";
+    private static final String EGRESS_STATS = "Egress Port :";
 
     private final byte flowType;
     private final DeviceId deviceId;
@@ -185,6 +187,20 @@
     }
 
     @Override
+    public String uniqueFlowInfoKey() {
+        if (srcIp.address().isZero() || dstIp.address().isZero()) {
+            if (!srcIp.address().isZero()) {
+                return INGRESS_STATS + srcIp.toString();
+            }
+            if (!dstIp.address().isZero()) {
+                return EGRESS_STATS + dstIp.toString();
+            }
+        }
+        return srcIp.toString() + ":" + srcPort.toString() + " -> " +
+                dstIp.toString() + ":" + dstPort.toString();
+    }
+
+    @Override
     public String toString() {
         return toStringHelper(this)
                 .add("flowType", flowType)
diff --git a/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/impl/StatsFlowRuleManager.java b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/impl/StatsFlowRuleManager.java
index 3a92bdf..79cb4c7 100644
--- a/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/impl/StatsFlowRuleManager.java
+++ b/apps/openstacktelemetry/app/src/main/java/org/onosproject/openstacktelemetry/impl/StatsFlowRuleManager.java
@@ -15,6 +15,7 @@
  */
 package org.onosproject.openstacktelemetry.impl;
 
+import com.google.common.collect.Maps;
 import com.google.common.collect.Sets;
 import org.apache.felix.scr.annotations.Activate;
 import org.apache.felix.scr.annotations.Component;
@@ -46,7 +47,6 @@
 import org.onosproject.net.flow.FlowRuleOperations;
 import org.onosproject.net.flow.FlowRuleOperationsContext;
 import org.onosproject.net.flow.FlowRuleService;
-import org.onosproject.net.flow.IndexTableId;
 import org.onosproject.net.flow.TrafficSelector;
 import org.onosproject.net.flow.TrafficTreatment;
 import org.onosproject.net.flow.criteria.IPCriterion;
@@ -69,8 +69,11 @@
 import org.slf4j.LoggerFactory;
 
 import java.util.Dictionary;
+import java.util.LinkedList;
 import java.util.List;
+import java.util.Map;
 import java.util.Optional;
+import java.util.Queue;
 import java.util.Set;
 import java.util.concurrent.ScheduledFuture;
 import java.util.concurrent.TimeUnit;
@@ -93,6 +96,7 @@
 import static org.onosproject.openstacknetworking.api.Constants.VTAP_INBOUND_TABLE;
 import static org.onosproject.openstacknetworking.api.Constants.VTAP_OUTBOUND_TABLE;
 import static org.onosproject.openstacknode.api.OpenstackNode.NodeType.COMPUTE;
+import static org.onosproject.openstacktelemetry.api.Constants.DEFAULT_DATA_POINT_SIZE;
 import static org.onosproject.openstacktelemetry.api.Constants.FLAT;
 import static org.onosproject.openstacktelemetry.api.Constants.OPENSTACK_TELEMETRY_APP_ID;
 import static org.onosproject.openstacktelemetry.api.Constants.VLAN;
@@ -123,11 +127,10 @@
     private static final boolean DEFAULT_EGRESS_STATS = false;
     private static final boolean DEFAULT_PORT_STATS = true;
 
-    private static final String MAC_NOT_NULL = "MAC should not be null";
-
     private static final String ARBITRARY_IP = "0.0.0.0/32";
     private static final int ARBITRARY_LENGTH = 32;
     private static final String ARBITRARY_MAC = "00:00:00:00:00:00";
+    private static final MacAddress NO_HOST_MAC = MacAddress.valueOf(ARBITRARY_MAC);
     private static final int ARBITRARY_IN_INTF = 0;
     private static final int ARBITRARY_OUT_INTF = 0;
 
@@ -182,6 +185,7 @@
     private ScheduledFuture result;
 
     private final Set<FlowInfo> gFlowInfoSet = Sets.newHashSet();
+    private final Map<String, Queue<FlowInfo>> flowInfoMap = Maps.newConcurrentMap();
 
     private static final int SOURCE_ID = 1;
     private static final int TARGET_ID = 2;
@@ -189,8 +193,6 @@
     private static final int METRIC_PRIORITY_SOURCE  = SOURCE_ID * PRIORITY_BASE;
     private static final int METRIC_PRIORITY_TARGET  = TARGET_ID * PRIORITY_BASE;
 
-    private static final MacAddress NO_HOST_MAC = MacAddress.valueOf("00:00:00:00:00:00");
-
     @Activate
     protected void activate() {
         appId = coreService.registerApplication(OPENSTACK_TELEMETRY_APP_ID);
@@ -264,13 +266,6 @@
             IPProtocolCriterion ipProtocol =
                     (IPProtocolCriterion) selector.getCriterion(IP_PROTO);
 
-            log.debug("[FlowInfo]  TableID:{}  SRC_IP:{}  DST_IP:{}  Pkt:{}  Byte:{}",
-                    ((IndexTableId) entry.table()).id(),
-                    srcIp.ip().toString(),
-                    dstIp.ip().toString(),
-                    entry.packets(),
-                    entry.bytes());
-
             fBuilder.withFlowType(FLOW_TYPE_SONA)
                     .withSrcIp(srcIp.ip())
                     .withDstIp(dstIp.ip());
@@ -283,25 +278,13 @@
                             (TcpPortCriterion) selector.getCriterion(TCP_SRC);
                     TcpPortCriterion tcpDst =
                             (TcpPortCriterion) selector.getCriterion(TCP_DST);
-
-                    log.debug("TCP SRC Port: {}, DST Port: {}",
-                            tcpSrc.tcpPort().toInt(),
-                            tcpDst.tcpPort().toInt());
-
                     fBuilder.withSrcPort(tcpSrc.tcpPort());
                     fBuilder.withDstPort(tcpDst.tcpPort());
-
                 } else if (ipProtocol.protocol() == PROTOCOL_UDP) {
-
                     UdpPortCriterion udpSrc =
                             (UdpPortCriterion) selector.getCriterion(UDP_SRC);
                     UdpPortCriterion udpDst =
                             (UdpPortCriterion) selector.getCriterion(UDP_DST);
-
-                    log.debug("UDP SRC Port: {}, DST Port: {}",
-                                                    udpSrc.udpPort().toInt(),
-                                                    udpDst.udpPort().toInt());
-
                     fBuilder.withSrcPort(udpSrc.udpPort());
                     fBuilder.withDstPort(udpDst.udpPort());
                 } else {
@@ -387,7 +370,7 @@
                 .withSrcIp(IpPrefix.valueOf(instPort.ipAddress(), ARBITRARY_LENGTH))
                 .withDstIp(IpPrefix.valueOf(ARBITRARY_IP))
                 .withSrcMac(instPort.macAddress())
-                .withDstMac(MacAddress.valueOf(ARBITRARY_MAC))
+                .withDstMac(NO_HOST_MAC)
                 .withDeviceId(instPort.deviceId())
                 .withInputInterfaceId(ARBITRARY_IN_INTF)
                 .withOutputInterfaceId(ARBITRARY_OUT_INTF)
@@ -420,7 +403,7 @@
         fBuilder.withFlowType(FLOW_TYPE_SONA)
                 .withSrcIp(IpPrefix.valueOf(ARBITRARY_IP))
                 .withDstIp(IpPrefix.valueOf(instPort.ipAddress(), ARBITRARY_LENGTH))
-                .withSrcMac(MacAddress.valueOf(ARBITRARY_MAC))
+                .withSrcMac(NO_HOST_MAC)
                 .withDstMac(instPort.macAddress())
                 .withDeviceId(instPort.deviceId())
                 .withInputInterfaceId(ARBITRARY_IN_INTF)
@@ -460,7 +443,6 @@
                                StatsFlowRule statsFlowRule, int rulePriority,
                                boolean install) {
 
-        log.debug("Table Transition: {} -> {}", fromTable, toTable);
         int srcPrefixLength = statsFlowRule.srcIpPrefix().prefixLength();
         int dstPrefixLength = statsFlowRule.dstIpPrefix().prefixLength();
         int prefixLength = rulePriority + srcPrefixLength + dstPrefixLength;
@@ -711,6 +693,26 @@
         return NO_HOST_MAC;
     }
 
+    private void enqFlowInfo(FlowInfo flowInfo) {
+        String key = flowInfo.uniqueFlowInfoKey();
+        Queue<FlowInfo> queue = flowInfoMap.get(key);
+        if (queue == null) {
+            Queue<FlowInfo> newQueue = new LinkedList<FlowInfo>();
+            newQueue.offer(flowInfo);
+            flowInfoMap.put(key, newQueue);
+            return;
+        }
+        queue.offer(flowInfo);
+
+        while (queue.size() > DEFAULT_DATA_POINT_SIZE) {
+            queue.remove(); // Removes a garbage data in the queue.
+        }
+    }
+
+    public Map<String, Queue<FlowInfo>> getFlowInfoMap() {
+        return flowInfoMap;
+    }
+
     /**
      * Extracts properties from the component configuration context.
      *
@@ -775,6 +777,11 @@
             }
 
             telemetryService.publish(filteredFlowInfos);
+
+            // TODO: Refactor the following code to "TelemetryService" style.
+            filteredFlowInfos.forEach(flowInfo -> {
+                enqFlowInfo(flowInfo);
+            });
         }
 
         private boolean checkSrcDstLocalMaster(FlowInfo info) {
diff --git a/apps/openstacktelemetry/app/src/main/resources/app/view/openstacktelemetry/openstacktelemetry.css b/apps/openstacktelemetry/app/src/main/resources/app/view/openstacktelemetry/openstacktelemetry.css
new file mode 100644
index 0000000..14a2529
--- /dev/null
+++ b/apps/openstacktelemetry/app/src/main/resources/app/view/openstacktelemetry/openstacktelemetry.css
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2016-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- OpenstackTelemetry -- CSS file
+ */
+
+#ov-openstacktelemetry {
+    padding: 20px;
+    position: relative;
+}
+.light #ov-openstacktelemetry {
+    color: navy;
+}
+.dark #ov-openstacktelemetry {
+    color: #88f;
+}
+
+#ov-openstacktelemetry .button-panel {
+    margin: 10px;
+    width: 200px;
+}
+
+.light #ov-openstacktelemetry .button-panel {
+    background-color: #ccf;
+}
+.dark #ov-openstacktelemetry .button-panel {
+    background-color: #444;
+}
+
+#ov-openstacktelemetry #chart-loader {
+    position: absolute;
+    width: 200px;
+    height: 50px;
+    margin-left: -100px;
+    margin-top: -25px;
+    z-index: 900;
+    top: 50%;
+    text-align: center;
+    left: 50%;
+    font-size: 25px;
+    font-weight: bold;
+    color: #ccc;
+}
\ No newline at end of file
diff --git a/apps/openstacktelemetry/app/src/main/resources/app/view/openstacktelemetry/openstacktelemetry.html b/apps/openstacktelemetry/app/src/main/resources/app/view/openstacktelemetry/openstacktelemetry.html
new file mode 100644
index 0000000..404e48f
--- /dev/null
+++ b/apps/openstacktelemetry/app/src/main/resources/app/view/openstacktelemetry/openstacktelemetry.html
@@ -0,0 +1,43 @@
+<!-- partial HTML -->
+<div id="ov-openstacktelemetry">
+    <div id="chart-loader" ng-show="!flowOpt && showLoader">
+        No Data
+    </div>
+    <div ng-show="!flowOpt && !periodOpt">
+        <canvas id="bar" class="chart chart-bar" chart-data="data"
+                chart-labels="labels" chart-legend="true" chart-click="onClick"
+                chart-series="series" chart-options="options" height="100%">
+        </canvas>
+    </div>
+    <div ng-show="flowOpt || periodOpt">
+        <h3>
+            Chart for Flow {{flowOpt || "(No flow selected)"}} .
+        </h3>
+        <table>
+        <tr>
+            <td>
+            <div class="ctrl-btns">
+                <select ng-options="flowId as flowId for flowId in flowIds"
+                        ng-model="selectedItem" ng-change="onChange(selectedItem)">
+                    <option value="">-- select a flow --</option>
+                </select>
+            </div>
+            </td>
+
+            <td>
+            <div class="ctrl-btns">
+                <select ng-options="period as period for period in periodOptions"
+                        ng-model="selectedPeriod" ng-change="onPeriodChange(selectedPeriod)">
+                    <option value="">-- select a period --</option>
+                </select>
+            </div>
+            </td>
+        </tr>
+        </table>
+
+        <canvas id="line" class="chart chart-line" chart-data="data"
+                chart-labels="labels" chart-legend="true"
+                chart-series="series" chart-options="options" height="100%">
+        </canvas>
+    </div>
+</div>
diff --git a/apps/openstacktelemetry/app/src/main/resources/app/view/openstacktelemetry/openstacktelemetry.js b/apps/openstacktelemetry/app/src/main/resources/app/view/openstacktelemetry/openstacktelemetry.js
new file mode 100644
index 0000000..129eaaf
--- /dev/null
+++ b/apps/openstacktelemetry/app/src/main/resources/app/view/openstacktelemetry/openstacktelemetry.js
@@ -0,0 +1,156 @@
+/*
+ * Copyright 2016-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Openstack Telemetry View Module
+ */
+(function () {
+    'use strict';
+
+    // injected references
+    var $log, $scope, $location, ks, fs, cbs, ns;
+
+    var hasFlow;
+
+    var gFlowId;
+    var gPeriod;
+
+    var labels = new Array(1);
+    var data = new Array(2);
+    for (var i = 0; i < 2; i++) {
+        data[i] = new Array(1);
+    }
+
+    var max;
+
+    function ceil(num) {
+        if (isNaN(num)) {
+            return 0;
+        }
+        var pre = num.toString().length - 1
+        var pow = Math.pow(10, pre);
+        return (Math.ceil(num / pow)) * pow;
+    }
+
+    function maxInArray(array) {
+        var merged = [].concat.apply([], array);
+        return Math.max.apply(null, merged);
+    }
+
+    angular.module('ovOpenstacktelemetry', ["chart.js"])
+        .controller('OvOpenstacktelemetryCtrl',
+        ['$log', '$scope', '$location', 'FnService', 'ChartBuilderService', 'NavService',
+
+        function (_$log_, _$scope_, _$location_, _fs_, _cbs_, _ns_) {
+            var params;
+            $log = _$log_;
+            $scope = _$scope_;
+            $location = _$location_;
+            fs = _fs_;
+            cbs = _cbs_;
+            ns = _ns_;
+
+            params = $location.search();
+
+            if (params.hasOwnProperty('flowOpt')) {
+                $scope.flowOpt = params['flowOpt'];
+                hasFlow = true;
+            } else if (params.hasOwnProperty('periodOpt')) {
+                $scope.periodOpt = params['periodOpt'];
+                hasFlow = true;
+            } else {
+                hasFlow = false;
+            }
+
+            cbs.buildChart({
+                scope: $scope,
+                tag: 'openstacktelemetry',
+                query: params
+            });
+
+            $scope.$watch('chartData', function () {
+                if (!fs.isEmptyObject($scope.chartData)) {
+                    $scope.showLoader = false;
+                    var length = $scope.chartData.length;
+                    labels = new Array(length);
+                    for (var i = 0; i < 2; i++) {
+                        data[i] = new Array(length);
+                    }
+
+                    $scope.chartData.forEach(function (cm, idx) {
+                        data[0][idx] = (cm.curr_acc_packet - cm.prev_acc_packet);
+                        data[1][idx] = (cm.curr_acc_byte - cm.prev_acc_byte);
+
+                        labels[idx] = cm.label;
+                    });
+                }
+
+                max = maxInArray(data)
+                $scope.labels = labels;
+                $scope.data = data;
+                $scope.options = {
+                    scaleOverride : true,
+                    scaleSteps : 10,
+                    scaleStepWidth : ceil(max) / 10,
+                    scaleStartValue : 0,
+                    scaleFontSize : 16
+                };
+                $scope.onClick = function (points, evt) {
+                    var label = labels[points[0]._index];
+                    if (label) {
+                        ns.navTo('openstacktelemetry', { flowOpt: label });
+                        $log.log(label);
+                    }
+                };
+
+                if (!fs.isEmptyObject($scope.annots)) {
+                    $scope.flowIds = JSON.parse($scope.annots.flowIds);
+                    $scope.periodOptions = JSON.parse($scope.annots.periodOptions);
+                }
+
+                $scope.onChange = function (flowId) {
+                    gFlowId = flowId;
+                    ns.navTo('openstacktelemetry', { periodOpt: gPeriod , flowOpt: flowId });
+                };
+
+                $scope.onPeriodChange = function (period) {
+                    gPeriod = period;
+                    ns.navTo('openstacktelemetry', { periodOpt: period , flowOpt: gFlowId });
+                };
+            });
+
+            $scope.series = ['Current Packet', 'Current Byte'];
+
+            $scope.labels = labels;
+            $scope.data = data;
+
+            $scope.chartColors = [
+                      '#286090',
+                      '#F7464A',
+                      '#46BFBD',
+                      '#FDB45C',
+                      '#97BBCD',
+                      '#4D5360',
+                      '#8c4f9f'
+                    ];
+            Chart.defaults.global.colours = $scope.chartColors;
+
+            $scope.showLoader = true;
+
+            $log.log('OvOpenstacktelemetryCtrl has been created');
+        }]);
+
+}());
diff --git a/apps/openstacktelemetry/app/src/main/resources/gui/css.html b/apps/openstacktelemetry/app/src/main/resources/gui/css.html
new file mode 100644
index 0000000..5c0672f
--- /dev/null
+++ b/apps/openstacktelemetry/app/src/main/resources/gui/css.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="app/view/openstacktelemetry/openstacktelemetry.css">
diff --git a/apps/openstacktelemetry/app/src/main/resources/gui/js.html b/apps/openstacktelemetry/app/src/main/resources/gui/js.html
new file mode 100644
index 0000000..5936ba0
--- /dev/null
+++ b/apps/openstacktelemetry/app/src/main/resources/gui/js.html
@@ -0,0 +1 @@
+<script src="app/view/openstacktelemetry/openstacktelemetry.js"></script>