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

improve file browser and metrics UI.

Browse Source
This commit is contained in:
KingKDot
2026-07-14 00:25:36 -05:00
parent a9bf923e7a
commit 172703c33b
4 changed files with 130 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Overlord-Server/public/assets/filebrowser.js
+9 -6
View File
@@ -85,7 +85,7 @@ const editorCancelBtn = document.getElementById("editor-cancel-btn");
const editorCloseBtn = document.getElementById("editor-close-btn"); const editorCloseBtn = document.getElementById("editor-close-btn");
if (clientIdHeader) { if (clientIdHeader) {
clientIdHeader.textContent = `${clientId} - File Browser`; clientIdHeader.innerHTML = `<i class="fa-solid fa-computer mr-1.5 text-sky-400"></i>${escapeHtml(clientId)}`;
} }
let sortField = localStorage.getItem("filebrowser.sortField") || "name"; let sortField = localStorage.getItem("filebrowser.sortField") || "name";
@@ -141,10 +141,13 @@ function updateStatus(state, text) {
}; };
statusEl.innerHTML = `${icons[state] || icons.disconnected} ${text}`; statusEl.innerHTML = `${icons[state] || icons.disconnected} ${text}`;
statusEl.className = const stateClasses = {
state === "connected" connected: "bg-emerald-500/10 text-emerald-300 border-emerald-500/30",
? "inline-flex items-center gap-2 px-3 py-2 rounded-full bg-green-900/40 text-green-100 border border-green-700/60" error: "bg-red-500/10 text-red-300 border-red-500/30",
: "inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-300"; disconnected: "bg-slate-800 text-slate-300 border-slate-700",
connecting: "bg-sky-500/10 text-sky-300 border-sky-500/30",
};
statusEl.className = `inline-flex self-start sm:self-auto items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-medium ${stateClasses[state] || stateClasses.disconnected}`;
} }
function enableControls(enabled) { function enableControls(enabled) {
@@ -1401,7 +1404,7 @@ function createFileRow(entry) {
row.innerHTML = ` row.innerHTML = `
<input type="checkbox" class="file-checkbox" data-path="${escapeHtml(entry.path)}"> <input type="checkbox" class="file-checkbox" data-path="${escapeHtml(entry.path)}">
<div class="col-span-6 flex items-center gap-2 truncate pl-3"> <div class="col-span-6 flex items-center gap-2 truncate pl-8">
${icon} ${icon}
<span class="truncate">${escapeHtml(entry.name)}</span> <span class="truncate">${escapeHtml(entry.name)}</span>
${pinBtn} ${pinBtn}
Overlord-Server/public/assets/metrics.js
+11 -5
View File
@@ -760,7 +760,7 @@ function updateMetrics(data, debug) {
.map((route) => { .map((route) => {
const errorClass = route.errorsLastMinute > 0 ? "text-red-300" : "text-slate-400"; const errorClass = route.errorsLastMinute > 0 ? "text-red-300" : "text-slate-400";
return ` return `
<div class="bg-slate-800/50 rounded p-3 min-w-0"> <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3 min-w-0">
<div class="text-xs text-slate-400 mb-2 truncate" title="${escapeHtml(route.route)}"> <div class="text-xs text-slate-400 mb-2 truncate" title="${escapeHtml(route.route)}">
${escapeHtml(route.route)} ${escapeHtml(route.route)}
</div> </div>
@@ -790,7 +790,7 @@ function updateMetrics(data, debug) {
if (tasks.length > 0) { if (tasks.length > 0) {
internalTasksList.innerHTML = tasks internalTasksList.innerHTML = tasks
.map((task) => ` .map((task) => `
<div class="bg-slate-800/50 rounded p-3 min-w-0"> <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3 min-w-0">
<div class="text-xs text-slate-400 mb-2 truncate" title="${escapeHtml(task.task)}"> <div class="text-xs text-slate-400 mb-2 truncate" title="${escapeHtml(task.task)}">
${escapeHtml(task.task)} ${escapeHtml(task.task)}
</div> </div>
@@ -828,7 +828,7 @@ function updateMetrics(data, debug) {
? value ? "yes" : "no" ? value ? "yes" : "no"
: Number(value || 0).toLocaleString(); : Number(value || 0).toLocaleString();
return ` return `
<div class="bg-slate-800/50 rounded p-3 min-w-0"> <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3 min-w-0">
<div class="text-xs text-slate-500 mb-1 truncate" title="${escapeHtml(key)}"> <div class="text-xs text-slate-500 mb-1 truncate" title="${escapeHtml(key)}">
${escapeHtml(key)} ${escapeHtml(key)}
</div> </div>
@@ -854,7 +854,7 @@ function updateMetrics(data, debug) {
commandTypesList.innerHTML = topCommands commandTypesList.innerHTML = topCommands
.map( .map(
([type, count]) => ` ([type, count]) => `
<div class="bg-slate-800/50 rounded p-3"> <div class="bg-slate-950/40 border border-slate-800 rounded-lg p-3">
<div class="text-xs text-slate-400 mb-1">${escapeHtml(type)}</div> <div class="text-xs text-slate-400 mb-1">${escapeHtml(type)}</div>
<div class="text-xl font-bold">${count.toLocaleString()}</div> <div class="text-xl font-bold">${count.toLocaleString()}</div>
</div> </div>
@@ -1831,10 +1831,16 @@ async function fetchMetrics() {
updateCharts(data.history, data.snapshot); updateCharts(data.history, data.snapshot);
document.getElementById("status-text").textContent = "Live"; document.getElementById("status-text").textContent = "Live";
const status = document.getElementById("metrics-status");
status?.classList.remove("bg-red-500/10", "text-red-300", "border-red-500/30");
status?.classList.add("bg-emerald-500/10", "text-emerald-300", "border-emerald-500/30");
} catch (err) { } catch (err) {
if (!metricsPageActive) return; if (!metricsPageActive) return;
console.error("Error fetching metrics:", err); console.error("Error fetching metrics:", err);
document.getElementById("status-text").textContent = "Error"; document.getElementById("status-text").textContent = "Unavailable";
const status = document.getElementById("metrics-status");
status?.classList.remove("bg-emerald-500/10", "text-emerald-300", "border-emerald-500/30");
status?.classList.add("bg-red-500/10", "text-red-300", "border-red-500/30");
} }
} }
Overlord-Server/public/filebrowser.html
+56 -74
View File
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="/vendor/inter/400.css" /> <link rel="stylesheet" href="/vendor/inter/400.css" />
<link rel="stylesheet" href="/vendor/inter/600.css" /> <link rel="stylesheet" href="/vendor/inter/600.css" />
<link rel="stylesheet" href="/vendor/inter/700.css" /> <link rel="stylesheet" href="/vendor/inter/700.css" />
<link rel="stylesheet" href="/assets/tailwind.css" /> <link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" /> <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="/vendor/highlight.js/atom-one-dark.min.css" /> <link rel="stylesheet" href="/vendor/highlight.js/atom-one-dark.min.css" />
<link rel="stylesheet" href="/assets/main.css" /> <link rel="stylesheet" href="/assets/main.css" />
@@ -18,30 +18,28 @@
<script defer src="/vendor/msgpackr/msgpackr.js"></script> <script defer src="/vendor/msgpackr/msgpackr.js"></script>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<style> <style>
body {
font-family: "Inter", sans-serif;
}
.file-item:hover { .file-item:hover {
background-color: rgba(51, 65, 85, 0.5); background-color: rgba(30, 41, 59, 0.62);
} }
.file-item { .file-item {
position: relative; position: relative;
} }
.file-item.selected { .file-item.selected {
background-color: rgba(59, 130, 246, 0.2); background-color: rgba(14, 165, 233, 0.12);
border-color: rgba(59, 130, 246, 0.4); box-shadow: inset 3px 0 0 rgb(56 189 248);
} }
.file-checkbox { .file-checkbox {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
position: absolute; position: absolute;
left: 0; left: 0.75rem;
top: 0; top: 50%;
width: 12px; width: 16px;
height: 100%; height: 16px;
border: none; border: 1px solid rgb(71 85 105);
border-radius: 0; border-radius: 0.25rem;
background-color: rgba(100, 116, 139, 0.3); background-color: rgba(100, 116, 139, 0.3);
transform: translateY(-50%);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
z-index: 1; z-index: 1;
@@ -51,6 +49,8 @@
} }
.file-checkbox:checked { .file-checkbox:checked {
background-color: #3b82f6; background-color: #3b82f6;
border-color: #60a5fa;
box-shadow: inset 0 0 0 3px #0f172a;
} }
.file-checkbox:checked:hover { .file-checkbox:checked:hover {
background-color: #2563eb; background-color: #2563eb;
@@ -90,23 +90,6 @@
/* Mobile responsive styles */ /* Mobile responsive styles */
@media (max-width: 768px) { @media (max-width: 768px) {
header {
padding: 0.75rem;
}
header .flex {
flex-wrap: nowrap;
gap: 0.5rem;
}
header span,
header a {
font-size: 0.875rem;
}
#client-id-header {
display: none;
}
main {
padding: 1rem 0.5rem;
}
.file-header { .file-header {
display: none !important; display: none !important;
} }
@@ -456,12 +439,22 @@
<body class="min-h-screen bg-slate-950 text-slate-100"> <body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header> <header id="top-nav"></header>
<main class="px-5 py-4"> <main class="max-w-[1600px] w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="max-w-[1600px] mx-auto flex gap-4"> <div class="mb-6 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
<div>
<h1 class="text-2xl font-bold">File Browser</h1>
<p id="client-id-header" class="mt-1 text-sm text-slate-400 font-mono">Loading client...</p>
</div>
<span id="status-indicator" class="inline-flex self-start sm:self-auto items-center gap-2 px-3 py-1.5 rounded-full bg-slate-800 text-slate-300 border border-slate-700 text-xs font-medium">
<i class="fa-solid fa-circle-notch fa-spin"></i> Connecting...
</span>
</div>
<div class="flex gap-4">
<!-- Sidebar --> <!-- Sidebar -->
<aside id="sidebar" class="w-52 flex-shrink-0 hidden lg:block"> <aside id="sidebar" class="w-52 flex-shrink-0 hidden lg:block">
<div class="sticky flex flex-col gap-3 sidebar-scroll" style="top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto;"> <div class="sticky flex flex-col gap-3 sidebar-scroll" style="top: 5rem; max-height: calc(100vh - 6rem); overflow-y: auto;">
<div class="bg-slate-900/70 border border-slate-800 rounded-lg overflow-hidden"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
<div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center justify-between gap-2"> <div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center justify-between gap-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<i class="fa-solid fa-star text-yellow-400 text-xs"></i> <i class="fa-solid fa-star text-yellow-400 text-xs"></i>
@@ -480,7 +473,7 @@
<div class="text-xs text-slate-500 text-center py-3">No pinned paths.<br><span class="text-slate-600">Right-click any folder.</span></div> <div class="text-xs text-slate-500 text-center py-3">No pinned paths.<br><span class="text-slate-600">Right-click any folder.</span></div>
</div> </div>
</div> </div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg overflow-hidden"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
<div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center gap-2"> <div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center gap-2">
<i class="fa-solid fa-bookmark text-blue-400 text-xs"></i> <i class="fa-solid fa-bookmark text-blue-400 text-xs"></i>
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Quick Access</span> <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Quick Access</span>
@@ -489,7 +482,7 @@
<div class="text-xs text-slate-500 text-center py-4">Connecting...</div> <div class="text-xs text-slate-500 text-center py-4">Connecting...</div>
</div> </div>
</div> </div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg overflow-hidden"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden">
<div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center gap-2"> <div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center gap-2">
<i class="fa-solid fa-hard-drive text-slate-400 text-xs"></i> <i class="fa-solid fa-hard-drive text-slate-400 text-xs"></i>
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Drives</span> <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Drives</span>
@@ -502,51 +495,40 @@
</aside> </aside>
<!-- Main Content --> <!-- Main Content -->
<div class="flex-1 min-w-0 flex flex-col gap-4"> <div class="flex-1 min-w-0 flex flex-col gap-4">
<!-- Status Bar --> <!-- Workspace actions -->
<div class="flex items-center justify-between gap-3 flex-wrap"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-3">
<span <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-sky-500/10 border border-sky-500/20"><i class="fa-solid fa-folder-tree text-sky-400"></i></span>
id="status-indicator" <div><h2 class="text-sm font-semibold">Remote files</h2><p class="text-xs text-slate-500">Browse, transfer, and manage this client’s filesystem.</p></div>
class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-800 text-slate-300"
>
<i class="fa-solid fa-circle-notch fa-spin"></i> Connecting...
</span>
<span
id="client-id-header"
class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-slate-900/60 text-slate-200 border border-slate-800"
>
<i class="fa-solid fa-computer"></i>
<span>Loading client...</span>
</span>
</div> </div>
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-2 flex-wrap">
<button <button
id="search-btn" id="search-btn"
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white" class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 text-sm disabled:opacity-40"
disabled disabled
> >
<i class="fa-solid fa-search"></i> Search <i class="fa-solid fa-search"></i> Search
</button> </button>
<button <button
id="refresh-btn" id="refresh-btn"
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white" class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 text-sm disabled:opacity-40"
disabled disabled
> >
<i class="fa-solid fa-refresh"></i> Refresh <i class="fa-solid fa-refresh"></i> Refresh
</button> </button>
<button <button
id="upload-btn" id="upload-btn"
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white" class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 border border-emerald-500 text-white text-sm font-medium disabled:opacity-40"
disabled disabled
> >
<i class="fa-solid fa-upload"></i> Upload File <i class="fa-solid fa-upload"></i> Upload
</button> </button>
<button <button
id="mkdir-btn" id="mkdir-btn"
class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white" class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-violet-600 hover:bg-violet-500 border border-violet-500 text-white text-sm font-medium disabled:opacity-40"
disabled disabled
> >
<i class="fa-solid fa-folder-plus"></i> New Folder <i class="fa-solid fa-folder-plus"></i> New folder
</button> </button>
</div> </div>
</div> </div>
@@ -554,15 +536,15 @@
<!-- Search Bar (hidden by default) --> <!-- Search Bar (hidden by default) -->
<div <div
id="search-bar" id="search-bar"
class="hidden px-4 py-3 bg-slate-900/70 border border-slate-800 rounded-lg" class="hidden px-4 py-3 bg-slate-900/60 border border-slate-800 rounded-xl"
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 flex-wrap sm:flex-nowrap">
<i class="fa-solid fa-search text-slate-400"></i> <i class="fa-solid fa-search text-slate-400"></i>
<input <input
type="text" type="text"
id="search-input" id="search-input"
placeholder="Search files or content..." placeholder="Search files or content..."
class="flex-1 bg-transparent outline-none text-sm text-slate-100 placeholder:text-slate-500" class="flex-1 min-w-48 bg-transparent outline-none text-sm text-slate-100 placeholder:text-slate-500"
/> />
<label <label
class="inline-flex items-center gap-2 text-sm text-slate-300" class="inline-flex items-center gap-2 text-sm text-slate-300"
@@ -592,13 +574,13 @@
<!-- Bulk Actions Bar (hidden by default) --> <!-- Bulk Actions Bar (hidden by default) -->
<div <div
id="bulk-actions-bar" id="bulk-actions-bar"
class="hidden bulk-actions-bar px-4 py-3 rounded-lg" class="hidden bulk-actions-bar px-4 py-3 rounded-xl"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between gap-3 flex-wrap">
<span class="text-sm font-medium" <span class="text-sm font-medium"
><span id="selected-count">0</span> items selected</span ><span id="selected-count">0</span> items selected</span
> >
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 flex-wrap">
<button <button
id="bulk-download-btn" id="bulk-download-btn"
class="inline-flex items-center gap-2 px-3 py-1 rounded bg-blue-600 hover:bg-blue-700 text-white text-sm" class="inline-flex items-center gap-2 px-3 py-1 rounded bg-blue-600 hover:bg-blue-700 text-white text-sm"
@@ -635,7 +617,7 @@
<!-- Path Navigation Bar --> <!-- Path Navigation Bar -->
<div <div
class="flex items-center gap-2 px-4 py-3 bg-slate-900/70 border border-slate-800 rounded-lg" class="flex items-center gap-2 px-3 py-3 bg-slate-900/60 border border-slate-800 rounded-xl"
> >
<button <button
id="back-btn" id="back-btn"
@@ -652,7 +634,7 @@
<i class="fa-solid fa-home"></i> <i class="fa-solid fa-home"></i>
</button> </button>
<div <div
class="flex-1 flex items-center gap-2 px-3 py-2 bg-slate-950/50 border border-slate-700 rounded" class="flex-1 flex items-center gap-2 px-3 py-2 bg-slate-950/60 border border-slate-700 rounded-lg focus-within:border-sky-500 focus-within:ring-2 focus-within:ring-sky-500/20"
> >
<i class="fa-solid fa-folder-open text-yellow-400 text-sm"></i> <i class="fa-solid fa-folder-open text-yellow-400 text-sm"></i>
<input <input
@@ -673,7 +655,7 @@
<!-- Breadcrumb Navigation --> <!-- Breadcrumb Navigation -->
<div <div
class="flex items-center gap-2 px-4 py-3 bg-slate-900/70 border border-slate-800 rounded-lg overflow-x-auto" class="flex items-center gap-2 px-3 py-2 bg-slate-950/30 border border-slate-800 rounded-xl overflow-x-auto"
> >
<i class="fa-solid fa-folder-open text-yellow-400"></i> <i class="fa-solid fa-folder-open text-yellow-400"></i>
<div id="breadcrumb" class="flex items-center gap-1 text-sm"></div> <div id="breadcrumb" class="flex items-center gap-1 text-sm"></div>
@@ -681,7 +663,7 @@
<!-- List Controls --> <!-- List Controls -->
<div <div
class="px-4 py-3 bg-slate-900/70 border border-slate-800 rounded-lg flex items-center justify-between gap-3 flex-wrap" class="px-4 py-3 bg-slate-900/60 border border-slate-800 rounded-xl flex items-center justify-between gap-3 flex-wrap"
> >
<div class="flex items-center gap-2 flex-wrap"> <div class="flex items-center gap-2 flex-wrap">
<label for="sort-field" class="text-xs uppercase tracking-wide text-slate-400" <label for="sort-field" class="text-xs uppercase tracking-wide text-slate-400"
@@ -689,7 +671,7 @@
> >
<select <select
id="sort-field" id="sort-field"
class="px-2 py-1 rounded bg-slate-800 border border-slate-700 text-sm text-slate-100" class="px-3 py-1.5 rounded-lg bg-slate-950/60 border border-slate-700 text-sm text-slate-100"
> >
<option value="name">Name</option> <option value="name">Name</option>
<option value="size">Size</option> <option value="size">Size</option>
@@ -698,7 +680,7 @@
</select> </select>
<button <button
id="sort-order-btn" id="sort-order-btn"
class="px-3 py-1 rounded bg-slate-700 hover:bg-slate-600 text-sm text-slate-100" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 border border-slate-700 text-sm text-slate-100"
type="button" type="button"
> >
Asc Asc
@@ -709,7 +691,7 @@
> >
<select <select
id="filter-type" id="filter-type"
class="px-2 py-1 rounded bg-slate-800 border border-slate-700 text-sm text-slate-100" class="px-3 py-1.5 rounded-lg bg-slate-950/60 border border-slate-700 text-sm text-slate-100"
> >
<option value="all">All</option> <option value="all">All</option>
<option value="dirs">Folders</option> <option value="dirs">Folders</option>
@@ -729,10 +711,10 @@
<!-- File List --> <!-- File List -->
<div <div
id="file-list-panel" id="file-list-panel"
class="bg-slate-900/70 border border-slate-800 rounded-lg overflow-hidden" class="bg-slate-900/60 border border-slate-800 rounded-xl overflow-hidden min-h-72"
> >
<div <div
class="file-header grid grid-cols-12 gap-3 px-4 py-3 bg-slate-800 border-b border-slate-700 text-xs font-semibold uppercase text-slate-400" class="file-header grid grid-cols-12 gap-3 px-4 py-3 bg-slate-950/60 border-b border-slate-800 text-[11px] font-semibold uppercase tracking-wider text-slate-500"
> >
<div class="col-span-6">Name</div> <div class="col-span-6">Name</div>
<div class="col-span-2">Size</div> <div class="col-span-2">Size</div>
@@ -747,7 +729,7 @@
<!-- Preview pane --> <!-- Preview pane -->
<aside id="preview-pane-host" class="hidden lg:block"> <aside id="preview-pane-host" class="hidden lg:block">
<div id="preview-pane" class="bg-slate-900/70 border border-slate-800 rounded-lg empty"> <div id="preview-pane" class="bg-slate-900/60 border border-slate-800 rounded-xl empty">
<div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center justify-between gap-2"> <div class="px-3 py-2.5 border-b border-slate-700/50 flex items-center justify-between gap-2">
<div class="flex items-center gap-2 min-w-0"> <div class="flex items-center gap-2 min-w-0">
<i class="fa-solid fa-eye text-blue-400 text-xs flex-shrink-0"></i> <i class="fa-solid fa-eye text-blue-400 text-xs flex-shrink-0"></i>
@@ -983,7 +965,7 @@
<!-- Transfer Progress Panel --> <!-- Transfer Progress Panel -->
<div <div
id="transfer-panel" id="transfer-panel"
class="hidden fixed bottom-4 right-4 w-96 max-w-full bg-slate-900 border border-slate-700 rounded-lg shadow-2xl overflow-hidden z-50" class="hidden fixed bottom-4 right-4 w-96 max-w-[calc(100vw-2rem)] bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden z-50"
> >
<div <div
class="px-4 py-3 bg-slate-800 border-b border-slate-700 flex items-center justify-between" class="px-4 py-3 bg-slate-800 border-b border-slate-700 flex items-center justify-between"
Overlord-Server/public/metrics.html
+54 -49
View File
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="/vendor/inter/400.css" /> <link rel="stylesheet" href="/vendor/inter/400.css" />
<link rel="stylesheet" href="/vendor/inter/600.css" /> <link rel="stylesheet" href="/vendor/inter/600.css" />
<link rel="stylesheet" href="/vendor/inter/700.css" /> <link rel="stylesheet" href="/vendor/inter/700.css" />
<link rel="stylesheet" href="/assets/tailwind.css" /> <link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" /> <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="/vendor/flag-icons/css/flag-icons.min.css" /> <link rel="stylesheet" href="/vendor/flag-icons/css/flag-icons.min.css" />
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
@@ -82,62 +82,59 @@
<body class="min-h-screen bg-slate-950 text-slate-100"> <body class="min-h-screen bg-slate-950 text-slate-100">
<header id="top-nav"></header> <header id="top-nav"></header>
<main class="px-5 py-6"> <main class="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="max-w-7xl mx-auto flex flex-col gap-6"> <div class="flex flex-col gap-6">
<!-- Header --> <!-- Header -->
<div class="flex items-center justify-between gap-3 flex-wrap"> <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
<div> <div>
<h1 class="text-2xl font-semibold">Metrics Dashboard</h1> <h1 class="text-2xl font-bold">Metrics Dashboard</h1>
<p class="text-slate-400"> <p class="text-sm text-slate-400 mt-1">Live infrastructure health, traffic, and runtime performance.</p>
Real-time server statistics and performance
</p>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 text-xs">
<span <span
class="inline-flex items-center gap-2 px-3 py-2 rounded-full bg-green-900/40 text-green-100 border border-green-700/60" id="metrics-status"
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 text-emerald-300 border border-emerald-500/30 font-medium"
> >
<i class="fa-solid fa-circle-check"></i> <span class="relative flex h-2 w-2"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60"></span><span class="relative inline-flex h-2 w-2 rounded-full bg-emerald-400"></span></span>
<span id="status-text">Live</span> <span id="status-text">Live</span>
</span> </span>
<span class="text-sm text-slate-400" <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-slate-800 bg-slate-900/60 text-slate-400"><i class="fa-solid fa-clock-rotate-left text-slate-500"></i><span id="last-update">Never</span></span>
>Updated: <span id="last-update">Never</span></span
>
</div> </div>
</div> </div>
<!-- Key Metrics Cards --> <!-- Key Metrics Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Clients Online --> <!-- Clients Online -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="text-slate-400 text-sm">Clients Online</span> <span class="text-slate-400 text-sm font-medium">Clients Online</span>
<i class="fa-solid fa-desktop text-blue-400"></i> <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-sky-500/10 border border-sky-500/20"><i class="fa-solid fa-desktop text-sky-400"></i></span>
</div> </div>
<div class="text-3xl font-bold" id="clients-online">0</div> <div class="text-3xl font-bold tracking-tight" id="clients-online">0</div>
<div class="text-xs text-slate-500 mt-1"> <div class="text-xs text-slate-500 mt-1">
<span id="clients-total">0</span> total <span id="clients-total">0</span> total
</div> </div>
</div> </div>
<!-- Active Sessions --> <!-- Active Sessions -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="text-slate-400 text-sm">Active Sessions</span> <span class="text-slate-400 text-sm font-medium">Active Sessions</span>
<i class="fa-solid fa-plug text-green-400"></i> <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-500/10 border border-emerald-500/20"><i class="fa-solid fa-plug text-emerald-400"></i></span>
</div> </div>
<div class="text-3xl font-bold" id="active-sessions">0</div> <div class="text-3xl font-bold tracking-tight" id="active-sessions">0</div>
<div class="text-xs text-slate-500 mt-1"> <div class="text-xs text-slate-500 mt-1">
Console, RD, Files, Processes Console, RD, Files, Processes
</div> </div>
</div> </div>
<!-- Commands (Last Hour) --> <!-- Commands (Last Hour) -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="text-slate-400 text-sm">Commands/Hour</span> <span class="text-slate-400 text-sm font-medium">Commands/Hour</span>
<i class="fa-solid fa-terminal text-purple-400"></i> <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-violet-500/10 border border-violet-500/20"><i class="fa-solid fa-terminal text-violet-400"></i></span>
</div> </div>
<div class="text-3xl font-bold" id="commands-hour">0</div> <div class="text-3xl font-bold tracking-tight" id="commands-hour">0</div>
<div class="text-xs text-slate-500 mt-1"> <div class="text-xs text-slate-500 mt-1">
<span id="commands-minute">0</span>/min • <span id="commands-minute">0</span>/min •
<span id="commands-total">0</span> total <span id="commands-total">0</span> total
@@ -145,14 +142,12 @@
</div> </div>
<!-- Bandwidth --> <!-- Bandwidth -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="relative overflow-hidden bg-slate-900/60 border border-slate-800 rounded-xl p-5">
<div class="flex items-center justify-between mb-2"> <div class="flex items-center justify-between mb-2">
<span class="text-slate-400 text-sm">Bandwidth</span> <span class="text-slate-400 text-sm font-medium">Bandwidth</span>
<i <span class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-orange-500/10 border border-orange-500/20"><i class="fa-solid fa-arrow-right-arrow-left text-orange-400"></i></span>
class="fa-solid fa-arrow-up-right-from-square text-orange-400"
></i>
</div> </div>
<div class="text-3xl font-bold" id="bandwidth-rate">0 KB/s</div> <div class="text-3xl font-bold tracking-tight" id="bandwidth-rate">0 KB/s</div>
<div class="text-xs text-slate-500 mt-1"> <div class="text-xs text-slate-500 mt-1">
↑ <span id="bandwidth-sent">0 MB</span> • ↓ ↑ <span id="bandwidth-sent">0 MB</span> • ↓
<span id="bandwidth-received">0 MB</span> <span id="bandwidth-received">0 MB</span>
@@ -160,10 +155,15 @@
</div> </div>
</div> </div>
<div class="flex items-center gap-3 pt-1">
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-500/10 border border-indigo-500/20"><i class="fa-solid fa-chart-line text-indigo-400"></i></div>
<div><h2 class="font-semibold">Traffic and activity</h2><p class="text-xs text-slate-500">Live client and command volume.</p></div>
</div>
<!-- Charts Row --> <!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<!-- Clients Timeline --> <!-- Clients Timeline -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-chart-area text-blue-400"></i> <i class="fa-solid fa-chart-area text-blue-400"></i>
Clients Over Time Clients Over Time
@@ -174,7 +174,7 @@
</div> </div>
<!-- Commands Timeline --> <!-- Commands Timeline -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-chart-line text-purple-400"></i> <i class="fa-solid fa-chart-line text-purple-400"></i>
Commands Per Minute Commands Per Minute
@@ -185,9 +185,14 @@
</div> </div>
</div> </div>
<div class="flex items-center gap-3 pt-2">
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-500/10 border border-rose-500/20"><i class="fa-solid fa-gauge-high text-rose-400"></i></div>
<div><h2 class="font-semibold">Operational pressure</h2><p class="text-xs text-slate-500">Throughput, latency, memory, and event-loop health.</p></div>
</div>
<!-- Operational Pressure Charts --> <!-- Operational Pressure Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-network-wired text-orange-400"></i> <i class="fa-solid fa-network-wired text-orange-400"></i>
Network Throughput Network Throughput
@@ -197,7 +202,7 @@
</div> </div>
</div> </div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-arrow-right-arrow-left text-emerald-400"></i> <i class="fa-solid fa-arrow-right-arrow-left text-emerald-400"></i>
HTTP Requests HTTP Requests
@@ -207,7 +212,7 @@
</div> </div>
</div> </div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-gauge-high text-rose-400"></i> <i class="fa-solid fa-gauge-high text-rose-400"></i>
HTTP Latency HTTP Latency
@@ -217,7 +222,7 @@
</div> </div>
</div> </div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-memory text-cyan-400"></i> <i class="fa-solid fa-memory text-cyan-400"></i>
Runtime Memory Runtime Memory
@@ -227,7 +232,7 @@
</div> </div>
</div> </div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-stopwatch text-amber-400"></i> <i class="fa-solid fa-stopwatch text-amber-400"></i>
Event Loop Lag Event Loop Lag
@@ -239,7 +244,7 @@
</div> </div>
<!-- Slow HTTP Routes --> <!-- Slow HTTP Routes -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<div class="flex items-center justify-between gap-3 flex-wrap mb-3"> <div class="flex items-center justify-between gap-3 flex-wrap mb-3">
<h3 class="text-lg font-semibold flex items-center gap-2"> <h3 class="text-lg font-semibold flex items-center gap-2">
<i class="fa-solid fa-route text-rose-400"></i> <i class="fa-solid fa-route text-rose-400"></i>
@@ -258,7 +263,7 @@
</div> </div>
<!-- Slow Internal Jobs --> <!-- Slow Internal Jobs -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<div class="flex items-center justify-between gap-3 flex-wrap mb-3"> <div class="flex items-center justify-between gap-3 flex-wrap mb-3">
<h3 class="text-lg font-semibold flex items-center gap-2"> <h3 class="text-lg font-semibold flex items-center gap-2">
<i class="fa-solid fa-gears text-cyan-400"></i> <i class="fa-solid fa-gears text-cyan-400"></i>
@@ -277,7 +282,7 @@
</div> </div>
<!-- Retained Runtime State --> <!-- Retained Runtime State -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<div class="flex items-center justify-between gap-3 flex-wrap mb-3"> <div class="flex items-center justify-between gap-3 flex-wrap mb-3">
<h3 class="text-lg font-semibold flex items-center gap-2"> <h3 class="text-lg font-semibold flex items-center gap-2">
<i class="fa-solid fa-box-archive text-violet-400"></i> <i class="fa-solid fa-box-archive text-violet-400"></i>
@@ -297,7 +302,7 @@
<!-- Mix Charts --> <!-- Mix Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-solid fa-plug text-emerald-400"></i> <i class="fa-solid fa-plug text-emerald-400"></i>
Session Mix Session Mix
@@ -307,7 +312,7 @@
</div> </div>
</div> </div>
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
<i class="fa-brands fa-windows text-cyan-400"></i> <i class="fa-brands fa-windows text-cyan-400"></i>
Operating Systems Operating Systems
@@ -321,7 +326,7 @@
<!-- Additional Stats --> <!-- Additional Stats -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Server Stats --> <!-- Server Stats -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
<i class="fa-solid fa-server text-green-400"></i> <i class="fa-solid fa-server text-green-400"></i>
Server Server
@@ -355,7 +360,7 @@
</div> </div>
<!-- Clients by OS --> <!-- Clients by OS -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
<i class="fa-brands fa-windows text-cyan-400"></i> <i class="fa-brands fa-windows text-cyan-400"></i>
Clients by OS Clients by OS
@@ -366,7 +371,7 @@
</div> </div>
<!-- HTTP, Ping & Event Loop --> <!-- HTTP, Ping & Event Loop -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
<i class="fa-solid fa-wave-square text-amber-400"></i> <i class="fa-solid fa-wave-square text-amber-400"></i>
HTTP, Ping & Event Loop HTTP, Ping & Event Loop
@@ -419,7 +424,7 @@
</div> </div>
<!-- Country Globe --> <!-- Country Globe -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<div class="flex items-center justify-between gap-3 flex-wrap mb-3"> <div class="flex items-center justify-between gap-3 flex-wrap mb-3">
<h3 class="text-lg font-semibold flex items-center gap-2"> <h3 class="text-lg font-semibold flex items-center gap-2">
<i class="fa-solid fa-globe text-emerald-400"></i> <i class="fa-solid fa-globe text-emerald-400"></i>
@@ -461,7 +466,7 @@
</div> </div>
<!-- Command Types Breakdown --> <!-- Command Types Breakdown -->
<div class="bg-slate-900/70 border border-slate-800 rounded-lg p-4"> <div class="bg-slate-900/60 border border-slate-800 rounded-xl p-4 sm:p-5">
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2"> <h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
<i class="fa-solid fa-list text-indigo-400"></i> <i class="fa-solid fa-list text-indigo-400"></i>
Command Types Command Types