From aadf62caf021cfb191908bbb44b22246f3b60642 Mon Sep 17 00:00:00 2001
From: "Ycarus (Yannick Chabanois)" <ycarus@zugaina.org>
Date: Thu, 10 Sep 2020 21:06:16 +0200
Subject: [PATCH] Add total to bandwidth graph

---
 luci-app-mptcp/luasrc/controller/mptcp.lua    | 71 ++++++++++++++++
 .../luasrc/view/mptcp/multipath.htm           | 83 ++++++++++++++-----
 2 files changed, 133 insertions(+), 21 deletions(-)

diff --git a/luci-app-mptcp/luasrc/controller/mptcp.lua b/luci-app-mptcp/luasrc/controller/mptcp.lua
index df33186e4..38eae6c4e 100644
--- a/luci-app-mptcp/luasrc/controller/mptcp.lua
+++ b/luci-app-mptcp/luasrc/controller/mptcp.lua
@@ -34,9 +34,27 @@ function interface_bandwidth(iface)
 	end
 end
 
+
+function string.split(input, delimiter)
+	input = tostring(input)
+	delimiter = tostring(delimiter)
+	if (delimiter=='') then return false end
+	local pos,arr = 0, {}
+	-- for each divider found
+	for st,sp in function() return string.find(input, delimiter, pos, true) end do
+		table.insert(arr, string.sub(input, pos, st - 1))
+		pos = sp + 1
+	end
+	table.insert(arr, string.sub(input, pos))
+	return arr
+end
+
 function multipath_bandwidth()
 	local result = { };
 	local uci = luci.model.uci.cursor()
+	local res={ };
+	local str="";
+	local tmpstr="";
 
 	uci:foreach("network", "interface", function(s)
 		local intname = s[".name"]
@@ -64,6 +82,59 @@ function multipath_bandwidth()
 		end
 	end)
 
+	res["total"]={ };
+	for i=1,60 do
+		res["total"][i]={}
+		for j=1,5 do
+			res["total"][i][j]=0
+		end
+	end
+
+	for key,value in pairs(result) do
+		res[key]={}
+		value=(string.gsub(value, "^%[%[", ""))
+		value=(string.gsub(value, "%]%]", ""))
+		local temp1 = string.split(value, "],")
+		res[key][1]=temp1[1]
+		for i=2,60 do
+			res[key][i]={}
+			res[key][i]=(string.gsub(temp1[i], "%[", " "))
+		end
+		for i=1,60 do
+			res[key][i] = string.split(res[key][i], ",")
+			for j=1,5 do
+				if "string"== type(res[key][i][j]) then
+					res[key][i][j]= tonumber(res[key][i][j])
+				end
+				if "string"==type(res["total"][i][j]) then
+					res["total"][i][j]= tonumber(res["total"][i][j])
+				end
+				if j ==1 then
+					res["total"][i][j] = res[key][i][j]
+				else
+					res["total"][i][j] = res["total"][i][j] + res[key][i][j]
+				end
+			end
+		end
+	end
+	for i=1,60 do
+		for j=1,5 do
+			if "number"== type(res["total"][i][j]) then
+				res["total"][i][j]= tostring(res["total"][i][j])
+			end
+		end
+	end
+	for i=1,60 do
+		if i == 60 then
+			tmpstr = "["..table.concat(res["total"][i], ",")
+		else
+			tmpstr = "["..table.concat(res["total"][i], ",").."],"
+		end
+		str  = str..tmpstr
+	end
+	str  = "["..str.."]]"
+	result["total"]=str
+
 	luci.http.prepare_content("application/json")
 	luci.http.write_json(result)
 end
diff --git a/luci-app-mptcp/luasrc/view/mptcp/multipath.htm b/luci-app-mptcp/luasrc/view/mptcp/multipath.htm
index c8b427cc1..dd4877f40 100644
--- a/luci-app-mptcp/luasrc/view/mptcp/multipath.htm
+++ b/luci-app-mptcp/luasrc/view/mptcp/multipath.htm
@@ -54,6 +54,8 @@
 <script type="text/javascript">//<![CDATA[
 
 	function stringToColour(str) {
+		if(str == "total")
+			return "OrangeRed";
 		if(str == "wan")
 			return "FireBrick";
 		if(str == "wan1")
@@ -259,6 +261,7 @@
 						var data_tx_peak = 0;
 
 						var data = {};
+						var pre_itf = "";
 
 						for(var itf in dataarray)
 						{
@@ -271,7 +274,15 @@
 								// Create a new polygon to draw the bandwith
 								var dnline = Gdn.createElementNS('http://www.w3.org/2000/svg', 'polyline');
 								dnline.setAttributeNS(null, 'id', 'rx_' + itf);
-								dnline.setAttributeNS(null, 'style', 'fill:' + color + ';fill-opacity:0.4;stroke:black;stroke-width:0.1');
+								if (itf != "total")
+								{
+									dnline.setAttributeNS(null, 'style', 'fill:' + color + ';fill-opacity:0.4;stroke:black;stroke-width:0.1');
+								}
+								else
+								{
+									//dnline.setAttributeNS(null, 'style', 'fill: none;stroke:OrangeRed;stroke-width:1');
+									dnline.setAttributeNS(null, 'style', 'fill: none;stroke:none');
+								}
 								Gdn.getElementById('rx').parentNode.appendChild(dnline);
 
 								dnPolygons[itf] = Gdn.getElementById('rx_' + itf);
@@ -284,11 +295,18 @@
 								
 								// Create legend for this connextion
 								var table = document.getElementById('download_stats');
-								var tr = table.insertRow();
+								if (pre_itf == "total")
+								{
+									var tr = table.insertRow(0);
+								}
+								else
+								{
+									var tr = table.insertRow();
+								}
 								tr.setAttribute('id', itf + '_download');
 								// Create cells of the table
 								var itflabel = tr.insertCell(0);
-								// Crete itf legend
+								// Create itf legend
 								var strong = document.createElement('strong')
 								strong.appendChild(document.createTextNode(itf));
 								strong.setAttribute('style', 'border-bottom:2px solid ' + color);
@@ -312,7 +330,15 @@
 							{
 								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');
+								if (itf != "total")
+								{
+									upline.setAttributeNS(null, 'style', 'fill:' + color + ';fill-opacity:0.4;stroke:black;stroke-width:0.1');
+								}
+								else
+								{
+									//upline.setAttributeNS(null, 'style', 'fill:none;stroke:OrangeRed;stroke-width:1');
+									upline.setAttributeNS(null, 'style', 'fill:none;stroke:none');
+								}
 								Gup.getElementById('tx').parentNode.appendChild(upline);
 
 								upPolygons[itf] = Gup.getElementById('tx_' + itf);
@@ -325,7 +351,16 @@
 								
 								// Create legend for this connextion
 								var table = document.getElementById('upload_stats');
-								var tr = table.insertRow();
+								
+								if (pre_itf == "total")
+								{
+									var tr = table.insertRow(0);
+								}
+								else
+								{
+								
+									var tr = table.insertRow();
+								}
 								tr.setAttribute('id', itf + '_upload');
 								// Create cells of the table
 								var itflabel = tr.insertCell(0);
@@ -347,8 +382,8 @@
 								var itfpeak  = tr.insertCell(6);
 								itfpeak.setAttribute('id', itf + '_upload_peak');
 								itfpeak.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
-                                                                
 							}
+							if (pre_itf != "total") pre_itf = itf;
 						}
 
 						var dnsma = {};
@@ -415,11 +450,15 @@
 							{
 								var rx_bot=0;
 								var tx_bot=0;
+								if (itf != "total")
+								{
 								for(var j=0; j < toadditf.length; j++)
 								{
+									if (toadditf[j] == "total") continue;
 									rx_bot += dndata[toadditf[j]][i];
 									tx_bot += updata[toadditf[j]][i];
 								}
+								}
 								// set upline of the interface
 								uplineDnl[itf][i] = dndata[itf][i] + rx_bot;
 								data_rx_peak = Math.max(data_rx_peak, dndata[itf][i]);
@@ -439,11 +478,14 @@
 								}
 								if(toadditf.length)
 								{
+									if (toadditf[toadditf.length-1] != "total")
+									{
 									downlineDnl[itf][i] = uplineDnl[toadditf[toadditf.length-1]][i];
 									downlineUpl[itf][i] = uplineUpl[toadditf[toadditf.length-1]][i];
+									}
 								}
+								
 							}
-							
 							toadditf.push(itf);
 							
 							// Update stats labels
@@ -481,6 +523,7 @@
 
 						for (var itf in uplineDnl)
 						{
+							//if (itf == "total") continue;
 							var y_rx = 0;
 							var y_tx = 0;
 
@@ -566,22 +609,20 @@
 								father.removeChild(uptopline);
 								father.appendChild(uptopline);
 							}
-                                                        var y_rx = 0;
-                                                        var y_tx = 0;
+							var y_rx = 0;
+							var y_tx = 0;
 
-                                                        /* plot data */
-                                                        var pt_rx = '0,' + height;
-                                                        var pt_tx = '0,' + height;
+							/* 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;
+							// 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