From 3106bc835e4fc94ff5d07a433977dcdbc03038b0 Mon Sep 17 00:00:00 2001
From: buenosairesam <pensalo@gmail.com>
Date: Mon, 26 Jan 2026 20:58:46 -0300
Subject: [PATCH] Update edge: match full stack dashboard style, fix metric
 names

---
 ctrl/edge/edge.py | 353 ++++++++++++++++++++++++++++++++++++----------
 1 file changed, 279 insertions(+), 74 deletions(-)
diff --git a/ctrl/edge/edge.py b/ctrl/edge/edge.py
index bdb1f07..526b9e4 100644
--- a/ctrl/edge/edge.py
+++ b/ctrl/edge/edge.py
@@ -34,141 +34,346 @@ HTML = """
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>sysmonstm</title>
+    <title>System Monitor Dashboard</title>
     <style>
         :root {
-            --bg: #1a1a2e;
-            --bg2: #16213e;
-            --text: #eee;
+            --bg-primary: #1a1a2e;
+            --bg-secondary: #16213e;
+            --bg-card: #0f3460;
+            --text-primary: #eee;
+            --text-secondary: #a0a0a0;
             --accent: #e94560;
             --success: #4ade80;
-            --muted: #666;
+            --warning: #fbbf24;
+            --danger: #ef4444;
+            --border: #2a2a4a;
         }
+
         * { box-sizing: border-box; margin: 0; padding: 0; }
+
         body {
-            font-family: system-ui, sans-serif;
-            background: var(--bg);
-            color: var(--text);
+            font-family: system-ui, -apple-system, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
             min-height: 100vh;
-            padding: 2rem;
         }
+
         header {
+            background: var(--bg-secondary);
+            padding: 1rem 2rem;
+            border-bottom: 2px solid var(--accent);
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 2rem;
-            padding-bottom: 1rem;
-            border-bottom: 2px solid var(--accent);
         }
-        h1 { font-size: 1.5rem; }
+
+        header h1 { font-size: 1.5rem; }
+
         .status {
             display: flex;
             align-items: center;
             gap: 0.5rem;
             font-size: 0.875rem;
         }
-        .dot {
+
+        .status-dot {
             width: 10px;
             height: 10px;
             border-radius: 50%;
-            background: var(--accent);
+            background: var(--danger);
         }
-        .dot.ok { background: var(--success); }
-        .machines {
+
+        .status-dot.connected { background: var(--success); }
+
+        main {
+            padding: 1.5rem;
+            max-width: 1600px;
+            margin: 0 auto;
+        }
+
+        .machines-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-            gap: 1rem;
+            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+            gap: 1.5rem;
         }
-        .machine {
-            background: var(--bg2);
+
+        .machine-card {
+            background: var(--bg-secondary);
             border-radius: 8px;
-            padding: 1rem;
+            padding: 1.25rem;
+            border: 1px solid var(--border);
         }
-        .machine h3 { margin-bottom: 0.5rem; }
-        .metric {
+
+        .machine-header {
             display: flex;
             justify-content: space-between;
-            padding: 0.25rem 0;
-            border-bottom: 1px solid #333;
+            align-items: center;
+            margin-bottom: 1rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 1px solid var(--border);
         }
-        .empty {
+
+        .machine-name {
+            font-weight: 600;
+            color: var(--accent);
+        }
+
+        .machine-id {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+
+        .machine-status {
+            font-size: 0.75rem;
+            padding: 0.25rem 0.5rem;
+            border-radius: 4px;
+            background: var(--success);
+            color: #000;
+        }
+
+        .machine-status.warning { background: var(--warning); }
+        .machine-status.critical { background: var(--danger); color: #fff; }
+
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 0.75rem;
+        }
+
+        .metric {
+            background: var(--bg-card);
+            padding: 0.75rem;
+            border-radius: 6px;
+        }
+
+        .metric-label {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            margin-bottom: 0.25rem;
+        }
+
+        .metric-value {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+
+        .metric-bar {
+            height: 4px;
+            background: var(--border);
+            border-radius: 2px;
+            margin-top: 0.5rem;
+            overflow: hidden;
+        }
+
+        .metric-bar-fill {
+            height: 100%;
+            background: var(--success);
+            transition: width 0.3s ease;
+        }
+
+        .metric-bar-fill.warning { background: var(--warning); }
+        .metric-bar-fill.critical { background: var(--danger); }
+
+        .last-seen {
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            margin-top: 1rem;
+            text-align: right;
+        }
+
+        .no-machines {
             text-align: center;
-            color: var(--muted);
-            padding: 4rem;
+            padding: 3rem;
+            color: var(--text-secondary);
+        }
+
+        .no-machines h2 {
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+        }
+
+        @media (max-width: 600px) {
+            .machines-grid { grid-template-columns: 1fr; }
+            .metrics-grid { grid-template-columns: 1fr; }
         }
-        .empty p { margin-top: 1rem; }
     </style>
 </head>
 <body>
     <header>
-        <h1>sysmonstm</h1>
+        <h1>System Monitor</h1>
         <div class="status">
-            <span class="dot" id="ws-status"></span>
-            <span id="status-text">connecting...</span>
+            <span class="status-dot" id="status-dot"></span>
+            <span id="status-text">Connecting...</span>
         </div>
     </header>
+
     <main>
-        <div id="machines" class="machines">
-            <div class="empty">
-                <h2>No collectors connected</h2>
-                <p>Start a collector to see metrics</p>
+        <div class="machines-grid" id="machines-grid">
+            <div class="no-machines">
+                <h2>No machines connected</h2>
+                <p>Waiting for collectors to send metrics...</p>
             </div>
         </div>
     </main>
+
     <script>
-        const machinesEl = document.getElementById('machines');
-        const statusDot = document.getElementById('ws-status');
+        const machinesGrid = document.getElementById('machines-grid');
+        const statusDot = document.getElementById('status-dot');
         const statusText = document.getElementById('status-text');
-        let machines = {};
+
+        const machines = new Map();
+
+        function formatBytes(bytes) {
+            if (bytes === 0) return '0 B';
+            const k = 1024;
+            const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+        }
+
+        function formatRate(bytesPerSec) {
+            return formatBytes(bytesPerSec) + '/s';
+        }
+
+        function getBarClass(value, warning = 80, critical = 95) {
+            if (value >= critical) return 'critical';
+            if (value >= warning) return 'warning';
+            return '';
+        }
+
+        function getStatusClass(m) {
+            const cpu = m.cpu_percent || 0;
+            const mem = m.memory_percent || 0;
+            const disk = m.disk_percent || 0;
+
+            if (cpu > 95 || mem > 95 || disk > 90) return 'critical';
+            if (cpu > 80 || mem > 85 || disk > 80) return 'warning';
+            return '';
+        }
+
+        function timeSince(timestamp) {
+            if (!timestamp) return '-';
+            const date = typeof timestamp === 'string' ? new Date(timestamp) : new Date(timestamp);
+            const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
+            if (seconds < 5) return 'just now';
+            if (seconds < 60) return seconds + 's ago';
+            const minutes = Math.floor(seconds / 60);
+            if (minutes < 60) return minutes + 'm ago';
+            return Math.floor(minutes / 60) + 'h ago';
+        }
+
+        function renderMachine(data) {
+            const m = data;
+            const statusClass = getStatusClass(m);
+
+            return `
+                <div class="machine-card" data-machine="${data.machine_id}">
+                    <div class="machine-header">
+                        <div>
+                            <div class="machine-name">${data.hostname || data.machine_id}</div>
+                            <div class="machine-id">${data.machine_id}</div>
+                        </div>
+                        <span class="machine-status ${statusClass}">${statusClass || 'healthy'}</span>
+                    </div>
+                    <div class="metrics-grid">
+                        <div class="metric">
+                            <div class="metric-label">CPU</div>
+                            <div class="metric-value">${(m.cpu_percent || 0).toFixed(1)}%</div>
+                            <div class="metric-bar">
+                                <div class="metric-bar-fill ${getBarClass(m.cpu_percent || 0)}"
+                                     style="width: ${m.cpu_percent || 0}%"></div>
+                            </div>
+                        </div>
+                        <div class="metric">
+                            <div class="metric-label">Memory</div>
+                            <div class="metric-value">${(m.memory_percent || 0).toFixed(1)}%</div>
+                            <div class="metric-bar">
+                                <div class="metric-bar-fill ${getBarClass(m.memory_percent || 0, 85, 95)}"
+                                     style="width: ${m.memory_percent || 0}%"></div>
+                            </div>
+                        </div>
+                        <div class="metric">
+                            <div class="metric-label">Disk</div>
+                            <div class="metric-value">${(m.disk_percent || 0).toFixed(1)}%</div>
+                            <div class="metric-bar">
+                                <div class="metric-bar-fill ${getBarClass(m.disk_percent || 0, 80, 90)}"
+                                     style="width: ${m.disk_percent || 0}%"></div>
+                            </div>
+                        </div>
+                        <div class="metric">
+                            <div class="metric-label">Load (1m)</div>
+                            <div class="metric-value">${(m.load_avg_1m || 0).toFixed(2)}</div>
+                        </div>
+                        <div class="metric">
+                            <div class="metric-label">Network In</div>
+                            <div class="metric-value">${formatRate(m.network_recv_bytes_sec || 0)}</div>
+                        </div>
+                        <div class="metric">
+                            <div class="metric-label">Network Out</div>
+                            <div class="metric-value">${formatRate(m.network_sent_bytes_sec || 0)}</div>
+                        </div>
+                    </div>
+                    <div class="last-seen">Last seen: ${timeSince(m.timestamp)}</div>
+                </div>
+            `;
+        }
+
+        function updateUI() {
+            if (machines.size === 0) {
+                machinesGrid.innerHTML = `
+                    <div class="no-machines">
+                        <h2>No machines connected</h2>
+                        <p>Waiting for collectors to send metrics...</p>
+                    </div>
+                `;
+                return;
+            }
+
+            machinesGrid.innerHTML = Array.from(machines.values())
+                .map(renderMachine)
+                .join('');
+        }
 
         function connect() {
             const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
             const ws = new WebSocket(`${protocol}//${location.host}/ws`);
 
             ws.onopen = () => {
-                statusDot.classList.add('ok');
-                statusText.textContent = 'connected';
+                statusDot.classList.add('connected');
+                statusText.textContent = 'Connected';
             };
 
             ws.onclose = () => {
-                statusDot.classList.remove('ok');
-                statusText.textContent = 'disconnected';
-                setTimeout(connect, 2000);
+                statusDot.classList.remove('connected');
+                statusText.textContent = 'Disconnected - Reconnecting...';
+                setTimeout(connect, 3000);
             };
 
-            ws.onmessage = (e) => {
-                const data = JSON.parse(e.data);
-                if (data.type === 'metrics') {
-                    machines[data.machine_id] = data;
-                    render();
+            ws.onerror = () => {
+                statusDot.classList.remove('connected');
+                statusText.textContent = 'Connection error';
+            };
+
+            ws.onmessage = (event) => {
+                try {
+                    const msg = JSON.parse(event.data);
+                    if (msg.type === 'metrics' || msg.type === 'initial') {
+                        machines.set(msg.machine_id, msg);
+                        updateUI();
+                    }
+                } catch (e) {
+                    console.error('Failed to parse message:', e);
                 }
             };
+
+            setInterval(() => {
+                if (ws.readyState === WebSocket.OPEN) {
+                    ws.send('ping');
+                }
+            }, 30000);
         }
 
-        function render() {
-            const ids = Object.keys(machines).sort();
-            if (ids.length === 0) {
-                machinesEl.innerHTML = '<div class="empty"><h2>No collectors connected</h2><p>Start a collector to see metrics</p></div>';
-                return;
-            }
-
-            machinesEl.innerHTML = ids.map(id => {
-                const m = machines[id];
-                const ts = m.timestamp ? new Date(m.timestamp * 1000).toLocaleTimeString() : '-';
-                return `
-                    <div class="machine">
-                        <h3>${id}</h3>
-                        <div class="metric"><span>CPU</span><span>${m.cpu?.toFixed(1) || '-'}%</span></div>
-                        <div class="metric"><span>Memory</span><span>${m.memory?.toFixed(1) || '-'}%</span></div>
-                        <div class="metric"><span>Disk</span><span>${m.disk?.toFixed(1) || '-'}%</span></div>
-                        <div class="metric"><span>Load (1m)</span><span>${m.load_1m?.toFixed(2) || '-'}</span></div>
-                        <div class="metric"><span>Processes</span><span>${m.processes || '-'}</span></div>
-                        <div class="metric"><span>Updated</span><span>${ts}</span></div>
-                    </div>
-                `;
-            }).join('');
-        }
-
+        setInterval(updateUI, 5000);
         connect();
     </script>
 </body>
