mirrors/pfsense
2
0
Fork 0
mirror of https://github.com/pfsense/pfsense.git synced 2025-10-26 11:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Traffic Graphs Widget whitespace

Browse Source
This commit is contained in:
Phil Davis 2017-03-19 11:46:14 +05:45
parent 31b1f1e14d
commit 605ce9be57
No known key found for this signature in database
GPG Key ID: 340A5689A513CA23
1 changed files with 43 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/usr/local/www/widgets/widgets/traffic_graphs.widget.php
View File

@ -33,7 +33,7 @@
//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)
//also show pie graph of lastest percentages of total? (split 50/50 on width)
//make this an option?
$nocsrf = true;
@ -60,7 +60,7 @@ if (!is_array($config["widgets"]["trafficgraphs"])) {
$config["widgets"]["trafficgraphs"]["shown"] = array();
$config["widgets"]["trafficgraphs"]["shown"]["item"] = array();
foreach($ifdescrs as $ifname => $ifdescr) {
foreach ($ifdescrs as $ifname => $ifdescr) {
$ifinfo = get_interface_info($ifname);
@ -74,17 +74,18 @@ if (!is_array($config["widgets"]["trafficgraphs"])) {
}
if(!isset($config["widgets"]["trafficgraphs"]["size"])) {
if (!isset($config["widgets"]["trafficgraphs"]["size"])) {
$config["widgets"]["trafficgraphs"]["size"] = 1;
}
if(!isset($config["widgets"]["trafficgraphs"]["invert"])) {
if (!isset($config["widgets"]["trafficgraphs"]["invert"])) {
$config["widgets"]["trafficgraphs"]["invert"] = "true";
}
if(!isset($config["widgets"]["trafficgraphs"]["backgroundupdate"])) {
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
@ -100,13 +101,13 @@ if ($_POST) {
die('{ "error" : "Refresh Interval is not a valid number between 1 and 10." }');
}
if($_POST["traffic-graph-invert"] === "true" || $_POST["traffic-graph-invert"] === "false") {
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") {
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." }');
@ -151,7 +152,7 @@ $allifs = implode("|", $ifsarray);
<div id="traffic-chart-error" class="alert alert-danger" style="display: none;"></div>
<?php
foreach($a_config["shown"]["item"] as $ifname) {
foreach ($a_config["shown"]["item"] as $ifname) {
echo '<div id="traffic-chart-' . $ifname . '" class="d3-chart traffic-widget-chart">';
echo ' <svg></svg>';
echo '</div>';
@ -203,13 +204,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 +221,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 ($('#traffic-graph-backgroundupdate').val() === "true"){
return;
}
if(state === "visible") {
if (state === "visible") {
now = then = new Date(Date.now());
@ -240,13 +241,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);
@ -259,30 +260,28 @@ events.push(function() {
});
// save new config defaults
$( '#traffic-graph-form' ).submit(function(event) {
$('#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();
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) {
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") {
if (invert != "true" && invert != "false") {
error = 'Invert is not a boolean of true or false.';
}
if(!error) {
if (!error) {
var formData = {
'traffic-graph-interfaces' : interfaces,
@ -301,13 +300,13 @@ events.push(function() {
})
.done(function(message) {
if(message.success) {
if (message.success) {
Visibility.stop(updateIds);
clearInterval(updateTimerIds);
//remove all old graphs (divs/svgs)
$( ".traffic-widget-chart" ).remove();
$(".traffic-widget-chart").remove();
window.interfaces = interfaces;
localStorage.setItem('interval', refreshInterval);
@ -333,13 +332,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);
@ -348,18 +347,18 @@ events.push(function() {
draw_graph(refreshInterval, then, backgroundupdate);
$( "#traffic-graph-message" ).removeClass("text-danger").addClass("text-success");
$( "#traffic-graph-message" ).text(message.success);
$("#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");
$("#traffic-graph-message").empty();
$("#traffic-graph-message").removeClass("text-success");
}, 5000);
} else {
$( "#traffic-graph-message" ).addClass("text-danger");
$( "#traffic-graph-message" ).text(message.error);
$("#traffic-graph-message").addClass("text-danger");
$("#traffic-graph-message").text(message.error);
console.warn(message.error);
@ -368,14 +367,14 @@ events.push(function() {
})
.fail(function() {
console.warn( "The Traffic Graphs widget AJAX request failed." );
console.warn("The Traffic Graphs widget AJAX request failed.");
});
} else {
$( "#traffic-graph-message" ).addClass("text-danger");
$( "#traffic-graph-message" ).text(error);
$("#traffic-graph-message").addClass("text-danger");
$("#traffic-graph-message").text(error);
console.warn(error);
@ -404,7 +403,9 @@ events.push(function() {
foreach ($ifdescrs as $ifname => $ifdescr) {
$if_shown = "";
if (in_array($ifname, $a_config["shown"]["item"])) { $if_shown = " selected"; };
if (in_array($ifname, $a_config["shown"]["item"])) {
$if_shown = " selected";
};
echo '<option value="' . $ifname . '"' . $if_shown . '>' . $ifdescr . "</option>\n";
}
@ -425,7 +426,7 @@ events.push(function() {
<div class="col-sm-9">
<select class="form-control" id="traffic-graph-invert" name="traffic-graph-invert">
<?php
if($a_config["invert"] === "true") {
if ($a_config["invert"] === "true") {
echo '<option value="true" selected>On</option>';
echo '<option value="false">Off</option>';
} else {
@ -442,7 +443,7 @@ events.push(function() {
<div class="col-sm-9">
<select class="form-control" id="traffic-graph-size" name="traffic-graph-size">
<?php
if($a_config["size"] === "8") {
if ($a_config["size"] === "8") {
echo '<option value="8" selected>Bits</option>';
echo '<option value="1">Bytes</option>';
} else {
@ -459,7 +460,7 @@ events.push(function() {
<div class="col-sm-9">
<select class="form-control" id="traffic-graph-backgroundupdate" name="traffic-graph-backgroundupdate">
<?php
if($a_config["backgroundupdate"] === "true") {
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 {