feat(webapp): customizable runs list with columns and smart columns - #4652
feat(webapp): customizable runs list with columns and smart columns#4652ericallam wants to merge 23 commits into
Conversation
…parsing Isomorphic column catalog plus the URL state codec (cols/sc) and the client-side payload/metadata/output parsing and JSON subpath extraction that the customizable runs list is built on. Pure, unit-tested; no behavior change on its own.
The list select is now built from the columns actually shown. A run's payload and output are large, so they are only hydrated when a smart column references them; everything else the presenter needs stays selected regardless.
Adds a Display popover to show/hide and reorder columns, and lets you add "smart columns" that pull a JSON value out of a run's payload, metadata, or output. Column choices live in the URL. ID, Task, and Status can be reordered but not hidden. Smart columns are display-only; offloaded or missing values render a clear placeholder.
The 3s poll now carries the payload/metadata/output a smart column reads, so custom column values update in place instead of only on a full page load.
Smart columns can now be edited in place from the Display popover. Marks smart columns with a code-bracket icon instead of a source-colored dot, shows a drop indicator while reordering columns, drops the redundant Duration cell-count label, and keeps the Display button label constant.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Included review availability: Your plan includes up to 10 reviews per rolling hour; 6 remain after this review. 📜 Recent review details⏰ Context from checks skipped due to timeout. (17)
WalkthroughAdded customizable runs-list columns with visibility, ordering, locked columns, reset behavior, and URL-persisted layouts. Added smart columns that read payload, metadata, or output data through JSON paths and display formatted values. Updated table rendering, run loaders, live polling, presenters, and repository selection to load only required fields. Added smart-column preview support and Vitest coverage. 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Toggling a column now hides/shows it in place instead of moving it to a separate section, so the list never reorders when you check a box (order lives in the URL, hidden columns keep their slot). Marks smart columns with a variable icon, and gives them an explicit remove action distinct from hiding.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…s on hover Marks smart columns with a bolt icon, and the display-options rows now show edit/remove/drag only on hover so a resting list is just a checkbox and a name.
Column state is now delta-encoded: order is written only when it differs from the default, and hidden columns are a single `hide` list. Removing one column produces `?hide=ver` instead of the whole ordered list.
Wider two-column layout with the sample/preview pinned beside the form. Source is now radio cards with a description each and defaults to payload; display options are pills; and the display-only note is an info box at the top instead of a warning at the bottom.
Observability mapAs of 19/100 over 443 measured of 459 entry points (base 19, no change) What this PR changed
FIX FIRST
AUDIT 3 of 50 sensitive mutations record an actor. 47 without one. What the score is made ofThe score and findings here are report-only and never gate the merge. Separately, a required test suite keeps this tool's symbol and route lists in sync with the code they name, and can fail a pull request that renames or removes a symbol they reference, or that adds the first route with a segment they anticipate. Each failure names the list to edit. The rules and their reasons: internal-packages/observability-map/README.md. |
…blobs The sample now renders through the shared CodeBlock (JSON syntax highlighting, same as the run page) and the sample string is capped so a large inline blob can't stall the modal; the full value is still used to resolve the path, and offloaded values show the offloaded state.
The sample is now a clickable, syntax-colored JSON tree: clicking a key or array index fills the JSON path field and highlights the active node. Nodes collapse and children are capped so a large blob stays manageable.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Object and array rows in the smart-column sample now only expand and collapse; only leaf values fill the path when clicked, since a column renders a single value. Drill into a container to pick a leaf inside it (e.g. an array element, or a key within an array element).
The smart-column sample now renders fully expanded (no collapse), and a run picker steps through the most recent runs so you can find one that has the value you're after when the newest run doesn't.
Drop the sample help text and the run counter; the run picker keeps just its prev/next arrows.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…tree
Use the app's thin scrollbar style in the sample panel instead of the
default chunky one, and render empty objects/arrays inline as {} / [].
…ding The sample panel treated 'fetch not finished' the same as 'no runs found', so it flashed (or stuck on) 'No runs to sample' before the request resolved. It now shows a loading state until the fetch completes and reloads on each open, so 'No runs to sample' only appears when there genuinely are none.
…urce The smart-column sample now scans the recent runs and uses the first one with an inline (non-offloaded, non-empty) value for the chosen source, paging through only those. Payload/metadata/output samples are picked independently, so an offloaded newest run no longer blocks the preview; the offloaded/empty message shows only when no recent run has one.
When the selected value sits in an array (e.g. $.tags[0]), the default column label now uses the array's key (tags) instead of the numeric index. A numeric object key addressed with quotes is still kept.
Replace the single 'Resolves to' cell with a Preview column that renders the smart column exactly as the table would, one cell per recent run (number/badge/duration formatting, offloaded and empty states, dotted in-flight values). Give the sample JSON its own taller column, and share the cell renderer between the table and the preview.
A dot-accessed .length now resolves consistently to an array or string length, or an object's key count, so a column can show e.g. the number of items. A bracket-quoted ['length'] still reads a real property named length.
…layout - Trim the Add smart column dialog copy: one-line display-only callout, example-only path hint, drop redundant field helpers, remove an em dash from the sample header. - Move the sample header and run picker outside the box to match the Preview header, and collapse the doubled box into one panel. - Clear the path and label fields when the source changes. - Rework the Display popover smart-column row: labels stay flush-left, the bolt marker sits inline after the label, and the edit/remove/grip controls are a right-aligned group with larger hit targets.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
- Import ResolvedColumn in runColumns.test.ts (typecheck). - Populate payload/output smart columns on the per-task, scheduled, agent and error run lists by threading the column select through those loaders and ErrorGroupPresenter (previously only the main runs list did). - Memoize per-row source parsing so payload/output are decoded once per run rather than on every render / live-poll tick. - Support column reordering in Firefox (set drag data on dragstart, preventDefault on drop) and add keyboard reordering via the grip handle (arrow up/down), revealing row controls on focus. - Show the tags cell placeholder for an empty tag list, and let a live update clear a source value instead of keeping stale data. - Escape backslashes in bracket-notation sample paths.
| /> | ||
| </Form> | ||
| )} | ||
| <RunsDisplayOptions /> |
There was a problem hiding this comment.
🟡 Clearing filters also wipes the user's saved column setup
The clear-filters button submits an empty form that rewrites the whole page address, which now also carries the column setup (added alongside <RunsDisplayOptions /> at apps/webapp/app/components/runs/v3/RunFilters.tsx:419), so pressing it silently throws away hidden/reordered columns and every smart column.
Impact: A user who has customized the runs list loses that customization the moment they clear their filters, with no warning and no undo.
Why the empty GET form drops the new column params
The clear-filters control is a bare Remix <Form> (default GET, no fields) rendered just above the new Display control in apps/webapp/app/components/runs/v3/RunFilters.tsx:407-419. Submitting it navigates to the same pathname with a fully empty query string, which removes every search param, not just filter params.
This PR stores the column layout in exactly those search params — cols, hide and the repeated sc entries written by applyLayout in apps/webapp/app/components/runs/v3/RunsDisplayOptions.tsx:63-70. resolveColumnLayout then falls back to the default layout, so the table reverts and all smart columns disappear.
A fix would preserve the column keys across the clear-filters submit (e.g. render them as hidden inputs in the form, or replace the form with a navigation that only deletes filter keys).
Prompt for agents
The "Clear all filters" control in apps/webapp/app/components/runs/v3/RunFilters.tsx is a bare Remix <Form> with GET and no fields, so submitting it navigates to the current pathname with an empty query string and removes every search param. This PR now stores the runs-list column layout in search params (`cols`, `hide`, and repeated `sc`, written by applyLayout in apps/webapp/app/components/runs/v3/RunsDisplayOptions.tsx), so clearing filters silently resets the user's column layout and deletes their smart columns. Make the clear-filters action scoped to filter params only — for example by carrying the current cols/hide/sc values through as hidden inputs on the form, or by replacing the form submit with a navigation that deletes only the known filter keys.
Was this helpful? React with 👍 or 👎 to provide feedback.
| function childPath(parentPath: string, key: string | number): string { | ||
| if (typeof key === "number") return `${parentPath}[${key}]`; | ||
| if (/^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key)) return `${parentPath}.${key}`; | ||
| return `${parentPath}['${key.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}']`; | ||
| } |
There was a problem hiding this comment.
🟡 Clicking a sample value whose key contains a quote produces a column that never shows data
The sample viewer builds the path for a key by backslash-escaping quotes (childPath at apps/webapp/app/components/runs/v3/SmartColumnSample.tsx:35-39), but the reader that later looks the value up cannot understand that escaping, so the resulting column shows a dash for every run.
Impact: Picking such a value from the sample creates a permanently empty column with no error explaining why.
Path grammar mismatch between the generator and the reader
childPath emits $['a\'b'] for a key containing a single quote (and doubles backslashes for keys containing \).
The consumer, getAtPath in apps/webapp/app/components/runs/v3/smartColumnData.ts:58, tokenizes bracket keys with \['([^']*)'\], which stops at the first ' and does not honour backslash escapes. For $['a\'b'] the regex matches ['a\'] and then the remaining b'] fails the strict lastIndex !== normalized.length check at apps/webapp/app/components/runs/v3/smartColumnData.ts:96, so the whole path resolves to undefined and extractSmartValue reports empty.
The same mismatch applies to keys containing a backslash. Either the tokenizer should support escaped quotes/backslashes, or childPath should emit the double-quoted form (["..."], which getAtPath also accepts) and escape accordingly.
Prompt for agents
childPath in apps/webapp/app/components/runs/v3/SmartColumnSample.tsx generates bracket paths with backslash-escaped single quotes and backslashes (e.g. $['a\'b']), but getAtPath in apps/webapp/app/components/runs/v3/smartColumnData.ts tokenizes bracket keys with the regex \['([^']*)'\], which has no notion of escapes. Any path generated for an object key containing a quote (or a backslash) therefore fails the strict full-match check in getAtPath and resolves to undefined, producing a smart column that is empty for every run. Align the two: either extend the tokenizer to accept escaped quotes/backslashes inside bracket keys, or have childPath choose a quoting style that the tokenizer can actually parse for those keys. Add a round-trip test covering a key with a single quote.
Was this helpful? React with 👍 or 👎 to provide feedback.
| export function getRunColumnsForSelect(request: Request): { | ||
| visibleStandardIds: RunColumnId[]; | ||
| smartSources: SmartColumnSource[]; | ||
| } { | ||
| const url = new URL(request.url); | ||
| const layout = resolveColumnLayout( | ||
| parseColumnParams( | ||
| url.searchParams.get("cols"), | ||
| url.searchParams.getAll("sc"), | ||
| url.searchParams.get("hide") | ||
| ), | ||
| { isManagedCloud: true, isDevelopment: false } | ||
| ); | ||
|
|
||
| return { | ||
| visibleStandardIds: visibleStandardIds(layout.visible), | ||
| smartSources: visibleSmartSources(layout.visible), | ||
| }; | ||
| } |
There was a problem hiding this comment.
🔍 Several routes render the shared table but never pass columns to the presenter
getRunColumnsForSelect was wired into the runs index, standard/scheduled task pages, agents and errors loaders, but not into the webhook detail route (..._app...webhooks.$webhookParam/route.tsx:159), the waitpoint token page, or ViewSchedulePresenter/WaitpointPresenter — all of which render TaskRunsTable.
Those tables still resolve the column layout from the URL, so if sc params are present (hand-edited URL, or a shared link pasted onto one of those pages) the smart column header renders while payload/output are never hydrated, so every cell silently shows “–” rather than an explanatory state. Today the Display control only exists inside RunsFilters (runs index), so this is hard to reach, but the inconsistency is worth closing — either pass columns on those loaders too, or have the table ignore smart columns when the run rows lack the corresponding source fields.
Was this helpful? React with 👍 or 👎 to provide feedback.
| runSelect: deriveRunSelect([], ["payload", "metadata", "output"]), | ||
| page: { size: SAMPLE_RUN_COUNT }, | ||
| }); |
There was a problem hiding this comment.
🔍 Sample endpoint ships up to ten full payload/metadata/output blobs to the browser
The sample loader selects payload, metadata and output for the ten most recent runs and returns them verbatim. Non-offloaded packets can be large (the offload threshold is well above typical payloads), so opening the “Add smart column” dialog can transfer several megabytes on payload-heavy projects, and the same holds for the list itself once a payload-backed smart column is visible (25 rows × payload).
The offloaded case is handled (application/store short-circuits to the offloaded state client-side), but there is no size cap on inline packets. A server-side truncation or a smaller SAMPLE_RUN_COUNT for large packets would bound this.
Was this helpful? React with 👍 or 👎 to provide feedback.
Summary
Makes the runs list customizable. A new Display control lets you show, hide, and reorder columns, and add smart columns that pull a single value out of a run's payload, metadata, or output by JSON path (e.g.
$.failed,$.order.total). Column choices live in the page URL, so a view can be bookmarked or shared. Applies to the global runs list and every per-task / scheduled / agent / webhook / error list, which all share one table.ID, Task, and Status can be reordered but not hidden. Smart columns are display-only (no sort or filter, which would defeat the ClickHouse sort key and cursor).
How it works
Columns come from a shared registry; the Postgres
selectis derived from the visible columns, so a run's large payload/output are only hydrated when a smart column actually references them. All JSON parsing for smart columns happens client-side, respecting the packet content type, parsed once per source per row. Offloaded (too-large) values and paths that aren't present render distinct placeholders rather than fetching per row. The live poll carries the same sources so smart-column values update in place.Scalar columns stay always-selected for now: the shared list presenter has a fixed output shape consumed by several routes and the live poll, and narrowing individual scalar fields would add no real query cost benefit on a single-row read. The select derivation is already column-driven, so tightening this later is a one-line change.