# System Monitoring Dashboard > System monitoring dashboard with status indicators, uptime metrics, alerts log, and service health > 상태 표시기, 업타임 지표, 알림 로그, 서비스 헬스 체크가 포함된 시스템 모니터링 대시보드 **Category**: Dashboard | **Tags**: monitoring, devops, status, uptime, alerts | **Difficulty**: Intermediate ## Preview ``` +--------------------------------------------------+ | System Monitor [All Systems Operational] | +--------------------------------------------------+ | API: [GREEN] 99.99% DB: [GREEN] 99.95% | | CDN: [GREEN] 100% Queue: [YELLOW] 98.2% | +--------------------------------------------------+ | | | +--- Response Time ---+ +--- Error Rate ----+ | | | [area chart] | | [area chart] | | | +---------------------+ +-------------------+ | | | | +--- Recent Alerts -------------------------+ | | | WARN Queue latency high 2m ago | | | | OK API restored 15m ago | | | | CRIT DB connection spike 1h ago | | | +-------------------------------------------+ | +--------------------------------------------------+ ``` ## Quick Start ```bash # 1. Save as index.html, open in browser # 2. Replace static data with polling from your /health endpoints # 3. Add WebSocket connection for real-time alerts ``` ## Full Code ```html System Monitor

System Monitor

Real-time infrastructure health

All Systems Operational Updated 5s ago

API Server

99.99%

Uptime (30d)

Latency: 42ms

Database

99.95%

Uptime (30d)

Connections: 48/100

CDN

100%

Uptime (30d)

Hit Rate: 94.2%

Queue

98.2%

Uptime (30d)

Depth: 1,240 msgs

Response Time (p95)

42ms avg

12h agoNow

Error Rate

0.02%

12h agoNow

CPU Usage

34%

4 cores / 8 threads

Memory

67%

10.7 / 16 GB

Disk

52%

260 / 500 GB

Recent Alerts

Last 24 hours

WARN Queue latency exceeded 500ms threshold 2 min ago

OK API Server response time normalized 15 min ago

CRIT Database connection pool exhausted (48/100 connections) 1 hour ago

OK CDN cache purge completed successfully 3 hours ago

INFO Deployment v2.4.1 rolled out to production 6 hours ago

``` ## Customization Guide - **Status colors**: Green = healthy, Yellow = degraded, Red = down. Change the pulse animation class accordingly - **Circular gauges**: Adjust `stroke-dasharray` value (first number = percentage, out of 100) - **Bar charts**: Replace static `

` bars with Chart.js or D3 for interactive charts - **Alerts**: Connect to your alerting system (PagerDuty, Opsgenie) via WebSocket - **Auto-refresh**: Add `setInterval(() => fetchStatus(), 5000)` for live polling - **Thresholds**: Color-code metrics based on thresholds (green < 70%, yellow < 90%, red >= 90%) ## 2026 Trend Notes - Pulsing status dots provide immediate visual health indication - SVG circular progress gauges are pure CSS (no library needed) - Dark theme is standard for DevOps monitoring dashboards - Alert severity levels (CRIT/WARN/OK/INFO) follow industry standards - Bar chart built with pure CSS flex for lightweight initial load