[WIP] traceroute gui [webapp]

Author: mwfarb

webapp/config/servers_default.json

@@ -96,5 +96,31 @@
    "addr": "203.230.60.98",
    "port": 40002
   }
+ ],
+ "traceroute": [
+  {
+   "name": "17-ffaa:0:1107 Attachment Point",
+   "isdas": "17-ffaa:0:1107",
+   "addr": "192.33.93.195",
+   "port": 40002
+  },
+  {
+   "name": "18-ffaa:0:1202 Attachment Point",
+   "isdas": "18-ffaa:0:1202",
+   "addr": "128.105.21.208",
+   "port": 40002
+  },
+  {
+   "name": "19-ffaa:0:1303 Attachment Point",
+   "isdas": "19-ffaa:0:1303",
+   "addr": "141.44.25.144",
+   "port": 40002
+  },
+  {
+   "name": "20-ffaa:0:1404 Attachment Point",
+   "isdas": "20-ffaa:0:1404",
+   "addr": "203.230.60.98",
+   "port": 40002
+  }
  ]
 }

webapp/lib/config.go

@@ -101,6 +101,9 @@ func GenServerNodeDefaults(srcpath string) {
 		serIaDef + `", "addr":"` + serDefAddr + `","port":` + serPortDefSen + `}], `)
 	jsonBuf = append(jsonBuf, json...)
 	json = []byte(`"echo": [{"name":"localhost","isdas":"` +
+		serIaDef + `", "addr":"` + serDefAddr + `","port":` + serPortDefSen + `}], `)
+	jsonBuf = append(jsonBuf, json...)
+	json = []byte(`"traceroute": [{"name":"localhost","isdas":"` +
 		serIaDef + `", "addr":"` + serDefAddr + `","port":` + serPortDefSen + `}]`)
 	jsonBuf = append(jsonBuf, json...)
 

webapp/static/js/webapp.js

@@ -119,13 +119,13 @@ function showOnlyConsoleGraphs(activeApp) {
     $('#echo-continuous').css("display",
             (activeApp == "echo") ? "block" : "none");
     var isConsole = (activeApp == "bwtester" || activeApp == "camerapp"
-            || activeApp == "sensorapp" || activeApp == "echo");
+            || activeApp == "sensorapp" || activeApp == "echo" || activeApp == "traceroute");
     $('.stdout').css("display", isConsole ? "block" : "none");
 }
 
 function handleSwitchTabs() {
     var activeApp = $('.nav-tabs .active > a').attr('name');
-    var isCont = (activeApp == "bwtester" || activeApp == "echo");
+    var isCont = (activeApp == "bwtester" || activeApp == "echo" || activeApp == "traceroute");
     enableContControls(isCont);
     // show/hide graphs for bwtester
     showOnlyConsoleGraphs(activeApp);
@@ -364,6 +364,8 @@ function manageTestData() {
             requestBwTestByTime(form_data);
         } else if (activeApp == "echo") {
             requestEchoByTime(form_data);
+        } else if (activeApp == "traceroute") {
+            requestTraceRouteByTime(form_data);
         }
         lastTimeBwDb = now;
     }, dataIntervalMs);
@@ -467,6 +469,42 @@ function requestEchoByTime(form_data) {
     });
 }
 
+function requestTraceRouteByTime(form_data) {
+    $.post("/gettraceroutebytime", form_data, function(json) {
+        var d = JSON.parse(json);
+        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");
+                } else {
+                    enableTestControls(true);
+                    releaseTabs();
+                    clearInterval(intervalGraphData);
+                }
+            }
+            if (d.graph != null) {
+                // write data on graph
+                for (var i = 0; i < d.graph.length; i++) {
+                    if (d.graph[i].CmdOutput != null
+                            && d.graph[i].CmdOutput != "") {
+                        // result returned, display it and reset progress
+                        handleEndCmdDisplay(d.graph[i].CmdOutput);
+                    }
+
+                    console.info(JSON.stringify(data));
+                    console.info('continous traceroute', 'duration:',
+                            d.graph[i].ActualDuration, 'ms');
+
+                    // TODO (mwfarb): implement traceroute graph
+                }
+            }
+        }
+    });
+}
+
 function refreshTickData(chart, newTime) {
     var x = newTime, y = null;
     var series0 = chart.series[0];
@@ -587,7 +625,8 @@ function command(continuous) {
         name : "apps",
         value : activeApp
     });
-    if (activeApp == "bwtester" || activeApp == "echo") {
+    if (activeApp == "bwtester" || activeApp == "echo"
+            || activeApp == "traceroute") {
         // add extra bwtester options required
         form_data.push({
             name : "continuous",
@@ -639,6 +678,8 @@ function command(continuous) {
         } else if (activeApp == "echo") {
             // check for usable data for graphing
             handleContResponse(resp, continuous, startTime);
+        } else if (activeApp == "traceroute") {
+            handleContResponse(resp, continuous, startTime);
         } else {
             handleGeneralResponse();
         }
@@ -685,13 +726,15 @@ function lockTab(href) {
     enableTab("camerapp", "camerapp" == href);
     enableTab("sensorapp", "sensorapp" == href);
     enableTab("echo", "echo" == href);
+    enableTab("traceroute", "traceroute" == href);
 }
 
 function releaseTabs() {
     enableTab("bwtester", true);
     enableTab("camerapp", true);
     enableTab("sensorapp", true);
     enableTab("echo", true);
+    enableTab("traceroute", true);
 }
 
 function enableTab(href, enable) {

webapp/template/index.html

@@ -69,6 +69,7 @@ <h2>SCIONLab Apps</h2>
       <li><a data-toggle="tab" name="camerapp" href="#camerapp">camerapp</a></li>
       <li><a data-toggle="tab" name="sensorapp" href="#sensorapp">sensorapp</a></li>
       <li><a data-toggle="tab" name="echo" href="#echo">echo</a></li>
+      <li><a data-toggle="tab" name="traceroute" href="#traceroute">traceroute</a></li>
      </ul>
      <div id="tab-content-apps" class="tab-content">
 
@@ -265,6 +266,28 @@ <h2>SCIONLab Apps</h2>
 
       </div>
 
+
+      <!-- SCMP TRACEROUTE APP CONTENT -->
+      <div id="traceroute" class="tab-pane fade">
+
+       <div id="svg-sc" class="bwtest-svg">
+        <svg class="svg-dials" viewBox="0 0 300 150">
+        <line x1="290" y1="42" x2="21" y2="42" stroke-width="70"
+          marker-end="url(#sc-arrowhead)" />
+        </svg>
+       </div>
+
+       <span id="traceroute_text"></span><br> Interval: <input
+        name="traceroute_sec" id="traceroute_sec" type="number"
+        style="width: 45px;" min="1" max="10" value="1"> sec.
+       Additional Argument: <span
+        tooltip="Use the equal sign, '=', between argument and parameter."><input
+        type="text" id="addl_opttr" name="addl_opttr"
+        style="width: 200px;"> </span>
+
+      </div>
+
+
      </div>
 
     </div>