[修改]修改美化了了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,
-        ];
-    }
-}