From 8145279626b2fe4f6492d979e1ae31a4be24d276 Mon Sep 17 00:00:00 2001
From: WangDL <wangdl2900@163.com>
Date: Sun, 24 May 2026 17:51:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20M4-03=20=E2=80=94=20health=20check=20st?=
 =?UTF-8?q?atus=20section=20in=20Servers=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add getServerHealth API function with types
- Add health check status tags below server cards

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/pages/Servers.tsx      | 26 +++++++++++++++++++++++++-
 src/services/server-api.ts | 11 +++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/pages/Servers.tsx b/src/pages/Servers.tsx
index 3431b8f..babe4d9 100644
--- a/src/pages/Servers.tsx
+++ b/src/pages/Servers.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { Card, Row, Col, Progress, Table, Tag, Typography, Button, Space, Tooltip, App } from 'antd'
 import { CloudServerOutlined, ReloadOutlined, CopyOutlined, GlobalOutlined } from '@ant-design/icons'
-import { getServerMetrics, type ServerInfo, type ProcessInfo } from '@/services/server-api'
+import { getServerMetrics, getServerHealth, type ServerInfo, type ProcessInfo, type ServerHealth } from '@/services/server-api'
 
 const { Text, Title } = Typography
 
@@ -96,6 +96,12 @@ function ServersContent() {
     staleTime: 30_000,
   })
 
+  const { data: health } = useQuery({
+    queryKey: ['servers', 'health'],
+    queryFn: getServerHealth,
+    staleTime: 60_000,
+  })
+
   const handleRefresh = async () => {
     setRefreshing(true)
     await qc.invalidateQueries({ queryKey: ['servers', 'metrics'] })
@@ -115,6 +121,24 @@ function ServersContent() {
           </Col>
         ))}
       </Row>
+
+      {/* Health Check Section */}
+      {health?.length ? (
+        <div style={{ marginTop: 20 }}>
+          <Title level={5} style={{ marginBottom: 12 }}>服务健康检查</Title>
+          {(health as ServerHealth[]).map(h => (
+            <Card key={h.serverName} title={h.serverName} size="small" style={{ marginBottom: 8 }}>
+              <Space wrap>
+                {h.services.map(s => (
+                  <Tag key={s.serviceName} color={s.status === 'healthy' ? 'green' : 'red'}>
+                    {s.serviceName} · {s.message}
+                  </Tag>
+                ))}
+              </Space>
+            </Card>
+          ))}
+        </div>
+      ) : null}
     </div>
   )
 }
diff --git a/src/services/server-api.ts b/src/services/server-api.ts
index 12b54d5..71349eb 100644
--- a/src/services/server-api.ts
+++ b/src/services/server-api.ts
@@ -12,6 +12,17 @@ export interface ServerInfo {
   network: { publicIp: string; privateIp: string; domains: string[] };
 }
 
+export interface ServiceHealthItem {
+  serviceName: string; status: string; message: string;
+}
+export interface ServerHealth {
+  serverName: string; services: ServiceHealthItem[];
+}
+
 export function getServerMetrics(): Promise<{ servers: ServerInfo[] }> {
   return api.get('/admin-api/servers/metrics')
 }
+
+export function getServerHealth(): Promise<ServerHealth[]> {
+  return api.get('/admin-api/servers/health')
+}