mirror of
https://github.com/hansjone/netx.git
synced 2026-10-15 00:53:17 +08:00
Fix business compare history, search, sampling and exports
This commit is contained in:
parent
afa8e06b2d
commit
4d5101ec3a
19 changed files with 1598 additions and 274 deletions
|
|
@ -474,6 +474,10 @@ const en = {
|
|||
sideAfter: "After",
|
||||
sidesVs: "vs",
|
||||
sidesTitle: "Compare sides",
|
||||
configSnapshot: "Execution settings saved",
|
||||
configSnapshotHint: "Template rules and port mapping are fixed for this run. Later edits do not affect historical lookup. The downloaded report includes the execution settings.",
|
||||
configLegacy: "Legacy run: settings not saved",
|
||||
configLegacyHint: "This run has no configuration snapshot. Success lookup and compact row reconstruction use the current settings, which may differ from the original execution.",
|
||||
pick: "Select…",
|
||||
sameAsBefore: "Same as before / select…",
|
||||
autoHint: "auto: new after-task batches trigger compare",
|
||||
|
|
@ -532,8 +536,14 @@ const en = {
|
|||
ranWithDuration: "Compare finished ({{s}}s)",
|
||||
unchangedNotStored: "Success rows were counted but not stored. Set “Store success rows” to sample and re-run for spot-check.",
|
||||
unchangedSampleHint: "{{total}} success rows total; browsing a stratified sample of {{listed}}. Search any route for live source lookup. Pass rate uses all {{total}}.",
|
||||
liveSearchHint: "Field filters look up source batches live; tabs only filter kind. E.g. direction=out, network=1.1.1.1.",
|
||||
liveSearchTruncatedHint: "Search results truncated — narrow the field filters.",
|
||||
liveSearchHint: "Pairs are completed from source batches before filtering. Pass rate still uses the full sheet.",
|
||||
liveSearchTruncatedHint: "Search limit reached; some entries are omitted. Narrow the filters. Incomplete key groups were skipped.",
|
||||
clearSearch: "Clear filters",
|
||||
resultLoading: "Loading comparison details…",
|
||||
resultRange: "{{from}}–{{to}} of {{total}}",
|
||||
resultLoadFailed: "Could not load comparison details",
|
||||
retry: "Retry",
|
||||
searchEmpty: "No results match these filters. Clear filters or select another result type.",
|
||||
clearKeyFilters: "Clear fields",
|
||||
storeUnchanged: "Store success rows",
|
||||
storeUnchangedAuto: "Auto (full if small / sample 5k + hydrate if large)",
|
||||
|
|
@ -567,8 +577,6 @@ const en = {
|
|||
pickBatchRun: "Select compare run",
|
||||
pickRun: "Select run…",
|
||||
runCount: "{{n}} runs",
|
||||
resultEmpty: "No matching diff rows",
|
||||
resultFilterPh: "Free text, or direction:out network:1.1.1.1",
|
||||
kindAll: "All",
|
||||
kindDiff: "Fail",
|
||||
kindAdded: "Added",
|
||||
|
|
@ -712,7 +720,6 @@ const en = {
|
|||
newBaseline: "New baseline batch",
|
||||
needProjectFields: "Enter a name and pick old/new portrait tasks",
|
||||
needExpectPorts: "Select at least one expected object for this batch",
|
||||
needBaselineFirst: "Save an old baseline batch first to list expect objects",
|
||||
needBothBaselines: "Save both old and new baseline batches before evaluating",
|
||||
errOldBaselineRequired: "Old baseline batch is required",
|
||||
errNewBaselineRequired: "New baseline batch is required",
|
||||
|
|
|
|||
|
|
@ -473,6 +473,10 @@ const zh = {
|
|||
sideAfter: "操作后",
|
||||
sidesVs: "比对",
|
||||
sidesTitle: "比对双方",
|
||||
configSnapshot: "执行配置已保存",
|
||||
configSnapshotHint: "此记录的模板规则和端口映射已固定;后续编辑不影响历史回查,下载报告包含执行配置。",
|
||||
configLegacy: "旧记录:未保存执行配置",
|
||||
configLegacyHint: "此记录创建时未保存配置快照;成功行回查和精简明细还原使用当前配置,修改配置后可能与当时结果不同。",
|
||||
pick: "选择…",
|
||||
sameAsBefore: "同操作前 / 选择…",
|
||||
autoHint: "auto:操作后任务新批次到达会自动跑比对",
|
||||
|
|
@ -531,8 +535,14 @@ const zh = {
|
|||
ranWithDuration: "比对完成(耗时 {{s}} 秒)",
|
||||
unchangedNotStored: "成功行仅统计数量未落库。可在任务配置将「成功行保存」改为抽样后重新比对(抽查用)。",
|
||||
unchangedSampleHint: "成功共 {{total}} 条,明细抽样 {{listed}} 条(分层抽查)。要查任意路由请输入筛选条件——将按原表即时判定。通过率按全部 {{total}} 计。",
|
||||
liveSearchHint: "按字段回查原表即时判定;页签只过滤种类。例:direction=out,network=1.1.1.1。",
|
||||
liveSearchTruncatedHint: "搜索结果已截断,请再收窄字段条件。",
|
||||
liveSearchHint: "从原始批次补齐同一业务的前后数据后筛选;通过率仍按全表统计。",
|
||||
liveSearchTruncatedHint: "搜索已达上限,部分业务未展示。请收窄条件;不完整的业务分组已跳过。",
|
||||
clearSearch: "清空筛选",
|
||||
resultLoading: "正在加载对比明细…",
|
||||
resultRange: "{{from}}–{{to}} / {{total}} 条",
|
||||
resultLoadFailed: "对比明细加载失败",
|
||||
retry: "重试",
|
||||
searchEmpty: "当前筛选条件下没有匹配结果,可清空筛选或切换结果类型。",
|
||||
clearKeyFilters: "清空字段",
|
||||
storeUnchanged: "成功行保存",
|
||||
storeUnchangedAuto: "自动(小表全量 / 大表抽样 5000+原表补全)",
|
||||
|
|
@ -778,7 +788,6 @@ const zh = {
|
|||
metaBaseline: "基线",
|
||||
baselineOk: "已设",
|
||||
baselineMissing: "缺",
|
||||
needBaselineFirst: "先设基线",
|
||||
enableHighfreq: "开启高频",
|
||||
highfreqReady: "高频已就绪",
|
||||
collectNow: "立即采集",
|
||||
|
|
@ -830,10 +839,6 @@ const zh = {
|
|||
currentMissingBanner: "缺当前批次:{{metrics}}",
|
||||
highfreqReadyInactive: "高频已绑定(窗口未开,未立即采集)",
|
||||
collectPartial: "部分失败(成功 {{ok}} / 失败 {{fail}})",
|
||||
confirmProjectDone: "确认完成项目并暂停全部高频?",
|
||||
projectMarkedDone: "已完成,高频已停",
|
||||
confirmDeleteProject: "确认删除项目?将停高频并清批次记录。",
|
||||
projectDeleted: "已删除",
|
||||
errMetricNeedsBindings: "监控项「{{metric}}」需要参数绑定({{params}}),割接高频暂不支持,请去掉该项",
|
||||
errNoProfileForMetric: "监控项「{{metric}}」在当前设备厂商下无可用采集 profile",
|
||||
acceptTitle: "本批验收",
|
||||
|
|
|
|||
|
|
@ -11931,6 +11931,22 @@ body:has(.bs-cmp-board:fullscreen) {
|
|||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.bs-cmp-board__config {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
padding: 4px 7px;
|
||||
border: 1px solid var(--bs-cmp-border, rgba(148, 163, 184, 0.22));
|
||||
border-radius: 6px;
|
||||
color: var(--nm-muted, #94a3b8);
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.bs-cmp-board__config.is-legacy {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.bs-cmp-board__actions {
|
||||
margin-left: auto;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -12497,7 +12513,7 @@ body:has(.bs-cmp-board:fullscreen) {
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex: 1 1 280px;
|
||||
flex: 1 1 100%;
|
||||
min-width: 0;
|
||||
padding: 2px;
|
||||
border-radius: 8px;
|
||||
|
|
@ -12615,13 +12631,13 @@ body:has(.bs-cmp-board:fullscreen) {
|
|||
|
||||
.bs-cmp-filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
flex: 1 1 200px;
|
||||
min-width: 160px;
|
||||
max-width: 320px;
|
||||
margin-left: auto;
|
||||
flex: 1 1 100%;
|
||||
min-width: 0;
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
|
|
@ -12630,6 +12646,8 @@ body:has(.bs-cmp-board:fullscreen) {
|
|||
.bs-cmp-filter-bar input {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
flex: 1 1 220px;
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
.bs-cmp-filter-bar .bs-sheet-count {
|
||||
|
|
@ -12717,11 +12735,57 @@ body:has(.bs-cmp-board:fullscreen) {
|
|||
}
|
||||
|
||||
.bs-cmp-result-table.is-loading {
|
||||
opacity: 0.55;
|
||||
opacity: 1;
|
||||
/* Keep header/filters clickable; only mute row hit-testing via opacity cue */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.bs-cmp-result-state {
|
||||
min-height: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--bs-cmp-muted);
|
||||
}
|
||||
|
||||
.bs-cmp-result-state strong {
|
||||
color: var(--bs-cmp-ink);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bs-cmp-result-state.is-error strong {
|
||||
color: var(--danger, #fca5a5);
|
||||
}
|
||||
|
||||
.bs-cmp-strip__kind:focus-visible,
|
||||
.bs-cmp-strip__toggle:focus-visible,
|
||||
.bs-cmp-nav__item:focus-visible {
|
||||
outline: 2px solid var(--accent, #60a5fa);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.bs-cmp-strip__sheet {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bs-cmp-filter-bar input {
|
||||
flex-basis: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.bs-cmp-key-filter {
|
||||
flex: 1 1 120px;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bs-cmp-board.is-fullscreen .bs-cmp-result-table {
|
||||
max-height: none;
|
||||
min-height: 0;
|
||||
|
|
@ -12752,6 +12816,7 @@ body:has(.bs-cmp-board:fullscreen) {
|
|||
@media (max-width: 960px) {
|
||||
.bs-cmp-board__body {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.bs-cmp-board__body.is-nav-collapsed {
|
||||
|
|
@ -12760,6 +12825,7 @@ body:has(.bs-cmp-board:fullscreen) {
|
|||
|
||||
.bs-cmp-nav {
|
||||
max-height: 180px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.bs-cmp-nav.is-collapsed {
|
||||
|
|
@ -12769,6 +12835,8 @@ body:has(.bs-cmp-board:fullscreen) {
|
|||
.bs-cmp-nav__list {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
flex: 0 0 auto;
|
||||
align-items: flex-start;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
|
@ -12779,8 +12847,9 @@ body:has(.bs-cmp-board:fullscreen) {
|
|||
|
||||
.bs-cmp-nav__item {
|
||||
flex: 0 0 auto;
|
||||
min-width: 180px;
|
||||
grid-template-columns: 8px minmax(0, 1fr);
|
||||
width: auto;
|
||||
min-width: 240px;
|
||||
grid-template-columns: 8px minmax(0, 1fr) auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -845,7 +845,7 @@ function TplRowFiltersEditor({
|
|||
Array.isArray(filt.value) ? filt.value.join(",") : String(filt.value ?? "")
|
||||
}
|
||||
placeholder={t("bizCompare.filterValue")}
|
||||
isDisabled={["empty", "not_empty", "age_timer"].includes(filt.op || "")}
|
||||
disabled={["empty", "not_empty", "age_timer"].includes(filt.op || "")}
|
||||
onChange={(e) => {
|
||||
const next = groups.map((g) => g.map((x) => ({ ...x })));
|
||||
const op = next[gi][fi]?.op || "eq";
|
||||
|
|
@ -893,10 +893,6 @@ function TplRowFiltersEditor({
|
|||
);
|
||||
}
|
||||
|
||||
function metricLabel(id: string) {
|
||||
return id;
|
||||
}
|
||||
|
||||
export type BizComparePageMode = "jobs" | "templates" | "all";
|
||||
|
||||
export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePageMode }) {
|
||||
|
|
@ -988,6 +984,12 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
const [diffsLoading, setDiffsLoading] = useState(false);
|
||||
const [diffsSource, setDiffsSource] = useState<DiffListSource>("");
|
||||
const [diffsTruncated, setDiffsTruncated] = useState(false);
|
||||
const [diffsError, setDiffsError] = useState("");
|
||||
const [diffsRetry, setDiffsRetry] = useState(0);
|
||||
const jobRequestRef = useRef(0);
|
||||
const runRequestRef = useRef(0);
|
||||
const listsRequestRef = useRef(0);
|
||||
const diffFiltersRef = useRef("");
|
||||
const boardRef = useRef<HTMLDivElement | null>(null);
|
||||
const tableScrollRef = useRef<HTMLDivElement | null>(null);
|
||||
const tableScrollPosRef = useRef({ top: 0, left: 0 });
|
||||
|
|
@ -996,6 +998,7 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
const tplImportRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const refresh = useCallback(async (opts?: { force?: boolean }) => {
|
||||
const request = ++listsRequestRef.current;
|
||||
type Bundle = {
|
||||
taskRes: Awaited<ReturnType<typeof bizStateListTasks>>;
|
||||
tpl: Awaited<ReturnType<typeof bizCompareListTemplates>>;
|
||||
|
|
@ -1014,6 +1017,7 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
return { taskRes, tpl, maps, j, met };
|
||||
};
|
||||
const apply = (b: Bundle) => {
|
||||
if (request !== listsRequestRef.current) return;
|
||||
setTasks((b.taskRes.items || []) as TaskOpt[]);
|
||||
setTemplates((b.tpl.items || []) as Template[]);
|
||||
setMappings((b.maps.items || []) as Mapping[]);
|
||||
|
|
@ -1038,8 +1042,12 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [refresh]);
|
||||
|
||||
useEffect(() => () => { listsRequestRef.current += 1; }, []);
|
||||
|
||||
// Keep local tab + dismiss overlays when route mode flips (component may be reused).
|
||||
useEffect(() => {
|
||||
jobRequestRef.current += 1;
|
||||
runRequestRef.current += 1;
|
||||
if (pageMode === "templates") setPageTab("templates");
|
||||
else if (pageMode === "jobs") setPageTab("jobs");
|
||||
setTplOpen(false);
|
||||
|
|
@ -1053,39 +1061,55 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
void document.exitFullscreen().catch(() => undefined);
|
||||
}
|
||||
setBoardFs(false);
|
||||
return () => {
|
||||
jobRequestRef.current += 1;
|
||||
runRequestRef.current += 1;
|
||||
};
|
||||
}, [pageMode]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setBeforeBatches([]);
|
||||
void (async () => {
|
||||
if (!beforeTaskId) {
|
||||
setBeforeBatches([]);
|
||||
return;
|
||||
if (!beforeTaskId) return;
|
||||
try {
|
||||
const b = await cutoverCachedGet(`bizCompare:batches:${beforeTaskId}`,
|
||||
() => bizStateListBatches(beforeTaskId), { ttlMs: 5000 });
|
||||
if (!cancelled) setBeforeBatches((b.items || []) as BatchOpt[]);
|
||||
} catch (e) {
|
||||
if (!cancelled) showError(formatErr(e));
|
||||
}
|
||||
const b = await bizStateListBatches(beforeTaskId);
|
||||
setBeforeBatches((b.items || []) as BatchOpt[]);
|
||||
})();
|
||||
}, [beforeTaskId]);
|
||||
return () => { cancelled = true; };
|
||||
}, [beforeTaskId, showError]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setAfterBatches([]);
|
||||
void (async () => {
|
||||
if (!afterTaskId) {
|
||||
setAfterBatches([]);
|
||||
return;
|
||||
if (!afterTaskId) return;
|
||||
try {
|
||||
const b = await cutoverCachedGet(`bizCompare:batches:${afterTaskId}`,
|
||||
() => bizStateListBatches(afterTaskId), { ttlMs: 5000 });
|
||||
if (!cancelled) setAfterBatches((b.items || []) as BatchOpt[]);
|
||||
} catch (e) {
|
||||
if (!cancelled) showError(formatErr(e));
|
||||
}
|
||||
const b = await bizStateListBatches(afterTaskId);
|
||||
setAfterBatches((b.items || []) as BatchOpt[]);
|
||||
})();
|
||||
}, [afterTaskId]);
|
||||
return () => { cancelled = true; };
|
||||
}, [afterTaskId, showError]);
|
||||
|
||||
const templatesById = useMemo(() => new Map(templates.map((x) => [x.id, x])), [templates]);
|
||||
|
||||
const filteredJobs = useMemo(() => {
|
||||
const kw = debouncedListKw.trim().toLowerCase();
|
||||
if (!kw) return jobs;
|
||||
return jobs.filter((j) => {
|
||||
const tpl = templates.find((x) => x.id === j.template_id);
|
||||
const tpl = templatesById.get(j.template_id);
|
||||
const mids = (tpl?.metric_ids || templateSheets(tpl).map((s) => s.metric_id)).join(" ");
|
||||
return `${j.name} ${j.mode} ${j.status} ${tpl?.name || ""} ${mids}`.toLowerCase().includes(kw);
|
||||
});
|
||||
}, [jobs, templates, debouncedListKw]);
|
||||
}, [jobs, templatesById, debouncedListKw]);
|
||||
|
||||
const filteredTemplates = useMemo(() => {
|
||||
const kw = debouncedListKw.trim().toLowerCase();
|
||||
|
|
@ -1135,10 +1159,14 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
const next = currentlyOn.includes(sid)
|
||||
? currentlyOn.filter((id) => id !== sid)
|
||||
: [...currentlyOn, sid];
|
||||
if (!next.length) {
|
||||
showError(t("bizCompare.needSheets"));
|
||||
return;
|
||||
}
|
||||
// Empty list means "all on" (new template sheets auto-included)
|
||||
setEnabledSheetIds(next.length === all.length ? [] : next);
|
||||
},
|
||||
[jobSheetAllIds, enabledSheetIds],
|
||||
[jobSheetAllIds, enabledSheetIds, showError, t],
|
||||
);
|
||||
|
||||
const setJobTemplateAndSheets = useCallback(
|
||||
|
|
@ -1195,28 +1223,18 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
() => runSheets.find((s) => sheetIdentity(s) === resultSheetId) || runSheets[0] || null,
|
||||
[runSheets, resultSheetId],
|
||||
);
|
||||
const activeRunSheetId = sheetIdentity(activeRunSheet);
|
||||
const activeRunSheetStatus = String(activeRunSheet?.status || "");
|
||||
|
||||
// Clear field filters when switching sheet
|
||||
useEffect(() => {
|
||||
setResultKeyFilters({});
|
||||
}, [resultSheetId]);
|
||||
|
||||
// Reset page when sheet / filter / page size changes
|
||||
useEffect(() => {
|
||||
setResultPage(1);
|
||||
}, [
|
||||
resultSheetId,
|
||||
kindFilter,
|
||||
debouncedResultKw,
|
||||
debouncedKeyFiltersJson,
|
||||
resultPageSize,
|
||||
runDetail?.id,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const runId = String(runDetail?.id || "");
|
||||
const mid = resultSheetId || sheetIdentity(activeRunSheet) || "";
|
||||
const sheetSt = String(activeRunSheet?.status || "");
|
||||
const mid = resultSheetId || activeRunSheetId || "";
|
||||
const sheetSt = activeRunSheetStatus;
|
||||
// Block only while *this* sheet is still in flight — done sheets are readable mid-run
|
||||
const sheetStillRunning = ["pending", "running", "queued"].includes(sheetSt);
|
||||
if (!runId || !mid || jobDetailTab !== "result" || sheetStillRunning) {
|
||||
|
|
@ -1224,11 +1242,30 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
setResultTotal(0);
|
||||
setDiffsSource("");
|
||||
setDiffsTruncated(false);
|
||||
setDiffsLoading(false);
|
||||
setDiffsError("");
|
||||
return;
|
||||
}
|
||||
const filterKey = JSON.stringify([runId, mid, kindFilter, debouncedResultKw,
|
||||
debouncedKeyFiltersJson, resultPageSize]);
|
||||
if (diffFiltersRef.current !== filterKey) {
|
||||
diffFiltersRef.current = filterKey;
|
||||
if (resultPage !== 1) {
|
||||
setPagedDiffs([]);
|
||||
setResultTotal(0);
|
||||
setDiffsLoading(true);
|
||||
setResultPage(1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
let cancelled = false;
|
||||
void (async () => {
|
||||
setDiffsLoading(true);
|
||||
setDiffsError("");
|
||||
setPagedDiffs([]);
|
||||
setResultTotal(0);
|
||||
setDiffsSource("");
|
||||
setDiffsTruncated(false);
|
||||
try {
|
||||
const res = await bizCompareListRunDiffs({
|
||||
runId,
|
||||
|
|
@ -1253,8 +1290,7 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
if (resultPage > pages) setResultPage(pages);
|
||||
} catch (e) {
|
||||
if (!cancelled) {
|
||||
// Keep previous rows to avoid strip/table jump; only clear on hard empty run
|
||||
showError(formatErr(e));
|
||||
setDiffsError(formatErr(e));
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) setDiffsLoading(false);
|
||||
|
|
@ -1267,15 +1303,16 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
runDetail?.id,
|
||||
runDetail?.status,
|
||||
resultSheetId,
|
||||
activeRunSheet?.metric_id,
|
||||
activeRunSheet?.status,
|
||||
activeRunSheetId,
|
||||
activeRunSheetStatus,
|
||||
kindFilter,
|
||||
debouncedResultKw,
|
||||
debouncedKeyFiltersJson,
|
||||
debouncedKeyFilters,
|
||||
resultPage,
|
||||
resultPageSize,
|
||||
jobDetailTab,
|
||||
showError,
|
||||
diffsRetry,
|
||||
]);
|
||||
|
||||
const resultColumns = useMemo(() => {
|
||||
|
|
@ -1991,9 +2028,12 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
};
|
||||
|
||||
const openJob = async (id: string) => {
|
||||
const request = ++jobRequestRef.current;
|
||||
runRequestRef.current += 1;
|
||||
setJobId(id);
|
||||
setJobDetailTab("config");
|
||||
setRunDetail(null);
|
||||
setRuns([]);
|
||||
setResultSheetId("");
|
||||
setKindFilter("diff");
|
||||
setResultKw("");
|
||||
|
|
@ -2001,20 +2041,24 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
if (job) resetJobForm(job);
|
||||
try {
|
||||
const r = await bizCompareListRuns(id, 50);
|
||||
if (request !== jobRequestRef.current) return;
|
||||
const items = r.items || [];
|
||||
setRuns(items);
|
||||
if (items.length) {
|
||||
const latest = await bizCompareGetRun(String((items as any[])[0].id));
|
||||
if (request !== jobRequestRef.current) return;
|
||||
setRunDetail(latest);
|
||||
// Land on batch list so stuck/cancelled runs are visible and actionable
|
||||
setJobDetailTab("runs");
|
||||
}
|
||||
} catch (e) {
|
||||
showError(formatErr(e));
|
||||
if (request === jobRequestRef.current) showError(formatErr(e));
|
||||
}
|
||||
};
|
||||
|
||||
const closeJob = () => {
|
||||
jobRequestRef.current += 1;
|
||||
runRequestRef.current += 1;
|
||||
if (document.fullscreenElement === boardRef.current) {
|
||||
void document.exitFullscreen().catch(() => undefined);
|
||||
}
|
||||
|
|
@ -2061,20 +2105,26 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
setJobDetailTab("runs");
|
||||
return;
|
||||
}
|
||||
const request = jobRequestRef.current;
|
||||
setBusy(true);
|
||||
try {
|
||||
await bizCompareUpdateJob(jobId, jobConfigBody());
|
||||
// Async enqueue — returns immediately with status=running; poll below.
|
||||
const run = await bizCompareRunJob(jobId);
|
||||
if (request !== jobRequestRef.current) return;
|
||||
runRequestRef.current += 1;
|
||||
setRunDetail(run);
|
||||
setJobDetailTab("runs");
|
||||
showOk(t("bizCompare.runStarted"));
|
||||
const r = await bizCompareListRuns(jobId, 50);
|
||||
if (request !== jobRequestRef.current) return;
|
||||
setRuns(r.items || []);
|
||||
await refresh({ force: true });
|
||||
} catch (e) {
|
||||
showError(formatErr(e));
|
||||
setJobDetailTab("runs");
|
||||
if (request === jobRequestRef.current) {
|
||||
showError(formatErr(e));
|
||||
setJobDetailTab("runs");
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
|
@ -2082,20 +2132,25 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
const runProgress = (runDetail?.summary?.progress || {}) as RunProgressInfo;
|
||||
const runEngine = String(runProgress.engine || "").toLowerCase();
|
||||
|
||||
// Poll active compare runs so the modal can be closed and reopened safely.
|
||||
// One poller; schedule the next tick after requests settle to prevent overlap.
|
||||
useEffect(() => {
|
||||
if (!runIsActive || !runDetail?.id) return;
|
||||
if (!jobId || (!runIsActive && !(jobHasActiveRun && jobDetailTab === "runs"))) return;
|
||||
let cancelled = false;
|
||||
let notified = false;
|
||||
let timer: number | undefined;
|
||||
const jobRequest = jobRequestRef.current;
|
||||
const runId = String(runDetail?.id || "");
|
||||
const tick = async () => {
|
||||
const runRequest = runRequestRef.current;
|
||||
try {
|
||||
const d = await bizCompareGetRun(String(runDetail.id));
|
||||
if (cancelled) return;
|
||||
setRunDetail(d);
|
||||
if (jobId) {
|
||||
const r = await bizCompareListRuns(jobId);
|
||||
if (!cancelled) setRuns(r.items || []);
|
||||
}
|
||||
const [r, d] = await Promise.all([
|
||||
bizCompareListRuns(jobId, 50),
|
||||
runIsActive && runId ? bizCompareGetRun(runId) : Promise.resolve(null),
|
||||
]);
|
||||
if (cancelled || jobRequest !== jobRequestRef.current) return;
|
||||
setRuns(r.items || []);
|
||||
if (!d || runRequest !== runRequestRef.current) return;
|
||||
setRunDetail((prev: typeof runDetail) => String(prev?.id || "") === runId ? d : prev);
|
||||
const st = String(d.status || "");
|
||||
if (!notified && st === "success") {
|
||||
notified = true;
|
||||
|
|
@ -2111,62 +2166,45 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
}
|
||||
} catch (e) {
|
||||
if (!cancelled) showError(formatErr(e));
|
||||
} finally {
|
||||
if (!cancelled) timer = window.setTimeout(() => void tick(), 2000);
|
||||
}
|
||||
};
|
||||
void tick();
|
||||
const id = window.setInterval(() => void tick(), 2000);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
window.clearInterval(id);
|
||||
window.clearTimeout(timer);
|
||||
};
|
||||
}, [runDetail?.id, runIsActive, jobId, showOk, showError, t]);
|
||||
|
||||
// Keep the runs list fresh while any batch on this job is active
|
||||
useEffect(() => {
|
||||
if (!jobId || !jobHasActiveRun || jobDetailTab !== "runs") return;
|
||||
let cancelled = false;
|
||||
const tick = async () => {
|
||||
try {
|
||||
const r = await bizCompareListRuns(jobId, 50);
|
||||
if (!cancelled) setRuns(r.items || []);
|
||||
const curId = String(runDetail?.id || "");
|
||||
if (curId) {
|
||||
const d = await bizCompareGetRun(curId);
|
||||
if (!cancelled) setRunDetail(d);
|
||||
}
|
||||
} catch {
|
||||
/* ignore list poll errors */
|
||||
}
|
||||
};
|
||||
void tick();
|
||||
const id = window.setInterval(() => void tick(), 2500);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
window.clearInterval(id);
|
||||
};
|
||||
}, [jobId, jobHasActiveRun, jobDetailTab, runDetail?.id]);
|
||||
}, [runDetail?.id, runIsActive, jobId, jobHasActiveRun, jobDetailTab, showOk, showError, t]);
|
||||
|
||||
const loadRun = async (runId: string) => {
|
||||
const request = ++runRequestRef.current;
|
||||
const jobRequest = jobRequestRef.current;
|
||||
try {
|
||||
const d = await bizCompareGetRun(runId);
|
||||
if (request !== runRequestRef.current || jobRequest !== jobRequestRef.current) return;
|
||||
setRunDetail(d);
|
||||
setKindFilter("diff");
|
||||
setResultKw("");
|
||||
setResultKeyFilters({});
|
||||
setJobDetailTab("result");
|
||||
} catch (e) {
|
||||
showError(formatErr(e));
|
||||
if (request === runRequestRef.current && jobRequest === jobRequestRef.current) showError(formatErr(e));
|
||||
}
|
||||
};
|
||||
|
||||
const cancelRun = async (runId: string) => {
|
||||
if (!runId) return;
|
||||
if (!window.confirm(t("bizCompare.confirmCancelRun"))) return;
|
||||
const request = jobRequestRef.current;
|
||||
setBusy(true);
|
||||
try {
|
||||
const d = await bizCompareCancelRun(runId);
|
||||
if (String(runDetail?.id || "") === runId) setRunDetail(d);
|
||||
if (request !== jobRequestRef.current) return;
|
||||
setRunDetail((prev: typeof runDetail) => String(prev?.id || "") === runId ? d : prev);
|
||||
if (jobId) {
|
||||
const r = await bizCompareListRuns(jobId, 50);
|
||||
if (request !== jobRequestRef.current) return;
|
||||
setRuns(r.items || []);
|
||||
}
|
||||
showOk(t("bizCompare.runCancelled"));
|
||||
|
|
@ -2180,19 +2218,24 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
const removeRun = async (runId: string) => {
|
||||
if (!runId) return;
|
||||
if (!window.confirm(t("bizCompare.confirmDeleteRun"))) return;
|
||||
const request = jobRequestRef.current;
|
||||
const runRequest = runRequestRef.current;
|
||||
setBusy(true);
|
||||
try {
|
||||
const wasCurrent = String(runDetail?.id || "") === runId;
|
||||
await bizCompareDeleteRun(runId);
|
||||
if (request !== jobRequestRef.current) return;
|
||||
let nextRuns: typeof runs = [];
|
||||
if (jobId) {
|
||||
const r = await bizCompareListRuns(jobId, 50);
|
||||
if (request !== jobRequestRef.current) return;
|
||||
nextRuns = r.items || [];
|
||||
} else {
|
||||
nextRuns = (runs || []).filter((r) => String(r.id) !== runId);
|
||||
}
|
||||
setRuns(nextRuns);
|
||||
if (wasCurrent) {
|
||||
if (wasCurrent && runRequest === runRequestRef.current) {
|
||||
runRequestRef.current += 1;
|
||||
setRunDetail(null);
|
||||
setResultSheetId("");
|
||||
setJobDetailTab("runs");
|
||||
|
|
@ -2542,7 +2585,7 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
</thead>
|
||||
<tbody>
|
||||
{filteredJobs.map((j) => {
|
||||
const tpl = templates.find((x) => x.id === j.template_id);
|
||||
const tpl = templatesById.get(j.template_id);
|
||||
const n = templateSheets(tpl).length;
|
||||
return (
|
||||
<tr key={j.id}>
|
||||
|
|
@ -2882,7 +2925,7 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
: ""
|
||||
}
|
||||
placeholder={cmpMode === "percent" ? "%" : ""}
|
||||
isDisabled={!isCompare || !needsTol}
|
||||
disabled={!isCompare || !needsTol}
|
||||
onChange={(e) => {
|
||||
const raw = e.target.value.trim();
|
||||
const tol = raw === "" ? undefined : Number(raw);
|
||||
|
|
@ -3113,7 +3156,12 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
className={jobDetailTab === "runs" ? "is-active" : undefined}
|
||||
onPress={() => {
|
||||
setJobDetailTab("runs");
|
||||
if (jobId) void bizCompareListRuns(jobId, 50).then((r) => setRuns(r.items || []));
|
||||
const request = jobRequestRef.current;
|
||||
if (jobId) void bizCompareListRuns(jobId, 50).then((r) => {
|
||||
if (request === jobRequestRef.current) setRuns(r.items || []);
|
||||
}).catch((e) => {
|
||||
if (request === jobRequestRef.current) showError(formatErr(e));
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("bizCompare.tabRuns")}
|
||||
|
|
@ -3354,6 +3402,18 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
})()}
|
||||
</div>
|
||||
) : null}
|
||||
{runDetail ? (
|
||||
<span
|
||||
className={`bs-cmp-board__config${runDetail.config_snapshot_version ? "" : " is-legacy"}`}
|
||||
title={t(runDetail.config_snapshot_version
|
||||
? "bizCompare.configSnapshotHint"
|
||||
: "bizCompare.configLegacyHint")}
|
||||
>
|
||||
{t(runDetail.config_snapshot_version
|
||||
? "bizCompare.configSnapshot"
|
||||
: "bizCompare.configLegacy")}
|
||||
</span>
|
||||
) : null}
|
||||
{!boardFs ? (
|
||||
<>
|
||||
<select
|
||||
|
|
@ -3757,6 +3817,7 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
className={`bs-cmp-strip__kind bs-cmp-strip__kind--${cls}${
|
||||
kindFilter === id ? " is-active" : ""
|
||||
}`}
|
||||
aria-pressed={kindFilter === id}
|
||||
onClick={() => setKindFilter(id as KindFilter)}
|
||||
>
|
||||
{id === "diff"
|
||||
|
|
@ -3782,16 +3843,22 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
<div className="bs-cmp-filter-bar">
|
||||
<Input
|
||||
value={resultKw}
|
||||
aria-label={t("bizCompare.resultFilterPh")}
|
||||
placeholder={t("bizCompare.resultFilterPh")}
|
||||
onChange={(e) => setResultKw(e.target.value)}
|
||||
/>
|
||||
<span className="muted bs-sheet-count">
|
||||
{diffsLoading ? "…" : `${pagedDiffs.length}/${resultTotal}`}
|
||||
<span className="muted bs-sheet-count" role="status" aria-live="polite">
|
||||
{diffsLoading ? "…" : t("bizCompare.resultRange", {
|
||||
from: resultTotal ? (resultPage - 1) * resultPageSize + 1 : 0,
|
||||
to: Math.min(resultPage * resultPageSize, resultTotal),
|
||||
total: resultTotal,
|
||||
})}
|
||||
</span>
|
||||
{resultSearchKeyFields.length ? (
|
||||
<button
|
||||
type="button"
|
||||
className={`bs-cmp-strip__toggle${keyFiltersVisible ? " is-active" : ""}`}
|
||||
aria-expanded={keyFiltersVisible}
|
||||
onClick={() => setKeyFiltersOpen((v) => !v)}
|
||||
>
|
||||
{t("bizCompare.keyFiltersToggle")}
|
||||
|
|
@ -3809,6 +3876,14 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
>
|
||||
{t("bizCompare.displayColsToggle")}
|
||||
</button>
|
||||
{(resultKw.trim() || activeKeyFilterCount > 0) ? (
|
||||
<Button size="sm" variant="ghost" onPress={() => {
|
||||
setResultKw("");
|
||||
setResultKeyFilters({});
|
||||
}}>
|
||||
{t("bizCompare.clearSearch")}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
{resultSearchKeyFields.length && keyFiltersVisible ? (
|
||||
<div className="bs-cmp-key-filters">
|
||||
|
|
@ -3856,10 +3931,10 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
) : null}
|
||||
{!isLiveSearch &&
|
||||
kindFilter === "unchanged" &&
|
||||
(runDetail?.summary?.unchanged_truncated ||
|
||||
(activeRunSheet?.summary?.unchanged_truncated ||
|
||||
(Number(
|
||||
(activeRunSheet?.summary as any)?.unchanged ||
|
||||
runDetail?.summary?.unchanged ||
|
||||
(activeRunSheet?.summary as any)?.unchanged ??
|
||||
runDetail?.summary?.unchanged ??
|
||||
0,
|
||||
) >
|
||||
Number(
|
||||
|
|
@ -3899,6 +3974,7 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
className={`pt-list-table-wrap bs-sheet-table bs-cmp-result-table${
|
||||
diffsLoading ? " is-loading" : ""
|
||||
}`}
|
||||
aria-busy={diffsLoading}
|
||||
>
|
||||
<table className="data-table pt-list-table bs-cmp-diff-table">
|
||||
<thead>
|
||||
|
|
@ -4004,6 +4080,22 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
})()}
|
||||
</thead>
|
||||
<tbody>
|
||||
{diffsLoading || diffsError ? (
|
||||
<tr>
|
||||
<td colSpan={resultEmptyColSpan}>
|
||||
<div className={`bs-cmp-result-state${diffsError ? " is-error" : ""}`}
|
||||
role={diffsError ? "alert" : "status"}>
|
||||
<strong>{t(diffsError ? "bizCompare.resultLoadFailed" : "bizCompare.resultLoading")}</strong>
|
||||
{diffsError ? <>
|
||||
<span>{diffsError}</span>
|
||||
<Button size="sm" variant="secondary" onPress={() => setDiffsRetry((n) => n + 1)}>
|
||||
{t("bizCompare.retry")}
|
||||
</Button>
|
||||
</> : null}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
{pagedDiffs.map((d, i) => {
|
||||
const pre = pickSideRow(
|
||||
d.mapped_before as Record<string, unknown> | null | undefined,
|
||||
|
|
@ -4081,13 +4173,13 @@ export function BizComparePage({ pageMode = "all" }: { pageMode?: BizComparePage
|
|||
</tr>
|
||||
);
|
||||
})}
|
||||
{runDetail && !diffsLoading && !pagedDiffs.length ? (
|
||||
{runDetail && !diffsLoading && !diffsError && !pagedDiffs.length ? (
|
||||
<tr>
|
||||
<td colSpan={resultEmptyColSpan}>
|
||||
<div className="pt-list-empty">
|
||||
{kindFilter === "unchanged"
|
||||
? Number(runDetail?.summary?.unchanged || 0) > 0 &&
|
||||
!Number(runDetail?.summary?.unchanged_listed || 0)
|
||||
{hasResultSearch ? t("bizCompare.searchEmpty") : kindFilter === "unchanged"
|
||||
? Number(activeRunSheet?.summary?.unchanged || 0) > 0 &&
|
||||
!Number(activeRunSheet?.summary?.unchanged_listed || 0)
|
||||
? t("bizCompare.unchangedNotStored")
|
||||
: t("bizCompare.resultEmpty")
|
||||
: activeSheetPending
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
type Entry = { at: number; data: unknown };
|
||||
|
||||
const store = new Map<string, Entry>();
|
||||
const inFlight = new Map<string, Promise<unknown>>();
|
||||
const DEFAULT_TTL_MS = 45_000;
|
||||
|
||||
export async function cutoverCachedGet<T>(
|
||||
|
|
@ -21,9 +22,17 @@ export async function cutoverCachedGet<T>(
|
|||
return hit.data as T;
|
||||
}
|
||||
}
|
||||
const data = await fetcher();
|
||||
store.set(key, { at: Date.now(), data });
|
||||
return data;
|
||||
const existing = inFlight.get(key);
|
||||
if (!opts?.force && existing) return existing as Promise<T>;
|
||||
const request = Promise.resolve().then(fetcher).then((data) => {
|
||||
// An invalidation or forced refresh may supersede this request.
|
||||
if (inFlight.get(key) === request) store.set(key, { at: Date.now(), data });
|
||||
return data;
|
||||
}).finally(() => {
|
||||
if (inFlight.get(key) === request) inFlight.delete(key);
|
||||
});
|
||||
inFlight.set(key, request);
|
||||
return request;
|
||||
}
|
||||
|
||||
/** Return stale immediately (if any), refresh in background and notify. */
|
||||
|
|
@ -34,27 +43,28 @@ export async function cutoverCachedGetSWR<T>(
|
|||
): Promise<T> {
|
||||
const hit = store.get(key);
|
||||
if (hit) {
|
||||
void fetcher()
|
||||
void cutoverCachedGet(key, fetcher, { ttlMs: 0 })
|
||||
.then((data) => {
|
||||
store.set(key, { at: Date.now(), data });
|
||||
onFresh?.(data);
|
||||
if (store.get(key)?.data === data) onFresh?.(data);
|
||||
})
|
||||
.catch(() => {
|
||||
/* keep stale */
|
||||
});
|
||||
return hit.data as T;
|
||||
}
|
||||
const data = await fetcher();
|
||||
store.set(key, { at: Date.now(), data });
|
||||
return data;
|
||||
return cutoverCachedGet(key, fetcher);
|
||||
}
|
||||
|
||||
export function invalidateCutoverCache(prefix = ""): void {
|
||||
if (!prefix) {
|
||||
store.clear();
|
||||
inFlight.clear();
|
||||
return;
|
||||
}
|
||||
for (const k of [...store.keys()]) {
|
||||
if (k.startsWith(prefix)) store.delete(k);
|
||||
}
|
||||
for (const k of [...inFlight.keys()]) {
|
||||
if (k.startsWith(prefix)) inFlight.delete(k);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue