diff --git a/web/static/js/admin.js b/web/static/js/admin.js
index 93a4430..9e3fc9b 100644
--- a/web/static/js/admin.js
+++ b/web/static/js/admin.js
@@ -64,6 +64,7 @@ let sandboxCapacityData = null;
let storageSummaryData = null;
let toolFailuresData = null;
let toolWireData = null;
+let capacityDrawerTrigger = null;
// ───── 格式化 ─────
function fmtCNY(n) {
@@ -95,57 +96,27 @@ function ctrlHTML(prefix, range, sort) {
function rangeLabel(r) { return (RANGE_OPTS.find(o => o[0] === r) || [, "全部"])[1]; }
// ───── 渲染各 section ─────
-function summaryCard({ target = "", label, value = "", unit = "", sub = "", meta = [], tone = "", progress = null, body = "", extraClass = "" }) {
+function summaryCard({ target = "", action = "", label, value = "", unit = "", sub = "", meta = [], badge = null, tone = "", progress = null, extraClass = "" }) {
const meter = progress == null ? "" : `
`;
const metaHTML = meta.length
? `
${escapeHtml(meta[0] || "")}${escapeHtml(meta[1] || "")}
`
: "";
- const tag = target ? "a" : "article";
- const href = target ? ` href="#${target}"` : "";
- return `<${tag} class="summary-card ${tone} ${extraClass}"${href}>`
- + `
${escapeHtml(label)}${target ? `↘` : ""}
`
+ const tag = target ? "a" : (action ? "button" : "article");
+ const attrs = target
+ ? ` href="#${target}"`
+ : (action ? ` type="button" data-summary-action="${escapeHtml(action)}" aria-controls="capacity-drawer"` : "");
+ const badgeHTML = badge && badge.text
+ ? `
${escapeHtml(badge.text)}`
+ : "";
+ const affordance = target ? `
›`
+ : (action ? `
查看详情` : "");
+ return `<${tag} class="summary-card ${tone} ${extraClass}"${attrs}>`
+ + `
${escapeHtml(label)}${badgeHTML}${affordance}
`
+ (value ? `
${value}${unit ? ` ${escapeHtml(unit)}` : ""}
` : "")
- + body
+ (sub ? `
${escapeHtml(sub)}
` : "")
+ metaHTML + meter + ``;
}
-const TASK_LABELS = {
- active: "活动", completed: "完成", abandoned: "废弃",
- running: "运行", cancelling: "取消中", error: "错误", idle: "空闲", cancelled: "取消",
-};
-
-function taskGroupHTML(label, statuses, preferredOrder) {
- const entries = Object.entries(statuses || {}).sort((a, b) => {
- const ai = preferredOrder.indexOf(a[0]);
- const bi = preferredOrder.indexOf(b[0]);
- return (ai < 0 ? preferredOrder.length : ai) - (bi < 0 ? preferredOrder.length : bi);
- });
- const values = entries.map(([status, count]) => {
- const cls = status === "error" ? "err" : (["running", "cancelling"].includes(status) ? "run" : (status === "completed" ? "ok" : ""));
- return `
${escapeHtml(TASK_LABELS[status] || status)} ${Number(count) || 0}`;
- }).join("") || `
无`;
- return `
`;
-}
-
-function tokenSummaryHTML(tokens7d, totalTokens) {
- return `
`
- + `
近 7 天${fmtTokens(tokens7d)}
`
- + `
累计${fmtTokens(totalTokens)}
`
- + `
`;
-}
-
-function containerStatusHTML(capacity) {
- if (!capacity) return "";
- const statusGroup = (label, items) => `
${label}`
- + `
${items.map(([name, value, cls = ""]) => `${name} ${Number(value) || 0}`).join("")}
`;
- const users = Object.entries(capacity.per_user || {}).sort((a, b) => b[1] - a[1]);
- return statusGroup("前台", [["执行", capacity.foreground_running, "run"], ["排队", capacity.foreground_queued]])
- + statusGroup("后台", [["执行", capacity.background_running, "run"], ["排队", capacity.background_queued]])
- + statusGroup("容器", [["活跃", capacity.active_sandbox_containers], ["待回收", capacity.idle_reap_candidates], ["proc", capacity.running_proc_containers]])
- + statusGroup("单用户占用", users.length ? users.map(([userId, count]) => [escapeHtml(userId.slice(0, 8)), count]) : [["无", 0]]);
-}
-
function renderOpsSummary() {
const root = $("ops-summary");
if (!root) return;
@@ -163,6 +134,13 @@ function renderOpsSummary() {
? (Number(capacity.foreground_running) || 0) + (Number(capacity.background_running) || 0)
: 0;
const activeLimit = Number(capacityLimits.active) || 0;
+ const foregroundQueued = Number((capacity || {}).foreground_queued) || 0;
+ const backgroundQueued = Number((capacity || {}).background_queued) || 0;
+ const queuedExecs = foregroundQueued + backgroundQueued;
+ const availableExecs = capacityEnabled ? Math.max(0, Number(capacity.admit_available) || 0) : 0;
+ const maxUserUsage = capacityEnabled
+ ? Math.max(0, ...Object.values(capacity.per_user || {}).map(value => Number(value) || 0))
+ : 0;
const capacityPct = activeLimit ? Math.round(activeExecs / activeLimit * 100) : 0;
const capacityTone = capacityEnabled && capacity.memory_paused
? "danger"
@@ -178,29 +156,24 @@ function renderOpsSummary() {
const runStatuses = tasks.by_run_status || {};
const runningTasks = (Number(runStatuses.running) || 0) + (Number(runStatuses.cancelling) || 0);
const errorTasks = Number(runStatuses.error) || 0;
- const taskTone = errorTasks ? "warn" : "";
- const taskBody = taskGroupHTML("任务", tasks.by_status, ["active", "completed", "abandoned"])
- + taskGroupHTML("执行", runStatuses, ["running", "cancelling", "error", "idle", "cancelled", "completed"]);
+ const cancellingTasks = Number(runStatuses.cancelling) || 0;
+ const activeTasks = Number((tasks.by_status || {}).active) || 0;
const userTotal = Number(users.total) || 0;
const activeUsers = Number(users.active_7d) || 0;
const activeRate = userTotal ? Math.round(activeUsers / userTotal * 100) : 0;
const tokensIn = Number(usage.tokens_in) || 0;
- const tokensOut = Number(usage.tokens_out) || 0;
- const totalTokens = tokensIn + tokensOut;
- const tokens7d = byDay.reduce((sum, row) => sum + (Number(row.tokens_in) || 0) + (Number(row.tokens_out) || 0), 0);
+ const tokensIn7d = byDay.reduce((sum, row) => sum + (Number(row.tokens_in) || 0), 0);
+ const tokensOut7d = byDay.reduce((sum, row) => sum + (Number(row.tokens_out) || 0), 0);
+ const tokens7d = tokensIn7d + tokensOut7d;
const cacheHit = Number(usage.tokens_cache_hit) || 0;
const hitRate = tokensIn ? Math.round(cacheHit / tokensIn * 100) : 0;
const storage = storageSummaryData;
const storageTotals = (storage && storage.totals) || {};
- const quota = storage && Number(storage.quota_bytes);
const scannedUsers = storage ? Number(storage.total) || 0 : 0;
- const aggregateQuota = quota > 0 ? quota * scannedUsers : 0;
- const storageRatio = aggregateQuota ? (Number(storageTotals.bytes_used) || 0) / aggregateQuota : 0;
- const storageTone = levelClass(storageRatio);
- const storageValue = storage ? humanSize(storageTotals.physical_bytes || 0) : "—";
+ const storageValue = storage ? humanSize(storageTotals.physical_bytes || 0) : "汇总中";
const storageSub = storage
? `配额内 ${humanSize(storageTotals.bytes_used || 0)} · 回收站 ${humanSize(storageTotals.trash_bytes || 0)}`
: "正在读取存储快照";
@@ -219,57 +192,159 @@ function renderOpsSummary() {
const malformed = Number(((toolWireData || {}).total || {}).malformed_24h) || 0;
const toolTone = systemicCount || malformed ? "danger" : (localCount ? "warn" : "");
- const events = Number(usage.n_events) || 0;
const cost = Number(usage.cost_cny) || 0;
const cost7d = byDay.reduce((sum, row) => sum + (Number(row.cost_cny) || 0), 0);
root.innerHTML = [
summaryCard({
- label: "容器状态",
- value: !capacity ? "—" : (capacityEnabled ? `${activeExecs} / ${activeLimit || "—"}` : "未启用"),
- unit: capacityEnabled ? "执行中 / 上限" : "",
- body: capacityEnabled ? containerStatusHTML(capacity) : "",
+ label: "任务运行", value: String(runningTasks), unit: "正在运行",
+ sub: cancellingTasks ? `取消中 ${cancellingTasks}` : (errorTasks ? "存在执行错误记录" : "当前无执行异常"),
+ meta: [`活动任务 ${activeTasks}`, `累计 ${tasks.total || 0}`],
+ badge: errorTasks ? { text: `错误 ${errorTasks}`, tone: "danger" } : { text: "正常", tone: "ok" },
+ }),
+ summaryCard({
+ action: capacityEnabled ? "open-capacity" : "", label: "执行容量",
+ value: !capacity ? "汇总中" : (capacityEnabled ? `${activeExecs} / ${activeLimit || "—"}` : "未启用"),
+ unit: capacityEnabled ? "使用中 / 上限" : "",
sub: !capacity ? "正在读取容器状态" : (capacityEnabled
- ? `后台上限 ${capacityLimits.background || 0} · 单用户上限 ${capacityLimits.per_user || 0}${capacity.memory_paused ? " · 内存压力暂停放行" : ""}`
+ ? `可用 ${availableExecs} · 排队 ${queuedExecs}`
: "Docker Sandbox 未启用"),
meta: capacityEnabled
- ? [`当前可放行 ${capacity.admit_available || 0}`, `MemAvailable ${humanSize(capacity.mem_available_bytes || 0)} · CPU ${(capacity.cpu_load || []).join(" / ") || "—"}`]
+ ? [`后台 ${Number(capacity.background_running) || 0} / ${capacityLimits.background || 0}`, `单用户最高 ${maxUserUsage} / ${capacityLimits.per_user || 0}`]
: ["", ""],
+ badge: capacityEnabled
+ ? (capacity.memory_paused ? { text: "暂停放行", tone: "danger" } : (queuedExecs ? { text: `排队 ${queuedExecs}`, tone: "warn" } : { text: "正常", tone: "ok" }))
+ : null,
tone: capacityTone, progress: capacityEnabled && activeLimit ? capacityPct : null,
- extraClass: "task-summary",
}),
summaryCard({
- label: "任务状态", value: `${runningTasks} / ${tasks.total || 0}`, unit: "运行中 / 总数",
- body: taskBody, tone: taskTone, extraClass: "task-summary",
+ target: "s-windows-node", label: "专业软件节点",
+ value: softwareNodesLoaded ? `${nodeOnline} / ${nodeTotal}` : "汇总中", unit: softwareNodesLoaded ? "在线 / 总数" : "",
+ sub: softwareNodesLoaded ? `活动任务 ${nodeJobs}` : "正在读取节点状态",
+ meta: softwareNodesLoaded ? [`离线 ${nodeOffline}`, `禁用 ${nodeDisabled}`] : [],
+ badge: softwareNodesLoaded
+ ? (!nodeTotal ? { text: "未配置" } : (nodeTone ? { text: nodeOnline ? "部分异常" : "不可用", tone: nodeTone } : { text: "正常", tone: "ok" }))
+ : null,
}),
summaryCard({
- target: "s-users", label: "活跃用户", value: `${activeUsers} / ${userTotal}`, unit: "近 7 天 / 总数",
- sub: `近 7 天活跃率 ${activeRate}%`, meta: [`活跃 ${activeUsers}`, `未活跃 ${Math.max(0, userTotal - activeUsers)}`], progress: activeRate,
+ target: "s-toolfail", label: "工具健康",
+ value: toolFailuresData ? (failureCount ? `${failureCount} 次失败` : "正常") : "汇总中",
+ unit: toolFailuresData ? "近 24 小时" : "",
+ sub: toolFailuresData
+ ? (systemicCount || malformed ? `系统性聚集 ${systemicCount} · 链路残余 ${malformed}` : "未发现系统性工具异常")
+ : "正在汇总工具调用状态",
+ meta: toolFailuresData ? [`单任务 ${localCount}`, `质量门 ${gateCount}`] : [],
+ badge: toolFailuresData
+ ? (toolTone ? { text: systemicCount || malformed ? "需处理" : "有记录", tone: toolTone } : { text: "正常", tone: "ok" })
+ : null,
}),
summaryCard({
- target: "s-usage", label: "Token 与缓存", body: tokenSummaryHTML(tokens7d, totalTokens),
- sub: `输入 ${fmtTokens(tokensIn)} · 输出 ${fmtTokens(tokensOut)}`,
- meta: [`缓存命中 ${hitRate}%`, `命中 ${fmtTokens(cacheHit)}`], progress: hitRate, extraClass: "token-summary",
+ target: "s-users", label: "活跃用户", value: String(activeUsers), unit: "近 7 天活跃",
+ sub: `活跃率 ${activeRate}% · 总用户 ${userTotal}`,
+ meta: [`活跃 ${activeUsers}`, `未活跃 ${Math.max(0, userTotal - activeUsers)}`], progress: activeRate,
}),
summaryCard({
- target: "s-windows-node", label: "专业软件节点", value: softwareNodesLoaded ? `${nodeJobs} / ${nodeOnline}` : "—", unit: "活动任务 / 在线节点",
- sub: softwareNodesLoaded ? `节点总数 ${nodeTotal}` : "正在读取节点状态",
- meta: softwareNodesLoaded ? [`离线 ${nodeOffline}`, `禁用 ${nodeDisabled}`] : ["加载中", ""], tone: nodeTone,
+ target: "s-usage", label: "Token 与缓存", value: fmtTokens(tokens7d), unit: "近 7 天",
+ sub: `缓存命中 ${hitRate}%`,
+ meta: [`输入 ${fmtTokens(tokensIn7d)}`, `输出 ${fmtTokens(tokensOut7d)}`], progress: hitRate,
}),
summaryCard({
- target: "s-storage", label: "存储", value: storageValue, unit: "物理总占用",
- sub: storageSub, meta: storageMeta, tone: storageTone,
- progress: aggregateQuota ? Math.round(storageRatio * 100) : null,
+ target: "s-usage", label: "成本", value: fmtCNY(cost7d), unit: "近 7 天",
+ sub: `累计 ${fmtCNY(cost)}`,
}),
summaryCard({
- target: "s-usage", label: "成本", value: fmtCNY(cost), unit: "累计",
- sub: `近 7 天 ${fmtCNY(cost7d)}`, meta: [`${events} 次事件`, `均次 ${fmtCNY(events ? cost / events : 0)}`],
- }),
- summaryCard({
- target: "s-toolfail", label: "工具健康", value: toolFailuresData ? String(failureCount) : "—", unit: "近 24h 失败",
- sub: toolFailuresData ? `系统性聚集 ${systemicCount} · 单任务 ${localCount}` : "正在汇总工具调用状态",
- meta: toolFailuresData ? [`链路残余 ${malformed}`, `质量门 ${gateCount}`] : ["加载中", ""], tone: toolTone,
+ target: "s-storage", label: "存储", value: storageValue, unit: storage ? "物理总占用" : "",
+ sub: storageSub, meta: storageMeta,
}),
].join("");
+ const capacityCard = root.querySelector('[data-summary-action="open-capacity"]');
+ if (capacityCard) capacityCard.onclick = openCapacityDrawer;
+ if ($("capacity-drawer").classList.contains("show")) renderCapacityDrawer();
+}
+
+function capacityDetailItem(label, value, hint = "", tone = "") {
+ return `
`
+ + `${escapeHtml(label)}${escapeHtml(String(value))}`
+ + (hint ? `${escapeHtml(hint)}` : "") + `
`;
+}
+
+function renderCapacityDrawer() {
+ const capacity = sandboxCapacityData;
+ const body = $("capacity-drawer-body");
+ const status = $("capacity-drawer-status");
+ if (!capacity || !body || !status) return;
+ if (capacity.enabled === false) {
+ status.className = "summary-badge";
+ status.textContent = "未启用";
+ body.innerHTML = `
Docker Sandbox 未启用，当前没有可展示的执行容量。
`;
+ return;
+ }
+
+ const limits = capacity.limits || {};
+ const foregroundRunning = Number(capacity.foreground_running) || 0;
+ const backgroundRunning = Number(capacity.background_running) || 0;
+ const foregroundQueued = Number(capacity.foreground_queued) || 0;
+ const backgroundQueued = Number(capacity.background_queued) || 0;
+ const active = foregroundRunning + backgroundRunning;
+ const limit = Number(limits.active) || 0;
+ const queued = foregroundQueued + backgroundQueued;
+ const available = Math.max(0, Number(capacity.admit_available) || 0);
+ const users = Object.entries(capacity.per_user || {}).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0));
+ const cpuLoad = (capacity.cpu_load || []).map(value => Number(value).toFixed(2)).join(" / ") || "—";
+
+ status.className = `summary-badge ${capacity.memory_paused ? "danger" : (queued ? "warn" : "ok")}`;
+ status.textContent = capacity.memory_paused ? "暂停放行" : (queued ? `排队 ${queued}` : "运行正常");
+ body.innerHTML = (capacity.memory_paused
+ ? `
内存压力已暂停新任务放行运行中的任务不受影响；资源恢复后会继续调度。
`
+ : "")
+ + `
`
+ + `${active} / ${limit || "—"}使用中 / 上限
`
+ + `${available}当前可放行
`
+ + `${queued}等待调度
`
+ + `
执行队列
`
+ + capacityDetailItem("前台执行", foregroundRunning, `排队 ${foregroundQueued}`, foregroundQueued ? "warn" : "")
+ + capacityDetailItem("后台执行", `${backgroundRunning} / ${Number(limits.background) || 0}`, `排队 ${backgroundQueued}`, backgroundQueued ? "warn" : "")
+ + capacityDetailItem("单用户上限", Number(limits.per_user) || 0, "重型任务槽位")
+ + `
`
+ + `
容器生命周期
`
+ + capacityDetailItem("活跃容器", Number(capacity.active_sandbox_containers) || 0)
+ + capacityDetailItem("待回收", Number(capacity.idle_reap_candidates) || 0, "空闲候选", Number(capacity.idle_reap_candidates) ? "warn" : "")
+ + capacityDetailItem("后台 proc", Number(capacity.running_proc_containers) || 0)
+ + `
`
+ + `
单用户占用
`
+ + (users.length
+ ? `${users.map(([userId, count]) => `
${escapeHtml(userId.slice(0, 8))}${Number(count) || 0} / ${Number(limits.per_user) || 0}
`).join("")}
当前没有用户占用执行槽位
`)
+ + ``
+ + `
宿主资源
`
+ + `
可用内存${humanSize(capacity.mem_available_bytes || 0)}
`
+ + `
CPU Load${escapeHtml(cpuLoad)}
`
+ + `
`;
+}
+
+function openCapacityDrawer() {
+ if (!sandboxCapacityData || sandboxCapacityData.enabled === false) return;
+ capacityDrawerTrigger = document.activeElement;
+ renderCapacityDrawer();
+ const drawer = $("capacity-drawer");
+ drawer.classList.add("show");
+ drawer.setAttribute("aria-hidden", "false");
+ document.documentElement.classList.add("drawer-open");
+ document.body.classList.add("drawer-open");
+ $("capacity-drawer-close").focus();
+}
+
+function closeCapacityDrawer() {
+ const drawer = $("capacity-drawer");
+ if (!drawer.classList.contains("show")) return;
+ drawer.classList.remove("show");
+ drawer.setAttribute("aria-hidden", "true");
+ document.documentElement.classList.remove("drawer-open");
+ document.body.classList.remove("drawer-open");
+ const nextTrigger = capacityDrawerTrigger && document.contains(capacityDrawerTrigger)
+ ? capacityDrawerTrigger
+ : document.querySelector('[data-summary-action="open-capacity"]');
+ if (nextTrigger) nextTrigger.focus();
+ capacityDrawerTrigger = null;
}
function renderByDay(rows) {
@@ -1354,13 +1429,21 @@ $("node-enrollment-form").onsubmit = createNodeEnrollment;
$("node-enrollment-close").onclick = closeNodeEnrollmentModal;
$("node-enrollment-cancel").onclick = closeNodeEnrollmentModal;
$("node-enrollment-copy").onclick = copyNodeEnrollmentCode;
+$("capacity-drawer-close").onclick = closeCapacityDrawer;
+$("capacity-drawer").onclick = (e) => {
+ if (e.target.id === "capacity-drawer") closeCapacityDrawer();
+};
$("node-enrollment-modal").onclick = (e) => {
if (e.target.id === "node-enrollment-modal") closeNodeEnrollmentModal();
};
document.addEventListener("keydown", (e) => {
- if (e.key === "Escape" && $("node-enrollment-modal").classList.contains("show")) {
- closeNodeEnrollmentModal();
+ if ($("capacity-drawer").classList.contains("show") && e.key === "Tab") {
+ e.preventDefault();
+ $("capacity-drawer-close").focus();
+ return;
}
+ if (e.key === "Escape" && $("capacity-drawer").classList.contains("show")) closeCapacityDrawer();
+ else if (e.key === "Escape" && $("node-enrollment-modal").classList.contains("show")) closeNodeEnrollmentModal();
});
// 切到后台标签暂停轮询,回前台立即刷一次再续上(省请求)
document.addEventListener("visibilitychange", () => {