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/1/head
parent
76a1236eb6
commit
7b2f42f326
@ -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);
|
Loading…
Reference in New Issue