@@ -68,7 +68,6 @@ import { EnvironmentQueuePresenter } from "~/presenters/v3/EnvironmentQueuePrese
6868import { QueueListPresenter } from "~/presenters/v3/QueueListPresenter.server" ;
6969import { requireUserId } from "~/services/session.server" ;
7070import { cn } from "~/utils/cn" ;
71- import { formatNumberCompact } from "~/utils/numberFormatter" ;
7271import {
7372 concurrencyPath ,
7473 docsPath ,
@@ -346,13 +345,7 @@ export default function Page() {
346345 < BigNumber
347346 title = "Queued"
348347 value = { environment . queued }
349- suffix = {
350- < QueuedSuffix
351- queued = { environment . queued }
352- queueSizeLimit = { environment . queueSizeLimit }
353- isPaused = { env . paused }
354- />
355- }
348+ suffix = { env . paused ? < span className = "text-warning" > paused</ span > : undefined }
356349 animate
357350 accessory = {
358351 < div className = "flex items-start gap-1" >
@@ -519,7 +512,10 @@ export default function Page() {
519512 { queues . length > 0 ? (
520513 queues . map ( ( queue ) => {
521514 const limit = queue . concurrencyLimit ?? environment . concurrencyLimit ;
522- const isAtLimit = queue . running >= limit ;
515+ const isAtConcurrencyLimit = queue . running >= limit ;
516+ const isAtQueueLimit =
517+ environment . queueSizeLimit !== null &&
518+ queue . queued >= environment . queueSizeLimit ;
523519 const queueFilterableName = `${ queue . type === "task" ? "task/" : "" } ${
524520 queue . name
525521 } `;
@@ -545,7 +541,12 @@ export default function Page() {
545541 Paused
546542 </ Badge >
547543 ) : null }
548- { isAtLimit ? (
544+ { isAtQueueLimit ? (
545+ < Badge variant = "extra-small" className = "text-error" >
546+ At queue limit
547+ </ Badge >
548+ ) : null }
549+ { isAtConcurrencyLimit ? (
549550 < Badge variant = "extra-small" className = "text-warning" >
550551 At concurrency limit
551552 </ Badge >
@@ -556,7 +557,8 @@ export default function Page() {
556557 alignment = "right"
557558 className = { cn (
558559 "w-[1%] pl-16 tabular-nums" ,
559- queue . paused ? "opacity-50" : undefined
560+ queue . paused ? "opacity-50" : undefined ,
561+ isAtQueueLimit && "text-error"
560562 ) }
561563 >
562564 { queue . queued }
@@ -567,7 +569,7 @@ export default function Page() {
567569 "w-[1%] pl-16 tabular-nums" ,
568570 queue . paused ? "opacity-50" : undefined ,
569571 queue . running > 0 && "text-text-bright" ,
570- isAtLimit && "text-warning"
572+ isAtConcurrencyLimit && "text-warning"
571573 ) }
572574 >
573575 { queue . running }
@@ -587,7 +589,7 @@ export default function Page() {
587589 className = { cn (
588590 "w-[1%] pl-16" ,
589591 queue . paused ? "opacity-50" : undefined ,
590- isAtLimit && "text-warning" ,
592+ isAtConcurrencyLimit && "text-warning" ,
591593 queue . concurrency ?. overriddenAt && "font-medium text-text-bright"
592594 ) }
593595 >
@@ -1128,53 +1130,3 @@ function BurstFactorTooltip({
11281130 />
11291131 ) ;
11301132}
1131-
1132- function getQueueUsageColorClass ( current : number , limit : number | null ) : string | undefined {
1133- if ( ! limit ) return undefined ;
1134- const percentage = current / limit ;
1135- if ( percentage >= 1 ) return "text-error" ;
1136- if ( percentage >= 0.9 ) return "text-warning" ;
1137- return undefined ;
1138- }
1139-
1140- /**
1141- * Renders the suffix for the Queued BigNumber, showing:
1142- * - The limit with usage color and tooltip (if queueSizeLimit is set)
1143- * - "paused" text (if environment is paused)
1144- * - Both indicators when applicable
1145- */
1146- function QueuedSuffix ( {
1147- queued,
1148- queueSizeLimit,
1149- isPaused,
1150- } : {
1151- queued : number ;
1152- queueSizeLimit : number | null ;
1153- isPaused : boolean ;
1154- } ) {
1155- const showLimit = queueSizeLimit !== null ;
1156-
1157- if ( ! showLimit && ! isPaused ) {
1158- return null ;
1159- }
1160-
1161- return (
1162- < span className = "flex items-center gap-1" >
1163- { showLimit && (
1164- < >
1165- < span className = "text-text-dimmed" > /</ span >
1166- < span className = { getQueueUsageColorClass ( queued , queueSizeLimit ) } >
1167- { formatNumberCompact ( queueSizeLimit ) }
1168- </ span >
1169- < InfoIconTooltip
1170- content = "Maximum pending runs across all queues in this environment"
1171- contentClassName = "max-w-xs"
1172- />
1173- </ >
1174- ) }
1175- { isPaused && (
1176- < span className = "text-warning" > { showLimit ? "(paused)" : "paused" } </ span >
1177- ) }
1178- </ span >
1179- ) ;
1180- }
0 commit comments