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

.idea/workspace.xml

@@ -4,11 +4,11 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="596fb1a0-d6fb-4db8-a922-13b01593ce79" name="更改" comment="[修改]修改文本 调整了布局">
+    <list default="true" id="596fb1a0-d6fb-4db8-a922-13b01593ce79" name="更改" comment="[增添]添加了Prometheus服务、对应的widget展示（待美化）">
-      <change beforePath="$PROJECT_DIR$/.idea/deployment.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/deployment.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/php.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/php.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/PrometheusMetrics.php" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/management-panel/app/Providers/Filament/AdminPanelProvider.php" beforeDir="false" afterPath="$PROJECT_DIR$/management-panel/app/Providers/Filament/AdminPanelProvider.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/management-panel/resources/views/filament/widgets/prometheus-metrics.blade.php" beforeDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -259,7 +259,7 @@
       <workItem from="1724743649380" duration="22000" />
       <workItem from="1724743707590" duration="5840000" />
       <workItem from="1724806979170" duration="149000" />
-      <workItem from="1724808563307" duration="11263000" />
+      <workItem from="1724808563307" duration="14085000" />
     </task>
     <task id="LOCAL-00001" summary="[增添]添加注册">
       <option name="closed" value="true" />
@@ -365,7 +365,15 @@
       <option name="project" value="LOCAL" />
       <updated>1724749336453</updated>
     </task>
-    <option name="localTasksCounter" value="14" />
+    <task id="LOCAL-00014" summary="[增添]添加了Prometheus服务、对应的widget展示（待美化）">
+      <option name="closed" value="true" />
+      <created>1724829229997</created>
+      <option name="number" value="00014" />
+      <option name="presentableId" value="LOCAL-00014" />
+      <option name="project" value="LOCAL" />
+      <updated>1724829229997</updated>
+    </task>
+    <option name="localTasksCounter" value="15" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -424,6 +432,7 @@
     <MESSAGE value="[修改]修改了Exporter变量名称及页面配置" />
     <MESSAGE value="[增添]增添了datasource中的配置参数及对应页面" />
     <MESSAGE value="[修改]修改文本 调整了布局" />
-    <option name="LAST_COMMIT_MESSAGE" value="[修改]修改文本 调整了布局" />
+    <MESSAGE value="[增添]添加了Prometheus服务、对应的widget展示（待美化）" />
+    <option name="LAST_COMMIT_MESSAGE" value="[增添]添加了Prometheus服务、对应的widget展示（待美化）" />
   </component>
 </project>

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>