Repository navigation
feat(ui): add full-row expandable jobs toggle with localStorage persistence - #1570
Merged
Merged
Conversation
Add a "View in full width" / "Exit full width" toggle button to the queue jobs table on the Resource Observability Dashboard (/resources) that stacks the cluster queues list and jobs table into full-width rows instead of hiding the queue list, and persists the layout preference in the xmc_jobs_full_width browser cookie. TAG=agy CONV=c0655880-9a67-4bdd-aaa7-bc8e8631798f
There was a problem hiding this comment.
Code Review
This pull request introduces a full-width layout preference for the jobs table in the Resource Dashboard, allowing users to toggle between a side-by-side split view and a vertically stacked full-width view, with the preference persisted in document cookies. The review feedback suggests several improvements: making the cookie parsing logic more robust against spaces around the '=' character, resolving layout misalignment and hiding the inactive resize divider in full-width mode, and optimizing the Angular effect to prevent a redundant cookie write on initialization.
TAG=agy CONV=23cac48a-f5e0-4dc9-b0fa-c46ba04c7f87
…hboard Restore `resource_dashboard.screenshot.spec.ts` and append a single full-width visual regression test using state-based assertions, regenerate the Resource Dashboard Playwright baseline PNG snapshots (`initial`, `queue-selected`, and `full-width`), format TypeScript files with Prettier, and verify resize divider remounting and split ratio preservation when exiting full-width mode. Comment link: #1570 (comment) Comment link: #1570 (comment) TAG=agy CONV=23cac48a-f5e0-4dc9-b0fa-c46ba04c7f87
Pin `xmc-resource-dashboard` height (`1160px`) and increase the viewport height (`1300px`) in the full-width Playwright screenshot test, matching the cross-environment bounding-box pattern used in sibling screenshot specs so 1px font line-height differences between gLinux and Ubuntu CI runners do not mismatch canvas dimensions. TAG=agy CONV=23cac48a-f5e0-4dc9-b0fa-c46ba04c7f87
Add an explicit `&:focus-visible` outline (`2px solid #1a73e8` with `outline-offset: 2px`) on `button.full-width-toggle-btn` so keyboard focus remains clearly visible in both the outlined default state and the `#1a73e8`-filled `.active` state (WCAG 2.4.7 Focus Visible). TAG=agy CONV=23cac48a-f5e0-4dc9-b0fa-c46ba04c7f87
…ect header actions Intentionally refines two internal design choices from # 8000 1567 while preserving identical visual layout and user behavior: - Replace `document.cookie` (`xmc_jobs_full_width`) with `window.localStorage` (`xmc-jobs-full-width`) to align with existing XMC frontend preference conventions (`StatusMessageFilterService`) and avoid sending a client-only layout flag in HTTP `Cookie` headers on API requests. - Replace `showFullWidthToggle` / `isFullWidth` inputs on `QueueJobsTable` with a generic `<ng-content select="[headerActions]" />` slot in `.title-row` so `QueueJobsTable` stays layout-agnostic and `ResourceDashboard` owns the full-width toggle button directly. TAG=agy CONV=23cac48a-f5e0-4dc9-b0fa-c46ba04c7f87
janzak-dev
marked this pull request as ready for review
November 4, 2026 11:41
janzak-dev
enabled auto-merge
November 4, 2026 13:35
AntonTyb
approved these changes
Nov 4, 2026
This was referenced Nov 4, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Takes over #1567 by @VLukiantsev.
Unnamed.screencast.2.webm
Summary
Adds a
"View in full width"/"Exit full width"toggle button to the queue jobs card on the/resources(Resource Observability Dashboard) page that expands the jobs table into a full-width top row with the cluster queues list stacked below (flex-direction: column-reverse,gap: 24px, unmounted resize divider), and persists the user's layout preference inwindow.localStorage(xmc-jobs-full-width) upon toggling.Motivation & Context
Wide multi-column job rows in the side-by-side split view can feel cramped, while hiding the cluster queues list altogether prevents inspecting queues alongside jobs. Expanding the jobs card to a full-width top row with the cluster queues list stacked below keeps both dashboard panes visible and restores the preferred layout on future visits via
localStoragepersistence. This approach supersedes the closed earlier prototype in #1544 (which hid the queue list, did not persist across visits, and reset on search).Intentional Architectural Adjustments Relative to #1567
While preserving 100% of #1567's visual design and user interaction flow, we intentionally made the following architectural refinements:
document.cookie(xmc_jobs_full_width) towindow.localStorage(xmc-jobs-full-width): Done on purpose to align with existing XMC UI client-preference storage conventions (xmc-*keys inStatusMessageFilterService) and avoid attaching a purely client-side layout flag to HTTPCookieheaders on every/api/and/v1/request.QueueJobsTablevia a<ng-content select="[headerActions]">projection slot: Done on purpose for Single Responsibility Principle (SRP). Instead of coupling dashboard-specificshowFullWidthToggleandisFullWidthinputs onto the sharedside_panel/contents/queue_jobs_tablecomponent,QueueJobsTableexposes a generic[headerActions]slot in.title-row(queue_jobs_table.tsremains completely untouched relative tomain) andResourceDashboardowns the toggle button, state, and styles directly.flex-direction: column-reversefrom feat(ui): add full-row expandable jobs toggle with cookie persistence #1567: Kept on purpose so expanding immediately places the jobs table at the top of the split area while keeping bothQueueJobsTableandQueueListComponentmounted in place without DOM re-creation, pagination state resets, or redundant/jobsrefetches.Key Changes
cmd/ui/app/side_panel/contents/queue_jobs_table/):<ng-content select="[headerActions]" />projection slot inside.title-row(queue_jobs_table.ng.htmland flex alignment inqueue_jobs_table.scss) without adding layout-specific inputs or logic toQueueJobsTable.QueueJobsTableHarness(getHeaderActionTexts()) andqueue_jobs_table_test.tsto verify empty default rendering and selective[headerActions]projection.cmd/ui/app/resource_dashboard/jobs_layout_preference.ts):readJobsFullWidthPreferenceandwriteJobsFullWidthPreferencefor reading and persistingxmc-jobs-full-widthinwindow.localStorage(withtry/catchresilience for restricted storage contexts) and 1-to-1 unit tests injobs_layout_preference_test.ts.cmd/ui/app/resource_dashboard/):[headerActions]toggle button ("View in full width"/fullscreenicon ↔ filled primary"Exit full width"/fullscreen_exiticon, with explicit:focus-visibleoffset outline) directly fromResourceDashboardinto<xmc-queue-jobs-table>.isJobsFullWidthfromreadJobsFullWidthPreference()and persisted user toggles viatoggleJobsFullWidth().leftPaneFlexandrightPaneFlexreturnnullwhenisJobsFullWidth()istrue, wrapped<xmc-rod-resize-divider>in@if (!isJobsFullWidth())so the divider and its focus stop unmount in stacked mode while preservingsplitRatio, and updated.rod-split-container.full-widthto reset horizontal pane paddings and applygap: 24px.ResourceDashboardHarnessandresource_dashboard_test.tsto verify[headerActions]projection, button icon/label/active state transitions, full-row vertical stacking, custom split ratio preservation and divider unmount/remount across full-width round-trips,localStoragepersistence and hydration, and state preservation across Smart Resource Finder queries and tab switches.cmd/ui/screenshot_tests/resource_dashboard/):resource-dashboard-initial-chromium-linux.pngandresource-dashboard-queue-selected-chromium-linux.pngbaselines to reflect the toggle button in the jobs card header, and addedshould match baseline screenshot in full-width jobs mode(resource-dashboard-full-width-chromium-linux.png).Assumptions
flex-direction: column-reverse— intentionally retained from PR feat(ui): add full-row expandable jobs toggle with cookie persistence #1567 soQueueJobsTableandQueueListComponentremain mounted in place without DOM re-creation or refetching — keyboardTabfocus follows DOM order (queue cards below before jobs card above); if matching DOM and visual order is prioritized later, the queue list pane can be moved via template outlet."Exit full width"— if searches should auto-return to side-by-side split view,onFindMatchingQueueswould need to resetisJobsFullWidth.Verification & Testing
Automated Tests
./.githooks/pre-commit && cd cmd/ui && npm run format:check && npm run lint && npm test -- --watch=false --browsers=ChromeHeadlessNoSandbox && npm run build && npm run test:screenshotlocalStoragepersistence and error resilience,[headerActions]slot projection, toggle interactions, and full-row dashboard stacking + divider/split-ratio round-trip), Prettier and ESLint checks pass with 0 warnings/errors, production bundle build succeeds, and all 11 Playwright visual screenshot tests pass.Live Deployment & Manual Testing
tools/dev_env/dev_env.py gke-upgradedeploy/ctk_v2/verify_xmc.py— all 5 sections✅ PASS(13/13 Kubernetes pods freshly rolled out1/1 Runningwith0restarts, services, Gateway & HTTPRoutes, TLS certificates, and GKE Log Monitor)HEAD(8b4ee8ad1), rolled outdeployment/ui-deployment, verified/resourcesreturnsHTTP/2 200, and confirmed the live compiled Nginx bundle serves thexmc-jobs-full-widthlocalStoragelayout preference and[headerActions]full-width toggle button.ui-deploymentrolled out cleanly (1/1 Running);/resourcesserves the"View in full width"toggle button, full-row vertical stacking, andlocalStoragepersistence.Live Execution Output / Logs
Related Issues / Bugs
N/A
TAG=agy
CONV=23cac48a-f5e0-4dc9-b0fa-c46ba04c7f87