Only process Traffic Graph object if it is open

The Traffic Graphs widget puts a graph object for every interface into
the HTML of the widget. Underneath the graph object for every interface
makes the call to graph.php to get data for the graph, and the refresh
interval also keeps happening, which keeps gathering the data every
refresh interval for every interface.
This wastes a lot of CPU back on the pfSense box gathering data
repeatedly if the system has a lot of interfaces and only has the
Traffic Graph enabled for 1 or a few of them. e.g. on my poor little
Alix at home I had setup 6 VLANs to test some stuff, so I had WAN, LAN,
OPT1 and 6 tagged VLANS - 9 interfaces. When I enable the Traffic Graphs
widget on the dashboard, the Alix CPU is driven 100% trying to keep up
with gathering data for 9 interfaces every 10 seconds, even though I
only have 1 graph actually opened!
I couldn't see a way to enable/disable the graph.php object from
executing. So this change puts the object in and out of the HTML:
a) At first display the graph.php object HTML is only put in the
relevant "div" if the graph is actually set to be shown in the config.
b) When a graph is opened by the user, the Java Script puts the
necessary graph.php object HTML into the div. The graph data then starts
being requested...
c) When a graph is minimised by the user, the Java Script removes the
graph.php object HTML from the div. The actions of graph.php stop
happening.
I can see the difference by just watching "top" from the command line on
a low-power system and open/minimizing the graphs on the dashboard.
If there is a better way to enable/disable an object like this I am
happy to learn about it.

2 files changed, 19 insertions, 4 deletions

diff --git a/usr/local/www/widgets/javascript/traffic_graph.js b/usr/local/www/widgets/javascript/traffic_graph.js
index 66a70f5..383a549 100644
--- a/usr/local/www/widgets/javascript/traffic_graph.js
+++ b/usr/local/www/widgets/javascript/traffic_graph.js
@@ -1,6 +1,12 @@
-function trafficshowDiv(incDiv,swapButtons) {
-	//appear element
+function trafficshowDiv(incDiv,ifDescription,refreshIntervalSec,swapButtons) {
+	// put the graph object HTML in the element and make it appear
 	selectedDiv = incDiv + "graphdiv";
+	jQuery('#' + selectedDiv).html(
+		'<object data="graph.php?ifnum=' + incDiv + '&amp;ifname=' + ifDescription + '&amp;timeint=' + refreshIntervalSec + '&amp;initdelay=0" height="100%" width="100%">' +
+		'<param name="id" value="graph" />' +
+		'<param name="type" value="image/svg+xml" />' +
+		'<param name="pluginspage" value="http://www.adobe.com/svg/viewer/install/auto" />' +
+		'</object>');
 	jQuery('#' + selectedDiv).effect('blind',{mode:'show'},1000);
 	d = document;
 	if (swapButtons) {
@@ -16,8 +22,9 @@ function trafficshowDiv(incDiv,swapButtons) {
 }
 
 function  trafficminimizeDiv(incDiv,swapButtons) {
-	//fade element
+	// remove the graph object HTML from the element (so it does not keep using CPU) and fade
 	selectedDiv = incDiv + "graphdiv";
+	jQuery('#' + selectedDiv).html('');
 	jQuery('#' + selectedDiv).effect('blind',{mode:'hide'},1000);
 	d = document;
 	if (swapButtons) {
diff --git a/usr/local/www/widgets/widgets/traffic_graphs.widget.php b/usr/local/www/widgets/widgets/traffic_graphs.widget.php
index c9f92b6..c5f6286 100644
--- a/usr/local/www/widgets/widgets/traffic_graphs.widget.php
+++ b/usr/local/www/widgets/widgets/traffic_graphs.widget.php
@@ -167,17 +167,25 @@ foreach ($ifdescrs as $ifname => $ifdescr) {
 				<div align="right" style="float:right;width:49%">
 					<div id="<?=$ifname;?>graphdiv-min" onclick='return trafficminimizeDiv("<?= $ifname ?>", true);'
 						style="display:<?php echo $mingraphbutton;?>; cursor:pointer" ><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_minus.gif" alt="Minimize <?=$ifname;?> traffic graph" /></div>
-					<div id="<?=$ifname;?>graphdiv-open" onclick='return trafficshowDiv("<?= $ifname ?>", true);'
+					<div id="<?=$ifname;?>graphdiv-open" onclick='return trafficshowDiv("<?= $ifname ?>", "<?= rawurlencode($ifdescr); ?>", "<?= $refreshinterval ?>", true);'
 						style="display:<?php echo $showgraphbutton;?>; cursor:pointer" ><img src="./themes/<?= $g['theme']; ?>/images/icons/icon_open.gif" alt="Show <?=$ifname;?> traffic graph" /></div>
 				</div>
 				<div style="clear:both;"></div>
 			</div>
 			<div id="<?=$ifname;?>graphdiv" style="display:<?php echo $graphdisplay;?>">
+<?php
+		// If the graph is already enabled by the config then put the object inside the div now.
+		// Otherwise the graph object is inserted by trafficshowDiv JS when the user opens it.
+		if ($graphdisplay == "inline") {
+?>
 				<object data="graph.php?ifnum=<?=$ifname;?>&amp;ifname=<?=rawurlencode($ifdescr);?>&amp;timeint=<?=$refreshinterval;?>&amp;initdelay=<?=$graphcounter * 2;?>" height="100%" width="100%">
 					<param name="id" value="graph" />
 					<param name="type" value="image/svg+xml" />
 					<param name="pluginspage" value="http://www.adobe.com/svg/viewer/install/auto" />
 				</object>
+<?php
+		}
+?>
 			</div>
 		</div>
 	<?php }