init
This commit is contained in:
Sam
490
priv/ui/admin.pug
Normal file
490
priv/ui/admin.pug
Normal file
@@ -0,0 +1,490 @@
|
||||
doctype html
|
||||
html(lang="en")
|
||||
head
|
||||
meta(charset="utf-8")
|
||||
title admin
|
||||
link(rel="icon", href="/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: 0.5px solid rgba(254, 232, 200, 0.2); text-align: left; vertical-align: top; }
|
||||
td { color: #5C0000; }
|
||||
th { background: #6C0000; color: #FEBA7D; position: sticky; top: 0; }
|
||||
tr:hover { background: #9D1A12; }
|
||||
.num { text-align: right; }
|
||||
.name, .mod { color: #FEBA7D; }
|
||||
.src { color: #5C0000; }
|
||||
#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; }
|
||||
script(src="https://frm.so/_/code/quill.js")
|
||||
body
|
||||
nav.tabs
|
||||
button#tab-processes.active processes
|
||||
button#tab-modules modules
|
||||
button#tab-logs logs
|
||||
button#tab-vm-memory vm memory
|
||||
span#status connecting…
|
||||
|
||||
section#panel-processes
|
||||
.toolbar
|
||||
button#p-mine.active mine
|
||||
button#p-all all
|
||||
span |
|
||||
button#p-expand expand all
|
||||
button#p-collapse collapse all
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th pid
|
||||
th name
|
||||
th initial call
|
||||
th.num memory (KB)
|
||||
th.num tree memory (KB)
|
||||
th.num msgs
|
||||
th status
|
||||
tbody#p-rows
|
||||
|
||||
section#panel-modules(hidden)
|
||||
.toolbar
|
||||
button#m-mine.active mine
|
||||
button#m-all all
|
||||
input#m-filter(placeholder="filter…", autocomplete="off")
|
||||
button#m-refresh refresh
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th module
|
||||
th app
|
||||
th source
|
||||
tbody#m-rows
|
||||
|
||||
section#panel-logs(hidden)
|
||||
.toolbar
|
||||
button#l-refresh refresh
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th time (Chicago)
|
||||
th source ip
|
||||
th host
|
||||
th method
|
||||
th path
|
||||
th.num status
|
||||
th.num duration ms
|
||||
tbody#l-rows
|
||||
|
||||
section#panel-vm-memory(hidden)
|
||||
.toolbar
|
||||
button#v-refresh refresh
|
||||
table
|
||||
thead
|
||||
tr
|
||||
th category
|
||||
th.num bytes
|
||||
th.num KB
|
||||
th.num MB
|
||||
tbody#v-rows
|
||||
|
||||
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 chicagoTime = new Intl.DateTimeFormat("en-US", {
|
||||
timeZone: "America/Chicago",
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
timeZoneName: "short"
|
||||
});
|
||||
|
||||
function pollLogs() { send({type: "list_logs"}); }
|
||||
|
||||
function formatLogTime(value) {
|
||||
if (!value) return "";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
return chicagoTime.format(date);
|
||||
}
|
||||
|
||||
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"; });
|
||||
Reference in New Issue
Block a user