Extracted js code to separate file

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;

web/public/js/sensor.memory.js

+
+window.chartColors = {
+    red: 'rgba(255, 99, 132, 0.2)',
+    orange: 'rgba(255, 165, 0, 0.3)',
+    yellow: 'rgba(255, 205, 86, 0.2)',
+    green: 'rgba(0, 178, 0, 0.3)',
+    blue: 'rgba(54, 162, 235, 0.2)',
+    purple: 'rgba(153, 102, 255, 0.2)',
+    grey: 'rgba(201, 203, 207, 0.2)'
+};
+
+window.monitorMemChart = 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: '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
+                }]
+            }
+        }
+    };
+    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();
+    });
+};
\ No newline at end of file

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

 
 <canvas id="memory-chart" width='400' height='300'></canvas>
-<script>
-    window.chartColors = {
-	red: 'rgba(255, 99, 132, 0.2)',
-	orange: 'rgba(255, 165, 0, 0.3)',
-        yellow: 'rgba(255, 205, 86, 0.2)',
-        green: 'rgba(0, 178, 0, 0.3)',
-        blue: 'rgba(54, 162, 235, 0.2)',
-        purple: 'rgba(153, 102, 255, 0.2)',
-        grey: 'rgba(201, 203, 207, 0.2)'
-    };
-
-    window.monitorMemChart = 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: '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
-                    }]
-                }
-            }
-        };
-        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 src="/js/sensor.memory.js"></script>
 <script>
     window.monitorServerID = {{ $server->id }};
     window.monitorServerToken = "{{ $server->read_token }}";