diff --git a/web/app/Sensor/LoadAvg.php b/web/app/Sensor/LoadAvg.php index fa6ef2469aa5a6cac9de9838c95b964b257bcb25..861d8f48891fcd484ebca47ff3e77054c9cc2a24 100644 --- a/web/app/Sensor/LoadAvg.php +++ b/web/app/Sensor/LoadAvg.php @@ -34,43 +34,9 @@ class LoadAvg extends AbstractSensor { $points[] = new Point($record->time * 1000, $this->parse($record->loadavg)); } - - - return "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js\"></script>" - . "<p>Current load: " . $this->getLastValue() . "</p>" - . "<canvas id=\"myChart\" width='400' height='300'></canvas>" - . "<script>" - . "var ctx = document.getElementById('myChart').getContext('2d');" - . "var myChart = new Chart(ctx, { - type: 'line', - data: { - datasets: [{ - label: 'Load', - data: " . json_encode($points) . ", - }] - }, - options: { - legend: { - display: false, - }, - scales: { - xAxes: [{ - type: 'time', - display: true, - scaleLabel: { - display: true, - labelString: 'Time' - } - }], - yAxes: [{ - ticks: { - beginAtZero:true - } - }] - } - } -});" - . "</script>"; + return view("agent.loadavg", [ + "current_load" => $this->getLastValue(), + "points" => $points]); } public function status() { diff --git a/web/resources/views/agent/loadavg.blade.php b/web/resources/views/agent/loadavg.blade.php new file mode 100644 index 0000000000000000000000000000000000000000..26526ef2b956bb295bea8e69b4c7308a9a9d209f --- /dev/null +++ b/web/resources/views/agent/loadavg.blade.php @@ -0,0 +1,35 @@ +<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> +<p>Current load: {{ $current_load }}</p> +<canvas id="myChart" width='400' height='300'></canvas> +<script> + var ctx = document.getElementById('myChart').getContext('2d'); + var myChart = new Chart(ctx, { + type: 'line', + data: { + datasets: [{ + label: 'Load', + data: {!! json_encode($points) !!}, + }] + }, + options: { + legend: { + display: false, + }, + scales: { + xAxes: [{ + type: 'time', + display: true, + scaleLabel: { + display: true, + labelString: 'Time' + } + }], + yAxes: [{ + ticks: { + beginAtZero:true + } + }] + } + } + }); +</script>