Browse Source
Added Morris.Js chart and jquery.datatable to bandwidth page.
Added Morris.Js chart and jquery.datatable to bandwidth page.
Use ajax for getting bandwidth data. Added support for adding extra scripts in footer if needed. Signed-off-by: D9ping <D9ping@users.noreply.github.com>pull/231/head
D9ping
5 years ago
5 changed files with 286 additions and 103 deletions
-
96ajax/bandwidth/get_bandwidth.php
-
10includes/authenticate.php
-
178includes/vnstat.php
-
25index.php
-
80js/bandwidthcharts.js
@ -0,0 +1,96 @@ |
|||
<?php |
|||
require_once '../../includes/config.php'; |
|||
require_once RASPI_CONFIG.'/raspap.php'; |
|||
|
|||
// For privacy require authentication.
|
|||
session_start(); |
|||
header('X-Frame-Options: DENY'); |
|||
header("Content-Security-Policy: default-src 'none'; connect-src 'self'"); |
|||
require_once '../../includes/authenticate.php'; |
|||
|
|||
$interface = filter_input(INPUT_GET, 'inet', FILTER_SANITIZE_SPECIAL_CHARS); |
|||
if (empty($interface)) { |
|||
// Use first interface if inet parameter not provided.
|
|||
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo); |
|||
if (count($interfacesWlo) > 0) { |
|||
$interface = $interfacesWlo[0]; |
|||
} else { |
|||
exit('No network interfaces found.'); |
|||
} |
|||
} |
|||
|
|||
define('IFNAMSIZ', 16); |
|||
if (strlen($interface) > IFNAMSIZ) { |
|||
exit('Interface name too long.'); |
|||
} elseif(!preg_match('/^[a-zA-Z0-9]+$/', $interface)) { |
|||
exit('Invalid interface name.'); |
|||
} |
|||
|
|||
exec(sprintf('vnstat -i %s --json ', escapeshellarg($interface)), $jsonstdoutvnstat, |
|||
$exitcodedaily); |
|||
if ($exitcodedaily !== 0) { |
|||
exit('vnstat error'); |
|||
} |
|||
|
|||
$jsonobj = json_decode($jsonstdoutvnstat[0], true); |
|||
$timeunits = filter_input(INPUT_GET, 'tu'); |
|||
if ($timeunits === 'm') { |
|||
// months
|
|||
$jsonData = $jsonobj['interfaces'][0]['traffic']['months']; |
|||
//} elseif ($timeunits === 'h') {
|
|||
// $jsonData = $jsonobj['interfaces'][0]['traffic']['hours'];
|
|||
} else { |
|||
// default: days
|
|||
$jsonData = $jsonobj['interfaces'][0]['traffic']['days']; |
|||
} |
|||
|
|||
$datasizeunits = filter_input(INPUT_GET, 'dsu'); |
|||
|
|||
header('X-Content-Type-Options: nosniff'); |
|||
header('Content-Type: application/json'); |
|||
echo '[ '; |
|||
$firstelm = true; |
|||
for ($i = count($jsonData) - 1; $i >= 0; --$i) { |
|||
if ($timeunits === 'm') { |
|||
$dt = DateTime::createFromFormat('Y n', $jsonData[$i]['date']['year'].' '. |
|||
$jsonData[$i]['date']['month']); |
|||
// } elseif ($timeunits === 'h') {
|
|||
// $dt = DateTime::createFromFormat('Y n j G i', $jsonData[$i]['date']['year'].' '.
|
|||
// $jsonData[$i]['date']['month'].' '.
|
|||
// $jsonData[$i]['date']['day'].' '.
|
|||
// $i.' 00');
|
|||
} else { |
|||
$dt = DateTime::createFromFormat('Y n j', $jsonData[$i]['date']['year'].' '. |
|||
$jsonData[$i]['date']['month'].' '. |
|||
$jsonData[$i]['date']['day']); |
|||
} |
|||
|
|||
if ($firstelm) { |
|||
$firstelm = false; |
|||
} else { |
|||
echo ','; |
|||
} |
|||
|
|||
if ($datasizeunits == 'mb') { |
|||
$datasend = round($jsonData[$i]['tx'] / 1024, 0); |
|||
$datareceived = round($jsonData[$i]['rx'] / 1024, 0); |
|||
} else { |
|||
$datasend = $jsonData[$i]['rx']; |
|||
$datareceived = $jsonData[$i]['rx']; |
|||
} |
|||
|
|||
if ($timeunits === 'm') { |
|||
echo '{ "date": "' , $dt->format('Y-m') , '", "rx": "' , $datareceived , |
|||
'", "tx": "' , $datasend , '" }'; |
|||
// } elseif ($timeunits === 'h') {
|
|||
// echo '{ "date": "' , $dt->format('Y-m-d H:i') , '", "rx": ' , $datareceived ,
|
|||
// ', "tx": ' , $datasend , ' }';
|
|||
} else { |
|||
echo '{ "date": "' , $dt->format('Y-m-d') , '", "rx": "' , $datareceived , |
|||
'", "tx": "' , $datasend , '" }'; |
|||
} |
|||
} |
|||
|
|||
echo ' ]'; |
|||
|
|||
|
|||
@ -0,0 +1,80 @@ |
|||
(function($) { |
|||
"use strict"; |
|||
|
|||
/** |
|||
* Create a Morris.js barchart. |
|||
*/ |
|||
function CreateBarChart(placeholder, datasizeunits) { |
|||
var barchart = new Morris.Bar({ |
|||
element: placeholder, |
|||
xkey: 'date', |
|||
ykeys: ['rx', 'tx'], |
|||
labels: ['Received '+datasizeunits, 'Send '+datasizeunits] // NOI18N
|
|||
}); |
|||
|
|||
return barchart; |
|||
} |
|||
|
|||
/** |
|||
* Create a bootstrap data table. |
|||
*/ |
|||
function CreateDataTable(placeholder) { |
|||
$("#"+placeholder).append('<br /><table id="tableBandwidth" class="table table-striped container-fluid"><thead><tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>'); |
|||
} |
|||
|
|||
/** |
|||
* Figure out which tab is selected and remove all existing charts and then |
|||
* construct the proper barchart. |
|||
*/ |
|||
function ShowBandwidthChartHandler(e) { |
|||
// Remove all charts
|
|||
$("#divBandwidthdaily").empty(); |
|||
$("#divBandwidthweekly").empty(); |
|||
$("#divBandwidthmonthly").empty(); |
|||
// Construct ajax uri for getting proper data.
|
|||
var timeunit = $("ul#tabbarBandwidth li.active a").attr("href").substr(1); |
|||
var uri = 'ajax/bandwidth/get_bandwidth.php?'; |
|||
uri += 'inet='; |
|||
uri += encodeURIComponent($("#cbxInterface"+timeunit+" option:selected").text()); |
|||
uri += '&tu='; |
|||
uri += encodeURIComponent(timeunit.substr(0, 1)); |
|||
var datasizeunits = 'mb'; |
|||
uri += '&dsu='+encodeURIComponent(datasizeunits); |
|||
// Init. chart
|
|||
var barchart = CreateBarChart('divBandwidth'+timeunit, datasizeunits); |
|||
// Init. datatable
|
|||
var datatable = CreateDataTable('divBandwidth'+timeunit); |
|||
// Get data for chart
|
|||
$.ajax({ |
|||
url: uri, |
|||
dataType: 'json', |
|||
beforeSend: function() { |
|||
$("#divLoaderBandwidth"+timeunit).removeClass("hidden"); |
|||
} |
|||
}).done(function(jsondata) { |
|||
$("#divLoaderBandwidth"+timeunit).addClass("hidden"); |
|||
barchart.setData(jsondata); |
|||
$('#tableBandwidth').DataTable({ |
|||
"searching": false, |
|||
data: jsondata, |
|||
"columns": [ |
|||
{ "data": "date" }, |
|||
{ "data": "rx", "title": "received "+datasizeunits }, |
|||
{ "data": "tx", "title": "send "+datasizeunits }] |
|||
}); |
|||
}).fail(function(xhr, textStatus) { |
|||
if (window.console) { |
|||
console.error("server error"); |
|||
} else { |
|||
alert("server error"); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
$('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); |
|||
$('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); |
|||
$('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler); |
|||
$('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler); |
|||
ShowBandwidthChartHandler(); |
|||
|
|||
})(jQuery); |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue