Cluster Pulse — Jobs roster visual hierarchy pass¶
Motivation¶
The cluster card's jobs roster had three readability problems:
- Identity was a single long line —
20260521-1046 MPXV F3L - NC_003310.1ran across the row with the program / db / query rendered as plain middle-dot text underneath, so it was unclear which part was the ID and which were facets. - The failure note inlined with the meta line — for the FAILED row,
node_warmup_not_readysat next toquery.faand read like metadata rather than an error. - The status word was low-contrast —
COMPLETED/FAILEDwere rendered at ~10% opacity background which competed poorly with the left-edge colour bar. - The USER column was always present even when no row had an owner
(
—in every cell), wasting 76 px of the title column.
User-facing change¶
JobLinenow renders identity as a stacked two-row block: title on top, three explicit chips (programaccent /dbstrong /querymono) below. The bullet / spinner shares a fixed 12 px gutter so the two lines align with the row's colour bar.- The job note is no longer part of the identity meta. When a row carries
a note it renders as a full-width stripe beneath the row cells,
tinted with a danger / warning / info palette derived from
noteSeverity, with a smallAlertTriangleicon. FAILED rows always use the danger tint sonode_warmup_not_readyis visually owned by the failure. - The status pill is now filled (75% mix of the phase colour with a 35% outline) so COMPLETED / FAILED / RUNNING reads from across the card.
- The
Usercolumn is auto-hidden when no visible row has anowner_upn. BothJobsTableHeaderandJobLineswitch grid templates from1fr 76px 76px 92pxto1fr 76px 92px.
Backend / IaC diff¶
None. UI-only change.
Files¶
- web/src/components/cards/ClusterPulse/JobLine.tsx
— replaced
BlastJobIdentityusage with an inline title + chip row, addedChipMono, thenoteSeverityhelper, the filled status pill, and the failure stripe row. - web/src/components/cards/ClusterPulse/JobsSection.tsx
— derives
hasOwnersfromjobIndex, threads it to header + rows. - web/src/theme/dashboard-layout.css
— rewrote the mobile
.pulse-job-row > *:nth-child(N)selectors to use the new class names (.pulse-job-identity,.pulse-job-status-cell,.pulse-job-timeblock) so the responsive collapse still works after the User column became conditional and the note stripe became a 5th child.
BlastJobIdentity is untouched; the other two call sites
(ClusterBento/atoms.tsx, cards/JobCard.tsx) keep their behaviour.
Validation¶
cd web && npm run build— clean, 13.34 s.- Manual screenshot of
http://127.0.0.1:8090/against the liveelb-clustershowing 2 COMPLETED rows + 1 FAILED row with thenode_warmup_not_readystripe rendered beneath the FAILED row, and the header collapsed toJOB / STATUS / TIME(no User column).