[WIP] scmp echo gui (#62)

* [WIP] scmp echo gui

* Merge branch 'master' into echo_ui

* merging echo graph progress from pingpong_ui branch

* Merge branch 'master' into echo_ui

* removed WIP code, keeping only echo graph

* remove redundant images tag

* Merge branch 'master' into echo_ui

Author: mwfarb

webapp/models/scmpecho.go

@@ -47,7 +47,7 @@ type EchoGraph struct {
 func createEchoTable() error {
 	sqlCreateTable := `
     CREATE TABLE IF NOT EXISTS echo(
-		Inserted BIGINT NOT NULL PRIMARY KEY,
+        Inserted BIGINT NOT NULL PRIMARY KEY,
         ActualDuration INT,
         CIa TEXT,
         CAddr TEXT,
@@ -94,21 +94,21 @@ func (echo EchoItem) ToSlice() []string {
 func StoreEchoItem(echo *EchoItem) error {
 	sqlInsert := `
     INSERT INTO echo(
-		Inserted,
-		ActualDuration,
+        Inserted,
+        ActualDuration,
         CIa,
         CAddr,
         SIa,
-		SAddr,
-		Count,
-		Timeout,
-		Interval,
-		ResponseTime,
-		RunTime,
-	    PktLoss,
-	    CmdOutput,
-		Error,
-		Path
+        SAddr,
+        Count,
+        Timeout,
+        Interval,
+        ResponseTime,
+        RunTime,
+        PktLoss,
+        CmdOutput,
+        Error,
+        Path
     ) values(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
     `
 	stmt, err := db.Prepare(sqlInsert)
@@ -140,22 +140,22 @@ func StoreEchoItem(echo *EchoItem) error {
 func ReadEchoItemsAll() ([]EchoItem, error) {
 	sqlReadAll := `
     SELECT
-		Inserted,
-		ActualDuration,
-		CIa,
+        Inserted,
+        ActualDuration,
+        CIa,
         CAddr,
         SIa,
-		SAddr,
-		Count,
-		Timeout,
-		Interval,
-		ResponseTime,
-		RunTime,
-		PktLoss,
-		CmdOutput,
-		Error,
-		Path
-		FROM echo
+        SAddr,
+        Count,
+        Timeout,
+        Interval,
+        ResponseTime,
+        RunTime,
+        PktLoss,
+        CmdOutput,
+        Error,
+        Path
+        FROM echo
     ORDER BY datetime(Inserted) DESC
     `
 	rows, err := db.Query(sqlReadAll)
@@ -196,15 +196,15 @@ func ReadEchoItemsAll() ([]EchoItem, error) {
 func ReadEchoItemsSince(since string) ([]EchoGraph, error) {
 	sqlReadSince := `
     SELECT
-		Inserted,
-		ActualDuration,
-		ResponseTime,
-		RunTime,
-		PktLoss,
-		CmdOutput,
-		Error,
-		Path
-	FROM echo
+        Inserted,
+        ActualDuration,
+        ResponseTime,
+        RunTime,
+        PktLoss,
+        CmdOutput,
+        Error,
+        Path
+    FROM echo
     WHERE Inserted > ?
     ORDER BY datetime(Inserted) DESC
     `

webapp/static/css/style.css

@@ -57,6 +57,7 @@ svg.svg-dials {
  float: left;
  width: 500px;
  height: 300px;
+ font-size: 12px;
 }
 
 .row:after {
@@ -66,6 +67,14 @@ svg.svg-dials {
  overflow: scroll;
 }
 
+/* TAB ECHO */
+#echo-continuous .chart {
+ height: 200px;
+ width: 698px;
+ overflow: hidden;
+ float: left;
+}
+
 /* TAB BWTESTER */
 .bwtest-dial {
  width: 100px;
@@ -120,6 +129,7 @@ img {
  float: left;
  width: 200px;
  height: 342px;
+ font-size: 12px;
 }
 
 .scion-ia {

webapp/static/js/webapp.js

@@ -30,6 +30,7 @@ var dataIntervalMs = 1000;
 var progIntervalMs = 500
 var chartCS;
 var chartSC;
+var chartSE;
 var lastTime;
 var lastTimeBwDb = new Date((new Date()).getTime() - (xAxisSec * 1000));
 
@@ -58,6 +59,7 @@ var imageText = 'Execute camerapp to retrieve an image.';
 var sensorText = 'Execute sensorapp to retrieve sensor data.';
 var bwgraphsText = 'Click legend to hide/show data when continuous test is on.';
 var cont_disable_msg = 'Continuous testing disabled.'
+var echoText = 'Execute echo to measure response time.';
 
 window.onbeforeunload = function(event) {
     // detect window close to end continuous test if any
@@ -103,6 +105,7 @@ function initBwGraphs() {
             csColAch);
     chartSC = drawBwtestSingleDir('sc', 'Download (mbps)', true, scColReq,
             scColAch);
+    chartSE = drawPingGraph('echo-graph', 'Echo Response (ms)');
     // setup interval to manage smooth ticking
     lastTime = (new Date()).getTime() - (ticks * tickMs) + xLeftTrimMs;
     manageTickData();
@@ -112,6 +115,9 @@ function initBwGraphs() {
 function showOnlyConsoleGraphs(activeApp) {
     $('#bwtest-continuous').css("display",
             (activeApp == "bwtester") ? "block" : "none");
+    $('#images').css("display", (activeApp == "camerapp") ? "block" : "none");
+    $('#echo-continuous').css("display",
+            (activeApp == "echo") ? "block" : "none");
     var isConsole = (activeApp == "bwtester" || activeApp == "camerapp"
             || activeApp == "sensorapp" || activeApp == "echo");
     $('.stdout').css("display", isConsole ? "block" : "none");
@@ -192,7 +198,7 @@ function drawBwtestSingleDir(dir, yAxisLabel, legend, reqCol, achCol) {
         } ],
         tooltip : {
             enabled : true,
-            formatter : formatTooltip,
+            formatter : formatBwTooltip,
         },
         legend : {
             y : -15,
@@ -236,7 +242,56 @@ function drawBwtestSingleDir(dir, yAxisLabel, legend, reqCol, achCol) {
     return chart;
 }
 
-function formatTooltip() {
+function drawPingGraph(div_id, yAxisLabel) {
+    var chart = Highcharts.chart(div_id, {
+        chart : {
+            type : 'column'
+        },
+        title : {
+            text : null
+        },
+        xAxis : {
+            type : 'datetime',
+        },
+        yAxis : {
+            min : 0,
+            minTickInterval : 1, // keep 0.1 errors visible
+            title : {
+                text : yAxisLabel
+            }
+        },
+        legend : {
+            enabled : false
+        },
+        tooltip : {
+            enabled : true,
+            formatter : formatPingTooltip,
+        },
+        credits : {
+            enabled : true,
+            text : 'Download Data',
+            href : './data/',
+        },
+        exporting : {
+            enabled : false
+        },
+        plotOptions : {
+            column : {
+                pointWidth : 8
+            }
+        },
+        series : [ {
+            name : yAxisLabel,
+            data : loadSetupData(),
+            dataLabels : {
+                enabled : false,
+            }
+        } ]
+    });
+    return chart;
+}
+
+function formatBwTooltip() {
     var tooltip = '<b>' + this.series.name + '</b><br/>'
             + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>'
             + Highcharts.numberFormat(this.y, 2) + ' mbps<br/><i>'
@@ -247,6 +302,17 @@ function formatTooltip() {
     return tooltip;
 }
 
+function formatPingTooltip() {
+    var tooltip = '<b>' + this.series.name + '</b><br/>'
+            + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>'
+            + Highcharts.numberFormat(this.y, 3) + ' ms<br/>' + this.point.loss
+            + '% packet loss<br/><i>' + this.point.path + '</i>';
+    if (this.point.error != null) {
+        tooltip += '<br/><b>' + this.point.error + '</b>';
+    }
+    return tooltip;
+}
+
 function loadSetupData() {
     // points are a function of timeline speed (width & seconds)
     // no data points on setup
@@ -269,6 +335,7 @@ function manageTickData() {
         var newTime = (new Date()).getTime();
         refreshTickData(chartCS, newTime);
         refreshTickData(chartSC, newTime);
+        refreshTickData(chartSE, newTime);
     }, tickMs);
 }
 
@@ -377,11 +444,23 @@ function requestEchoByTime(form_data) {
                         // result returned, display it and reset progress
                         handleEndCmdDisplay(d.graph[i].CmdOutput);
                     }
-
-                    console.info('continuous echo', 'duration:',
+                    var data = {
+                        'responseTime' : d.graph[i].ResponseTime,
+                        'runTime' : d.graph[i].RunTime,
+                        'loss' : d.graph[i].PktLoss,
+                        'path' : d.graph[i].Path,
+                        'error' : d.graph[i].Error,
+                    };
+                    if (data.runTime == 0) {
+                        // for other errors, use execution time
+                        data.runTime = d.graph[i].ActualDuration;
+                    }
+                    console.info(JSON.stringify(data));
+                    console.info('continous echo', 'duration:',
                             d.graph[i].ActualDuration, 'ms');
-
-                    // TODO (mwfarb): complete echo graph
+                    // use the time the test began
+                    var time = d.graph[i].Inserted - d.graph[i].ActualDuration;
+                    updatePingGraph(chartSE, data, time)
                 }
             }
         }
@@ -398,19 +477,23 @@ function refreshTickData(chart, newTime) {
     // manually remove all left side ticks < left side time
     // wait for adding hidden ticks to draw
     var draw = false;
-    removeOldPoints(series0, lastTime, draw);
-    removeOldPoints(series1, lastTime, draw);
+    if (series0)
+        removeOldPoints(series0, lastTime, draw);
+    if (series1)
+        removeOldPoints(series1, lastTime, draw);
     // manually add hidden right side ticks, time = now
     // do all drawing here to avoid accordioning redraws
     // do not shift points since we manually remove before this
     draw = true;
-    series0.addPoint([ x, y ], draw, shift);
-    series1.addPoint([ x, y ], draw, shift);
+    if (series0)
+        series0.addPoint([ x, y ], draw, shift);
+    if (series1)
+        series1.addPoint([ x, y ], draw, shift);
 }
 
 function removeOldPoints(series, lastTime, draw) {
     for (var i = 0; i < series.data.length; i++) {
-        if (series.data[i].x < lastTime) {
+        if (series.data[i] && series.data[i].x < lastTime) {
             series.removePoint(i, draw);
         }
     }
@@ -457,6 +540,36 @@ function updateBwChart(chart, dataDir, time) {
     }
 }
 
+function updatePingGraph(chart, data, time) {
+    // manually add visible right side ticks, time = now
+    // wait for adding hidden ticks to draw, for consistancy
+    // do not shift points since we manually remove before this
+    var draw = false;
+    var shift = false;
+    if (data.error || data.loss > 0 || data.responseTime <= 0) {
+        var error = 'An error occured.';
+        if (data.loss > 0) {
+            error = 'Response timeout.';
+        }
+        chart.series[0].addPoint({
+            x : time,
+            y : data.runTime,
+            loss : data.loss,
+            path : data.path,
+            error : data.error ? data.error : error,
+            color : '#f00',
+        }, draw, shift);
+    } else {
+        chart.series[0].addPoint({
+            x : time,
+            y : data.responseTime,
+            loss : data.loss,
+            path : data.path,
+            color : '#0f0',
+        }, draw, shift);
+    }
+}
+
 function endProgress() {
     clearInterval(commandProg);
     commandProg = false;
@@ -524,10 +637,8 @@ function command(continuous) {
             // check for usable data for graphing
             handleContResponse(resp, continuous, startTime);
         } else if (activeApp == "echo") {
+            // check for usable data for graphing
             handleContResponse(resp, continuous, startTime);
-
-            // TODO (mwfarb): implement continuous echo graph
-
         } else {
             handleGeneralResponse();
         }
@@ -741,6 +852,7 @@ function setDefaults() {
     $('#stats_text').text(sensorText);
     $('#bwtest_text').text(bwText);
     $('#bwgraphs_text').text(bwgraphsText);
+    $('#echo_text').text(echoText);
 
     onchange_radio('cs', 'size');
     onchange_radio('sc', 'size');

webapp/template/index.html

@@ -327,13 +327,16 @@ <h2>SCIONLab Apps</h2>
       <div id="webapp-console-graph">
 
        <!-- BWTEST GRAPHING -->
-       <div id="bwtest-continuous">
+       <div id="bwtest-continuous" style="display: block;">
         <div id="cs-bwtest-graph" class="chart"></div>
         <div id="sc-bwtest-graph" class="chart"></div>
        </div>
 
-       <!-- COMMAND OUTPUT -->
-       <!--      <div class="stdout" style="display: none;">-->
+       <!-- ECHO GRAPHING -->
+       <div id="echo-continuous" style="display: none;">
+        <div id="echo-graph" class="chart"></div>
+       </div>
+
        <div class="stdout">
         <div id="results"></div>
        </div>