Queue metrics & health: UI polish (TRI-12068)#4354
Merged
samejr merged 69 commits intoJul 24, 2026
Conversation
… (TRI-12309)
Move the environment pause/resume button out of the Queued stat tile into the top-right of the queues filter bar, and give it a visible label ("Pause/Resume {environment} environment") instead of icon-only.
The "Limited by" cell was the only data cell not linking to the queue detail page, so clicking it did nothing. Make it navigable like the rest of the row (matching the runs-table pattern); the override explainer moves to an info-icon tooltip rendered beside the link so the button never nests inside the row's <a>.
…e header (TRI-12312) In TableHeaderCell, clicking anywhere on a sortable header used to sort (the label + arrows were one full-width button). Now only the sort-arrows icon is the button; the label (and any info tooltip) are plain, non-clickable content. Shared primitive change — affects every sortable table.
… scale (TRI-12313) Normalize the gaps between content containers (stat/chart grid gap, the vertical block gap, and the content-region gap) from 3 (0.75rem) to 2 (0.5rem) in the shared MetricsLayout. Page gutters are left at 3 so left edges stay aligned with the filter bar. Affects all metric/dashboard pages using MetricsLayout.
…RI-12315, TRI-12316)
Move the Overview/Concurrency-keys tabs up into the filter bar (tabs left, inset by pl-2), with the date filter and the relocated Override limit + Pause {queue} queue buttons on the right (gap-1.5). Both controls move out of the Concurrency panel and gain visible labels; the override button gets an explanatory tooltip. Adds withQueueName to QueuePauseResumeButton and a labeled+tooltip 'button' trigger to QueueOverrideConcurrencyButton.
…n queue charts (TRI-12317) The header charts turn the line orange as a warning (saturation over the env limit, p95 over 1 min, any throttling) but nothing labelled the colour. Add a small inline legend (rounded colour square + label) below the title on Env saturation, Scheduling delay p95, and Throttled. Backlog has no warning colour so it gets no legend.
Bake a max-w-[230px] default into the shared TooltipContent so no tooltip sprawls too wide, and converge the queue-page tooltips that were pinned at max-w-xs (320px) onto the same 230px cap.
…don't reload charts (TRI-12321) useMetricResourceQuery reset to rows=null on every mount, so remounting a chart (switching queue-detail tabs, or navigating back to the queues list) flashed a loading skeleton and refetched. Add a bounded module-level cache keyed by the query signature: a remounted chart paints its last rows immediately and revalidates in the background instead of reloading.
…styling (TRI-12323) The BigNumber stat tiles (Queued/Running/Allocated/Environment limit) and the detail-page ConcurrencyBlock used rounded-sm + border-grid-dimmed, which didn't match the chart cards' rounded-lg + border-grid-bright. Align both to the chart Card styling so the tiles and charts read as one system.
Both queues pages: filter-bar item gap is now gap-1.5. The list page's search/period and pause/pagination clusters move from gap-2 to gap-1.5; the detail page's cluster was already gap-1.5 (TRI-12315).
…its tooltip (TRI-12328) The Increase limit control (Environment limit tile) was an icon-only button with the label only in a hover tooltip. Show "Increase limit" as the button text and remove the tooltip, for both the increase and the upgrade variants.
The "NN% of the environment limit" caption on the Allocated tile was text-text-bright; switch it to the text-text-dimmed token so it reads as secondary subtext like the other tiles' captions.
…12337) ChartLine collapsed the x-axis to only the first + last tick while the tooltip was active. Remove that so every x-axis label stays visible at all times; recharts keeps its default preserveStartEnd ticks whether hovering or not.
…parators (TRI-12330) Replace the word "Yellow" with an inline warning-coloured swatch (matching the chart's over-limit line) in the Env saturation, Scheduling delay p95, and Backlog tooltips. Swap the em dashes in the "Limited by" header tooltip for colons. The tile description type widens to ReactNode to carry the inline swatch.
Shrink the description text (variant=small); move the Number/Percent segmented control to the right of the concurrency-limit input (gap-2, matched height) instead of up by the label; show a % suffix in the field when Percent is selected; and let the label sit close above the input (InputGroup's gap-1.5).
…2068) Both queue pages: the gaps between stat/chart containers and the padding around the metrics area move from 2 to 1.5 in the shared MetricsLayout.
… gap (TRI-12068) Reduce the legend colour-swatch corner radius (rounded-[3px] to rounded-[2px]) and increase the gap between the chart title and the legend row (gap-0.5 to gap-1).
… link (TRI-12068) For a TableCell with a link plus leading/trailing adornments, the <a> only wrapped the text. Add an inset ::before overlay so the anchor covers the whole cell; the interactive adornments (type icon, badges) sit above it (relative z-10) and stay clickable. Shared primitive — applies to every such cell (e.g. the queues Name cell).
… (TRI-12068) Swap the generic RectangleStackIcon for the QueuesIcon (the same icon as the Queues side-menu item) on custom queues in the Name cell.
Remove client-side column sorting from the queues table (to be reimplemented server-side separately, per TRI-12322). Drops the useTableSort wiring, the sort-column defs, the header sort props, and the now-dead queueLimitedByLabel helper; the sort arrow icons no longer render.
…cement, per-page padding (TRI-12068)
Show the date filter as "Period: {value}" (bright label, dimmed value, matching the Runs page) on both queue pages; move it to the right of the list filter bar (left of Pause); and set per-page filter-bar padding (list px-2, detail pl-1.5 pr-2) via a new optional className on MetricsLayout.Filters.
… (TRI-12068) The hovered chart's cursor was a dim rgba(255,255,255,0.1); point it at SYNC_LINE_COLOR so it matches the dashed synced indicator drawn on the other charts. Bar charts' fill cursor is brightened to match. Global to line + bar charts.
…ht (TRI-12068) Chart card header used items-center, so with a two-line title the Maximize button sat too low. Switch to items-start.
The 5th Overview chart (Throttled) sat alone at 50% width; span it across both columns (sm:col-span-2) with a wider aspect so its height matches the others.
Pause buttons (queue + environment): orange border matching the icon, brighter on hover; ellipsis in the label; the queue button reads "Pause this queue…" with the queue name moved into the tooltip (items 11/12/18). Override modal: Cancel is now secondary, description numbers use tabular-nums, the absolute-mode copy is clearer and spans two lines to avoid layout shift, and the Number/Percent toggle height now matches the number field via a new SegmentedControl className (item 13).
…I-12068) The Overview/Concurrency-keys tabs were vertically centered in the filter bar, leaving their underline ~10px above the bar's bottom border. Bottom-align them (self-end) so the tab underline seats on the filter bar's bottom edge.
…068) Audit of numeric displays on the queue pages: BigNumber values, table cells, chart axes, and chart peak readouts already used tabular-nums. Add it to the two that were missing — the BigNumber stat-tile suffix (e.g. "peak 2.7K", "23% of the environment limit") and the ConcurrencyBlock "NN% of limit" caption.
Rewrite the queue-page tooltip and description copy to be simpler and jargon-free: chart descriptions, table-header tooltips, the Override and Pause button tooltips, and the detail chart info tooltips. Replaces phrasing like "p95 wait from eligible to dequeued" with "how long runs wait before they start", drops em dashes, etc.
…y (TRI-12068)
Both pause buttons: colour the label text to match the icon (orange when pausing, green when resuming). Rework the tooltips off the modal's accurate wording — "Pauses all runs from being dequeued in the {name} queue/environment. Any executing runs will continue to run." (items 2, 16).
…1px (TRI-12068) The inline colour swatch used in chart tooltips now uses rounded-[2px] to match the chart legend swatches, and is bumped up 1px (-translate-y-px) so it sits on the text baseline better (item 3).
… one (TRI-12068) Merge the queue-metrics dashboard, live/clarity and override-limit notes into a single short release note. Leaves the unrelated notes (side menu, agent detail, duplicate-root-environments) from the base branch untouched.
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 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 |
|
Concurrency: 'are going' → 'are executing', drop the redundant 'color' from the two parenthetical swatches. Queue depth: drop the trailing swatch. Scheduling delay: cut the p50/p95/p99 breakdown. Throughput: parentheticals become ({swatch} Enqueued) / ({swatch} Started).
![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.
…nes (TRI-12068) The tooltip colour indicator preferred the recharts item colour, which for a threshold/gradient line is a url(#…) gradient ref (invalid as a CSS background) — so the Concurrency 'Running' swatch was missing. Prefer the configured series colour.
…ines (TRI-12068) The orange over-threshold stretch was 2px vs the 1px base lines. It traces the same points, so 1px covers the base exactly and matches the other lines.
…legend (TRI-12068) Add an optional extraLegend to QueueMetricChartCard for warning states that aren't their own series, and use it on Throughput so the orange 'Falling behind' colour is explained in the legend.
…ips (TRI-12068) Add disableTooltipHoverableContent to the Limited by, Delay p95 and Backlog header tooltips.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
… activity (TRI-12068)
…' column so it matches the other rows and brightens on hover (TRI-12068)
… menu icons with the others (TRI-12068)
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…y cap (TRI-12438)
…agination into a table title bar (TRI-12438)
…ed) segments no longer read thicker than the rest (TRI-12068)
…ueue-metrics UI flag (TRI-12438)
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…panel width (container query) and show 'Waiting for' as a shorthand duration (TRI-12068)
…stop the dev-server HMR 'already registered' crash
…p back to page 1 when a filter change (e.g. narrowing the time range) empties a later page (TRI-12438)
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…uiet-env gauge can't briefly show a stale Queued/Running count on nav-back (TRI-12068)
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
1 participant
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.
Stacked on #4131 — targets
feat/queue-metrics-and-health, notmain. GitHub will auto-retarget this tomainonce #4131 merges. (Targetingmainnow would wrongly include all of #4131's own commits.)UI polish for the Queue metrics & health pages (TRI-12068). 49 commits, all under
apps/webapp/app/— no engine/ClickHouse/package changes.Highlights
MetricsLayoutspacing (2.5 scale); paused-queue banner mirroring the environment-paused banner.Also consolidated the three queue-metrics
.server-changesnotes into one.Known follow-up (not in this PR): the Concurrency-keys table is capped at 50 keys (union of live Redis backlog + ClickHouse history, no single cursor across both) and truncates silently — fine for most queues, a real limit for high-cardinality per-tenant keys.
Verified locally against the
queue-metrics-demoseed;pnpm typecheck --filter webapppasses.