mirror of
https://github.com/hansjone/netx.git
synced 2026-10-15 13:20:47 +08:00
feat(cutover): add live fullscreen monitoring wall
This commit is contained in:
parent
b9d5e27cc4
commit
4d60601050
8 changed files with 307 additions and 10 deletions
|
|
@ -696,6 +696,16 @@ const en = {
|
|||
colChange: "Changes",
|
||||
},
|
||||
bizMigration: {
|
||||
fullscreen: "Wall mode",
|
||||
exitFullscreen: "Exit wall mode",
|
||||
fullscreenHint: "Display cutover status fullscreen. Press Esc to return; use a full-window layout when fullscreen is unavailable.",
|
||||
wallTitle: "Cutover monitoring · Service migration",
|
||||
wallProgress: "Wave migration progress · Current snapshot",
|
||||
wallFilters: "Show filters and evaluation controls",
|
||||
wallState_waiting: "Awaiting evaluation",
|
||||
wallState_unknown: "Data needs confirmation",
|
||||
wallState_anomaly: "Service anomalies detected",
|
||||
wallState_normal: "No service anomalies in current samples",
|
||||
pairCollectionHint: "Each metric has a paired collection round. Saving settings updates task bindings. Route tables are manual-only for final checks; use a separate business comparison for millions of routes. Actual cadence depends on command duration and device availability.",
|
||||
pairedSampling: "Paired sampling · Timeliness",
|
||||
manualRoute: "Manual final check",
|
||||
|
|
|
|||
|
|
@ -695,6 +695,16 @@ const zh = {
|
|||
colChange: "变更",
|
||||
},
|
||||
bizMigration: {
|
||||
fullscreen: "大屏模式",
|
||||
exitFullscreen: "退出大屏",
|
||||
fullscreenHint: "全屏展示割接状态，按 Esc 返回看板；浏览器不支持全屏时使用窗口大屏。",
|
||||
wallTitle: "割接监控 · 业务迁移",
|
||||
wallProgress: "本批迁移进度 · 当前快照",
|
||||
wallFilters: "显示筛选与判定操作",
|
||||
wallState_waiting: "等待判定",
|
||||
wallState_unknown: "数据待确认",
|
||||
wallState_anomaly: "存在业务异常",
|
||||
wallState_normal: "当前样本无业务异常",
|
||||
pairCollectionHint: "每个指标两侧同轮关联采集。保存配置会同步增删采集任务；路由项仅手动采集，收尾时再选择，百万路由建议使用独立业务对比任务。频率是目标间隔，实际周期受命令耗时与设备占用影响。",
|
||||
pairedSampling: "双端关联采集 · 及时性",
|
||||
manualRoute: "手动收尾",
|
||||
|
|
|
|||
|
|
@ -11213,6 +11213,9 @@ html.login-page--paused .login-page__flare {
|
|||
.bm-sampling { border: 1px solid rgba(148,163,184,.25); border-radius: 4px; min-width: 0; }
|
||||
.bm-sampling > summary { padding: 8px 12px; cursor: pointer; font-size: 12px; }
|
||||
.app-heroui-modal .bm-sampling .pt-list-table-wrap { max-width: 100%; min-height: 0; }
|
||||
.bm-live-header__actions { display: flex; gap: 8px; align-items: center; }
|
||||
.bm-board-controls > summary { display: none; }
|
||||
.bm-board-controls > .bm-live-filters { margin-top: 8px; }
|
||||
@media (max-width: 720px) {
|
||||
.bm-live-sources { grid-template-columns: 1fr; }
|
||||
.bm-live-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
|
||||
|
|
@ -15787,3 +15790,106 @@ option {
|
|||
.pager__jump-input {
|
||||
width: 4.25rem;
|
||||
}
|
||||
|
||||
/* Cutover wall: keep one board/poller alive in native or window fullscreen. */
|
||||
.app-heroui-modal.bm-wall-modal {
|
||||
width: 100vw !important;
|
||||
max-width: 100vw !important;
|
||||
height: 100dvh;
|
||||
max-height: 100dvh;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transform: none;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
}
|
||||
.app-heroui-modal.bm-wall-modal .app-heroui-modal__dialog {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
transform: none;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bm-wall-modal .modal__header,
|
||||
.bm-wall-modal .modal__footer,
|
||||
.bm-wall-modal .bm-detail__chrome,
|
||||
.bm-wall-modal .nm-config-modal__tabs { display: none; }
|
||||
.app-heroui-modal.bm-wall-modal .bm-detail {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bm-board.is-wall,
|
||||
.bm-board:fullscreen {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100dvh;
|
||||
min-height: 0;
|
||||
max-height: 100dvh;
|
||||
margin: 0;
|
||||
padding: clamp(12px, 1.25vw, 28px);
|
||||
gap: 12px;
|
||||
border-radius: 0;
|
||||
background: #0b1220;
|
||||
color: #e2e8f0;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
.bm-board.is-wall > * { flex-shrink: 0; }
|
||||
.bm-wall-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-width: 0; }
|
||||
.bm-wall-heading > div { min-width: 0; }
|
||||
.bm-wall-heading__label { color: #94a3b8; font-size: 13px; letter-spacing: .08em; }
|
||||
.bm-wall-heading h2 { margin: 4px 0 0; font-size: clamp(22px, 2vw, 36px); line-height: 1.2; overflow-wrap: anywhere; }
|
||||
.bm-wall-heading__status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
|
||||
.bm-wall-heading time { color: #94a3b8; font: 14px ui-monospace, monospace; white-space: nowrap; }
|
||||
.bm-wall-state { padding: 6px 12px; font-size: 15px; border: 1px solid currentColor; border-radius: 3px; }
|
||||
.bm-wall-state.is-normal { color: #34d399; }
|
||||
.bm-wall-state.is-anomaly { color: #f87171; }
|
||||
.bm-wall-state.is-waiting, .bm-wall-state.is-unknown { color: #fbbf24; }
|
||||
.bm-board.is-wall .bm-live-header { position: sticky; top: 0; z-index: 5; background: #0b1220; padding: 8px 0; }
|
||||
.bm-board.is-wall .bm-live-header strong { font-size: 17px; }
|
||||
.bm-board.is-wall .bm-live-sources strong { font-size: 19px; }
|
||||
.bm-board.is-wall .bm-live-kpis > div { padding: 16px 20px; }
|
||||
.bm-board.is-wall .bm-live-kpis span { font-size: 16px; }
|
||||
.bm-board.is-wall .bm-live-kpis strong { font-size: clamp(40px, 3.5vw, 68px); }
|
||||
.bm-board.is-wall .bm-live-kpis strong small { font-size: 20px; }
|
||||
.bm-board.is-wall .bm-live-warning { font-size: 14px; }
|
||||
.bm-wall-progress { display: flex; align-items: center; gap: 20px; padding: 4px 0; color: #34d399; }
|
||||
.bm-wall-progress > div:first-child { display: flex; align-items: baseline; gap: 16px; }
|
||||
.bm-wall-progress span { font-size: 13px; }
|
||||
.bm-wall-progress strong { font: 600 24px ui-monospace, monospace; }
|
||||
.bm-wall-progress.is-unknown { color: #fbbf24; }
|
||||
.bm-wall-progress__track { flex: 1; height: 8px; min-width: 60px; background: #243044; border-radius: 2px; overflow: hidden; }
|
||||
.bm-wall-progress__track > span { display: block; height: 100%; background: currentColor; }
|
||||
.bm-board.is-wall .bm-board-controls > summary { display: list-item; cursor: pointer; color: #94a3b8; font-size: 13px; padding: 6px 0; }
|
||||
.bm-board.is-wall .bm-sampling { max-height: 240px; overflow: auto; }
|
||||
.bm-board.is-wall .bm-sampling td, .bm-board.is-wall .bm-sampling th { font-size: 14px; }
|
||||
.bm-board.is-wall .bs-cmp-board__body { flex: 1 0 260px; min-height: 260px; }
|
||||
.bm-board.is-wall .bs-cmp-main { display: flex; min-height: 0; }
|
||||
.bm-board.is-wall .bm-board__table { flex: 1; width: 100%; min-height: 0; max-height: none; }
|
||||
.bm-board.is-wall .bm-board__table td { font-size: 15px; }
|
||||
.bm-board.is-wall .bs-cmp-nav__list { max-height: none; }
|
||||
@media (max-width: 720px) {
|
||||
.bm-wall-heading { align-items: flex-start; gap: 12px; }
|
||||
.bm-wall-heading__status { max-width: 48%; }
|
||||
.bm-wall-heading time { font-size: 10px; white-space: normal; }
|
||||
.bm-wall-state { font-size: 12px; padding: 4px 6px; }
|
||||
.bm-board.is-wall .bm-live-kpis > div { padding: 12px; }
|
||||
.bm-board.is-wall .bm-live-kpis strong { font-size: 36px; }
|
||||
.bm-board.is-wall .bm-live-kpis span { font-size: 13px; }
|
||||
.bm-wall-progress { flex-wrap: wrap; gap: 8px; }
|
||||
.bm-wall-progress__track { flex-basis: 100%; }
|
||||
.bm-board.is-wall .bs-cmp-board__body { flex-basis: auto; }
|
||||
.bm-board.is-wall .bm-board__table { max-height: 50dvh; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -489,6 +489,9 @@ export function BizMigrationPage() {
|
|||
const [boardLoading, setBoardLoading] = useState(false);
|
||||
const [boardError, setBoardError] = useState("");
|
||||
const [boardClock, setBoardClock] = useState(Date.now());
|
||||
const [boardFullscreen, setBoardFullscreen] = useState(false);
|
||||
const boardRef = useRef<HTMLDivElement>(null);
|
||||
const fullscreenPending = useRef(false);
|
||||
const boardRequest = useRef(0);
|
||||
const runsRequest = useRef(0);
|
||||
const activeBatchRef = useRef(batchId);
|
||||
|
|
@ -513,6 +516,66 @@ export function BizMigrationPage() {
|
|||
const pairedPending = followLatest && board?.sampling?.some((pair) =>
|
||||
[pair.old_collect_status, pair.new_collect_status].some((s) => !["success", "partial"].includes(s || "idle")));
|
||||
const coverageUnknown = Boolean(board?.run && (liveSummary?.coverage_complete !== true || samplesStale || pairedPending));
|
||||
const progressPercent = liveProgress?.total
|
||||
? Math.max(0, Math.min(100, Math.round(liveProgress.ok / liveProgress.total * 100))) : 0;
|
||||
const wallState = boardError ? "unknown" : !board?.run ? "waiting" : coverageUnknown ? "unknown"
|
||||
: (liveSummary?.anomaly || 0) > 0 ? "anomaly" : "normal";
|
||||
|
||||
const exitBoardFullscreen = useCallback(async () => {
|
||||
if (document.fullscreenElement === boardRef.current) {
|
||||
try { await document.exitFullscreen(); } catch { return; }
|
||||
}
|
||||
setBoardFullscreen(false);
|
||||
}, []);
|
||||
|
||||
async function toggleBoardFullscreen() {
|
||||
if (fullscreenPending.current) return;
|
||||
const element = boardRef.current;
|
||||
if (!element) return;
|
||||
fullscreenPending.current = true;
|
||||
try {
|
||||
if (boardFullscreen) {
|
||||
await exitBoardFullscreen();
|
||||
return;
|
||||
}
|
||||
try { await element.requestFullscreen(); } catch { /* Use the full-window layout below. */ }
|
||||
if (boardRef.current === element) setBoardFullscreen(true);
|
||||
} finally {
|
||||
fullscreenPending.current = false;
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const sync = () => setBoardFullscreen(Boolean(boardRef.current && document.fullscreenElement === boardRef.current));
|
||||
document.addEventListener("fullscreenchange", sync);
|
||||
return () => document.removeEventListener("fullscreenchange", sync);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const element = boardRef.current;
|
||||
return () => {
|
||||
if (element && document.fullscreenElement === element) void document.exitFullscreen().catch(() => {});
|
||||
};
|
||||
}, [projectId, detailTab]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!boardFullscreen) return;
|
||||
const onEscape = (event: KeyboardEvent) => {
|
||||
if (event.key !== "Escape") return;
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
void exitBoardFullscreen();
|
||||
};
|
||||
window.addEventListener("keydown", onEscape, true);
|
||||
return () => window.removeEventListener("keydown", onEscape, true);
|
||||
}, [boardFullscreen, exitBoardFullscreen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!projectId || detailTab !== "board") return;
|
||||
// Freshness must keep advancing even when API refreshes fail.
|
||||
const timer = setInterval(() => setBoardClock(Date.now()), 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, [projectId, detailTab]);
|
||||
|
||||
const filteredProjects = useMemo(() => {
|
||||
const kw = debouncedListKw.trim().toLowerCase();
|
||||
|
|
@ -1185,6 +1248,7 @@ export function BizMigrationPage() {
|
|||
}
|
||||
|
||||
const openProject = (id: string, tab: DetailTab = "setup") => {
|
||||
setBoardFullscreen(false);
|
||||
setProjectId(id);
|
||||
setDetailTab(tab);
|
||||
setSelectedExpectKeys(new Set());
|
||||
|
|
@ -1196,6 +1260,7 @@ export function BizMigrationPage() {
|
|||
};
|
||||
|
||||
const closeProject = () => {
|
||||
setBoardFullscreen(false);
|
||||
setProjectId("");
|
||||
setDetailTab("setup");
|
||||
};
|
||||
|
|
@ -2185,9 +2250,10 @@ export function BizMigrationPage() {
|
|||
{/* Project detail */}
|
||||
<AppModalShell
|
||||
open={Boolean(projectId && project)}
|
||||
onClose={closeProject}
|
||||
size="cover"
|
||||
className={detailTab === "board" ? "bs-cmp-board-modal" : undefined}
|
||||
onClose={() => { if (boardFullscreen) void exitBoardFullscreen(); else closeProject(); }}
|
||||
dismissible={!boardFullscreen}
|
||||
size={boardFullscreen ? "full" : "cover"}
|
||||
className={detailTab === "board" ? `bs-cmp-board-modal${boardFullscreen ? " bm-wall-modal" : ""}` : undefined}
|
||||
>
|
||||
<Modal.Header>
|
||||
<Modal.Heading>
|
||||
|
|
@ -2707,7 +2773,15 @@ export function BizMigrationPage() {
|
|||
) : null}
|
||||
|
||||
{detailTab === "board" ? (
|
||||
<div className="bs-cmp-board bm-board">
|
||||
<div ref={boardRef} className={`bs-cmp-board bm-board${boardFullscreen ? " is-wall" : ""}`}>
|
||||
{boardFullscreen ? <div className="bm-wall-heading">
|
||||
<div><span className="bm-wall-heading__label">{t("bizMigration.wallTitle")}</span>
|
||||
<h2>{project.name}</h2></div>
|
||||
<div className="bm-wall-heading__status">
|
||||
<span className={`bm-wall-state is-${wallState}`} role="status">{t(`bizMigration.wallState_${wallState}`)}</span>
|
||||
<time dateTime={new Date(boardClock).toISOString()}>{fmtTime(new Date(boardClock).toISOString())}</time>
|
||||
</div>
|
||||
</div> : null}
|
||||
<div className="bm-live-header">
|
||||
<div>
|
||||
<span className={`bm-live-state${monitorIsLive ? " is-live" : ""}`}>
|
||||
|
|
@ -2716,8 +2790,16 @@ export function BizMigrationPage() {
|
|||
<strong>{batch?.batch_label || "—"}</strong>
|
||||
</div>
|
||||
<span className="muted">{t("bizMigration.evaluatedAt")} {fmtTime(board?.run?.created_at)}</span>
|
||||
<Button size="sm" variant="secondary" isDisabled={boardLoading || !batchId}
|
||||
onPress={() => void loadBoard(batchId, historyRunId)}>{t("bizMigration.refreshBoard")}</Button>
|
||||
<div className="bm-live-header__actions">
|
||||
<Button size="sm" variant="secondary" isDisabled={boardLoading || !batchId}
|
||||
onPress={() => void loadBoard(batchId, historyRunId)}>{t("bizMigration.refreshBoard")}</Button>
|
||||
<Button size="sm" variant="secondary" onPress={() => void toggleBoardFullscreen()}
|
||||
aria-label={t(boardFullscreen ? "bizMigration.exitFullscreen" : "bizMigration.fullscreen")}
|
||||
aria-describedby="bm-wall-hint">
|
||||
{t(boardFullscreen ? "bizMigration.exitFullscreen" : "bizMigration.fullscreen")}
|
||||
</Button>
|
||||
<span id="bm-wall-hint" className="visually-hidden">{t("bizMigration.fullscreenHint")}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bm-live-sources">
|
||||
{(["old", "new"] as const).map((side) => {
|
||||
|
|
@ -2737,6 +2819,13 @@ export function BizMigrationPage() {
|
|||
<div className="is-bad"><span>{t("bizMigration.anomalyInBatch")}</span><strong>{Math.max(0, (liveSummary?.anomaly ?? 0) - (liveSummary?.anomaly_outside_expect ?? 0))}</strong></div>
|
||||
<div className="is-bad"><span>{t("bizMigration.anomalyOutsideBatch")}</span><strong>{liveSummary?.anomaly_outside_expect ?? 0}</strong></div>
|
||||
</div>
|
||||
{boardFullscreen ? <div className={`bm-wall-progress${wallState === "unknown" || wallState === "waiting" ? " is-unknown" : ""}`}>
|
||||
<div><span>{t("bizMigration.wallProgress")}</span><strong>{progressPercent}%</strong></div>
|
||||
<div className="bm-wall-progress__track" role="progressbar" aria-label={t("bizMigration.wallProgress")}
|
||||
aria-valuemin={0} aria-valuemax={100} aria-valuenow={progressPercent}>
|
||||
<span style={{ width: `${progressPercent}%` }} />
|
||||
</div>
|
||||
</div> : null}
|
||||
{followLatest && board?.sampling?.length ? <details className="bm-sampling" open>
|
||||
<summary>{t("bizMigration.pairedSampling")}</summary>
|
||||
<div className="pt-list-table-wrap"><table className="data-table pt-list-table">
|
||||
|
|
@ -2784,6 +2873,8 @@ export function BizMigrationPage() {
|
|||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
<details className="bm-board-controls" open={!boardFullscreen}>
|
||||
<summary>{t("bizMigration.wallFilters")}</summary>
|
||||
<div className="bs-cmp-board__toolbar filter-inline">
|
||||
<FieldSelect
|
||||
value={batchId}
|
||||
|
|
@ -2879,6 +2970,7 @@ export function BizMigrationPage() {
|
|||
{t("bizMigration.showOutsideAnomalies")}
|
||||
</Button> : null}
|
||||
</div>
|
||||
</details>
|
||||
{sheetCards.some((c) => c.new_baseline_missing) ? (
|
||||
<div className="form-error bm-hint">
|
||||
{t("bizMigration.newBaselineMissingBanner", {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue