attacker
f3a9e5e8d0
- 主菜单「监控告警」→「监控中心」 - 「告警中心」→「告警服务」移至链路追踪下方 - 新增资源监控 Tab 页（主机/中间件/SNMP/站点拨测） - Agent 新增网络采集器(network)和磁盘IO采集器(diskio) - 后端扩展 Agent 上报模型，支持 NetworkStat/DiskIOStat - 前端 ServerTableRow 展示网络和磁盘IO实时指标 - WebSocket MetricsUpdate 推送扩展
53 lines
2.7 KiB
TypeScript
53 lines
2.7 KiB
TypeScript
// 站点拨测 — HTTP / PING / DNS / TCP / WebSocket 等协议主动监控
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Globe, Wifi, Server, Mail, ArrowUpDown } from 'lucide-react';
|
|
|
|
const probeTypes = [
|
|
{ icon: Globe, name: 'HTTP(S)', color: 'text-blue-400', desc: 'URL 状态码 & 响应时间' },
|
|
{ icon: ArrowUpDown, name: 'PING', color: 'text-emerald-400', desc: 'ICMP 连通性 & 延迟' },
|
|
{ icon: Wifi, name: 'WebSocket', color: 'text-purple-400', desc: 'WS/WSS 连接心跳' },
|
|
{ icon: Globe, name: 'DNS', color: 'text-cyan-400', desc: '域名解析延迟 & 结果验证' },
|
|
{ icon: Server, name: 'TCP', color: 'text-orange-400', desc: '端口连通性检测' },
|
|
{ icon: Server, name: 'UDP', color: 'text-yellow-400', desc: '端口连通性检测' },
|
|
{ icon: Mail, name: 'SMTP', color: 'text-pink-400', desc: '邮件服务连通性' },
|
|
{ icon: Mail, name: 'POP3', color: 'text-indigo-400', desc: '邮件接收服务' },
|
|
{ icon: Globe, name: 'FTP', color: 'text-teal-400', desc: '文件传输服务' },
|
|
];
|
|
|
|
export function SiteMonitor() {
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Probe Type Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
|
|
{probeTypes.map((p) => (
|
|
<Card key={p.name} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] hover:border-[var(--dg-blue)]/30 transition-colors cursor-pointer">
|
|
<CardContent className="p-3 text-center">
|
|
<p.icon className={`h-5 w-5 mx-auto mb-1.5 ${p.color}`} />
|
|
<p className="text-xs font-medium text-[var(--dg-text-primary)]">{p.name}</p>
|
|
<p className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{p.desc}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Summary */}
|
|
<Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<Globe className="h-4 w-4 text-[var(--dg-text-muted)]" />
|
|
<h3 className="text-sm font-medium text-[var(--dg-text-primary)]">拨测任务概览</h3>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
{['总任务数', '正常', '异常', '可用率'].map((label) => (
|
|
<div key={label} className="bg-[var(--dg-bg-tertiary)] rounded-lg p-3 text-center">
|
|
<p className="text-xs text-[var(--dg-text-muted)]">{label}</p>
|
|
<p className="text-lg font-bold text-[var(--dg-text-primary)]">--</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|