Merge pull request #3585 from PiBa-NL/trafficgraphs-optimize

4 files changed, 135 insertions, 227 deletions

diff --git a/src/usr/local/www/ifstats.php b/src/usr/local/www/ifstats.php
index 671d5df..85d53af 100644
--- a/src/usr/local/www/ifstats.php
+++ b/src/usr/local/www/ifstats.php
@@ -29,25 +29,23 @@
 $nocsrf = true;
 
 require_once('auth_check.inc');
-require_once("interfaces.inc");
 
-
-//overload the use of this page until the conversion of both traffic graphs have been completed
 if($_POST['if']) {
-
 	$ifs = $_POST['if'];
+	$realifs = $_POST['realif'];
 
 	$ifarray = explode("|", $ifs);
+	$realifarray = explode("|", $realifs);
 
 	$temp = gettimeofday();
 	$timing = (double)$temp["sec"] + (double)$temp["usec"] / 1000000.0;
 	$obj = [];
 	$count = 0;
 
-	foreach ($ifarray as $if) {
-
-		$realif = get_real_interface($if);
-
+	$i = 0;
+	for ($i = 0; $i < count($ifarray); $i++) {
+		$if = $ifarray[$i];
+		$realif = $realifarray[$i];
 		if (!$realif) {
 			$realif = $if; // Need for IPsec case interface.
 		}
@@ -61,46 +59,8 @@ if($_POST['if']) {
 
 		$obj[$if][1]['key'] = $if . "out";
 		$obj[$if][1]['values'] = array($timing, $ifinfo['outbytes']);
-/*
-		$obj[$count]['key'] = $if . "in";
-		$obj[$count]['name'] = $if . " (in)";
-		$obj[$count]['values'] = array($timing, $ifinfo['inbytes']);
-
-		$count++;
-
-		$obj[$count]['key'] = $if . "out";
-		$obj[$count]['name'] = $if . " (out)";
-		$obj[$count]['values'] = array($timing, $ifinfo['outbytes']);
-
-		$count++;
-*/
 	}
 
 	header('Content-Type: application/json');
 	echo json_encode($obj,JSON_PRETTY_PRINT|JSON_PARTIAL_OUTPUT_ON_ERROR|JSON_NUMERIC_CHECK);
-
-} else {
-
-	$if = $_REQUEST['if'];
-
-	$realif = get_real_interface($if);
-
-	if (!$realif) {
-		$realif = $if; // Need for IPsec case interface.
-	}
-
-	$ifinfo = pfSense_get_interface_stats($realif);
-
-	$temp = gettimeofday();
-	$timing = (double)$temp["sec"] + (double)$temp["usec"] / 1000000.0;
-
-	header("Last-Modified: " . gmdate("D, j M Y H:i:s") . " GMT");
-	header("Expires: " . gmdate("D, j M Y H:i:s", time()) . " GMT");
-	header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP/1.1
-	header("Pragma: no-cache"); // HTTP/1.0
-
-	echo "$timing|" . $ifinfo['inbytes'] . "|" . $ifinfo['outbytes'] . "\n";
-
 }
-
-?>
diff --git a/src/usr/local/www/js/traffic-graphs.js b/src/usr/local/www/js/traffic-graphs.js
index 3b318b0..8a29a20 100644
--- a/src/usr/local/www/js/traffic-graphs.js
+++ b/src/usr/local/www/js/traffic-graphs.js
@@ -16,18 +16,111 @@
  * limitations under the License.
  */
 
-function draw_graph(refreshInterval, then, backgroundupdate) {
+function graph_init() {
+
+	window.charts = {};
+    window.myData = {};
+    window.updateIds = 0;
+    window.updateTimerIds = 0;
+    window.latest = [];
+    //TODO make it fall on a second value so it increments better
+    var now = then = new Date(Date.now());
+
+    var nowTime = now.getTime();
+
+	$.each(window.interfaces, function( key, value ) {
+
+		myData[value] = [];
+		updateIds = 0;
+		updateTimerIds = 0;
+
+		var itemIn = new Object();
+		var itemOut = new Object();
+
+		itemIn.key = value + " (in)";
+		if (window.invert) {
+			itemIn.area = true;
+		}
+		itemIn.first = true;
+		itemIn.values = [{x: nowTime, y: 0}];
+		myData[value].push(itemIn);
+
+		itemOut.key = value + " (out)";
+		if (window.invert) {
+			itemOut.area = true;
+		}
+		itemOut.first = true;
+		itemOut.values = [{x: nowTime, y: 0}];
+		myData[value].push(itemOut);
+
+	});
+
+	if (window.interfaces.length > 0) {
+		draw_graph(then);
+	}
+}
+
+function graph_visibilitycheck() {
+	//re-draw graph when the page goes from inactive (in it's window) to active
+	Visibility.change(function (e, state) {
+		if (window.graph_backgroundupdate) {
+			return;
+		}
+		if (state === "visible") {
+
+			now = then = new Date(Date.now());
+
+			var nowTime = now.getTime();
+
+			$.each(window.interfaces, function( key, value ) {
+
+				Visibility.stop(updateIds);
+				clearInterval(updateTimerIds);
+
+				myData[value] = [];
+
+				var itemIn = new Object();
+				var itemOut = new Object();
+
+				itemIn.key = value + " (in)";
+				if (window.invert) {
+					itemIn.area = true;
+				}
+				itemIn.first = true;
+				itemIn.values = [{x: nowTime, y: 0}];
+				myData[value].push(itemIn);
+
+				itemOut.key = value + " (out)";
+				if (window.invert) {
+					itemOut.area = true;
+				}
+				itemOut.first = true;
+				itemOut.values = [{x: nowTime, y: 0}];
+				myData[value].push(itemOut);
+
+			});
+
+			if (window.interfaces.length > 0) {
+				draw_graph(then);
+			}
+
+		}
+	});
+}
+
+function draw_graph(then) {
 
 	d3.select("div[id^=nvtooltip-]").remove();
 	d3.select(".interface-label").remove();
 
-	var invert = localStorage.getItem('invert');
-	var size = localStorage.getItem('size');
+	var invert = window.invert;
+	var size = window.size;
+	var refreshInterval = window.interval;
 	var lasttime = 0;
-
 	startTime = 120 * refreshInterval;
 	then.setSeconds(then.getSeconds() - startTime);
 	var thenTime = then.getTime();
+	var refreshGraphFunction_running = false;
 
 	$.each( window.interfaces, function( key, value ) {
 		myData[value]['interfacename'] = graph_interfacenames[value];
@@ -91,7 +184,7 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 			charts[value].interactiveLayer.tooltip.contentGenerator(function(data) {
 
 				var units = 'b/s';
-				if(localStorage.getItem('size') === "1") {
+				if(window.size === 1) {
 					units = 'B/s'
 				}
 
@@ -101,7 +194,7 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 
 					var rawValue = data.series[v].value;
 
-					if((invert === "true") && data.series[v].key.includes("(out)")) {
+					if(invert && data.series[v].key.includes("(out)")) {
 						rawValue = 0 - rawValue;
 					}
 
@@ -126,9 +219,13 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 	});
 
 	var refreshGraphFunction = function(){
+		if (refreshGraphFunction_running) {
+			return;
+		}
+		refreshGraphFunction_running = true;
 		d3.json("ifstats.php")
 		.header("Content-Type", "application/x-www-form-urlencoded")
-		.post('if='+window.interfaces.join('|'), function(error, json) { //TODO all ifs again
+		.post('if='+window.interfaces.join('|')+'&realif='+window.realinterfaces.join('|'), function(error, json) { //TODO all ifs again
 
 			if (error) {
 
@@ -167,7 +264,7 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 					var trafficIn = ((ifVals[0].values[1] * size) - latest[ifVals[0].key]) / timeDiff;
 					var trafficOut = ((ifVals[1].values[1] * size) - latest[ifVals[1].key]) / timeDiff;
 
-					if((localStorage.getItem('invert') === "true")) {
+					if(window.invert) {
 						trafficOut = 0 - trafficOut;
 					}
 
@@ -199,7 +296,6 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 				myData[key][0].first = false;
 				myData[key][1].first = false;
 
-
 				myData[key][0].values.shift();
 				myData[key][1].values.shift();
 
@@ -215,11 +311,12 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 
 			});
 
+			refreshGraphFunction_running = false;
 		});
 
 	}
 	
-	if(backgroundupdate) {
+	if(window.graph_backgroundupdate) {
 		updateTimerIds = setInterval(refreshGraphFunction, refreshInterval * 1000);
 	} else {
 		//only update the graphs when tab is active in window to save resources and prevent build up
diff --git a/src/usr/local/www/status_graph.php b/src/usr/local/www/status_graph.php
index b746b27..d62257a 100644
--- a/src/usr/local/www/status_graph.php
+++ b/src/usr/local/www/status_graph.php
@@ -173,6 +173,7 @@ $section->add($group);
 $form->add($section);
 print $form;
 
+$realif = get_real_interface($curif);
 ?>
 
 <script src="/vendor/d3/d3.min.js?v=<?=filemtime('/usr/local/www/vendor/d3/d3.min.js')?>"></script>
@@ -183,94 +184,22 @@ print $form;
 
 <script type="text/javascript">
 
+
 //<![CDATA[
 events.push(function() {
 
 	var InterfaceString = "<?=$curif?>";
+	var RealInterfaceString = "<?=$realif?>";
+    window.graph_backgroundupdate = $('#backgroundupdate').val() === "true";
 
-	//store saved settings in a fresh localstorage
-	localStorage.clear();
-	localStorage.setItem('interval', 1);
-	localStorage.setItem('invert', "true");
-	localStorage.setItem('size', 1);
-	window.interfaces = InterfaceString.split("|");
-	window.charts = {};
-    window.myData = {};
-    window.updateIds = 0;
-    window.updateTimerIds = 0;
-    window.latest = [];
-    var refreshInterval = localStorage.getItem('interval');
-
-    //TODO make it fall on a second value so it increments better
-    var now = then = new Date(Date.now());
-
-    var nowTime = now.getTime();
-
-	$.each( window.interfaces, function( key, value ) {
-
-		myData[value] = [];
-		updateIds = 0;
-		updateTimerIds = 0;
-
-		var itemIn = new Object();
-		var itemOut = new Object();
-
-		itemIn.key = value + " (in)";
-		if(localStorage.getItem('invert') === "true") { itemIn.area = true; }
-		itemIn.first = true;
-		itemIn.values = [{x: nowTime, y: 0}];
-		myData[value].push(itemIn);
-
-		itemOut.key = value + " (out)";
-		if(localStorage.getItem('invert') === "true") { itemOut.area = true; }
-		itemOut.first = true;
-		itemOut.values = [{x: nowTime, y: 0}];
-		myData[value].push(itemOut);
-
-	});
-
-    var backgroundupdate = $('#backgroundupdate').val() === "true";
-	draw_graph(refreshInterval, then, backgroundupdate);
-
-	//re-draw graph when the page goes from inactive (in it's window) to active
-	Visibility.change(function (e, state) {
-		if($('#backgroundupdate').val() === "true"){
-			return;
-		}
-		if(state === "visible") {
-
-			now = then = new Date(Date.now());
-
-			var nowTime = now.getTime();
-
-			$.each( window.interfaces, function( key, value ) {
+	window.interval = 1;
+	window.invert = "true";
+	window.size = 8;
+	window.interfaces = InterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
+	window.realinterfaces = RealInterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
 
-				Visibility.stop(updateIds);
-				clearInterval(updateTimerIds);
-
-				myData[value] = [];
-
-				var itemIn = new Object();
-				var itemOut = new Object();
-
-				itemIn.key = value + " (in)";
-				if(localStorage.getItem('invert') === "true") { itemIn.area = true; }
-				itemIn.first = true;
-				itemIn.values = [{x: nowTime, y: 0}];
-				myData[value].push(itemIn);
-
-				itemOut.key = value + " (out)";
-				if(localStorage.getItem('invert') === "true") { itemOut.area = true; }
-				itemOut.first = true;
-				itemOut.values = [{x: nowTime, y: 0}];
-				myData[value].push(itemOut);
-
-			});
-
-			draw_graph(refreshInterval, then, false);
-
-		}
-	});
+	graph_init();
+	graph_visibilitycheck();
 
 });
 //]]>
diff --git a/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php b/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php
index a800bf4..52ce62f 100644
--- a/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php
+++ b/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php
@@ -105,6 +105,7 @@ if (isset($user_settings['widgets']['traffic_graphs']['backgroundupdate'])) {
 $skip_tg_items = explode(",", $user_settings['widgets']['traffic_graphs']['filter']);
 $tg_displayed = false;
 $tg_displayed_ifs_array = [];
+$tg_displayed_realifsarray = [];
 ?>
 	<script src="/vendor/d3/d3.min.js?v=<?=filemtime('/usr/local/www/vendor/d3/d3.min.js')?>"></script>
 	<script src="/vendor/nvd3/nv.d3.js?v=<?=filemtime('/usr/local/www/vendor/nvd3/nv.d3.js')?>"></script>
@@ -129,6 +130,7 @@ $tg_displayed_ifs_array = [];
 
 		$tg_displayed = true;
 		$tg_displayed_ifs_array[] = $ifdescr;
+		$tg_displayed_realifsarray[] = get_real_interface($ifdescr);
 		echo '<div id="traffic-chart-' . $ifdescr . '" class="d3-chart traffic-widget-chart">';
 		echo '	<svg></svg>';
 		echo '</div>';
@@ -255,98 +257,18 @@ var graph_interfacenames = <?php
 events.push(function() {
 
 	var InterfaceString = "<?=implode("|", $tg_displayed_ifs_array)?>";
+	var RealInterfaceString = "<?=implode("|", $tg_displayed_realifsarray)?>";
+    window.graph_backgroundupdate = <?=$tg_backgroundupdate?>;
 
-	//store saved settings in a fresh localstorage
-	localStorage.clear();
-	localStorage.setItem('interval', <?=$tg_refreshinterval?>);
-	localStorage.setItem('invert', <?=$tg_invert?>);
-	localStorage.setItem('size', <?=$tg_size?>);
-	localStorage.setItem('backgroundupdate', <?=$tg_backgroundupdate?>);
-
+	window.interval = <?=$tg_refreshinterval?>;
+	window.invert = <?=$tg_invert?>;
+	window.size = <?=$tg_size?>;
 	window.interfaces = InterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
-	window.charts = {};
-    window.myData = {};
-    window.updateIds = 0;
-    window.updateTimerIds = 0;
-    window.latest = [];
-    var refreshInterval = localStorage.getItem('interval');
-    var backgroundupdate = localStorage.getItem('backgroundupdate');
-
-    var refreshInterval = localStorage.getItem('interval');
-    //TODO make it fall on a second value so it increments better
-    var now = then = new Date(Date.now());
-
-    var nowTime = now.getTime();
-
-	$.each(window.interfaces, function( key, value ) {
-
-		myData[value] = [];
-		updateIds = 0;
-		updateTimerIds = 0;
-
-		var itemIn = new Object();
-		var itemOut = new Object();
-
-		itemIn.key = value + " (in)";
-		if (localStorage.getItem('invert') === "true") { itemIn.area = true; }
-		itemIn.first = true;
-		itemIn.values = [{x: nowTime, y: 0}];
-		myData[value].push(itemIn);
-
-		itemOut.key = value + " (out)";
-		if (localStorage.getItem('invert') === "true") { itemOut.area = true; }
-		itemOut.first = true;
-		itemOut.values = [{x: nowTime, y: 0}];
-		myData[value].push(itemOut);
-
-	});
-
-	if (window.interfaces.length > 0) {
-		draw_graph(refreshInterval, then, backgroundupdate);
-	}
-
-	//re-draw graph when the page goes from inactive (in it's window) to active
-	Visibility.change(function (e, state) {
-		if (backgroundupdate) {
-			return;
-		}
-		if (state === "visible") {
-
-			now = then = new Date(Date.now());
-
-			var nowTime = now.getTime();
-
-			$.each(window.interfaces, function( key, value ) {
-
-				Visibility.stop(updateIds);
-				clearInterval(updateTimerIds);
-
-				myData[value] = [];
-
-				var itemIn = new Object();
-				var itemOut = new Object();
-
-				itemIn.key = value + " (in)";
-				if (localStorage.getItem('invert') === "true") { itemIn.area = true; }
-				itemIn.first = true;
-				itemIn.values = [{x: nowTime, y: 0}];
-				myData[value].push(itemIn);
-
-				itemOut.key = value + " (out)";
-				if (localStorage.getItem('invert') === "true") { itemOut.area = true; }
-				itemOut.first = true;
-				itemOut.values = [{x: nowTime, y: 0}];
-				myData[value].push(itemOut);
-
-			});
-
-			if (window.interfaces.length > 0) {
-				draw_graph(refreshInterval, then, backgroundupdate);
-			}
-
-		}
-	});
+	window.realinterfaces = RealInterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
 
+	graph_init();
+	graph_visibilitycheck();
+	
 	set_widget_checkbox_events("#widget-<?=$widgetname?>_panel-footer [id^=show]", "showalltgitems");
 });
 //]]>