attacker
72bfb0e12d
批量转换脚本引入的语法错误已回退，保留稳定的 i18n 转换: - 翻译词典: 22 namespaces, 3600+ keys - 已接入: 145+ 文件 (Dashboard/Login/K8s 主页面/Monitor/System/Deploy) - 语言切换器在 Header 中可用 (🇨🇳/🇺🇸) - tsc 零错误, Vite 构建成功
203 lines
8.3 KiB
TypeScript
203 lines
8.3 KiB
TypeScript
// 主机详情弹窗：展示历史指标趋势图 + 端口发现列表（从 AgentMonitor.tsx 提取） // Logan.Li
|
|
import { useState, useEffect } from 'react';
|
|
import { agentApi } from '@/api';
|
|
import { isOnline, timeAgo, asList } from './agentUtils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Server, Activity, Network, Terminal, Loader2 } from 'lucide-react';
|
|
import {
|
|
AreaChart,
|
|
Area,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import type { JsonData } from '@/types/common';
|
|
|
|
export function HostDetailDialog({
|
|
host,
|
|
onClose,
|
|
onCommand,
|
|
}: {
|
|
host?: JsonData;
|
|
onClose: () => void;
|
|
onCommand: (hostname: string) => void;
|
|
}) {
|
|
const [history, setHistory] = useState<JsonData[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [hours, setHours] = useState(1);
|
|
|
|
useEffect(() => {
|
|
if (!host) return;
|
|
let active = true;
|
|
setLoading(true);
|
|
agentApi
|
|
.getHistory(host.hostname, { hours })
|
|
.then((data) => {
|
|
if (active) setHistory(asList(data));
|
|
})
|
|
.catch(() => { if (active) setHistory([]); })
|
|
.finally(() => { if (active) setLoading(false); });
|
|
return () => { active = false; };
|
|
}, [host, hours]);
|
|
|
|
if (!host) return null;
|
|
|
|
const online = isOnline(host.last_report || host.last_reported_at || host.updated_at);
|
|
const ports: JsonData[] = Array.isArray(host.ports) ? host.ports : [];
|
|
|
|
const chartData = history.map((h) => ({
|
|
time: new Date(h.timestamp || h.time || h.created_at || Date.now()).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
|
|
cpu: Number(h.cpu_percent ?? h.cpu ?? 0),
|
|
mem: Number(h.mem_percent ?? h.mem ?? 0),
|
|
disk: Number(h.disk_percent ?? h.disk ?? 0),
|
|
}));
|
|
|
|
return (
|
|
<Dialog open={!!host} onOpenChange={(v) => { if (!v) onClose(); }}>
|
|
<DialogContent className="max-w-3xl dg-card text-[var(--dg-text-primary)]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
|
|
<Server className="h-5 w-5 dg-text-blue" />
|
|
{host.hostname}
|
|
{online ? (
|
|
<Badge className="bg-emerald-500/15 dg-text-green border border-emerald-500/30">在线</Badge>
|
|
) : (
|
|
<Badge className="bg-red-500/15 dg-text-red border border-red-500/30">离线</Badge>
|
|
)}
|
|
</DialogTitle>
|
|
<DialogDescription className="sr-only">查看主机详情和指标趋势</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
{/* 基本信息 */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
|
|
<InfoCell label="IP 地址" value={host.ip || '--'} />
|
|
<InfoCell label="操作系统" value={host.os || host.platform || '--'} />
|
|
<InfoCell label="最后上报" value={timeAgo(host.last_report || host.last_reported_at || host.updated_at)} />
|
|
<InfoCell label="端口数" value={String(ports.length)} />
|
|
</div>
|
|
|
|
{/* 趋势图 */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-medium text-[var(--dg-text-primary)] flex items-center gap-1.5">
|
|
<Activity className="h-4 w-4 dg-text-blue" />
|
|
指标趋势
|
|
</span>
|
|
<Select value={String(hours)} onValueChange={(v) => setHours(Number(v))}>
|
|
<SelectTrigger size="sm" className="h-7 w-28 dg-input text-[var(--dg-text-secondary)] text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent className="dg-input">
|
|
<SelectItem value="1">最近 1 小时</SelectItem>
|
|
<SelectItem value="6">最近 6 小时</SelectItem>
|
|
<SelectItem value="24">最近 24 小时</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="h-56 rounded-lg bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] p-3">
|
|
{loading ? (
|
|
<div className="h-full flex items-center justify-center">
|
|
<Loader2 className="h-5 w-5 animate-spin dg-text-muted" />
|
|
</div>
|
|
) : chartData.length === 0 ? (
|
|
<div className="h-full flex items-center justify-center text-sm dg-text-muted">暂无历史数据</div>
|
|
) : (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={chartData} margin={{ top: 5, right: 5, bottom: 0, left: -20 }}>
|
|
<defs>
|
|
<linearGradient id="gCpu" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.4} />
|
|
<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
|
|
</linearGradient>
|
|
<linearGradient id="gMem" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#10b981" stopOpacity={0.4} />
|
|
<stop offset="95%" stopColor="#10b981" stopOpacity={0} />
|
|
</linearGradient>
|
|
<linearGradient id="gDisk" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor="#f59e0b" stopOpacity={0.4} />
|
|
<stop offset="95%" stopColor="#f59e0b" stopOpacity={0} />
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
|
|
<XAxis dataKey="time" stroke="#475569" fontSize={11} />
|
|
<YAxis stroke="#475569" fontSize={11} domain={[0, 100]} />
|
|
<Tooltip
|
|
contentStyle={{ backgroundColor: '#0f172a', border: '1px solid #1e293b', borderRadius: '6px', color: '#f8fafc', fontSize: '12px' }}
|
|
/>
|
|
<Area type="monotone" dataKey="cpu" stroke="#3b82f6" fill="url(#gCpu)" name="CPU" />
|
|
<Area type="monotone" dataKey="mem" stroke="#10b981" fill="url(#gMem)" name="内存" />
|
|
<Area type="monotone" dataKey="disk" stroke="#f59e0b" fill="url(#gDisk)" name="磁盘" />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 端口列表 */}
|
|
<div>
|
|
<span className="text-sm font-medium text-[var(--dg-text-primary)] flex items-center gap-1.5 mb-2">
|
|
<Network className="h-4 w-4 dg-text-blue" />
|
|
端口发现 ({ports.length})
|
|
</span>
|
|
{ports.length === 0 ? (
|
|
<p className="text-xs dg-text-muted">暂无端口数据</p>
|
|
) : (
|
|
<div className="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto">
|
|
{ports.map((p, idx) => (
|
|
<Badge key={idx} className="bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border border-[var(--dg-border)]">
|
|
<Network className="h-3 w-3 mr-1" />
|
|
{p.port ?? p}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2">
|
|
<Button
|
|
onClick={() => onCommand(host.hostname)}
|
|
className="bg-blue-600 hover:bg-blue-700 text-white"
|
|
>
|
|
<Terminal className="h-4 w-4 mr-1.5" />
|
|
远程命令
|
|
</Button>
|
|
<Button variant="outline" onClick={onClose} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
|
|
关闭
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function InfoCell({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg px-3 py-2">
|
|
<div className="text-xs dg-text-muted">{label}</div>
|
|
<div className="text-sm text-[var(--dg-text-primary)] font-medium truncate">{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HostDetailDialog;
|