[修改]修改美化了了widget样式，折线图展示

management-panel/app/Filament/Widgets/PrometheusMemory.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Filament\Widgets;
+
+use App\Services\PrometheusService;
+use Filament\Widgets\ChartWidget;
+
+class PrometheusMemory extends ChartWidget
+{
+    protected static ?string $heading = 'Chart';
+
+    protected function getData(): array
+    {
+        $prometheus = new PrometheusService();
+
+        $memoryUsageRange = $prometheus->queryRange(
+            '(1 - (avg_over_time(node_memory_MemAvailable_bytes[1h]) / avg_over_time(node_memory_MemTotal_bytes[1h]))) * 100',
+            now()->subHour()->timestamp,
+            now()->timestamp,
+            360 // 每6分钟一个数据点
+        );
+
+        $labels = [];
+        $data = [];
+
+        if (!empty($memoryUsageRange['data']['result'][0]['values'])) {
+            foreach ($memoryUsageRange['data']['result'][0]['values'] as $index => $value) {
+                $labels[] = 'Point ' . ($index + 1);
+                $data[] = round($value[1], 2); // 取出每个时间点的内存使用率，并保留两位小数
+            }
+        }
+
+        return [
+            'labels' => $labels,
+            'datasets' => [
+                [
+                    'label' => 'Memory Usage (%)',
+                    'data' => $data,
+                    'borderColor' => '#4CAF50',
+                    'backgroundColor' => 'rgba(76, 175, 80, 0.2)',
+                    'fill' => true,
+                ],
+            ],
+        ];
+    }
+
+    protected function getType(): string
+    {
+        return 'line';
+    }
+}

management-panel/app/Filament/Widgets/PrometheusMetrics.php

@@ -1,29 +0,0 @@
-<?php
-
-namespace App\Filament\Widgets;
-
-use App\Services\PrometheusService;
-use Filament\Widgets\Widget;
-
-class PrometheusMetrics extends Widget
-{
-    protected static string $view = 'filament.widgets.prometheus-metrics';
-
-    protected function getViewData(): array
-    {
-        $prometheus = new PrometheusService();
-
-        $currentMemoryUsage = $prometheus->query('(1 - (node_memory_MemAvailable_bytes / node_memory_MemTotal_bytes)) * 100');
-        $memoryUsageRange = $prometheus->queryRange(
-            '(1 - (avg_over_time(node_memory_MemAvailable_bytes[1h]) / avg_over_time(node_memory_MemTotal_bytes[1h]))) * 100',
-            now()->subHour()->timestamp,
-            now()->timestamp,
-            60
-        );
-
-        return [
-            'currentMemoryUsage' => $currentMemoryUsage,
-            'memoryUsageRange' => $memoryUsageRange,
-        ];
-    }
-}

management-panel/app/Providers/Filament/AdminPanelProvider.php

@@ -2,6 +2,7 @@
 
 namespace App\Providers\Filament;
 
+use App\Filament\Widgets\PrometheusMemory;
 use App\Filament\Widgets\PrometheusMetrics;
 use App\Filament\Widgets\UpdateConfigWidget;
 use Filament\Http\Middleware\Authenticate;
@@ -43,7 +44,7 @@ class AdminPanelProvider extends PanelProvider
                 Widgets\AccountWidget::class,
 //                Widgets\FilamentInfoWidget::class,
                 UpdateConfigWidget::class,
-                PrometheusMetrics::class,
+                PrometheusMemory::class,
             ])
             ->middleware([
                 EncryptCookies::class,

management-panel/resources/views/filament/widgets/prometheus-metrics.blade.php

@@ -1,34 +0,0 @@
-<x-filament-widgets::widget>
-    <x-filament::section>
-        <!-- resources/views/filament/widgets/memory-metrics-widget.blade.php -->
-
-        <div>
-            <h2>当前内存使用率</h2>
-            @if (isset($currentMemoryUsage['data']['result'][0]['value'][1]))
-                <pre>{{ number_format($currentMemoryUsage['data']['result'][0]['value'][1], 2) }}%</pre>
-            @else
-                <p>无法获取内存使用率数据</p>
-            @endif
-
-            <h2>过去一小时内存使用情况</h2>
-            @if (isset($memoryUsageRange['data']['result']) && count($memoryUsageRange['data']['result']) > 0)
-                <ul>
-                    @foreach ($memoryUsageRange['data']['result'] as $result)
-                        <li>
-                            <strong>{{ $result['metric']['instance'] }}:</strong>
-                            <ul>
-                                @foreach ($result['values'] as $value)
-                                    <li>{{ number_format($value[1], 2) }}%</li>
-                                @endforeach
-                            </ul>
-                        </li>
-                    @endforeach
-                </ul>
-            @else
-                <p>无法获取内存使用情况数据</p>
-            @endif
-        </div>
-
-
-    </x-filament::section>
-</x-filament-widgets::widget>