/ - Diff - pfSense - pfSense bugtracker

« Previous | Next »

Revision fe5c31bb

Added by Pi Ba over 8 years ago

ID fe5c31bb1a72535a7a0095b7a9a513f012aa506b
Parent 63586f71
Child 5ac882de

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

      * 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();
-...
     	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;
-...
     					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')
-...
     				.attr("x", 20)
     				.attr("y", 20)
     				.attr("font-size", 18)
     				.text(value);
     				.text(myData[value]['interfacename']);
     			charts[value].yAxis
     		    	.tickFormat(d3.format('.2s'))
-...
     	});
     	//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);
-...
     			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);
-...
     			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) {
-...
     		});
     	});
+    	}
     	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);
+    	}
+    }

     } else {
     	$curhostipformat = "";
+    }
     if ($_POST['backgroundupdate']) {
     	$curbackgroundupdate = $_POST['backgroundupdate'];
     } else {
     	$curbackgroundupdate = "";
+    }
     function iflist() {
     	global $ifdescrs;
-...
+    	)
     ))->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);
-...
     	//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');
-...
         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();
-...
     	});
     	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] = [];
-...
     			});
     			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>
-...
     <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',

     	$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();
-...
     	$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
-...
     	// 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"];
-...
     	?>
     	<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();
-...
     	});
     	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] = [];
-...
     			});
     			draw_graph(refreshInterval, then);
     			draw_graph(refreshInterval, then, backgroundupdate);
+    		}
     	});
-...
     		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
-...
     		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({
-...
     				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());
-...
     					});
     					draw_graph(refreshInterval, then);
     					draw_graph(refreshInterval, then, backgroundupdate);
     					$( "#traffic-graph-message" ).removeClass("text-danger").addClass("text-success");
     					$( "#traffic-graph-message" ).text(message.success);
-...
     			</div>
     		</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>

Also available in: Unified diff

Project

General

Profile

pfSense

Revision fe5c31bb

Added by Pi Ba over 8 years ago