traffic-graphs, setting to keep updating them while invisible

- allow showing different graphs to be shown on different browser tabs (dont use localstorage for graphs to query)
- show interface name in graph instead of realname

3 files changed, 108 insertions, 159 deletions

diff --git a/src/usr/local/www/js/traffic-graphs.js b/src/usr/local/www/js/traffic-graphs.js
index fcda786..0dd7b67 100644
--- a/src/usr/local/www/js/traffic-graphs.js
+++ b/src/usr/local/www/js/traffic-graphs.js
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-function draw_graph(refreshInterval, then) {
+function draw_graph(refreshInterval, then, backgroundupdate) {
 
 	d3.select("div[id^=nvtooltip-]").remove();
 	d3.select(".interface-label").remove();
@@ -28,8 +28,8 @@ function draw_graph(refreshInterval, then) {
 	then.setSeconds(then.getSeconds() - startTime);
 	var thenTime = then.getTime();
 
-	$.each( JSON.parse(localStorage.getItem('interfaces')), function( key, value ) {
-
+	$.each( window.interfaces, function( key, value ) {
+		myData[value]['interfacename'] = graph_interfacenames[value];
 		latest[value + 'in'] = 0;
 		latest[value + 'out'] = 0;
 
@@ -65,7 +65,6 @@ function draw_graph(refreshInterval, then) {
 					return d3.time.format('%M:%S')(new Date(d));
 				});
 
-			//TODO change to localStorage.getItem('sizeLabel');
 			var sizeLabel = $( "#traffic-graph-size option:selected" ).text();
 
 			d3.select('#traffic-chart-' + value + ' svg')
@@ -74,7 +73,7 @@ function draw_graph(refreshInterval, then) {
 				.attr("x", 20)             
 				.attr("y", 20)
 				.attr("font-size", 18)
-				.text(value);
+				.text(myData[value]['interfacename']);
 
 			charts[value].yAxis
 		    	.tickFormat(d3.format('.2s'))
@@ -126,16 +125,15 @@ function draw_graph(refreshInterval, then) {
 
 	});
 
-	//only update the graphs when tab is active in window to save resources and prevent build up
-	updateIds = Visibility.every(refreshInterval * 1000, function(){
-
+	var refreshGraphFunction = function(){
 		d3.json("ifstats.php")
 		.header("Content-Type", "application/x-www-form-urlencoded")
-		.post('if='+JSON.parse(localStorage.getItem('interfaces')).join('|'), function(error, json) { //TODO all ifs again
+		.post('if='+window.interfaces.join('|'), function(error, json) { //TODO all ifs again
 
 			if (error) {
 
 				Visibility.stop(updateIds);
+				clearInterval(updateTimerIds);
 				$(".traffic-widget-chart").remove();
 				$("#traffic-chart-error").show().html('<strong>Error</strong>: ' + error);
 				return console.warn(error);
@@ -145,6 +143,7 @@ function draw_graph(refreshInterval, then) {
 			if (json.error) {
 
 				Visibility.stop(updateIds);
+				clearInterval(updateTimerIds);
 				$(".traffic-widget-chart").remove();
 				$("#traffic-chart-error").show().html('<strong>Error</strong>: ' + json.error);
 				return console.warn(json.error);
@@ -154,6 +153,8 @@ function draw_graph(refreshInterval, then) {
 			now = new Date(Date.now());
 
 			$.each(json, function( key, ifVals ) {
+				label = $('#traffic-chart-' + key + ' svg > .interface-label');
+				$(label).text(ifVals.name);
 
 				if(!myData[key][0].first) {
 
@@ -202,6 +203,12 @@ function draw_graph(refreshInterval, then) {
 
 		});
 
-	});
-
+	}
+	
+	if(backgroundupdate) {
+		updateTimerIds = setInterval(refreshGraphFunction, refreshInterval * 1000);
+	} else {
+		//only update the graphs when tab is active in window to save resources and prevent build up
+		updateIds = Visibility.every(refreshInterval * 1000, refreshGraphFunction);
+	}
 }
diff --git a/src/usr/local/www/status_graph.php b/src/usr/local/www/status_graph.php
index 4a6c8c2..8865cb7 100644
--- a/src/usr/local/www/status_graph.php
+++ b/src/usr/local/www/status_graph.php
@@ -136,6 +136,11 @@ if ($_POST['hostipformat']) {
 } else {
 	$curhostipformat = "";
 }
+if ($_POST['backgroundupdate']) {
+	$curbackgroundupdate = $_POST['backgroundupdate'];
+} else {
+	$curbackgroundupdate = "";
+}
 
 function iflist() {
 	global $ifdescrs;
@@ -200,6 +205,16 @@ $group->add(new Form_Select(
 	)
 ))->setHelp('Display');
 
+$group->add(new Form_Select(
+	'backgroundupdate',
+	null,
+	$curbackgroundupdate,
+	array (
+		'false'	=> gettext('Clear graphs when not visible.'),
+		'true'	=> gettext('Keep graphs updated on inactive tab. (increases cpu usage)'),
+	)
+))->setHelp('Background updates');
+
 $section->add($group);
 
 $form->add($section);
@@ -222,14 +237,14 @@ events.push(function() {
 
 	//store saved settings in a fresh localstorage
 	localStorage.clear();
-	localStorage.setItem('interfaces', JSON.stringify(InterfaceString.split("|"))); //TODO see if can be switched to interfaces
 	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');
 
@@ -238,10 +253,11 @@ events.push(function() {
 
     var nowTime = now.getTime();
 
-	$.each( JSON.parse(localStorage.getItem('interfaces')), function( key, value ) {
+	$.each( window.interfaces, function( key, value ) {
 
 		myData[value] = [];
 		updateIds = 0;
+		updateTimerIds = 0;
 
 		var itemIn = new Object();
 		var itemOut = new Object();
@@ -260,19 +276,24 @@ events.push(function() {
 
 	});
 
-	draw_graph(refreshInterval, then);
+    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( JSON.parse(localStorage.getItem('interfaces')), function( key, value ) {
+			$.each( window.interfaces, function( key, value ) {
 
 				Visibility.stop(updateIds);
+				clearInterval(updateTimerIds);
 
 				myData[value] = [];
 
@@ -293,133 +314,11 @@ events.push(function() {
 
 			});
 
-			draw_graph(refreshInterval, then);
+			draw_graph(refreshInterval, then, false);
 
 		}
 	});
 
-	// save new config defaults
-    $( '#traffic-graph-form' ).submit(function(event) {
-
-		var error = false;
-		$("#traffic-chart-error").hide();
-
-		var interfaces = $( "#traffic-graph-interfaces" ).val();
-		refreshInterval = parseInt($( "#traffic-graph-interval" ).val());
-		var invert = $( "#traffic-graph-invert" ).val();
-		var size = $( "#traffic-graph-size" ).val();
-
-		//TODO validate interfaces data and throw error
-
-		if(!Number.isInteger(refreshInterval) || refreshInterval < 1 || refreshInterval > 10) {
-			error = 'Refresh Interval is not a valid number between 1 and 10.';
-		}
-
-		if(invert != "true" && invert != "false") {
-
-			error = 'Invert is not a boolean of true or false.';
-
-		}
-
-		if(!error) {
-
-			var formData = {
-				'traffic-graph-interfaces' : interfaces,
-				'traffic-graph-interval'   : refreshInterval,
-				'traffic-graph-invert'     : invert,
-				'traffic-graph-size'       : size
-			};
-
-			$.ajax({
-				type        : 'POST',
-				url         : '/widgets/widgets/traffic_graphs.widget.php',
-				data        : formData,
-				dataType    : 'json',
-				encode      : true
-			})
-			.done(function(message) {
-
-				if(message.success) {
-
-					Visibility.stop(updateIds);
-
-					//remove all old graphs (divs/svgs)
-					$( ".traffic-widget-chart" ).remove();
-
-					localStorage.setItem('interfaces', JSON.stringify(interfaces));
-					localStorage.setItem('interval', refreshInterval);
-					localStorage.setItem('invert', invert);
-					localStorage.setItem('size', size);
-
-					//redraw graph with new settings
-					now = then = new Date(Date.now());
-
-					var freshData = [];
-
-					var nowTime = now.getTime();
-
-					$.each( interfaces, function( key, value ) {
-
-						//create new graphs (divs/svgs)
-						$("#widget-traffic_graphs_panel-body").append('<div id="traffic-chart-' + value + '" class="d3-chart traffic-widget-chart"><svg></svg></div>');
-
-						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);
-
-					$( "#traffic-graph-message" ).removeClass("text-danger").addClass("text-success");
-					$( "#traffic-graph-message" ).text(message.success);
-
-					setTimeout(function() {
-						$( "#traffic-graph-message" ).empty();
-						$( "#traffic-graph-message" ).removeClass("text-success");
-					}, 5000);
-
-				} else {
-
-					$( "#traffic-graph-message" ).addClass("text-danger");
-					$( "#traffic-graph-message" ).text(message.error);
-
-					console.warn(message.error);
-
-				}
-
-	        })
-	        .fail(function() {
-
-			    console.warn( "The Traffic Graphs widget AJAX request failed." );
-
-			});
-
-	    } else {
-
-			$( "#traffic-graph-message" ).addClass("text-danger");
-			$( "#traffic-graph-message" ).text(error);
-
-			console.warn(error);
-
-	    }
-
-        event.preventDefault();
-    });
-
 });
 //]]>
 </script>
@@ -429,6 +328,12 @@ events.push(function() {
 <script type="text/javascript">
 //<![CDATA[
 
+var graph_interfacenames = <?php
+	foreach ($ifdescrs as $ifname => $ifdescr) {
+		$iflist[$ifname] = $ifdescr;
+	}
+	echo json_encode($iflist);
+?>;
 function updateBandwidth() {
 	$.ajax(
 		'/bandwidth_by_ip.php',
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 1a0d439..57c58ad 100644
--- a/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php
+++ b/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php
@@ -88,6 +88,7 @@ if (!is_array($config["widgets"]["trafficgraphs"])) {
 	$config["widgets"]["trafficgraphs"]["refreshinterval"] = 1;
 	$config["widgets"]["trafficgraphs"]["invert"] = "true";
 	$config["widgets"]["trafficgraphs"]["size"] = 1;
+	$config["widgets"]["trafficgraphs"]["backgroundupdate"] = "false";
 	$config["widgets"]["trafficgraphs"]["shown"] = array();
 	$config["widgets"]["trafficgraphs"]["shown"]["item"] = array();
 
@@ -113,6 +114,9 @@ if(!isset($config["widgets"]["trafficgraphs"]["invert"])) {
 	$config["widgets"]["trafficgraphs"]["invert"] = "true";
 }
 
+if(!isset($config["widgets"]["trafficgraphs"]["backgroundupdate"])) {
+	$config["widgets"]["trafficgraphs"]["backgroundupdate"] = "true";
+}
 $a_config = &$config["widgets"]["trafficgraphs"];
 
 // save new default config options that have been submitted
@@ -123,25 +127,23 @@ if ($_POST) {
 
 	// TODO check if between 1 and 10
 	if (isset($_POST["traffic-graph-interval"]) && is_numericint($_POST["traffic-graph-interval"])) {
-
 		$a_config["refreshinterval"] = $_POST["traffic-graph-interval"];
-
 	} else {
-
 		die('{ "error" : "Refresh Interval is not a valid number between 1 and 10." }');
-
 	}
 
 	if($_POST["traffic-graph-invert"] === "true" || $_POST["traffic-graph-invert"] === "false") {
-
 		$a_config["invert"] = $_POST["traffic-graph-invert"];
-
 	} else {
-
 		die('{ "error" : "Invert is not a boolean of true or false." }');
-
 	}
 
+	if($_POST["traffic-graph-backgroundupdate"] === "true" || $_POST["traffic-graph-backgroundupdate"] === "false") {
+		$a_config["backgroundupdate"] = $_POST["traffic-graph-backgroundupdate"];
+	} else {
+		die('{ "error" : "Backgroundupdate is not a boolean of true or false." }');
+	}
+	
 	//TODO validate data and throw error
 	$a_config["size"] = $_POST["traffic-graph-size"];
 
@@ -189,34 +191,45 @@ $allifs = implode("|", $ifsarray);
 	?>
 
 	<script type="text/javascript">
-
 //<![CDATA[
+var graph_interfacenames = <?php
+	foreach ($ifdescrs as $ifname => $ifdescr) {
+		$iflist[$ifname] = $ifdescr;
+	}
+	echo json_encode($iflist);
+?>;
+
 events.push(function() {
 
 	var InterfaceString = "<?=$allifs?>";
 
 	//store saved settings in a fresh localstorage
 	localStorage.clear();
-	localStorage.setItem('interfaces', JSON.stringify(InterfaceString.split("|"))); //TODO see if can be switched to interfaces
 	localStorage.setItem('interval', <?=$refreshinterval?>);
 	localStorage.setItem('invert', <?=$a_config["invert"]?>);
 	localStorage.setItem('size', <?=$a_config["size"]?>);
+	localStorage.setItem('backgroundupdate', <?=$a_config["backgroundupdate"]?>);
 
+	window.interfaces = InterfaceString.split("|");
 	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( JSON.parse(localStorage.getItem('interfaces')), function( key, value ) {
+	$.each(window.interfaces, function( key, value ) {
 
 		myData[value] = [];
 		updateIds = 0;
+		updateTimerIds = 0;
 
 		var itemIn = new Object();
 		var itemOut = new Object();
@@ -235,19 +248,23 @@ events.push(function() {
 
 	});
 
-	draw_graph(refreshInterval, then);
+	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($('#traffic-graph-backgroundupdate').val() === "true"){
+			return;
+		}
 		if(state === "visible") {
 
 			now = then = new Date(Date.now());
 
 			var nowTime = now.getTime();
 
-			$.each( JSON.parse(localStorage.getItem('interfaces')), function( key, value ) {
+			$.each(window.interfaces, function( key, value ) {
 
 				Visibility.stop(updateIds);
+				clearInterval(updateTimerIds);
 
 				myData[value] = [];
 
@@ -268,7 +285,7 @@ events.push(function() {
 
 			});
 
-			draw_graph(refreshInterval, then);
+			draw_graph(refreshInterval, then, backgroundupdate);
 
 		}
 	});
@@ -283,6 +300,7 @@ events.push(function() {
 		refreshInterval = parseInt($( "#traffic-graph-interval" ).val());
 		var invert = $( "#traffic-graph-invert" ).val();
 		var size = $( "#traffic-graph-size" ).val();
+		var backgroundupdate = $( "#traffic-graph-backgroundupdate" ).val();
 
 		//TODO validate interfaces data and throw error
 
@@ -299,10 +317,11 @@ events.push(function() {
 		if(!error) {
 
 			var formData = {
-				'traffic-graph-interfaces' : interfaces,
-				'traffic-graph-interval'   : refreshInterval,
-				'traffic-graph-invert'     : invert,
-				'traffic-graph-size'       : size
+				'traffic-graph-interfaces'       : interfaces,
+				'traffic-graph-interval'         : refreshInterval,
+				'traffic-graph-invert'           : invert,
+				'traffic-graph-size'             : size,
+				'traffic-graph-backgroundupdate' : backgroundupdate
 			};
 
 			$.ajax({
@@ -317,14 +336,16 @@ events.push(function() {
 				if(message.success) {
 
 					Visibility.stop(updateIds);
+					clearInterval(updateTimerIds);
 
 					//remove all old graphs (divs/svgs)
 					$( ".traffic-widget-chart" ).remove();
 
-					localStorage.setItem('interfaces', JSON.stringify(interfaces));
+					window.interfaces = interfaces;
 					localStorage.setItem('interval', refreshInterval);
 					localStorage.setItem('invert', invert);
 					localStorage.setItem('size', size);
+					localStorage.setItem('backgroundupdate', backgroundupdate);
 
 					//redraw graph with new settings
 					now = then = new Date(Date.now());
@@ -357,7 +378,7 @@ events.push(function() {
 
 					});
 
-					draw_graph(refreshInterval, then);
+					draw_graph(refreshInterval, then, backgroundupdate);
 
 					$( "#traffic-graph-message" ).removeClass("text-danger").addClass("text-success");
 					$( "#traffic-graph-message" ).text(message.success);
@@ -466,6 +487,22 @@ events.push(function() {
 		</div>
 
 		<div class="form-group">
+			<label for="traffic-graph-backgroundupdate" class="col-sm-3 control-label"><?=gettext('Background updates')?></label>
+			<div class="col-sm-9">
+				<select class="form-control" id="traffic-graph-backgroundupdate" name="traffic-graph-backgroundupdate">
+				<?php
+					if($a_config["backgroundupdate"] === "true") {
+						echo '<option value="true" selected>Keep graphs updated on inactive tab. (increases cpu usage)</option>';
+						echo '<option value="false">Clear graphs when not visible.</option>';
+					} else {
+						echo '<option value="true">Keep graphs updated on inactive tab. (increases cpu usage)</option>';
+						echo '<option value="false" selected>Clear graphs when not visible.</option>';
+					}
+				?>
+				</select>
+			</div>
+		</div>
+		<div class="form-group">
 			<div class="col-sm-3 text-right">
 				<button type="submit" class="btn btn-primary"><i class="fa fa-save icon-embed-btn"></i><?=gettext('Save')?></button>
 			</div>