Queue metrics & health: UI polish (TRI-12068)

.server-changes/paginate-concurrency-keys-table.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The concurrency keys table on a queue's page is now paginated, so queues with thousands of keys can page through all of them instead of only showing the top 50.

.server-changes/queue-metrics-dashboard.md

@@ -3,4 +3,4 @@ area: webapp
 type: feature
 ---
 
-Queue metrics and health on the Queues page: per-queue depth, throughput, concurrency, throttling, and scheduling-delay charts, plus a per-queue detail view, live queue stats and a backlog chart on the task detail page, and a waiting-in-queue explainer in the run inspector for runs that have not started yet. Off by default; enabled per organization.
+New Queue metrics & health dashboard (per-org opt-in): per-queue depth, throughput, concurrency, throttling and scheduling-delay charts, a per-queue detail view, and live queue stats. Queue concurrency limits set above the environment limit are now rejected instead of being silently capped.

apps/webapp/app/components/layout/MetricsLayout.tsx

@@ -178,7 +178,7 @@ function MetricsLayoutMain({ children, scroll }: { children: ReactNode; scroll:
  <div
  className={
  scroll === "page"
- ? "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
+ ? "flex min-h-0 flex-1 flex-col gap-2.5 overflow-y-auto py-2.5 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
  : "flex min-h-0 flex-1 flex-col overflow-hidden"
  }
  >
@@ -275,9 +275,21 @@ function MetricsLayoutRoot({
  * standard page insets. Compose left/right clusters as child divs — `justify-between` spreads them
  * (a single child sits at the start).
  */
-function MetricsLayoutFilters({ children }: { children: ReactNode }) {
+function MetricsLayoutFilters({
+ children,
+ className,
+}: {
+ children: ReactNode;
+ /** Override the baked horizontal padding (the two queue pages want slightly different insets). */
+ className?: string;
+}) {
  return (
- <div className="flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-dimmed pl-2.5 pr-3">
+ <div
+ className={cn(
+ "flex h-10 shrink-0 items-center justify-between gap-2 border-b border-grid-dimmed pl-2.5 pr-3",
+ className
+ )}
+ >
  {children}
  </div>
  );
@@ -306,7 +318,7 @@ function MetricsLayoutGrid({
  return (
  <div
  className={cn(
- "grid gap-3 px-3",
+ "grid gap-2.5 px-2.5",
  // `shrink-0` is load-bearing: the grid sits in Root's flex-col scroll container, where the
  // default flex-shrink would collapse a fixed-height row whose chart cards have ~no
  // intrinsic height. Pin it so the charts keep their row height and the page scrolls past.
@@ -325,8 +337,8 @@ function MetricsLayoutGrid({
 /**
  * The content region below the tiles (tabs / table / list). Full-bleed by default so a list table
  * spans edge to edge with its own top border; pass `inset` for a padded column (the detail page's
- * tabs + charts). Either way Content bakes a doubled separation above it, so the tile blocks read
- * as a distinct band from the content below.
+ * tabs + charts). Separation from the tiles above comes from the scroll column's gap alone (no
+ * extra top margin), so the tile → content step matches the gap between tile rows.
  */
 function MetricsLayoutContent({
  children,
@@ -336,7 +348,7 @@ function MetricsLayoutContent({
  /** Pad the content into a column (page gutter) instead of letting it span edge to edge. */
  inset?: boolean;
 }) {
- return <div className={cn("mt-3 flex flex-col gap-3", inset && "px-3")}>{children}</div>;
+ return <div className={cn("flex flex-col gap-2.5", inset && "px-2.5")}>{children}</div>;
 }
 
 export const MetricsLayout = {

apps/webapp/app/components/metrics/BigNumber.tsx

@@ -40,7 +40,7 @@ export function BigNumber({
  typeof compactThreshold === "number" && v !== undefined && v >= compactThreshold;
 
  return (
- <div className="flex flex-col justify-between gap-4 rounded-sm border border-grid-dimmed bg-background-bright p-4">
+ <div className="group flex flex-col justify-between gap-4 rounded-lg border border-grid-bright bg-background-bright pb-4 pl-4 pr-3 pt-3">
  <div className="flex flex-wrap items-center justify-between gap-2">
  <Header3 className="leading-6">{title}</Header3>
  {accessory && <div className="shrink-0">{accessory}</div>}
@@ -56,7 +56,7 @@ export function BigNumber({
  ) : formattedValue !== undefined ? (
  <div className="flex flex-wrap items-baseline gap-2">
  {formattedValue}
- {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
+ {suffix && <div className={cn("text-xs tabular-nums", suffixClassName)}>{suffix}</div>}
  </div>
  ) : v !== undefined ? (
  <div className="flex flex-wrap items-baseline gap-2">
@@ -70,7 +70,7 @@ export function BigNumber({
  ) : (
  formatNumber(v)
  )}
- {suffix && <div className={cn("text-xs", suffixClassName)}>{suffix}</div>}
+ {suffix && <div className={cn("text-xs tabular-nums", suffixClassName)}>{suffix}</div>}
  </div>
  ) : (
  "–"

apps/webapp/app/components/metrics/MiniLineChart.tsx

@@ -138,7 +138,7 @@ export function MiniLineChart({
  type="monotone"
  dataKey="count"
  stroke={color}
- strokeWidth={1.5}
+ strokeWidth={1}
  dot={false}
  activeDot={{ r: 2.5, fill: color, strokeWidth: 0 }}
  isAnimationActive={false}
@@ -148,7 +148,7 @@ export function MiniLineChart({
  type="monotone"
  dataKey="throttledOverlay"
  stroke="var(--color-warning)"
- strokeWidth={1.5}
+ strokeWidth={1}
  dot={false}
  activeDot={{ r: 2.5, fill: "var(--color-warning)", strokeWidth: 0 }}
  connectNulls={false}

apps/webapp/app/components/primitives/SegmentedControl.tsx

@@ -76,6 +76,8 @@ type SegmentedControlProps = {
  variant?: VariantType;
  fullWidth?: boolean;
  onChange?: (value: string) => void;
+ /** Override the control's outer styling (e.g. a height that matches an adjacent input). */
+ className?: string;
 };
 
 export default function SegmentedControl({
@@ -86,6 +88,7 @@ export default function SegmentedControl({
  variant = "secondary/medium",
  fullWidth,
  onChange,
+ className,
 }: SegmentedControlProps) {
  const variantStyle = variants[variant];
  const _isPrimary = variant.startsWith("primary");
@@ -95,7 +98,8 @@ export default function SegmentedControl({
  className={cn(
  "flex rounded text-text-bright",
  variantStyle.base,
- fullWidth ? "w-full" : "w-fit"
+ fullWidth ? "w-full" : "w-fit",
+ className
  )}
  >
  <RadioGroup

apps/webapp/app/components/primitives/Table.tsx

@@ -181,6 +181,8 @@ type TableCellBasicProps = {
 type TableHeaderCellProps = TableCellBasicProps & {
  hiddenLabel?: boolean;
  tooltip?: ReactNode;
+ /** Extra class merged onto the tooltip content — e.g. widen it past the default max-width. */
+ tooltipContentClassName?: string;
  disableTooltipHoverableContent?: boolean;
  /**
  * When set (together with `onSort`), the header renders a sort indicator and becomes clickable.
@@ -202,6 +204,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
  colSpan,
  hiddenLabel = false,
  tooltip,
+ tooltipContentClassName,
  disableTooltipHoverableContent = false,
  sortDirection,
  onSort,
@@ -226,7 +229,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
  const tooltipNode = tooltip ? (
  <InfoIconTooltip
  content={tooltip}
- contentClassName="normal-case tracking-normal"
+ contentClassName={cn("normal-case tracking-normal", tooltipContentClassName)}
  disableHoverableContent={disableTooltipHoverableContent}
  />
  ) : null;
@@ -271,40 +274,19 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
  tabIndex={-1}
  >
  {sortable ? (
- // Order is always title → info icon → sort arrows. The info trigger is itself a <button>,
- // so it can't nest inside the sort <button> (invalid DOM). Without a tooltip the arrows
- // ride inside the full-width label button (unchanged). With a tooltip, the info sits
- // between the label and a separate arrows button — both buttons toggle the sort.
+ // Only the sort arrows toggle sorting — the label (and info tooltip) are not clickable, so
+ // clicking the header text does nothing. Order is always title → info icon → sort arrows.
  <div className={rowClassName}>
+ {label}
+ {tooltip ? tooltipNode : null}
  <button
  type="button"
  onClick={onSort}
- className={cn(
- "group/sort flex cursor-pointer select-none items-center gap-1 rounded-sm font-medium text-text-bright focus-custom",
- tooltip
- ? undefined
- : cn("w-full", {
- "justify-center": alignment === "center",
- "justify-end": alignment === "right",
- })
- )}
+ aria-label="Toggle sort"
+ className="group/sort flex cursor-pointer select-none items-center rounded-sm focus-custom"
  >
- {label}
- {!tooltip && sortIndicator}
+ {sortIndicator}
  </button>
- {tooltip ? (
- <>
- {tooltipNode}
- <button
- type="button"
- onClick={onSort}
- aria-label="Toggle sort"
- className="group/sort flex cursor-pointer select-none items-center rounded-sm focus-custom"
- >
- {sortIndicator}
- </button>
- </>
- ) : null}
  </div>
  ) : tooltip ? (
  <div className={rowClassName}>
@@ -407,19 +389,27 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
  // With leading/trailing content, the link is content-sized and the adornments sit beside
  // it (still inside the td) so interactive triggers never nest inside the <a>.
  leadingContent || trailingContent ? (
- <div className={cn(flexClasses, "gap-2")}>
- {leadingContent}
+ // Stretched link: the <a> covers the whole cell via an inset ::before overlay, so the
+ // entire cell is clickable — not just the text. The interactive adornments (tooltip
+ // icons, badge buttons) sit above the overlay (relative z-10) and stay clickable, and
+ // never nest inside the <a>.
+ <div className={cn(flexClasses, "relative gap-2")}>
+ {leadingContent ? (
+ <span className="relative z-10 flex items-center">{leadingContent}</span>
+ ) : null}
  <Link
  to={to}
  className={cn(
- "inline-flex items-center gap-2 focus:outline-hidden",
+ "inline-flex items-center gap-2 before:absolute before:inset-0 before:content-[''] focus:outline-hidden",
  actionClassName
  )}
  tabIndex={isTabbableCell ? 0 : -1}
  >
  {children}
  </Link>
- {trailingContent}
+ {trailingContent ? (
+ <span className="relative z-10 flex items-center">{trailingContent}</span>
+ ) : null}
  </div>
  ) : (
  <Link

apps/webapp/app/components/primitives/Tooltip.tsx

@@ -42,7 +42,7 @@ const TooltipContent = React.forwardRef<
  ref={ref}
  sideOffset={sideOffset}
  className={cn(
- "z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-hidden",
+ "z-50 max-w-[230px] overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-hidden",
  variantClasses[variant],
  className
  )}

apps/webapp/app/components/primitives/charts/Card.tsx

@@ -19,7 +19,7 @@ const CardHeader = ({ children, draggable }: { children: ReactNode; draggable?:
  return (
  <Header3
  className={cn(
- "drag-handle mb-3 flex items-center justify-between gap-2 pl-4 pr-3",
+ "drag-handle mb-3 flex items-start justify-between gap-2 pl-4 pr-3",
  draggable && "cursor-grab active:cursor-grabbing"
  )}
  >

apps/webapp/app/components/primitives/charts/Chart.tsx

@@ -176,7 +176,10 @@ const ChartTooltipContent = React.forwardRef<
  {payload.map((item, index) => {
  const key = `${nameKey || item.name || item.dataKey || "value"}`;
  const itemConfig = getPayloadConfigFromPayload(config, item, key);
- const indicatorColor = color || item.payload.fill || item.color;
+ // Prefer the series' configured colour over item.color: a threshold/gradient line's
+ // recharts colour is a `url(#…)` gradient ref, which is invalid as a CSS background and
+ // renders no swatch. The config colour is the intended solid series colour.
+ const indicatorColor = color || itemConfig?.color || item.payload.fill || item.color;
 
  return (
  <div

apps/webapp/app/components/primitives/charts/ChartBar.tsx

@@ -260,7 +260,7 @@ export function ChartBarRenderer({
  {/* When legend is shown below the chart, render tooltip with cursor only (no content popup).
  Otherwise render the full tooltip with zoom instructions. */}
  <ChartTooltip
- cursor={{ fill: "rgba(255, 255, 255, 0.06)" }}
+ cursor={{ fill: "rgba(255, 255, 255, 0.12)" }}
  content={
  syncZoomSelection && zoomFrom != null && zoomTo != null ? (
  <ZoomRangeTooltip from={zoomFrom} to={zoomTo} />

apps/webapp/app/components/primitives/charts/ChartCard.tsx

@@ -88,7 +88,9 @@ export function ChartCard({
  {maximizable && (
  <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
  <DialogContent fullscreen className="flex flex-col bg-background-bright">
- <DialogHeader>{title}</DialogHeader>
+ {/* In fullscreen, space the title's legend (the flex-col title node) further from the
+ title — gap-6 instead of the card's gap-1. */}
+ <DialogHeader className="[&>span]:gap-6">{title}</DialogHeader>
  <div className="min-h-0 w-full flex-1 overflow-hidden pt-4">
  {parentSync ? (
  <ChartSyncProvider onZoom={parentSync.onZoom}>