diff options
author | Steve Beaver <sbeaver@netgate.com> | 2017-03-20 09:59:25 -0400 |
---|---|---|
committer | Steve Beaver <sbeaver@netgate.com> | 2017-03-20 09:59:25 -0400 |
commit | 26bb4faf19da6194f1f70d202be5850182ccb528 (patch) | |
tree | 56dde7fd33fa47b7e4d6918c4645a03902414bc9 | |
parent | 4c4e7f83437dd0f94f3f8c2e99f2daf0ae5e1a89 (diff) | |
parent | 6e8777f2f181d8814a49e787c65b285fdc9e15eb (diff) | |
download | pfsense-26bb4faf19da6194f1f70d202be5850182ccb528.zip pfsense-26bb4faf19da6194f1f70d202be5850182ccb528.tar.gz |
Merge pull request #3655 from phil-davis/traffic-graph-widget-filter-checkboxes
-rw-r--r-- | src/etc/inc/globals.inc | 3 | ||||
-rw-r--r-- | src/etc/inc/upgrade_config.inc | 35 | ||||
-rw-r--r-- | src/usr/local/www/widgets/widgets/traffic_graphs.widget.php | 494 |
3 files changed, 218 insertions, 314 deletions
diff --git a/src/etc/inc/globals.inc b/src/etc/inc/globals.inc index 3a55902..b49b424 100644 --- a/src/etc/inc/globals.inc +++ b/src/etc/inc/globals.inc @@ -37,6 +37,7 @@ define('DMYPWD', "********"); global $g; $g = array( + "base_packages" => "siproxd", "event_address" => "unix:///var/run/check_reload_status", "factory_shipped_username" => "admin", "factory_shipped_password" => "pfsense", @@ -70,7 +71,7 @@ $g = array( "disablecrashreporter" => false, "crashreporterurl" => "https://crashreporter.pfsense.org/crash_reporter.php", "debug" => false, - "latest_config" => "16.2", + "latest_config" => "16.3", "minimum_ram_warning" => "101", "minimum_ram_warning_text" => "128 MB", "wan_interface_name" => "wan", diff --git a/src/etc/inc/upgrade_config.inc b/src/etc/inc/upgrade_config.inc index b350497..951ff85 100644 --- a/src/etc/inc/upgrade_config.inc +++ b/src/etc/inc/upgrade_config.inc @@ -5157,4 +5157,39 @@ function upgrade_161_to_162() { $config['system']['crypto_hardware'] = "cryptodev"; } } + +/* Traffic graphs widget settings are now stored in a layout similar + * to other widgets. Migrate any old settings. + */ +function upgrade_162_to_163() { + require_once("ipsec.inc"); + global $config; + + foreach (array('refreshinterval', 'invert', 'size', 'backgroundupdate') as $setting) { + if (isset($config['widgets']['trafficgraphs'][$setting])) { + $config['widgets']['traffic_graphs'][$setting] = $config['widgets']['trafficgraphs'][$setting]; + unset($config['widgets']['trafficgraphs'][$setting]); + } + } + + if (isset($config['widgets']['trafficgraphs']['shown'])) { + if (is_array($config['widgets']['trafficgraphs']['shown']['item'])) { + $ifdescrs = get_configured_interface_with_descr(); + + if (ipsec_enabled()) { + $ifdescrs['enc0'] = "IPsec"; + } + + $validNames = array(); + + foreach ($ifdescrs as $ifdescr => $ifname) { + array_push($validNames, $ifdescr); + } + + $config['widgets']['traffic_graphs']['filter'] = implode(',', array_diff($validNames, $config['widgets']['trafficgraphs']['shown']['item'])); + } + + unset($config['widgets']['trafficgraphs']['shown']); + } +} ?> 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 ebe2180..64b72f2 100644 --- a/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php +++ b/src/usr/local/www/widgets/widgets/traffic_graphs.widget.php @@ -26,16 +26,6 @@ * limitations under the License. */ -/* TODOs */ -//re-use on Status > traffic graphs -//figure out why there is a missing datapoint at the start -//name things/variables better -//apply css change to Status > Monitoring -//show interface name and latest in/out in upper left -//add stacked overall graph? - //also show pie graph of lastest precentages of total? (split 50/50 on width) - //make this an option? - $nocsrf = true; require_once("guiconfig.inc"); @@ -49,98 +39,72 @@ if (ipsec_enabled()) { $ifdescrs['enc0'] = "IPsec"; } -//there are no traffic graph widget defaults in config yet. so set them, but don't write the config -if (!is_array($config["widgets"]["trafficgraphs"])) { - - $config["widgets"]["trafficgraphs"] = array(); - $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(); - - foreach($ifdescrs as $ifname => $ifdescr) { - - $ifinfo = get_interface_info($ifname); - - if ($ifinfo['status'] != "down") { - $config["widgets"]["trafficgraphs"]["shown"]["item"][] = $ifname; - } +if ($_POST) { + if (!is_array($user_settings["widgets"]["traffic_graphs"])) { + $user_settings["widgets"]["traffic_graphs"] = array(); } - //TODO silently write to config? (use a config message about saving defaults) - -} - -if(!isset($config["widgets"]["trafficgraphs"]["size"])) { - $config["widgets"]["trafficgraphs"]["size"] = 1; -} - -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 -if ($_POST) { - - //TODO validate data and throw error - $a_config["shown"]["item"] = $_POST["traffic-graph-interfaces"]; + if (isset($_POST["refreshinterval"])) { + $user_settings["widgets"]["traffic_graphs"]["refreshinterval"] = $_POST["refreshinterval"]; + } - // 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 (isset($_POST["invert"])) { + $user_settings["widgets"]["traffic_graphs"]["invert"] = $_POST["invert"]; } - 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 (isset($_POST["backgroundupdate"])) { + $user_settings["widgets"]["traffic_graphs"]["backgroundupdate"] = $_POST["backgroundupdate"]; } - 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." }'); + if (isset($_POST["size"])) { + $user_settings["widgets"]["traffic_graphs"]["size"] = $_POST["size"]; } - - //TODO validate data and throw error - $a_config["size"] = $_POST["traffic-graph-size"]; - write_config(gettext("Updated traffic graph settings via dashboard.")); + $validNames = array(); - header('Content-Type: application/json'); + foreach ($ifdescrs as $ifdescr => $ifname) { + array_push($validNames, $ifdescr); + } - die('{ "success" : "The changes have been applied successfully." }'); + if (is_array($_POST['show'])) { + $user_settings["widgets"]["traffic_graphs"]["filter"] = implode(',', array_diff($validNames, $_POST['show'])); + } else { + $user_settings["widgets"]["traffic_graphs"]["filter"] = ""; + } + save_widget_settings($_SESSION['Username'], $user_settings["widgets"], gettext("Updated traffic graphs widget settings via dashboard.")); + header("Location: /"); + exit(0); } -$refreshinterval = $a_config["refreshinterval"]; - -$ifsarray = []; - -foreach ($a_config["shown"]["item"] as $ifname) { - - $ifinfo = get_interface_info($ifname); +if (isset($user_settings['widgets']['traffic_graphs']['refreshinterval'])) { + $tg_refreshinterval = $user_settings['widgets']['traffic_graphs']['refreshinterval']; +} else { + $tg_refreshinterval = 1; +} - if ($ifinfo['status'] != "down") { - $ifsarray[] = $ifname; - } else { - //TODO throw error? - } +if (isset($user_settings['widgets']['traffic_graphs']['size'])) { + $tg_size = $user_settings['widgets']['traffic_graphs']['size']; +} else { + $tg_size = 1; +} +if (isset($user_settings['widgets']['traffic_graphs']['invert'])) { + $tg_invert = $user_settings['widgets']['traffic_graphs']['invert']; +} else { + $tg_invert = 'true'; } -$allifs = implode("|", $ifsarray); +if (isset($user_settings['widgets']['traffic_graphs']['backgroundupdate'])) { + $tg_backgroundupdate = $user_settings['widgets']['traffic_graphs']['backgroundupdate']; +} else { + $tg_backgroundupdate = 'true'; +} +$skip_tg_items = explode(",", $user_settings['widgets']['traffic_graphs']['filter']); +$tg_displayed = false; +$tg_displayed_ifs_array = []; ?> <script src="/vendor/d3/d3.min.js"></script> <script src="/vendor/nvd3/nv.d3.js"></script> @@ -149,17 +113,132 @@ $allifs = implode("|", $ifsarray); <link href="/vendor/nvd3/nv.d3.css" media="screen, projection" rel="stylesheet" type="text/css"> <div id="traffic-chart-error" class="alert alert-danger" style="display: none;"></div> +<?php + foreach ($ifdescrs as $ifdescr => $ifname) { + if (in_array($ifdescr, $skip_tg_items)) { + continue; + } - <?php - foreach($a_config["shown"]["item"] as $ifname) { - echo '<div id="traffic-chart-' . $ifname . '" class="d3-chart traffic-widget-chart">'; + $ifinfo = get_interface_info($ifdescr); + + if ($ifinfo['status'] == "down") { + // Do not try to display the traffic graph of a down interface, + // even though it is selected for display. + continue; + } + + $tg_displayed = true; + $tg_displayed_ifs_array[] = $ifdescr; + echo '<div id="traffic-chart-' . $ifdescr . '" class="d3-chart traffic-widget-chart">'; echo ' <svg></svg>'; echo '</div>'; } +?> + +<!-- close the body we're wrapped in and add a configuration-panel --> +</div> + +<div id="widget-<?=$widgetname?>_panel-footer" class="panel-footer collapse"> + + <form action="/widgets/widgets/traffic_graphs.widget.php" method="post" class="form-horizontal"> + <div class="form-group"> + <label for="traffic-graph-interval" class="col-sm-3 control-label"><?=gettext('Refresh Interval')?></label> + <div class="col-sm-9"> + <input type="number" id="refreshinterval" name="refreshinterval" value="<?=$tg_refreshinterval?>" min="1" max="10" class="form-control" /> + </div> + </div> + + <div class="form-group"> + <label for="invert" class="col-sm-3 control-label"><?=gettext('Inverse')?></label> + <div class="col-sm-9"> + <select class="form-control" id="invert" name="invert"> + <?php + if ($tg_invert === "true") { + echo '<option value="true" selected>On</option>'; + echo '<option value="false">Off</option>'; + } else { + echo '<option value="true">On</option>'; + echo '<option value="false" selected>Off</option>'; + } + ?> + </select> + </div> + </div> + + <div class="form-group"> + <label for="size" class="col-sm-3 control-label"><?=gettext('Unit Size')?></label> + <div class="col-sm-9"> + <select class="form-control" id="size" name="size"> + <?php + if ($tg_size === "8") { + echo '<option value="8" selected>Bits</option>'; + echo '<option value="1">Bytes</option>'; + } else { + echo '<option value="8">Bits</option>'; + echo '<option value="1" selected>Bytes</option>'; + } + ?> + </select> + </div> + </div> + + <div class="form-group"> + <label for="backgroundupdate" class="col-sm-3 control-label"><?=gettext('Background updates')?></label> + <div class="col-sm-9"> + <select class="form-control" id="backgroundupdate" name="backgroundupdate"> + <?php + if ($tg_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="panel panel-default col-sm-10"> + <div class="panel-body"> + <div class="table responsive"> + <table class="table table-striped table-hover table-condensed"> + <thead> + <tr> + <th><?=gettext("Interface")?></th> + <th><?=gettext("Show")?></th> + </tr> + </thead> + <tbody> + <?php + $idx = 0; + + foreach ($ifdescrs as $ifdescr => $ifname): ?> + <tr> + <td><?=$ifname?></td> + <td class="col-sm-2"><input id="show[]" name ="show[]" value="<?=$ifdescr?>" type="checkbox" <?=(!in_array($ifdescr, $skip_tg_items) ? 'checked':'')?>></td> + </tr> + <?php + endforeach; + ?> + </tbody> + </table> + </div> + </div> + </div> - <script type="text/javascript"> + <div class="form-group"> + <div class="col-sm-offset-3 col-sm-6"> + <button type="submit" class="btn btn-primary"><i class="fa fa-save icon-embed-btn"></i><?=gettext('Save')?></button> + <button id="showalltgitems" type="button" class="btn btn-info"><i class="fa fa-undo icon-embed-btn"></i><?=gettext('All')?></button> + </div> + </div> + </form> + +<script type="text/javascript"> //<![CDATA[ +// Used by /js/traffic-graphs.js to display description from name var graph_interfacenames = <?php foreach ($ifdescrs as $ifname => $ifdescr) { $iflist[$ifname] = $ifdescr; @@ -169,14 +248,14 @@ var graph_interfacenames = <?php events.push(function() { - var InterfaceString = "<?=$allifs?>"; + var InterfaceString = "<?=implode("|", $tg_displayed_ifs_array)?>"; //store saved settings in a fresh localstorage localStorage.clear(); - localStorage.setItem('interval', <?=$refreshinterval?>); - localStorage.setItem('invert', <?=$a_config["invert"]?>); - localStorage.setItem('size', <?=$a_config["size"]?>); - localStorage.setItem('backgroundupdate', <?=$a_config["backgroundupdate"]?>); + localStorage.setItem('interval', <?=$tg_refreshinterval?>); + localStorage.setItem('invert', <?=$tg_invert?>); + localStorage.setItem('size', <?=$tg_size?>); + localStorage.setItem('backgroundupdate', <?=$tg_backgroundupdate?>); window.interfaces = InterfaceString.split("|"); window.charts = {}; @@ -203,13 +282,13 @@ events.push(function() { var itemOut = new Object(); itemIn.key = value + " (in)"; - if(localStorage.getItem('invert') === "true") { itemIn.area = true; } + 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; } + if (localStorage.getItem('invert') === "true") { itemOut.area = true; } itemOut.first = true; itemOut.values = [{x: nowTime, y: 0}]; myData[value].push(itemOut); @@ -220,10 +299,10 @@ events.push(function() { //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"){ + if (backgroundupdate) { return; } - if(state === "visible") { + if (state === "visible") { now = then = new Date(Date.now()); @@ -240,13 +319,13 @@ events.push(function() { var itemOut = new Object(); itemIn.key = value + " (in)"; - if(localStorage.getItem('invert') === "true") { itemIn.area = true; } + 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; } + if (localStorage.getItem('invert') === "true") { itemOut.area = true; } itemOut.first = true; itemOut.values = [{x: nowTime, y: 0}]; myData[value].push(itemOut); @@ -258,224 +337,13 @@ events.push(function() { } }); - // 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(); - var backgroundupdate = $( "#traffic-graph-backgroundupdate" ).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, - 'traffic-graph-backgroundupdate' : backgroundupdate - }; - - $.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); - clearInterval(updateTimerIds); - - //remove all old graphs (divs/svgs) - $( ".traffic-widget-chart" ).remove(); - - 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()); - - 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, backgroundupdate); - - $( "#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(); - }); - + $("#showalltgitems").click(function() { + $("#widget-<?=$widgetname?>_panel-footer [id^=show]").each(function() { + $(this).prop("checked", true); + }); + }); }); //]]> </script> <script src="/js/traffic-graphs.js"></script> - -<!-- close the body we're wrapped in and add a configuration-panel --> -</div> - -<div id="widget-<?=$widgetname?>_panel-footer" class="panel-footer collapse"> - - <form id="traffic-graph-form" action="/widgets/widgets/traffic_graphs.widget.php" method="post" class="form-horizontal"> - <div class="form-group"> - <label for="traffic-graph-interfaces" class="col-sm-3 control-label"><?=gettext('Show graphs')?></label> - <div class="col-sm-9"> - <select name="traffic-graph-interfaces[]" id="traffic-graph-interfaces" multiple> - <?php - foreach ($ifdescrs as $ifname => $ifdescr) { - - $if_shown = ""; - if (in_array($ifname, $a_config["shown"]["item"])) { $if_shown = " selected"; }; - echo '<option value="' . $ifname . '"' . $if_shown . '>' . $ifdescr . "</option>\n"; - - } - ?> - </select> - </div> - </div> - - <div class="form-group"> - <label for="traffic-graph-interval" class="col-sm-3 control-label"><?=gettext('Refresh Interval')?></label> - <div class="col-sm-9"> - <input type="number" id="traffic-graph-interval" name="traffic-graph-interval" value="<?=$refreshinterval?>" min="1" max="10" class="form-control" /> - </div> - </div> - - <div class="form-group"> - <label for="traffic-graph-invert" class="col-sm-3 control-label"><?=gettext('Inverse')?></label> - <div class="col-sm-9"> - <select class="form-control" id="traffic-graph-invert" name="traffic-graph-invert"> - <?php - if($a_config["invert"] === "true") { - echo '<option value="true" selected>On</option>'; - echo '<option value="false">Off</option>'; - } else { - echo '<option value="true">On</option>'; - echo '<option value="false" selected>Off</option>'; - } - ?> - </select> - </div> - </div> - - <div class="form-group"> - <label for="traffic-graph-size" class="col-sm-3 control-label"><?=gettext('Unit Size')?></label> - <div class="col-sm-9"> - <select class="form-control" id="traffic-graph-size" name="traffic-graph-size"> - <?php - if($a_config["size"] === "8") { - echo '<option value="8" selected>Bits</option>'; - echo '<option value="1">Bytes</option>'; - } else { - echo '<option value="8">Bits</option>'; - echo '<option value="1" selected>Bytes</option>'; - } - ?> - </select> - </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> - </div> - <div class="col-sm-9"> - <div id="traffic-graph-message"></div> - </div> - </div> - </form> |