362 lines
19 KiB
TypeScript
362 lines
19 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { useNavigate, Link } from 'react-router-dom';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
|
|
} from '@/components/ui/table';
|
|
import {
|
|
BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
|
RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Legend,
|
|
PieChart, Pie, Cell,
|
|
} from 'recharts';
|
|
import {
|
|
RefreshCw, Cloud, Cpu, Container, Boxes, Activity, Server, Shield,
|
|
HardDrive, Layers, Network, ChevronRight, TrendingUp,
|
|
} from 'lucide-react';
|
|
import { kubernetesApi } from '@/services/api';
|
|
|
|
const CHART_COLORS = ['#3B82F6', '#207060', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#14B8A6', '#F97316'];
|
|
|
|
export default function ClusterComparePage() {
|
|
const navigate = useNavigate();
|
|
const [loading, setLoading] = useState(false);
|
|
const [data, setData] = useState<any>(null);
|
|
const [error, setError] = useState<string>('');
|
|
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const res: any = await kubernetesApi.getMultiClusterComparison();
|
|
setData(res || null);
|
|
} catch (e: any) {
|
|
setError(e?.message || '加载失败');
|
|
setData(null);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => { loadData(); }, [loadData]);
|
|
|
|
const clusters: any[] = data?.clusters || [];
|
|
const totals: any = data?.totals || {};
|
|
|
|
// 图表数据准备
|
|
const resourceBarData = clusters.map((c: any) => ({
|
|
name: c.code || c.name,
|
|
节点: c.node_count || 0,
|
|
Pod: c.pod_count || 0,
|
|
Deployment: c.deployment_count || 0,
|
|
Service: c.service_count || 0,
|
|
}));
|
|
|
|
const usageBarData = clusters.map((c: any) => ({
|
|
name: c.code || c.name,
|
|
'CPU %': Number((c.cpu_usage || 0).toFixed(1)),
|
|
'内存 %': Number((c.memory_usage || 0).toFixed(1)),
|
|
}));
|
|
|
|
const radarData = clusters.length > 0 ? [
|
|
{ metric: '节点数', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, c.node_count || 0])) },
|
|
{ metric: 'Pod数', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, Math.min(c.pod_count || 0, 100)])) },
|
|
{ metric: '部署数', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, c.deployment_count || 0])) },
|
|
{ metric: 'CPU使用', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, Number((c.cpu_usage || 0).toFixed(1))])) },
|
|
{ metric: '内存使用', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, Number((c.memory_usage || 0).toFixed(1))])) },
|
|
{ metric: 'CPU核数', ...Object.fromEntries(clusters.map((c: any) => [c.code || c.name, c.total_cpu_cores || 0])) },
|
|
] : [];
|
|
|
|
const nodeRolePie = clusters.flatMap((c: any) => [
|
|
{ name: `${c.code}-Master`, value: c.master_count || 0, fill: CHART_COLORS[1] },
|
|
{ name: `${c.code}-Worker`, value: c.worker_count || 0, fill: CHART_COLORS[0] },
|
|
]).filter(d => d.value > 0);
|
|
|
|
const statusColorMap: Record<string, string> = {
|
|
healthy: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
|
|
warning: 'bg-amber-500/15 text-amber-400 border-amber-500/30',
|
|
error: 'bg-red-500/15 text-red-400 border-red-500/30',
|
|
};
|
|
|
|
// 格式化内存 (MB → GB)
|
|
const fmtMem = (mb: number | undefined) => {
|
|
if (!mb || mb <= 0) return '-';
|
|
return `${(mb / 1024).toFixed(1)} GB`;
|
|
};
|
|
|
|
// 格式化同步时间
|
|
const fmtTime = (t: string | null | undefined) => {
|
|
if (!t) return '从未同步';
|
|
try {
|
|
const d = new Date(t);
|
|
return d.toLocaleString('zh-CN', { hour12: false });
|
|
} catch { return t; }
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-950 text-slate-100">
|
|
{/* Header */}
|
|
<div className="border-b border-slate-800/60 bg-slate-900/40 px-6 py-4 flex items-center justify-between sticky top-0 z-20 backdrop-blur">
|
|
<div className="flex items-center gap-3">
|
|
<Layers className="h-5 w-5 text-blue-400" />
|
|
<div>
|
|
<h1 className="text-lg font-semibold">多集群资源对比看板</h1>
|
|
<p className="text-xs text-slate-500">跨集群资源用量、节点分布、健康状态对比</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="outline" size="sm" onClick={loadData} disabled={loading}
|
|
className="border-slate-700 hover:bg-slate-800">
|
|
<RefreshCw className={`h-3.5 w-3.5 mr-1.5 ${loading ? 'animate-spin' : ''}`} />
|
|
刷新
|
|
</Button>
|
|
<Link to="/kubernetes">
|
|
<Button variant="outline" size="sm" className="border-slate-700 hover:bg-slate-800">
|
|
<Cloud className="h-3.5 w-3.5 mr-1.5" />集群列表
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-6 space-y-6 max-w-[1600px] mx-auto">
|
|
{error && (
|
|
<Card className="border-red-500/30 bg-red-500/5">
|
|
<CardContent className="py-3 text-sm text-red-400">⚠ {error}</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* 概览卡片 */}
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
|
|
{[
|
|
{ label: '集群总数', value: totals.cluster_count || 0, icon: Cloud, color: 'text-blue-400', bg: 'bg-blue-500/10' },
|
|
{ label: '节点总数', value: totals.node_count || 0, icon: Cpu, color: 'text-emerald-400', bg: 'bg-emerald-500/10' },
|
|
{ label: 'Pod 总数', value: totals.pod_count || 0, icon: Container, color: 'text-purple-400', bg: 'bg-purple-500/10' },
|
|
{ label: 'Deployment 总数', value: totals.deployment_count || 0, icon: Boxes, color: 'text-amber-400', bg: 'bg-amber-500/10' },
|
|
{ label: 'Service 总数', value: totals.service_count || 0, icon: Network, color: 'text-cyan-400', bg: 'bg-cyan-500/10' },
|
|
].map((s, i) => (
|
|
<Card key={i} className="bg-slate-900/60 border-slate-800">
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-xs text-slate-500 mb-1">{s.label}</p>
|
|
<p className="text-2xl font-bold">{s.value}</p>
|
|
</div>
|
|
<div className={`p-2.5 rounded-lg ${s.bg}`}>
|
|
<s.icon className={`h-5 w-5 ${s.color}`} />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{clusters.length === 0 && !loading && (
|
|
<Card className="bg-slate-900/60 border-slate-800">
|
|
<CardContent className="py-12 text-center">
|
|
<Cloud className="h-12 w-12 text-slate-700 mx-auto mb-3" />
|
|
<p className="text-slate-500">暂无集群数据，请先添加 K8s 集群并同步</p>
|
|
<Link to="/kubernetes" className="inline-block mt-3">
|
|
<Button variant="outline" size="sm" className="border-slate-700">
|
|
去添加集群 <ChevronRight className="h-3.5 w-3.5 ml-1" />
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{clusters.length > 0 && (
|
|
<>
|
|
{/* 资源对比柱状图 + 使用率柱状图 */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<Card className="bg-slate-900/60 border-slate-800">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Layers className="h-4 w-4 text-blue-400" />
|
|
<h3 className="text-sm font-semibold">资源数量对比</h3>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={280}>
|
|
<BarChart data={resourceBarData} margin={{ top: 5, right: 10, left: -15, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
|
|
<XAxis dataKey="name" tick={{ fill: '#94a3b8', fontSize: 11 }} />
|
|
<YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} />
|
|
<Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
|
|
<Legend wrapperStyle={{ fontSize: 11 }} />
|
|
<Bar dataKey="节点" fill={CHART_COLORS[1]} radius={[3, 3, 0, 0]} />
|
|
<Bar dataKey="Pod" fill={CHART_COLORS[0]} radius={[3, 3, 0, 0]} />
|
|
<Bar dataKey="Deployment" fill={CHART_COLORS[2]} radius={[3, 3, 0, 0]} />
|
|
<Bar dataKey="Service" fill={CHART_COLORS[5]} radius={[3, 3, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-slate-900/60 border-slate-800">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Activity className="h-4 w-4 text-emerald-400" />
|
|
<h3 className="text-sm font-semibold">CPU / 内存使用率对比</h3>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={280}>
|
|
<BarChart data={usageBarData} margin={{ top: 5, right: 10, left: -15, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
|
|
<XAxis dataKey="name" tick={{ fill: '#94a3b8', fontSize: 11 }} />
|
|
<YAxis tick={{ fill: '#94a3b8', fontSize: 11 }} unit="%" />
|
|
<Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
|
|
<Legend wrapperStyle={{ fontSize: 11 }} />
|
|
<Bar dataKey="CPU %" fill={CHART_COLORS[0]} radius={[3, 3, 0, 0]} />
|
|
<Bar dataKey="内存 %" fill={CHART_COLORS[1]} radius={[3, 3, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 雷达图 + 节点角色饼图 */}
|
|
{clusters.length >= 2 && (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<Card className="bg-slate-900/60 border-slate-800">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<TrendingUp className="h-4 w-4 text-purple-400" />
|
|
<h3 className="text-sm font-semibold">资源雷达对比</h3>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={320}>
|
|
<RadarChart data={radarData}>
|
|
<PolarGrid stroke="#1e293b" />
|
|
<PolarAngleAxis dataKey="metric" tick={{ fill: '#94a3b8', fontSize: 11 }} />
|
|
<PolarRadiusAxis tick={{ fill: '#64748b', fontSize: 10 }} />
|
|
{clusters.map((c: any, i: number) => (
|
|
<Radar key={i} name={c.code || c.name}
|
|
dataKey={c.code || c.name}
|
|
stroke={CHART_COLORS[i % CHART_COLORS.length]}
|
|
fill={CHART_COLORS[i % CHART_COLORS.length]}
|
|
fillOpacity={0.15}
|
|
strokeWidth={2}
|
|
/>
|
|
))}
|
|
<Legend wrapperStyle={{ fontSize: 11 }} />
|
|
<Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
|
|
</RadarChart>
|
|
</ResponsiveContainer>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-slate-900/60 border-slate-800">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<Server className="h-4 w-4 text-amber-400" />
|
|
<h3 className="text-sm font-semibold">节点角色分布</h3>
|
|
</div>
|
|
{nodeRolePie.length > 0 ? (
|
|
<ResponsiveContainer width="100%" height={320}>
|
|
<PieChart>
|
|
<Pie data={nodeRolePie} cx="50%" cy="45%" innerRadius={50} outerRadius={90}
|
|
paddingAngle={3} dataKey="value"
|
|
label={(e: any) => `${e.name}: ${e.value}`}
|
|
labelLine={{ stroke: '#475569' }}
|
|
>
|
|
{nodeRolePie.map((_, i) => (
|
|
<Cell key={i} fill={nodeRolePie[i].fill} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip contentStyle={{ background: '#0f172a', border: '1px solid #334155', borderRadius: 8, fontSize: 12 }} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
) : (
|
|
<div className="h-[320px] flex items-center justify-center text-slate-600 text-sm">无节点角色数据</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* 详细对比表格 */}
|
|
<Card className="bg-slate-900/60 border-slate-800">
|
|
<CardContent className="p-5">
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<HardDrive className="h-4 w-4 text-cyan-400" />
|
|
<h3 className="text-sm font-semibold">详细对比</h3>
|
|
<span className="text-xs text-slate-500 ml-2">点击行可进入集群概览</span>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-slate-800 hover:bg-transparent">
|
|
<TableHead className="text-slate-400">集群</TableHead>
|
|
<TableHead className="text-slate-400">状态</TableHead>
|
|
<TableHead className="text-slate-400 text-right">节点</TableHead>
|
|
<TableHead className="text-slate-400 text-right">Pod</TableHead>
|
|
<TableHead className="text-slate-400 text-right">Deployment</TableHead>
|
|
<TableHead className="text-slate-400 text-right">Service</TableHead>
|
|
<TableHead className="text-slate-400 text-right">CPU 核数</TableHead>
|
|
<TableHead className="text-slate-400 text-right">内存</TableHead>
|
|
<TableHead className="text-slate-400 text-right">CPU 使用率</TableHead>
|
|
<TableHead className="text-slate-400 text-right">内存使用率</TableHead>
|
|
<TableHead className="text-slate-400">角色</TableHead>
|
|
<TableHead className="text-slate-400">同步时间</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{clusters.map((c: any) => (
|
|
<TableRow key={c.id}
|
|
className="border-slate-800/50 hover:bg-slate-800/30 cursor-pointer"
|
|
onClick={() => navigate(`/kubernetes/${c.code}`)}
|
|
>
|
|
<TableCell>
|
|
<div className="font-medium text-slate-200">{c.name}</div>
|
|
<div className="text-xs text-slate-500">{c.code} · {c.api_server || '-'}</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline" className={`text-xs ${statusColorMap[c.status] || statusColorMap.error}`}>
|
|
{c.status === 'healthy' ? '✓ 健康' : c.status === 'warning' ? '⚠ 警告' : '✗ 异常'}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right font-mono text-slate-300">{c.node_count}</TableCell>
|
|
<TableCell className="text-right font-mono text-slate-300">{c.pod_count}</TableCell>
|
|
<TableCell className="text-right font-mono text-slate-300">{c.deployment_count}</TableCell>
|
|
<TableCell className="text-right font-mono text-slate-300">{c.service_count}</TableCell>
|
|
<TableCell className="text-right font-mono text-slate-300">{c.total_cpu_cores || '-'}</TableCell>
|
|
<TableCell className="text-right font-mono text-slate-300">{fmtMem(c.total_memory_mb)}</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end gap-1.5">
|
|
<span className="font-mono text-sm text-blue-400">{(c.cpu_usage || 0).toFixed(1)}%</span>
|
|
<div className="w-12 h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
|
<div className="h-full bg-blue-500 rounded-full" style={{ width: `${Math.min(c.cpu_usage || 0, 100)}%` }} />
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end gap-1.5">
|
|
<span className="font-mono text-sm text-emerald-400">{(c.memory_usage || 0).toFixed(1)}%</span>
|
|
<div className="w-12 h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
|
<div className="h-full bg-emerald-500 rounded-full" style={{ width: `${Math.min(c.memory_usage || 0, 100)}%` }} />
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-1 text-xs">
|
|
{(c.master_count > 0) && (
|
|
<span className="text-emerald-400">M:{c.master_count}</span>
|
|
)}
|
|
{(c.worker_count > 0) && (
|
|
<span className="text-blue-400">W:{c.worker_count}</span>
|
|
)}
|
|
{!c.master_count && !c.worker_count && <span className="text-slate-600">-</span>}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-xs text-slate-500">{fmtTime(c.last_sync_at)}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|