vxaboveground/overlord
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

system health in settings

Browse Source
This commit is contained in:
KingKDot
2026-05-22 10:49:29 -05:00
parent eb75f1a49f
commit 238ea09214
5 changed files with 322 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Overlord-Server/public/assets/settings.js
+128
View File
@@ -891,6 +891,7 @@ function initSettingsSidebar() {
// (nav-hidden toggle, viewport resize, dropdown opened) doesn't leave the
// section partly hidden under the nav.
updateSettingsScrollOffset();
_clickLockUntil = Date.now() + 1200;
setActive(link);
target.scrollIntoView({ behavior: "smooth", block: "start" });
history.replaceState(null, "", `#${id}`);
@@ -898,7 +899,9 @@ function initSettingsSidebar() {
// Active-section highlight via IntersectionObserver + page-bottom override.
const visible = new Set();
let _clickLockUntil = 0;
function updateActive() {
if (Date.now() < _clickLockUntil) return;
// Special case: if the user has scrolled as far as the page allows, the
// last visible section becomes active (otherwise the topmost-visible
// heuristic would leave shorter trailing sections — like Custom CSS or
@@ -1706,6 +1709,129 @@ function initThumbnailHandlers() {
if (form) form.addEventListener("submit", saveThumbnailSettings);
}
// ── Server Health ─────────────────────────────────────────────────────────
function formatBytes(bytes) {
if (!bytes || bytes <= 0) return "0 B";
const k = 1024;
const sizes = ["B", "KB", "MB", "GB", "TB"];
const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
return `${(bytes / Math.pow(k, i)).toFixed(i > 0 ? 1 : 0)} ${sizes[i]}`;
}
function formatUptime(totalSeconds) {
const s = Math.floor(totalSeconds);
const days = Math.floor(s / 86400);
const hours = Math.floor((s % 86400) / 3600);
const mins = Math.floor((s % 3600) / 60);
const secs = s % 60;
if (days > 0) return `${days}d ${hours}h ${mins}m`;
if (hours > 0) return `${hours}h ${mins}m ${secs}s`;
if (mins > 0) return `${mins}m ${secs}s`;
return `${secs}s`;
}
async function loadHealthStats() {
const loading = document.getElementById("health-loading");
const content = document.getElementById("health-content");
if (loading) { loading.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i>Loading...'; loading.classList.remove("hidden"); }
if (content) content.classList.add("hidden");
try {
const res = await fetch("/api/settings/health", { credentials: "include" });
if (!res.ok) {
if (loading) loading.textContent = "Failed to load health stats.";
return;
}
const data = await res.json();
const mem = data.memory || {};
const rss = mem.rss || 0;
const heapUsed = mem.heapUsed || 0;
const ext = (mem.external || 0) + (mem.arrayBuffers || 0);
const set = (id, v) => { const el = document.getElementById(id); if (el) el.textContent = v; };
set("health-uptime", formatUptime(data.uptime || 0));
set("health-rss", formatBytes(rss));
set("health-heap-used", formatBytes(heapUsed));
set("health-external", formatBytes(ext));
const heapPct = rss > 0 ? Math.min(100, (heapUsed / rss) * 100) : 0;
const extPct = rss > 0 ? Math.min(100 - heapPct, (ext / rss) * 100) : 0;
const heapBar = document.getElementById("health-heap-bar");
const extBar = document.getElementById("health-ext-bar");
const heapBarLabel = document.getElementById("health-heap-bar-label");
const barLabel = document.getElementById("health-bar-label");
if (heapBar) {
heapBar.style.width = `${heapPct.toFixed(1)}%`;
heapBar.title = `Heap: ${formatBytes(heapUsed)} (${heapPct.toFixed(1)}% of RSS)`;
}
if (extBar) {
extBar.style.width = `${extPct.toFixed(1)}%`;
extBar.title = `External/Buffers: ${formatBytes(ext)} (${extPct.toFixed(1)}% of RSS)`;
}
if (heapBarLabel) {
heapBarLabel.textContent = `${heapPct.toFixed(0)}%`;
heapBarLabel.classList.toggle("hidden", heapPct < 8);
}
if (barLabel) {
barLabel.textContent = rss > 0
? `${formatBytes(heapUsed)} heap + ${formatBytes(ext)} ext / ${formatBytes(rss)} RSS`
: "-";
}
const t = data.components?.thumbnails || {};
set("h-thumb-count", `${t.cachedCount ?? 0} / ${t.cacheMax ?? 0}`);
set("h-thumb-bytes", formatBytes(t.cachedBytes || 0));
set("h-thumb-frames", t.pendingFrames ?? 0);
set("h-thumb-gen", `${t.genActive ?? 0} active, ${t.genQueued ?? 0} queued`);
set("h-thumb-max", t.cacheMax ?? 0);
const c = data.components?.clients || {};
set("h-clients-mem", c.inMemory ?? 0);
set("h-clients-online", c.online ?? 0);
const db = data.components?.database || {};
set("h-db-size", formatBytes(db.fileSizeBytes || 0));
if (loading) loading.classList.add("hidden");
if (content) content.classList.remove("hidden");
} catch (e) {
if (loading) loading.textContent = `Error: ${e.message}`;
}
}
async function runGC() {
const gcBtn = document.getElementById("health-gc-btn");
const msgEl = document.getElementById("health-gc-message");
if (gcBtn) gcBtn.disabled = true;
try {
const res = await fetch("/api/settings/gc", { method: "POST", credentials: "include" });
const data = await res.json().catch(() => ({}));
if (msgEl) {
msgEl.textContent = res.ok
? `GC complete — freed ~${formatBytes(data.freedBytes || 0)}`
: `GC failed: ${data.error || res.statusText}`;
msgEl.classList.remove("hidden");
setTimeout(() => msgEl.classList.add("hidden"), 6000);
}
if (res.ok) await loadHealthStats();
} catch (e) {
if (msgEl) { msgEl.textContent = `Error: ${e.message}`; msgEl.classList.remove("hidden"); }
} finally {
if (gcBtn) gcBtn.disabled = false;
}
}
function initHealthHandlers() {
const refreshBtn = document.getElementById("health-refresh-btn");
const gcBtn = document.getElementById("health-gc-btn");
if (refreshBtn) refreshBtn.addEventListener("click", loadHealthStats);
if (gcBtn) gcBtn.addEventListener("click", runGC);
}
async function init() {
try {
await loadCurrentUser();
@@ -1729,9 +1855,11 @@ async function init() {
await loadRegistrationSettings();
await loadBuildRateLimitSettings();
await loadThumbnailSettings();
await loadHealthStats();
initRegistrationHandlers();
initBuildRateLimitHandlers();
initThumbnailHandlers();
initHealthHandlers();
}
passwordForm.addEventListener("submit", updatePassword);
Overlord-Server/public/settings.html
+118
View File
@@ -98,6 +98,7 @@
<a data-target="build-rate-limit-section" class="settings-nav-link" data-permission="system:configure" style="--accent: 251 146 60"><i class="fa-solid fa-gauge-high w-4 text-orange-400"></i><span>Build Rate Limit</span></a>
<a data-target="section-appearance" class="settings-nav-link" data-permission="system:configure" style="--accent: 232 121 249"><i class="fa-solid fa-paintbrush w-4 text-fuchsia-400"></i><span>Custom CSS</span></a>
<a data-target="export-import-section" class="settings-nav-link" data-permission="system:configure" style="--accent: 251 191 36"><i class="fa-solid fa-file-export w-4 text-amber-400"></i><span>Export / Import</span></a>
<a data-target="section-health" class="settings-nav-link" data-permission="system:configure" style="--accent: 34 211 238"><i class="fa-solid fa-heart-pulse w-4 text-cyan-400"></i><span>Server Health</span></a>
</nav>
</aside>
@@ -989,6 +990,123 @@
<p id="export-import-message" class="hidden text-sm rounded-lg px-3 py-2 border"></p>
</section>
<!-- Server Health -->
<section id="section-health" class="bg-slate-900/60 border border-slate-800 rounded-xl p-5 space-y-4 settings-section hidden" data-permission="system:configure">
<div class="flex items-center justify-between gap-3 flex-wrap">
<div class="flex items-center gap-3">
<div class="flex items-center justify-center w-9 h-9 rounded-lg bg-cyan-500/10 border border-cyan-500/30">
<i class="fa-solid fa-heart-pulse text-cyan-400"></i>
</div>
<div>
<h2 class="text-lg font-semibold">Server Health</h2>
<p class="text-sm text-slate-400">Memory usage, per-component breakdown, and process stats.</p>
</div>
</div>
<div class="flex items-center gap-2">
<button id="health-gc-btn" type="button"
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm transition-colors text-slate-300">
<i class="fa-solid fa-broom"></i>Force GC
</button>
<button id="health-refresh-btn" type="button"
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm transition-colors text-slate-300">
<i class="fa-solid fa-rotate"></i>Refresh
</button>
</div>
</div>
<div id="health-loading" class="text-slate-500 text-sm py-4 text-center">
<i class="fa-solid fa-spinner fa-spin mr-2"></i>Loading...
</div>
<div id="health-content" class="hidden space-y-4">
<!-- Summary cards -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
<div class="rounded-lg bg-slate-900 border border-slate-800 px-3 py-2">
<div class="text-slate-400 text-xs mb-0.5">Uptime</div>
<div id="health-uptime" class="font-medium font-mono">-</div>
</div>
<div class="rounded-lg bg-slate-900 border border-slate-800 px-3 py-2">
<div class="text-slate-400 text-xs mb-0.5">RSS (Total)</div>
<div id="health-rss" class="font-medium font-mono">-</div>
</div>
<div class="rounded-lg bg-slate-900 border border-slate-800 px-3 py-2">
<div class="text-slate-400 text-xs mb-0.5">Heap Used</div>
<div id="health-heap-used" class="font-medium font-mono">-</div>
</div>
<div class="rounded-lg bg-slate-900 border border-slate-800 px-3 py-2">
<div class="text-slate-400 text-xs mb-0.5">External / Buffers</div>
<div id="health-external" class="font-medium font-mono">-</div>
</div>
</div>
<!-- Memory bar -->
<div>
<div class="flex justify-between text-xs mb-1.5">
<span class="text-slate-400">RSS memory breakdown</span>
<span id="health-bar-label" class="font-mono text-slate-300">-</span>
</div>
<!-- Stacked bar: heap | external/buffers | free -->
<div class="h-5 rounded-lg bg-slate-700 overflow-hidden flex" style="min-width:0">
<div id="health-heap-bar"
class="h-full bg-sky-500 transition-all duration-700 flex items-center justify-center overflow-hidden"
style="width:0%" title="JS Heap">
<span id="health-heap-bar-label" class="text-white text-[10px] font-mono font-semibold leading-none px-1 hidden"></span>
</div>
<div id="health-ext-bar"
class="h-full bg-violet-500 transition-all duration-700"
style="width:0%" title="External / Buffers"></div>
</div>
<!-- Legend -->
<div class="flex items-center gap-4 mt-2 text-xs text-slate-400">
<span class="flex items-center gap-1.5"><span class="inline-block w-2.5 h-2.5 rounded-sm bg-sky-500"></span>Heap used</span>
<span class="flex items-center gap-1.5"><span class="inline-block w-2.5 h-2.5 rounded-sm bg-violet-500"></span>External / Buffers</span>
<span class="flex items-center gap-1.5"><span class="inline-block w-2.5 h-2.5 rounded-sm bg-slate-700"></span>Other (native, stack)</span>
</div>
</div>
<!-- Component breakdown -->
<div>
<p class="text-xs font-semibold uppercase tracking-wider text-slate-500 mb-2">Components</p>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
<!-- Thumbnails -->
<div class="rounded-lg bg-slate-900 border border-slate-800 p-3 space-y-2">
<div class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-images text-sky-400 text-xs w-3"></i>Thumbnail Cache
</div>
<div class="space-y-1 text-xs text-slate-400 font-mono">
<div class="flex justify-between"><span>Cached</span><span id="h-thumb-count" class="text-slate-200">-</span></div>
<div class="flex justify-between"><span>Cache size</span><span id="h-thumb-bytes" class="text-slate-200">-</span></div>
<div class="flex justify-between"><span>Pending frames</span><span id="h-thumb-frames" class="text-slate-200">-</span></div>
<div class="flex justify-between"><span>Gen active / queued</span><span id="h-thumb-gen" class="text-slate-200">-</span></div>
<div class="flex justify-between text-slate-500"><span>Capacity</span><span id="h-thumb-max">-</span></div>
</div>
</div>
<!-- Clients -->
<div class="rounded-lg bg-slate-900 border border-slate-800 p-3 space-y-2">
<div class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-users text-emerald-400 text-xs w-3"></i>Connected Clients
</div>
<div class="space-y-1 text-xs text-slate-400 font-mono">
<div class="flex justify-between"><span>In memory</span><span id="h-clients-mem" class="text-slate-200">-</span></div>
<div class="flex justify-between"><span>Online (&lt;60s)</span><span id="h-clients-online" class="text-slate-200">-</span></div>
</div>
</div>
<!-- Database -->
<div class="rounded-lg bg-slate-900 border border-slate-800 p-3 space-y-2">
<div class="flex items-center gap-2 text-sm font-medium text-slate-200">
<i class="fa-solid fa-database text-amber-400 text-xs w-3"></i>Database
</div>
<div class="space-y-1 text-xs text-slate-400 font-mono">
<div class="flex justify-between"><span>File size</span><span id="h-db-size" class="text-slate-200">-</span></div>
</div>
</div>
</div>
</div>
<p id="health-gc-message" class="hidden text-xs rounded-lg px-3 py-2 border border-emerald-700 bg-emerald-900/20 text-emerald-300"></p>
</div>
</section>
</div>
<!-- /Sections -->
</div>