Skip to content

Commit 0dfaec2

Browse files
committed
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.
1 parent c6de9d4 commit 0dfaec2

1 file changed

Lines changed: 58 additions & 53 deletions

File tree

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

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

Lines changed: 58 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -625,59 +625,64 @@ function QueuesWithMetricsView() {
625625

626626
{/* Env saturation, Backlog, Scheduling delay p95, Throttled viz — full-size, synced,
627627
drag-to-zoom line charts (Agent page pattern). Four chart tiles: 2x2 below lg, 4-up
628-
from lg, derived from the tile count. `kind="charts"` bakes the fixed row height. */}
629-
<ChartSyncProvider onZoom={zoomToTimeFilter}>
630-
<MetricsLayout.Grid kind="charts">
631-
{QUEUE_HEADER_TILES.map((tile) => (
632-
<QueueEnvMetricChart
633-
key={tile.id}
634-
tile={tile}
635-
timeRange={timeRange}
636-
queueNames={chartQueueNames}
637-
referenceLines={
638-
tile.id === "saturation"
639-
? [
640-
{
641-
y: 100,
642-
label: `Limit ${environment.concurrencyLimit}`,
643-
labelPlacement: "outside" as const,
644-
},
645-
...(environment.burstFactor > 1
646-
? [
647-
{
648-
y: Math.round(environment.burstFactor * 100),
649-
label: `Burst ${Math.round(
650-
environment.concurrencyLimit * environment.burstFactor
651-
)}`,
652-
labelPlacement: "outside" as const,
653-
},
654-
]
655-
: []),
656-
]
657-
: undefined
658-
}
659-
// Saturation and p95 "step over the line": a per-bucket overlay retraces only
660-
// the over-threshold stretches in warning colour, so under-threshold values stay
661-
// blue. (A gradient split can't do this reliably — an SVG objectBoundingBox
662-
// gradient tracks the line's own bbox, not the y-axis, so a low/flat line reads
663-
// as entirely warning-coloured.)
664-
// All thresholded lines colour warning where they step over the threshold: the
665-
// per-bucket overlay retraces only the over-threshold stretches, so the colour
666-
// change tracks the axis crossing.
667-
warningOverlay={
668-
tile.id === "saturation"
669-
? { threshold: 100 }
670-
: tile.id === "p95"
671-
? { threshold: 60_000 }
672-
: tile.id === "throttled"
673-
? // Integer counts: threshold 0 warns once a bucket has ≥1 throttle.
674-
{ threshold: 0 }
675-
: undefined
676-
}
677-
/>
678-
))}
679-
</MetricsLayout.Grid>
680-
</ChartSyncProvider>
628+
from lg, derived from the tile count. `kind="charts"` bakes the fixed row height.
629+
Only when there are queues to chart: not-success states (engine-version, no tasks) and a
630+
filtered-to-empty list leave chartQueueNames empty, where the tiles would just render
631+
four "No activity" cards above the blank state. */}
632+
{chartQueueNames.length > 0 ? (
633+
<ChartSyncProvider onZoom={zoomToTimeFilter}>
634+
<MetricsLayout.Grid kind="charts">
635+
{QUEUE_HEADER_TILES.map((tile) => (
636+
<QueueEnvMetricChart
637+
key={tile.id}
638+
tile={tile}
639+
timeRange={timeRange}
640+
queueNames={chartQueueNames}
641+
referenceLines={
642+
tile.id === "saturation"
643+
? [
644+
{
645+
y: 100,
646+
label: `Limit ${environment.concurrencyLimit}`,
647+
labelPlacement: "outside" as const,
648+
},
649+
...(environment.burstFactor > 1
650+
? [
651+
{
652+
y: Math.round(environment.burstFactor * 100),
653+
label: `Burst ${Math.round(
654+
environment.concurrencyLimit * environment.burstFactor
655+
)}`,
656+
labelPlacement: "outside" as const,
657+
},
658+
]
659+
: []),
660+
]
661+
: undefined
662+
}
663+
// Saturation and p95 "step over the line": a per-bucket overlay retraces only
664+
// the over-threshold stretches in warning colour, so under-threshold values stay
665+
// blue. (A gradient split can't do this reliably — an SVG objectBoundingBox
666+
// gradient tracks the line's own bbox, not the y-axis, so a low/flat line reads
667+
// as entirely warning-coloured.)
668+
// All thresholded lines colour warning where they step over the threshold: the
669+
// per-bucket overlay retraces only the over-threshold stretches, so the colour
670+
// change tracks the axis crossing.
671+
warningOverlay={
672+
tile.id === "saturation"
673+
? { threshold: 100 }
674+
: tile.id === "p95"
675+
? { threshold: 60_000 }
676+
: tile.id === "throttled"
677+
? // Integer counts: threshold 0 warns once a bucket has ≥1 throttle.
678+
{ threshold: 0 }
679+
: undefined
680+
}
681+
/>
682+
))}
683+
</MetricsLayout.Grid>
684+
</ChartSyncProvider>
685+
) : null}
681686

682687
{success ? (
683688
<MetricsLayout.Content>

0 commit comments

Comments
 (0)