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 33 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.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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 444 measured of 460 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.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
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.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
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.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…ask run lists Move the Display button out of the runs filter row to sit just left of the pagination controls, and surface it on the per-task, scheduled, agent and error run lists (in each Runs toolbar next to pagination) so columns can be customized there too.
…e paths - Carry the current cols/hide/sc params through the clear-filters form as hidden inputs so clearing filters no longer wipes a customized column layout. - Make getAtPath (and labelFromPath) understand the backslash escaping that childPath emits for bracket keys, so picking a sample value whose key contains a quote or backslash resolves instead of showing an empty column. Adds a round-trip test.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
… needs it metadata/metadataType were selected for every runs-list row on every request but nothing on the list rendered them (the replay dialog fetches metadata via its own loader). Gate them behind a metadata smart column, like payload/output, so they are only hydrated when referenced. The public runs-list API still returns metadata, so it now requests it explicitly via the columns option.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…ad, formatting - Insert a downward-dragged column before the hovered row (adjust the target index after removal) so it lands where the drop indicator showed. - Emit bracket notation for a sample key named 'length' so the column reads that property instead of a computed count. - Stop re-selecting the immutable payload on the 3s live poll; only metadata/output can change while a run is in flight, and the merge preserves the existing payload. - Apply oxfmt formatting.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…tables, fix duplicate import
- Fix oxlint duplicate-import error (merge ListedRun into the existing runsRepository.server import).
- Suppress URL-driven smart columns in embedded run tables that don't hydrate the source fields (schedule inspector, waitpoint, webhook) via an enableSmartColumns={false} prop, so they never render a permanently-empty column.
- Scope the 'Add smart column' sample to the host page's runs: task/scheduled/agent pass their task slug, errors passes the error id (plus rootOnly=false), so the preview shows the shape of the runs the user will actually see instead of arbitrary environment runs.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…ration columns
Number(null)/Number("")/Number([])/Number(false) are all a finite 0, so an empty value showed a misleading 0 (or 0ms). Only coerce actual numbers and non-empty numeric strings; anything else falls back to its raw rendering.
RUN_COLUMN_IDS, STANDARD_COLUMNS, SMART_COLUMN_SOURCES, smartColumnRef and RunColumnGate are only used within runColumns.ts, so un-export them to satisfy the knip check. The externally-consumed RunColumnId/SmartColumnSource types stay exported.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Completes the previous commit: STANDARD_COLUMNS, SMART_COLUMN_SOURCES, smartColumnRef and RunColumnGate are only used within runColumns.ts.
… dialog The preview endpoint hydrated payload, metadata and output for 10 runs on every open (~3 blobs x 10, up to the 512KB inline limit each). It now fetches only the currently-selected source; the dialog passes its source and refetches when the user switches, cutting the worst-case transfer roughly threefold.
| useEffect(() => { | ||
| if (open && sample.state === "idle") { | ||
| sample.load(sampleUrl); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [open, sampleUrl]); |
There was a problem hiding this comment.
🟡 Sample preview can get stuck on the wrong data when switching source quickly
The request for fresh sample data is skipped (sample.state === "idle" guard at apps/webapp/app/components/runs/v3/AddSmartColumnDialog.tsx:102) whenever a previous request is still in flight, and it is never retried, so the preview can keep showing the old source's data indefinitely.
Impact: If someone flips between Payload/Metadata/Output while the previous sample is still loading, the sample and preview panes show nothing (or the wrong source) until they click a source again.
Effect dependency array cannot re-fire after the in-flight fetch settles
The effect's dependencies are [open, sampleUrl]. When the user changes source, sampleUrl changes and the effect runs, but if sample.state is "loading" at that moment the load() call is skipped. When the earlier request finishes and the fetcher returns to "idle", the dependencies have not changed, so the effect never re-runs and the new sampleUrl is never requested.
Because the sample loader only hydrates the requested source (runSelect: deriveRunSelect([], [source]) at apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.smart-column-sample.ts:57), the retained data contains only the previous source's blob. perRun (apps/webapp/app/components/runs/v3/AddSmartColumnDialog.tsx:125-145) then parses run.output/run.metadata as undefined, so both the sample tree and the preview column render the "no source to sample" empty state.
The guard is also unnecessary for preventing duplicate loads: the effect already only fires when open or sampleUrl change.
| useEffect(() => { | |
| if (open && sample.state === "idle") { | |
| sample.load(sampleUrl); | |
| } | |
| // eslint-disable-next-line react-hooks/exhaustive-deps | |
| }, [open, sampleUrl]); | |
| useEffect(() => { | |
| if (!open) return; | |
| sample.load(sampleUrl); | |
| // eslint-disable-next-line react-hooks/exhaustive-deps | |
| }, [open, sampleUrl]); |
Was this helpful? React with 👍 or 👎 to provide feedback.
2 participants
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.
Screenshots