[webapp] Add Multi-Path Colors & bug fixes (#81)

* [webapp] Add Multi-Path Colors & bug fixes

- Adds deterministic colors for each unique path.
- Adds path colors to path selection list.
- Adds/changes path colors to bwtest and echo graph data points.
- Adds path # hops as a badge next to path selection list.
- Adds gray color for graph data points without matching paths.
- Changes to faint-red color for graph error data points, not red.
- Fixes bwtest failure to match interactive paths due to ANSI escapes.
- Fixes bwtest failure to match default path.
- Improves regex cases to record echo errors.
- Adds stderr to command parsing stream with stdout.
- Fixes overlapping continuous switch conditions between user-server.
- Fixes #69.

* removed erroneous html

Author: mwfarb

webapp/lib/bwcont.go

@@ -34,6 +34,7 @@ var reErr3 = `(?i:error:\s*)([\s\S]*)`
 var reErr4 = `(?i:eror:\s*)([\s\S]*)`
 var reErr5 = `(?i:crit:\s*)([\s\S]*)`
 var reUPath = `(?i:using path:)`
+var reSPath = `(?i:path=*)"(.*?)"`
 
 // ExtractBwtestRespData will parse cmd line output from bwtester for adding BwTestItem fields.
 func ExtractBwtestRespData(resp string, d *model.BwTestItem, start time.Time) {
@@ -91,7 +92,11 @@ func ExtractBwtestRespData(resp string, d *model.BwTestItem, start time.Time) {
 			data[dir]["arrival_max"] = re.FindStringSubmatch(r[i])[1]
 		}
 		// save used path (default or interactive) for later user display
-		if pathNext {
+		match, _ := regexp.MatchString(reSPath, r[i])
+		if match {
+			re := regexp.MustCompile(reSPath)
+			path = re.FindStringSubmatch(r[i])[1]
+		} else if pathNext {
 			path = strings.TrimSpace(r[i])
 		}
 		match, _ = regexp.MatchString(reUPath, r[i])

webapp/lib/echocont.go

@@ -76,24 +76,28 @@ func ExtractEchoRespData(resp string, d *model.EchoItem, start time.Time) {
 		match1, _ := regexp.MatchString(reErr1, r[i])
 		match2, _ := regexp.MatchString(reErr2, r[i])
 		match3, _ := regexp.MatchString(reErr3, r[i])
+		match4, _ := regexp.MatchString(reErr4, r[i])
+		match5, _ := regexp.MatchString(reErr5, r[i])
 
 		if match1 {
 			re := regexp.MustCompile(reErr1)
 			err = re.FindStringSubmatch(r[i])[1]
-			//log.Info("match1", "err", err)
 		} else if match2 {
 			re := regexp.MustCompile(reErr2)
 			err = re.FindStringSubmatch(r[i])[1]
 		} else if match3 {
 			re := regexp.MustCompile(reErr3)
 			err = re.FindStringSubmatch(r[i])[1]
+		} else if match4 {
+			re := regexp.MustCompile(reErr4)
+			err = re.FindStringSubmatch(r[i])[1]
+		} else if match5 {
+			re := regexp.MustCompile(reErr5)
+			err = re.FindStringSubmatch(r[i])[1]
 		}
 	}
 	log.Info("app response", "data", data)
 
-	//log.Info("print parsed result", "error", err)
-	//log.Info("print parsed result", "path", path)
-
 	d.RunTime, _ = data["run_time"]
 	d.ResponseTime, _ = data["response_time"]
 	d.PktLoss = int(data["packet_loss"])

webapp/static/css/style-viz.css

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

webapp/static/js/asviz.js

@@ -49,12 +49,6 @@ function getTab() {
  * Creates on-click handler that will draw/hide selected path arcs.
  */
 function setupPathSelection() {
-    // add style to list of paths and segments
-    $('li[seg-type="CORE"]').children().css("color", colorSegCore);
-    $('li[seg-type="DOWN"]').children().css("color", colorSegDown);
-    $('li[seg-type="UP"]').children().css("color", colorSegUp);
-    $('li[seg-type="PATH"]').children().css("color", colorPaths);
-
     // handle path graph-only selection and color
     $("#as-iflist ul > li").click(function() {
         var type = $(this).attr("seg-type");

webapp/static/js/tab-paths.js

@@ -3,6 +3,7 @@ var iaLabels;
 var iaLocations = [];
 var iaGeoLoc;
 var g = {};
+var jPathColors = [];
 
 function setupDebug(src, dst) {
     var src = $('#ia_cli').val();
@@ -15,6 +16,24 @@ function setupDebug(src, dst) {
     }
 }
 
+var cMissingPath = '#cccccc';
+var cPaths = [ "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099",
+        "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499",
+        "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067",
+        "#329262", "#5574a6", "#3b3eac" ];
+function path_colors(n) {
+    return cPaths[n % cPaths.length];
+}
+
+function getPathColor(hops) {
+    var idx = jPathColors.indexOf(hops + '');
+    if (idx < 0) {
+        return cMissingPath;
+    } else {
+        return path_colors(idx);
+    }
+}
+
 function isConfigComplete(data, textStatus, jqXHR) {
     console.log(JSON.stringify(data));
     g['nodes_xml_url'] = data.nodes_xml_url;
@@ -326,13 +345,42 @@ function drawTopo(src, dst, paths, segs) {
     }, width, height);
 }
 
+function formatPathJson(paths, idx) {
+    if (typeof idx === 'undefined') {
+        return '';
+    }
+    var ent = paths[idx].Entry;
+    var hops = ent.Path.Interfaces;
+    var path = "[";
+    for (var i = 0; i < hops.length; i += 2) {
+        var prev = hops[i];
+        var next = hops[i + 1];
+        if (i > 0) {
+            path += ' ';
+        }
+        path += iaRaw2Read(prev.RawIsdas) + ' ' + prev.IfID + '>' + next.IfID;
+        if (i == (hops.length - 2)) {
+            path += ' ' + iaRaw2Read(next.RawIsdas);
+        }
+    }
+    path += "]";
+    return path;
+}
+
 function get_path_html(paths, csegs, usegs, dsegs, show_segs) {
     var html = "<ul class='tree'>";
     for (p in paths) {
-        html += "<li seg-type='PATH' seg-num=" + p + "><a href='#'>PATH "
-                + (parseInt(p) + 1) + "</a>";
+
         var ent = paths[p].Entry;
         var exp = new Date(0);
+        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>";
         exp.setUTCSeconds(ent.Path.ExpTime);
         html += "<ul>";
         html += "<li><a href='#'>Mtu: " + ent.Path.Mtu + "</a>";
@@ -347,9 +395,6 @@ function get_path_html(paths, csegs, usegs, dsegs, show_segs) {
         html += "<li><a href='#'>Port: " + ent.HostInfo.Port + "</a>";
         html += "<li><a href='#'>Expiration: " + exp.toLocaleDateString() + " "
                 + exp.toLocaleTimeString() + "</a>";
-        if_ = ent.Path.Interfaces;
-        var hops = if_.length / 2;
-        html += "<li><a href='#'>Hops: " + hops + "</a>";
         for (i in if_) {
             html += "<li><a href='#'>" + iaRaw2Read(if_[i].RawIsdas) + " ("
                     + if_[i].IfID + ")</a>";
@@ -365,19 +410,33 @@ function get_path_html(paths, csegs, usegs, dsegs, show_segs) {
     return html;
 }
 
+// add style to list of paths and segments
+function getSegColor(type) {
+    if (type == "CORE") {
+        return colorSegCore;
+    } else if (type == "DOWN") {
+        return colorSegDown;
+    } else if (type == "UP") {
+        return colorSegUp;
+    } else {
+        return colorPaths;
+    }
+}
+
 function get_segment_info(segs, type) {
     var html = "";
     for (s in segs.if_lists) {
-        html += "<li seg-type='" + type + "' seg-num=" + s + "><a href='#'>"
-                + type + " SEGMENT " + (parseInt(s) + 1) + "</a>";
         var exp = new Date(0);
         exp.setUTCSeconds(segs.if_lists[s].expTime);
+        if_ = segs.if_lists[s].interfaces;
+        var hops = if_.length / 2;
+        var style = "style='color: " + getSegColor(type) + ";'";
+        html += "<li seg-type='" + type + "' seg-num=" + s + "><a " + style
+                + " href='#'>" + type + " SEGMENT " + (parseInt(s) + 1)
+                + "</a> <span class='badge'>" + hops + "</span>";
         html += "<ul>";
         html += "<li><a href='#'>Expiration: " + exp.toLocaleDateString() + " "
                 + exp.toLocaleTimeString() + "</a>";
-        if_ = segs.if_lists[s].interfaces;
-        var hops = if_.length / 2;
-        html += "<li><a href='#'>Hops: " + hops + "</a>";
         for (i in if_) {
             html += "<li><a href='#'>" + if_[i].ISD + "-" + if_[i].AS + " ("
                     + if_[i].IFID + ")</a>";
@@ -625,6 +684,14 @@ function requestPaths() {
             resUp = resSegs.up_segments;
             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);
+                }
+            }
+
             jTopo = get_json_path_links(resPath, resCore, resUp, resDown);
             $('#path-info').html(
                     get_path_html(data.paths, resCore, resUp, resDown, true));