diff --git a/frontend/package.json b/frontend/package.json index 6de02303..fc81eeb7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -66,6 +66,8 @@ "cmdk": "^1.1.1", "dagre": "^0.8.5", "dayjs": "^1.11.13", + "echarts": "^6.0.0", + "echarts-for-react": "^3.0.5", "form-render": "^2.5.6", "less": "^4.2.1", "monaco-editor": "^0.52.2", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index ba3eac42..b00949ef 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -173,6 +173,12 @@ importers: dayjs: specifier: ^1.11.13 version: 1.11.13 + echarts: + specifier: ^6.0.0 + version: 6.0.0 + echarts-for-react: + specifier: ^3.0.5 + version: 3.0.5(echarts@6.0.0)(react@18.3.1) form-render: specifier: ^2.5.6 version: 2.5.6(@types/react@18.3.18)(antd@5.27.5(date-fns@2.30.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immer@10.1.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -2752,6 +2758,15 @@ packages: eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} + echarts-for-react@3.0.5: + resolution: {integrity: sha512-YpEI5Ty7O/2nvCfQ7ybNa+S90DwE8KYZWacGvJW4luUqywP7qStQ+pxDlYOmr4jGDu10mhEkiAuMKcUlT4W5vg==} + peerDependencies: + echarts: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 + react: ^15.0.0 || >=16.0.0 + + echarts@6.0.0: + resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==} + electron-to-chromium@1.5.73: resolution: {integrity: sha512-8wGNxG9tAG5KhGd3eeA0o6ixhiNdgr0DcHWm85XPCphwZgD1lIEoi6t3VERayWao7SF7AAZTw6oARGJeVjH8Kg==} @@ -4106,6 +4121,9 @@ packages: simple-swizzle@0.2.4: resolution: {integrity: sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==} + size-sensor@1.0.2: + resolution: {integrity: sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==} + slash@3.0.0: resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==} engines: {node: '>=8'} @@ -4242,6 +4260,9 @@ packages: ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + tslib@2.3.0: + resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==} + tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} @@ -4411,6 +4432,9 @@ packages: zod@3.24.1: resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==} + zrender@6.0.0: + resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==} + zustand@4.5.5: resolution: {integrity: sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==} engines: {node: '>=12.7.0'} @@ -7272,6 +7296,18 @@ snapshots: eastasianwidth@0.2.0: {} + echarts-for-react@3.0.5(echarts@6.0.0)(react@18.3.1): + dependencies: + echarts: 6.0.0 + fast-deep-equal: 3.1.3 + react: 18.3.1 + size-sensor: 1.0.2 + + echarts@6.0.0: + dependencies: + tslib: 2.3.0 + zrender: 6.0.0 + electron-to-chromium@1.5.73: {} emoji-regex@8.0.0: {} @@ -8777,6 +8813,8 @@ snapshots: dependencies: is-arrayish: 0.3.4 + size-sensor@1.0.2: {} + slash@3.0.0: {} source-map-js@1.2.1: {} @@ -8923,6 +8961,8 @@ snapshots: ts-interface-checker@0.1.13: {} + tslib@2.3.0: {} + tslib@2.8.1: {} type-check@0.4.0: @@ -9052,6 +9092,10 @@ snapshots: zod@3.24.1: {} + zrender@6.0.0: + dependencies: + tslib: 2.3.0 + zustand@4.5.5(@types/react@18.3.18)(immer@10.1.1)(react@18.3.1): dependencies: use-sync-external-store: 1.2.2(react@18.3.1) diff --git a/frontend/src/pages/Resource/Server/List/components/ServerCard.tsx b/frontend/src/pages/Resource/Server/List/components/ServerCard.tsx index d9905c05..1f884e9e 100644 --- a/frontend/src/pages/Resource/Server/List/components/ServerCard.tsx +++ b/frontend/src/pages/Resource/Server/List/components/ServerCard.tsx @@ -16,6 +16,7 @@ import { Tag, FileText, RefreshCw, + BarChart3, } from 'lucide-react'; import { Card, CardContent } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; @@ -38,12 +39,13 @@ interface ServerCardProps { onDelete: (server: ServerResponse) => void; onSSHConnect: (server: ServerResponse) => void; onCollectHardware: (server: ServerResponse) => void; + onMonitor: (server: ServerResponse) => void; isTesting?: boolean; isCollecting?: boolean; getOsIcon: (osType?: string) => React.ReactNode; } -export const ServerCard: React.FC = ({ server, onTest, onEdit, onDelete, onSSHConnect, onCollectHardware, isTesting, isCollecting, getOsIcon }) => { +export const ServerCard: React.FC = ({ server, onTest, onEdit, onDelete, onSSHConnect, onCollectHardware, onMonitor, isTesting, isCollecting, getOsIcon }) => { const [expanded, setExpanded] = React.useState(false); const formatTime = (time?: string) => { @@ -73,6 +75,11 @@ export const ServerCard: React.FC = ({ server, onTest, onEdit, + {/* ID Badge - 悬浮在左上角,类似通知样式 */} +
+ {server.id} +
+ {/* 基础信息 */}
@@ -233,6 +240,20 @@ export const ServerCard: React.FC = ({ server, onTest, onEdit, )}
+ + + + + 监控数据 +