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

.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/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,11 @@ 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}>