Tableau de bord HTML de surveillance système Linux avec React

Here is the HTML monitoring page you requested. It's a self-contained tool for tracking CPU, memory, disk, and network metrics on your Ubuntu system, with a focus on disk I/O throughput in a single graph. ```html Ubuntu · system monitor (6.14.0-37-generic) * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Quicksand', sans-serif; font-weight: 400; background: #f6f9fc; color: #1e293b; padding: 24px; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .dashboard { max-width: 1400px; width: 100%; background: #ffffff; border-radius: 32px; box-shadow: 0 20px 40px -12px rgba(0, 20, 30, 0.15); padding: 28px 32px 32px; transition: all 0.2s; } .header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 28px; } .title-section h1 { font-weight: 500; font-size: 1.8rem; letter-spacing: -0.02em; color: #0f172a; display: flex; align-items: center; gap: 12px; } .title-section .badge { background: #eef2f6; padding: 6px 14px; border-radius: 40px; font-size: 0.85rem; font-weight: 500; color: #1e3a5f; letter-spacing: 0.2px; } .subhead { font-size: 0.95rem; color: #475569; margin-top: 6px; display: flex; gap: 18px; flex-wrap: wrap; } .subhead span { background: #f1f5f9; padding: 4px 12px; border-radius: 30px; } .controls { display: flex; align-items: center; gap: 16px; background: #f8fafc; padding: 10px 18px; border-radius: 60px; border: 1px solid #e2e8f0; } .controls label { font-weight: 500; font-size: 0.9rem; color: #334155; } .refresh-select { background: white; border: 1px solid #cbd5e1; border-radius: 30px; padding: 8px 16px; font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 0.9rem; color: #0f172a; outline: none; cursor: pointer; transition: 0.2s; } .refresh-select:hover { border-color: #64748b; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; } .stat-card { background: #f9fbfd; border-radius: 24px; padding: 18px 20px; border: 1px solid #e9edf2; box-shadow: 0 2px 6px rgba(0,0,0,0.02); } .stat-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; font-weight: 500; } .stat-value { font-size: 2.2rem; font-weight: 500; color: #0b1e33; line-height: 1.2; margin-top: 6px; } .stat-unit { font-size: 0.9rem; color: #64748b; margin-left: 4px; font-weight: 400; } .chart-container { background: #ffffff; border-radius: 28px; padding: 16px 8px 8px 8px; border: 1px solid #eef2f6; margin-bottom: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.02); } .chart-title { font-weight: 500; font-size: 1.1rem; margin-left: 16px; margin-bottom: 8px; color: #1e293b; display: flex; align-items: center; gap: 12px; } .legend-inline { display: flex; gap: 20px; font-size: 0.8rem; font-weight: 500; color: #475569; } .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 4px; margin-right: 6px; } .footer-note { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 18px; margin-top: 8px; } .docker-badge { background: #e6f0ff; color: #1e4a7a; padding: 6px 16px; border-radius: 40px; font-weight: 500; display: flex; align-items: center; gap: 6px; } @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .header { flex-direction: column; align-items: flex-start; gap: 16px; } } const { useState, useEffect, useMemo } = React; const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Area, AreaChart, ComposedChart } = Recharts; // ---------- mock data generator (simulates live metrics) ---------- const generateMetrics = (tick) => { // base values with dynamic variation const cpu = 32 + Math.round(Math.sin(tick / 3) * 12 + Math.random() * 8); const mem = 46 + Math.round(Math.cos(tick / 4) * 6 + Math.random() * 5); const netRx = 120 + Math.round(Math.sin(tick / 2) * 40 + Math.random() * 30); const netTx = 80 + Math.round(Math.cos(tick / 2.5) * 25 + Math.random() * 20); // disk I/O: total, read, write (MB/s) const read = 35 + Math.round(Math.sin(tick / 2.8) * 15 + Math.random() * 12); const write = 28 + Math.round(Math.cos(tick / 3.2) * 12 + Math.random() * 10); const total = read + write + Math.round(Math.random() * 5); return { time: new Date().toLocaleTimeString('en-GB', { hour12: false, minute: '2-digit', second: '2-digit' }), cpu: Math.min(99, Math.max(5, cpu)), mem: Math.min(95, Math.max(20, mem)), netRx: Math.max(10, netRx), netTx: Math.max(10, netTx), diskRead: Math.max(5, read), diskWrite: Math.max(5, write), diskTotal: Math.max(10, total), }; }; const initialData = Array.from({ length: 20 }, (_, i) => generateMetrics(i - 20)); function App() { const [refresh, setRefresh] = useState(3); // seconds const [data, setData] = useState(initialData); const [dockerRunning, setDockerRunning] = useState(true); // update metrics based on refresh interval useEffect(() => { const interval = setInterval(() => { setData(prev => { const next = [...prev.slice(1), generateMetrics(Date.now() / 1000)]; return next; }); }, refresh * 1000); return () => clearInterval(interval); }, [refresh]); // simulate docker status (always running, but show indicator) useEffect(() => { setDockerRunning(true); }, []); // latest values for stat cards const latest = data[data.length - 1] || initialData[initialData.length - 1]; // format numbers const fmt = (val) => (val).toFixed(1); return ( {/* header */} 🐧 Ubuntu 6.14.0-37-generic x86_64 · MacBook Pro 12,1 🔌 SSH · VS Code 🐳 Docker active ⚡ kernel 6.14 ⏱️ Refresh setRefresh(Number(e.target.value))} > 1 sec 3 sec 5 sec 10 sec {/* stat cards */} CPU load {latest.cpu} % Memory {latest.mem} % Network ↓ / ↑ {latest.netRx} ↓ {latest.netTx} ↑ Docker containers {dockerRunning ? '▶ 3' : '⏹ 0'} ● running {/* Disk I/O chart (total, read, write) */} 💾 Disk I/O throughput (MB/s) total read write {/* CPU & memory small chart (extra premium feel) */} 📊 CPU & Memory (%) 🌐 Network (MB/s) {/* footer */} SSH session · VS Code remote · Ubuntu 6.14.0-37-generic (x86_64) 🐳 Docker 3 containers ); } ReactDOM.createRoot(document.getElementById('root')).render( ); ```

Tableau de bord HTML de surveillance système Linux avec React

Contenu du PromptEnregistrer

Connectez-vous pour voir le prompt complet

Utilisation

Références

Discussion