mirrors/pikasTech-unidesk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1028 from pikasTech/feat/1025-vue-ts-dashboard

Browse Source 
feat: Web哨兵监控面板桌面端视图改进三栏布局·低噪声·渐进披露 (#1025)
This commit is contained in:
Lyon
2026-06-26 20:31:28 +08:00
committed by GitHub
parent c304a2b69c 92f20ed978
commit 7b3df965cc
4 changed files with 1241 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/assets/web-probe-sentinel-dashboard/dashboard.css
+699 -434
View File
File diff suppressed because it is too large Load Diff
scripts/assets/web-probe-sentinel-dashboard/dashboard.js
+415 -114
View File
@@ -1,5 +1,7 @@
// SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-26-p8-web-probe-sentinel-recovery. // SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-26-p9-desktop-view-density.
// Responsibility: Browser-side API client, formatting, auto refresh, and base dashboard rendering. // Responsibility: Browser-side API client, formatting, auto refresh, and base dashboard rendering.
// Desktop view redesign (issue #1025): 三栏 master-detail、低噪声、渐进披露、排查直觉化。
// 保持纯 vanilla JS + 原生 CSS，无框架、无构建步骤，所有渲染通过 innerHTML 拼接。
/** /**
* @typedef {{runId?: string|null, observerId?: string|null, stateDir?: string|null, reportJsonSha256?: string|null, stateRoot?: string|null, source?: string|null}} Traceability * @typedef {{runId?: string|null, observerId?: string|null, stateDir?: string|null, reportJsonSha256?: string|null, stateRoot?: string|null, source?: string|null}} Traceability
@@ -20,14 +22,20 @@ const refs = {
manualRefresh: document.getElementById("manual-refresh"), manualRefresh: document.getElementById("manual-refresh"),
autoRefreshEnabled: document.getElementById("auto-refresh-enabled"), autoRefreshEnabled: document.getElementById("auto-refresh-enabled"),
autoRefreshInterval: document.getElementById("auto-refresh-interval"), autoRefreshInterval: document.getElementById("auto-refresh-interval"),
overall: document.getElementById("metric-overall"), latestRun: document.getElementById("latest-run"),
origin: document.getElementById("metric-origin"), filterRed: document.getElementById("filter-red"),
latestRun: document.getElementById("metric-latest-run"), originNote: document.getElementById("sentinel-origin-note"),
latestAge: document.getElementById("metric-latest-age"), statusSummary: document.getElementById("status-summary"),
findings: document.getElementById("metric-findings"), summaryStatus: document.getElementById("summary-status"),
findingsNote: document.getElementById("metric-findings-note"), summaryLatest: document.getElementById("summary-latest"),
scheduler: document.getElementById("metric-scheduler"), summaryLatestAge: document.getElementById("summary-latest-age"),
budget: document.getElementById("metric-budget"), summaryFindings: document.getElementById("summary-findings"),
summaryFindingsNote: document.getElementById("summary-findings-note"),
summaryScheduler: document.getElementById("summary-scheduler"),
summaryBudget: document.getElementById("summary-budget"),
summaryChecks: document.getElementById("summary-checks"),
overviewChecks: document.getElementById("overview-checks"),
checkSummaryPill: document.getElementById("check-summary-pill"),
checkConfig: document.getElementById("check-config"), checkConfig: document.getElementById("check-config"),
checkPvc: document.getElementById("check-pvc"), checkPvc: document.getElementById("check-pvc"),
checkAnalyzer: document.getElementById("check-analyzer"), checkAnalyzer: document.getElementById("check-analyzer"),
@@ -35,6 +43,8 @@ const refs = {
checkMaintenance: document.getElementById("check-maintenance"), checkMaintenance: document.getElementById("check-maintenance"),
timeline: document.getElementById("run-timeline"), timeline: document.getElementById("run-timeline"),
timelineCount: document.getElementById("timeline-count"), timelineCount: document.getElementById("timeline-count"),
timelineToggle: document.getElementById("timeline-toggle"),
runsFilterSummary: document.getElementById("runs-filter-summary"),
filterForm: document.getElementById("runs-filter"), filterForm: document.getElementById("runs-filter"),
filterStatus: document.getElementById("filter-status"), filterStatus: document.getElementById("filter-status"),
filterSeverity: document.getElementById("filter-severity"), filterSeverity: document.getElementById("filter-severity"),
@@ -44,6 +54,7 @@ const refs = {
clearFilters: document.getElementById("clear-filters"), clearFilters: document.getElementById("clear-filters"),
runsBody: document.getElementById("runs-body"), runsBody: document.getElementById("runs-body"),
runsCount: document.getElementById("runs-count"), runsCount: document.getElementById("runs-count"),
findingsFilterSummary: document.getElementById("findings-filter-summary"),
findingsFilterForm: document.getElementById("findings-filter"), findingsFilterForm: document.getElementById("findings-filter"),
findingFilterSeverity: document.getElementById("finding-filter-severity"), findingFilterSeverity: document.getElementById("finding-filter-severity"),
findingFilterWindow: document.getElementById("finding-filter-window"), findingFilterWindow: document.getElementById("finding-filter-window"),
@@ -53,8 +64,11 @@ const refs = {
findingAggregation: document.getElementById("finding-aggregation"), findingAggregation: document.getElementById("finding-aggregation"),
findingsList: document.getElementById("findings-list"), findingsList: document.getElementById("findings-list"),
findingsCount: document.getElementById("findings-count"), findingsCount: document.getElementById("findings-count"),
findingsDrilldown: document.getElementById("findings-drilldown"),
detailTabs: document.getElementById("detail-tabs"),
detailSubtitle: document.getElementById("detail-subtitle"), detailSubtitle: document.getElementById("detail-subtitle"),
detailContent: document.getElementById("detail-content"), detailContent: document.getElementById("detail-content"),
copyToast: document.getElementById("copy-toast"),
}; };
const state = { const state = {
@@ -73,11 +87,21 @@ const state = {
lastUpdatedAt: null, lastUpdatedAt: null,
filters: readFiltersFromLocation(), filters: readFiltersFromLocation(),
findingFilters: readFindingFiltersFromLocation(), findingFilters: readFindingFiltersFromLocation(),
selectedTab: readTabFromLocation(),
selectedFindingCode: new URLSearchParams(window.location.search).get("finding") || "",
findingDrilldownKey: "",
runsFilterOpen: false,
findingsFilterOpen: false,
checksExpanded: false,
timelineCollapsed: false,
pausedByInteraction: false,
}; };
const DETAIL_TABS = ["overview", "findings", "turn", "trace", "evidence"];
const dashboardLimits = { const dashboardLimits = {
timeline: { mobile: 6, tablet: 9, desktop: 12 }, timeline: { mobile: 6, tablet: 9, desktop: 16 },
runs: { mobile: 8, tablet: 12, desktop: 24 }, runs: { mobile: 8, tablet: 12, desktop: 30 },
findingsRed: { mobile: 4, tablet: 6, desktop: 8 }, findingsRed: { mobile: 4, tablet: 6, desktop: 8 },
findingsOther: { mobile: 2, tablet: 3, desktop: 5 }, findingsOther: { mobile: 2, tablet: 3, desktop: 5 },
}; };
@@ -88,12 +112,18 @@ const autoRefresh = createAutoRefresh({
intervals: [5, 10, 30], intervals: [5, 10, 30],
defaultInterval: 10, defaultInterval: 10,
onRefresh: () => loadDashboard({ silent: true }), onRefresh: () => loadDashboard({ silent: true }),
shouldPause: () => document.hidden || state.loading, shouldPause: () => document.hidden || state.loading || state.pausedByInteraction,
}); });
refs.manualRefresh.addEventListener("click", () => loadDashboard({ silent: false })); refs.manualRefresh.addEventListener("click", () => loadDashboard({ silent: false }));
refs.autoRefreshEnabled.addEventListener("change", () => autoRefresh.setEnabled(refs.autoRefreshEnabled.checked)); refs.autoRefreshEnabled.addEventListener("change", () => autoRefresh.setEnabled(refs.autoRefreshEnabled.checked));
refs.autoRefreshInterval.addEventListener("change", () => autoRefresh.setInterval(Number(refs.autoRefreshInterval.value))); refs.autoRefreshInterval.addEventListener("change", () => autoRefresh.setInterval(Number(refs.autoRefreshInterval.value)));
refs.latestRun.addEventListener("click", () => jumpToLatestRun());
refs.filterRed.addEventListener("click", () => toggleRedOnly());
refs.runsFilterSummary.addEventListener("click", () => toggleRunsFilter());
refs.findingsFilterSummary.addEventListener("click", () => toggleFindingsFilter());
refs.checkSummaryPill.addEventListener("click", () => toggleChecks());
refs.timelineToggle.addEventListener("click", () => toggleTimeline());
refs.filterForm.addEventListener("submit", (event) => event.preventDefault()); refs.filterForm.addEventListener("submit", (event) => event.preventDefault());
for (const control of [refs.filterStatus, refs.filterSeverity, refs.filterWindow, refs.filterSort]) { for (const control of [refs.filterStatus, refs.filterSeverity, refs.filterWindow, refs.filterSort]) {
control.addEventListener("change", () => applyFilterControls()); control.addEventListener("change", () => applyFilterControls());
@@ -102,6 +132,7 @@ refs.filterSearch.addEventListener("input", debounce(() => applyFilterControls()
refs.clearFilters.addEventListener("click", () => { refs.clearFilters.addEventListener("click", () => {
state.filters = { status: "", severity: "", window: "", search: "", sort: "updated" }; state.filters = { status: "", severity: "", window: "", search: "", sort: "updated" };
writeFiltersToControls(); writeFiltersToControls();
updateRunsFilterSummary();
syncLocationQuery(); syncLocationQuery();
loadDashboard({ silent: false }); loadDashboard({ silent: false });
}); });
@@ -114,23 +145,34 @@ for (const control of [refs.findingFilterCode, refs.findingFilterScenario]) {
} }
refs.findingClearFilters.addEventListener("click", () => { refs.findingClearFilters.addEventListener("click", () => {
state.findingFilters = { severity: "", window: "24h", code: "", scenario: "" }; state.findingFilters = { severity: "", window: "24h", code: "", scenario: "" };
state.findingDrilldownKey = "";
writeFindingFiltersToControls(); writeFindingFiltersToControls();
updateFindingsFilterSummary();
syncLocationQuery(); syncLocationQuery();
loadDashboard({ silent: false }); loadDashboard({ silent: false });
}); });
refs.detailTabs.addEventListener("click", (event) => {
const button = event.target.closest("[data-detail-tab]");
if (button) selectTab(button.dataset.detailTab);
});
document.addEventListener("visibilitychange", () => { document.addEventListener("visibilitychange", () => {
if (!document.hidden && autoRefresh.enabled()) loadDashboard({ silent: true }); if (!document.hidden && autoRefresh.enabled()) loadDashboard({ silent: true });
}); });
window.addEventListener("resize", debounce(() => { document.addEventListener("keydown", handleKeyboardShortcut);
if (!state.overview) return; window.addEventListener("resize", debounce(updateViewportClass, 150));
renderTimeline();
renderRuns(); // 交互暂停：hover runs 表格或在 detail tab 阅读时暂停 auto-refresh
renderFindings(); refs.runsBody.addEventListener("mouseenter", () => { state.pausedByInteraction = true; }, true);
}, 150)); refs.runsBody.addEventListener("mouseleave", () => { state.pausedByInteraction = false; }, true);
refs.detailContent.addEventListener("mouseenter", () => { state.pausedByInteraction = true; }, true);
refs.detailContent.addEventListener("mouseleave", () => { state.pausedByInteraction = false; }, true);
hydrateControls(); hydrateControls();
writeFiltersToControls(); writeFiltersToControls();
writeFindingFiltersToControls(); writeFindingFiltersToControls();
updateRunsFilterSummary();
updateFindingsFilterSummary();
updateViewportClass();
loadDashboard({ silent: false }).catch((error) => renderError(error)); loadDashboard({ silent: false }).catch((error) => renderError(error));
function createDashboardApi() { function createDashboardApi() {
@@ -271,6 +313,7 @@ async function selectRun(runId) {
syncLocationQuery(); syncLocationQuery();
renderRuns(); renderRuns();
refs.detailSubtitle.textContent = runId; refs.detailSubtitle.textContent = runId;
refs.detailTabs.hidden = false;
refs.detailContent.innerHTML = '<div class="empty-state">加载中</div>'; refs.detailContent.innerHTML = '<div class="empty-state">加载中</div>';
try { try {
const [detail, views] = await Promise.all([ const [detail, views] = await Promise.all([
@@ -309,45 +352,68 @@ function renderOverview() {
const latestStatus = latest?.status || status; const latestStatus = latest?.status || status;
refs.statusPill.textContent = displayStatus(latestStatus); refs.statusPill.textContent = displayStatus(latestStatus);
refs.statusPill.className = `status-pill ${statusClass(latestStatus)}`; refs.statusPill.className = `status-pill ${statusClass(latestStatus)}`;
refs.overall.textContent = displayStatus(latestStatus);
refs.origin.textContent = `${overview.publicOrigin || root.dataset.publicOrigin || "-"} · 历史 ${displayStatus(status)}`;
refs.latestRun.textContent = latest?.runId || latest?.id || "-"; // 状态摘要条合并 status-pill 信息（B1 去重：不再单独显示 metric-overall 重复值）
refs.latestAge.textContent = latest?.updatedAt ? `${formatRelative(latest.updatedAt)} 更新` : "-"; refs.statusSummary.hidden = false;
refs.summaryStatus.textContent = displayStatus(latestStatus);
refs.summaryStatus.className = statusClass(latestStatus);
refs.originNote.textContent = overview.publicOrigin || root.dataset.publicOrigin || "";
refs.summaryLatest.textContent = latest?.runId || latest?.id || "-";
refs.summaryLatestAge.textContent = latest?.updatedAt ? `${formatRelative(latest.updatedAt)} 更新` : "-";
const severityCounts = overview.severityCounts || {}; const severityCounts = overview.severityCounts || {};
const totalFindings = Object.values(severityCounts).reduce((sum, value) => sum + Number(value || 0), 0); const totalFindings = Object.values(severityCounts).reduce((sum, value) => sum + Number(value || 0), 0);
refs.findings.textContent = formatNumber(totalFindings); refs.summaryFindings.textContent = formatNumber(totalFindings);
refs.findingsNote.textContent = formatSeveritySummary(severityCounts); refs.summaryFindingsNote.textContent = formatSeveritySummary(severityCounts);
const scheduler = overview.scheduler || {}; const scheduler = overview.scheduler || {};
const heartbeat = scheduler.heartbeat || {}; const heartbeat = scheduler.heartbeat || {};
refs.scheduler.textContent = heartbeat.at ? formatRelative(heartbeat.at) : "未知"; refs.summaryScheduler.textContent = heartbeat.at ? formatRelative(heartbeat.at) : "未知";
const maxSeconds = overview.targetValidation?.maxSeconds ?? 120; const maxSeconds = overview.targetValidation?.maxSeconds ?? 120;
refs.budget.textContent = `targetValidation 预算 ${maxSeconds}s`; refs.summaryBudget.textContent = `预算 ${maxSeconds}s`;
const checks = overview.health?.checks || {}; const checks = overview.health?.checks || {};
const checkResults = [
{ label: "配置", ok: checks.config?.ok, detail: checks.config?.status },
{ label: "PVC", ok: checks.pvc?.ok, detail: checks.pvc?.stateRoot },
{ label: "分析器", ok: checks.analyzer?.ok, detail: "observe analyze" },
{ label: "公开入口", ok: Boolean(overview.publicOrigin), detail: overview.publicOrigin || "-" },
];
const maintenance = overview.maintenance || {};
checkResults.push({ label: "维护窗口", ok: maintenance.active !== true, detail: maintenance.active ? "生效中" : "未生效" });
const allOk = checkResults.every((item) => item.ok);
const okCount = checkResults.filter((item) => item.ok).length;
refs.summaryChecks.hidden = false;
refs.checkSummaryPill.textContent = allOk ? `✓ ${okCount}/${checkResults.length} 检查通过` : `${okCount}/${checkResults.length} 检查`;
refs.checkSummaryPill.className = `check-summary-pill ${allOk ? "check-ok" : "check-blocked"}`;
refs.overviewChecks.hidden = false;
renderCheckChip(refs.checkConfig, "配置", checks.config?.ok, checks.config?.status); renderCheckChip(refs.checkConfig, "配置", checks.config?.ok, checks.config?.status);
renderCheckChip(refs.checkPvc, "PVC", checks.pvc?.ok, checks.pvc?.stateRoot); renderCheckChip(refs.checkPvc, "PVC", checks.pvc?.ok, checks.pvc?.stateRoot);
renderCheckChip(refs.checkAnalyzer, "分析器", checks.analyzer?.ok, "observe analyze"); renderCheckChip(refs.checkAnalyzer, "分析器", checks.analyzer?.ok, "observe analyze");
renderCheckChip(refs.checkPublic, "公开入口", Boolean(overview.publicOrigin), overview.publicOrigin || "-"); renderCheckChip(refs.checkPublic, "公开入口", Boolean(overview.publicOrigin), overview.publicOrigin || "-");
const maintenance = overview.maintenance || {};
renderCheckChip(refs.checkMaintenance, "维护窗口", maintenance.active !== true, maintenance.active ? "生效中" : "未生效"); renderCheckChip(refs.checkMaintenance, "维护窗口", maintenance.active !== true, maintenance.active ? "生效中" : "未生效");
// B3: 全绿时默认折叠 overview checks 明细
refs.overviewChecks.classList.toggle("overview-checks-collapsed", !state.checksExpanded);
} }
function renderTimeline() { function renderTimeline() {
const visibleRuns = state.runs.slice(0, responsiveLimit(dashboardLimits.timeline)); const visibleRuns = state.runs.slice(0, responsiveLimit(dashboardLimits.timeline));
refs.timelineCount.textContent = `最近 ${formatNumber(visibleRuns.length)} / ${formatNumber(state.runs.length)} 次`; refs.timelineCount.textContent = `最近 ${formatNumber(visibleRuns.length)} / ${formatNumber(state.runs.length)}`;
if (state.runs.length === 0) { if (state.runs.length === 0) {
refs.timeline.innerHTML = '<div class="empty-state">暂无时间线</div>'; refs.timeline.innerHTML = '<div class="empty-state compact">暂无时间线</div>';
return; return;
} }
refs.timeline.innerHTML = visibleRuns.map((run) => { refs.timeline.innerHTML = visibleRuns.map((run) => {
const runId = run.runId || run.id || "-"; const runId = run.runId || run.id || "-";
const title = `${displayStatus(run.status)} · ${run.findingCount ?? 0} 个发现 · ${run.updatedAt ? formatRelative(run.updatedAt) : "-"}`; const age = run.updatedAt ? formatRelative(run.updatedAt) : "-";
const title = `${displayStatus(run.status)} · ${run.findingCount ?? 0} 个发现 · ${age}`;
return `<button class="timeline-node ${statusClass(run.status)}" type="button" data-run-id="${escapeAttr(runId)}" title="${escapeAttr(title)}"> return `<button class="timeline-node ${statusClass(run.status)}" type="button" data-run-id="${escapeAttr(runId)}" title="${escapeAttr(title)}">
<span class="timeline-dot"></span>
<span class="timeline-label">${escapeHtml(displayStatus(run.status))}</span> <span class="timeline-label">${escapeHtml(displayStatus(run.status))}</span>
<span class="timeline-age">${escapeHtml(age)}</span>
</button>`; </button>`;
}).join(""); }).join("");
for (const node of refs.timeline.querySelectorAll("[data-run-id]")) { for (const node of refs.timeline.querySelectorAll("[data-run-id]")) {
@@ -359,7 +425,7 @@ function renderRuns() {
const visibleLimit = responsiveLimit(dashboardLimits.runs); const visibleLimit = responsiveLimit(dashboardLimits.runs);
const visibleRuns = state.runs.slice(0, visibleLimit); const visibleRuns = state.runs.slice(0, visibleLimit);
const hiddenCount = Math.max(0, state.runs.length - visibleRuns.length); const hiddenCount = Math.max(0, state.runs.length - visibleRuns.length);
refs.runsCount.textContent = `${formatNumber(visibleRuns.length)} / ${formatNumber(state.runs.length)} 条可见`; refs.runsCount.textContent = `${formatNumber(visibleRuns.length)} / ${formatNumber(state.runs.length)} 条`;
if (state.runs.length === 0) { if (state.runs.length === 0) {
refs.runsBody.innerHTML = '<tr><td class="empty-state" colspan="5">暂无运行</td></tr>'; refs.runsBody.innerHTML = '<tr><td class="empty-state" colspan="5">暂无运行</td></tr>';
return; return;
@@ -367,17 +433,15 @@ function renderRuns() {
refs.runsBody.innerHTML = visibleRuns.map((run) => { refs.runsBody.innerHTML = visibleRuns.map((run) => {
const runId = run.runId || run.id || "-"; const runId = run.runId || run.id || "-";
const selected = state.selectedRunId === runId ? " selected-row" : ""; const selected = state.selectedRunId === runId ? " selected-row" : "";
return `<tr class="${selected}" data-run-id="${escapeAttr(runId)}"> const severityRowClass = run.maxSeverity ? ` ${severityClass(run.maxSeverity)}` : "";
<td data-label="运行"><div class="run-identity"> return `<tr class="${selected}${severityRowClass}" data-run-id="${escapeAttr(runId)}">
<div><span>run</span><code>${escapeHtml(runId)}</code></div> <td data-label="运行"><div class="run-identity"><code>${escapeHtml(shortText(runId, 24))}</code><small>${escapeHtml(run.observerId ? shortText(run.observerId, 28) : "-")}</small></div></td>
<div><span>observer</span><code>${escapeHtml(run.observerId || "-")}</code></div>
</div></td>
<td data-label="状态"><span class="status-pill ${statusClass(run.status)}">${escapeHtml(displayStatus(run.status))}</span></td> <td data-label="状态"><span class="status-pill ${statusClass(run.status)}">${escapeHtml(displayStatus(run.status))}</span></td>
<td data-label="场景">${escapeHtml(run.scenarioId || "-")}</td> <td data-label="场景">${escapeHtml(run.scenarioId || "-")}</td>
<td data-label="发现项">${escapeHtml(String(run.findingCount ?? 0))}${run.maxSeverity ? ` <span class="severity-pill ${severityClass(run.maxSeverity)}">${escapeHtml(displaySeverity(run.maxSeverity))}</span>` : ""}</td> <td data-label="发现">${escapeHtml(String(run.findingCount ?? 0))}${run.maxSeverity ? ` <span class="severity-pill ${severityClass(run.maxSeverity)}">${escapeHtml(displaySeverity(run.maxSeverity))}</span>` : ""}</td>
<td data-label="更新时间"><span>${escapeHtml(run.updatedAt ? formatRelative(run.updatedAt) : "-")}</span><small>${escapeHtml(run.maintenance ? "维护窗口" : "")}</small></td> <td data-label="更新">${escapeHtml(run.updatedAt ? formatRelative(run.updatedAt) : "-")}${run.maintenance ? `<small>维护窗口</small>` : ""}</td>
</tr>`; </tr>`;
}).join("") + (hiddenCount > 0 ? `<tr class="limit-row"><td colspan="5">其余 ${formatNumber(hiddenCount)} 条运行通过筛选、搜索或 API drill-down 查看</td></tr>` : ""); }).join("") + (hiddenCount > 0 ? `<tr class="limit-row"><td colspan="5">其余 ${formatNumber(hiddenCount)} 条通过筛选、搜索或 API drill-down 查看</td></tr>` : "");
for (const row of refs.runsBody.querySelectorAll("tr[data-run-id]")) { for (const row of refs.runsBody.querySelectorAll("tr[data-run-id]")) {
row.addEventListener("click", () => selectRun(row.dataset.runId)); row.addEventListener("click", () => selectRun(row.dataset.runId));
} }
@@ -386,28 +450,99 @@ function renderRuns() {
function renderFindings() { function renderFindings() {
renderFindingAggregation(); renderFindingAggregation();
refs.findingsCount.textContent = `${formatNumber(state.findings.length)} 组`; refs.findingsCount.textContent = `${formatNumber(state.findings.length)} 组`;
if (state.findingDrilldownKey) {
renderFindingsDrilldown();
return;
}
refs.findingsList.hidden = false;
refs.findingsDrilldown.hidden = true;
if (state.findings.length === 0) { if (state.findings.length === 0) {
refs.findingsList.innerHTML = '<div class="empty-state">暂无发现项</div>'; refs.findingsList.innerHTML = '<div class="empty-state">暂无发现项</div>';
return; return;
} }
// B8: 默认只显示聚合，list 折叠为 severity group summary（点击展开明细）
const groups = groupedFindingsBySeverity(state.findings); const groups = groupedFindingsBySeverity(state.findings);
refs.findingsList.innerHTML = groups.map((group, groupIndex) => { refs.findingsList.innerHTML = groups.map((group) => {
const open = group.key === "red" || groupIndex === 0;
const visibleItems = group.items.slice(0, findingVisibleLimit(group.key)); const visibleItems = group.items.slice(0, findingVisibleLimit(group.key));
const hiddenCount = Math.max(0, group.items.length - visibleItems.length); const hiddenCount = Math.max(0, group.items.length - visibleItems.length);
return `<details class="finding-group finding-group-${escapeAttr(group.key)}" ${open ? "open" : ""}> return `<details class="finding-group finding-group-${escapeAttr(group.key)}">
<summary> <summary>
<span>${escapeHtml(displaySeverity(group.key))}</span> <span>${escapeHtml(displaySeverity(group.key))}</span>
<strong>${formatNumber(group.totalCount)}</strong> <strong>${formatNumber(group.totalCount)}</strong>
<small>${formatNumber(group.items.length)} 组${hiddenCount > 0 ? ` · 其余 ${formatNumber(hiddenCount)} 组通过过滤查看` : ""}</small> <small>${formatNumber(group.items.length)} 组${hiddenCount > 0 ? ` · 其余 ${formatNumber(hiddenCount)} 组` : ""}</small>
</summary> </summary>
<div class="finding-group-list">${visibleItems.map(renderFindingItem).join("")}</div> <div class="finding-group-list">${visibleItems.map((item) => renderFindingItemCollapsed(item)).join("")}</div>
</details>`; </details>`;
}).join(""); }).join("");
for (const button of refs.findingsList.querySelectorAll("[data-open-finding-run]")) { bindFindingItemEvents();
}
function renderFindingsDrilldown() {
refs.findingsList.hidden = true;
refs.findingsDrilldown.hidden = false;
const [filterKey, filterValue] = state.findingDrilldownKey.split(":", 2);
const matched = state.findings.filter((item) => {
if (filterKey === "severity") return String(item.severity || "unknown").toLowerCase() === filterValue;
if (filterKey === "code") return (item.code || item.findingId || "unknown") === filterValue;
if (filterKey === "scenario") return (item.scenarioId || "unknown") === filterValue;
return false;
});
const label = drilldownLabel(filterKey, filterValue);
refs.findingsDrilldown.innerHTML = `<button type="button" class="link-button findings-drilldown-back" id="findings-drilldown-back">← 返回聚合</button>
<div class="view-note">drill-down: ${escapeHtml(label)} · ${formatNumber(matched.length)} 组</div>
<div class="finding-group-list">${matched.map((item) => renderFindingItemCollapsed(item)).join("")}</div>`;
document.getElementById("findings-drilldown-back")?.addEventListener("click", () => {
state.findingDrilldownKey = "";
syncLocationQuery();
renderFindings();
});
bindFindingItemEvents(refs.findingsDrilldown);
}
function drilldownLabel(filterKey, filterValue) {
if (filterKey === "severity") return `严重级别=${displaySeverity(filterValue)}`;
if (filterKey === "code") return `代码=${displayFindingCode(filterValue)}`;
if (filterKey === "scenario") return `场景=${filterValue}`;
return filterValue;
}
function renderFindingItemCollapsed(item) {
const code = item.code || item.findingId || "finding";
const latestRunId = item.latestRunId || "-";
const hasLatestRun = latestRunId !== "-";
const codeLabel = displayFindingCode(code);
return `<article class="finding-item is-collapsed" data-finding-run-id="${escapeAttr(latestRunId)}">
<div class="finding-row" data-finding-toggle>
<span class="finding-title">${escapeHtml(codeLabel)}${codeLabel === code ? "" : ` <small class="mono">${escapeHtml(code)}</small>`}<small> · ${formatNumber(item.count ?? 0)} 次</small></span>
<span class="severity-pill ${severityClass(item.severity)}">${escapeHtml(displaySeverity(item.severity))}</span>
</div>
<div class="finding-detail">
<div class="finding-summary">${escapeHtml(shortText(displayFindingSummary(code, item.summary || ""), 220))}</div>
<div class="finding-actions">
<button type="button" class="filter-chip" data-finding-filter="code" data-filter-value="${escapeAttr(code)}">${escapeHtml(code)}</button>
<button type="button" class="filter-chip" data-finding-filter="scenario" data-filter-value="${escapeAttr(item.scenarioId || "")}">${escapeHtml(item.scenarioId || "-")}</button>
</div>
<div class="finding-meta">次数=${escapeHtml(String(item.count ?? 0))} · 运行=${escapeHtml(String(item.runCount ?? 0))} · 最近=${escapeHtml(item.latestAt ? formatRelative(item.latestAt) : "-")}</div>
<div class="finding-meta mono">run=${escapeHtml(latestRunId)} report=${escapeHtml(item.latestReportJsonSha256 || "-")}</div>
<div class="finding-meta">${escapeHtml(findingNextAction(code))}</div>
<button type="button" class="link-button" data-open-finding-run="${escapeAttr(latestRunId)}"${hasLatestRun ? "" : " disabled"}>打开最近运行</button>
</div>
</article>`;
}
function bindFindingItemEvents(scope) {
const container = scope || refs.findingsList;
for (const row of container.querySelectorAll("[data-finding-toggle]")) {
row.addEventListener("click", (event) => {
if (event.target.closest("[data-open-finding-run]") || event.target.closest("[data-finding-filter]")) return;
const item = row.closest(".finding-item");
if (item) item.classList.toggle("is-collapsed");
});
}
for (const button of container.querySelectorAll("[data-open-finding-run]")) {
button.addEventListener("click", () => selectRun(button.dataset.openFindingRun)); button.addEventListener("click", () => selectRun(button.dataset.openFindingRun));
} }
for (const button of refs.findingsList.querySelectorAll("[data-finding-filter]")) { for (const button of container.querySelectorAll("[data-finding-filter]")) {
button.addEventListener("click", () => applyFindingFilter(button.dataset.findingFilter, button.dataset.filterValue || "")); button.addEventListener("click", () => applyFindingFilter(button.dataset.findingFilter, button.dataset.filterValue || ""));
} }
} }
@@ -423,28 +558,6 @@ function findingVisibleLimit(severity) {
return responsiveLimit(key === "red" || key === "critical" || key === "error" ? dashboardLimits.findingsRed : dashboardLimits.findingsOther); return responsiveLimit(key === "red" || key === "critical" || key === "error" ? dashboardLimits.findingsRed : dashboardLimits.findingsOther);
} }
function renderFindingItem(item) {
const code = item.code || item.findingId || "finding";
const latestRunId = item.latestRunId || "-";
const hasLatestRun = latestRunId !== "-";
const codeLabel = displayFindingCode(code);
return `<article class="finding-item" data-finding-run-id="${escapeAttr(latestRunId)}">
<div class="finding-row">
<span class="finding-title">${escapeHtml(codeLabel)}${codeLabel === code ? "" : ` <small class="mono">${escapeHtml(code)}</small>`}</span>
<span class="severity-pill ${severityClass(item.severity)}">${escapeHtml(displaySeverity(item.severity))}</span>
</div>
<div class="finding-summary">${escapeHtml(shortText(displayFindingSummary(code, item.summary || ""), 180))}</div>
<div class="finding-actions" aria-label="发现项过滤">
<button type="button" class="filter-chip" data-finding-filter="code" data-filter-value="${escapeAttr(code)}">${escapeHtml(code)}</button>
<button type="button" class="filter-chip" data-finding-filter="scenario" data-filter-value="${escapeAttr(item.scenarioId || "")}">${escapeHtml(item.scenarioId || "-")}</button>
</div>
<div class="finding-meta">次数=${escapeHtml(String(item.count ?? 0))} · 运行=${escapeHtml(String(item.runCount ?? 0))} · 最近=${escapeHtml(item.latestAt ? formatRelative(item.latestAt) : "-")}</div>
<div class="finding-meta mono">run=${escapeHtml(latestRunId)} report=${escapeHtml(item.latestReportJsonSha256 || "-")}</div>
<div class="finding-meta">${escapeHtml(findingNextAction(code))}</div>
<button type="button" class="link-button" data-open-finding-run="${escapeAttr(latestRunId)}"${hasLatestRun ? "" : " disabled"}>打开最近运行</button>
</article>`;
}
function groupedFindingsBySeverity(findings) { function groupedFindingsBySeverity(findings) {
const severityOrder = ["red", "critical", "error", "warning", "amber", "info", "unknown"]; const severityOrder = ["red", "critical", "error", "warning", "amber", "info", "unknown"];
const groups = new Map(); const groups = new Map();
@@ -482,7 +595,7 @@ function renderFindingAggregation() {
`<div class="aggregation-group"><span>窗口</span><button type="button" class="filter-chip active">${escapeHtml(state.findingFilters.window || "全部")}</button></div>`, `<div class="aggregation-group"><span>窗口</span><button type="button" class="filter-chip active">${escapeHtml(state.findingFilters.window || "全部")}</button></div>`,
].join(""); ].join("");
for (const button of refs.findingAggregation.querySelectorAll("[data-finding-filter]")) { for (const button of refs.findingAggregation.querySelectorAll("[data-finding-filter]")) {
button.addEventListener("click", () => applyFindingFilter(button.dataset.findingFilter, button.dataset.filterValue || "")); button.addEventListener("click", () => openFindingsDrilldown(button.dataset.findingFilter, button.dataset.filterValue || ""));
} }
} }
@@ -504,22 +617,45 @@ function aggregateFindings(keyFn) {
.sort((a, b) => b.count - a.count || a.key.localeCompare(b.key)); .sort((a, b) => b.count - a.count || a.key.localeCompare(b.key));
} }
function openFindingsDrilldown(filterKey, filterValue) {
if (!filterValue || filterValue === "-") return;
state.findingDrilldownKey = `${filterKey}:${filterValue}`;
syncLocationQuery();
renderFindings();
}
function applyFindingFilter(key, value) { function applyFindingFilter(key, value) {
if (!value || value === "-") return; if (!value || value === "-") return;
if (key === "severity") state.findingFilters.severity = value; if (key === "severity") state.findingFilters.severity = value;
if (key === "code") state.findingFilters.code = value; if (key === "code") state.findingFilters.code = value;
if (key === "scenario") state.findingFilters.scenario = value; if (key === "scenario") state.findingFilters.scenario = value;
writeFindingFiltersToControls(); writeFindingFiltersToControls();
updateFindingsFilterSummary();
syncLocationQuery(); syncLocationQuery();
loadDashboard({ silent: false }); loadDashboard({ silent: false });
} }
function selectTab(tab) {
if (!DETAIL_TABS.includes(tab)) return;
state.selectedTab = tab;
for (const button of refs.detailTabs.querySelectorAll("[data-detail-tab]")) {
button.classList.toggle("active", button.dataset.detailTab === tab);
}
syncLocationQuery();
renderDetail();
}
function renderDetail() { function renderDetail() {
if (!state.selectedRunId || !state.runDetail) { if (!state.selectedRunId || !state.runDetail) {
refs.detailSubtitle.textContent = "未选择运行"; refs.detailSubtitle.textContent = "未选择运行";
refs.detailTabs.hidden = true;
refs.detailContent.innerHTML = '<div class="empty-state">请选择一条运行</div>'; refs.detailContent.innerHTML = '<div class="empty-state">请选择一条运行</div>';
return; return;
} }
const tab = state.selectedTab || "overview";
for (const button of refs.detailTabs.querySelectorAll("[data-detail-tab]")) {
button.classList.toggle("active", button.dataset.detailTab === tab);
}
const detail = state.runDetail; const detail = state.runDetail;
const run = detail.run || {}; const run = detail.run || {};
const findings = Array.isArray(detail.findings) ? detail.findings : []; const findings = Array.isArray(detail.findings) ? detail.findings : [];
@@ -527,7 +663,34 @@ function renderDetail() {
const commands = detail.commands || {}; const commands = detail.commands || {};
const turnSummaryView = selectedView(state.runViews, "turn-summary"); const turnSummaryView = selectedView(state.runViews, "turn-summary");
refs.detailSubtitle.textContent = run.runId || state.selectedRunId; refs.detailSubtitle.textContent = run.runId || state.selectedRunId;
refs.detailContent.innerHTML = [ refs.detailContent.innerHTML = renderDetailTab(tab, detail, run, findings, artifacts, commands, turnSummaryView);
bindDetailControls();
}
function renderDetailTab(tab, detail, run, findings, artifacts, commands, turnSummaryView) {
if (tab === "findings") {
return detailFindings(findings);
}
if (tab === "turn") {
return detailTurnSummary(turnSummaryView);
}
if (tab === "trace") {
return detailTraceReader(state.runViews, commands);
}
if (tab === "evidence") {
return [
detailArtifacts(artifacts),
detailCommands(commands),
detailEvidence(detail, artifacts),
detailBlock("脱敏", [
["values", detail.valuesRedacted === true ? "已脱敏" : "-"],
["prompt", detail.redaction?.prompt || "-"],
["assistant", detail.redaction?.assistantFinal || "-"],
]),
].join("");
}
// overview
return [
detailBlock("追溯信息", [ detailBlock("追溯信息", [
["run", run.runId || "-"], ["run", run.runId || "-"],
["observer", run.observerId || "-"], ["observer", run.observerId || "-"],
@@ -542,44 +705,29 @@ function renderDetail() {
["updated", run.updatedAt || "-"], ["updated", run.updatedAt || "-"],
["views", Array.isArray(detail.viewsAvailable) ? detail.viewsAvailable.join(", ") : "-"], ["views", Array.isArray(detail.viewsAvailable) ? detail.viewsAvailable.join(", ") : "-"],
]), ]),
detailBlock("报告摘要", safeSummaryRows(detail.summary), "detail-block-wide"), detailBlock("报告摘要", safeSummaryRows(detail.summary)),
detailFindings(findings),
detailArtifacts(artifacts),
detailCommands(commands),
detailTurnSummary(turnSummaryView),
detailTraceReader(state.runViews, commands),
detailEvidence(detail, artifacts),
detailBlock("脱敏", [
["values", detail.valuesRedacted === true ? "已脱敏" : "-"],
["prompt", detail.redaction?.prompt || "-"],
["assistant", detail.redaction?.assistantFinal || "-"],
]),
].join(""); ].join("");
bindDetailControls();
} }
function detailBlock(title, rows, className = "") { function detailBlock(title, rows, extraClass) {
const visibleRows = rows.length > 0 ? rows : [["-", "-"]]; const body = rows.map(([key, value]) => `<div><span>${escapeHtml(key)}</span><code>${escapeHtml(String(value ?? "-"))}</code></div>`).join("");
return `<article class="detail-block ${escapeAttr(className)}"><strong>${escapeHtml(title)}</strong><div class="detail-grid">${ return `<article class="detail-block${extraClass ? ` ${extraClass}` : ""}"><strong>${escapeHtml(title)}</strong><div class="detail-grid">${body}</div></article>`;
visibleRows.map(([key, value]) => `<div><span>${escapeHtml(key)}:</span> <span class="mono">${escapeHtml(shortText(value, 180))}</span></div>`).join("")
}</div></article>`;
} }
function detailFindings(findings) { function detailFindings(findings) {
if (findings.length === 0) return detailBlock("运行发现项", [["status", "无"]], "detail-block-wide"); if (!Array.isArray(findings) || findings.length === 0) {
return `<article class="detail-block detail-block-wide"><strong>运行发现项</strong> return '<article class="detail-block"><strong>运行发现项</strong><div class="empty-state compact">暂无发现项</div></article>';
<div class="detail-table-frame"> }
<table class="detail-table"> return `<article class="detail-block"><strong>运行发现项 · ${formatNumber(findings.length)} 条</strong>
<thead><tr><th>严重级别</th><th>代码</th><th>次数</th><th>摘要</th><th>报告</th></tr></thead> <div class="detail-table-frame"><table class="detail-table"><thead><tr>
<tbody>${findings.map((item) => `<tr> <th>严重级别</th><th>代码</th><th>次数</th><th>摘要</th><th>报告</th>
<td><span class="severity-pill ${severityClass(item.severity)}">${escapeHtml(displaySeverity(item.severity))}</span></td> </tr></thead><tbody>${findings.map((item) => `<tr>
<td class="mono">${escapeHtml(item.finding_id || item.findingId || "-")}</td> <td><span class="severity-pill ${severityClass(item.severity)}">${escapeHtml(displaySeverity(item.severity))}</span></td>
<td>${escapeHtml(String(item.count ?? 0))}</td> <td class="mono">${escapeHtml(item.finding_id || item.findingId || "-")}</td>
<td>${escapeHtml(shortText(displayFindingSummary(item.finding_id || item.findingId || "", item.summary || ""), 220))}</td> <td>${escapeHtml(String(item.count ?? 0))}</td>
<td class="mono">${escapeHtml(shortText(item.report_json_sha256 || item.reportJsonSha256 || "-", 24))}</td> <td>${escapeHtml(shortText(displayFindingSummary(item.finding_id || item.findingId || "", item.summary || ""), 220))}</td>
</tr>`).join("")}</tbody> <td class="mono">${escapeHtml(shortText(item.report_json_sha256 || item.reportJsonSha256 || "-", 24))}</td>
</table> </tr>`).join("")}</tbody></table></div>
</div>
</article>`; </article>`;
} }
@@ -591,7 +739,7 @@ function detailArtifacts(artifacts) {
["screenshotPath", screenshot.path || "-"], ["screenshotPath", screenshot.path || "-"],
["screenshotSha256", screenshot.sha256 || "-"], ["screenshotSha256", screenshot.sha256 || "-"],
["publicOrigin", artifacts.publicOrigin || "-"], ["publicOrigin", artifacts.publicOrigin || "-"],
], "detail-block-wide"); ]);
} }
function detailCommands(commands) { function detailCommands(commands) {
@@ -600,17 +748,22 @@ function detailCommands(commands) {
["turn-summary", commands.turnSummary || "-"], ["turn-summary", commands.turnSummary || "-"],
["trace-frame", commands.traceFrame || "-"], ["trace-frame", commands.traceFrame || "-"],
]; ];
return `<article class="detail-block detail-block-wide"><strong>CLI 对照命令</strong> // D4: CLI 命令改可复制按钮
<div class="command-list">${rows.map(([label, command]) => `<div><span>${escapeHtml(label)}</span><code>${escapeHtml(command)}</code></div>`).join("")}</div> return `<article class="detail-block"><strong>CLI 对照命令</strong>
<div class="command-list">${rows.map(([label, command]) => `<div class="command-row">
<span class="command-label">${escapeHtml(label)}</span>
<code class="command-code">${escapeHtml(command)}</code>
<button type="button" class="copy-button" data-copy-command="${escapeAttr(command)}">复制</button>
</div>`).join("")}</div>
</article>`; </article>`;
} }
function detailTurnSummary(view) { function detailTurnSummary(view) {
if (!view) return detailBlock("多轮摘要 - 第一层", [["status", "未索引"]], "detail-block-wide"); if (!view) return detailBlock("多轮摘要 - 第一层", [["status", "未索引"]]);
if (view.ok === false) return detailBlock("多轮摘要 - 第一层", [["status", view.error || "不可用"]], "detail-block-wide"); if (view.ok === false) return detailBlock("多轮摘要 - 第一层", [["status", view.error || "不可用"]]);
const text = redactDisplayText(view.renderedText || ""); const text = redactDisplayText(view.renderedText || "");
const note = `${formatNumber(view.renderedTextBytes || text.length)} bytes${view.truncated ? " 已截断" : ""}`; const note = `${formatNumber(view.renderedTextBytes || text.length)} bytes${view.truncated ? " 已截断" : ""}`;
return `<article class="detail-block detail-block-wide"><strong>多轮摘要 - 第一层</strong> return `<article class="detail-block"><strong>多轮摘要 - 第一层</strong>
<div class="view-note">${escapeHtml(note)}</div> <div class="view-note">${escapeHtml(note)}</div>
<pre class="detail-pre">${escapeHtml(text || "-")}</pre> <pre class="detail-pre">${escapeHtml(text || "-")}</pre>
</article>`; </article>`;
@@ -626,7 +779,7 @@ function detailTraceReader(response, commands) {
const traceNote = traceView const traceNote = traceView
? `${formatNumber(traceView.renderedTextBytes || traceText.length)} bytes${traceView.truncated ? " 已截断" : ""}` ? `${formatNumber(traceView.renderedTextBytes || traceText.length)} bytes${traceView.truncated ? " 已截断" : ""}`
: "trace-frame 未索引"; : "trace-frame 未索引";
return `<article class="detail-block detail-block-wide trace-reader"><strong>Trace Frame - 第二层</strong> return `<article class="detail-block trace-reader"><strong>Trace Frame - 第二层</strong>
<div class="trace-reader-grid"> <div class="trace-reader-grid">
<section class="trace-turn-picker" aria-label="turn、trace、sample 选择"> <section class="trace-turn-picker" aria-label="turn、trace、sample 选择">
<div class="view-note">选择 turn / trace / sample</div> <div class="view-note">选择 turn / trace / sample</div>
@@ -692,7 +845,7 @@ function detailEvidence(detail, artifacts) {
["observerId", traceability.observerId || "-"], ["observerId", traceability.observerId || "-"],
["runId", traceability.runId || "-"], ["runId", traceability.runId || "-"],
["reportJsonSha256", traceability.reportJsonSha256 || artifacts.reportJsonSha256 || "-"], ["reportJsonSha256", traceability.reportJsonSha256 || artifacts.reportJsonSha256 || "-"],
], "detail-block-wide"); ]);
} }
function selectedView(response, viewName) { function selectedView(response, viewName) {
@@ -708,6 +861,38 @@ function bindDetailControls() {
renderDetail(); renderDetail();
}); });
} }
for (const button of refs.detailContent.querySelectorAll("[data-copy-command]")) {
button.addEventListener("click", () => copyCommand(button));
}
}
async function copyCommand(button) {
const command = button.dataset.copyCommand || "";
try {
await navigator.clipboard.writeText(command);
} catch {
// 降级：用临时 textarea
const textarea = document.createElement("textarea");
textarea.value = command;
textarea.style.position = "fixed";
textarea.style.opacity = "0";
document.body.appendChild(textarea);
textarea.select();
try { document.execCommand("copy"); } catch { /* ignore */ }
document.body.removeChild(textarea);
}
button.classList.add("copied");
button.textContent = "已复制";
showCopyToast();
window.setTimeout(() => {
button.classList.remove("copied");
button.textContent = "复制";
}, 1500);
}
function showCopyToast() {
refs.copyToast.hidden = false;
window.setTimeout(() => { refs.copyToast.hidden = true; }, 1200);
} }
function renderLoading(show) { function renderLoading(show) {
@@ -721,6 +906,110 @@ function renderCheckChip(element, label, ok, detail) {
element.className = `check-chip ${ok ? "check-ok" : "check-blocked"}`; element.className = `check-chip ${ok ? "check-ok" : "check-blocked"}`;
} }
function toggleChecks() {
state.checksExpanded = !state.checksExpanded;
refs.overviewChecks.classList.toggle("overview-checks-collapsed", !state.checksExpanded);
}
function toggleTimeline() {
state.timelineCollapsed = !state.timelineCollapsed;
const panel = refs.timeline.closest(".timeline-panel");
panel.classList.toggle("collapsed", state.timelineCollapsed);
refs.timelineToggle.textContent = state.timelineCollapsed ? "展开" : "折叠";
refs.timelineToggle.setAttribute("aria-expanded", String(!state.timelineCollapsed));
}
function toggleRunsFilter() {
state.runsFilterOpen = !state.runsFilterOpen;
refs.filterForm.hidden = !state.runsFilterOpen;
refs.runsFilterSummary.setAttribute("aria-expanded", String(state.runsFilterOpen));
updateRunsFilterSummary();
}
function toggleFindingsFilter() {
state.findingsFilterOpen = !state.findingsFilterOpen;
refs.findingsFilterForm.hidden = !state.findingsFilterOpen;
refs.findingsFilterSummary.setAttribute("aria-expanded", String(state.findingsFilterOpen));
updateFindingsFilterSummary();
}
function updateRunsFilterSummary() {
const f = state.filters;
const parts = [];
if (f.status) parts.push(`状态=${displayStatus(f.status)}`);
if (f.severity) parts.push(`严重=${displaySeverity(f.severity)}`);
if (f.window) parts.push(`时间=${f.window}`);
if (f.search) parts.push(`搜索="${shortText(f.search, 16)}"`);
if (f.sort && f.sort !== "updated") parts.push(`排序=${f.sort}`);
refs.runsFilterSummary.textContent = `筛选: ${parts.length ? parts.join(" · ") : "全部"}`;
}
function updateFindingsFilterSummary() {
const f = state.findingFilters;
const parts = [];
if (f.severity) parts.push(`严重=${displaySeverity(f.severity)}`);
parts.push(`窗口=${f.window || "全部"}`);
if (f.code) parts.push(`代码="${shortText(f.code, 16)}"`);
if (f.scenario) parts.push(`场景="${shortText(f.scenario, 16)}"`);
refs.findingsFilterSummary.textContent = `筛选: ${parts.join(" · ")}`;
}
function jumpToLatestRun() {
const latest = state.runs[0];
if (latest) selectRun(latest.runId || latest.id);
}
function toggleRedOnly() {
const active = refs.filterRed.classList.toggle("active");
if (active) {
state.filters.severity = "red";
} else {
state.filters.severity = "";
}
refs.filterSeverity.value = state.filters.severity;
updateRunsFilterSummary();
syncLocationQuery();
loadDashboard({ silent: false });
}
function handleKeyboardShortcut(event) {
if (event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement || event.target instanceof HTMLTextAreaElement) return;
if (event.metaKey || event.ctrlKey || event.altKey) return;
const key = event.key.toLowerCase();
if (key === "r") { event.preventDefault(); loadDashboard({ silent: false }); return; }
if (key === "/") { event.preventDefault(); state.runsFilterOpen = true; refs.filterForm.hidden = false; refs.runsFilterSummary.setAttribute("aria-expanded", "true"); refs.filterSearch.focus(); return; }
if (key === "j" || key === "k") { event.preventDefault(); navigateRun(key === "j" ? 1 : -1); return; }
if (key === "enter") {
event.preventDefault();
if (state.selectedRunId) { selectTab("overview"); return; }
const first = state.runs[0];
if (first) selectRun(first.runId || first.id);
return;
}
}
function navigateRun(direction) {
const ids = state.runs.map((run) => run.runId || run.id).filter(Boolean);
if (ids.length === 0) return;
const currentIndex = state.selectedRunId ? ids.indexOf(state.selectedRunId) : -1;
let nextIndex = currentIndex + direction;
if (nextIndex < 0) nextIndex = 0;
if (nextIndex >= ids.length) nextIndex = ids.length - 1;
const nextId = ids[nextIndex];
if (nextId && nextId !== state.selectedRunId) selectRun(nextId);
}
function updateViewportClass() {
const width = window.innerWidth;
const viewport = width >= 1024 ? "desktop" : width >= 981 ? "tablet" : "mobile";
root.dataset.viewport = viewport;
if (state.overview) {
renderTimeline();
renderRuns();
renderFindings();
}
}
function applyFilterControls() { function applyFilterControls() {
state.filters = { state.filters = {
status: refs.filterStatus.value, status: refs.filterStatus.value,
@@ -729,6 +1018,8 @@ function applyFilterControls() {
search: refs.filterSearch.value.trim(), search: refs.filterSearch.value.trim(),
sort: refs.filterSort.value || "updated", sort: refs.filterSort.value || "updated",
}; };
updateRunsFilterSummary();
refs.filterRed.classList.toggle("active", state.filters.severity === "red");
syncLocationQuery(); syncLocationQuery();
loadDashboard({ silent: false }); loadDashboard({ silent: false });
} }
@@ -740,6 +1031,7 @@ function applyFindingFilterControls() {
code: refs.findingFilterCode.value.trim(), code: refs.findingFilterCode.value.trim(),
scenario: refs.findingFilterScenario.value.trim(), scenario: refs.findingFilterScenario.value.trim(),
}; };
updateFindingsFilterSummary();
syncLocationQuery(); syncLocationQuery();
loadDashboard({ silent: false }); loadDashboard({ silent: false });
} }
@@ -750,11 +1042,12 @@ function writeFiltersToControls() {
refs.filterWindow.value = state.filters.window || ""; refs.filterWindow.value = state.filters.window || "";
refs.filterSearch.value = state.filters.search || ""; refs.filterSearch.value = state.filters.search || "";
refs.filterSort.value = state.filters.sort || "updated"; refs.filterSort.value = state.filters.sort || "updated";
refs.filterRed.classList.toggle("active", state.filters.severity === "red");
} }
function writeFindingFiltersToControls() { function writeFindingFiltersToControls() {
refs.findingFilterSeverity.value = state.findingFilters.severity || ""; refs.findingFilterSeverity.value = state.findingFilters.severity || "";
refs.findingFilterWindow.value = state.findingFilters.window || ""; refs.findingFilterWindow.value = state.findingFilters.window || "24h";
refs.findingFilterCode.value = state.findingFilters.code || ""; refs.findingFilterCode.value = state.findingFilters.code || "";
refs.findingFilterScenario.value = state.findingFilters.scenario || ""; refs.findingFilterScenario.value = state.findingFilters.scenario || "";
} }
@@ -780,6 +1073,11 @@ function readFindingFiltersFromLocation() {
}; };
} }
function readTabFromLocation() {
const tab = new URLSearchParams(window.location.search).get("tab");
return DETAIL_TABS.includes(tab) ? tab : "overview";
}
function syncLocationQuery() { function syncLocationQuery() {
const query = new URLSearchParams(); const query = new URLSearchParams();
for (const [key, value] of Object.entries(state.filters)) { for (const [key, value] of Object.entries(state.filters)) {
@@ -795,6 +1093,9 @@ function syncLocationQuery() {
if (value && !(key === "window" && value === "24h")) query.set(findingQueryKeys[key], value); if (value && !(key === "window" && value === "24h")) query.set(findingQueryKeys[key], value);
} }
if (state.selectedRunId) query.set("run", state.selectedRunId); if (state.selectedRunId) query.set("run", state.selectedRunId);
// C3: URL 支持 tab deep-link
if (state.selectedRunId && state.selectedTab && state.selectedTab !== "overview") query.set("tab", state.selectedTab);
if (state.findingDrilldownKey) query.set("finding", state.findingDrilldownKey);
const next = `${window.location.pathname}${query.toString() ? `?${query.toString()}` : ""}`; const next = `${window.location.pathname}${query.toString() ? `?${query.toString()}` : ""}`;
window.history.replaceState(null, "", next); window.history.replaceState(null, "", next);
} }
@@ -1003,9 +1304,9 @@ function formatRelative(iso) {
if (seconds < 5) return "刚刚"; if (seconds < 5) return "刚刚";
if (seconds < 60) return `${seconds} 秒前`; if (seconds < 60) return `${seconds} 秒前`;
const minutes = Math.floor(seconds / 60); const minutes = Math.floor(seconds / 60);
if (minutes < 60) return `${minutes} 分钟前`; if (minutes < 60) return `${minutes} 分前`;
const hours = Math.floor(minutes / 60); const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours} 小时前`; if (hours < 24) return `${hours} 时前`;
return `${Math.floor(hours / 24)} 天前`; return `${Math.floor(hours / 24)} 天前`;
} }
scripts/src/hwlab-node-web-sentinel-dashboard-assets.ts
+125 -128
View File
@@ -1,4 +1,4 @@
// SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-26-p8-web-probe-sentinel-recovery. // SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-26-p9-desktop-view-density.
// Responsibility: Static dashboard shell and asset serving for the web-probe sentinel frontend. // Responsibility: Static dashboard shell and asset serving for the web-probe sentinel frontend.
import { readFileSync } from "node:fs"; import { readFileSync } from "node:fs";
import { rootPath } from "./config"; import { rootPath } from "./config";
@@ -11,7 +11,7 @@ interface DashboardShellConfig {
} }
const DASHBOARD_ASSET_ROOT = "scripts/assets/web-probe-sentinel-dashboard"; const DASHBOARD_ASSET_ROOT = "scripts/assets/web-probe-sentinel-dashboard";
const DASHBOARD_CONTRACT_VERSION = "draft-2026-06-26-p8-web-probe-sentinel-recovery"; const DASHBOARD_CONTRACT_VERSION = "draft-2026-06-26-p9-desktop-view-density";
export function renderWebProbeSentinelDashboardHtml(config: DashboardShellConfig): string { export function renderWebProbeSentinelDashboardHtml(config: DashboardShellConfig): string {
const publicOrigin = stringOrNull(config.publicExposure.publicBaseUrl) ?? ""; const publicOrigin = stringOrNull(config.publicExposure.publicBaseUrl) ?? "";
@@ -32,126 +32,105 @@ export function renderWebProbeSentinelDashboardHtml(config: DashboardShellConfig
data-public-origin="${escapeAttr(publicOrigin)}" data-public-origin="${escapeAttr(publicOrigin)}"
data-config-ready="${config.plan.ok ? "true" : "false"}" data-config-ready="${config.plan.ok ? "true" : "false"}"
data-contract-version="${DASHBOARD_CONTRACT_VERSION}" data-contract-version="${DASHBOARD_CONTRACT_VERSION}"
data-viewport=""
> >
<section class="sentinel-topbar" aria-label="Web哨兵概览"> <section class="sentinel-topbar" aria-label="Web哨兵概览">
<div class="sentinel-title"> <div class="sentinel-title">
<div class="sentinel-mark" aria-hidden="true"></div> <div class="sentinel-mark" aria-hidden="true"></div>
<div> <div>
<h1>HWLAB Web哨兵</h1> <h1>HWLAB Web哨兵</h1>
<p id="sentinel-subtitle">${escapeHtml(config.node)} / ${escapeHtml(config.lane)}</p> <p id="sentinel-subtitle">${escapeHtml(config.node)} / ${escapeHtml(config.lane)}<span id="sentinel-origin-note"></span></p>
</div> </div>
</div> </div>
<div class="sentinel-toolbar" aria-label="监控面板控制"> <div class="sentinel-toolbar" aria-label="监控面板控制">
<span id="status-pill" class="status-pill status-idle">空闲</span> <span id="status-pill" class="status-pill status-idle">空闲</span>
<label class="refresh-toggle"> <label class="refresh-toggle">
<input id="auto-refresh-enabled" type="checkbox"> <input id="auto-refresh-enabled" type="checkbox">
<span>自动刷新</span> <span>自动</span>
</label> </label>
<select id="auto-refresh-interval" aria-label="自动刷新间隔"> <select id="auto-refresh-interval" aria-label="自动刷新间隔">
<option value="5">5s</option> <option value="5">5s</option>
<option value="10">10s</option> <option value="10">10s</option>
<option value="30">30s</option> <option value="30">30s</option>
</select> </select>
<button id="manual-refresh" class="icon-button" type="button" title="刷新" aria-label="刷新"> <button id="manual-refresh" class="icon-button" type="button" title="刷新 (r)" aria-label="刷新">刷新</button>
<span aria-hidden="true">刷新</span> <button id="latest-run" class="icon-button" type="button" title="跳转最新运行" aria-label="跳转最新">最新</button>
</button> <button id="filter-red" class="icon-button" type="button" title="只看红色发现" aria-label="只看红色">红</button>
</div> </div>
</section> </section>
<section id="loading-banner" class="banner banner-muted">加载中</section> <section id="status-summary" class="status-summary" aria-label="状态摘要条" hidden>
<span class="summary-item"><span class="summary-label">状态</span><strong id="summary-status">-</strong></span>
<span class="summary-item"><span class="summary-label">最近运行</span><strong id="summary-latest">-</strong><small id="summary-latest-age"></small></span>
<span class="summary-item"><span class="summary-label">发现</span><strong id="summary-findings">0</strong><small id="summary-findings-note"></small></span>
<span class="summary-item"><span class="summary-label">调度器</span><strong id="summary-scheduler">-</strong><small id="summary-budget"></small></span>
<span class="summary-item summary-checks" id="summary-checks" hidden></span>
</section>
<section id="loading-banner" class="banner banner-muted" hidden>加载中</section>
<section id="error-banner" class="banner banner-danger" hidden></section> <section id="error-banner" class="banner banner-danger" hidden></section>
<section class="metric-grid" aria-label="哨兵状态指标"> <section class="overview-checks overview-checks-collapsed" id="overview-checks" aria-label="哨兵健康检查" hidden>
<article class="metric-card"> <button type="button" class="check-summary-pill" id="check-summary-pill">检查 -</button>
<span class="metric-label">当前状态</span> <div class="overview-checks-detail" id="overview-checks-detail">
<strong id="metric-overall">-</strong> <span id="check-config" class="check-chip">config -</span>
<small id="metric-origin">-</small> <span id="check-pvc" class="check-chip">pvc -</span>
</article> <span id="check-analyzer" class="check-chip">analyzer -</span>
<article class="metric-card"> <span id="check-public" class="check-chip">public -</span>
<span class="metric-label">最近运行</span> <span id="check-maintenance" class="check-chip">maintenance -</span>
<strong id="metric-latest-run">-</strong>
<small id="metric-latest-age">-</small>
</article>
<article class="metric-card">
<span class="metric-label">历史发现项</span>
<strong id="metric-findings">0</strong>
<small id="metric-findings-note">-</small>
</article>
<article class="metric-card">
<span class="metric-label">调度器</span>
<strong id="metric-scheduler">-</strong>
<small id="metric-budget">-</small>
</article>
</section>
<section class="overview-checks" aria-label="哨兵健康检查">
<span id="check-config" class="check-chip">config -</span>
<span id="check-pvc" class="check-chip">pvc -</span>
<span id="check-analyzer" class="check-chip">analyzer -</span>
<span id="check-public" class="check-chip">public -</span>
<span id="check-maintenance" class="check-chip">maintenance -</span>
</section>
<section class="panel timeline-panel" aria-labelledby="timeline-heading">
<div class="panel-header">
<h2 id="timeline-heading">运行时间线</h2>
<span id="timeline-count" class="panel-subtitle">-</span>
</div> </div>
<div id="run-timeline" class="run-timeline"></div>
</section> </section>
<section class="dashboard-grid"> <section class="dashboard-grid">
<section class="panel panel-wide" aria-labelledby="runs-heading"> <section class="panel panel-runs" aria-labelledby="runs-heading">
<div class="panel-header"> <div class="panel-header">
<h2 id="runs-heading">运行历史</h2> <h2 id="runs-heading">运行历史</h2>
<span id="runs-count" class="panel-subtitle">-</span> <span id="runs-count" class="panel-subtitle">-</span>
</div> </div>
<form id="runs-filter" class="runs-filter"> <div class="filter-collapse">
<label> <button type="button" class="filter-summary" id="runs-filter-summary" aria-expanded="false">筛选: 全部</button>
<span>状态</span> <form id="runs-filter" class="runs-filter" hidden>
<select id="filter-status" name="status"> <label><span>状态</span>
<option value="">全部</option> <select id="filter-status" name="status">
<option value="planned">已计划</option> <option value="">全部</option>
<option value="running">运行中</option> <option value="planned">已计划</option>
<option value="analyzed">已分析</option> <option value="running">运行中</option>
<option value="blocked">阻塞</option> <option value="analyzed">已分析</option>
<option value="interrupted">已中断</option> <option value="blocked">阻塞</option>
</select> <option value="interrupted">已中断</option>
</label> </select>
<label> </label>
<span>严重级别</span> <label><span>严重级别</span>
<select id="filter-severity" name="severity"> <select id="filter-severity" name="severity">
<option value="">全部</option> <option value="">全部</option>
<option value="red">红色</option> <option value="red">红色</option>
<option value="warning">警告</option> <option value="warning">警告</option>
<option value="info">信息</option> <option value="info">信息</option>
</select> </select>
</label> </label>
<label> <label><span>时间</span>
<span>时间</span> <select id="filter-window" name="window">
<select id="filter-window" name="window"> <option value="">全部</option>
<option value="">全部</option> <option value="1h">1h</option>
<option value="1h">1h</option> <option value="6h">6h</option>
<option value="6h">6h</option> <option value="24h">24h</option>
<option value="24h">24h</option> <option value="7d">7d</option>
<option value="7d">7d</option> </select>
</select> </label>
</label> <label><span>排序</span>
<label> <select id="filter-sort" name="sort">
<span>排序</span> <option value="updated">按更新时间</option>
<select id="filter-sort" name="sort"> <option value="created">按创建时间</option>
<option value="updated">按更新时间</option> <option value="findings">按发现数量</option>
<option value="created">按创建时间</option> <option value="severity">按严重级别</option>
<option value="findings">按发现数量</option> </select>
<option value="severity">按严重级别</option> </label>
</select> <label class="filter-search"><span>搜索</span>
</label> <input id="filter-search" name="search" type="search" placeholder="run、observer、report">
<label class="filter-search"> </label>
<span>搜索</span> <button id="clear-filters" class="icon-button" type="button">清除</button>
<input id="filter-search" name="search" type="search" placeholder="run、observer、report"> </form>
</label> </div>
<button id="clear-filters" class="icon-button" type="button">清除</button>
</form>
<div class="table-frame"> <div class="table-frame">
<table class="runs-table"> <table class="runs-table">
<thead> <thead>
@@ -159,8 +138,8 @@ export function renderWebProbeSentinelDashboardHtml(config: DashboardShellConfig
<th>运行</th> <th>运行</th>
<th>状态</th> <th>状态</th>
<th>场景</th> <th>场景</th>
<th>发现项</th> <th>发现</th>
<th>更新时间</th> <th>更新</th>
</tr> </tr>
</thead> </thead>
<tbody id="runs-body"></tbody> <tbody id="runs-body"></tbody>
@@ -168,53 +147,71 @@ export function renderWebProbeSentinelDashboardHtml(config: DashboardShellConfig
</div> </div>
</section> </section>
<section class="panel" aria-labelledby="findings-heading"> <section class="panel panel-detail" aria-labelledby="detail-heading">
<div class="panel-header">
<h2 id="detail-heading">运行详情</h2>
<span id="detail-subtitle" class="panel-subtitle">未选择运行</span>
</div>
<nav class="detail-tabs" id="detail-tabs" aria-label="详情分页" hidden>
<button type="button" class="detail-tab active" data-detail-tab="overview">概要</button>
<button type="button" class="detail-tab" data-detail-tab="findings">发现项</button>
<button type="button" class="detail-tab" data-detail-tab="turn">多轮摘要</button>
<button type="button" class="detail-tab" data-detail-tab="trace">Trace</button>
<button type="button" class="detail-tab" data-detail-tab="evidence">证据与命令</button>
</nav>
<div id="detail-content" class="detail-content"></div>
</section>
<section class="panel panel-findings" aria-labelledby="findings-heading">
<div class="panel-header"> <div class="panel-header">
<h2 id="findings-heading">发现分析</h2> <h2 id="findings-heading">发现分析</h2>
<span id="findings-count" class="panel-subtitle">-</span> <span id="findings-count" class="panel-subtitle">-</span>
</div> </div>
<form id="findings-filter" class="findings-filter"> <div class="filter-collapse">
<label> <button type="button" class="filter-summary" id="findings-filter-summary" aria-expanded="false">筛选: 全部</button>
<span>严重级别</span> <form id="findings-filter" class="findings-filter" hidden>
<select id="finding-filter-severity" name="fseverity"> <label><span>严重级别</span>
<option value="">全部</option> <select id="finding-filter-severity" name="fseverity">
<option value="red">红色</option> <option value="">全部</option>
<option value="warning">警告</option> <option value="red">红色</option>
<option value="info">信息</option> <option value="warning">警告</option>
</select> <option value="info">信息</option>
</label> </select>
<label> </label>
<span>窗口</span> <label><span>窗口</span>
<select id="finding-filter-window" name="fwindow"> <select id="finding-filter-window" name="fwindow">
<option value="24h">24h</option> <option value="24h">24h</option>
<option value="1h">1h</option> <option value="1h">1h</option>
<option value="6h">6h</option> <option value="6h">6h</option>
<option value="7d">7d</option> <option value="7d">7d</option>
<option value="">全部</option> <option value="">全部</option>
</select> </select>
</label> </label>
<label> <label><span>代码</span>
<span>代码</span> <input id="finding-filter-code" name="fcode" type="search" placeholder="finding code">
<input id="finding-filter-code" name="fcode" type="search" placeholder="finding code"> </label>
</label> <label><span>场景</span>
<label> <input id="finding-filter-scenario" name="fscenario" type="search" placeholder="scenario">
<span>场景</span> </label>
<input id="finding-filter-scenario" name="fscenario" type="search" placeholder="scenario"> <button id="finding-clear-filters" class="icon-button" type="button">清除</button>
</label> </form>
<button id="finding-clear-filters" class="icon-button" type="button">清除</button> </div>
</form>
<div id="finding-aggregation" class="finding-aggregation"></div> <div id="finding-aggregation" class="finding-aggregation"></div>
<div id="findings-list" class="finding-list"></div> <div id="findings-list" class="finding-list"></div>
<div id="findings-drilldown" class="findings-drilldown" hidden></div>
</section> </section>
</section> </section>
<section class="panel detail-panel" aria-labelledby="detail-heading" role="dialog" aria-modal="false"> <section class="panel timeline-panel" aria-labelledby="timeline-heading">
<div class="panel-header"> <div class="panel-header">
<h2 id="detail-heading">运行详情</h2> <h2 id="timeline-heading">运行时间线</h2>
<span id="detail-subtitle" class="panel-subtitle">未选择运行</span> <span id="timeline-count" class="panel-subtitle">-</span>
<button type="button" class="timeline-toggle" id="timeline-toggle" aria-expanded="true">折叠</button>
</div> </div>
<div id="detail-content" class="detail-content"></div> <div id="run-timeline" class="run-timeline"></div>
</section> </section>
<div id="copy-toast" class="copy-toast" hidden>已复制</div>
</main> </main>
<script type="module" src="/dashboard/assets/dashboard.js"></script> <script type="module" src="/dashboard/assets/dashboard.js"></script>
</body> </body>
scripts/src/hwlab-node-web-sentinel-service.ts
+2 -2
View File
@@ -1,6 +1,6 @@
// SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-25-p0-web-probe-sentinel. // SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-25-p0-web-probe-sentinel.
// SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-26-p7-web-probe-sentinel-dashboard. // SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-26-p7-web-probe-sentinel-dashboard.
// SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-26-p8-web-probe-sentinel-recovery. // SPEC: PJ2026-01060508 Web哨兵 draft-2026-06-26-p9-desktop-view-density.
// Responsibility: Persistent HTTP wrapper service for web-probe observe scheduling, index, health, metrics, maintenance, and dashboard. // Responsibility: Persistent HTTP wrapper service for web-probe observe scheduling, index, health, metrics, maintenance, and dashboard.
import { Buffer } from "node:buffer"; import { Buffer } from "node:buffer";
import { createHash, randomUUID } from "node:crypto"; import { createHash, randomUUID } from "node:crypto";
@@ -12,7 +12,7 @@ import { renderWebProbeSentinelDashboardHtml, webProbeSentinelDashboardAssetResp
import { webProbeSentinelConfigPlan, type WebProbeSentinelConfigPlan } from "./hwlab-node-web-sentinel-config"; import { webProbeSentinelConfigPlan, type WebProbeSentinelConfigPlan } from "./hwlab-node-web-sentinel-config";
import type { HwlabRuntimeLaneSpec } from "./hwlab-node-lanes"; import type { HwlabRuntimeLaneSpec } from "./hwlab-node-lanes";
const DASHBOARD_CONTRACT_VERSION = "draft-2026-06-26-p8-web-probe-sentinel-recovery"; const DASHBOARD_CONTRACT_VERSION = "draft-2026-06-26-p9-desktop-view-density";
const DASHBOARD_MAX_TEXT_BYTES = 16_000; const DASHBOARD_MAX_TEXT_BYTES = 16_000;
export interface WebProbeSentinelServiceConfig { export interface WebProbeSentinelServiceConfig {