mptcp/openmptcprouter-feeds
1
0
Fork 0
mirror of https://github.com/Ysurac/openmptcprouter-feeds.git synced 2025-03-09 15:40:03 +00:00
Code Issues Releases Wiki Activity

Small changes in MPTCP graph

Browse source
This commit is contained in:
Ycarus (Yannick Chabanois) 2020-07-10 15:43:46 +02:00
parent f7ce42a6c9
commit b9a973fa0d
1 changed files with 203 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

324
luci-app-mptcp/luasrc/view/mptcp/multipath.htm
View file

@ -3,7 +3,7 @@
-- Copyright 2015 OVH (OverTheBox@ovh.net)
-- Simon Lelievre (simon.lelievre@corp.ovh.com)
-- Sebastien Duponcheel (sebastien.duponcheel@ovh.net)
-- Copyright 2018 Ycarus - Yannick Chabanois (ycarus@zugaina.org)
-- Copyright 2018-2020 Ycarus - Yannick Chabanois (ycarus@zugaina.org)
--
-- This file is part of OverTheBox for OpenWrt.
--
@ -49,8 +49,8 @@
<%+header%>
<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
<script type="text/javascript" src="<%=resource%>/seedrandom.js"></script>
<script type="text/javascript" src="<%=resource%>/cbi.js?v=git-20.122.32821-5b14298"></script>
<script type="text/javascript" src="<%=resource%>/seedrandom.js?v=git-20.122.32821-5b14298"></script>
<script type="text/javascript">//<![CDATA[
function stringToColour(str) {
@ -105,6 +105,24 @@
);
}
/* Smoother */
function simple_moving_averager(name, period) {
var nums = {}
nums[name] = [];
return function(num) {
nums[name].push(num);
if (nums[name].length > period)
nums[name].splice(0,1); // remove the first element of the array
var sum = 0;
for (var i in nums[name])
sum += nums[name][i];
var n = period;
if (nums[name].length < period)
n = nums[name].length;
return(sum/n);
}
}
<% if curifname == "all" then %>
var all = true;
var bwxhr = new XHR();
@ -134,6 +152,8 @@
var label_scale;
var def;
var dntopline;
var uptopline;
var dnPolygons = {};
var dndata = {};
var upPolygons = {};
@ -177,24 +197,12 @@
labeldn_50 = Gdn.getElementById('label_50');
labeldn_75 = Gdn.getElementById('label_75');
labelup_25 = Gup.getElementById('label_25');
labelup_50 = Gup.getElementById('label_50');
labelup_75 = Gup.getElementById('label_75');
/*
label_rx_cur = document.getElementById('rx_bw_cur');
label_rx_avg = document.getElementById('rx_bw_avg');
label_rx_peak = document.getElementById('rx_bw_peak');
label_tx_cur = document.getElementById('tx_bw_cur');
label_tx_avg = document.getElementById('tx_bw_avg');
label_tx_peak = document.getElementById('tx_bw_peak');
*/
labelup_25 = Gup.getElementById('label_25');
labelup_50 = Gup.getElementById('label_50');
labelup_75 = Gup.getElementById('label_75');
labeldn_scale = document.getElementById('dnscale');
labelup_scale = document.getElementById('upscale');
labelup_scale = document.getElementById('upscale');
/* plot horizontal time interval lines */
for (var i = width % (step * 60); i < width; i += step * 60)
@ -204,7 +212,7 @@
linedn.setAttribute('y1', 0);
linedn.setAttribute('x2', i);
linedn.setAttribute('y2', '100%');
linedn.setAttribute('style', 'stroke:black;stroke-width:0.1');
linedn.setAttribute('style', 'stroke:black;stroke-width:0.3');
var textdn = Gdn.createElementNS('http://www.w3.org/2000/svg', 'text');
textdn.setAttribute('x', i + 5);
@ -215,29 +223,28 @@
labeldn_25.parentNode.appendChild(linedn);
labeldn_25.parentNode.appendChild(textdn);
var lineup = Gup.createElementNS('http://www.w3.org/2000/svg', 'line');
lineup.setAttribute('x1', i);
lineup.setAttribute('y1', 0);
lineup.setAttribute('x2', i);
lineup.setAttribute('y2', '100%');
lineup.setAttribute('style', 'stroke:black;stroke-width:0.1');
var lineup = Gup.createElementNS('http://www.w3.org/2000/svg', 'line');
lineup.setAttribute('x1', i);
lineup.setAttribute('y1', 0);
lineup.setAttribute('x2', i);
lineup.setAttribute('y2', '100%');
lineup.setAttribute('style', 'stroke:black;stroke-width:0.1');
var textup = Gup.createElementNS('http://www.w3.org/2000/svg', 'text');
textup.setAttribute('x', i + 5);
textup.setAttribute('y', 15);
textup.setAttribute('style', 'fill:#999999; font-size:9pt');
textup.appendChild(Gup.createTextNode(Math.round((width - i) / step / 60) + 'm'));
labelup_25.parentNode.appendChild(lineup);
labelup_25.parentNode.appendChild(textup);
var textup = Gup.createElementNS('http://www.w3.org/2000/svg', 'text');
textup.setAttribute('x', i + 5);
textup.setAttribute('y', 15);
textup.setAttribute('style', 'fill:#999999; font-size:9pt');
textup.appendChild(Gup.createTextNode(Math.round((width - i) / step / 60) + 'm'));
labelup_25.parentNode.appendChild(lineup);
labelup_25.parentNode.appendChild(textup);
}
labeldn_scale.innerHTML = String.format('<%:(%d minutes window, %d seconds interval)%>', 3, data_wanted / 60);
labelup_scale.innerHTML = String.format('<%:(%d minutes window, %d seconds interval)%>', 3, data_wanted / 60);
labelup_scale.innerHTML = String.format('<%:(%d minutes window, %d seconds interval)%>', 3, data_wanted / 60);
/* render datasets, start update interval */
XHR.poll(3, '<%=build_url("admin/network/mptcp/multipath_bandwidth", all)%>', null,
/* render datasets, start update interval */
XHR.poll(3, '<%=build_url("admin/network/mptcp/multipath_bandwidth", all)%>', null,
function(x, dataarray)
{
var data_max_dnl = 0;
@ -268,12 +275,13 @@
Gdn.getElementById('rx').parentNode.appendChild(dnline);
dnPolygons[itf] = Gdn.getElementById('rx_' + itf);
/* prefill datasets */
/* prefill datasets */
dndata[itf] = [ ];
for (var i = 0; i < data_wanted; i++)
{
dndata[itf][i] = 0;
}
for (var i = 0; i < data_wanted; i++)
{
dndata[itf][i] = 0;
}
// Create legend for this connextion
var table = document.getElementById('download_stats');
var tr = table.insertRow();
@ -298,50 +306,63 @@
var itfpeak = tr.insertCell(6);
itfpeak.setAttribute('id', itf + '_download_peak');
itfpeak.appendChild(document.createTextNode('<%:Peak:%> 0 <%:kbit/s%> (0 <%:kB/s%>)'));
}
if(typeof upPolygons[itf] != "object")
{
var upline = Gup.createElementNS('http://www.w3.org/2000/svg', 'polyline');
upline.setAttributeNS(null, 'id', 'tx_' + itf);
var upline = Gup.createElementNS('http://www.w3.org/2000/svg', 'polyline');
upline.setAttributeNS(null, 'id', 'tx_' + itf);
upline.setAttributeNS(null, 'style', 'fill:' + color + ';fill-opacity:0.4;stroke:black;stroke-width:0.1');
Gup.getElementById('tx').parentNode.appendChild(upline);
upPolygons[itf] = Gup.getElementById('tx_' + itf);
/* prefill datasets */
upPolygons[itf] = Gup.getElementById('tx_' + itf);
/* prefill datasets */
updata[itf] = [ ];
for (var i = 0; i < data_wanted; i++)
{
updata[itf][i] = 0;
}
// Create legend for this connextion
var table = document.getElementById('upload_stats');
var tr = table.insertRow();
tr.setAttribute('id', itf + '_upload');
// Create cells of the table
var itflabel = tr.insertCell(0);
// Create itf legend
var strong = document.createElement('strong')
strong.appendChild(document.createTextNode(itf));
strong.setAttribute('style', 'border-bottom:2px solid ' + color);
itflabel.appendChild(strong);
for (var i = 0; i < data_wanted; i++)
{
updata[itf][i] = 0;
}
// Create legend for this connextion
var table = document.getElementById('upload_stats');
var tr = table.insertRow();
tr.setAttribute('id', itf + '_upload');
// Create cells of the table
var itflabel = tr.insertCell(0);
// Create itf legend
var strong = document.createElement('strong')
strong.appendChild(document.createTextNode(itf));
strong.setAttribute('style', 'border-bottom:2px solid ' + color);
itflabel.appendChild(strong);
// Create label for stats
tr.insertCell(1).appendChild(document.createTextNode('<%:Current:%>'));
var itfcur = tr.insertCell(2);
itfcur.setAttribute('id', itf + '_upload_cur');
itfcur.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
var itfcur = tr.insertCell(2);
itfcur.setAttribute('id', itf + '_upload_cur');
itfcur.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
tr.insertCell(3).appendChild(document.createTextNode('<%:Average:%>'));
var itfavg = tr.insertCell(4);
itfavg.setAttribute('id', itf + '_upload_avg');
itfavg.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
var itfavg = tr.insertCell(4);
itfavg.setAttribute('id', itf + '_upload_avg');
itfavg.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
tr.insertCell(5).appendChild(document.createTextNode('<%:Peak:%>'));
var itfpeak = tr.insertCell(6);
itfpeak.setAttribute('id', itf + '_upload_peak');
itfpeak.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
var itfpeak = tr.insertCell(6);
itfpeak.setAttribute('id', itf + '_upload_peak');
itfpeak.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
}
}
var dnsma = {};
var upsma = {};
for (var itf in data)
{
if(!dnsma[itf])
{
dnsma[itf] = simple_moving_averager('down_'+itf, 15);
}
if(!upsma[itf])
{
upsma[itf] = simple_moving_averager('up_'+itf, 15);
}
for (var i = data_stamp ? 0 : 1; i < data[itf].length; i++)
{
/* skip overlapping entries */
@ -354,8 +375,8 @@
var time_delta = data[itf][i][TIME] - data[itf][i-1][TIME];
if (time_delta)
{
dndata[itf].push((data[itf][i][RXB] - data[itf][i-1][RXB]) / time_delta);
updata[itf].push((data[itf][i][TXB] - data[itf][i-1][TXB]) / time_delta);
dndata[itf].push(dnsma[itf]((data[itf][i][RXB] - data[itf][i-1][RXB]) / time_delta));
updata[itf].push(upsma[itf]((data[itf][i][TXB] - data[itf][i-1][TXB]) / time_delta));
}
}
}
@ -363,7 +384,6 @@
dndata[itf] = dndata[itf].slice(dndata[itf].length - data_wanted, dndata[itf].length);
updata[itf] = updata[itf].slice(updata[itf].length - data_wanted, updata[itf].length);
}
/* remember current timestamp, calculate horizontal scale */
for (var itf in data)
{
@ -376,16 +396,16 @@
// intialize upline and downline datas for download and upload
var uplineDnl = { };
var downlineDnl = { };
var uplineUpl = { };
var downlineUpl = { };
var uplineUpl = { };
var downlineUpl = { };
// fetch upline and downline datas
var toadditf = [ ];
for (var itf in data)
{
uplineDnl[itf] = [ ];
downlineDnl[itf]= [ ];
uplineUpl[itf] = [ ];
downlineUpl[itf]= [ ];
uplineUpl[itf] = [ ];
downlineUpl[itf]= [ ];
// build point sets
var data_tx_avg;
var data_rx_avg;
@ -407,46 +427,51 @@
uplineUpl[itf][i] = updata[itf][i] + tx_bot;
data_tx_peak = Math.max(data_tx_peak, updata[itf][i]);
data_max_upl = Math.max(data_max_upl, uplineUpl[itf][i]);
data_rx_avg += dndata[itf][i];
data_tx_avg += updata[itf][i];
data_rx_avg = (data_rx_avg / Math.max(dndata[itf].length, 1));
data_tx_avg = (data_tx_avg / Math.max(updata[itf].length, 1));
if (i > 0)
{
data_rx_avg = (data_rx_avg + dndata[itf][i]) / 2;
data_tx_avg = (data_tx_avg + updata[itf][i]) / 2;
}
else
{
data_rx_avg = dndata[itf][i];
data_tx_avg = updata[itf][i];
}
if(toadditf.length)
{
downlineDnl[itf][i] = uplineDnl[toadditf[toadditf.length-1]][i];
downlineUpl[itf][i] = uplineUpl[toadditf[toadditf.length-1]][i];
}
}
toadditf.push(itf);
// Update stats labels
if(document.getElementById(itf + '_download_cur'))
{
var label = document.getElementById(itf + '_download_cur');
label.innerHTML = bandwidth_label(dndata[itf][dndata[itf].length-1], true);
}
if(document.getElementById(itf + '_upload_cur'))
{
if(document.getElementById(itf + '_upload_cur'))
{
var label = document.getElementById(itf + '_upload_cur');
label.innerHTML = bandwidth_label(updata[itf][updata[itf].length-1], true);
}
if(label = document.getElementById(itf + '_download_avg'))
{
{
label.innerHTML = bandwidth_label(data_rx_avg, true);
}
if(label = document.getElementById(itf + '_upload_avg'))
{
}
if(label = document.getElementById(itf + '_upload_avg'))
{
label.innerHTML = bandwidth_label(data_tx_avg, true);
}
if(document.getElementById(itf + '_download_peak'))
{
{
var label = document.getElementById(itf + '_download_peak');
label.innerHTML = bandwidth_label(data_rx_peak, true);
}
}
if(document.getElementById(itf + '_upload_peak'))
{
{
var label = document.getElementById(itf + '_upload_peak');
label.innerHTML = bandwidth_label(data_tx_peak, true);
}
@ -474,37 +499,37 @@
pt_rx += ' ' + x + ',' + y_rx;
pt_tx += ' ' + x + ',' + y_tx;
}
// draw last tangant point in upline graph
pt_rx += ' ' + width + ',' + y_rx;
pt_rx += ' ' + width + ',' + height;
// draw last tangant point in upline graph
pt_rx += ' ' + width + ',' + y_rx;
pt_rx += ' ' + width + ',' + height;
pt_tx += ' ' + width + ',' + y_tx;
pt_tx += ' ' + width + ',' + height;
pt_tx += ' ' + width + ',' + y_tx;
pt_tx += ' ' + width + ',' + height;
for (var i = downlineDnl[itf].length - 1; i >= 0; i--)
{
var x = i * step;
for (var i = downlineDnl[itf].length - 1; i >= 0; i--)
{
var x = i * step;
y_rx = height - Math.floor((downlineDnl[itf][i] - 10) * data_scale_dnl);
y_tx = height - Math.floor((downlineUpl[itf][i] - 10) * data_scale_upl);
// recreate tangant point in bottom line graph
if(i == downlineDnl[itf].length - 1)
{
pt_rx += ' ' + width + ',' + height;
pt_rx += ' ' + width + ',' + y_rx;
y_rx = height - Math.floor((downlineDnl[itf][i] - 10) * data_scale_dnl);
y_tx = height - Math.floor((downlineUpl[itf][i] - 10) * data_scale_upl);
// recreate tangant point in bottom line graph
if(i == downlineDnl[itf].length - 1)
{
pt_rx += ' ' + width + ',' + height;
pt_rx += ' ' + width + ',' + y_rx;
pt_tx += ' ' + width + ',' + height;
pt_tx += ' ' + width + ',' + y_tx;
}
pt_tx += ' ' + width + ',' + height;
pt_tx += ' ' + width + ',' + y_tx;
}
pt_rx += ' ' + x + ',' + y_rx;
pt_tx += ' ' + x + ',' + y_tx;
}
// go back to right bottom corner to correctly fill polyline
pt_tx += ' ' + 0 + ',' + height;
pt_tx += ' ' + width + ',' + height;
pt_rx += ' ' + 0 + ',' + height;
pt_rx += ' ' + width + ',' + height;
pt_rx += ' ' + x + ',' + y_rx;
pt_tx += ' ' + x + ',' + y_tx;
}
// go back to right bottom corner to correctly fill polyline
pt_tx += ' ' + 0 + ',' + height;
pt_tx += ' ' + width + ',' + height;
pt_rx += ' ' + 0 + ',' + height;
pt_rx += ' ' + width + ',' + height;
// Draw polygon
dnPolygons[itf].setAttribute('points', pt_rx);
@ -518,11 +543,62 @@
labelup_50.firstChild.data = bandwidth_label(1.1 * 0.50 * data_max_upl);
labelup_75.firstChild.data = bandwidth_label(1.1 * 0.75 * data_max_upl);
}
/* now draw top line */
var keys = Object.keys(uplineDnl);
if (keys.length)
{
var itf = keys[keys.length - 1];
if (typeof dntopline != "object")
{
dntopline = Gdn.getElementById('rx');
dntopline.setAttributeNS(null, 'style', 'stroke:DimGray;stroke-width:1;stroke-linecap="round";fill:;fill-opacity:0;');
/* Move line on top */
var father = dntopline.parentNode;
father.removeChild(dntopline);
father.appendChild(dntopline);
}
if (typeof uptopline != "object")
{
uptopline = Gup.getElementById('tx');
uptopline.setAttributeNS(null, 'style', 'stroke:DimGray;stroke-width:1;stroke-linecap="round";fill:;fill-opacity:0;');
/* Move line on top */
var father = uptopline.parentNode;
father.removeChild(uptopline);
father.appendChild(uptopline);
}
var y_rx = 0;
var y_tx = 0;
/* plot data */
var pt_rx = '0,' + height;
var pt_tx = '0,' + height;
// draw polygon
for (var i = 0; i < uplineDnl[itf].length; i++)
{
var x = i * step;
y_rx = height - Math.floor((uplineDnl[itf][i]) * data_scale_dnl);
y_tx = height - Math.floor((uplineUpl[itf][i]) * data_scale_upl);
pt_rx += ' ' + x + ',' + y_rx;
pt_tx += ' ' + x + ',' + y_tx;
}
// draw last tangant point in upline graph
pt_rx += ' ' + width + ',' + y_rx;
pt_rx += ' ' + width + ',' + height;
pt_tx += ' ' + width + ',' + y_tx;
pt_tx += ' ' + width + ',' + height;
dntopline.setAttribute('points', pt_rx);
uptopline.setAttribute('points', pt_tx);
}
}
);
XHR.run();
//XHR.run();
}
}, 2000
}, 1000
<% else %>
var bwxhr = new XHR();
@ -766,6 +842,12 @@
}, 2000
<% end %>
);
// Set 1h reload page timer because of suspected SVG graph memmory leak
window.setTimeout(function()
{
if (activating == false)
location.reload(true)
}, 3600000)
//]]></script>
<h2><a id="content" name="content"><%:Realtime Traffic%></a></h2>