774 lines
38 KiB
TypeScript
774 lines
38 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
||
import {
|
||
Activity,
|
||
Cpu,
|
||
MemoryStick,
|
||
GitBranch,
|
||
Database,
|
||
RefreshCw,
|
||
Download,
|
||
AlertTriangle,
|
||
CheckCircle,
|
||
XCircle,
|
||
HelpCircle,
|
||
} from 'lucide-react';
|
||
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Progress } from '@/components/ui/progress';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { useToast } from '@/components/ui/use-toast';
|
||
import { Skeleton } from '@/components/ui/skeleton';
|
||
import {
|
||
LineChart,
|
||
Line,
|
||
PieChart,
|
||
Pie,
|
||
Cell,
|
||
XAxis,
|
||
YAxis,
|
||
CartesianGrid,
|
||
Tooltip,
|
||
Legend,
|
||
ResponsiveContainer,
|
||
} from 'recharts';
|
||
import type { SystemMetrics, MetricHistoryPoint, ThresholdConfig } from './types';
|
||
import { getAllMetrics } from './service';
|
||
import { ThreadDetailDialog } from './components/ThreadDetailDialog';
|
||
|
||
// 告警阈值配置
|
||
const THRESHOLDS: ThresholdConfig = {
|
||
cpu: {
|
||
warning: 70,
|
||
danger: 90,
|
||
},
|
||
memory: {
|
||
warning: 75,
|
||
danger: 90,
|
||
},
|
||
threadBlocked: {
|
||
warning: 5,
|
||
danger: 10,
|
||
},
|
||
dbConnections: {
|
||
warning: 80,
|
||
danger: 95,
|
||
},
|
||
};
|
||
|
||
// 线程状态颜色
|
||
const THREAD_STATE_COLORS: Record<string, string> = {
|
||
RUNNABLE: '#10b981', // 绿色
|
||
WAITING: '#3b82f6', // 蓝色
|
||
TIMED_WAITING: '#8b5cf6', // 紫色
|
||
BLOCKED: '#ef4444', // 红色
|
||
NEW: '#6b7280', // 灰色
|
||
TERMINATED: '#9ca3af', // 浅灰色
|
||
};
|
||
|
||
const MetricsDashboard: React.FC = () => {
|
||
const { toast } = useToast();
|
||
const [metrics, setMetrics] = useState<SystemMetrics | null>(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [history, setHistory] = useState<MetricHistoryPoint[]>([]);
|
||
const [autoRefresh, setAutoRefresh] = useState(true);
|
||
const [threadDialogOpen, setThreadDialogOpen] = useState(false);
|
||
|
||
// 加载指标数据
|
||
const loadMetrics = useCallback(async (silent: boolean = false) => {
|
||
if (!silent) {
|
||
setLoading(true);
|
||
}
|
||
try {
|
||
const data = await getAllMetrics();
|
||
setMetrics(data);
|
||
|
||
// 添加到历史记录（保留最近20个数据点）
|
||
setHistory(prev => {
|
||
const newPoint = {
|
||
timestamp: data.timestamp,
|
||
heapUsed: data.memory.heapUsed / 1024 / 1024 / 1024, // 转换为 GB
|
||
heapMax: data.memory.heapMax / 1024 / 1024 / 1024,
|
||
cpuUsage: data.cpu.systemCpu * 100,
|
||
};
|
||
|
||
// 检查是否有旧数据（MB单位），如果有则清空重新收集
|
||
if (prev.length > 0 && prev[0].heapUsed > 100) {
|
||
// 旧数据是 MB 单位（通常 > 100），清空
|
||
return [newPoint];
|
||
}
|
||
|
||
const newHistory = [...prev, newPoint];
|
||
return newHistory.slice(-20); // 只保留最近20个点
|
||
});
|
||
|
||
// 检查是否有数据异常（部分接口失败）
|
||
if (!silent) {
|
||
const hasIssues =
|
||
data.health.status === 'UNKNOWN' ||
|
||
data.memory.heapMax === 0 ||
|
||
data.cpu.systemCpu === 0;
|
||
|
||
if (hasIssues) {
|
||
toast({
|
||
title: '部分指标获取失败',
|
||
description: '某些监控指标无法获取，显示的可能是默认值',
|
||
variant: 'default',
|
||
});
|
||
}
|
||
}
|
||
} catch (error: any) {
|
||
console.error('加载指标失败:', error);
|
||
toast({
|
||
variant: 'destructive',
|
||
title: '加载失败',
|
||
description: error.response?.data?.message || '无法获取系统指标数据，请检查后端服务和 actuator 配置',
|
||
});
|
||
} finally {
|
||
if (!silent) {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
}, [toast]);
|
||
|
||
// 初始加载
|
||
useEffect(() => {
|
||
loadMetrics();
|
||
}, [loadMetrics]);
|
||
|
||
// 自动刷新（30秒）
|
||
useEffect(() => {
|
||
if (!autoRefresh) return;
|
||
|
||
const interval = setInterval(() => {
|
||
loadMetrics(true); // 静默刷新
|
||
}, 30000); // 30秒
|
||
|
||
return () => clearInterval(interval);
|
||
}, [autoRefresh, loadMetrics]);
|
||
|
||
// 格式化字节为 GB（统一单位）
|
||
// 处理 JVM 返回 -1 表示"无限制"的情况
|
||
const formatBytes = (bytes: number, showUnlimited: boolean = false): string => {
|
||
if (bytes < 0) {
|
||
return showUnlimited ? '无限制' : '-';
|
||
}
|
||
const gb = bytes / 1024 / 1024 / 1024;
|
||
return `${gb.toFixed(2)} GB`;
|
||
};
|
||
|
||
// 计算内存使用百分比（处理 max 为 -1 或 0 的情况）
|
||
const calcMemoryPercent = (used: number, max: number, committed?: number): number => {
|
||
if (max > 0) {
|
||
return (used / max) * 100;
|
||
}
|
||
// 如果 max 无效，使用 committed 作为参考
|
||
if (committed && committed > 0) {
|
||
return (used / committed) * 100;
|
||
}
|
||
return 0;
|
||
};
|
||
|
||
// 格式化百分比
|
||
const formatPercent = (value: number): string => {
|
||
return value.toFixed(2);
|
||
};
|
||
|
||
// 获取状态颜色
|
||
const getStatusColor = (value: number, threshold: { warning: number; danger: number }) => {
|
||
if (value >= threshold.danger) return 'text-red-600 dark:text-red-400';
|
||
if (value >= threshold.warning) return 'text-yellow-600 dark:text-yellow-400';
|
||
return 'text-green-600 dark:text-green-400';
|
||
};
|
||
|
||
// 获取健康状态图标
|
||
const getHealthIcon = (status: string) => {
|
||
switch (status) {
|
||
case 'UP':
|
||
return <CheckCircle className="h-5 w-5 text-green-600" />;
|
||
case 'DOWN':
|
||
return <XCircle className="h-5 w-5 text-red-600" />;
|
||
default:
|
||
return <HelpCircle className="h-5 w-5 text-gray-600" />;
|
||
}
|
||
};
|
||
|
||
// 导出数据
|
||
const handleExport = () => {
|
||
if (!metrics) return;
|
||
|
||
const data = {
|
||
timestamp: new Date(metrics.timestamp).toLocaleString('zh-CN'),
|
||
health: metrics.health.status,
|
||
cpu: {
|
||
system: formatPercent(metrics.cpu.systemCpu * 100) + '%',
|
||
process: formatPercent(metrics.cpu.processCpu * 100) + '%',
|
||
},
|
||
memory: {
|
||
heap: {
|
||
used: formatBytes(metrics.memory.heapUsed),
|
||
max: formatBytes(metrics.memory.heapMax),
|
||
committed: formatBytes(metrics.memory.heapCommitted),
|
||
percent: formatPercent(metrics.memory.heapPercent) + '%',
|
||
},
|
||
nonHeap: {
|
||
used: formatBytes(metrics.memory.nonHeapUsed),
|
||
max: formatBytes(metrics.memory.nonHeapMax),
|
||
committed: formatBytes(metrics.memory.nonHeapCommitted),
|
||
percent: formatPercent(metrics.memory.nonHeapPercent) + '%',
|
||
},
|
||
regions: metrics.memory.regions ? {
|
||
eden: metrics.memory.regions.eden ? {
|
||
used: formatBytes(metrics.memory.regions.eden.used),
|
||
max: formatBytes(metrics.memory.regions.eden.max, true),
|
||
committed: formatBytes(metrics.memory.regions.eden.committed),
|
||
} : null,
|
||
oldGen: metrics.memory.regions.oldGen ? {
|
||
used: formatBytes(metrics.memory.regions.oldGen.used),
|
||
max: formatBytes(metrics.memory.regions.oldGen.max, true),
|
||
committed: formatBytes(metrics.memory.regions.oldGen.committed),
|
||
} : null,
|
||
survivor: metrics.memory.regions.survivor ? {
|
||
used: formatBytes(metrics.memory.regions.survivor.used),
|
||
max: formatBytes(metrics.memory.regions.survivor.max, true),
|
||
committed: formatBytes(metrics.memory.regions.survivor.committed),
|
||
} : null,
|
||
metaspace: metrics.memory.regions.metaspace ? {
|
||
used: formatBytes(metrics.memory.regions.metaspace.used),
|
||
max: formatBytes(metrics.memory.regions.metaspace.max, true),
|
||
committed: formatBytes(metrics.memory.regions.metaspace.committed),
|
||
} : null,
|
||
} : null,
|
||
},
|
||
threads: metrics.threads,
|
||
hikari: metrics.hikari,
|
||
gc: metrics.gc,
|
||
threadStates: metrics.threadStates,
|
||
};
|
||
|
||
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = `system-metrics-${Date.now()}.json`;
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
|
||
toast({
|
||
title: '导出成功',
|
||
description: '系统指标数据已导出',
|
||
});
|
||
};
|
||
|
||
// 准备线程状态饼图数据
|
||
const threadStateData = metrics
|
||
? Object.entries(metrics.threadStates)
|
||
.filter(([_, value]) => value > 0)
|
||
.map(([name, value]) => ({
|
||
name,
|
||
value,
|
||
}))
|
||
: [];
|
||
|
||
if (loading && !metrics) {
|
||
return (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-bold">系统指标监控</h1>
|
||
<p className="text-muted-foreground mt-1">实时监控系统运行状态和性能指标</p>
|
||
</div>
|
||
</div>
|
||
<div className="grid gap-4 md:grid-cols-4">
|
||
{[1, 2, 3, 4].map(i => (
|
||
<Card key={i}>
|
||
<CardContent className="p-6">
|
||
<Skeleton className="h-20" />
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!metrics) {
|
||
return null;
|
||
}
|
||
|
||
const cpuPercent = metrics.cpu.systemCpu * 100;
|
||
const memoryPercent = metrics.memory.heapPercent;
|
||
const blockedThreads = metrics.threadStates.BLOCKED || 0;
|
||
const dbUsagePercent = metrics.hikari.usagePercent;
|
||
|
||
return (
|
||
<div className="p-6 space-y-6">
|
||
{/* 标题栏 */}
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-3xl font-bold">系统指标监控</h1>
|
||
<p className="text-muted-foreground mt-1">
|
||
实时监控系统运行状态和性能指标 ·
|
||
{autoRefresh && <span className="text-green-600 ml-2">自动刷新 (30秒)</span>}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setAutoRefresh(!autoRefresh)}
|
||
>
|
||
{autoRefresh ? '停止刷新' : '开启刷新'}
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => loadMetrics()}
|
||
disabled={loading}
|
||
>
|
||
<RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
|
||
刷新
|
||
</Button>
|
||
<Button variant="outline" size="sm" onClick={handleExport}>
|
||
<Download className="h-4 w-4 mr-2" />
|
||
导出
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 统计卡片 */}
|
||
<div className="grid gap-4 md:grid-cols-4">
|
||
{/* 健康状态 */}
|
||
<Card className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20 border-blue-200 dark:border-blue-900">
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2">
|
||
{getHealthIcon(metrics.health.status)}
|
||
<span className="text-xs font-medium text-muted-foreground">健康状态</span>
|
||
</div>
|
||
<div className="text-2xl font-bold">
|
||
{metrics.health.status === 'UP' ? '正常' :
|
||
metrics.health.status === 'DOWN' ? '异常' : '未知'}
|
||
</div>
|
||
<Badge
|
||
variant={metrics.health.status === 'UP' ? 'default' : 'destructive'}
|
||
>
|
||
{metrics.health.status}
|
||
</Badge>
|
||
</div>
|
||
<Activity className="h-10 w-10 text-blue-600 dark:text-blue-400 opacity-50" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* CPU 使用率 */}
|
||
<Card className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 border-green-200 dark:border-green-900">
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-2 flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<Cpu className="h-4 w-4" />
|
||
<span className="text-xs font-medium text-muted-foreground">CPU 使用率</span>
|
||
</div>
|
||
<div className={`text-2xl font-bold ${getStatusColor(cpuPercent, THRESHOLDS.cpu)}`}>
|
||
{formatPercent(cpuPercent)}%
|
||
</div>
|
||
<Progress value={cpuPercent} className="h-2" />
|
||
{cpuPercent >= THRESHOLDS.cpu.warning && (
|
||
<div className="flex items-center gap-1 text-xs text-yellow-600">
|
||
<AlertTriangle className="h-3 w-3" />
|
||
CPU 使用率偏高
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 内存使用 */}
|
||
<Card className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 border-purple-200 dark:border-purple-900">
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-2 flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<MemoryStick className="h-4 w-4" />
|
||
<span className="text-xs font-medium text-muted-foreground">JVM 堆内存</span>
|
||
</div>
|
||
<div className={`text-2xl font-bold ${getStatusColor(memoryPercent, THRESHOLDS.memory)}`}>
|
||
{formatBytes(metrics.memory.heapUsed)}
|
||
</div>
|
||
<div className="text-xs text-muted-foreground space-y-0.5">
|
||
<div>最大: {formatBytes(metrics.memory.heapMax)}</div>
|
||
<div>已分配: {formatBytes(metrics.memory.heapCommitted)}</div>
|
||
</div>
|
||
<Progress value={memoryPercent} className="h-2" />
|
||
{memoryPercent >= THRESHOLDS.memory.warning && (
|
||
<div className="flex items-center gap-1 text-xs text-yellow-600">
|
||
<AlertTriangle className="h-3 w-3" />
|
||
内存使用率偏高
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 线程数 */}
|
||
<Card
|
||
className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950/20 dark:to-amber-950/20 border-orange-200 dark:border-orange-900 cursor-pointer hover:shadow-lg transition-shadow"
|
||
onClick={() => setThreadDialogOpen(true)}
|
||
>
|
||
<CardContent className="p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-2">
|
||
<GitBranch className="h-4 w-4" />
|
||
<span className="text-xs font-medium text-muted-foreground">活跃线程</span>
|
||
<span className="text-xs text-blue-600 dark:text-blue-400">点击查看详情</span>
|
||
</div>
|
||
<div className="text-2xl font-bold text-orange-600 dark:text-orange-400">
|
||
{metrics.threads.live}
|
||
</div>
|
||
<div className="text-xs text-muted-foreground space-y-0.5">
|
||
<div>守护线程: {metrics.threads.daemon}</div>
|
||
<div>峰值: {metrics.threads.peak}</div>
|
||
</div>
|
||
{blockedThreads >= THRESHOLDS.threadBlocked.warning && (
|
||
<div className="flex items-center gap-1 text-xs text-red-600">
|
||
<AlertTriangle className="h-3 w-3" />
|
||
{blockedThreads} 个线程阻塞
|
||
</div>
|
||
)}
|
||
</div>
|
||
<GitBranch className="h-10 w-10 text-orange-600 dark:text-orange-400 opacity-50" />
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* JVM 内存趋势图 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>JVM 内存趋势</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="h-64">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<LineChart data={history}>
|
||
<CartesianGrid strokeDasharray="3 3" />
|
||
<XAxis
|
||
dataKey="timestamp"
|
||
tickFormatter={(value) =>
|
||
new Date(value).toLocaleTimeString('zh-CN', {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
})
|
||
}
|
||
/>
|
||
<YAxis
|
||
tickFormatter={(value: number) => `${value.toFixed(1)}G`}
|
||
/>
|
||
<Tooltip
|
||
labelFormatter={(value) =>
|
||
new Date(value).toLocaleTimeString('zh-CN')
|
||
}
|
||
formatter={(value: number) => `${value.toFixed(2)} GB`}
|
||
/>
|
||
<Legend />
|
||
<Line
|
||
type="monotone"
|
||
dataKey="heapUsed"
|
||
stroke="#8b5cf6"
|
||
strokeWidth={2}
|
||
name="堆内存使用"
|
||
dot={false}
|
||
/>
|
||
<Line
|
||
type="monotone"
|
||
dataKey="heapMax"
|
||
stroke="#94a3b8"
|
||
strokeWidth={1}
|
||
strokeDasharray="5 5"
|
||
name="堆内存最大值"
|
||
dot={false}
|
||
/>
|
||
</LineChart>
|
||
</ResponsiveContainer>
|
||
</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 className="space-y-4">
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div>
|
||
<div className="text-sm text-muted-foreground">活跃连接</div>
|
||
<div className="text-2xl font-bold text-green-600">
|
||
{metrics.hikari.active}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-sm text-muted-foreground">空闲连接</div>
|
||
<div className="text-2xl font-bold text-blue-600">
|
||
{metrics.hikari.idle}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-sm text-muted-foreground">等待连接</div>
|
||
<div className="text-2xl font-bold text-orange-600">
|
||
{metrics.hikari.pending}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-sm text-muted-foreground">最大连接</div>
|
||
<div className="text-2xl font-bold text-gray-600">
|
||
{metrics.hikari.max}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className="text-sm font-medium">连接池使用率</span>
|
||
<span className={`text-sm font-bold ${getStatusColor(dbUsagePercent, THRESHOLDS.dbConnections)}`}>
|
||
{formatPercent(dbUsagePercent)}%
|
||
</span>
|
||
</div>
|
||
<Progress value={dbUsagePercent} className="h-3" />
|
||
<div className="text-xs text-muted-foreground mt-2">
|
||
总计: {metrics.hikari.total} / {metrics.hikari.max}
|
||
</div>
|
||
{dbUsagePercent >= THRESHOLDS.dbConnections.warning && (
|
||
<div className="flex items-center gap-1 text-xs text-yellow-600 mt-2">
|
||
<AlertTriangle className="h-3 w-3" />
|
||
连接池使用率偏高，建议增加连接数
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 线程状态分布 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>线程状态分布</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="h-64">
|
||
<ResponsiveContainer width="100%" height="100%">
|
||
<PieChart>
|
||
<Pie
|
||
data={threadStateData}
|
||
cx="50%"
|
||
cy="50%"
|
||
labelLine={false}
|
||
label={({ name, value }) => `${name}: ${value}`}
|
||
outerRadius={80}
|
||
fill="#8884d8"
|
||
dataKey="value"
|
||
>
|
||
{threadStateData.map((entry, index) => (
|
||
<Cell
|
||
key={`cell-${index}`}
|
||
fill={THREAD_STATE_COLORS[entry.name] || '#6b7280'}
|
||
/>
|
||
))}
|
||
</Pie>
|
||
<Tooltip />
|
||
<Legend />
|
||
</PieChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
{blockedThreads >= THRESHOLDS.threadBlocked.danger && (
|
||
<div className="flex items-center gap-2 text-sm text-red-600 bg-red-50 dark:bg-red-950/20 p-3 rounded-lg mt-4">
|
||
<AlertTriangle className="h-4 w-4" />
|
||
<span>检测到 {blockedThreads} 个线程处于阻塞状态，可能存在死锁或性能问题</span>
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* 内存区域详情（如果可用） */}
|
||
{metrics.memory.regions && (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>JVM 内存区域详情</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
{/* Eden 区 */}
|
||
{metrics.memory.regions.eden && (
|
||
<div className="p-4 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 rounded-lg border border-green-200 dark:border-green-900">
|
||
<div className="text-sm font-medium text-muted-foreground mb-2">Eden 区（年轻代）</div>
|
||
<div className="space-y-1 text-xs">
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">已使用:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.eden.used)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">已分配:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.eden.committed)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">最大:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.eden.max, true)}</span>
|
||
</div>
|
||
<Progress
|
||
value={calcMemoryPercent(
|
||
metrics.memory.regions.eden.used,
|
||
metrics.memory.regions.eden.max,
|
||
metrics.memory.regions.eden.committed
|
||
)}
|
||
className="h-1 mt-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Old Gen */}
|
||
{metrics.memory.regions.oldGen && (
|
||
<div className="p-4 bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20 rounded-lg border border-blue-200 dark:border-blue-900">
|
||
<div className="text-sm font-medium text-muted-foreground mb-2">Old Gen（老年代）</div>
|
||
<div className="space-y-1 text-xs">
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">已使用:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.oldGen.used)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">已分配:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.oldGen.committed)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">最大:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.oldGen.max, true)}</span>
|
||
</div>
|
||
<Progress
|
||
value={calcMemoryPercent(
|
||
metrics.memory.regions.oldGen.used,
|
||
metrics.memory.regions.oldGen.max,
|
||
metrics.memory.regions.oldGen.committed
|
||
)}
|
||
className="h-1 mt-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Survivor 区 */}
|
||
{metrics.memory.regions.survivor && (
|
||
<div className="p-4 bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-950/20 dark:to-orange-950/20 rounded-lg border border-yellow-200 dark:border-yellow-900">
|
||
<div className="text-sm font-medium text-muted-foreground mb-2">Survivor 区</div>
|
||
<div className="space-y-1 text-xs">
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">已使用:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.survivor.used)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">已分配:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.survivor.committed)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">最大:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.survivor.max, true)}</span>
|
||
</div>
|
||
<Progress
|
||
value={calcMemoryPercent(
|
||
metrics.memory.regions.survivor.used,
|
||
metrics.memory.regions.survivor.max,
|
||
metrics.memory.regions.survivor.committed
|
||
)}
|
||
className="h-1 mt-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Metaspace */}
|
||
{metrics.memory.regions.metaspace && (
|
||
<div className="p-4 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 rounded-lg border border-purple-200 dark:border-purple-900">
|
||
<div className="text-sm font-medium text-muted-foreground mb-2">Metaspace（元空间）</div>
|
||
<div className="space-y-1 text-xs">
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">已使用:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.metaspace.used)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">已分配:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.metaspace.committed)}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">最大:</span>
|
||
<span className="font-medium">{formatBytes(metrics.memory.regions.metaspace.max, true)}</span>
|
||
</div>
|
||
<Progress
|
||
value={calcMemoryPercent(
|
||
metrics.memory.regions.metaspace.used,
|
||
metrics.memory.regions.metaspace.max,
|
||
metrics.memory.regions.metaspace.committed
|
||
)}
|
||
className="h-1 mt-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
{/* GC 统计 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>垃圾回收 (GC) 统计</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid grid-cols-4 gap-4">
|
||
<div className="text-center p-4 bg-muted/30 rounded-lg">
|
||
<div className="text-sm text-muted-foreground mb-1">GC 次数</div>
|
||
<div className="text-2xl font-bold">{metrics.gc.count}</div>
|
||
<div className="text-xs text-muted-foreground">次</div>
|
||
</div>
|
||
<div className="text-center p-4 bg-muted/30 rounded-lg">
|
||
<div className="text-sm text-muted-foreground mb-1">总耗时</div>
|
||
<div className="text-2xl font-bold">{metrics.gc.totalTime.toFixed(3)}</div>
|
||
<div className="text-xs text-muted-foreground">秒</div>
|
||
</div>
|
||
<div className="text-center p-4 bg-muted/30 rounded-lg">
|
||
<div className="text-sm text-muted-foreground mb-1">平均耗时</div>
|
||
<div className="text-2xl font-bold">{metrics.gc.avgTime.toFixed(2)}</div>
|
||
<div className="text-xs text-muted-foreground">毫秒</div>
|
||
</div>
|
||
<div className="text-center p-4 bg-muted/30 rounded-lg">
|
||
<div className="text-sm text-muted-foreground mb-1">最长耗时</div>
|
||
<div className="text-2xl font-bold">{(metrics.gc.maxTime * 1000).toFixed(2)}</div>
|
||
<div className="text-xs text-muted-foreground">毫秒</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 底部时间戳 */}
|
||
<div className="text-xs text-muted-foreground text-center">
|
||
最后更新: {new Date(metrics.timestamp).toLocaleString('zh-CN')}
|
||
</div>
|
||
|
||
{/* 线程详情对话框 */}
|
||
<ThreadDetailDialog
|
||
open={threadDialogOpen}
|
||
onOpenChange={setThreadDialogOpen}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MetricsDashboard;
|