init
This commit is contained in:
Sam
496
priv/ui/admin.html
Normal file
496
priv/ui/admin.html
Normal file
@@ -0,0 +1,496 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>admin</title>
|
||||
<link rel="icon" href="/admin/graphyellow.svg">
|
||||
<style>
|
||||
body {
|
||||
background: #850000;
|
||||
color: #FEBA7D;
|
||||
font: 12px ui-monospace, monospace;
|
||||
margin: 1rem;
|
||||
}
|
||||
.tabs { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
|
||||
.tabs button {
|
||||
color: #FEBA7D; background: none; border: 1px solid transparent; font: inherit;
|
||||
cursor: pointer; padding: 4px 10px; border-radius: 3px;
|
||||
}
|
||||
.tabs button:hover { background: #9D1A12; border-color: #C7643F; }
|
||||
.tabs button.active {
|
||||
font-weight: bold; color: #850000; background: #FEBA7D;
|
||||
border-color: #FEBA7D; cursor: default;
|
||||
}
|
||||
.toolbar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
|
||||
.toolbar button {
|
||||
color: #FEBA7D; background: none; border: none; font: inherit;
|
||||
cursor: pointer; padding: 0 2px;
|
||||
}
|
||||
.toolbar button:hover { color: #FEBA7D; text-decoration: underline; }
|
||||
.toolbar button.active { font-weight: bold; color: #FEBA7D; cursor: default; }
|
||||
.toolbar input {
|
||||
background: #6C0000; color: #FEBA7D; font: inherit;
|
||||
padding: 2px 6px; border: 1px solid #C7643F;
|
||||
border-radius: 3px; width: 16rem;
|
||||
}
|
||||
.toolbar input::placeholder { color: #E49768; }
|
||||
table { border-collapse: collapse; width: 100%; }
|
||||
th, td { padding: 4px 8px; border-bottom: 1px solid rgba(254, 232, 200, 0.2); text-align: left; vertical-align: top; }
|
||||
td { color: #FEBA7D; }
|
||||
th { background: #6C0000; color: #FEBA7D; position: sticky; top: 0; }
|
||||
tr:hover { background: #9D1A12; }
|
||||
.num { text-align: right; }
|
||||
.name, .mod { color: #ffe1c6; }
|
||||
#status { margin-left: auto; color: #FEBA7D; }
|
||||
.disclosure {
|
||||
display: inline-block; width: 1em; cursor: pointer;
|
||||
color: #FEBA7D; user-select: none;
|
||||
}
|
||||
.disclosure.leaf { cursor: default; visibility: hidden; }
|
||||
.pid-cell { white-space: pre; }
|
||||
section[hidden] { display: none; }
|
||||
</style>
|
||||
<script src="https://frm.so/_/code/quill.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="tabs">
|
||||
<button id="tab-processes" class="active">processes</button>
|
||||
<button id="tab-modules">modules</button>
|
||||
<button id="tab-logs">logs</button>
|
||||
<button id="tab-vm-memory">vm memory</button>
|
||||
<span id="status">connecting…</span>
|
||||
</nav>
|
||||
|
||||
<section id="panel-processes">
|
||||
<div class="toolbar">
|
||||
<button id="p-mine" class="active">mine</button>
|
||||
<button id="p-all">all</button>
|
||||
<span>|</span>
|
||||
<button id="p-expand">expand all</button>
|
||||
<button id="p-collapse">collapse all</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>pid</th><th>name</th><th>initial call</th>
|
||||
<th class="num">memory (KB)</th><th class="num">tree memory (KB)</th>
|
||||
<th class="num">msgs</th><th>status</th>
|
||||
</tr></thead>
|
||||
<tbody id="p-rows"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="panel-modules" hidden>
|
||||
<div class="toolbar">
|
||||
<button id="m-mine" class="active">mine</button>
|
||||
<button id="m-all">all</button>
|
||||
<input id="m-filter" placeholder="filter…" autocomplete="off">
|
||||
<button id="m-refresh">refresh</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>module</th><th>app</th><th>source</th>
|
||||
</tr></thead>
|
||||
<tbody id="m-rows"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="panel-logs" hidden>
|
||||
<div class="toolbar">
|
||||
<button id="l-refresh">refresh</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>time (Chicago)</th><th>source ip</th><th>host</th><th>method</th><th>path</th>
|
||||
<th class="num">status</th><th class="num">duration ms</th>
|
||||
</tr></thead>
|
||||
<tbody id="l-rows"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="panel-vm-memory" hidden>
|
||||
<div class="toolbar">
|
||||
<button id="v-refresh">refresh</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr>
|
||||
<th>category</th><th class="num">bytes</th>
|
||||
<th class="num">KB</th><th class="num">MB</th>
|
||||
</tr></thead>
|
||||
<tbody id="v-rows"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// ── shared infrastructure ──────────────────────────────────────
|
||||
const status = document.getElementById("status");
|
||||
|
||||
const url = (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/admin/ws";
|
||||
const ws = new WebSocket(url);
|
||||
|
||||
// Per-message-type dispatch so each panel registers its own handler.
|
||||
const handlers = {};
|
||||
ws.addEventListener("message", (e) => {
|
||||
const msg = JSON.parse(e.data);
|
||||
const h = handlers[msg.type];
|
||||
if (h) h(msg);
|
||||
});
|
||||
|
||||
function send(obj) {
|
||||
if (ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(obj));
|
||||
}
|
||||
|
||||
function addCell(tr, text, cls) {
|
||||
const td = document.createElement("td");
|
||||
if (cls) td.className = cls;
|
||||
td.textContent = text;
|
||||
tr.appendChild(td);
|
||||
}
|
||||
|
||||
// ── tabs ───────────────────────────────────────────────────────
|
||||
const tabs = {
|
||||
processes: { btn: document.getElementById("tab-processes"), panel: document.getElementById("panel-processes") },
|
||||
modules: { btn: document.getElementById("tab-modules"), panel: document.getElementById("panel-modules") },
|
||||
logs: { btn: document.getElementById("tab-logs"), panel: document.getElementById("panel-logs") },
|
||||
vmMemory: { btn: document.getElementById("tab-vm-memory"), panel: document.getElementById("panel-vm-memory") },
|
||||
};
|
||||
const tabRoutes = {
|
||||
processes: "processes",
|
||||
modules: "modules",
|
||||
logs: "logs",
|
||||
vmMemory: "vm-memory",
|
||||
};
|
||||
let active = "processes";
|
||||
|
||||
function tabFromLocation() {
|
||||
const segment = location.pathname.split("/").filter(Boolean)[1];
|
||||
return Object.keys(tabRoutes).find(name => tabRoutes[name] === segment) || "processes";
|
||||
}
|
||||
|
||||
function setAdminPath(name, mode) {
|
||||
const nextPath = "/admin/" + tabRoutes[name];
|
||||
if (location.pathname === nextPath) return;
|
||||
|
||||
const nextUrl = nextPath + location.search + location.hash;
|
||||
if (mode === "replace") history.replaceState({tab: name}, "", nextUrl);
|
||||
else history.pushState({tab: name}, "", nextUrl);
|
||||
}
|
||||
|
||||
function activate(name, mode) {
|
||||
active = name;
|
||||
setAdminPath(name, mode);
|
||||
for (const [k, t] of Object.entries(tabs)) {
|
||||
t.btn.classList.toggle("active", k === name);
|
||||
t.panel.hidden = k !== name;
|
||||
}
|
||||
if (name === "modules" && !mLoaded) pollModules();
|
||||
if (name === "logs" && !lLoaded) pollLogs();
|
||||
if (name === "vmMemory" && !vLoaded) pollVmMemory();
|
||||
}
|
||||
tabs.processes.btn.addEventListener("click", () => activate("processes"));
|
||||
tabs.modules.btn.addEventListener("click", () => activate("modules"));
|
||||
tabs.logs.btn.addEventListener("click", () => activate("logs"));
|
||||
tabs.vmMemory.btn.addEventListener("click", () => activate("vmMemory"));
|
||||
window.addEventListener("popstate", () => activate(tabFromLocation(), "replace"));
|
||||
|
||||
// ── processes panel ────────────────────────────────────────────
|
||||
const pBody = document.getElementById("p-rows");
|
||||
const pAll = document.getElementById("p-all");
|
||||
const pMine = document.getElementById("p-mine");
|
||||
const pExpand = document.getElementById("p-expand");
|
||||
const pCollapse = document.getElementById("p-collapse");
|
||||
|
||||
let pFilterMine = $("#p-mine").classList.contains("active");
|
||||
let pLastRows = [];
|
||||
const pCollapsed = new Set();
|
||||
const pAutoCollapsed = new Set();
|
||||
const pSeenLarge = new Set();
|
||||
|
||||
function pSetFilter(mine) {
|
||||
pFilterMine = mine;
|
||||
pAll.classList.toggle("active", !mine);
|
||||
pMine.classList.toggle("active", mine);
|
||||
pRender();
|
||||
}
|
||||
|
||||
pAll.addEventListener("click", () => pSetFilter(false));
|
||||
pMine.addEventListener("click", () => pSetFilter(true));
|
||||
pExpand.addEventListener("click", () => {
|
||||
pCollapsed.clear();
|
||||
pAutoCollapsed.clear();
|
||||
for (const pid of pLargeGroupPids()) pSeenLarge.add(pid);
|
||||
pRender();
|
||||
});
|
||||
pCollapse.addEventListener("click", () => {
|
||||
const haveChildren = new Set(pLastRows.map(r => r.parent).filter(Boolean));
|
||||
const topPid = pPrimaryRootProcessPid();
|
||||
pCollapsed.clear();
|
||||
pAutoCollapsed.clear();
|
||||
for (const pid of haveChildren) {
|
||||
if (pid !== topPid) pCollapsed.add(pid);
|
||||
}
|
||||
pRender();
|
||||
});
|
||||
|
||||
function pBuildTree(rows) {
|
||||
const byPid = new Map();
|
||||
for (const r of rows) byPid.set(r.pid, Object.assign({}, r, {children: []}));
|
||||
|
||||
const roots = [];
|
||||
for (const node of byPid.values()) {
|
||||
const parent = node.parent && byPid.get(node.parent);
|
||||
if (parent) parent.children.push(node);
|
||||
else roots.push(node);
|
||||
}
|
||||
return roots;
|
||||
}
|
||||
|
||||
function pRender() {
|
||||
const rows = pFilterMine ? pLastRows.filter(r => r.mine) : pLastRows;
|
||||
const tree = pBuildTree(rows);
|
||||
const mineN = pLastRows.filter(r => r.mine).length;
|
||||
|
||||
pAll.textContent = "all (" + pLastRows.length + ")";
|
||||
pMine.textContent = "mine (" + mineN + ")";
|
||||
|
||||
const frag = document.createDocumentFragment();
|
||||
for (const node of tree) pRenderNode(node, 0, frag);
|
||||
pBody.replaceChildren(frag);
|
||||
}
|
||||
|
||||
function pRenderNode(node, depth, frag) {
|
||||
const tr = document.createElement("tr");
|
||||
if (node.mine) tr.className = "mine";
|
||||
|
||||
const pidTd = document.createElement("td");
|
||||
pidTd.className = "pid-cell";
|
||||
pidTd.style.paddingLeft = (8 + depth * 16) + "px";
|
||||
|
||||
const disc = document.createElement("span");
|
||||
disc.className = "disclosure" + (node.children.length ? "" : " leaf");
|
||||
disc.textContent =
|
||||
node.children.length === 0 ? "·" :
|
||||
pCollapsed.has(node.pid) ? "▸" : "▾";
|
||||
if (node.children.length) {
|
||||
disc.addEventListener("click", () => {
|
||||
pSeenLarge.add(node.pid);
|
||||
pAutoCollapsed.delete(node.pid);
|
||||
if (pCollapsed.has(node.pid)) pCollapsed.delete(node.pid);
|
||||
else pCollapsed.add(node.pid);
|
||||
pRender();
|
||||
});
|
||||
}
|
||||
pidTd.appendChild(disc);
|
||||
pidTd.appendChild(document.createTextNode(" " + node.pid));
|
||||
tr.appendChild(pidTd);
|
||||
|
||||
addCell(tr, node.name || "-", node.name ? "name" : "");
|
||||
addCell(tr, node.initial_call);
|
||||
addCell(tr, node.memory_kb, "num");
|
||||
addCell(tr, node.tree_memory_kb || node.memory_kb, "num");
|
||||
addCell(tr, node.msgs, "num");
|
||||
addCell(tr, node.status);
|
||||
frag.appendChild(tr);
|
||||
|
||||
if (!pCollapsed.has(node.pid)) {
|
||||
for (const child of node.children) pRenderNode(child, depth + 1, frag);
|
||||
}
|
||||
}
|
||||
|
||||
function pollProcesses() { send({type: "list_processes"}); }
|
||||
|
||||
handlers["processes"] = (msg) => {
|
||||
pLastRows = msg.rows;
|
||||
pAutoCollapseLargeGroups();
|
||||
pRender();
|
||||
};
|
||||
|
||||
function pLargeGroupPids() {
|
||||
const large = new Set();
|
||||
const visit = (node) => {
|
||||
if (node.children.length > 10) large.add(node.pid);
|
||||
for (const child of node.children) visit(child);
|
||||
};
|
||||
for (const node of pBuildTree(pLastRows)) visit(node);
|
||||
return large;
|
||||
}
|
||||
|
||||
function pPrimaryRootProcessPid() {
|
||||
const supervisor = pLastRows.find(r => r.name === "Forum.Supervisor");
|
||||
if (supervisor) return supervisor.pid;
|
||||
|
||||
const roots = pBuildTree(pLastRows);
|
||||
return roots.length ? roots[0].pid : null;
|
||||
}
|
||||
|
||||
function pAutoCollapseLargeGroups() {
|
||||
const large = pLargeGroupPids();
|
||||
const topPid = pPrimaryRootProcessPid();
|
||||
|
||||
if (topPid) {
|
||||
large.delete(topPid);
|
||||
pCollapsed.delete(topPid);
|
||||
pAutoCollapsed.delete(topPid);
|
||||
pSeenLarge.add(topPid);
|
||||
}
|
||||
|
||||
for (const pid of pAutoCollapsed) {
|
||||
if (!large.has(pid)) {
|
||||
pCollapsed.delete(pid);
|
||||
pAutoCollapsed.delete(pid);
|
||||
}
|
||||
}
|
||||
|
||||
for (const pid of large) {
|
||||
if (!pSeenLarge.has(pid)) {
|
||||
pCollapsed.add(pid);
|
||||
pAutoCollapsed.add(pid);
|
||||
pSeenLarge.add(pid);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── modules panel ──────────────────────────────────────────────
|
||||
const mBody = document.getElementById("m-rows");
|
||||
const mAll = document.getElementById("m-all");
|
||||
const mMine = document.getElementById("m-mine");
|
||||
const mFilter = document.getElementById("m-filter");
|
||||
const mRefresh = document.getElementById("m-refresh");
|
||||
|
||||
let mFilterMine = $("#m-mine").classList.contains("active");
|
||||
let mNeedle = "";
|
||||
let mLastRows = [];
|
||||
let mLoaded = false;
|
||||
|
||||
function mSetFilter(mine) {
|
||||
mFilterMine = mine;
|
||||
mAll.classList.toggle("active", !mine);
|
||||
mMine.classList.toggle("active", mine);
|
||||
mRender();
|
||||
}
|
||||
|
||||
mAll.addEventListener("click", () => mSetFilter(false));
|
||||
mMine.addEventListener("click", () => mSetFilter(true));
|
||||
mFilter.addEventListener("input", () => { mNeedle = mFilter.value.toLowerCase(); mRender(); });
|
||||
mRefresh.addEventListener("click", () => pollModules());
|
||||
|
||||
function mRender() {
|
||||
let rows = mLastRows;
|
||||
if (mFilterMine) rows = rows.filter(r => r.mine);
|
||||
if (mNeedle) {
|
||||
rows = rows.filter(r =>
|
||||
r.module.toLowerCase().includes(mNeedle) ||
|
||||
(r.source && r.source.toLowerCase().includes(mNeedle)) ||
|
||||
(r.app && r.app.toLowerCase().includes(mNeedle))
|
||||
);
|
||||
}
|
||||
const mineN = mLastRows.filter(r => r.mine).length;
|
||||
mAll.textContent = "all (" + mLastRows.length + ")";
|
||||
mMine.textContent = "mine (" + mineN + ")";
|
||||
|
||||
const frag = document.createDocumentFragment();
|
||||
for (const r of rows) {
|
||||
const tr = document.createElement("tr");
|
||||
if (r.mine) tr.className = "mine";
|
||||
addCell(tr, r.module, "mod");
|
||||
addCell(tr, r.app || "-");
|
||||
addCell(tr, r.source || "(no source)", "src");
|
||||
frag.appendChild(tr);
|
||||
}
|
||||
mBody.replaceChildren(frag);
|
||||
}
|
||||
|
||||
function pollModules() { send({type: "list_modules"}); }
|
||||
|
||||
handlers["modules"] = (msg) => {
|
||||
mLastRows = msg.rows;
|
||||
mLoaded = true;
|
||||
mRender();
|
||||
};
|
||||
|
||||
// ── logs panel ─────────────────────────────────────────────────
|
||||
const lBody = document.getElementById("l-rows");
|
||||
const lRefresh = document.getElementById("l-refresh");
|
||||
let lLoaded = false;
|
||||
const chicagoTimeParts = new Intl.DateTimeFormat("en-US", {
|
||||
timeZone: "America/Chicago",
|
||||
month: "numeric",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
hour12: true
|
||||
});
|
||||
|
||||
function pollLogs() { send({type: "list_logs"}); }
|
||||
|
||||
function formatLogTime(value) {
|
||||
if (!value) return "";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
const parts = Object.fromEntries(
|
||||
chicagoTimeParts.formatToParts(date).map(part => [part.type, part.value])
|
||||
);
|
||||
return `${parts.month}.${parts.day} ${parts.hour}:${parts.minute}:${parts.second}${parts.dayPeriod.toLowerCase()}`;
|
||||
}
|
||||
|
||||
lRefresh.addEventListener("click", () => pollLogs());
|
||||
|
||||
handlers["logs"] = (msg) => {
|
||||
lLoaded = true;
|
||||
const frag = document.createDocumentFragment();
|
||||
for (const r of msg.rows) {
|
||||
const tr = document.createElement("tr");
|
||||
addCell(tr, formatLogTime(r.time));
|
||||
addCell(tr, r.source_ip || "");
|
||||
addCell(tr, r.host || "");
|
||||
addCell(tr, r.method || "");
|
||||
addCell(tr, (r.path || "") + (r.query_string ? "?" + r.query_string : ""));
|
||||
addCell(tr, r.status || "", "num");
|
||||
addCell(tr, r.duration_ms || "", "num");
|
||||
frag.appendChild(tr);
|
||||
}
|
||||
lBody.replaceChildren(frag);
|
||||
};
|
||||
|
||||
// ── VM memory panel ────────────────────────────────────────────
|
||||
const vBody = document.getElementById("v-rows");
|
||||
const vRefresh = document.getElementById("v-refresh");
|
||||
let vLoaded = false;
|
||||
|
||||
function pollVmMemory() { send({type: "list_vm_memory"}); }
|
||||
|
||||
vRefresh.addEventListener("click", () => pollVmMemory());
|
||||
|
||||
handlers["vm_memory"] = (msg) => {
|
||||
vLoaded = true;
|
||||
const frag = document.createDocumentFragment();
|
||||
for (const r of msg.rows) {
|
||||
const tr = document.createElement("tr");
|
||||
addCell(tr, r.category || "");
|
||||
addCell(tr, r.bytes || "", "num");
|
||||
addCell(tr, r.kb || "", "num");
|
||||
addCell(tr, r.mb || "", "num");
|
||||
frag.appendChild(tr);
|
||||
}
|
||||
vBody.replaceChildren(frag);
|
||||
};
|
||||
|
||||
// ── boot ───────────────────────────────────────────────────────
|
||||
activate(tabFromLocation(), "replace");
|
||||
|
||||
ws.addEventListener("open", () => {
|
||||
status.textContent = "connected — processes auto-refresh 5s";
|
||||
pollProcesses();
|
||||
if (active === "modules") pollModules();
|
||||
if (active === "logs") pollLogs();
|
||||
if (active === "vmMemory") pollVmMemory();
|
||||
// Processes keep polling whether or not the tab is visible — keeps
|
||||
// the view fresh when the user switches back. Modules load on
|
||||
// first activation and via the refresh button.
|
||||
setInterval(pollProcesses, 5000);
|
||||
});
|
||||
ws.addEventListener("close", () => { status.textContent = "disconnected"; });
|
||||
ws.addEventListener("error", () => { status.textContent = "error"; });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user