fix(webapp): hide queue header charts when there are no queues to chart

The four header chart tiles rendered even in the not-success states
(engine-version upgrade, no tasks) and when the list filtered to empty,
showing four empty 'No activity' cards above the blank state. Gate them
on the same queue set the table shows.

Author: kathiekiwi

apps/webapp/app/presenters/v3/reports/health/health-data.ts

@@ -108,7 +108,25 @@ function isConcurrencyRejection(error: unknown): boolean {
 /** rows + the actual (clip-aware) time window the query service resolved for this run. */
 type QueryResult = { rows: Row[]; timeRange: { from: Date; to: Date } };
 
-async function runQuery(
+/** Runs one (TRQL) report query. Injectable so tests can drive the loader with canned results. */
+export type HealthQueryRunner = (
+  env: AuthenticatedEnvironment,
+  query: string,
+  period: string
+) => Promise<QueryResult>;
+
+/**
+ * The loader's IO boundary (§7 Seam A): ClickHouse via the query service, Redis via the engine.
+ * Defaults wire the real singletons; `loadHealthInput` accepts an override so its orchestration
+ * (source selection, snapshot fallback on empty/throw, dlq parse, window math) is testable without
+ * booting the env-bound query-service client.
+ */
+export type HealthDeps = {
+  runQuery: HealthQueryRunner;
+  lengthOfEnvQueue: (env: AuthenticatedEnvironment) => Promise<number | undefined>;
+};
+
+async function executeReportQuery(
   env: AuthenticatedEnvironment,
   query: string,
   period: string
@@ -226,14 +244,21 @@ ORDER BY fails DESC
 LIMIT 10`;
 }
 
+/** Default IO wiring — the real query-service runner + the engine's env-queue length. */
+const defaultHealthDeps: HealthDeps = {
+  runQuery: executeReportQuery,
+  lengthOfEnvQueue: (env) => engine.lengthOfEnvQueue(env),
+};
+
 /** Run a query that may reference not-yet-available columns; never break the report. */
 async function tryQuery(
+  deps: HealthDeps,
   env: AuthenticatedEnvironment,
   query: string,
   period: string
 ): Promise<Row[]> {
   try {
-    return (await runQuery(env, query, period)).rows;
+    return (await deps.runQuery(env, query, period)).rows;
   } catch {
     return [];
   }
@@ -266,7 +291,8 @@ export interface FlowSource {
   loadFlow(
     env: AuthenticatedEnvironment,
     period: string,
-    ctx: RunsContext
+    ctx: RunsContext,
+    deps: HealthDeps
   ): Promise<FlowData | null>;
 }
 
@@ -276,20 +302,20 @@ export interface FlowSource {
  * caller can fall back to the snapshot.
  */
 export const QueueMetricsSource: FlowSource = {
-  async loadFlow(env, period) {
+  async loadFlow(env, period, _ctx, deps) {
     try {
       // Redis depth is not a ClickHouse query, so it runs alongside (doesn't count toward the cap).
-      const pendingNowPromise = engine.lengthOfEnvQueue(env);
+      const pendingNowPromise = deps.lengthOfEnvQueue(env);
 
       // Bug 1 fix — route all CH queries through the concurrency cap (max 2 in flight) instead
       // of firing 4 at once via Promise.all.
       const [series, liveScalar, baselineScalar, worstRows, dlqRows] = await mapWithConcurrency(
         [
-          () => runQuery(env, envSeriesQuery(), period).then((r) => r.rows),
-          () => runQuery(env, envScalarQuery(), period).then((r) => r.rows[0] ?? {}),
-          () => runQuery(env, envScalarQuery(), BASELINE_PERIOD).then((r) => r.rows[0] ?? {}),
-          () => tryQuery(env, queueWorstQuery(), period),
-          () => tryQuery(env, dlqTotalQuery(), period),
+          () => deps.runQuery(env, envSeriesQuery(), period).then((r) => r.rows),
+          () => deps.runQuery(env, envScalarQuery(), period).then((r) => r.rows[0] ?? {}),
+          () => deps.runQuery(env, envScalarQuery(), BASELINE_PERIOD).then((r) => r.rows[0] ?? {}),
+          () => tryQuery(deps, env, queueWorstQuery(), period),
+          () => tryQuery(deps, env, dlqTotalQuery(), period),
         ],
         CH_CONCURRENCY,
         (task) => task()
@@ -379,8 +405,8 @@ function buildQueueMetricsFlow(
  * series is shape-only (`estimated: true`).
  */
 export const SnapshotFlowSource: FlowSource = {
-  async loadFlow(env, _period, ctx) {
-    const pendingNow = (await engine.lengthOfEnvQueue(env)) ?? 0;
+  async loadFlow(env, _period, ctx, deps) {
+    const pendingNow = (await deps.lengthOfEnvQueue(env)) ?? 0;
 
     let backlog = 0;
     const proxy = ctx.liveSeries.map((r) => {
@@ -415,15 +441,16 @@ export const SnapshotFlowSource: FlowSource = {
 export async function loadHealthInput(
   env: AuthenticatedEnvironment,
   period: string,
-  now: Date = new Date()
+  now: Date = new Date(),
+  deps: HealthDeps = defaultHealthDeps
 ): Promise<HealthInput> {
   // Bug 1 fix — route the runs-phase CH queries through the concurrency cap (max 2 in flight)
   // instead of firing all 3 at once, so we never exceed the query service's per-project limit.
   const [liveScalarRes, liveSeriesRes, baselineScalarRes] = await mapWithConcurrency(
     [
-      () => runQuery(env, runsScalarQuery(), period),
-      () => runQuery(env, runsSeriesQuery(), period),
-      () => runQuery(env, runsScalarQuery(), BASELINE_PERIOD),
+      () => deps.runQuery(env, runsScalarQuery(), period),
+      () => deps.runQuery(env, runsSeriesQuery(), period),
+      () => deps.runQuery(env, runsScalarQuery(), BASELINE_PERIOD),
     ],
     CH_CONCURRENCY,
     (task) => task()
@@ -444,8 +471,8 @@ export async function loadHealthInput(
 
   // Prefer measured queue metrics; fall back to the runs snapshot when unavailable.
   const flow =
-    (await QueueMetricsSource.loadFlow(env, period, ctx)) ??
-    (await SnapshotFlowSource.loadFlow(env, period, ctx))!;
+    (await QueueMetricsSource.loadFlow(env, period, ctx, deps)) ??
+    (await SnapshotFlowSource.loadFlow(env, period, ctx, deps))!;
 
   const failuresSeries = resampleSeries(
     ctx.liveSeries.map((r) => failureRate(num(r.failures), num(r.completed)))
@@ -470,7 +497,7 @@ export async function loadHealthInput(
     normalRate > 0 &&
     rate / normalRate >= HEALTH_THRESHOLDS.failures.warnMult;
   const failureBreakdown = failureDegraded
-    ? await loadFailureBreakdown(env, period, num(ctx.liveScalar.failures))
+    ? await loadFailureBreakdown(deps, env, period, num(ctx.liveScalar.failures))
     : undefined;
 
   const lastCompletion = parseTimestamp(ctx.liveScalar.last_completion);
@@ -498,12 +525,13 @@ export async function loadHealthInput(
 }
 
 async function loadFailureBreakdown(
+  deps: HealthDeps,
   env: AuthenticatedEnvironment,
   period: string,
   totalFails: number
 ): Promise<HealthInput["failureBreakdown"]> {
   if (totalFails <= 0) return undefined;
-  const rows = await tryQuery(env, failureBreakdownQuery(), period);
+  const rows = await tryQuery(deps, env, failureBreakdownQuery(), period);
   if (rows.length === 0) return undefined;
   const top = rows[0];
   return { task: String(top.task ?? "unknown"), share: num(top.fails) / totalFails };

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx

@@ -625,59 +625,64 @@ function QueuesWithMetricsView() {
 
         {/* Env saturation, Backlog, Scheduling delay p95, Throttled viz — full-size, synced,
             drag-to-zoom line charts (Agent page pattern). Four chart tiles: 2x2 below lg, 4-up
-            from lg, derived from the tile count. `kind="charts"` bakes the fixed row height. */}
-        <ChartSyncProvider onZoom={zoomToTimeFilter}>
-          <MetricsLayout.Grid kind="charts">
-            {QUEUE_HEADER_TILES.map((tile) => (
-              <QueueEnvMetricChart
-                key={tile.id}
-                tile={tile}
-                timeRange={timeRange}
-                queueNames={chartQueueNames}
-                referenceLines={
-                  tile.id === "saturation"
-                    ? [
-                        {
-                          y: 100,
-                          label: `Limit ${environment.concurrencyLimit}`,
-                          labelPlacement: "outside" as const,
-                        },
-                        ...(environment.burstFactor > 1
-                          ? [
-                              {
-                                y: Math.round(environment.burstFactor * 100),
-                                label: `Burst ${Math.round(
-                                  environment.concurrencyLimit * environment.burstFactor
-                                )}`,
-                                labelPlacement: "outside" as const,
-                              },
-                            ]
-                          : []),
-                      ]
-                    : undefined
-                }
-                // Saturation and p95 "step over the line": a per-bucket overlay retraces only
-                // the over-threshold stretches in warning colour, so under-threshold values stay
-                // blue. (A gradient split can't do this reliably — an SVG objectBoundingBox
-                // gradient tracks the line's own bbox, not the y-axis, so a low/flat line reads
-                // as entirely warning-coloured.)
-                // All thresholded lines colour warning where they step over the threshold: the
-                // per-bucket overlay retraces only the over-threshold stretches, so the colour
-                // change tracks the axis crossing.
-                warningOverlay={
-                  tile.id === "saturation"
-                    ? { threshold: 100 }
-                    : tile.id === "p95"
-                      ? { threshold: 60_000 }
-                      : tile.id === "throttled"
-                        ? // Integer counts: threshold 0 warns once a bucket has ≥1 throttle.
-                          { threshold: 0 }
-                        : undefined
-                }
-              />
-            ))}
-          </MetricsLayout.Grid>
-        </ChartSyncProvider>
+            from lg, derived from the tile count. `kind="charts"` bakes the fixed row height.
+            Only when there are queues to chart: not-success states (engine-version, no tasks) and a
+            filtered-to-empty list leave chartQueueNames empty, where the tiles would just render
+            four "No activity" cards above the blank state. */}
+        {chartQueueNames.length > 0 ? (
+          <ChartSyncProvider onZoom={zoomToTimeFilter}>
+            <MetricsLayout.Grid kind="charts">
+              {QUEUE_HEADER_TILES.map((tile) => (
+                <QueueEnvMetricChart
+                  key={tile.id}
+                  tile={tile}
+                  timeRange={timeRange}
+                  queueNames={chartQueueNames}
+                  referenceLines={
+                    tile.id === "saturation"
+                      ? [
+                          {
+                            y: 100,
+                            label: `Limit ${environment.concurrencyLimit}`,
+                            labelPlacement: "outside" as const,
+                          },
+                          ...(environment.burstFactor > 1
+                            ? [
+                                {
+                                  y: Math.round(environment.burstFactor * 100),
+                                  label: `Burst ${Math.round(
+                                    environment.concurrencyLimit * environment.burstFactor
+                                  )}`,
+                                  labelPlacement: "outside" as const,
+                                },
+                              ]
+                            : []),
+                        ]
+                      : undefined
+                  }
+                  // Saturation and p95 "step over the line": a per-bucket overlay retraces only
+                  // the over-threshold stretches in warning colour, so under-threshold values stay
+                  // blue. (A gradient split can't do this reliably — an SVG objectBoundingBox
+                  // gradient tracks the line's own bbox, not the y-axis, so a low/flat line reads
+                  // as entirely warning-coloured.)
+                  // All thresholded lines colour warning where they step over the threshold: the
+                  // per-bucket overlay retraces only the over-threshold stretches, so the colour
+                  // change tracks the axis crossing.
+                  warningOverlay={
+                    tile.id === "saturation"
+                      ? { threshold: 100 }
+                      : tile.id === "p95"
+                        ? { threshold: 60_000 }
+                        : tile.id === "throttled"
+                          ? // Integer counts: threshold 0 warns once a bucket has ≥1 throttle.
+                            { threshold: 0 }
+                          : undefined
+                  }
+                />
+              ))}
+            </MetricsLayout.Grid>
+          </ChartSyncProvider>
+        ) : null}
 
         {success ? (
           <MetricsLayout.Content>