Async loading of meminfo data...

web/app/Sensor/MemInfo.php

@@ -12,23 +12,34 @@ use \App\AbstractSensor;
 class MemInfo extends AbstractSensor {
 
     public function report() {
+
+        return view("agent.meminfo", ["server" => $this->getServer()]);
+    }
+
+    public function usedMemoryPoints() {
         $records = $this->getLastRecords("memory", 288);
 
         $used = [];
-        $cached = [];
         foreach ($records as $record) {
             $meminfo = $this->parseMeminfo($record->memory);
             $used[] = new Point(
                     $record->time * 1000, $meminfo->used() / 1000);
-            $cached[] = new Point(
-                    $record->time * 1000,
-                    $meminfo->cached / 1000);
         }
 
-        return view("agent.meminfo", [
-            "used" => $used,
-            "cached" => $cached,
-            "server" => $this->getServer()]);
+        return $used;
+    }
+
+    public function cachedMemoryPoints() {
+        $records = $this->getLastRecords("memory", 288);
+
+        $points = [];
+        foreach ($records as $record) {
+            $meminfo = $this->parseMeminfo($record->memory);
+            $points[] = new Point(
+                    $record->time * 1000, $meminfo->cached / 1000);
+        }
+
+        return $points;
     }
 
     public function status() {

web/database/migrations/2018_10_17_081036_server_add_token.php

+<?php
+
+use App\Server;
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class ServerAddToken extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('servers', function (Blueprint $table) {
+            $table->string("read_token")->default(str_random(40));
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('servers', function (Blueprint $table) {
+            //
+        });
+    }
+}

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

@@ -10,67 +10,97 @@
         purple: 'rgba(153, 102, 255, 0.2)',
         grey: 'rgba(201, 203, 207, 0.2)'
     };
-    var ctx = document.getElementById('memory-chart').getContext('2d');
-    var myChart = new Chart(ctx, {
-        type: 'line',
-        data: {
-            datasets: [{
-                label: 'Used',
-                backgroundColor: window.chartColors.green,
-		borderColor: window.chartColors.green,
-                data: {!! json_encode($used) !!},
-            },{
-                label: 'Cached',
-                backgroundColor: window.chartColors.orange,
-		borderColor: window.chartColors.orange,
-                data: {!! json_encode($cached) !!},
-            }]
-        },
-        options: {
-            legend: {
-                display: true,
+
+    window.monitorMemChart = function(element) {
+        var ctx = element.getContext('2d');
+        var config = {
+            type: 'line',
+            data: {
+                datasets: []
             },
-            scales: {
-                xAxes: [{
-                    type: 'time',
+            options: {
+                legend: {
                     display: true,
-                    scaleLabel: {
-                            display: true,
-                            labelString: 'Time'
-                    }
-                }],
-                yAxes: [{
-                    stacked: true,
-                    ticks: {
-                        beginAtZero:true
-                    },
-                    scaleLabel: {
-                            display: true,
-                            labelString: 'Memory [MB]'
-                    }
-                }]
-            },
-            annotation: {
-		// Defines when the annotations are drawn.
-		// This allows positioning of the annotation relative to the other
-		// elements of the graph.
-		//
-		// Should be one of: afterDraw, afterDatasetsDraw, beforeDatasetsDraw
-		// See http://www.chartjs.org/docs/#advanced-usage-creating-plugins
-		drawTime: 'afterDatasetsDraw', // (default)
+                },
+                scales: {
+                    xAxes: [{
+                        type: 'time',
+                        display: true,
+                        scaleLabel: {
+                                display: true,
+                                labelString: 'Time'
+                        }
+                    }],
+                    yAxes: [{
+                        stacked: true,
+                        ticks: {
+                            beginAtZero:true
+                        },
+                        scaleLabel: {
+                                display: true,
+                                labelString: 'Memory [MB]'
+                        }
+                    }]
+                },
+                annotation: {
+                    // Defines when the annotations are drawn.
+                    // This allows positioning of the annotation relative to the other
+                    // elements of the graph.
+                    //
+                    // Should be one of: afterDraw, afterDatasetsDraw, beforeDatasetsDraw
+                    // See http://www.chartjs.org/docs/#advanced-usage-creating-plugins
+                    drawTime: 'afterDatasetsDraw', // (default)
 
-		// Array of annotation configuration objects
-		// See below for detailed descriptions of the annotation options
-		annotations: [{
-			drawTime: 'afterDraw', // overrides annotation.drawTime if set
-                        type: 'line',
-                        mode: 'horizontal',
-                        scaleID: 'y-axis-0',
-                        value: '{{ $server->memoryTotal() / 1000 }}',
-                        borderColor: 'red',
-                        borderWidth: 2
-                }]
+                    // Array of annotation configuration objects
+                    // See below for detailed descriptions of the annotation options
+                    annotations: [{
+                            drawTime: 'afterDraw', // overrides annotation.drawTime if set
+                            type: 'line',
+                            mode: 'horizontal',
+                            scaleID: 'y-axis-0',
+                            value: '{{ $server->memoryTotal() / 1000 }}',
+                            borderColor: 'red',
+                            borderWidth: 2
+                    }]
+                }
             }
-        }
+        };
+        window.memChart = new Chart(ctx, config);
+
+        var used_url = "/api/sensor/"
+                + window.monitorServerID + "/" + window.monitorServerToken
+                + "/memory/used"
+        $.getJSON(used_url, function( data ) {
+            var new_dataset = {
+                    label: 'Used',
+                    backgroundColor: window.chartColors.green,
+                    borderColor: window.chartColors.green,
+                    data: data
+                };
+            config.data.datasets.push(new_dataset);
+            window.memChart.update();
+        });
+
+        var cached_url = "/api/sensor/"
+                + window.monitorServerID + "/" + window.monitorServerToken
+                + "/memory/cached"
+        $.getJSON(cached_url, function( data ) {
+            var new_dataset = {
+                     label: 'Cached',
+                    backgroundColor: window.chartColors.orange,
+                    borderColor: window.chartColors.orange,
+                    data: data
+                };
+            config.data.datasets.push(new_dataset);
+            window.memChart.update();
+        });
+    };
+</script>
+<script>
+    window.monitorServerID = {{ $server->id }};
+    window.monitorServerToken = "{{ $server->read_token }}";
+
+    window.addEventListener('load', function() {
+        window.monitorMemChart(document.getElementById('memory-chart'));
     });
 </script>
\ No newline at end of file

web/routes/api.php

@@ -28,3 +28,25 @@ Route::post('record/{server}', function(Request $request, Server $server) {
 
     return "ok";
 });
+
+Route::get(
+        'sensor/{server}/{token}/memory/used',
+        function(Server $server, string $token) {
+            if ($server->read_token != $token) {
+                abort(403);
+            }
+
+            $meminfo = new App\Sensor\MemInfo($server);
+            return $meminfo->usedMemoryPoints();
+});
+
+Route::get(
+        'sensor/{server}/{token}/memory/cached',
+        function(Server $server, string $token) {
+            if ($server->read_token != $token) {
+                abort(403);
+            }
+
+            $meminfo = new App\Sensor\MemInfo($server);
+            return $meminfo->cachedMemoryPoints();
+});
\ No newline at end of file