1219166526
Reorganize modules, add AI Agent smart interaction, include prompt settings, enhance data output with subscriptions, and separate system monitoring. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
230 lines
8.4 KiB
TypeScript
230 lines
8.4 KiB
TypeScript
"use client"
|
||
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Progress } from "@/components/ui/progress"
|
||
import {
|
||
Activity, Server, Database, Cpu, HardDrive,
|
||
Wifi, CheckCircle2, AlertTriangle, XCircle, Clock
|
||
} from "lucide-react"
|
||
|
||
const services = [
|
||
{ name: "数据接入服务", status: "healthy", uptime: "99.99%", latency: "12ms" },
|
||
{ name: "标签计算引擎", status: "healthy", uptime: "99.95%", latency: "45ms" },
|
||
{ name: "AI推理服务", status: "warning", uptime: "98.50%", latency: "230ms" },
|
||
{ name: "API网关", status: "healthy", uptime: "99.99%", latency: "8ms" },
|
||
{ name: "数据存储服务", status: "healthy", uptime: "99.99%", latency: "25ms" },
|
||
{ name: "消息队列", status: "healthy", uptime: "99.98%", latency: "5ms" },
|
||
]
|
||
|
||
const metrics = [
|
||
{ name: "CPU使用率", value: 45, max: 100, unit: "%", status: "normal" },
|
||
{ name: "内存使用率", value: 68, max: 100, unit: "%", status: "normal" },
|
||
{ name: "磁盘使用率", value: 72, max: 100, unit: "%", status: "warning" },
|
||
{ name: "网络带宽", value: 35, max: 100, unit: "%", status: "normal" },
|
||
]
|
||
|
||
export default function SystemHealthPage() {
|
||
const getStatusIcon = (status: string) => {
|
||
switch (status) {
|
||
case "healthy":
|
||
return <CheckCircle2 className="h-5 w-5 text-green-500" />
|
||
case "warning":
|
||
return <AlertTriangle className="h-5 w-5 text-yellow-500" />
|
||
case "error":
|
||
return <XCircle className="h-5 w-5 text-red-500" />
|
||
default:
|
||
return <Clock className="h-5 w-5 text-gray-500" />
|
||
}
|
||
}
|
||
|
||
const getStatusBadge = (status: string) => {
|
||
switch (status) {
|
||
case "healthy":
|
||
return <Badge className="bg-green-100 text-green-700">健康</Badge>
|
||
case "warning":
|
||
return <Badge className="bg-yellow-100 text-yellow-700">警告</Badge>
|
||
case "error":
|
||
return <Badge className="bg-red-100 text-red-700">故障</Badge>
|
||
default:
|
||
return <Badge variant="secondary">未知</Badge>
|
||
}
|
||
}
|
||
|
||
const getProgressColor = (status: string) => {
|
||
switch (status) {
|
||
case "normal":
|
||
return "bg-green-500"
|
||
case "warning":
|
||
return "bg-yellow-500"
|
||
case "critical":
|
||
return "bg-red-500"
|
||
default:
|
||
return "bg-gray-500"
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* 页面标题 */}
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-foreground">系统健康</h1>
|
||
<p className="text-muted-foreground">监控系统运行状态和资源使用情况</p>
|
||
</div>
|
||
|
||
{/* 整体状态 */}
|
||
<Card className="border-green-200 bg-green-50/50">
|
||
<CardContent className="pt-6">
|
||
<div className="flex items-center gap-4">
|
||
<div className="p-3 rounded-full bg-green-100">
|
||
<CheckCircle2 className="h-8 w-8 text-green-600" />
|
||
</div>
|
||
<div>
|
||
<h2 className="text-xl font-semibold text-green-800">系统运行正常</h2>
|
||
<p className="text-green-600">所有核心服务运行正常，1个服务有轻微警告</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 资源监控 */}
|
||
<div className="grid gap-4 md:grid-cols-4">
|
||
{metrics.map((metric) => (
|
||
<Card key={metric.name}>
|
||
<CardContent className="pt-6">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-sm text-muted-foreground">{metric.name}</span>
|
||
<span className="text-lg font-bold">{metric.value}{metric.unit}</span>
|
||
</div>
|
||
<Progress
|
||
value={metric.value}
|
||
className={`h-2 ${metric.status === "warning" ? "[&>div]:bg-yellow-500" : "[&>div]:bg-green-500"}`}
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
{/* 服务状态 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>服务状态</CardTitle>
|
||
<CardDescription>各微服务运行状态监控</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
{services.map((service) => (
|
||
<div
|
||
key={service.name}
|
||
className="flex items-center justify-between p-4 border rounded-lg"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
{getStatusIcon(service.status)}
|
||
<div>
|
||
<p className="font-medium">{service.name}</p>
|
||
<p className="text-sm text-muted-foreground">
|
||
延迟: {service.latency}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="text-right">
|
||
{getStatusBadge(service.status)}
|
||
<p className="text-sm text-muted-foreground mt-1">
|
||
可用率: {service.uptime}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 数据库连接 */}
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Database className="h-5 w-5" />
|
||
数据库连接
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<span>主数据库 (MySQL)</span>
|
||
<Badge className="bg-green-100 text-green-700">已连接</Badge>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span>缓存 (Redis)</span>
|
||
<Badge className="bg-green-100 text-green-700">已连接</Badge>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<span>分析库 (ClickHouse)</span>
|
||
<Badge className="bg-green-100 text-green-700">已连接</Badge>
|
||
</div>
|
||
<div className="grid grid-cols-3 gap-4 pt-4 border-t">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">活跃连接</p>
|
||
<p className="text-xl font-bold">128</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">查询/秒</p>
|
||
<p className="text-xl font-bold">1,250</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">平均延迟</p>
|
||
<p className="text-xl font-bold">8ms</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Server className="h-5 w-5" />
|
||
服务器资源
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<div className="flex items-center justify-between text-sm mb-1">
|
||
<span>CPU (8核)</span>
|
||
<span>45%</span>
|
||
</div>
|
||
<Progress value={45} className="h-2" />
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center justify-between text-sm mb-1">
|
||
<span>内存 (32GB)</span>
|
||
<span>68%</span>
|
||
</div>
|
||
<Progress value={68} className="h-2" />
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center justify-between text-sm mb-1">
|
||
<span>磁盘 (500GB)</span>
|
||
<span>72%</span>
|
||
</div>
|
||
<Progress value={72} className="h-2 [&>div]:bg-yellow-500" />
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4 pt-4 border-t">
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">运行时间</p>
|
||
<p className="text-xl font-bold">45天</p>
|
||
</div>
|
||
<div>
|
||
<p className="text-sm text-muted-foreground">最后重启</p>
|
||
<p className="text-xl font-bold">12-01</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|