Skip to content

Commit 7daa774

Browse files
samejrsamejr
committed
Adds a new col for showing how the queue is limited
1 parent b25c064 commit 7daa774

File tree

1 file changed

+122
-76
lines changed
  • apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues

1 file changed

+122
-76
lines changed

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

Lines changed: 122 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ import { docsPath, EnvironmentParamSchema, v3BillingPath } from "~/utils/pathBui
6161
import { PauseEnvironmentService } from "~/v3/services/pauseEnvironment.server";
6262
import { PauseQueueService } from "~/v3/services/pauseQueue.server";
6363
import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
64+
import { Header3 } from "~/components/primitives/Headers";
6465

6566
const SearchParamsSchema = z.object({
6667
page: z.coerce.number().min(1).default(1),
@@ -310,6 +311,36 @@ export default function Page() {
310311
<TableHeaderCell>Name</TableHeaderCell>
311312
<TableHeaderCell alignment="right">Queued</TableHeaderCell>
312313
<TableHeaderCell alignment="right">Running/limit</TableHeaderCell>
314+
<TableHeaderCell
315+
alignment="right"
316+
tooltip={
317+
<div className="max-w-xs space-y-2 p-1 text-left">
318+
<div className="space-y-0.5">
319+
<Header3>Environment</Header3>
320+
<Paragraph
321+
variant="small"
322+
className="!text-wrap text-text-dimmed"
323+
spacing
324+
>
325+
This queue is limited by your environment's concurrency limit of{" "}
326+
{environment.concurrencyLimit}.
327+
</Paragraph>
328+
</div>
329+
<div className="space-y-0.5">
330+
<Header3>User</Header3>
331+
<Paragraph
332+
variant="small"
333+
className="!text-wrap text-text-dimmed"
334+
spacing
335+
>
336+
This queue is limited by a concurrency limit set in your code.
337+
</Paragraph>
338+
</div>
339+
</div>
340+
}
341+
>
342+
Limited by
343+
</TableHeaderCell>
313344
<TableHeaderCell
314345
alignment="right"
315346
tooltip={
@@ -343,88 +374,103 @@ export default function Page() {
343374
</TableHeader>
344375
<TableBody>
345376
{queues.length > 0 ? (
346-
queues.map((queue) => (
347-
<TableRow key={queue.name}>
348-
<TableCell>
349-
<span className="flex items-center gap-2">
350-
{queue.type === "task" ? (
351-
<SimpleTooltip
352-
button={
353-
<TaskIconSmall
354-
className={cn(
355-
"size-[1.125rem] text-blue-500",
356-
queue.paused && "opacity-50"
357-
)}
358-
/>
359-
}
360-
content={`This queue was automatically created from your "${queue.name}" task`}
361-
/>
362-
) : (
363-
<SimpleTooltip
364-
button={
365-
<RectangleStackIcon
366-
className={cn(
367-
"size-[1.125rem] text-purple-500",
368-
queue.paused && "opacity-50"
369-
)}
370-
/>
371-
}
372-
content={`This is a custom queue you added in your code.`}
373-
/>
374-
)}
375-
<span className={queue.paused ? "opacity-50" : undefined}>
376-
{queue.name}
377+
queues.map((queue) => {
378+
const limit = queue.concurrencyLimit ?? environment.concurrencyLimit;
379+
const isAtLimit = queue.running === limit;
380+
return (
381+
<TableRow key={queue.name}>
382+
<TableCell>
383+
<span className="flex items-center gap-2">
384+
{queue.type === "task" ? (
385+
<SimpleTooltip
386+
button={
387+
<TaskIconSmall
388+
className={cn(
389+
"size-[1.125rem] text-blue-500",
390+
queue.paused && "opacity-50"
391+
)}
392+
/>
393+
}
394+
content={`This queue was automatically created from your "${queue.name}" task`}
395+
/>
396+
) : (
397+
<SimpleTooltip
398+
button={
399+
<RectangleStackIcon
400+
className={cn(
401+
"size-[1.125rem] text-purple-500",
402+
queue.paused && "opacity-50"
403+
)}
404+
/>
405+
}
406+
content={`This is a custom queue you added in your code.`}
407+
/>
408+
)}
409+
<span className={queue.paused ? "opacity-50" : undefined}>
410+
{queue.name}
411+
</span>
412+
{queue.paused ? (
413+
<Badge variant="extra-small" className="text-warning">
414+
Paused
415+
</Badge>
416+
) : null}
417+
{isAtLimit ? (
418+
<Badge variant="extra-small" className="text-warning">
419+
At concurrency limit
420+
</Badge>
421+
) : null}
377422
</span>
378-
{queue.paused ? (
379-
<Badge variant="extra-small" className="text-warning">
380-
Paused
381-
</Badge>
382-
) : null}
383-
{queue.running === queue.concurrencyLimit ? (
384-
<Badge variant="extra-small" className="text-warning">
385-
At concurrency limit
386-
</Badge>
387-
) : null}
388-
</span>
389-
</TableCell>
390-
<TableCell
391-
alignment="right"
392-
className={queue.paused ? "opacity-50" : undefined}
393-
>
394-
{queue.queued}
395-
</TableCell>
396-
<TableCell
397-
alignment="right"
398-
className={cn(
399-
queue.paused ? "opacity-50" : undefined,
400-
queue.running === queue.concurrencyLimit && "text-warning"
401-
)}
402-
>
403-
{queue.running}/
404-
{queue.concurrencyLimit ?? (
423+
</TableCell>
424+
<TableCell
425+
alignment="right"
426+
className={queue.paused ? "opacity-50" : undefined}
427+
>
428+
{queue.queued}
429+
</TableCell>
430+
<TableCell
431+
alignment="right"
432+
className={cn(
433+
queue.paused ? "tabular-nums opacity-50" : undefined,
434+
isAtLimit && "text-warning"
435+
)}
436+
>
437+
{queue.running}/
405438
<span
406439
className={cn(
407-
"text-text-dimmed",
408-
queue.running === queue.concurrencyLimit && "text-warning"
440+
"tabular-nums text-text-dimmed",
441+
isAtLimit && "text-warning"
409442
)}
410443
>
411-
{environment.concurrencyLimit} (Max)
444+
{limit}
412445
</span>
413-
)}
414-
</TableCell>
415-
<TableCell
416-
alignment="right"
417-
className={queue.paused ? "opacity-50" : undefined}
418-
>
419-
{queue.releaseConcurrencyOnWaitpoint ? "Yes" : "No"}
420-
</TableCell>
421-
<TableCellMenu
422-
isSticky
423-
visibleButtons={queue.paused && <QueuePauseResumeButton queue={queue} />}
424-
hiddenButtons={!queue.paused && <QueuePauseResumeButton queue={queue} />}
425-
/>
426-
</TableRow>
427-
))
446+
</TableCell>
447+
<TableCell
448+
alignment="right"
449+
className={cn(
450+
queue.paused ? "opacity-50" : undefined,
451+
isAtLimit && "text-warning"
452+
)}
453+
>
454+
{queue.concurrencyLimit ? "User" : "Environment"}
455+
</TableCell>
456+
<TableCell
457+
alignment="right"
458+
className={queue.paused ? "opacity-50" : undefined}
459+
>
460+
{queue.releaseConcurrencyOnWaitpoint ? "Yes" : "No"}
461+
</TableCell>
462+
<TableCellMenu
463+
isSticky
464+
visibleButtons={
465+
queue.paused && <QueuePauseResumeButton queue={queue} />
466+
}
467+
hiddenButtons={
468+
!queue.paused && <QueuePauseResumeButton queue={queue} />
469+
}
470+
/>
471+
</TableRow>
472+
);
473+
})
428474
) : (
429475
<TableRow>
430476
<TableCell colSpan={6}>

0 commit comments

Comments
 (0)