fix: 服务器监控页面改用白色主题统一现有风格(white bg/slate text/blue accent)
This commit is contained in:
root
parent
28da06ba69
commit
7b8a0f74f2
@ -35,7 +35,7 @@ interface ServerStatus {
|
||||
|
||||
function bjtStr(ms: number) {
|
||||
const d = new Date(ms + 8 * 3600 * 1000);
|
||||
return `${d.getUTCFullYear()}-${String(d.getUTCMonth()+1).padStart(2,"0")}-${String(d.getUTCDate()).padStart(2,"0")} ${String(d.getUTCHours()).padStart(2,"0")}:${String(d.getUTCMinutes()).padStart(2,"0")}:${String(d.getUTCSeconds()).padStart(2,"0")}`;
|
||||
return `${String(d.getUTCMonth()+1).padStart(2,"0")}-${String(d.getUTCDate()).padStart(2,"0")} ${String(d.getUTCHours()).padStart(2,"0")}:${String(d.getUTCMinutes()).padStart(2,"0")}`;
|
||||
}
|
||||
|
||||
function uptimeStr(ms: number) {
|
||||
@ -49,34 +49,23 @@ function uptimeStr(ms: number) {
|
||||
return `${m}m`;
|
||||
}
|
||||
|
||||
function ProgressBar({ percent, color = "cyan" }: { percent: number; color?: string }) {
|
||||
const colorClass = percent > 90 ? "bg-red-500" : percent > 70 ? "bg-amber-500" : color === "cyan" ? "bg-cyan-500" : "bg-emerald-500";
|
||||
function ProgressBar({ percent }: { percent: number }) {
|
||||
const color = percent > 90 ? "bg-red-500" : percent > 70 ? "bg-amber-500" : "bg-blue-500";
|
||||
return (
|
||||
<div className="w-full bg-slate-700 rounded-full h-2.5 overflow-hidden">
|
||||
<div className={`h-full rounded-full transition-all duration-500 ${colorClass}`} style={{ width: `${Math.min(percent, 100)}%` }} />
|
||||
<div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
|
||||
<div className={`h-full rounded-full transition-all duration-500 ${color}`} style={{ width: `${Math.min(percent, 100)}%` }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: { status: string }) {
|
||||
const isOnline = status === "online";
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${isOnline ? "bg-emerald-500/20 text-emerald-400" : "bg-red-500/20 text-red-400"}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${isOnline ? "bg-emerald-400" : "bg-red-400"}`} />
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function numberFmt(n: number) {
|
||||
return n.toLocaleString("en-US");
|
||||
}
|
||||
|
||||
export default function ServerPage() {
|
||||
const { isLoggedIn, accessToken } = useAuth();
|
||||
const { isLoggedIn } = useAuth();
|
||||
const [data, setData] = useState<ServerStatus | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lastUpdate, setLastUpdate] = useState(0);
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
@ -84,7 +73,6 @@ export default function ServerPage() {
|
||||
if (!res.ok) return;
|
||||
const json = await res.json();
|
||||
setData(json);
|
||||
setLastUpdate(Date.now());
|
||||
} catch (e) {
|
||||
// ignore
|
||||
} finally {
|
||||
@ -95,136 +83,133 @@ export default function ServerPage() {
|
||||
useEffect(() => {
|
||||
if (!isLoggedIn) return;
|
||||
fetchData();
|
||||
const iv = setInterval(fetchData, 10000); // 10秒刷新
|
||||
const iv = setInterval(fetchData, 10000);
|
||||
return () => clearInterval(iv);
|
||||
}, [isLoggedIn, fetchData]);
|
||||
|
||||
if (!isLoggedIn) {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-slate-400 mb-4">请先登录</p>
|
||||
<Link href="/login" className="text-cyan-400 hover:text-cyan-300 underline">登录</Link>
|
||||
<div className="flex flex-col items-center justify-center h-64 gap-3">
|
||||
<p className="text-slate-500 text-sm">请先登录查看服务器状态</p>
|
||||
<div className="flex gap-2">
|
||||
<Link href="/login" className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">登录</Link>
|
||||
<Link href="/register" className="border border-slate-300 text-slate-600 px-4 py-2 rounded-lg text-sm">注册</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-950 text-slate-200">
|
||||
{/* 顶栏 */}
|
||||
<header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-4 h-14 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/" className="text-slate-400 hover:text-slate-200 text-sm">← 返回</Link>
|
||||
<h1 className="text-base font-semibold text-white">🖥️ 服务器监控</h1>
|
||||
<span className="text-xs text-slate-500">GCP asia-northeast1-b</span>
|
||||
<div className="space-y-5">
|
||||
{/* 标题 */}
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-900">服务器监控</h1>
|
||||
<p className="text-slate-500 text-xs mt-0.5">GCP asia-northeast1-b · 每10秒自动刷新</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||
{data?.backfill_running && (
|
||||
<span className="flex items-center gap-1 text-cyan-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-50 border border-blue-200 text-xs text-blue-700 font-medium">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse" />
|
||||
回补运行中
|
||||
</span>
|
||||
)}
|
||||
<span>每10秒刷新</span>
|
||||
{lastUpdate > 0 && <span>· 更新于 {bjtStr(lastUpdate)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 py-6 space-y-6">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-64 text-slate-400">加载中...</div>
|
||||
<div className="flex items-center justify-center h-48 text-slate-400 text-sm">加载中...</div>
|
||||
) : !data ? (
|
||||
<div className="flex items-center justify-center h-64 text-red-400">获取失败</div>
|
||||
<div className="flex items-center justify-center h-48 text-red-500 text-sm">获取失败</div>
|
||||
) : (
|
||||
<>
|
||||
{/* 系统概览 4卡片 */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{/* CPU */}
|
||||
<div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-slate-400">CPU</span>
|
||||
<span className="text-xs text-slate-500">{data.cpu.cores} 核</span>
|
||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs text-slate-500 font-medium">CPU</span>
|
||||
<span className="text-xs text-slate-400">{data.cpu.cores} 核</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white mb-2">{data.cpu.percent}%</div>
|
||||
<div className="text-2xl font-bold text-slate-900 mb-2">{data.cpu.percent}%</div>
|
||||
<ProgressBar percent={data.cpu.percent} />
|
||||
<div className="mt-2 text-xs text-slate-500">
|
||||
负载: {data.load.load1} / {data.load.load5} / {data.load.load15}
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-slate-400">
|
||||
负载 {data.load.load1} / {data.load.load5} / {data.load.load15}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 内存 */}
|
||||
<div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-slate-400">内存</span>
|
||||
<span className="text-xs text-slate-500">{data.memory.used_gb}G / {data.memory.total_gb}G</span>
|
||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs text-slate-500 font-medium">内存</span>
|
||||
<span className="text-xs text-slate-400">{data.memory.used_gb}G / {data.memory.total_gb}G</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white mb-2">{data.memory.percent}%</div>
|
||||
<div className="text-2xl font-bold text-slate-900 mb-2">{data.memory.percent}%</div>
|
||||
<ProgressBar percent={data.memory.percent} />
|
||||
{data.memory.swap_percent > 0 && (
|
||||
<div className="mt-2 text-xs text-amber-400">Swap: {data.memory.swap_percent}%</div>
|
||||
<p className="mt-2 text-xs text-amber-600">Swap {data.memory.swap_percent}%</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 硬盘 */}
|
||||
<div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-slate-400">硬盘</span>
|
||||
<span className="text-xs text-slate-500">{data.disk.free_gb}G 可用</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white mb-2">{data.disk.percent}%</div>
|
||||
<ProgressBar percent={data.disk.percent} color="emerald" />
|
||||
<div className="mt-2 text-xs text-slate-500">
|
||||
{data.disk.used_gb}G / {data.disk.total_gb}G
|
||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs text-slate-500 font-medium">硬盘</span>
|
||||
<span className="text-xs text-slate-400">{data.disk.free_gb}G 可用</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900 mb-2">{data.disk.percent}%</div>
|
||||
<ProgressBar percent={data.disk.percent} />
|
||||
<p className="mt-2 text-xs text-slate-400">{data.disk.used_gb}G / {data.disk.total_gb}G</p>
|
||||
</div>
|
||||
|
||||
{/* 运行时间 & 网络 */}
|
||||
<div className="rounded-xl border border-slate-800 bg-slate-900 p-4">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs text-slate-400">系统</span>
|
||||
<span className="text-xs text-slate-500">Uptime</span>
|
||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm p-4">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs text-slate-500 font-medium">系统</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-white mb-2">
|
||||
<div className="text-2xl font-bold text-slate-900 mb-2">
|
||||
{data.uptime_hours > 24 ? `${Math.floor(data.uptime_hours/24)}天` : `${data.uptime_hours}h`}
|
||||
</div>
|
||||
<div className="text-xs text-slate-500 space-y-0.5">
|
||||
<div>↑ 发送: {data.network.bytes_sent_gb} GB</div>
|
||||
<div>↓ 接收: {data.network.bytes_recv_gb} GB</div>
|
||||
<div className="text-xs text-slate-400 space-y-0.5">
|
||||
<p>↑ 发送 {data.network.bytes_sent_gb} GB</p>
|
||||
<p>↓ 接收 {data.network.bytes_recv_gb} GB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* PM2 进程列表 */}
|
||||
<div className="rounded-xl border border-slate-800 bg-slate-900 overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-slate-800">
|
||||
<h3 className="font-semibold text-sm text-white">📦 PM2 进程</h3>
|
||||
{/* PM2 进程 */}
|
||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-slate-100">
|
||||
<h3 className="font-semibold text-sm text-slate-800">PM2 进程</h3>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="text-slate-400 border-b border-slate-800">
|
||||
<th className="text-left px-4 py-2 font-medium">名称</th>
|
||||
<th className="text-center px-4 py-2 font-medium">状态</th>
|
||||
<th className="text-right px-4 py-2 font-medium">CPU</th>
|
||||
<th className="text-right px-4 py-2 font-medium">内存</th>
|
||||
<th className="text-right px-4 py-2 font-medium">重启</th>
|
||||
<th className="text-right px-4 py-2 font-medium">运行时间</th>
|
||||
<th className="text-right px-4 py-2 font-medium">PID</th>
|
||||
<tr className="text-slate-400 border-b border-slate-100 text-left">
|
||||
<th className="px-4 py-2.5 font-medium">名称</th>
|
||||
<th className="px-4 py-2.5 font-medium text-center">状态</th>
|
||||
<th className="px-4 py-2.5 font-medium text-right">CPU</th>
|
||||
<th className="px-4 py-2.5 font-medium text-right">内存</th>
|
||||
<th className="px-4 py-2.5 font-medium text-right">重启</th>
|
||||
<th className="px-4 py-2.5 font-medium text-right">运行时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.pm2.map((p, i) => (
|
||||
<tr key={i} className="border-b border-slate-800/50 hover:bg-slate-800/30">
|
||||
<td className="px-4 py-2.5 font-mono text-cyan-400">{p.name}</td>
|
||||
<td className="px-4 py-2.5 text-center"><StatusBadge status={p.status} /></td>
|
||||
<td className="px-4 py-2.5 text-right font-mono">{p.cpu}%</td>
|
||||
<td className="px-4 py-2.5 text-right font-mono">{p.memory_mb} MB</td>
|
||||
<td className="px-4 py-2.5 text-right font-mono">{p.restarts}</td>
|
||||
<tr key={i} className="border-b border-slate-50 hover:bg-slate-50/50">
|
||||
<td className="px-4 py-2.5 font-mono text-slate-800">{p.name}</td>
|
||||
<td className="px-4 py-2.5 text-center">
|
||||
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||
p.status === "online"
|
||||
? "bg-emerald-50 text-emerald-700 border border-emerald-200"
|
||||
: "bg-red-50 text-red-700 border border-red-200"
|
||||
}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${p.status === "online" ? "bg-emerald-500" : "bg-red-500"}`} />
|
||||
{p.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2.5 text-right font-mono text-slate-600">{p.cpu}%</td>
|
||||
<td className="px-4 py-2.5 text-right font-mono text-slate-600">{p.memory_mb} MB</td>
|
||||
<td className="px-4 py-2.5 text-right font-mono text-slate-600">{p.restarts}</td>
|
||||
<td className="px-4 py-2.5 text-right text-slate-400">{uptimeStr(p.uptime_ms)}</td>
|
||||
<td className="px-4 py-2.5 text-right text-slate-500 font-mono">{p.pid || "-"}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
@ -232,45 +217,49 @@ export default function ServerPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 数据库信息 */}
|
||||
<div className="rounded-xl border border-slate-800 bg-slate-900 overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-slate-800">
|
||||
<h3 className="font-semibold text-sm text-white">🗄️ PostgreSQL</h3>
|
||||
{/* PostgreSQL */}
|
||||
<div className="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-slate-100">
|
||||
<h3 className="font-semibold text-sm text-slate-800">PostgreSQL</h3>
|
||||
</div>
|
||||
<div className="p-4 grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<div className="text-xs text-slate-400 mb-1">数据库大小</div>
|
||||
<div className="text-lg font-bold text-white">
|
||||
<p className="text-xs text-slate-400 mb-1">数据库大小</p>
|
||||
<p className="text-lg font-bold text-slate-900">
|
||||
{data.postgres.db_size_mb > 1024
|
||||
? `${(data.postgres.db_size_mb / 1024).toFixed(1)} GB`
|
||||
: `${data.postgres.db_size_mb} MB`}
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-slate-400 mb-1">aggTrades 总条数</div>
|
||||
<div className="text-lg font-bold text-cyan-400">{numberFmt(data.postgres.agg_trades_count)}</div>
|
||||
<p className="text-xs text-slate-400 mb-1">aggTrades</p>
|
||||
<p className="text-lg font-bold text-blue-600">{numberFmt(data.postgres.agg_trades_count)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-slate-400 mb-1">费率快照</div>
|
||||
<div className="text-lg font-bold text-white">{numberFmt(data.postgres.rate_snapshots_count)}</div>
|
||||
<p className="text-xs text-slate-400 mb-1">费率快照</p>
|
||||
<p className="text-lg font-bold text-slate-900">{numberFmt(data.postgres.rate_snapshots_count)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xs text-slate-400 mb-1">回补状态</div>
|
||||
<div className={`text-lg font-bold ${data.backfill_running ? "text-cyan-400" : "text-slate-500"}`}>
|
||||
{data.backfill_running ? "🔄 运行中" : "⏸ 停止"}
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mb-1">回补状态</p>
|
||||
<p className={`text-lg font-bold ${data.backfill_running ? "text-blue-600" : "text-slate-400"}`}>
|
||||
{data.backfill_running ? "运行中" : "已停止"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 数据覆盖范围 */}
|
||||
{data.postgres.symbols && Object.keys(data.postgres.symbols).length > 0 && (
|
||||
<div className="px-4 pb-4">
|
||||
<div className="text-xs text-slate-400 mb-2">数据覆盖范围</div>
|
||||
<p className="text-xs text-slate-400 mb-2">数据覆盖范围</p>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
|
||||
{Object.entries(data.postgres.symbols).map(([sym, info]) => (
|
||||
<div key={sym} className="flex items-center justify-between bg-slate-800/50 rounded-lg px-3 py-2">
|
||||
<span className="font-mono text-sm text-white">{sym}</span>
|
||||
<div className="text-xs text-slate-400 text-right">
|
||||
<div>{bjtStr(info.earliest_ms)} → {bjtStr(info.latest_ms)}</div>
|
||||
<div className="text-cyan-400">{info.span_hours > 24 ? `${(info.span_hours/24).toFixed(1)} 天` : `${info.span_hours.toFixed(1)} 小时`}</div>
|
||||
<div key={sym} className="flex items-center justify-between bg-slate-50 rounded-lg px-3 py-2 border border-slate-100">
|
||||
<span className="font-mono text-sm font-medium text-slate-800">{sym}</span>
|
||||
<div className="text-xs text-slate-500 text-right">
|
||||
<p>{bjtStr(info.earliest_ms)} → {bjtStr(info.latest_ms)}</p>
|
||||
<p className="text-blue-600 font-medium">
|
||||
{info.span_hours > 24 ? `${(info.span_hours/24).toFixed(1)} 天` : `${info.span_hours.toFixed(1)} 小时`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@ -278,9 +267,13 @@ export default function ServerPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 说明 */}
|
||||
<div className="rounded-lg border border-blue-100 bg-blue-50 px-4 py-3 text-xs text-slate-600">
|
||||
<span className="text-blue-600 font-medium">说明：</span>数据每10秒自动刷新。PM2进程状态实时反映服务运行情况，回补运行中时CPU和网络负载会偏高属正常现象。
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user