feat(admin): 성능 모니터링 API 연동 및 UI 개선
- TPS, MSPT, 메모리 사용량 실시간 표시 - CPU → MSPT로 변경 (서버 틱 처리 시간) - formatStatusForClient에 성능 필드 추가 - 모바일 성능 UI 반응형 레이아웃 (1열/3열) - 타이틀 '관리자 콘솔'로 통일
This commit is contained in:
parent
dd17cb5c5e
commit
f6e7a8922a
2 changed files with 37 additions and 17 deletions
|
|
@ -47,6 +47,10 @@ function formatStatusForClient(modStatus, motdData) {
|
|||
version: "Unknown",
|
||||
icon: null,
|
||||
uptime: "오프라인",
|
||||
tps: 0,
|
||||
mspt: 0,
|
||||
memoryUsedMb: 0,
|
||||
memoryMaxMb: 0,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -81,6 +85,10 @@ function formatStatusForClient(modStatus, motdData) {
|
|||
difficulty: modStatus.difficulty || "알 수 없음",
|
||||
gameRules: modStatus.gameRules || {},
|
||||
mods: modStatus.mods || [],
|
||||
tps: modStatus.tps || 0,
|
||||
mspt: modStatus.mspt || 0,
|
||||
memoryUsedMb: modStatus.memoryUsedMb || 0,
|
||||
memoryMaxMb: modStatus.memoryMaxMb || 0,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -131,11 +131,11 @@ export default function Admin({ isMobile = false }) {
|
|||
const [whitelistRemoveTarget, setWhitelistRemoveTarget] = useState(null); // 삭제 확인 다이얼로그용
|
||||
const [whitelistLoading, setWhitelistLoading] = useState(false);
|
||||
|
||||
// 성능 모니터링 상태 (더미)
|
||||
// 성능 모니터링 상태 (소켓에서 업데이트)
|
||||
const [serverPerformance, setServerPerformance] = useState({
|
||||
tps: 19.8,
|
||||
cpu: 35.2,
|
||||
memory: { used: 2150, max: 4096 },
|
||||
tps: 0,
|
||||
mspt: 0,
|
||||
memory: { used: 0, max: 0 },
|
||||
});
|
||||
|
||||
// 권한 확인
|
||||
|
|
@ -568,6 +568,17 @@ export default function Admin({ isMobile = false }) {
|
|||
};
|
||||
setDifficulty(difficultyMap[status.difficulty] || 'normal');
|
||||
}
|
||||
// 성능 모니터링 데이터 업데이트
|
||||
if (status?.tps !== undefined || status?.memoryUsedMb !== undefined) {
|
||||
setServerPerformance(prev => ({
|
||||
tps: status.tps ?? prev.tps,
|
||||
mspt: status.mspt ?? prev.mspt,
|
||||
memory: {
|
||||
used: status.memoryUsedMb ?? prev.memory.used,
|
||||
max: status.memoryMaxMb ?? prev.memory.max
|
||||
}
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
// 월드 정보에서 시간/날씨 가져오기
|
||||
|
|
@ -825,7 +836,7 @@ export default function Admin({ isMobile = false }) {
|
|||
<ArrowLeft size={20} />
|
||||
</Link>
|
||||
<div className="ml-2">
|
||||
<h1 className="text-lg font-bold text-white">관리자</h1>
|
||||
<h1 className="text-lg font-bold text-white">관리자 콘솔</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -835,7 +846,7 @@ export default function Admin({ isMobile = false }) {
|
|||
{/* 데스크탑용 타이틀 */}
|
||||
{!isMobile && (
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-white">관리자 페이지</h1>
|
||||
<h1 className="text-2xl font-bold text-white">관리자 콘솔</h1>
|
||||
<p className="text-sm text-zinc-500 mt-1">서버 관리 및 설정</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -872,7 +883,7 @@ export default function Admin({ isMobile = false }) {
|
|||
{/* 서버 성능 모니터링 */}
|
||||
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4">
|
||||
<h3 className="text-white font-medium mb-3">📊 서버 성능</h3>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
{/* TPS */}
|
||||
<div className="bg-zinc-800/50 rounded-xl p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
|
|
@ -895,24 +906,24 @@ export default function Admin({ isMobile = false }) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* CPU */}
|
||||
{/* MSPT */}
|
||||
<div className="bg-zinc-800/50 rounded-xl p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-zinc-400 text-xs">CPU</span>
|
||||
<span className="text-zinc-400 text-xs">MSPT</span>
|
||||
<span className={`font-bold text-sm ${
|
||||
serverPerformance.cpu <= 50 ? 'text-mc-green' :
|
||||
serverPerformance.cpu <= 80 ? 'text-yellow-400' : 'text-red-400'
|
||||
serverPerformance.mspt <= 40 ? 'text-mc-green' :
|
||||
serverPerformance.mspt <= 50 ? 'text-yellow-400' : 'text-red-400'
|
||||
}`}>
|
||||
{serverPerformance.cpu.toFixed(0)}%
|
||||
{serverPerformance.mspt.toFixed(1)}ms
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-zinc-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all ${
|
||||
serverPerformance.cpu <= 50 ? 'bg-mc-green' :
|
||||
serverPerformance.cpu <= 80 ? 'bg-yellow-400' : 'bg-red-400'
|
||||
serverPerformance.mspt <= 40 ? 'bg-mc-green' :
|
||||
serverPerformance.mspt <= 50 ? 'bg-yellow-400' : 'bg-red-400'
|
||||
}`}
|
||||
style={{ width: `${serverPerformance.cpu}%` }}
|
||||
style={{ width: `${Math.min(100, (serverPerformance.mspt / 50) * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -922,16 +933,17 @@ export default function Admin({ isMobile = false }) {
|
|||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-zinc-400 text-xs">메모리</span>
|
||||
<span className="font-bold text-sm text-mc-diamond">
|
||||
{(serverPerformance.memory.used / 1024).toFixed(1)}GB
|
||||
{(serverPerformance.memory.used / 1024).toFixed(1)}GB / {(serverPerformance.memory.max / 1024).toFixed(1)}GB
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-zinc-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full transition-all ${
|
||||
serverPerformance.memory.max === 0 ? 'bg-mc-diamond' :
|
||||
(serverPerformance.memory.used / serverPerformance.memory.max) > 0.9 ? 'bg-red-400' :
|
||||
(serverPerformance.memory.used / serverPerformance.memory.max) > 0.7 ? 'bg-yellow-400' : 'bg-mc-diamond'
|
||||
}`}
|
||||
style={{ width: `${(serverPerformance.memory.used / serverPerformance.memory.max) * 100}%` }}
|
||||
style={{ width: `${serverPerformance.memory.max === 0 ? 0 : (serverPerformance.memory.used / serverPerformance.memory.max) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue