From 453b28baf72fea32a8e8f19159bcc9c8eaf104dc Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Fri, 21 Jun 2024 14:49:13 +0200
Subject: [PATCH] fix: make server charts one livewire component with one
 interval selector

---
 app/Livewire/Charts/ServerCpu.php             |  59 -----
 .../ServerMemory.php => Server/Charts.php}    |  27 +-
 .../livewire/charts/server-cpu.blade.php      | 116 ---------
 .../livewire/charts/server-memory.blade.php   | 123 ----------
 .../views/livewire/server/charts.blade.php    | 232 ++++++++++++++++++
 .../views/livewire/server/show.blade.php      |   3 +-
 6 files changed, 248 insertions(+), 312 deletions(-)
 delete mode 100644 app/Livewire/Charts/ServerCpu.php
 rename app/Livewire/{Charts/ServerMemory.php => Server/Charts.php} (53%)
 delete mode 100644 resources/views/livewire/charts/server-cpu.blade.php
 delete mode 100644 resources/views/livewire/charts/server-memory.blade.php
 create mode 100644 resources/views/livewire/server/charts.blade.php

diff --git a/app/Livewire/Charts/ServerCpu.php b/app/Livewire/Charts/ServerCpu.php
deleted file mode 100644
index 5f3283009..000000000
--- a/app/Livewire/Charts/ServerCpu.php
+++ /dev/null
@@ -1,59 +0,0 @@
-<?php
-
-namespace App\Livewire\Charts;
-
-use App\Models\Server as ModelsServer;
-use Livewire\Component;
-
-class ServerCpu extends Component
-{
-    public ModelsServer $server;
-
-    public $chartId = 'server-cpu';
-
-    public $data;
-
-    public $categories;
-
-    public int $interval = 5;
-
-    public bool $poll = true;
-
-    public function render()
-    {
-        return view('livewire.charts.server-cpu');
-    }
-
-    public function pollData()
-    {
-        if ($this->poll || $this->interval <= 10) {
-            $this->loadData();
-            if ($this->interval > 10) {
-                $this->poll = false;
-            }
-        }
-    }
-
-    public function loadData()
-    {
-        try {
-            $metrics = $this->server->getCpuMetrics($this->interval);
-            $metrics = collect($metrics)->map(function ($metric) {
-                return [$metric[0], $metric[1]];
-            });
-            $this->dispatch("refreshChartData-{$this->chartId}", [
-                'seriesData' => $metrics,
-            ]);
-        } catch (\Throwable $e) {
-            return handleError($e, $this);
-        }
-    }
-
-    public function setInterval()
-    {
-        if ($this->interval <= 10) {
-            $this->poll = true;
-        }
-        $this->loadData();
-    }
-}
diff --git a/app/Livewire/Charts/ServerMemory.php b/app/Livewire/Server/Charts.php
similarity index 53%
rename from app/Livewire/Charts/ServerMemory.php
rename to app/Livewire/Server/Charts.php
index 911f267f6..0921c7fa4 100644
--- a/app/Livewire/Charts/ServerMemory.php
+++ b/app/Livewire/Server/Charts.php
@@ -1,15 +1,15 @@
 <?php
 
-namespace App\Livewire\Charts;
+namespace App\Livewire\Server;
 
 use App\Models\Server;
 use Livewire\Component;
 
-class ServerMemory extends Component
+class Charts extends Component
 {
     public Server $server;
 
-    public $chartId = 'server-memory';
+    public $chartId = 'server';
 
     public $data;
 
@@ -19,11 +19,6 @@ class ServerMemory extends Component
 
     public bool $poll = true;
 
-    public function render()
-    {
-        return view('livewire.charts.server-memory');
-    }
-
     public function pollData()
     {
         if ($this->poll || $this->interval <= 10) {
@@ -37,13 +32,21 @@ class ServerMemory extends Component
     public function loadData()
     {
         try {
-            $metrics = $this->server->getMemoryMetrics($this->interval);
-            $metrics = collect($metrics)->map(function ($metric) {
+            $cpuMetrics = $this->server->getCpuMetrics($this->interval);
+            $memoryMetrics = $this->server->getMemoryMetrics($this->interval);
+            $cpuMetrics = collect($cpuMetrics)->map(function ($metric) {
                 return [$metric[0], $metric[1]];
             });
-            $this->dispatch("refreshChartData-{$this->chartId}", [
-                'seriesData' => $metrics,
+            $memoryMetrics = collect($memoryMetrics)->map(function ($metric) {
+                return [$metric[0], $metric[1]];
+            });
+            $this->dispatch("refreshChartData-{$this->chartId}-cpu", [
+                'seriesData' => $cpuMetrics,
             ]);
+            $this->dispatch("refreshChartData-{$this->chartId}-memory", [
+                'seriesData' => $memoryMetrics,
+            ]);
+
         } catch (\Throwable $e) {
             return handleError($e, $this);
         }
diff --git a/resources/views/livewire/charts/server-cpu.blade.php b/resources/views/livewire/charts/server-cpu.blade.php
deleted file mode 100644
index 3aab224f9..000000000
--- a/resources/views/livewire/charts/server-cpu.blade.php
+++ /dev/null
@@ -1,116 +0,0 @@
-<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
-    <h3>CPU (%)</h3>
-    <x-forms.select label="Interval" wire:change="setInterval" id="interval">
-        <option value="5">5 minutes (live)</option>
-        <option value="10">10 minutes (live)</option>
-        <option value="30">30 minutes</option>
-        <option value="60">1 hour</option>
-        <option value="720">12 hours</option>
-        <option value="10080">1 week</option>
-        <option value="43200">30 days</option>
-    </x-forms.select>
-    <div wire:ignore id="{!! $chartId !!}"></div>
-
-    <script>
-        checkTheme();
-        const optionsServerCpu = {
-            stroke: {
-                curve: 'straight',
-            },
-            chart: {
-                height: '150px',
-                id: '{!! $chartId !!}',
-                type: 'area',
-                toolbar: {
-                    show: false,
-                    tools: {
-                        download: true,
-                        selection: false,
-                        zoom: false,
-                        zoomin: false,
-                        zoomout: false,
-                        pan: false,
-                        reset: false
-                    },
-                },
-                animations: {
-                    enabled: false,
-                },
-            },
-            fill: {
-                type: 'gradient',
-            },
-            dataLabels: {
-                enabled: false,
-                offsetY: -10,
-                style: {
-                    colors: ['#FCD452'],
-                },
-                background: {
-                    enabled: false,
-                }
-            },
-            grid: {
-                show: true,
-                borderColor: '',
-            },
-            colors: [baseColor],
-            xaxis: {
-                type: 'datetime',
-            },
-            series: [{
-                data: []
-            }],
-            noData: {
-                text: 'Loading...',
-                style: {
-                    color: textColor,
-                }
-            },
-            tooltip: {
-                enabled: false,
-            },
-            legend: {
-                show: false
-            }
-        }
-        const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}`), optionsServerCpu);
-        serverCpuChart.render();
-        document.addEventListener('livewire:init', () => {
-            Livewire.on('refreshChartData-{!! $chartId !!}', (chartData) => {
-                checkTheme();
-                serverCpuChart.updateOptions({
-                    series: [{
-                        data: chartData[0].seriesData,
-                    }],
-                    colors: [baseColor],
-                    xaxis: {
-                        type: 'datetime',
-                        labels: {
-                            show: true,
-                            style: {
-                                colors: textColor,
-                            }
-                        }
-                    },
-                    yaxis: {
-                        show: true,
-                        labels: {
-                            show: true,
-                            style: {
-                                colors: textColor,
-                            }
-                        }
-                    },
-                    noData: {
-                        text: 'Loading...',
-                        style: {
-                            color: textColor,
-                        }
-                    }
-                });
-            });
-        });
-    </script>
-
-</div>
diff --git a/resources/views/livewire/charts/server-memory.blade.php b/resources/views/livewire/charts/server-memory.blade.php
deleted file mode 100644
index 851b9b975..000000000
--- a/resources/views/livewire/charts/server-memory.blade.php
+++ /dev/null
@@ -1,123 +0,0 @@
-<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
-    <h3>Memory (MB)</h3>
-    <x-forms.select label="Interval" wire:change="setInterval" id="interval">
-        <option value="5">5 minutes (live)</option>
-        <option value="10">10 minutes (live)</option>
-        <option value="30">30 minutes</option>
-        <option value="60">1 hour</option>
-        <option value="720">12 hours</option>
-        <option value="10080">1 week</option>
-        <option value="43200">30 days</option>
-    </x-forms.select>
-    <div wire:ignore id="{!! $chartId !!}"></div>
-
-    <script>
-        checkTheme();
-        const optionsServerMemory = {
-            stroke: {
-                curve: 'straight',
-            },
-            chart: {
-                height: '150px',
-                id: '{!! $chartId !!}',
-                type: 'area',
-                toolbar: {
-                    show: false,
-                    tools: {
-                        download: true,
-                        selection: false,
-                        zoom: false,
-                        zoomin: false,
-                        zoomout: false,
-                        pan: false,
-                        reset: false
-                    },
-                },
-                animations: {
-                    enabled: false,
-                },
-            },
-            fill: {
-                type: 'gradient',
-            },
-            dataLabels: {
-                enabled: false,
-                offsetY: -10,
-                style: {
-                    colors: ['#FCD452'],
-                },
-                background: {
-                    enabled: false,
-                }
-            },
-            grid: {
-                show: true,
-                borderColor: '',
-            },
-            colors: [baseColor],
-            xaxis: {
-                type: 'datetime',
-                labels: {
-                    show: true,
-                    style: {
-                        colors: textColor,
-                    }
-                }
-            },
-            series: [{
-                data: []
-            }],
-            noData: {
-                text: 'Loading...',
-                style: {
-                    color: textColor,
-                }
-            },
-            tooltip: {
-                enabled: false,
-            },
-            legend: {
-                show: false
-            }
-        }
-        const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}`), optionsServerMemory);
-        serverMemoryChart.render();
-        document.addEventListener('livewire:init', () => {
-            Livewire.on('refreshChartData-{!! $chartId !!}', (chartData) => {
-                checkTheme();
-                serverMemoryChart.updateOptions({
-                    series: [{
-                        data: chartData[0].seriesData,
-                    }],
-                    colors: [baseColor],
-                    xaxis: {
-                        type: 'datetime',
-                        labels: {
-                            show: true,
-                            style: {
-                                colors: textColor,
-                            }
-                        }
-                    },
-                    yaxis: {
-                        min: 0,
-                        show: true,
-                        labels: {
-                            show: true,
-                            style: {
-                                colors: textColor,
-                            }
-                        }
-                    },
-                    noData: {
-                        text: 'Loading...',
-                        style: {
-                            color: textColor,
-                        }
-                    }
-                });
-            });
-        });
-    </script>
-
-</div>
diff --git a/resources/views/livewire/server/charts.blade.php b/resources/views/livewire/server/charts.blade.php
new file mode 100644
index 000000000..ab485bd9f
--- /dev/null
+++ b/resources/views/livewire/server/charts.blade.php
@@ -0,0 +1,232 @@
+<div @if ($poll) wire:poll.5000ms='pollData' @endif x-init="$wire.loadData()">
+    <h3>CPU (%)</h3>
+    <x-forms.select label="Interval" wire:change="setInterval" id="interval">
+        <option value="5">5 minutes (live)</option>
+        <option value="10">10 minutes (live)</option>
+        <option value="30">30 minutes</option>
+        <option value="60">1 hour</option>
+        <option value="720">12 hours</option>
+        <option value="10080">1 week</option>
+        <option value="43200">30 days</option>
+    </x-forms.select>
+    <div wire:ignore id="{!! $chartId !!}-cpu"></div>
+
+    <script>
+        checkTheme();
+        const optionsServerCpu = {
+            stroke: {
+                curve: 'straight',
+            },
+            chart: {
+                height: '150px',
+                id: '{!! $chartId !!}-cpu',
+                type: 'area',
+                toolbar: {
+                    show: false,
+                    tools: {
+                        download: true,
+                        selection: false,
+                        zoom: false,
+                        zoomin: false,
+                        zoomout: false,
+                        pan: false,
+                        reset: false
+                    },
+                },
+                animations: {
+                    enabled: false,
+                },
+            },
+            fill: {
+                type: 'gradient',
+            },
+            dataLabels: {
+                enabled: false,
+                offsetY: -10,
+                style: {
+                    colors: ['#FCD452'],
+                },
+                background: {
+                    enabled: false,
+                }
+            },
+            grid: {
+                show: true,
+                borderColor: '',
+            },
+            colors: [baseColor],
+            xaxis: {
+                type: 'datetime',
+            },
+            series: [{
+                data: []
+            }],
+            noData: {
+                text: 'Loading...',
+                style: {
+                    color: textColor,
+                }
+            },
+            tooltip: {
+                enabled: false,
+            },
+            legend: {
+                show: false
+            }
+        }
+        const serverCpuChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-cpu`),
+            optionsServerCpu);
+        serverCpuChart.render();
+        document.addEventListener('livewire:init', () => {
+            Livewire.on('refreshChartData-{!! $chartId !!}-cpu', (chartData) => {
+                checkTheme();
+                serverCpuChart.updateOptions({
+                    series: [{
+                        data: chartData[0].seriesData,
+                    }],
+                    colors: [baseColor],
+                    xaxis: {
+                        type: 'datetime',
+                        labels: {
+                            show: true,
+                            style: {
+                                colors: textColor,
+                            }
+                        }
+                    },
+                    yaxis: {
+                        show: true,
+                        labels: {
+                            show: true,
+                            style: {
+                                colors: textColor,
+                            }
+                        }
+                    },
+                    noData: {
+                        text: 'Loading...',
+                        style: {
+                            color: textColor,
+                        }
+                    }
+                });
+            });
+        });
+    </script>
+
+    <div>
+        <h3>Memory (MB)</h3>
+        <div wire:ignore id="{!! $chartId !!}-memory"></div>
+
+        <script>
+            checkTheme();
+            const optionsServerMemory = {
+                stroke: {
+                    curve: 'straight',
+                },
+                chart: {
+                    height: '150px',
+                    id: '{!! $chartId !!}-memory',
+                    type: 'area',
+                    toolbar: {
+                        show: false,
+                        tools: {
+                            download: true,
+                            selection: false,
+                            zoom: false,
+                            zoomin: false,
+                            zoomout: false,
+                            pan: false,
+                            reset: false
+                        },
+                    },
+                    animations: {
+                        enabled: false,
+                    },
+                },
+                fill: {
+                    type: 'gradient',
+                },
+                dataLabels: {
+                    enabled: false,
+                    offsetY: -10,
+                    style: {
+                        colors: ['#FCD452'],
+                    },
+                    background: {
+                        enabled: false,
+                    }
+                },
+                grid: {
+                    show: true,
+                    borderColor: '',
+                },
+                colors: [baseColor],
+                xaxis: {
+                    type: 'datetime',
+                    labels: {
+                        show: true,
+                        style: {
+                            colors: textColor,
+                        }
+                    }
+                },
+                series: [{
+                    data: []
+                }],
+                noData: {
+                    text: 'Loading...',
+                    style: {
+                        color: textColor,
+                    }
+                },
+                tooltip: {
+                    enabled: false,
+                },
+                legend: {
+                    show: false
+                }
+            }
+            const serverMemoryChart = new ApexCharts(document.getElementById(`{!! $chartId !!}-memory`),
+                optionsServerMemory);
+            serverMemoryChart.render();
+            document.addEventListener('livewire:init', () => {
+                Livewire.on('refreshChartData-{!! $chartId !!}-memory', (chartData) => {
+                    checkTheme();
+                    serverMemoryChart.updateOptions({
+                        series: [{
+                            data: chartData[0].seriesData,
+                        }],
+                        colors: [baseColor],
+                        xaxis: {
+                            type: 'datetime',
+                            labels: {
+                                show: true,
+                                style: {
+                                    colors: textColor,
+                                }
+                            }
+                        },
+                        yaxis: {
+                            min: 0,
+                            show: true,
+                            labels: {
+                                show: true,
+                                style: {
+                                    colors: textColor,
+                                }
+                            }
+                        },
+                        noData: {
+                            text: 'Loading...',
+                            style: {
+                                color: textColor,
+                            }
+                        }
+                    });
+                });
+            });
+        </script>
+
+    </div>
+</div>
diff --git a/resources/views/livewire/server/show.blade.php b/resources/views/livewire/server/show.blade.php
index 0e8a37717..e1cde046f 100644
--- a/resources/views/livewire/server/show.blade.php
+++ b/resources/views/livewire/server/show.blade.php
@@ -7,8 +7,7 @@
     <livewire:server.delete :server="$server" />
     @if ($server->isFunctional() && $server->isMetricsEnabled())
         <div class="pt-10">
-            <livewire:charts.server-cpu :server="$server" />
-            <livewire:charts.server-memory :server="$server" />
+            <livewire:server.charts :server="$server" />
         </div>
     @endif
 </div>