Small changes in MPTCP graph

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%>/cbi.js?v=git-20.122.32821-5b14298"></script>
-<script type="text/javascript" src="<%=resource%>/seedrandom.js"></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 	= {};
@@ -181,18 +201,6 @@
 				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');
-				*/
-
 				labeldn_scale   = document.getElementById('dnscale');
 				labelup_scale   = document.getElementById('upscale');
 
@@ -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);
@@ -230,7 +238,6 @@
 
 					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);
@@ -274,6 +281,7 @@
 								{
 									dndata[itf][i] = 0;
 								}
+								
 								// Create legend for this connextion
 								var table = document.getElementById('download_stats');
 								var tr = table.insertRow();
@@ -298,6 +306,7 @@
 								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")
 							{
@@ -313,6 +322,7 @@
 								{
 									updata[itf][i] = 0;
 								}
+								
 								// Create legend for this connextion
 								var table = document.getElementById('upload_stats');
 								var tr = table.insertRow();
@@ -337,11 +347,22 @@
 								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);
+										dndata[itf].push(dnsma[itf]((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);
+										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)
 						{
@@ -407,20 +427,25 @@
 								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]);
-
+								if (i > 0)
-								data_rx_avg += dndata[itf][i];
+								{
-								data_tx_avg += updata[itf][i];
+									data_rx_avg = (data_rx_avg + dndata[itf][i]) / 2;
-
+									data_tx_avg = (data_tx_avg + updata[itf][i]) / 2;
-								data_rx_avg = (data_rx_avg / Math.max(dndata[itf].length, 1));
+								}
-								data_tx_avg = (data_tx_avg / Math.max(updata[itf].length, 1));
+								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'))
 							{
@@ -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>