[webapp] WIP Path Latency Survey

moving path text color fix here

adding test link text

adding latency placeholders in path lists

updated path header, fixed path latency text

adding traceroute last call

convert incoming paths to hash map

tr appears in wrong order, but path latency updates now

use best results

find min/max and report min'

adding stats object to trace needed stats

adding stats to path graph

restore traceroute

Author: mwfarb

webapp/static/css/style-viz.css

@@ -229,6 +229,10 @@ ul.tree li.open>ul {
 ul.tree li a {
  color: black;
  text-decoration: none;
+}
+
+.path-text {
+ color: white;
  padding-left: 5px; /* background shape */
  padding-right: 5px; /* background shape */
  border-radius: 10px; /* background shape */

webapp/static/js/asviz.js

@@ -68,7 +68,8 @@ function setPaths(type, idx, open) {
         } else if (type == 'UP') {
             addSegments(resUp, idx, num, colorSegUp, type);
         } else if (type == 'PATH') {
-            addPaths(resPath, idx, num, colorPaths, type);
+            var latencies = getPathLatencyAvg(formatPathString(resPath, idx, type));
+            addPaths(resPath, idx, num, colorPaths, type, latencies);
         }
         self.segType = type;
         self.segNum = idx;
@@ -111,9 +112,9 @@ function formatPathString(res, idx, type) {
 /*
  * Adds D3 forwarding path links with arrows and a title to paths graph.
  */
-function addPaths(res, idx, num, color, type) {
+function addPaths(res, idx, num, color, type, latencies) {
     if (graphPath) {
-        drawPath(res, idx, color);
+        drawPath(res, idx, color, latencies);
         if (res.if_lists[idx].expTime) {
             drawTitle(type + ' ' + num, color, res.if_lists[idx].expTime);
         } else {

webapp/static/js/tab-paths.js

@@ -3,7 +3,7 @@ var iaLabels;
 var iaLocations = [];
 var iaGeoLoc;
 var g = {};
-var jPathColors = [];
+var jPathsAvailable = {};
 
 function setupDebug(src, dst) {
     var src = $('#ia_cli').val();
@@ -26,14 +26,99 @@ function path_colors(n) {
 }
 
 function getPathColor(hops) {
-    var idx = jPathColors.indexOf(hops + '');
-    if (idx < 0) {
+    if (!jPathsAvailable[hops]) {
         return cMissingPath;
     } else {
-        return path_colors(idx);
+        return jPathsAvailable[hops].color;
     }
 }
 
+/**
+ * Updates statistics.
+ */
+function updateStats(fStat, oldStat) {
+    var newStat = {}
+    newStat.Last = fStat;
+    newStat.Num = oldStat ? (oldStat.Num + 1) : 1;
+    newStat.Avg = oldStat ? (((oldStat.Avg * oldStat.Num) + fStat) / newStat.Num)
+            : fStat;
+    newStat.Min = oldStat ? Math.min(fStat, oldStat.Min) : fStat;
+    newStat.Max = oldStat ? Math.max(fStat, oldStat.Max) : fStat;
+    return newStat;
+}
+
+function getPathLatencyLast(hops) {
+    return getPathLatency(hops, false);
+}
+
+function getPathLatencyAvg(hops) {
+    return getPathLatency(hops, true);
+}
+
+/**
+ * Returns array of interface and full path latency stats.
+ */
+function getPathLatency(hops, avg) {
+    var path = {};
+    if (jPathsAvailable[hops]) {
+        path = jPathsAvailable[hops];
+    }
+    var latencies = [];
+    for (var i = 0; i < path.interfaces.length; i++) {
+        if (path.interfaces[i].latency) {
+            latencies.push(avg ? path.interfaces[i].latency.Last
+                    : path.interfaces[i].latency.Avg);
+        } else {
+            latencies.push(undefined);
+        }
+    }
+    if (path.latency) {
+        latencies.push(avg ? path.latency.Last : path.latency.Avg);
+    } else {
+        latencies.push(undefined);
+    }
+    return latencies;
+}
+
+function setEchoLatency(hops, latency) {
+    var path = {};
+    if (jPathsAvailable[hops]) {
+        path = jPathsAvailable[hops];
+    }
+    path.latency = updateStats(latency, path.latency);
+    var latStr = parseFloat(path.latency.Last).toFixed(1);
+    $('#path-lat-' + path.listIdx).html(latStr);
+    jPathsAvailable[hops] = path;
+}
+
+function setTracerouteLatency(hops, interfaces) {
+    var path = {};
+    if (jPathsAvailable[hops]) {
+        path = jPathsAvailable[hops];
+    }
+    for (var i = 0; i < interfaces.length; i++) {
+        var if_ = interfaces[i];
+        if (i < interfaces.length - 1) {
+            path.interfaces[i].addr = if_.HopAddr;
+            path.interfaces[i].latency = updateStats(if_.RespTime1,
+                    path.interfaces[i].latency);
+            path.interfaces[i].latency = updateStats(if_.RespTime2,
+                    path.interfaces[i].latency);
+            path.interfaces[i].latency = updateStats(if_.RespTime3,
+                    path.interfaces[i].latency);
+            var latStr = parseFloat(path.interfaces[i].latency.Last).toFixed(1);
+            $('#path-lat-' + path.listIdx + '-' + i).html(latStr);
+        } else {
+            path.latency = updateStats(if_.RespTime1, path.latency);
+            path.latency = updateStats(if_.RespTime2, path.latency);
+            path.latency = updateStats(if_.RespTime3, path.latency);
+            var latStr = parseFloat(path.latency.Last).toFixed(1);
+            $('#path-lat-' + path.listIdx).html(latStr);
+        }
+    }
+    jPathsAvailable[hops] = path;
+}
+
 function isConfigComplete(data, textStatus, jqXHR) {
     console.log(JSON.stringify(data));
     g['nodes_xml_url'] = data.nodes_xml_url;
@@ -376,11 +461,18 @@ function get_path_html(paths, csegs, usegs, dsegs, show_segs) {
         if_ = ent.Path.Interfaces;
         var hops = if_.length / 2;
 
-        var style = "style='background-color: "
-                + getPathColor(formatPathJson(paths, parseInt(p))) + "; '";
-        html += "<li seg-type='PATH' seg-num=" + p + "><a " + style
-                + " href='#'>PATH " + (parseInt(p) + 1)
-                + "</a> <span class='badge'>" + hops + "</span>";
+        var pathStr = formatPathJson(paths, parseInt(p));
+        var latencies = getPathLatencyAvg(pathStr);
+        var latencyPath = latencies[latencies.length - 1];
+        var latPathStr = latencyPath ? parseFloat(latencyPath).toFixed(1) : '';
+        var aStyle = "style='background-color:" + getPathColor(pathStr) + ";'";
+        var latStyle = "style='color:purple; position:absolute; right:0;'";
+        html += "<li seg-type='PATH' seg-num=" + p + " path='" + pathStr
+                + "'><a class='path-text' " + aStyle
+                + " href='#'><span style='color: white;'>PATH "
+                + (parseInt(p) + 1) + "</span></a> <span class='badge'>" + hops
+                + "</span> <span id='path-lat-" + p + "' " + latStyle + ">"
+                + latPathStr + "</span>";
         exp.setUTCSeconds(ent.Path.ExpTime);
         html += "<ul>";
         html += "<li><a href='#'>Mtu: " + ent.Path.Mtu + "</a>";
@@ -396,8 +488,11 @@ function get_path_html(paths, csegs, usegs, dsegs, show_segs) {
         html += "<li><a href='#'>Expiration: " + exp.toLocaleDateString() + " "
                 + exp.toLocaleTimeString() + "</a>";
         for (i in if_) {
+            var latIfStr = latencies[i] ? parseFloat(latencies[i]).toFixed(1)
+                    : '';
             html += "<li><a href='#'>" + iaRaw2Read(if_[i].RawIsdas) + " ("
-                    + if_[i].IfID + ")</a>";
+                    + if_[i].IfID + ")</a> <span id='path-lat-" + p + "-" + i
+                    + "' " + latStyle + ">" + latIfStr + "</span>";
         }
         html += "</ul>";
     }
@@ -662,6 +757,34 @@ function get_nonseg_links(paths, lType) {
     return hops;
 }
 
+function addAvailablePaths(paths) {
+    Object.keys(jPathsAvailable).forEach(function(key) {
+        jPathsAvailable[key].listIdx = undefined; // reset
+    });
+    for (var idx = 0; idx < paths.length; idx++) {
+        var hops = formatPathJson(paths, idx, 'PATH');
+        if (!jPathsAvailable[hops]) {
+            jPathsAvailable[hops] = {};
+        }
+        // update path preserving old values
+        var path = jPathsAvailable[hops];
+        var pathLen = Object.keys(jPathsAvailable).length;
+        path.interfaces = [];
+        var ifs = paths[idx].Entry.Path.Interfaces;
+        for (var i = 0; i < ifs.length; i++) {
+            var if_ = {};
+            if_.ifid = ifs[i].IfID;
+            if_.isdas = iaRaw2Read(ifs[i].RawIsdas);
+            path.interfaces.push(if_);
+        }
+        path.expTime = paths[idx].Entry.Path.ExpTime;
+        path.mtu = paths[idx].Entry.Path.Mtu;
+        path.color = path_colors(pathLen - 1);
+        path.listIdx = idx;
+        jPathsAvailable[hops] = path;
+    }
+}
+
 function requestPaths() {
     // make sure to get path topo after IAs are loaded
     var form_data = $('#command-form').serializeArray();
@@ -685,12 +808,7 @@ function requestPaths() {
             resDown = resSegs.down_segments;
 
             // store incoming paths
-            for (var idx = 0; idx < resPath.if_lists.length; idx++) {
-                var hops = formatPathString(resPath, idx, 'PATH');
-                if (!jPathColors.includes(hops)) {
-                    jPathColors.push(hops);
-                }
-            }
+            addAvailablePaths(data.paths);
 
             jTopo = get_json_path_links(resPath, resCore, resUp, resDown);
             $('#path-info').html(

webapp/static/js/tab-topocola.js

@@ -327,6 +327,17 @@ function update() {
     });
     markerPath.exit().remove();
 
+    svgPath.selectAll("text.latency").remove();
+    var markerText = pathsg.selectAll("path.latency").data(markerLinks)
+    markerText.enter().append("text").attr("dy", ".35em").attr("text-anchor",
+            "middle").style("font-size", "12px").style("fill", "purple").attr(
+            "class", function(d) {
+                return "latency " + d.type;
+            }).text(function(d) {
+        return d.latency ? parseFloat(d.latency).toFixed(1) : '';
+    });
+    markerText.exit().remove();
+
     var node = circlesg.selectAll(".node").data(realGraphNodes, function(d) {
         return d.name;
     })
@@ -399,6 +410,13 @@ function update() {
         path.attr("d", linkStraight);
         markerPath.attr("d", linkArc);
         node.attr("transform", nodeTransform);
+
+        markerText.attr("x", function(d) {
+            return ((d.source.x + d.target.x) / 2);
+        }).attr("y", function(d) {
+            return ((d.source.y + d.target.y) / 2);
+        });
+
     });
 
     colaPath.start(50, 100, 200);
@@ -591,7 +609,7 @@ function addFixedLabel(label, x, y, lastLabel) {
 /*
  * Post-rendering method to draw path arcs for the given path and color.
  */
-function drawPath(res, path, color) {
+function drawPath(res, path, color, latencies) {
     // get the index of the routes to render
     var routes = [];
     if (path < 0) {
@@ -627,12 +645,16 @@ function drawPath(res, path, color) {
     for (var i = 0; i < path_ids.length - 1; i++) {
         // prevent src == dst links from being formed
         if (path_ids[i] != path_ids[i + 1]) {
+            console.warn(latencies)
+            var latInterIntra = latencies ? (latencies[(i * 2) + 1] + latencies[(i * 2) + 2])
+                    : undefined;
             graphPath.links.push({
                 "color" : color,
                 "path" : true,
                 "source" : graphPath["ids"][path_ids[i]],
                 "target" : graphPath["ids"][path_ids[i + 1]],
-                "type" : "PARENT"
+                "type" : "PARENT",
+                "latency" : latInterIntra,
             });
         }
     }

webapp/static/js/webapp.js

@@ -463,11 +463,17 @@ function requestEchoByTime(form_data) {
                         data.runTime = d.graph[i].ActualDuration;
                     }
                     console.info(JSON.stringify(data));
-                    console.info('continous echo', 'duration:',
+                    console.info('continuous echo', 'duration:',
                             d.graph[i].ActualDuration, 'ms');
                     // use the time the test began
                     var time = d.graph[i].Inserted - d.graph[i].ActualDuration;
                     updatePingGraph(chartSE, data, time)
+
+                    // update latency stats, when valid
+                    if (d.graph[i].ResponseTime > 0) {
+                        setEchoLatency(d.graph[i].Path.match("\\[.*]"),
+                                d.graph[i].ResponseTime);
+                    }
                 }
             }
         }
@@ -480,10 +486,10 @@ function requestTraceRouteByTime(form_data) {
         console.info('resp:', JSON.stringify(d));
         if (d != null) {
             if (d.active != null) {
-                $('#switch_cont').prop("checked", d.active);
                 if (d.active) {
                     enableTestControls(false);
                     lockTab("traceroute");
+                    failContinuousOff();
                 } else {
                     enableTestControls(true);
                     releaseTabs();
@@ -498,11 +504,29 @@ function requestTraceRouteByTime(form_data) {
                         // result returned, display it and reset progress
                         handleEndCmdDisplay(d.graph[i].CmdOutput);
                     }
-
-                    console.info('continous traceroute', '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('continuous traceroute', 'duration:',
                             d.graph[i].ActualDuration, 'ms');
+                    // use the time the test began
+                    var time = d.graph[i].Inserted - d.graph[i].ActualDuration;
+                    // updatePingGraph(chartSE, data, time)
 
                     // TODO (mwfarb): implement traceroute graph
+
+                    // update latency stats
+                    setTracerouteLatency(d.graph[i].Path.match("\\[.*]"),
+                            d.graph[i].TrHops);
                 }
             }
         }

webapp/template/index.html

@@ -411,10 +411,21 @@ <h2>SCIONLab Apps</h2>
     </div>
 
     <div id="as-iflist">
-     <h2>
-      Available Paths <span class='badge'>hops</span>
-     </h2>
      <input type="button" value="Update Paths" onclick="requestPaths();" />
+     <!--
+         <input type="button" value="Latency"
+      onclick="surveyLatency();" />
+    -->
+     <p>
+     <div>
+      <span class='path-text'
+       style='background-color: black; font-weight: bold;'>
+       Available Paths</span> <span class='path-text'
+       style='background-color: gray; font-weight: bold;'>Hops</span> <span
+       id='path-lat-title'
+       style='color: purple; position: absolute; right: 5px;'>Latency
+      </span>
+     </div>
      <p>
      <p id="path-info"></p>
     </div>