Add System Trends sparkline charts using Recharts + Prometheus

- Add recharts dependency for area chart visualizations
- Add /api/metrics route querying Prometheus query_range (CPU, RAM, Network)
- Add SystemTrends component with 3 sparkline area charts (6h window, 2min steps)
- CPU (emerald), RAM (amber), Network I/O (indigo) with gradient fills
- Tooltips show exact values on hover, time axis with formatted labels
- Link to Grafana for deep-dive analysis
- Fetches every 60s, shimmer loading state

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
2026-02-03 22:40:23 +01:00
parent 8583ae52c6
commit 43936fc601
7 changed files with 692 additions and 5 deletions

View File

@@ -13,7 +13,8 @@
"@tanstack/react-table": "^8.21.3",
"next": "16.1.6",
"react": "19.2.3",
"react-dom": "19.2.3"
"react-dom": "19.2.3",
"recharts": "^3.7.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",