From b9a973fa0d61f410dd7466861fac06ca1b2865d8 Mon Sep 17 00:00:00 2001
From: "Ycarus (Yannick Chabanois)" <ycarus@zugaina.org>
Date: Fri, 10 Jul 2020 15:43:46 +0200
Subject: [PATCH] Small changes in MPTCP graph

---
 .../luasrc/view/mptcp/multipath.htm           | 324 +++++++++++-------
 1 file changed, 203 insertions(+), 121 deletions(-)

diff --git a/luci-app-mptcp/luasrc/view/mptcp/multipath.htm b/luci-app-mptcp/luasrc/view/mptcp/multipath.htm
index ed08ca03a..c8b427cc1 100644
--- a/luci-app-mptcp/luasrc/view/mptcp/multipath.htm
+++ b/luci-app-mptcp/luasrc/view/mptcp/multipath.htm
@@ -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>