Show graph of network traffic (rx)

web/app/Sensor/Ifconfig.php

@@ -16,13 +16,50 @@ class Ifconfig extends AbstractSensor {
         $interfaces = [];
         $record = $this->getLastRecord("ifconfig");
         if ($record !== null) {
-            $interfaces = $this->parseIfconfig($record->ifconfig);
+            $interfaces = $this->parseIfconfigRecord($record);
         }
         return view("agent.ifconfig", [
             "server" => $this->getServer(),
             "interfaces" => $interfaces]);
     }
 
+    public function points() {
+        $records = $this->getLastRecords("ifconfig", 289);
+
+        // Compute the array of arrays of interfaces
+        $interfaces = [];
+        foreach ($records as $record) {
+            $interfaces[] = $this->parseIfconfigRecord($record);
+        }
+
+        // Foreach interface, compute the array of points
+        $dataset = [];
+        $current_value = [];
+        foreach ($interfaces[0] as $interface) {
+            $iname = $interface->name;
+            $dataset[$iname] = [
+                "name" => $iname,
+                "points" => []
+            ];
+            $current_value[$interface->name] = $interface->tx;
+        }
+
+        for ($i = 1; $i < count($interfaces); $i++) {
+            foreach ($interfaces[$i] as $interface) {
+                $iname = $interface->name;
+                $delta = $interface->rx - $current_value[$iname];
+                $current_value[$iname] = $interface->rx;
+                $dataset[$iname]["points"][] = new Point(
+                        $interface->time * 1000,
+                        $delta);
+
+            }
+        }
+
+        return $dataset;
+
+    }
+
     /*
     public function cachedMemoryPoints() {
         $records = $this->getLastRecords("ifconfig", 288);
@@ -45,12 +82,22 @@ class Ifconfig extends AbstractSensor {
     const IPV4 = '/^\\s+inet addr:(\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3})/m';
     const RXTX = '/^\\s+RX bytes:(\\d+) .*TX bytes:(\\d+)/m';
 
+    public function parseIfconfigRecord($record) {
+        $interfaces = $this->parseIfconfig($record->ifconfig);
+        foreach ($interfaces as $interface) {
+            $interface->time = $record->time;
+        }
+
+        return $interfaces;
+    }
+
     /**
      * Parse the result of the ifconfig command.
      * @param type $string
      * @return \App\Sensor\NetworkInterface[]
      */
     public function parseIfconfig($string) {
+
         if ($string == null) {
             return [];
         }
@@ -100,6 +147,7 @@ class NetworkInterface {
     public $address;
     public $rx;
     public $tx;
+    public $time;
 
     public function humanReadableSize($bytes, $decimals = 2) {
         $size = array('B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');

web/public/js/sensor.ifconfig.js

+
+window.monitorIfconfigChart = function(element) {
+    var ctx = element.getContext('2d');
+    var config = {
+        type: 'line',
+        data: {
+            datasets: []
+        },
+        options: {
+            legend: {
+                display: true,
+            },
+            scales: {
+                xAxes: [{
+                    type: 'time',
+                    display: true,
+                    scaleLabel: {
+                            display: true,
+                            labelString: 'Time'
+                    }
+                }],
+                yAxes: [{
+                    stacked: true,
+                    ticks: {
+                        beginAtZero:true
+                    },
+                    scaleLabel: {
+                            display: true,
+                            labelString: '[Bytes]'
+                    }
+                }]
+            },
+            annotation: {
+                annotations: []
+            }
+        }
+    };
+    window.memChart = new Chart(ctx, config);
+
+    if (typeof window.monitorURL === 'undefined') {
+        window.monitorURL = "https://monitor.web-d.be";
+    }
+    var meminfo_url = window.monitorURL + "/api/sensor/"
+            + window.monitorServerID + "/" + window.monitorServerToken
+            + "/ifconfig";
+    $.getJSON(meminfo_url, function( data ) {
+        data.foreach(function(dataset){
+            var new_dataset = {
+                label: dataset.name,
+                backgroundColor: window.chartColors.green,
+                borderColor: window.chartColors.green,
+                data: dataset.points
+            };
+            config.data.datasets.push(new_dataset);
+        });
+
+        window.memChart.update();
+    });
+};
\ No newline at end of file

web/resources/views/agent/ifconfig.blade.php

@@ -15,3 +15,11 @@
     </tr>
     @endforeach
 </table>
+
+<canvas id="ifconfig-chart" width='400' height='300'></canvas>
+<script src="/js/sensor.ifconfig.js"></script>
+<script>
+    window.addEventListener('load', function() {
+        window.monitorIfconfigChart(document.getElementById('ifconfig-chart'));
+    });
+</script>
\ No newline at end of file

web/routes/api.php

@@ -56,4 +56,16 @@ Route::get(
             return [
                 "points" => $sensor->loadPoints(),
                 "max" => $server->cpuinfo()["threads"]];
+});
+
+Route::get(
+        'sensor/{server}/{token}/ifconfig',
+        function(Server $server, string $token) {
+            if ($server->read_token != $token) {
+                abort(403);
+            }
+
+            header('Access-Control-Allow-Origin: *');
+            $sensor = new App\Sensor\Ifconfig($server);
+            return $sensor->points();
 });
\ No newline at end of file