diff options
author | PiBa-NL <pba_2k3@yahoo.com> | 2017-01-15 19:29:12 +0100 |
---|---|---|
committer | Jared Dillard <jdillard@netgate.com> | 2017-01-23 15:02:20 -0600 |
commit | 400d36cc23a53cc704e6f35a84e259e39c085d9d (patch) | |
tree | 21ac43bb831933b0e00c62603518b040184b5a07 | |
parent | 43916e63b3a59148448956a64140ae9bdaf5423c (diff) | |
download | pfsense-400d36cc23a53cc704e6f35a84e259e39c085d9d.zip pfsense-400d36cc23a53cc704e6f35a84e259e39c085d9d.tar.gz |
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
-rw-r--r-- | src/usr/local/www/js/traffic-graphs.js | 29 | ||||
-rw-r--r-- | src/usr/local/www/status_graph.php | 161 | ||||
-rw-r--r-- | src/usr/local/www/widgets/widgets/traffic_graphs.widget.php | 77 |
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> |