Added GUI to intent perf app to monitor performance stats in real-time.

Fixed app ids for metrics app.

Change-Id: Icea99991ad71c80c53a832c236dcc05fefbb9b02

@@ -65,7 +65,7 @@ public class IntentPerfCollector {
     @Reference(cardinality = ReferenceCardinality.MANDATORY_UNARY)
     protected ClusterService clusterService;
 
-    @Reference(cardinality = ReferenceCardinality.OPTIONAL_UNARY)
+    @Reference(cardinality = ReferenceCardinality.MANDATORY_UNARY)
     protected IntentPerfUi ui;
 
     // Auxiliary structures used to accrue data for normalized time interval
@@ -99,6 +99,7 @@ public class IntentPerfCollector {
             nodeToIndex.put(nodes[i].id(), i);
         }
 
+        ui.setHeaders(getSampleHeaders());
         clearSamples();
         log.info("Started");
     }

@@ -99,7 +99,7 @@ public class IntentPerfInstaller {
     private static final int DEFAULT_NUM_NEIGHBORS = 0;
 
     private static final int START_DELAY = 5_000; // ms
-    private static final int REPORT_PERIOD = 5_000; //ms
+    private static final int REPORT_PERIOD = 1_000; //ms
 
     private static final String START = "start";
     private static final String STOP = "stop";

@@ -15,6 +15,7 @@
  */
 package org.onosproject.intentperf;
 
+import com.fasterxml.jackson.databind.node.ArrayNode;
 import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.google.common.collect.ImmutableList;
 import com.google.common.collect.ImmutableSet;
@@ -23,6 +24,7 @@ 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.onlab.osgi.ServiceDirectory;
 import org.onosproject.intentperf.IntentPerfCollector.Sample;
 import org.onosproject.ui.UiConnection;
@@ -34,14 +36,17 @@ import org.onosproject.ui.UiView;
 import java.util.Collection;
 import java.util.HashSet;
 import java.util.List;
+import java.util.Random;
 import java.util.Set;
+import java.util.TimerTask;
 
 import static java.util.Collections.synchronizedSet;
 
 /**
  * Mechanism to stream data to the GUI.
  */
-@Component(immediate = true, enabled = false)
+@Component(immediate = true, enabled = true)
+@Service(value = IntentPerfUi.class)
 public class IntentPerfUi {
 
     @Reference(cardinality = ReferenceCardinality.MANDATORY_UNARY)
@@ -53,9 +58,25 @@ public class IntentPerfUi {
     private UiExtension uiExtension = new UiExtension(views, this::newHandlers,
                                                       getClass().getClassLoader());
 
+    private List<String> headers = ImmutableList.of("One", "Two", "Three", "Four", "Five");
+
+    private Random random = new Random();
+    private TimerTask task;
+
     @Activate
     protected void activate() {
         uiExtensionService.register(uiExtension);
+//        task = new TimerTask() {
+//            @Override
+//            public void run() {
+//                Sample sample = new Sample(System.currentTimeMillis(), headers.size());
+//                for (int i = 0; i < headers.size(); i++) {
+//                    sample.data[i] = 25_000 + random.nextInt(20_000) - 5_000;
+//                }
+//                reportSample(sample);
+//            }
+//        };
+//        SharedExecutors.getTimer().scheduleAtFixedRate(task, 1000, 1000);
     }
 
     @Deactivate
@@ -74,6 +95,15 @@ public class IntentPerfUi {
         }
     }
 
+    /**
+     * Sets the headers for the subsequently reported samples.
+     *
+     * @param headers list of headers for future samples
+     */
+    public void setHeaders(List<String> headers) {
+        this.headers = headers;
+    }
+
     // Creates and returns session specific message handler.
     private Collection<UiMessageHandler> newHandlers() {
         return ImmutableList.of(new StreamingControl());
@@ -90,7 +120,22 @@ public class IntentPerfUi {
 
         @Override
         public void process(ObjectNode message) {
-            streamingEnabled = message.path("event").asText("unknown").equals("initPerfStart");
+            streamingEnabled = message.path("event").asText("unknown").equals("intentPerfStart");
+            if (streamingEnabled) {
+                sendHeaders();
+            }
+        }
+
+        private void sendHeaders() {
+            ArrayNode an = mapper.createArrayNode();
+            for (String header : headers) {
+                an.add(header);
+            }
+
+            ObjectNode sn = mapper.createObjectNode();
+            sn.set("headers", an);
+
+            connection().sendMessage("intentPerfHeaders", 0, sn);
         }
 
         @Override
@@ -106,10 +151,18 @@ public class IntentPerfUi {
         }
 
         private void send(Sample sample) {
-            // FIXME: finish this
-            ObjectNode sn = mapper.createObjectNode()
-                    .put("time", sample.time);
-            connection().sendMessage("intentPerf", 0, sn);
+            if (streamingEnabled) {
+                ArrayNode an = mapper.createArrayNode();
+                for (double d : sample.data) {
+                    an.add(d);
+                }
+
+                ObjectNode sn = mapper.createObjectNode();
+                sn.put("time", sample.time);
+                sn.set("data", an);
+
+                connection().sendMessage("intentPerfSample", 0, sn);
+            }
         }
     }
 

@@ -18,39 +18,35 @@
  ONOS GUI -- Intent Perf View -- CSS file
  */
 
-.light #ov-intentPerf {
-    color: navy;
+svg {
+    font: 12px sans-serif;
 }
 
-.dark #ov-intentPerf {
-    color: #1e5e6f;
-}
-
-.dark a {
-    color: #88c;
-}
-
-#ov-intentPerf .msg {
-    color: darkorange;
-}
-
-.light #ov-intentPerf .msg {
-    color: darkorange;
-}
-
-.dark #ov-intentPerf .msg {
-    color: #904e00;
+.line {
+    fill: none;
+    stroke: #000;
+    stroke-width: 2px;
 }
 
-
-
 .axis path,
 .axis line {
     fill: none;
-    stroke: #000;
+    stroke-width: 2px;
     shape-rendering: crispEdges;
 }
 
-.browser text {
-    text-anchor: end;
+.light .axis path,
+.light .axis line,
+.light .axis text {
+    stroke: #999;
+}
+
+.dark .axis path,
+.dark .axis line,
+.dark .axis text {
+    stroke: #eee;
 }
+
+.axis text {
+    stroke-width: 0.3;
+}
\ No newline at end of file

@@ -15,10 +15,12 @@
   -->
 
 <!-- Intent Performance partial HTML -->
-<div id="ov-sample">
+<div id="ov-intentPerf">
     <h2> Intent Performance View </h2>
 
-    <span class="msg">{{ ctrl.message }}</span>
-
-    <div id="intent-perf-chart"></div>
+    <div id="intent-perf-chart"
+         resize
+         ng-style="resizeWithOffset(56, 12)"
+         notifier="ctrl.notifyResize()">
+    </div>
 </div>

@@ -18,8 +18,6 @@
 <head>
     <title>Dev View</title>
     <script src="tp/d3.min.js"></script>
-    <script src="tp/jquery-2.1.1.min.js"></script>
-
     <link rel="stylesheet" href="app/view/intentPerf/intentPerf.css">
 </head>
 <body>

+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+    svg {
+        font: 10px sans-serif;
+    }
+
+    .line {
+        fill: none;
+        stroke: darkgreen;
+        stroke-width: 2px;
+    }
+
+    .axis path,
+    .axis line {
+        fill: none;
+        stroke: #999;
+        stroke-width: 2px;
+        shape-rendering: crispEdges;
+    }
+
+</style>
+<body>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script>
+    (function () {
+        var cs = 0,
+                samples = [
+                    89.53,
+                    37515.81,
+                    104609.6,
+                    113105.11,
+                    103194.74,
+                    122151.63,
+                    128623.9,
+                    137325.33,
+                    154897.31,
+                    161235.07,
+                    162025.4,
+                    164902.64,
+                    158196.26,
+                    161072.44,
+                    160792.54,
+                    164692.44,
+                    161979.74,
+                    162137.4,
+                    159325.19,
+                    170465.44,
+                    168186.46,
+                    171152.34,
+                    168221.02,
+                    167440.73,
+                    165003.39,
+                    166855.18,
+                    157268.79,
+                    164087.54,
+                    162265.21,
+                    165990.16,
+                    176364.01,
+                    172064.07,
+                    184872.24,
+                    183249.8,
+                    182282.47,
+                    171475.11,
+                    158880.58,
+                    166016.69,
+                    168233.16,
+                    177759.92,
+                    179742.87,
+                    170819.44,
+                    167577.73,
+                    169479.9,
+                    175544.89,
+                    183792.01,
+                    184689.52,
+                    178503.87,
+                    173219.27,
+                    179085.49,
+                    179700.54,
+                    174281.17,
+                    181353.08,
+                    180173.14,
+                    184093.16,
+                    186011.5,
+                    176952.79,
+                    175319.2,
+                    169001.05,
+                    174545.12,
+                    169156.29,
+                    171804.3,
+                    159155.54,
+                    154709.96,
+                    157263.97
+                ],
+                theSample,
+                headers = [ "Whole", "Half", "Third" ];
+
+        var n = 243,
+                duration = 750,
+                now = new Date(Date.now() - duration),
+                data = [];
+
+        headers.forEach(function (d, li) {
+            data[li] = d3.range(n).map(function () { return 0; });
+        });
+
+        var margin = {top: 20, right: 100, bottom: 20, left: 100},
+                width = 960 - margin.right,
+                height = 512 - margin.top - margin.bottom;
+
+        var x = d3.time.scale()
+                .domain([now - (n - 2) * duration, now - duration])
+                .range([0, width]);
+
+        var y = d3.scale.linear()
+                .domain([0, 200000])
+                .range([height, 0]);
+
+        var svg = d3.select("body").append("p").append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+        svg.append("defs").append("clipPath")
+                .attr("id", "clip")
+                .append("rect")
+                .attr("width", width)
+                .attr("height", height);
+
+        var axis = svg.append("g")
+                .attr("class", "x axis")
+                .attr("transform", "translate(0," + height + ")")
+                .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));
+
+        svg.append("g")
+                .attr("class", "y axis")
+                .call(d3.svg.axis().scale(y).orient("left"));
+
+        svg.append("g")
+                .attr("class", "y axis")
+                .attr("transform", "translate(" + width + " ,0)")
+                .call(d3.svg.axis().scale(y).orient("right"));
+
+        var lines = [], paths = [];
+        data.forEach(function (p, li) {
+            lines[li]= d3.svg.line()
+                    .interpolate("basis")
+                    .x(function (d, i) {
+                        return x(now - (n - 1 - i) * duration);
+                    })
+                    .y(function (d, i) {
+                        return y(d);
+                    });
+
+            paths[li] = svg.append("g")
+                    .attr("clip-path", "url(#clip)")
+                    .append("path")
+                    .datum(function () { return data[li]; })
+                    .attr("id", "line" + li)
+                    .attr("class", "line");
+        });
+
+        var transition = d3.select({}).transition()
+                .duration(750)
+                .ease("linear");
+
+        function tick() {
+            transition = transition.each(function () {
+                // update the domains
+                now = new Date();
+                x.domain([now - (n - 2) * duration, now - duration]);
+
+                data.forEach(function (d, li) {
+                    // push the new most recent sample onto the back
+                    d.push(theSample[li]);
+
+                   // redraw the line and slide it left
+                    paths[li].attr("d", lines[li]).attr("transform", null);
+                    paths[li].transition().attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");
+
+                    // pop the old data point off the front
+                    d.shift();
+                });
+
+                // slide the x-axis left
+                axis.call(x.axis);
+
+            }).transition().each("start", tick);
+        }
+
+        function setSample() {
+            var v = samples[cs++];
+            theSample = [ v, v/2, v/3 ];
+        }
+
+        setSample();
+        setInterval(setSample, 1000);
+        tick();
+
+    })()
+</script>
+</body>
+</html>

@@ -21,7 +21,7 @@
 /* ------ for summary-list tables ------ */
 
 table.summary-list {
-    margin: 0 50px 50px 50px;
+    margin: 0 20px 16px 12px;
     font-size: 10pt;
     border-spacing: 0;
 }

@@ -48,6 +48,10 @@ body.dark {
     height: 100%;
 }
 
+#view h2 {
+    padding-left: 12px;
+}
+
 .light #view h2 {
     color: #800;
 }