beenull/raspap-webgui-mirror
1
0
Fork 0
mirror of https://github.com/RaspAP/raspap-webgui.git synced 2024-11-21 23:20:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

new feature data usage hourly

Browse source
This commit is contained in:
Benjamin Leblond 2019-02-27 20:42:36 +01:00
parent fb003a9e29
commit a295cf87c0
4 changed files with 100 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ajax/bandwidth/get_bandwidth.php
View file

@ -26,6 +26,8 @@ if (strlen($interface) > IFNAMSIZ) {
exit('Invalid interface name.'); exit('Invalid interface name.');
} }
require_once './get_bandwidth_hourly.php';
exec(sprintf('vnstat -i %s --json ', escapeshellarg($interface)), $jsonstdoutvnstat, exec(sprintf('vnstat -i %s --json ', escapeshellarg($interface)), $jsonstdoutvnstat,
$exitcodedaily); $exitcodedaily);
if ($exitcodedaily !== 0) { if ($exitcodedaily !== 0) {

63
ajax/bandwidth/get_bandwidth_hourly.php Normal file
View file

@ -0,0 +1,63 @@
<?php
if (filter_input(INPUT_GET, 'tu') == 'h') {
header('X-Content-Type-Options: nosniff');
header('Content-Type: application/json');
$data_template = array(
0 => array('date' => '00:00', 'rx' => 0, 'tx' => 0),
1 => array('date' => '01:00', 'rx' => 0, 'tx' => 0),
2 => array('date' => '02:00', 'rx' => 0, 'tx' => 0),
3 => array('date' => '03:00', 'rx' => 0, 'tx' => 0),
4 => array('date' => '04:00', 'rx' => 0, 'tx' => 0),
5 => array('date' => '05:00', 'rx' => 0, 'tx' => 0),
6 => array('date' => '06:00', 'rx' => 0, 'tx' => 0),
7 => array('date' => '07:00', 'rx' => 0, 'tx' => 0),
8 => array('date' => '08:00', 'rx' => 0, 'tx' => 0),
9 => array('date' => '09:00', 'rx' => 0, 'tx' => 0),
10 => array('date' => '10:00', 'rx' => 0, 'tx' => 0),
11 => array('date' => '11:00', 'rx' => 0, 'tx' => 0),
12 => array('date' => '12:00', 'rx' => 0, 'tx' => 0),
13 => array('date' => '13:00', 'rx' => 0, 'tx' => 0),
14 => array('date' => '14:00', 'rx' => 0, 'tx' => 0),
15 => array('date' => '15:00', 'rx' => 0, 'tx' => 0),
16 => array('date' => '16:00', 'rx' => 0, 'tx' => 0),
17 => array('date' => '17:00', 'rx' => 0, 'tx' => 0),
18 => array('date' => '18:00', 'rx' => 0, 'tx' => 0),
19 => array('date' => '19:00', 'rx' => 0, 'tx' => 0),
20 => array('date' => '20:00', 'rx' => 0, 'tx' => 0),
21 => array('date' => '21:00', 'rx' => 0, 'tx' => 0),
22 => array('date' => '22:00', 'rx' => 0, 'tx' => 0),
23 => array('date' => '23:00', 'rx' => 0, 'tx' => 0)
);
exec(sprintf('vnstat -i %s --json h', escapeshellarg($interface)), $jsonstdoutvnstat, $exitcodedaily);
if ($exitcodedaily !== 0) {
exit('vnstat error');
}
$jsonobj = json_decode($jsonstdoutvnstat[0], true)['interfaces'][0];
$jsonData = $jsonobj['traffic']['hours'];
for ($i = count($jsonData) - 1; $i >= 0; --$i) {
$data_template[$jsonData[$i]['id']]['rx'] = round($jsonData[$i]['rx'] / 1024, 0);
$data_template[$jsonData[$i]['id']]['tx'] = round($jsonData[$i]['tx'] / 1024, 0);
}
$data = array();
$hour = $jsonobj['updated']['time']['hour'];
foreach ($data_template as $key => $value) {
if ($key > $hour) {
array_push($data, $value);
}
}
foreach ($data_template as $key => $value) {
if ($key <= $hour) {
array_push($data, $value);
}
}
echo json_encode($data);
exit(0);
}

35
includes/data_usage.php
View file

@ -5,6 +5,7 @@
*/ */
function DisplayDataUsage(&$extraFooterScripts) function DisplayDataUsage(&$extraFooterScripts)
{ {
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
?> ?>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
@ -16,27 +17,48 @@ function DisplayDataUsage(&$extraFooterScripts)
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<ul id="tabbarBandwidth" class="nav nav-tabs" role="tablist"> <ul id="tabbarBandwidth" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li> <li role="presentation" class="active"><a href="#hourly" aria-controls="hourly" role="tab" data-toggle="tab"><?php echo _("Hourly"); ?></a></li>
<li role="presentation" class=""><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li>
<li role="presentation" class=""><a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab"><?php echo _("Monthly"); ?></a></li> <li role="presentation" class=""><a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab"><?php echo _("Monthly"); ?></a></li>
</ul> </ul>
<div id="tabsBandwidth" class="tabcontenttraffic tab-content"> <div id="tabsBandwidth" class="tabcontenttraffic tab-content">
<div role="tabpanel" class="tab-pane active fade in" id="daily"> <div role="tabpanel" class="tab-pane active fade in" id="hourly">
<div class="row">
<div class="col-lg-12">
<h4><?php echo _('Hourly traffic amount'); ?></h4>
<label for="cbxInterfacehourly"><?php echo _('interface'); ?></label>
<select id="cbxInterfacehourly" class="form-control" name="interfacehourly">
<?php
foreach ($interfacesWlo as $interface) {
echo ' <option value="' , htmlentities($interface, ENT_QUOTES) , '">' ,
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
}
?>
</select>
<div class="hidden alert alert-info" id="divLoaderBandwidthhourly">
<?php echo sprintf(_("Loading %s bandwidth chart"), _('hourly')); ?>
</div>
<div id="divChartBandwidthhourly"></div>
<div id="divTableBandwidthhourly"></div>
</div>
</div>
</div><!-- /.tab-pane -->
<div role="tabpanel" class="tab-pane fade" id="daily">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<h4><?php echo _('Daily traffic amount'); ?></h4> <h4><?php echo _('Daily traffic amount'); ?></h4>
<label for="cbxInterfacedaily"><?php echo _('interface'); ?></label> <label for="cbxInterfacedaily"><?php echo _('interface'); ?></label>
<select id="cbxInterfacedaily" class="form-control" name="interfacedaily"> <select id="cbxInterfacedaily" class="form-control" name="interfacedaily">
<?php <?php
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
foreach ($interfacesWlo as $interface) { foreach ($interfacesWlo as $interface) {
echo ' <option value="' , htmlentities($interface, ENT_QUOTES) , '">' , echo ' <option value="' , htmlentities($interface, ENT_QUOTES) , '">' ,
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL; htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
} }
?> ?>
</select> </select>
<div class="hidden alert alert-info" id="divLoaderBandwidthdaily"><?php <div class="hidden alert alert-info" id="divLoaderBandwidthdaily">
echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?></div> <?php echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?>
</div>
<div id="divChartBandwidthdaily"></div> <div id="divChartBandwidthdaily"></div>
<div id="divTableBandwidthdaily"></div> <div id="divTableBandwidthdaily"></div>
</div> </div>
@ -53,7 +75,6 @@ foreach ($interfacesWlo as $interface) {
echo ' <option value="' , htmlentities($interface, ENT_QUOTES) , '">' , echo ' <option value="' , htmlentities($interface, ENT_QUOTES) , '">' ,
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL; htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
} }
?> ?>
</select> </select>
<div class="hidden alert alert-info" id="divLoaderBandwidthmonthly"> <div class="hidden alert alert-info" id="divLoaderBandwidthmonthly">

12
js/bandwidthcharts.js
View file

@ -9,8 +9,8 @@
element: placeholder, element: placeholder,
xkey: 'date', xkey: 'date',
ykeys: ['rx', 'tx'], ykeys: ['rx', 'tx'],
labels: [_t['send']+' '+datasizeunits.toUpperCase(), labels: [_t['receive']+' '+datasizeunits.toUpperCase(),
_t['receive']+' '+datasizeunits.toUpperCase()] _t['send']+' '+datasizeunits.toUpperCase()]
}); });
return barchart; return barchart;
@ -31,9 +31,11 @@
*/ */
function ShowBandwidthChartHandler(e) { function ShowBandwidthChartHandler(e) {
// Remove all morrisjs charts // Remove all morrisjs charts
$('#divChartBandwidthhourly').empty();
$('#divChartBandwidthdaily').empty(); $('#divChartBandwidthdaily').empty();
$('#divChartBandwidthmonthly').empty(); $('#divChartBandwidthmonthly').empty();
// Remove all datatables // Remove all datatables
$('#divTableBandwidthhourly').empty();
$('#divTableBandwidthdaily').empty(); $('#divTableBandwidthdaily').empty();
$('#divTableBandwidthmonthly').empty(); $('#divTableBandwidthmonthly').empty();
// Construct ajax uri for getting the proper data. // Construct ajax uri for getting the proper data.
@ -66,8 +68,8 @@
'order': [[ 0, 'ASC' ]], 'order': [[ 0, 'ASC' ]],
'columns': [ 'columns': [
{ 'data': 'date' }, { 'data': 'date' },
{ 'data': 'rx', "title": _t['send']+' '+datasizeunits.toUpperCase() }, { 'data': 'rx', "title": _t['receive']+' '+datasizeunits.toUpperCase() },
{ 'data': 'tx', "title": _t['receive']+' '+datasizeunits.toUpperCase() }] { 'data': 'tx', "title": _t['send']+' '+datasizeunits.toUpperCase() }]
}); });
}).fail(function(xhr, textStatus) { }).fail(function(xhr, textStatus) {
if (window.console) { if (window.console) {
@ -80,8 +82,8 @@
$(document).ready(function() { $(document).ready(function() {
$('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler);
$('#cbxInterfacehourly').on('change', ShowBandwidthChartHandler);
$('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler);
$('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler);
$('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler); $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler);
ShowBandwidthChartHandler(); ShowBandwidthChartHandler();
}); });