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>

ajax/bandwidth/get_bandwidth.php

@@ -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 ' ]';
+
+

includes/authenticate.php

@@ -6,7 +6,13 @@ $validated = ($user == $config['admin_user']) && password_verify($pass, $config[
 
 if (!$validated) {
   header('WWW-Authenticate: Basic realm="RaspAP"');
+  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');
-  die ("Not authorized");
+  }
+
+  exit('Not authorized'.PHP_EOL);
 }
 

includes/vnstat.php

@@ -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 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>
-  <ul class="nav nav-tabs" role="tablist">
+<?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="active tabtrafficdaily"><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="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 id="tabsBandwidth" class="tabcontenttraffic tab-content">
-  <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>
+                            <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) {
+exec("ip -o link show | awk -F ': ' '{print $2}' | grep -v lo ", $interfacesWlo);
-    if (empty($linedaily)) {
+foreach ($interfacesWlo as $interface) {
-        continue;
+    echo '                              <option value="' , htmlentities($interface. ENT_QUOTES) , '">' ,
-    }
+            htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
-
-    echo '          <code>' , str_replace(' ', '&nbsp;', htmlentities($linedaily, ENT_QUOTES)) ,
-       '</code><br />';
 }
 
 ?>
+                            </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
-    <div role="tabpanel" class="tab-pane" id="weekly">
+/*
+                      <div role="tabpanel" class="tab-pane" id="hourly">
                         <div class="row">
                           <div class="col-lg-6">
-          <h4><?php echo _("Weekly traffic amount"); ?></h4>
+                          <h4>php echo _("Hourly traffic amount today"); ?</h4>
-<?php
+                          <label for="cbxInterfacehours"><?php echo _('interface'); ?></label> <select id="cbxInterfacehours" class="form-control" name="interface">
-foreach ($stdoutvnstatweekly as &$lineweekly) {
+php
-    if (empty($lineweekly)) {
+foreach ($interfacesWlo as $interface) {
-        continue;
+    echo '                          <option value="' , htmlentities($interface. ENT_QUOTES) , '">' ,
-    }
+            htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
-
-    echo '          <code>' , str_replace(' ', '&nbsp;', 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>
-      </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 ($stdoutvnstatmonthly as &$linemonthly) {
+foreach ($interfacesWlo as $interface) {
-    if (empty($linemonthly)) {
+    echo '                          <option value="' , htmlentities($interface. ENT_QUOTES) , '">' ,
-        continue;
+            htmlentities($interface, ENT_QUOTES) , '</option>' , PHP_EOL;
-    }
-
-    echo '          <code>' , str_replace(' ', '&nbsp;', htmlentities($linemonthly, ENT_QUOTES)) , 
-       '</code><br />' , PHP_EOL;
 }
 
 ?>
+                          </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);
 }
 

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>

js/bandwidthcharts.js

@@ -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);