add a total polyline to accumulative total traffic of all interfaces and display in the graph

luci-app-mptcp/luasrc/controller/mptcp.lua

@@ -28,18 +28,99 @@ 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 multipath="";
+	local proto="";	
+	local res={ };
+	local str="";
+    local tmpstr="";
 	
 	for _, dev in luci.util.vspairs(luci.sys.net.devices()) do
 		if dev ~= "lo" then
-			local multipath = uci:get("network", dev, "multipath")
+		    if dev == "eth0.2"	then			
+			     multipath = uci:get("network", "wan", "multipath")
+			elseif dev == "4g-wwan0" then
+			     multipath = uci:get("network", "wwan0", "multipath")
+            else 			
+			     multipath = uci:get("network", dev, "multipath")
+			end
 			if multipath == "on" or multipath == "master" or multipath == "backup" or multipath == "handover" then
 				result[dev] = "[" .. string.gsub((luci.sys.exec("luci-bwc -i %q 2>/dev/null" % dev)), '[\r\n]', '') .. "]"			
 			end
 		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)

luci-app-mptcp/luasrc/view/mptcp/multipath.htm

@@ -25,9 +25,17 @@
 
 	local dev
 	local devices = { "all" }
+	local multipath = ""
+	
 	for _, dev in luci.util.vspairs(luci.sys.net.devices()) do
 		if dev ~= "lo" and not ntm:ignore_interface(dev) then
-			local multipath = uci:get("network", dev, "multipath")
+		    if dev == "eth0.2" then
+			    multipath = uci:get("network", "wan", "multipath")
+			elseif dev == "4g-wwan0" then
+			     multipath = uci:get("network", "wwan0", "multipath")
+            else 			
+			     multipath = uci:get("network", dev, "multipath")
+			end		
 			if multipath == "on" or multipath == "master" or multipath == "backup" or multipath== "handover" then
 				devices[#devices+1] = dev
 			end
@@ -48,6 +56,8 @@
 <script type="text/javascript">//<![CDATA[
 
 	function stringToColour(str) {
+	     if(str == "total")
+	        return "OrangeRed" ;
 		if(str == "free1")
 			return "FireBrick";
 		if(str == "ovh1")
@@ -159,12 +169,6 @@
 				height      = dnsvg.offsetHeight - 2;
 				data_wanted = Math.ceil(width / step);
 
-				/* prefill datasets
-				for (var i = 0; i < data_wanted; i++)
-				{
-					data_tx[i] = 0;
-				}
-				*/
 
 				/* find svg elements */
 				labeldn_25 = Gdn.getElementById('label_25');
@@ -175,18 +179,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');
 
@@ -246,6 +238,7 @@
 						var data_tx_peak = 0;
 
 						var data = {};
+                        var pre_itf = "";
 						
 						for(var itf in dataarray)
 						{						    
@@ -258,7 +251,14 @@
 								// 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);
+								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');									
+								}
 								Gdn.getElementById('rx').parentNode.appendChild(dnline);
 
 								dnPolygons[itf] = Gdn.getElementById('rx_' + itf);
@@ -270,7 +270,14 @@
 								}
 								// Create legend for this connextion
 								var table = document.getElementById('download_stats');
+								if(pre_itf == "total") //insert before total
+								{
+								    var tr = table.insertRow(0);
+                                }								
+								else  //insert other interface affer,default value -1
+								{ 
        								var tr = table.insertRow();
+								}
 								tr.setAttribute('id', itf + '_download');
 								// Create cells of the table
 								var itflabel = tr.insertCell(0);
@@ -297,7 +304,15 @@
 							{
 								var upline = Gup.createElementNS('http://www.w3.org/2000/svg', 'polyline');
 								upline.setAttributeNS(null, 'id', 'tx_' + itf);
+								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');									
+								}
+								
 								Gup.getElementById('tx').parentNode.appendChild(upline);
 
                                 upPolygons[itf] = Gup.getElementById('tx_' + itf);
@@ -309,7 +324,14 @@
 								}
 								// Create legend for this connextion
 								var table = document.getElementById('upload_stats');
+								if(pre_itf == "total") //insert before total
+								{
+								    var tr = table.insertRow(0);
+                                }								
+								else  //insert other interface affer,default value -1
+								{ 
        								var tr = table.insertRow();
+								}
 								tr.setAttribute('id', itf + '_upload');
 								// Create cells of the table
 								var itflabel = tr.insertCell(0);
@@ -332,6 +354,7 @@
 								itfpeak.setAttribute('id', itf + '_upload_peak');
 								itfpeak.appendChild(document.createTextNode('0 <%:kbit/s%> (0 <%:kB/s%>)'));
 							}
+							pre_itf = itf;
 						}
 
 						for (var itf in data)
@@ -367,15 +390,17 @@
 
 						var el = Gdn.getElementById('rx').parentNode;
 
-						// intialize upline datas for download and upload,the downline should be zero.
+						// intialize upline and downline datas for download and upload
 						var uplineDnl 	= { };
 						var uplineUpl   = { };
+
 						// fetch upline and downline datas
 						var toadditf = [ ];
 						for (var itf in data)
 						{
 							uplineDnl[itf] 	= [ ];
 							uplineUpl[itf]  = [ ];
+
 							// build point sets
 							var data_tx_avg;
 							var data_rx_avg;
@@ -408,6 +433,7 @@
 										data_rx_avg = dndata[itf][i];
 										data_tx_avg = updata[itf][i];
 								}
+
 							}
 							toadditf.push(itf);
 							// Update stats labels