mirror of
https://github.com/RaspAP/raspap-webgui.git
synced 2024-11-21 23:20:22 +00:00
new feature data usage hourly
This commit is contained in:
Benjamin Leblond
parent
fb003a9e29
commit
a295cf87c0
4 changed files with 100 additions and 12 deletions
|
|
@ -26,6 +26,8 @@ if (strlen($interface) > IFNAMSIZ) {
|
|||
exit('Invalid interface name.');
|
||||
}
|
||||
|
||||
require_once './get_bandwidth_hourly.php';
|
||||
|
||||
exec(sprintf('vnstat -i %s --json ', escapeshellarg($interface)), $jsonstdoutvnstat,
|
||||
$exitcodedaily);
|
||||
if ($exitcodedaily !== 0) {
|
||||
|
|
|
|||
63
ajax/bandwidth/get_bandwidth_hourly.php
Normal file
63
ajax/bandwidth/get_bandwidth_hourly.php
Normal 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);
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
function DisplayDataUsage(&$extraFooterScripts)
|
||||
{
|
||||
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
|
||||
?>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
|
|
@ -16,27 +17,48 @@ function DisplayDataUsage(&$extraFooterScripts)
|
|||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<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>
|
||||
</ul>
|
||||
<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="col-lg-12">
|
||||
<h4><?php echo _('Daily traffic amount'); ?></h4>
|
||||
<label for="cbxInterfacedaily"><?php echo _('interface'); ?></label>
|
||||
<select id="cbxInterfacedaily" class="form-control" name="interfacedaily">
|
||||
<?php
|
||||
exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
|
||||
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="divLoaderBandwidthdaily"><?php
|
||||
echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?></div>
|
||||
<div class="hidden alert alert-info" id="divLoaderBandwidthdaily">
|
||||
<?php echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?>
|
||||
</div>
|
||||
<div id="divChartBandwidthdaily"></div>
|
||||
<div id="divTableBandwidthdaily"></div>
|
||||
</div>
|
||||
|
|
@ -53,7 +75,6 @@ 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="divLoaderBandwidthmonthly">
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
element: placeholder,
|
||||
xkey: 'date',
|
||||
ykeys: ['rx', 'tx'],
|
||||
labels: [_t['send']+' '+datasizeunits.toUpperCase(),
|
||||
_t['receive']+' '+datasizeunits.toUpperCase()]
|
||||
labels: [_t['receive']+' '+datasizeunits.toUpperCase(),
|
||||
_t['send']+' '+datasizeunits.toUpperCase()]
|
||||
});
|
||||
|
||||
return barchart;
|
||||
|
|
@ -31,9 +31,11 @@
|
|||
*/
|
||||
function ShowBandwidthChartHandler(e) {
|
||||
// Remove all morrisjs charts
|
||||
$('#divChartBandwidthhourly').empty();
|
||||
$('#divChartBandwidthdaily').empty();
|
||||
$('#divChartBandwidthmonthly').empty();
|
||||
// Remove all datatables
|
||||
$('#divTableBandwidthhourly').empty();
|
||||
$('#divTableBandwidthdaily').empty();
|
||||
$('#divTableBandwidthmonthly').empty();
|
||||
// Construct ajax uri for getting the proper data.
|
||||
|
|
@ -66,8 +68,8 @@
|
|||
'order': [[ 0, 'ASC' ]],
|
||||
'columns': [
|
||||
{ 'data': 'date' },
|
||||
{ 'data': 'rx', "title": _t['send']+' '+datasizeunits.toUpperCase() },
|
||||
{ 'data': 'tx', "title": _t['receive']+' '+datasizeunits.toUpperCase() }]
|
||||
{ 'data': 'rx', "title": _t['receive']+' '+datasizeunits.toUpperCase() },
|
||||
{ 'data': 'tx', "title": _t['send']+' '+datasizeunits.toUpperCase() }]
|
||||
});
|
||||
}).fail(function(xhr, textStatus) {
|
||||
if (window.console) {
|
||||
|
|
@ -80,8 +82,8 @@
|
|||
|
||||
$(document).ready(function() {
|
||||
$('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler);
|
||||
$('#cbxInterfacehourly').on('change', ShowBandwidthChartHandler);
|
||||
$('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler);
|
||||
$('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler);
|
||||
$('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler);
|
||||
ShowBandwidthChartHandler();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue