mirror of
https://github.com/RaspAP/raspap-webgui.git
synced 2024-11-22 07:30:23 +00:00
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>
This commit is contained in:
D9ping
parent
76a1236eb6
commit
7b2f42f326
5 changed files with 289 additions and 106 deletions
96
ajax/bandwidth/get_bandwidth.php
Normal file
96
ajax/bandwidth/get_bandwidth.php
Normal file
|
|
@ -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 ' ]';
|
||||
|
||||
|
||||
|
|
@ -6,7 +6,13 @@ $validated = ($user == $config['admin_user']) && password_verify($pass, $config[
|
|||
|
||||
if (!$validated) {
|
||||
header('WWW-Authenticate: Basic realm="RaspAP"');
|
||||
header('HTTP/1.0 401 Unauthorized');
|
||||
die ("Not authorized");
|
||||
if (function_exists('http_response_code')) {
|
||||
// http_response_code will respond with proper HTTP version back.
|
||||
http_response_code(401);
|
||||
} else {
|
||||
header('HTTP/1.0 401 Unauthorized');
|
||||
}
|
||||
|
||||
exit('Not authorized'.PHP_EOL);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,116 +5,106 @@ include_once( 'includes/status_messages.php' );
|
|||
/**
|
||||
* Generate html output for tab with vnstat traffic amount information.
|
||||
*/
|
||||
function DisplayVnstat()
|
||||
function DisplayVnstat(&$extraFooterScripts)
|
||||
{
|
||||
$status = new StatusMessages();
|
||||
exec('vnstat -m ', $stdoutvnstatmonthly, $exitcodemonthly);
|
||||
if ($exitcodemonthly !== 0) {
|
||||
$status->addMessage(sprinf(_('Getting vnstat %s information failed.'), _('daily')), 'error');
|
||||
}
|
||||
|
||||
exec('vnstat -w ', $stdoutvnstatweekly, $exitcodeweekly);
|
||||
if ($exitcodeweekly !== 0) {
|
||||
$status->addMessage(sprinf(_('Getting vnstat %s information failed.'), _('weekly')), 'error');
|
||||
}
|
||||
|
||||
exec('vnstat -d ', $stdoutvnstatdaily, $exitcodedaily);
|
||||
if ($exitcodedaily !== 0) {
|
||||
$status->addMessage(sprinf(_('Getting vnstat %s information failed.'), _('monthly')),
|
||||
'error');
|
||||
}
|
||||
?>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Bandwidth monitoring"); ?></div>
|
||||
<div class="panel-body">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-body">
|
||||
<p><?php $status->showMessages(); ?></p>
|
||||
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="active tabtrafficdaily"><a href="#daily" aria-controls="daily" role="tab" data-toggle="tab"><?php echo _("Daily"); ?></a></li>
|
||||
<li role="presentation" class="tabtrafficweekly"><a href="#weekly" aria-controls="weekly" role="tab" data-toggle="tab"><?php echo _("Weekly"); ?></a></li>
|
||||
<li role="presentation" class="tabtrafficmonthly"><a href="#monthly" aria-controls="monthly" role="tab" data-toggle="tab"><?php echo _("Monthly"); ?></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tabcontenttraffic tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="daily">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4>Daily traffic amount</h4>
|
||||
<div class="col-lg-12">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading"><i class="fa fa-bar-chart fa-fw"></i> <?php echo _("Bandwidth monitoring"); ?></div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<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>
|
||||
<?php /* <li role="presentation" class=""><a href="#hours" aria-controls="hours" role="tab" data-toggle="tab">php echo _("Hourly"); ?</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" id="daily">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4><?php echo _('Daily traffic amount'); ?></h4>
|
||||
<label for="cbxInterfacedaily"><?php echo _('interface'); ?></label> <select id="cbxInterfacedaily" class="form-control" name="interface">
|
||||
<?php
|
||||
foreach ($stdoutvnstatdaily as &$linedaily) {
|
||||
if (empty($linedaily)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
echo ' <code>' , str_replace(' ', ' ', htmlentities($linedaily, ENT_QUOTES)) ,
|
||||
'</code><br />';
|
||||
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;
|
||||
}
|
||||
|
||||
?>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div role="tabpanel" class="tab-pane" id="weekly">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4><?php echo _("Weekly traffic amount"); ?></h4>
|
||||
</select>
|
||||
<div class="hidden alert alert-info" id="divLoaderBandwidthdaily">
|
||||
<?php echo sprintf(_("Loading %s bandwidth chart"), _('daily')); ?>
|
||||
</div>
|
||||
<div id="divBandwidthdaily"></div><br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
foreach ($stdoutvnstatweekly as &$lineweekly) {
|
||||
if (empty($lineweekly)) {
|
||||
continue;
|
||||
}
|
||||
/*
|
||||
<div role="tabpanel" class="tab-pane" id="hourly">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4>php echo _("Hourly traffic amount today"); ?</h4>
|
||||
<label for="cbxInterfacehours"><?php echo _('interface'); ?></label> <select id="cbxInterfacehours" class="form-control" name="interface">
|
||||
php
|
||||
foreach ($interfacesWlo as $interface) {
|
||||
echo ' <option value="' , htmlentities($interface. ENT_QUOTES) , '">' ,
|
||||
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
|
||||
}
|
||||
|
||||
echo ' <code>' , str_replace(' ', ' ', htmlentities($lineweekly, ENT_QUOTES)) ,
|
||||
'</code><br />', PHP_EOL;
|
||||
?
|
||||
</select>
|
||||
<div class="hidden alert alert-info" id="divLoaderBandwidthhourly">
|
||||
<hp echo sprintf(_("Loading %s bandwidth chart"), _('hourly')); ?
|
||||
</div>
|
||||
<div id="divBandwidthhours"></div><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/
|
||||
?>
|
||||
<div role="tabpanel" class="tab-pane" id="monthly">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4><?php echo _("Monthly traffic amount"); ?></h4>
|
||||
<label for="cbxInterfacemonthly"><?php echo _('interface'); ?></label> <select id="cbxInterfacemonthly" class="form-control" name="interface">
|
||||
<?php
|
||||
foreach ($interfacesWlo as $interface) {
|
||||
echo ' <option value="' , htmlentities($interface. ENT_QUOTES) , '">' ,
|
||||
htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div role="tabpanel" class="tab-pane" id="monthly">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4><?php echo _("Monthly traffic amount"); ?></h4>
|
||||
<?php
|
||||
foreach ($stdoutvnstatmonthly as &$linemonthly) {
|
||||
if (empty($linemonthly)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
echo ' <code>' , str_replace(' ', ' ', htmlentities($linemonthly, ENT_QUOTES)) ,
|
||||
'</code><br />' , PHP_EOL;
|
||||
}
|
||||
|
||||
?>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.tabcontenttraffic -->
|
||||
|
||||
</div><!-- /.panel-default -->
|
||||
</div><!-- /.col-md-6 -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /.panel-body -->
|
||||
|
||||
</div><!-- /.panel-primary -->
|
||||
<div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div>
|
||||
</div><!-- /.panel-primary -->
|
||||
</div><!-- /.col-lg-12 -->
|
||||
</select>
|
||||
<div class="hidden alert alert-info" id="divLoaderBandwidthmonthly">
|
||||
<?php echo sprintf(_("Loading %s bandwidth chart"), _('monthly')); ?>
|
||||
</div>
|
||||
<div id="divBandwidthmonthly"></div><br />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.tabcontenttraffic -->
|
||||
</div><!-- /.panel-default -->
|
||||
</div><!-- /.col-md-6 -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /.panel-body -->
|
||||
</div><!-- /.panel-primary -->
|
||||
<div class="panel-footer"><?php echo _("Information provided by vnstat"); ?></div>
|
||||
</div><!-- /.panel-primary -->
|
||||
</div><!-- /.col-lg-12 -->
|
||||
</div><!-- /.row -->
|
||||
<?php
|
||||
$extraFooterScripts[] = array('src'=>'vendor/raphael/raphael.min.js',
|
||||
'defer'=>false);
|
||||
$extraFooterScripts[] = array('src'=>'vendor/morrisjs/morris.min.js', 'defer'=>false);
|
||||
$extraFooterScripts[] = array('src'=>'vendor/datatables/js/jquery.dataTables.min.js', 'defer'=>false);
|
||||
$extraFooterScripts[] = array('src'=>'js/bandwidthcharts.js', 'defer'=>false);
|
||||
}
|
||||
|
||||
|
|
|
|||
25
index.php
25
index.php
|
|
@ -181,6 +181,7 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
|
|||
</div><!-- /.row -->
|
||||
|
||||
<?php
|
||||
$extraFooterScripts = array();
|
||||
// handle page actions
|
||||
switch( $page ) {
|
||||
case "wlan0_info":
|
||||
|
|
@ -214,7 +215,7 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
|
|||
DisplayThemeConfig();
|
||||
break;
|
||||
case "vnstat":
|
||||
DisplayVnstat();
|
||||
DisplayVnstat($extraFooterScripts);
|
||||
break;
|
||||
case "system_info":
|
||||
DisplaySystem();
|
||||
|
|
@ -222,7 +223,8 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
|
|||
default:
|
||||
DisplayDashboard();
|
||||
}
|
||||
?>
|
||||
|
||||
?>
|
||||
</div><!-- /#page-wrapper -->
|
||||
</div><!-- /#wrapper -->
|
||||
|
||||
|
|
@ -238,15 +240,24 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
|
|||
<!-- Metis Menu Plugin JavaScript -->
|
||||
<script src="vendor/metisMenu/metisMenu.min.js"></script>
|
||||
|
||||
<!-- Morris Charts JavaScript -->
|
||||
<!--script src="vendor/raphael/raphael-min.js"></script-->
|
||||
<!--script src="vendor/morrisjs/morris.min.js"></script-->
|
||||
<!--script src="js/morris-data.js"></script-->
|
||||
|
||||
<!-- Custom Theme JavaScript -->
|
||||
<script src="dist/js/sb-admin-2.js"></script>
|
||||
|
||||
<!-- Custom RaspAP JS -->
|
||||
<script src="js/custom.js"></script>
|
||||
|
||||
<?php
|
||||
// Load non default JS/ECMAScript in footer.
|
||||
foreach ($extraFooterScripts as $script) {
|
||||
echo ' <script type="text/javascript" src="' , $script['src'] , '"';
|
||||
if ($script['defer']) {
|
||||
echo ' defer="defer"';
|
||||
}
|
||||
|
||||
// if ($script['async']) { echo ( echo ' defer="async"'; ), intrigity=, nonce= etc. etc.
|
||||
echo '></script>' , PHP_EOL;
|
||||
}
|
||||
|
||||
?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
80
js/bandwidthcharts.js
Normal file
80
js/bandwidthcharts.js
Normal file
|
|
@ -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 a new issue