shawn/project-directory
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Add live Windows Gaming PC stats with metric bars

Browse Source 
- New API /api/windows/stats: SSHes into gamingpc, runs PowerShell for CPU/RAM/Disk/Uptime
- Live metric bars on the Windows PC card (CPU/RAM/C:) updating every 30s
- Duplicate barColor() removed
This commit is contained in:
Shawn
2026-05-25 01:10:15 -04:00
parent 1e60745e47
commit 8b96c3ffc9
2 changed files with 93 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+50 -1
View File
@@ -268,10 +268,13 @@
<div class="card-expand"><div class="detail-row"><span class="detail-label">WAN</span><span class="detail-val">68.202.6.107</span></div><div class="detail-row"><span class="detail-label">Proxy</span><span class="detail-val">192.168.0.115</span></div><div class="detail-row"><span class="detail-label">VPN</span><span class="detail-val">Tailscale mesh — 2 nodes</span></div></div>
</div>
<div class="card nolink" onclick="toggleCardExpand(this)">
<div class="card nolink" id="win-pc-card" onclick="toggleCardExpand(this)">
<div class="card-header"><div class="card-icon" style="background:#fce7f3;">🖥️</div><span class="card-title">Windows Gaming PC</span><span class="expand-indicator">▾</span></div>
<p class="card-desc"><strong>i7-8700K · RTX 2080 4GB · 32GB RAM</strong> — ComfyUI :8188, Ollama qwen2.5vl :11434. Tailscale 100.84.53.121</p>
<div class="card-meta"><span class="tag">Win 11 Pro</span><span class="tag">NVMe</span><span class="tag">C: 931GB</span></div>
<div id="win-pc-metrics" style="margin: 10px 0 0 0; font-size: 13px;">
<span class="stats-error">Loading Windows stats...</span>
</div>
<div class="card-expand">
<div class="detail-row"><span class="detail-label">CPU</span><span class="detail-val">Intel Core i7-8700K @ 3.70GHz (6C/12T)</span></div>
<div class="detail-row"><span class="detail-label">GPU</span><span class="detail-val">NVIDIA RTX 2080 (4GB) + Intel UHD 630</span></div>
@@ -506,14 +509,60 @@ async function updateDocker() {
}
}
// ─── Windows Gaming PC Live Stats ──────────────────────────────────────
async function updateWindowsStats() {
const el = document.getElementById("win-pc-metrics");
if (!el) return;
try {
const r = await fetch("/api/windows/stats");
const d = await r.json();
if (!d.online) {
el.innerHTML = `<span class="stats-error">Windows PC offline</span>`;
return;
}
const memPct = d.mem_total_gb > 0 ? Math.round((d.mem_used_gb / d.mem_total_gb) * 100) : 0;
const diskPct = d.disk_c_total_gb > 0 ? Math.round((d.disk_c_used_gb / d.disk_c_total_gb) * 100) : 0;
el.innerHTML = `
<div class="metric-row" style="margin-bottom:2px">
<span class="metric-label" style="font-size:12px">CPU</span>
<div class="metric-bar-bg" style="height:6px">
<div class="metric-bar-fill" style="width:${Math.min(d.cpu, 100)}%;background:${barColor(d.cpu)}"></div>
</div>
<span class="metric-val" style="font-size:11px">${d.cpu}%</span>
</div>
<div class="metric-row" style="margin-bottom:2px">
<span class="metric-label" style="font-size:12px">RAM</span>
<div class="metric-bar-bg" style="height:6px">
<div class="metric-bar-fill" style="width:${memPct}%;background:${barColor(memPct)}"></div>
</div>
<span class="metric-val" style="font-size:11px">${d.mem_used_gb}/${d.mem_total_gb} GB</span>
</div>
<div class="metric-row" style="margin-bottom:2px">
<span class="metric-label" style="font-size:12px">C:</span>
<div class="metric-bar-bg" style="height:6px">
<div class="metric-bar-fill" style="width:${diskPct}%;background:${barColor(diskPct)}"></div>
</div>
<span class="metric-val" style="font-size:11px">${d.disk_c_used_gb}/${d.disk_c_total_gb} GB</span>
</div>
<div style="font-size:11px;color:var(--gray-400);margin-top:4px">
Uptime: ${d.uptime_days}d &middot; Win 11 Pro
</div>`;
} catch(e) {
el.innerHTML = `<span class="stats-error">Windows stats unavailable</span>`;
}
}
// ─── Init ─────────────────────────────────────────────────────────────
renderServices();
updateStatus();
updateHosts();
updateDocker();
updateWindowsStats();
setInterval(updateStatus, 60000);
setInterval(updateHosts, 30000);
setInterval(updateDocker, 30000);
setInterval(updateWindowsStats, 30000);
// ─── Dark Mode Toggle ──────────────────────────────────────────────────
function toggleDark() {