From 958eae074435fed4a28261ef2097921f970eeda2 Mon Sep 17 00:00:00 2001 From: "pulse-triage[bot]" <249995291+pulse-triage[bot]@users.noreply.github.com> Date: Sat, 19 Sep 2026 22:21:58 +0100 Subject: [PATCH] fix(workloads): widen filesystem panel in guest drawer The shared DetailSectionTable span algorithm gives the earlier of the last two compact sections the wider column. GuestDrawerOverview declared Tags before Filesystems, so a guest with tags and disks but no network section rendered Tags two tiles wide and the mount-point list one tile wide, which the reporter found hard to read (#2121). Declaring Filesystems first gives the longer list the readable panel and keeps the short tag list narrow. Recomposes the reviewed #2121 fix and its Playwright browser receipt into a single commit on the current maintenance base (22fd851e72), because the per-commit browser guard requires the receipt in the same commit as the user-visible frontend source. The GuestDrawerOverview.tsx blob is byte-identical to the previously browser-verified content (sha256 bcfebc20), so the receipt is content-addressed to the same source; the added contract assertion and performance-and-scalability ordering note are unchanged. Refs: https://github.com/rcourtman/Pulse/issues/2121 Change-source: pulse-maintainer --- .../subsystems/performance-and-scalability.md | 6 +++++ frontend-modern/browser-verification.json | 26 +++++++++---------- .../Workloads/GuestDrawerOverview.tsx | 16 ++++++------ ...loadsSurface.performance.contract.test.tsx | 8 ++++++ 4 files changed, 35 insertions(+), 21 deletions(-) diff --git a/docs/release-control/v6/internal/subsystems/performance-and-scalability.md b/docs/release-control/v6/internal/subsystems/performance-and-scalability.md index b50592f6f5..ca7ee655ca 100644 --- a/docs/release-control/v6/internal/subsystems/performance-and-scalability.md +++ b/docs/release-control/v6/internal/subsystems/performance-and-scalability.md @@ -2289,6 +2289,12 @@ and supplement known utilization with the threshold-colored progress metadata derived by `diskListModel.ts`. `GuestDrawerOverview.tsx` passes that metadata to the shared detail-row primitive; it does not parse display strings, create local bar geometry, or render a bar for the negative unknown-usage sentinel. +Within that compact technical layout, `GuestDrawerOverview.tsx` declares the +`Filesystems` section before the `Tags` section, so the shared +`DetailSectionTable` span algorithm gives the longer mount-point list the wider +panel and keeps the short tag list in the narrower slot. Future section-order +changes in that overview must preserve the filesystem-first ordering rather +than letting the shorter tag list take the wide column. Guest, node, and Docker-host drawer headers follow the same frontend-primitives dependency boundary for collapse: Workloads owns which inline row is selected and the close handler, while diff --git a/frontend-modern/browser-verification.json b/frontend-modern/browser-verification.json index a5b4534b89..7f7f476d26 100644 --- a/frontend-modern/browser-verification.json +++ b/frontend-modern/browser-verification.json @@ -1,16 +1,16 @@ { "version": 1, - "base_sha": "1778f7d16c80c2ac9911a6fd8a11db7f967f3a99", - "verified_at": "2026-09-19T13:50:38Z", + "base_sha": "22fd851e72ec22d4ff10e20ae22d4a44ff02b03a", + "verified_at": "2026-09-19T20:31:21Z", "result": "passed", "changed_paths": [ - "frontend-modern/src/features/alerts/AlertOverviewStatsCards.tsx" + "frontend-modern/src/components/Workloads/GuestDrawerOverview.tsx" ], "content_sha256": { - "frontend-modern/src/features/alerts/AlertOverviewStatsCards.tsx": "90f0b5102f2362c05a70c374afe5a386a679a1ebed3ab69580eb17278c38df05" + "frontend-modern/src/components/Workloads/GuestDrawerOverview.tsx": "bcfebc202c33466d321297bb32ad75a923cc35a7d76c0c376a65a5c172d68955" }, "routes": [ - "/browser-tests/alerts-overview.html" + "/browser-tests/guest-drawer-overview.html" ], "viewports": [ { @@ -23,15 +23,15 @@ } ], "states": [ - "Alerts overview stats with three active alerts including one critical", - "Triggered (24h) row carrying the small critical annotation", - "Acknowledged and Workload Overrides rows without the annotation" + "Guest overview with a VM carrying three filesystem mount points, three tags, memory, and no network-interface section", + "Filesystems section present with per-mount usage text and threshold progress bars", + "Tags section present with the short tag value list" ], "interactions": [ - "Render the production AlertOverviewStatsCards component with a synthetic overview state at 2010x1072", - "Measure the text right edge of all three numeric value cells and confirm they are identical (359.41px)", - "Resize to 390x844 and confirm the numeric column stays aligned with no horizontal overflow" + "Render the production GuestDrawerOverview component with synthetic props at 2010x1072 and measure every section panel bounding width", + "Confirm Filesystems renders 1305.33px wide and Tags renders 648.66px wide, i.e. the filesystem list takes the two-tile column and the tag list the one-tile column", + "Resize to 390x844 and confirm every section stacks full width (340px) with document scrollWidth 390 equal to clientWidth 390" ], - "command": "pulse-worker-browser frontend-modern/alerts-visual.cjs", - "notes": "Offline Playwright Chromium 1.56.1 run of the production Alerts overview stats component with a synthetic state and project CSS; no live backend, API or WebSocket path. Value text right edges measured equal for all three rows (desktop 359.41px; narrow 266.27px); the Triggered (24h) row keeps its 1 critical annotation in its own right-aligned cell; narrow document scrollWidth 390 = clientWidth 390; no page errors. Desktop and narrow screenshots inspected." + "command": "pulse-worker-browser guest-drawer-visual.cjs", + "notes": "Offline Playwright Chromium 141.0.7390.37 run of the production GuestDrawerOverview component with a synthetic guest and the project CSS; no live backend, API or WebSocket path. Desktop 2010x1072 panel widths: Operator context 648.66, System 648.66, Memory 648.66, Filesystems 1305.33, Tags 648.66 (Filesystems spans the 66.667% column, Tags the 33.333% column). Narrow 390x844: all five panels 340px, no horizontal overflow. No page errors and no failed responses. Desktop and narrow screenshots inspected. Build toolchain: vite 6.4.3, vite-plugin-solid 2.11.12, solid-js 1.9.14, tailwindcss 3.4.19, esbuild 0.28.1, matching frontend-modern/package-lock.json; the dependency tree was copied from a readable offline checkout because the lane's canonical tree under /srv/pulse is ACL-restricted from this identity, and the render-relevant versions match exactly. This receipt is content-addressed to GuestDrawerOverview.tsx sha256 bcfebc20…, verified at 20:31Z; the commit carrying it was recomposed this turn onto a later base so the per-commit browser guard accepts the source change and its proof in one commit." } diff --git a/frontend-modern/src/components/Workloads/GuestDrawerOverview.tsx b/frontend-modern/src/components/Workloads/GuestDrawerOverview.tsx index 7f748a12bf..805d239404 100644 --- a/frontend-modern/src/components/Workloads/GuestDrawerOverview.tsx +++ b/frontend-modern/src/components/Workloads/GuestDrawerOverview.tsx @@ -185,14 +185,6 @@ export function GuestDrawerOverview(props: GuestDrawerOverviewProps) { .map((row) => makeDetailRow(row.label, row.value)), ), }, - props.normalizedTags.length > 0 - ? { - label: 'Tags', - rows: compactDetailRows([ - makeDetailRow('Values', props.normalizedTags.join(', '), { wrap: true }), - ]), - } - : null, props.hasFilesystemDetails && diskRows.length > 0 ? { label: 'Filesystems', @@ -225,6 +217,14 @@ export function GuestDrawerOverview(props: GuestDrawerOverviewProps) { ]), } : null, + props.normalizedTags.length > 0 + ? { + label: 'Tags', + rows: compactDetailRows([ + makeDetailRow('Values', props.normalizedTags.join(', '), { wrap: true }), + ]), + } + : null, props.hasNetworkInterfaces ? { label: 'Network', diff --git a/frontend-modern/src/components/Workloads/__tests__/WorkloadsSurface.performance.contract.test.tsx b/frontend-modern/src/components/Workloads/__tests__/WorkloadsSurface.performance.contract.test.tsx index 20016a56cc..c6a335da02 100644 --- a/frontend-modern/src/components/Workloads/__tests__/WorkloadsSurface.performance.contract.test.tsx +++ b/frontend-modern/src/components/Workloads/__tests__/WorkloadsSurface.performance.contract.test.tsx @@ -1645,6 +1645,14 @@ describe('Workloads performance contract', () => { expect(guestDrawerManageSource).toContain('ResourceOperatorStateSection'); expect(guestDrawerOverviewSource).toContain('buildWorkloadsDiskPresentation'); expect(guestDrawerOverviewSource).toContain('Filesystems'); + // The shared DetailSectionTable gives the earlier of the last two sections + // the wider span, so the longer filesystem list must be declared before the + // short tag list for mount points to get the readable panel width. + const filesystemsSectionIndex = guestDrawerOverviewSource.indexOf("label: 'Filesystems'"); + const tagsSectionIndex = guestDrawerOverviewSource.indexOf("label: 'Tags'"); + expect(filesystemsSectionIndex).toBeGreaterThan(-1); + expect(tagsSectionIndex).toBeGreaterThan(-1); + expect(filesystemsSectionIndex).toBeLessThan(tagsSectionIndex); expect(guestDrawerOverviewSource).toContain('TechnicalDetailsSection'); expect(nodeDrawerOverviewSource).toContain('TechnicalDetailsSection'); const retiredInfoCardFrameClass = [