feat(webapp,run-engine): archive unused queues from the Concurrency page

Archive queues you no longer use from the Concurrency page. Archived
queues are hidden from the list and don't count towards the Allocated
total, and you can bring them back at any time.

Mono-RevId: 6b28883389e5d2b87396688fe9c41a230337cb45

Author: Mariefay

.server-changes/archive-unused-queues.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Archive queues you no longer use from the Concurrency page. Archived queues are hidden from the list and no longer count towards allocated concurrency.

apps/webapp/app/components/queues/QueueControls.tsx

@@ -1,10 +1,26 @@
-import { AdjustmentsHorizontalIcon, PauseIcon, PlayIcon } from "@heroicons/react/20/solid";
+import {
+  AdjustmentsHorizontalIcon,
+  ArchiveBoxArrowDownIcon,
+  ArchiveBoxXMarkIcon,
+  PauseIcon,
+  PlayIcon,
+} from "@heroicons/react/20/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
-import { Form, useNavigation } from "@remix-run/react";
+import { Form, useFetcher, useNavigation } from "@remix-run/react";
 import { useEffect, useState } from "react";
 import { cn } from "~/utils/cn";
 import type { QueueLimits } from "~/components/queues/queue-limits";
-import { Button, type ButtonVariant } from "~/components/primitives/Buttons";
+import { Button, type ButtonVariant, LinkButton } from "~/components/primitives/Buttons";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import type { ArchiveCheckResult } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues.$queueParam.archive-check";
+import {
+  type EnvironmentForPath,
+  type OrgForPath,
+  type ProjectForPath,
+  v3RunsPath,
+} from "~/utils/pathBuilder";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "~/components/primitives/Dialog";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
@@ -24,9 +40,10 @@ import {
 } from "~/components/primitives/Tooltip";
 
 // Per-queue action controls. Extracted from the Queues list route so the queue detail page can
-// reuse them. Both submit a `<Form method="post">` to the current route, so whichever route renders
-// them must handle the `queue-pause` / `queue-resume` / `queue-override` / `queue-remove-override`
-// actions (see `handleQueueMutationAction` in `~/models/queueMutation.server`).
+// reuse them. They submit a `<Form method="post">` to the current route, so whichever route renders
+// them must handle the `queue-pause` / `queue-resume` / `queue-override` / `queue-remove-override` /
+// `queue-archive` / `queue-unarchive` actions (see `handleQueueMutationAction` in
+// `~/models/queueMutation.server`).
 
 export function QueuePauseResumeButton({
   queue,
@@ -594,3 +611,185 @@ export function QueueOverrideConcurrencyButton({
     </Dialog>
   );
 }
+
+function archiveCheckPath(
+  organization: OrgForPath,
+  project: ProjectForPath,
+  environment: EnvironmentForPath,
+  queueFriendlyId: string
+) {
+  return `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/queues/${queueFriendlyId}/archive-check`;
+}
+
+export function QueueArchiveButton({
+  queue,
+  trigger = "menu",
+  disabled = false,
+  lastOnPage = false,
+  onDone,
+}: {
+  /** The "id" here is a friendlyId */
+  queue: { id: string; name: string; type: "task" | "custom"; archivedAt: Date | null };
+  /** The only row on a later page, so archiving it should go back a page. */
+  lastOnPage?: boolean;
+  /** "menu" renders a row-menu item; "button" a standalone button for the detail page. */
+  trigger?: "menu" | "button";
+  disabled?: boolean;
+  /** Called after submitting, e.g. to close the row menu that hosts this control. */
+  onDone?: () => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+  const check = useFetcher<ArchiveCheckResult>();
+  const noPermission = "You don't have permission to manage queues";
+
+  if (queue.archivedAt) {
+    return (
+      <Form method="post" onSubmit={() => onDone?.()}>
+        <input type="hidden" name="action" value="queue-unarchive" />
+        <input type="hidden" name="friendlyId" value={queue.id} />
+        {trigger === "button" ? (
+          <Button
+            type="submit"
+            variant="secondary/small"
+            LeadingIcon={ArchiveBoxXMarkIcon}
+            disabled={disabled}
+            tooltip={disabled ? noPermission : undefined}
+          >
+            Unarchive
+          </Button>
+        ) : (
+          <PopoverMenuItem
+            type="submit"
+            icon={ArchiveBoxXMarkIcon}
+            leadingIconClassName="text-text-dimmed"
+            title={disabled ? noPermission : "Unarchive"}
+            disabled={disabled}
+          />
+        )}
+      </Form>
+    );
+  }
+
+  const openDialog = (open: boolean) => {
+    setIsOpen(open);
+    if (open) {
+      check.load(archiveCheckPath(organization, project, environment, queue.id));
+    }
+  };
+
+  const result = check.state === "idle" ? check.data : undefined;
+  const queueFilterName = queue.type === "task" ? `task/${queue.name}` : queue.name;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={openDialog}>
+      <DialogTrigger asChild>
+        {trigger === "button" ? (
+          <Button
+            type="button"
+            variant="secondary/small"
+            LeadingIcon={ArchiveBoxArrowDownIcon}
+            disabled={disabled}
+            tooltip={disabled ? noPermission : undefined}
+          >
+            Archive…
+          </Button>
+        ) : (
+          <PopoverMenuItem
+            icon={ArchiveBoxArrowDownIcon}
+            leadingIconClassName="text-text-dimmed"
+            title={disabled ? noPermission : "Archive..."}
+            disabled={disabled}
+          />
+        )}
+      </DialogTrigger>
+      <DialogContent>
+        {result === undefined ? (
+          <>
+            <DialogHeader>Archive queue?</DialogHeader>
+            <div className="flex items-center gap-2 pt-3">
+              <Spinner className="size-4" />
+              <Paragraph>Checking whether this queue can be archived…</Paragraph>
+            </div>
+          </>
+        ) : result.archivable ? (
+          <>
+            <DialogHeader>Archive queue?</DialogHeader>
+            <div className="flex flex-col gap-3 pt-3">
+              <Paragraph>
+                {`This hides the "${queue.name}" queue from this list. It doesn't affect any runs, and its limits and settings are kept.`}
+              </Paragraph>
+              <Paragraph>
+                If a future deploy declares this queue again, it will be unarchived automatically.
+                You can also find it with the "Show archived" toggle.
+              </Paragraph>
+              <Form
+                method="post"
+                onSubmit={() => {
+                  setIsOpen(false);
+                  onDone?.();
+                }}
+              >
+                <input type="hidden" name="action" value="queue-archive" />
+                <input type="hidden" name="friendlyId" value={queue.id} />
+                {lastOnPage ? <input type="hidden" name="lastOnPage" value="true" /> : null}
+                <FormButtons
+                  confirmButton={
+                    <Button
+                      type="submit"
+                      shortcut={{ modifiers: ["mod"], key: "enter" }}
+                      variant="primary/medium"
+                      LeadingIcon={ArchiveBoxArrowDownIcon}
+                    >
+                      Archive queue
+                    </Button>
+                  }
+                  cancelButton={
+                    <DialogClose asChild>
+                      <Button type="button" variant="secondary/medium">
+                        Cancel
+                      </Button>
+                    </DialogClose>
+                  }
+                />
+              </Form>
+            </div>
+          </>
+        ) : (
+          <>
+            <DialogHeader>Can't archive this queue yet</DialogHeader>
+            <div className="flex flex-col gap-3 pt-3">
+              <Paragraph>{result.reason}</Paragraph>
+              <FormButtons
+                confirmButton={
+                  result.activeRuns ? (
+                    <LinkButton
+                      variant="secondary/medium"
+                      to={v3RunsPath(organization, project, environment, {
+                        queues: [queueFilterName],
+                        statuses: ["PENDING", "DEQUEUED", "EXECUTING"],
+                        period: "30d",
+                        rootOnly: false,
+                      })}
+                    >
+                      View runs
+                    </LinkButton>
+                  ) : undefined
+                }
+                cancelButton={
+                  <DialogClose asChild>
+                    <Button type="button" variant="secondary/medium">
+                      Close
+                    </Button>
+                  </DialogClose>
+                }
+              />
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/webapp/app/models/queueMutation.server.ts

@@ -1,18 +1,21 @@
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import { getUserById } from "~/models/user.server";
+import { logger } from "~/services/logger.server";
 import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { concurrencySystem } from "~/v3/services/concurrencySystemInstance.server";
 import {
   isValidQueueOverridePercent,
   MAX_QUEUE_OVERRIDE_PERCENT,
   MIN_QUEUE_OVERRIDE_PERCENT,
 } from "~/v3/services/concurrencySystem.server";
+import { ArchiveQueueService, archiveQueueErrorMessage } from "~/v3/services/archiveQueue.server";
 import { PauseQueueService } from "~/v3/services/pauseQueue.server";
+import { queueArchivingEnabled } from "~/v3/services/queueArchivingEnabled.server";
 
 /**
- * Handles the per-queue mutating form actions (pause/resume/override/remove-override) shared by the
- * Queues list route and the queue detail route. Returns a redirect Response for one of those four
- * actions, or `null` if `formData`'s `action` isn't one of them (so the caller can fall through to
+ * Handles the per-queue mutating form actions (pause/resume/override/remove-override/archive/
+ * unarchive) shared by the Queues list route and the queue detail route. Returns a redirect Response
+ * for one of those actions, or `null` if `formData`'s `action` isn't one of them (so the caller can fall through to
  * its own action handling). `redirectPath` is where to send the user afterwards — the caller passes
  * its own page so a mutation from the detail page stays on the detail page.
  */
@@ -22,12 +25,15 @@ export async function handleQueueMutationAction({
   userId,
   formData,
   redirectPath,
+  archiveSuccessRedirectPath,
 }: {
   request: Request;
   environment: AuthenticatedEnvironment;
   userId: string;
   formData: FormData;
   redirectPath: string;
+  /** Where a successful archive goes, when the archived row leaves its page empty. */
+  archiveSuccessRedirectPath?: string;
 }): Promise<Response | null> {
   const action = formData.get("action");
 
@@ -281,6 +287,53 @@ export async function handleQueueMutationAction({
         noun === "limit" ? "Limit override removed" : "Queue concurrency limit reset"
       );
     }
+    case "queue-archive":
+    case "queue-unarchive": {
+      const friendlyId = formData.get("friendlyId");
+      if (!friendlyId) {
+        return redirectWithErrorMessage(redirectPath, request, "Queue ID is required");
+      }
+
+      // Unarchiving stays allowed so queues archived before the flag was turned off can come back.
+      if (
+        action === "queue-archive" &&
+        !(await queueArchivingEnabled(environment.organizationId))
+      ) {
+        return redirectWithErrorMessage(
+          redirectPath,
+          request,
+          "Queue archiving isn't enabled for this organization"
+        );
+      }
+
+      const service = new ArchiveQueueService();
+      const result =
+        action === "queue-archive"
+          ? await service.archive(environment, friendlyId.toString())
+          : await service.unarchive(environment, friendlyId.toString());
+
+      if (result.isErr()) {
+        if (result.error.type === "other") {
+          logger.error("Queue archive action failed", {
+            action,
+            friendlyId: friendlyId.toString(),
+            environmentId: environment.id,
+            error: result.error.cause,
+          });
+        }
+        return redirectWithErrorMessage(
+          redirectPath,
+          request,
+          archiveQueueErrorMessage(result.error)
+        );
+      }
+
+      return redirectWithSuccessMessage(
+        action === "queue-archive" ? (archiveSuccessRedirectPath ?? redirectPath) : redirectPath,
+        request,
+        action === "queue-archive" ? "Queue archived" : "Queue unarchived"
+      );
+    }
     default:
       return null;
   }

apps/webapp/app/presenters/v3/QueueAllocationPresenter.server.ts

@@ -1,9 +1,10 @@
+import { Prisma } from "@trigger.dev/database";
 import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { sqlDatabaseSchema } from "~/db.server";
 import { BasePresenter } from "./basePresenter.server";
 
 export type QueueAllocation = {
-  /** Number of V2 queues in the environment. */
+  /** Number of unarchived V2 queues in the environment. */
   totalQueues: number;
   /** Sum of explicit per-queue limits, each clamped to the env limit. */
   allocated: number;
@@ -16,16 +17,20 @@ export type QueueAllocation = {
  *
  * The page only needs the aggregate `allocated` value (sum of each queue's
  * explicit limit clamped to the env limit), so this computes it in a single
- * Postgres aggregate over ALL V2 queues in the environment — no row cap and no
- * Redis lookups.
+ * Postgres aggregate over every unarchived V2 queue in the environment — no row
+ * cap and no Redis lookups.
  */
 export class QueueAllocationPresenter extends BasePresenter {
   public async call({
     environment,
+    excludeArchived = true,
   }: {
     environment: AuthenticatedEnvironment;
+    /** Off when archiving is disabled for the org, so the tile matches the (unfiltered) list. */
+    excludeArchived?: boolean;
   }): Promise<QueueAllocation> {
     const envLimit = environment.maximumConcurrencyLimit;
+    const archivedFilter = excludeArchived ? Prisma.sql`AND "archivedAt" IS NULL` : Prisma.empty;
 
     const [row] = await this._replica.$queryRaw<
       {
@@ -45,6 +50,7 @@ export class QueueAllocationPresenter extends BasePresenter {
       FROM ${sqlDatabaseSchema}."TaskQueue"
       WHERE "runtimeEnvironmentId" = ${environment.id}
         AND "version" = 'V2'
+        ${archivedFilter}
     `;
 
     return {