traffic-graphs, optimize retrieval of data every x seconds to reduce spikes in the graphs and load on pfSense

also cleanup some old code.

4 files changed, 20 insertions, 48 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..cfd0a40 100644
--- a/src/usr/local/www/js/traffic-graphs.js
+++ b/src/usr/local/www/js/traffic-graphs.js
@@ -28,6 +28,7 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 	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];
@@ -126,9 +127,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) {
 
@@ -199,7 +204,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,6 +219,7 @@ function draw_graph(refreshInterval, then, backgroundupdate) {
 
 			});
 
+			refreshGraphFunction_running = false;
 		});
 
 	}
diff --git a/src/usr/local/www/status_graph.php b/src/usr/local/www/status_graph.php
index b746b27..54dde34 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>
@@ -187,6 +188,7 @@ print $form;
 events.push(function() {
 
 	var InterfaceString = "<?=$curif?>";
+	var RealInterfaceString = "<?=$realif?>";
 
 	//store saved settings in a fresh localstorage
 	localStorage.clear();
@@ -194,6 +196,7 @@ events.push(function() {
 	localStorage.setItem('invert', "true");
 	localStorage.setItem('size', 1);
 	window.interfaces = InterfaceString.split("|");
+	window.realinterfaces = RealInterfaceString.split("|");
 	window.charts = {};
     window.myData = {};
     window.updateIds = 0;
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..6952e7b 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,6 +257,7 @@ var graph_interfacenames = <?php
 events.push(function() {
 
 	var InterfaceString = "<?=implode("|", $tg_displayed_ifs_array)?>";
+	var RealInterfaceString = "<?=implode("|", $tg_displayed_realifsarray)?>";
 
 	//store saved settings in a fresh localstorage
 	localStorage.clear();
@@ -264,6 +267,7 @@ events.push(function() {
 	localStorage.setItem('backgroundupdate', <?=$tg_backgroundupdate?>);
 
 	window.interfaces = InterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
+	window.realinterfaces = RealInterfaceString.split("|").filter(function(entry) { return entry.trim() != ''; });
 	window.charts = {};
     window.myData = {};
     window.updateIds = 0;