41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
import { Card, Text, Group, Stack, Badge } from "@mantine/core";
|
|
import { IconCheck, IconAlertTriangle, IconX } from "@tabler/icons-react";
|
|
|
|
// 状态映射：颜色 + 图标
|
|
const healthMap = {
|
|
activate: { color: "green", icon: IconCheck },
|
|
error: { color: "red", icon: IconX },
|
|
warning: { color: "yellow", icon: IconAlertTriangle },
|
|
inactive: { color: "gray", icon: IconX },
|
|
};
|
|
|
|
export default function NodeHealthCard({ node }) {
|
|
if (!node || !node.health) return null;
|
|
|
|
const items = Object.entries(node.health); // [['agent', 'activate'], ...]
|
|
|
|
return (
|
|
<Card shadow="sm" radius="md" withBorder>
|
|
<Text fw={600} mb="sm">健康状态</Text>
|
|
<Stack spacing="xs">
|
|
{items.map(([component, status]) => {
|
|
const { color, icon: Icon } = healthMap[status] || healthMap.inactive;
|
|
return (
|
|
<Group key={component} spacing="sm">
|
|
{/* 组件名 */}
|
|
<Text size="sm" fw={600} style={{ minWidth: 60 }}>
|
|
{component}
|
|
</Text>
|
|
|
|
{/* 状态标签 */}
|
|
<Badge color={color} leftSection={<Icon size={14} />} variant="filled">
|
|
{status}
|
|
</Badge>
|
|
</Group>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|