hansjone/netx
1
0
Fork 0
mirror of https://github.com/hansjone/netx.git synced 2026-10-15 13:20:47 +08:00
Code Issues Projects Releases 1 Packages Wiki Activity Actions

feat: refine cutover operations board and monitoring performance

Browse source 
Protect previous wave coverage, normalize batch identities, cache shared metric evidence, and batch diff inserts. Add live continuity KPIs, server paging and filters, scoped business selection, and preserve legacy monitor rule metadata.

Validation: 198 backend tests passed with 1 opt-in benchmark skipped; 14 frontend unit tests and 24 browser checks passed; TypeScript and production build passed.
This commit is contained in:
oliver 2026-10-11 07:55:04 +08:00
parent fe4c1db763
commit 32d7d969f6
12 changed files with 731 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

48
web/src/index.css
View file

@ -11175,6 +11175,54 @@ html.login-page--paused .login-page__flare {
overflow: auto;
}
/* Cutover operations console: readable device samples, continuity and scope. */
.bm-live-header, .bm-live-header > div, .bm-live-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.bm-live-header { justify-content: space-between; border-bottom: 1px solid rgba(148,163,184,.25); padding-bottom: 10px; }
.bm-live-state { font-size: 11px; padding: 3px 8px; border: 1px solid rgba(148,163,184,.35); border-radius: 3px; }
.bm-live-state.is-live { color: #34d399; border-color: rgba(52,211,153,.45); }
.bm-live-state.is-live::before { content: ""; display: inline-block; width: 6px; height: 6px; background: currentColor; margin-right: 6px; border-radius: 50%; }
.bm-live-sources { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.bm-live-sources > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 10px 12px; border: 1px solid rgba(148,163,184,.24); border-left: 3px solid #64748b; border-radius: 4px; min-width: 0; }
.bm-live-sources > div:last-child { border-left-color: #38bdf8; }
.bm-live-sources small { flex-basis: 100%; font-variant-numeric: tabular-nums; }
.bm-live-sources strong { overflow-wrap: anywhere; }
.bm-live-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.bm-live-kpis > div { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border: 1px solid rgba(148,163,184,.25); border-radius: 4px; }
.bm-live-kpis span { font-size: 12px; opacity: .8; }
.bm-live-kpis strong { font: 600 26px/1.2 ui-monospace,monospace; font-variant-numeric: tabular-nums; }
.bm-live-kpis strong small { font-size: 13px; opacity: .7; }
.bm-live-kpis .is-ok strong { color: #34d399; }
.bm-live-kpis .is-bad strong { color: #f87171; }
.bm-live-warning { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px; border: 1px solid rgba(251,191,36,.3); border-left: 3px solid #fbbf24; border-radius: 3px; background: rgba(251,191,36,.06); font-size: 12px; overflow-wrap: anywhere; }
.bm-live-warning strong { flex-basis: 100%; }
.bm-live-filters > input { flex: 1 1 240px; min-width: 0; }
.bm-live-filters > .ui-field-select { max-width: 230px; }
.bm-diff-row.is-red > td:first-child { box-shadow: inset 3px 0 #f87171; }
.bm-diff-row.is-yellow > td:first-child { box-shadow: inset 3px 0 #fbbf24; }
.bm-scope-label { display: block; font-size: 10px; opacity: .65; padding-top: 3px; }
.bm-field-changes { font-size: 11px; margin-top: 5px; }
.bm-field-changes summary { cursor: pointer; color: #fbbf24; }
.bm-field-changes div { padding-top: 5px; overflow-wrap: anywhere; }
.bm-field-changes ins { color: #f87171; text-decoration: none; }
.bm-board .bs-cmp-main { min-width: 0; }
@media (max-width: 720px) {
.bm-live-sources { grid-template-columns: 1fr; }
.bm-live-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.bm-live-header > .muted { flex: 1 1 100%; font-size: 11px; }
.bm-board .bs-cmp-board__toolbar { display: grid; grid-template-columns: minmax(0,1fr); }
.bm-board .bs-id-row { min-width: 0; }
.bm-board .bs-cmp-board__body { display: flex; flex-direction: column; min-width: 0; }
.bm-board .bs-cmp-nav { width: 100%; max-width: none; }
.bm-board .bs-cmp-nav__list { max-height: 180px; }
.bm-live-filters > .ui-field-select { max-width: none; width: 100%; }
.bm-board__table { max-width: 100%; }
}
/* Cutover create wizard */
.bm-create {
min-height: min(52vh, 520px);