various bug fixes for iperf display
diff --git a/web/ons-demo/js/flows.js b/web/ons-demo/js/flows.js
index f5ce43c..9f72fe2 100644
--- a/web/ons-demo/js/flows.js
+++ b/web/ons-demo/js/flows.js
@@ -1,6 +1,9 @@
function startFlowAnimation(flow) {
- if (flow.select('animate').empty()) {
- flow.append('svg:animate')
+// console.log('starting animation for flow: ' + flow.flowId);
+
+ var flowSelection = d3.select(document.getElementById(makeFlowKey(flow)));
+ if (flowSelection.select('animate').empty()) {
+ flowSelection.append('svg:animate')
.attr('attributeName', 'stroke-dashoffset')
.attr('attributeType', 'xml')
.attr('from', '500')
@@ -11,7 +14,8 @@
}
function stopFlowAnimation(flow) {
- flow.select('animate').remove();
+ var flowSelection = d3.select(document.getElementById(makeFlowKey(flow)));
+ flowSelection.select('animate').remove();
}
@@ -24,7 +28,9 @@
}
});
- var flows = flowLayer.selectAll('.flow').data(topologyFlows);
+ var flows = flowLayer.selectAll('.flow').data(topologyFlows, function (d) {
+ return d.flowId;
+ });
flows.enter().append("svg:path").attr('class', 'flow')
.attr('stroke-dasharray', '4, 10')
diff --git a/web/ons-demo/js/iperf.js b/web/ons-demo/js/iperf.js
index c2abaa7..8b1db26 100644
--- a/web/ons-demo/js/iperf.js
+++ b/web/ons-demo/js/iperf.js
@@ -1,8 +1,8 @@
var enableIPerfLog = false;
-function iperfLog(message) {
+function iperfLog(message, flow) {
if (enableIPerfLog) {
- console.log(message);
+ console.log('flow: ' + flow.flowId + '===>' + message);
}
}
@@ -11,11 +11,16 @@
}
function clearIPerf(flow) {
- iperfLog('clearing iperf interval for: ' + flow.flowId);
+ iperfLog('clearing iperf interval for: ' + flow.flowId, flow);
clearTimeout(flow.iperfFetchTimeout);
delete flow.iperfFetchTimeout;
clearInterval(flow.iperfDisplayInterval);
delete flow.iperfDisplayInterval;
+ clearTimeout(flow.animationTimeout);
+ delete flow.animationTimeout;
+ stopFlowAnimation(flow);
+ delete flow.iperfData.timestamp;
+
delete flow.iperfData;
}
@@ -70,11 +75,14 @@
}
if (flow.flowId) {
- iperfLog('starting iperf for: ' + flow.flowId);
+ iperfLog('starting iperf', flow);
startIPerf(flow, duration, updateRate/interval);
flow.iperfDisplayInterval = setInterval(function () {
if (flow.iperfData) {
var iperfPath = d3.select(document.getElementById(makeSelectedFlowKey(flow))).select('path');
+ flow.iperfData.samples.sort(function (a, b) {
+ return a.time - b.time;
+ });
iperfPath.attr('d', makeGraph(flow.iperfData));
}
@@ -86,9 +94,17 @@
samples: []
}
+ function resetFlowAnimationTimeout() {
+ clearTimeout(flow.animationTimeout);
+ // kill the animation if iperfdata stops flowing
+ flow.animationTimeout = setTimeout(function () {
+ stopFlowAnimation(flow);
+ }, updateRate*1.5);
+ }
+
var lastTime;
function fetchData() {
- iperfLog('Requesting iperf data');
+ iperfLog('Requesting iperf data', flow);
var fetchTime = Date.now();
getIPerfData(flow, function (data) {
var requestTime = Date.now() - fetchTime;
@@ -96,35 +112,29 @@
if (requestTime > 1000) {
requestTimeMessage = requestTimeMessage.toUpperCase();
}
- iperfLog(requestTimeMessage);
+ iperfLog(requestTimeMessage, flow);
if (!flow.iperfData) {
- iperfLog('iperf session closed for flow: ' + flow.id);
+ iperfLog('iperf session closed', flow);
return;
}
try {
var iperfData = JSON.parse(data);
-// iperfLog(iperfData.timestamp);
+// iperfLog(iperfData.timestamp, flow);
// if the data is fresh
if (!(flow.iperfData.timestamp && iperfData.timestamp != flow.iperfData.timestamp)) {
if (!flow.iperfData.timestamp) {
- iperfLog('received first iperf buffer');
+ iperfLog('received first iperf buffer', flow);
} else {
- iperfLog('received duplicate iperf buffer with timestamp: ' + iperfData.timestamp);
+ iperfLog('received duplicate iperf buffer with timestamp: ' + iperfData.timestamp, flow);
}
} else {
- iperfLog('received new iperf buffer with timstamp: ' + iperfData.timestamp);
-
- var flowSelection = d3.select(document.getElementById(makeFlowKey(flow)));
- startFlowAnimation(flowSelection);
- clearTimeout(animationTimeout);
- // kill the animation if iperfdata stops flowing
- animationTimeout = setTimeout(function () {
- stopFlowAnimation(flowSelection);
- }, updateRate*1.5);
+ iperfLog('received new iperf buffer with timstamp: ' + iperfData.timestamp, flow);
+ startFlowAnimation(flow);
+ resetFlowAnimationTimeout();
var endTime = Math.floor(iperfData['end-time']*10)/10;
@@ -135,9 +145,9 @@
flow.iperfData.localNow = Date.now();
}
- iperfLog('iperf buffer start time: ' + startTime);
+ iperfLog('iperf buffer start time: ' + startTime, flow);
if (lastTime && (startTime - lastTime) > updateRate/1000) {
- iperfLog('iperf buffer gap: ' + (startTime - lastTime) );
+ iperfLog('iperf buffer gap: ' + (startTime - lastTime), flow);
}
lastTime = startTime;
@@ -149,7 +159,7 @@
// if the client gets too out of sync, resynchronize
var clientNow = flow.iperfData.startTime + (Date.now() - flow.iperfData.localNow)/1000;
if (Math.abs(clientNow - startTime) > (updateRate/1000) * 2) {
- iperfLog('resynchronizing now: ' + clientNow + ' => ' + startTime);
+ iperfLog('resynchronizing now: ' + clientNow + ' => ' + startTime, flow);
flow.iperfData.startTime = startTime;
flow.iperfData.localNow = Date.now();
}
@@ -166,10 +176,10 @@
}
flow.iperfData.timestamp = iperfData.timestamp;
} catch (e) {
- iperfLog('bad iperf data: ' + data);
+ iperfLog('bad iperf data: ' + data, flow);
}
flow.iperfFetchTimeout = setTimeout(fetchData, updateRate*.25); // over sample to avoid gaps
-// iperfLog(data);
+// iperfLog(data, flow);
});
}
fetchData();