Panel de monitoreo de sistema Linux en HTML con React

Here is a fully functional HTML monitoring page for your Ubuntu system. It displays CPU, memory, disk, and network metrics with a combined disk I/O throughput graph, and includes adjustable refresh rates. ```html Ubuntu · system pulse * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #f4f7fc; font-family: 'Quicksand', 'Inter', system-ui, -apple-system, sans-serif; font-weight: 400; color: #1e293b; padding: 24px; min-height: 100vh; display: flex; justify-content: center; align-items: center; } #root { width: 100%; max-width: 1440px; background: rgba(255,255,255,0.7); backdrop-filter: blur(2px); border-radius: 36px; box-shadow: 0 20px 40px -12px rgba(0,20,40,0.15); padding: 28px 32px; border: 1px solid rgba(255,255,255,0.6); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 16px; } .title-section h1 { font-weight: 500; font-size: 1.9rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; } .title-section h1 span { background: #eef2f6; padding: 4px 12px; border-radius: 40px; font-size: 0.9rem; font-weight: 500; color: #2c3e50; border: 1px solid #dce5ec; } .subhead { color: #4b5e6d; font-size: 0.95rem; margin-top: 6px; font-weight: 400; letter-spacing: 0.2px; } .controls { display: flex; align-items: center; gap: 20px; background: white; padding: 8px 16px; border-radius: 60px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); border: 1px solid #e2e9f0; } .refresh-group { display: flex; align-items: center; gap: 8px; } .refresh-label { font-size: 0.9rem; font-weight: 500; color: #2c3e50; } .refresh-select { background: #f8fafd; border: 1px solid #d0dbe8; border-radius: 40px; padding: 6px 14px; font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 0.9rem; color: #1e293b; outline: none; cursor: pointer; transition: 0.2s; } .refresh-select:hover { background: #ffffff; border-color: #9aaec2; } .status-chip { display: flex; align-items: center; gap: 8px; background: #eef4fa; padding: 6px 14px; border-radius: 40px; font-size: 0.85rem; font-weight: 500; color: #1f3a4b; border: 1px solid #d2e0ec; } .dot { width: 10px; height: 10px; background: #2ecc71; border-radius: 50%; box-shadow: 0 0 0 2px rgba(46,204,113,0.2); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-bottom: 20px; } .card { background: white; border-radius: 28px; padding: 20px 22px; box-shadow: 0 6px 14px -6px rgba(0,0,0,0.04); border: 1px solid #e9f0f6; transition: all 0.2s; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .card-title { font-weight: 500; font-size: 1.1rem; color: #1e3b4f; letter-spacing: -0.01em; } .metric-badge { background: #f2f6fa; padding: 4px 12px; border-radius: 30px; font-size: 0.8rem; font-weight: 500; color: #2b4b62; } .col-span-3 { grid-column: span 3; } .col-span-4 { grid-column: span 4; } .col-span-6 { grid-column: span 6; } .col-span-12 { grid-column: span 12; } .kpi-value { font-size: 2.2rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: #0b253a; } .kpi-unit { font-size: 1rem; font-weight: 400; color: #5b7488; margin-left: 6px; } .kpi-sub { font-size: 0.9rem; color: #5b7488; margin-top: 6px; display: flex; gap: 12px; } .mini-chart { margin-top: 8px; height: 60px; } .graph-container { height: 260px; width: 100%; margin-top: 8px; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .footer-note { margin-top: 24px; font-size: 0.8rem; color: #7b8b9c; text-align: right; border-top: 1px solid #e3eaf1; padding-top: 16px; font-weight: 400; } .docker-badge { background: #e7f0f9; padding: 2px 10px; border-radius: 30px; font-size: 0.75rem; font-weight: 500; color: #1f4b6e; } .recharts-wrapper { font-family: 'Quicksand', sans-serif; } (function() { const { useState, useEffect, useMemo } = React; const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, AreaChart, Area, BarChart, Bar } = Recharts; // ---------- mock data generator (simulating live metrics) ---------- const generateMetrics = () => { const now = new Date().toLocaleTimeString('en-GB', { hour12: false }); // CPU (0-100) const cpu = Math.min(95, Math.max(5, 42 + Math.random() * 30 - 15)); // mem (percent) const mem = Math.min(90, Math.max(20, 55 + Math.random() * 20 - 10)); // disk I/O (MB/s) total, read, write const read = Math.max(0.5, 20 + Math.random() * 40); const write = Math.max(0.5, 15 + Math.random() * 35); const total = read + write; // network (MB/s) const netIn = Math.max(0.2, 8 + Math.random() * 20); const netOut = Math.max(0.2, 5 + Math.random() * 18); // load average (1m) const load = (Math.random() * 3 + 0.8).toFixed(2); // docker containers (running) const containers = 3 + Math.floor(Math.random() * 4); // 3-6 return { time: now, cpu: +cpu.toFixed(1), mem: +mem.toFixed(1), diskRead: +read.toFixed(1), diskWrite: +write.toFixed(1), diskTotal: +total.toFixed(1), netIn: +netIn.toFixed(1), netOut: +netOut.toFixed(1), load: parseFloat(load), containers: containers }; }; // initial history (12 points) const initialHistory = Array.from({ length: 12 }, () => generateMetrics()); // ---------- root component ---------- function Monitor() { const [history, setHistory] = useState(initialHistory); const [refresh, setRefresh] = useState(3); // seconds // live update effect useEffect(() => { const interval = setInterval(() => { setHistory(prev => { const next = [...prev, generateMetrics()]; return next.length > 30 ? next.slice(-30) : next; }); }, refresh * 1000); return () => clearInterval(interval); }, [refresh]); // latest data point const latest = history[history.length - 1]; // format for tooltip const formatMB = (value) => `${value} MB/s`; // disk I/O chart data (we need total, read, write) const diskData = history.map(d => ({ time: d.time, total: d.diskTotal, read: d.diskRead, write: d.diskWrite })); // cpu + mem history const cpuMemData = history.map(d => ({ time: d.time, cpu: d.cpu, mem: d.mem })); // network data const netData = history.map(d => ({ time: d.time, in: d.netIn, out: d.netOut })); return ( React.createElement('div', null, [ // header React.createElement('div', { className: 'header', key: 'header' }, [ React.createElement('div', { className: 'title-section' }, [ React.createElement('h1', null, [ 'Ubuntu 6.14.0', React.createElement('span', null, 'x86_64 · MacBook Pro 12,1') ]), React.createElement('div', { className: 'subhead' }, [ 'SSH from VS Code · Docker active', React.createElement('span', { className: 'docker-badge', style: { marginLeft: '12px' } }, `🐳 ${latest.containers} running`) ]) ]), React.createElement('div', { className: 'controls' }, [ React.createElement('div', { className: 'refresh-group' }, [ React.createElement('span', { className: 'refresh-label' }, 'refresh'), React.createElement('select', { className: 'refresh-select', value: refresh, onChange: (e) => setRefresh(Number(e.target.value)) }, [ React.createElement('option', { value: 1 }, '1 sec'), React.createElement('option', { value: 3 }, '3 sec'), React.createElement('option', { value: 5 }, '5 sec'), React.createElement('option', { value: 10 }, '10 sec') ]) ]), React.createElement('div', { className: 'status-chip' }, [ React.createElement('span', { className: 'dot' }), 'live' ]) ]) ]), // KPI cards row (4 cards) React.createElement('div', { className: 'grid', key: 'kpi-grid' }, [ // CPU card React.createElement('div', { className: 'card col-span-3', key: 'cpu' }, [ React.createElement('div', { className: 'card-header' }, [ React.createElement('span', { className: 'card-title' }, 'CPU'), React.createElement('span', { className: 'metric-badge' }, 'load') ]), React.createElement('div', { className: 'kpi-value' }, [ latest.cpu, React.createElement('span', { className: 'kpi-unit' }, '%') ]), React.createElement('div', { className: 'kpi-sub' }, [ `1m load: ${latest.load}`, React.createElement('span', null, ` ${latest.containers} cont.`) ]) ]), // Memory card React.createElement('div', { className: 'card col-span-3', key: 'mem' }, [ React.createElement('div', { className: 'card-header' }, [ React.createElement('span', { className: 'card-title' }, 'Memory'), React.createElement('span', { className: 'metric-badge' }, 'used') ]), React.createElement('div', { className: 'kpi-value' }, [ latest.mem, React.createElement('span', { className: 'kpi-unit' }, '%') ]), React.createElement('div', { className: 'kpi-sub' }, [ '16 GB · 8 GB used' ]) ]), // Disk I/O total React.createElement('div', { className: 'card col-span-3', key: 'disk' }, [ React.createElement('div', { className: 'card-header' }, [ React.createElement('span', { className: 'card-title' }, 'Disk I/O'), React.createElement('span', { className: 'metric-badge' }, 'total') ]), React.createElement('div', { className: 'kpi-value' }, [ latest.diskTotal, React.createElement('span', { className: 'kpi-unit' }, 'MB/s') ]), React.createElement('div', { className: 'kpi-sub' }, [ React.createElement('span', null, `⬇ ${latest.diskRead} MB/s`), React.createElement('span', null, `⬆ ${latest.diskWrite} MB/s`) ]) ]), // Network React.createElement('div', { className: 'card col-span-3', key: 'net' }, [ React.createElement('div', { className: 'card-header' }, [ React.createElement('span', { className: 'card-title' }, 'Network'), React.createElement('span', { className: 'metric-badge' }, 'eth0') ]), React.createElement('div', { className: 'kpi-value' }, [ (latest.netIn + latest.netOut).toFixed(1), React.createElement('span', { className: 'kpi-unit' }, 'MB/s') ]), React.createElement('div', { className: 'kpi-sub' }, [ React.createElement('span', null, `↓ ${latest.netIn} MB/s`), React.createElement('span', null, `↑ ${latest.netOut} MB/s`) ]) ]) ]), // Disk I/O graph (total, read, write) - prominent React.createElement('div', { className: 'card col-span-12', key: 'disk-graph', style: { marginTop: '8px' } }, [ React.createElement('div', { className: 'card-header' }, [ React.createElement('span', { className: 'card-title' }, 'Disk throughput · total / read / write'), React.createElement('span', { className: 'metric-badge' }, 'MB/s') ]), React.createElement('div', { className: 'graph-container' }, [ React.createElement(ResponsiveContainer, { width: '100%', height: '100%' }, [ React.createElement(LineChart, { data: diskData, margin: { top: 8, right: 20, bottom: 0, left: -10 } }, [ React.createElement(CartesianGrid, { strokeDasharray: '3 3', stroke: '#e0e9f0', vertical: false }), React.createElement(XAxis, { dataKey: 'time', tick: { fontSize: 11, fontFamily: 'Quicksand' }, stroke: '#9aaebf' }), React.createElement(YAxis, { tick: { fontSize: 11 }, stroke: '#9aaebf', unit: ' MB/s' }), React.createElement(Tooltip, { contentStyle: { borderRadius: '16px', border: '1px solid #dce5ec', fontFamily: 'Quicksand' } }), React.createElement(Legend, { wrapperStyle: { fontSize: '12px', paddingTop: '8px' } }), React.createElement(Line, { type: 'monotone', dataKey: 'total', stroke: '#2c3e50', strokeWidth: 2.5, dot: false, activeDot: { r: 4 } }), React.createElement(Line, { type: 'monotone', dataKey: 'read', stroke: '#3b82f6', strokeWidth: 2, dot: false }), React.createElement(Line, { type: 'monotone', dataKey: 'write', stroke: '#f59e0b', strokeWidth: 2, dot: false }) ]) ]) ]) ]), // CPU + MEM + NETWORK small graphs (two columns) React.createElement('div', { className: 'grid', key: 'secondary-grid', style: { marginTop: '8px' } }, [ // CPU & MEM combined React.createElement('div', { className: 'card col-span-6', key: 'cpu-mem' }, [ React.createElement('div', { className: 'card-header' }, [ React.createElement('span', { className: 'card-title' }, 'CPU & Memory'), React.createElement('span', { className: 'metric-badge' }, '%') ]), React.createElement('div', { style: { height: '160px' } }, [ React.createElement(ResponsiveContainer, { width: '100%', height: '100%' }, [ React.createElement(AreaChart, { data: cpuMemData, margin: { top: 5, right: 10, bottom: 0, left: -15 } }, [ React.createElement(CartesianGrid, { strokeDasharray: '3 3', stroke: '#e0e9f0', vertical: false }), React.createElement(XAxis, { dataKey: 'time', tick: { fontSize: 10 } }), React.createElement(YAxis, { tick: { fontSize: 10 }, domain: [0, 100] }), React.createElement(Tooltip, { contentStyle: { borderRadius: '12px', fontFamily: 'Quicksand' } }), React.createElement(Legend, { wrapperStyle: { fontSize: '11px' } }), React.createElement(Area, { type: 'monotone', dataKey: 'cpu', stroke: '#3b82f6', fill: '#3b82f6', fillOpacity: 0.15, strokeWidth: 2 }), React.createElement(Area, { type: 'monotone', dataKey: 'mem', stroke: '#10b981', fill: '#10b981', fillOpacity: 0.1, strokeWidth: 2 }) ]) ]) ]) ]), // Network graph React.createElement('div', { className: 'card col-span-6', key: 'net-graph' }, [ React.createElement('div', { className: 'card-header' }, [ React.createElement('span', { className: 'card-title' }, 'Network I/O'), React.createElement('span', { className: 'metric-badge' }, 'MB/s') ]), React.createElement('div', { style: { height: '160px' } }, [ React.createElement(ResponsiveContainer, { width: '100%', height: '100%' }, [ React.createElement(LineChart, { data: netData, margin: { top: 5, right: 10, bottom: 0, left: -15 } }, [ React.createElement(CartesianGrid, { strokeDasharray: '3 3', stroke: '#e0e9f0', vertical: false }), React.createElement(XAxis, { dataKey: 'time', tick: { fontSize: 10 } }), React.createElement(YAxis, { tick: { fontSize: 10 } }), React.createElement(Tooltip, { contentStyle: { borderRadius: '12px', fontFamily: 'Quicksand' } }), React.createElement(Legend, { wrapperStyle: { fontSize: '11px' } }), React.createElement(Line, { type: 'monotone', dataKey: 'in', stroke: '#06b6d4', strokeWidth: 2, dot: false }), React.createElement(Line, { type: 'monotone', dataKey: 'out', stroke: '#8b5cf6', strokeWidth: 2, dot: false }) ]) ]) ]) ]) ]), // footer React.createElement('div', { className: 'footer-note', key: 'footer' }, [ 'kernel 6.14.0-37-generic · x86_64 · Docker containers: ', latest.containers, ' · SSH session · light theme · Quicksand 400' ]) ]) ); } // render const root = ReactDOM.createRoot(document.getElementById('root')); root.render(React.createElement(Monitor)); })(); ``` ### System Monitoring Dashboard Overview This dashboard provides a real-time, at-a-glance view of your server's key performance indicators. The interface is organized into clear sections for immediate assessment. - **Live Metrics Cards**: The top row shows current CPU usage, memory consumption, total disk I/O throughput, and network activity. Each card displays the latest value and a brief sub-metric for context. - **Disk I/O Graph**: The prominent chart visualizes total disk throughput alongside separate read and write speeds over time, allowing you to spot I/O bottlenecks. - **Secondary Charts**: Two additional graphs track CPU & memory usage trends and network I/O (in/out) to give a broader performance picture. - **Refresh Control**: You can adjust the data refresh interval (1, 3, 5, or 10 seconds) using the dropdown in the top-right corner to match your monitoring needs.

Panel de monitoreo de sistema Linux en HTML con React

Contenido del PromptGuardar

Iniciá sesión para ver el prompt completo

Uso

Referencias

Discusión