aidev/goldenChart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

대시보드 시스템 상태 카드에 메모리·디스크 신호등 추가

Browse Source 
- Backend: PipelineMonitorService에 system 항목 추가 (OS 메모리, 디스크 사용률)
- Frontend: SystemMonitorDto에 system 필드 추가
- DashboardPage: 시스템/메모리/디스크 3열 신호등 레이아웃 적용
- dashboardCommand.css: gc-dash-sys-status, gc-sys-tl-item 스타일 추가

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Macbook
2026-06-11 16:37:42 +09:00
parent 900c743aa1
commit 14fafea739
4 changed files with 132 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/DashboardPage.tsx
+58 -8
View File
@@ -182,15 +182,65 @@ const DashboardPage: React.FC<Props> = ({ theme, onGoChart }) => {
<section className="gc-dash-card">
<h2 className="gc-dash-card-title">시스템 상태</h2>
<div className="gc-dash-card-inner gc-dash-card-inner--center">
<div className={`gc-traffic-light gc-traffic-light--${health}`} aria-label="시스템 상태">
<span className="gc-traffic-bulb gc-traffic-bulb--r" />
<span className="gc-traffic-bulb gc-traffic-bulb--y" />
<span className="gc-traffic-bulb gc-traffic-bulb--g" />
<div className="gc-dash-card-inner gc-dash-sys-status">
{/* 전체 시스템 */}
<div className="gc-sys-tl-item">
<div className={`gc-traffic-light gc-traffic-light--${health}`} aria-label="시스템 상태">
<span className="gc-traffic-bulb gc-traffic-bulb--r" />
<span className="gc-traffic-bulb gc-traffic-bulb--y" />
<span className="gc-traffic-bulb gc-traffic-bulb--g" />
</div>
<p className="gc-traffic-caption">
{health === 'green' ? '정상 운영' : health === 'yellow' ? '주의 필요' : '점검 필요'}
</p>
<span className="gc-sys-tl-label">시스템</span>
</div>
<p className="gc-traffic-caption">
{health === 'green' ? '정상 운영' : health === 'yellow' ? '주의 필요' : '점검 필요'}
</p>
{/* 메모리 */}
{(() => {
const memPct = mon.system?.osMemPct ?? mon.jvm.heapPct;
const memLevel: 'green' | 'yellow' | 'red' =
memPct >= 90 ? 'red' : memPct >= 70 ? 'yellow' : 'green';
const memUsed = mon.system?.osMemUsedMb ?? mon.jvm.heapUsedMb;
const memTotal = mon.system?.osMemTotalMb ?? mon.jvm.heapMaxMb;
return (
<div className="gc-sys-tl-item">
<div className={`gc-traffic-light gc-traffic-light--${memLevel}`} aria-label="메모리 사용량">
<span className="gc-traffic-bulb gc-traffic-bulb--r" />
<span className="gc-traffic-bulb gc-traffic-bulb--y" />
<span className="gc-traffic-bulb gc-traffic-bulb--g" />
</div>
<p className="gc-traffic-caption">{memPct.toFixed(0)}%</p>
<p className="gc-traffic-caption gc-traffic-caption--sub">
{memUsed >= 1024 ? `${(memUsed/1024).toFixed(1)}GB` : `${memUsed}MB`}
{' / '}
{memTotal >= 1024 ? `${(memTotal/1024).toFixed(1)}GB` : `${memTotal}MB`}
</p>
<span className="gc-sys-tl-label">메모리</span>
</div>
);
})()}
{/* 디스크 */}
{(() => {
const diskPct = mon.system?.diskPct ?? 0;
const diskLevel: 'green' | 'yellow' | 'red' =
diskPct >= 90 ? 'red' : diskPct >= 70 ? 'yellow' : 'green';
const diskUsed = mon.system?.diskUsedGb ?? 0;
const diskTotal = mon.system?.diskTotalGb ?? 0;
return (
<div className="gc-sys-tl-item">
<div className={`gc-traffic-light gc-traffic-light--${diskLevel}`} aria-label="디스크 사용량">
<span className="gc-traffic-bulb gc-traffic-bulb--r" />
<span className="gc-traffic-bulb gc-traffic-bulb--y" />
<span className="gc-traffic-bulb gc-traffic-bulb--g" />
</div>
<p className="gc-traffic-caption">{diskPct.toFixed(0)}%</p>
<p className="gc-traffic-caption gc-traffic-caption--sub">
{diskUsed.toFixed(1)}GB / {diskTotal.toFixed(1)}GB
</p>
<span className="gc-sys-tl-label">디스크</span>
</div>
);
})()}
</div>
</section>