Queue in run table and filtering

matt-aitken · matt-aitken · commit 8821f0d72b58 · 2025-07-21T16:12:15.000+01:00
diff --git a/apps/webapp/app/components/runs/v3/RunFilters.tsx b/apps/webapp/app/components/runs/v3/RunFilters.tsx
@@ -3,6 +3,7 @@ import {
   CalendarIcon,
   ClockIcon,
   FingerPrintIcon,
+  RectangleStackIcon,
   Squares2X2Icon,
   TagIcon,
   XMarkIcon,
@@ -41,9 +42,12 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "~/components/primitives/Tooltip";
+import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
+import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { useSearchParams } from "~/hooks/useSearchParam";
+import { type loader as queuesLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues";
 import { type loader as tagsLoader } from "~/routes/resources.projects.$projectParam.runs.tags";
 import { Button } from "../../primitives/Buttons";
 import { BulkActionTypeCombo } from "./BulkAction";
@@ -105,6 +109,7 @@ export const TaskRunListSearchFilters = z.object({
   batchId: z.string().optional(),
   runId: StringOrStringArray,
   scheduleId: z.string().optional(),
+  queues: StringOrStringArray,
 });
 
 export type TaskRunListSearchFilters = z.infer<typeof TaskRunListSearchFilters>;
@@ -138,6 +143,8 @@ export function filterTitle(filterKey: string) {
       return "Run ID";
     case "scheduleId":
       return "Schedule ID";
+    case "queues":
+      return "Queues";
     default:
       return filterKey;
   }
@@ -170,6 +177,8 @@ export function filterIcon(filterKey: string): ReactNode | undefined {
       return <FingerPrintIcon className="size-4" />;
     case "scheduleId":
       return <ClockIcon className="size-4" />;
+    case "queues":
+      return <RectangleStackIcon className="size-4" />;
     default:
       return undefined;
   }
@@ -204,6 +213,10 @@ export function getRunFiltersFromSearchParams(
         : undefined,
     batchId: searchParams.get("batchId") ?? undefined,
     scheduleId: searchParams.get("scheduleId") ?? undefined,
+    queues:
+      searchParams.getAll("queues").filter((v) => v.length > 0).length > 0
+        ? searchParams.getAll("queues")
+        : undefined,
   };
 
   const parsed = TaskRunListSearchFilters.safeParse(params);
@@ -237,7 +250,8 @@ export function RunsFilters(props: RunFiltersProps) {
     searchParams.has("tags") ||
     searchParams.has("batchId") ||
     searchParams.has("runId") ||
-    searchParams.has("scheduleId");
+    searchParams.has("scheduleId") ||
+    searchParams.has("queues");
 
   return (
     <div className="flex flex-row flex-wrap items-center gap-1">
@@ -265,6 +279,7 @@ const filterTypes = [
   },
   { name: "tasks", title: "Tasks", icon: <TaskIcon className="size-4" /> },
   { name: "tags", title: "Tags", icon: <TagIcon className="size-4" /> },
+  { name: "queues", title: "Queues", icon: <RectangleStackIcon className="size-4" /> },
   { name: "run", title: "Run ID", icon: <FingerPrintIcon className="size-4" /> },
   { name: "batch", title: "Batch ID", icon: <Squares2X2Icon className="size-4" /> },
   { name: "schedule", title: "Schedule ID", icon: <ClockIcon className="size-4" /> },
@@ -315,6 +330,7 @@ function AppliedFilters({ possibleTasks, bulkActions }: RunFiltersProps) {
       <AppliedStatusFilter />
       <AppliedTaskFilter possibleTasks={possibleTasks} />
       <AppliedTagsFilter />
+      <AppliedQueuesFilter />
       <AppliedRunIdFilter />
       <AppliedBatchIdFilter />
       <AppliedScheduleIdFilter />
@@ -343,6 +359,8 @@ function Menu(props: MenuProps) {
       return <BulkActionsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "tags":
       return <TagsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "queues":
+      return <QueuesDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "run":
       return <RunIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "batch":
@@ -806,6 +824,175 @@ function AppliedTagsFilter() {
   );
 }
 
+function QueuesDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({
+      queues: values.length > 0 ? values : undefined,
+      cursor: undefined,
+      direction: undefined,
+    });
+  };
+
+  const queueValues = values("queues").filter((v) => v !== "");
+  const selected = queueValues.length > 0 ? queueValues : undefined;
+
+  const fetcher = useFetcher<typeof queuesLoader>();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams();
+    searchParams.set("per_page", "25");
+    if (searchValue) {
+      searchParams.set("query", encodeURIComponent(searchValue));
+    }
+    fetcher.load(
+      `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${
+        environment.slug
+      }/queues?${searchParams.toString()}`
+    );
+  }, [searchValue]);
+
+  const filtered = useMemo(() => {
+    console.log(fetcher.data);
+    let items: { name: string; type: "custom" | "task"; value: string }[] = [];
+    if (searchValue === "") {
+      // items = selected ?? [];
+      items = [];
+    }
+
+    for (const queueName of selected ?? []) {
+      const queueItem = fetcher.data?.queues.find((q) => q.name === queueName);
+      if (!queueItem) {
+        if (queueName.startsWith("task/")) {
+          items.push({
+            name: queueName.replace("task/", ""),
+            type: "task",
+            value: queueName,
+          });
+        } else {
+          items.push({
+            name: queueName,
+            type: "custom",
+            value: queueName,
+          });
+        }
+      }
+    }
+
+    if (fetcher.data === undefined) {
+      return matchSorter(items, searchValue);
+    }
+
+    items.push(
+      ...fetcher.data.queues.map((q) => ({
+        name: q.name,
+        type: q.type,
+        value: q.type === "task" ? `task/${q.name}` : q.name,
+      }))
+    );
+
+    return matchSorter(Array.from(new Set(items)), searchValue, {
+      keys: ["name"],
+    });
+  }, [searchValue, fetcher.data]);
+
+  return (
+    <SelectProvider value={selected ?? []} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(240px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+      >
+        <ComboBox
+          value={searchValue}
+          render={(props) => (
+            <div className="flex items-center justify-stretch">
+              <input {...props} placeholder={"Filter by queues..."} />
+              {fetcher.state === "loading" && <Spinner color="muted" />}
+            </div>
+          )}
+        />
+        <SelectList>
+          {filtered.length > 0
+            ? filtered.map((queue) => (
+                <SelectItem
+                  key={queue.value}
+                  value={queue.value}
+                  icon={
+                    queue.type === "task" ? (
+                      <TaskIcon className="size-4 shrink-0 text-blue-500" />
+                    ) : (
+                      <RectangleStackIcon className="size-4 shrink-0 text-purple-500" />
+                    )
+                  }
+                >
+                  {queue.name}
+                </SelectItem>
+              ))
+            : null}
+          {filtered.length === 0 && fetcher.state !== "loading" && (
+            <SelectItem disabled>No queues found</SelectItem>
+          )}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function AppliedQueuesFilter() {
+  const { values, del } = useSearchParams();
+
+  const queues = values("queues");
+
+  if (queues.length === 0 || queues.every((v) => v === "")) {
+    return null;
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <QueuesDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Queues"
+                icon={filterIcon("queues")}
+                value={appliedSummary(values("queues").map((v) => v.replace("task/", "")))}
+                onRemove={() => del(["queues", "cursor", "direction"])}
+                variant="secondary/small"
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
 function RootOnlyToggle({ defaultValue }: { defaultValue: boolean }) {
   const { value, values, replace } = useSearchParams();
   const searchValue = value("rootOnly");
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -59,6 +59,7 @@ import {
 import { MachineIcon } from "~/assets/icons/MachineIcon";
 import { MachineLabelCombo } from "~/components/MachineLabelCombo";
 import { MachineTooltipInfo } from "~/components/MachineTooltipInfo";
+import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 
 type RunsTableProps = {
   total: number;
@@ -82,9 +83,8 @@ export function TaskRunsTable({
 }: RunsTableProps) {
   const organization = useOrganization();
   const project = useProject();
-  const environment = useEnvironment();
   const checkboxes = useRef<(HTMLInputElement | null)[]>([]);
-  const { selectedItems, has, hasAll, select, deselect, toggle } = useSelectedItems(allowSelection);
+  const { has, hasAll, select, deselect, toggle } = useSelectedItems(allowSelection);
   const { isManagedCloud } = useFeatures();
 
   const showCompute = isManagedCloud;
@@ -213,6 +213,7 @@ export function TaskRunsTable({
           </TableHeaderCell>
           <TableHeaderCell>Test</TableHeaderCell>
           <TableHeaderCell>Created at</TableHeaderCell>
+          <TableHeaderCell>Queue</TableHeaderCell>
           <TableHeaderCell
             tooltip={
               <div className="max-w-xs p-1">
@@ -394,6 +395,22 @@ export function TaskRunsTable({
                 <TableCell to={path}>
                   {run.createdAt ? <DateTime date={run.createdAt} /> : "–"}
                 </TableCell>
+                <TableCell to={path}>
+                  <span className="flex items-center gap-1">
+                    {run.queue.type === "task" ? (
+                      <SimpleTooltip
+                        button={<TaskIconSmall className="size-[1.125rem] text-blue-500" />}
+                        content={`This queue was automatically created from your "${run.queue.name}" task`}
+                      />
+                    ) : (
+                      <SimpleTooltip
+                        button={<RectangleStackIcon className="size-[1.125rem] text-purple-500" />}
+                        content={`This is a custom queue you added in your code.`}
+                      />
+                    )}
+                    <span>{run.queue.name}</span>
+                  </span>
+                </TableCell>
                 <TableCell to={path}>
                   {run.delayUntil ? <DateTime date={run.delayUntil} /> : "–"}
                 </TableCell>
diff --git a/apps/webapp/app/presenters/RunFilters.server.ts b/apps/webapp/app/presenters/RunFilters.server.ts
@@ -3,8 +3,11 @@ import {
   TaskRunListSearchFilters,
 } from "~/components/runs/v3/RunFilters";
 import { getRootOnlyFilterPreference } from "~/services/preferences/uiPreferences.server";
+import { type ParsedRunFilters } from "~/services/runsRepository.server";
 
-export async function getRunFiltersFromRequest(request: Request) {
+type FiltersFromRequest = ParsedRunFilters & Required<Pick<ParsedRunFilters, "rootOnly">>;
+
+export async function getRunFiltersFromRequest(request: Request): Promise<FiltersFromRequest> {
   const url = new URL(request.url);
   let rootOnlyValue = false;
   if (url.searchParams.has("rootOnly")) {
@@ -29,6 +32,7 @@ export async function getRunFiltersFromRequest(request: Request) {
     runId,
     batchId,
     scheduleId,
+    queues,
   } = TaskRunListSearchFilters.parse(s);
 
   return {
@@ -46,5 +50,6 @@ export async function getRunFiltersFromRequest(request: Request) {
     rootOnly: rootOnlyValue,
     direction: direction,
     cursor: cursor,
+    queues,
   };
 }
diff --git a/apps/webapp/app/presenters/v3/NextRunListPresenter.server.ts b/apps/webapp/app/presenters/v3/NextRunListPresenter.server.ts
@@ -30,6 +30,7 @@ export type RunListOptions = {
   rootOnly?: boolean;
   batchId?: string;
   runId?: string[];
+  queues?: string[];
   //pagination
   direction?: Direction;
   cursor?: string;
@@ -65,6 +66,7 @@ export class NextRunListPresenter {
       rootOnly,
       batchId,
       runId,
+      queues,
       from,
       to,
       direction = "forward",
@@ -90,6 +92,7 @@ export class NextRunListPresenter {
       (tags !== undefined && tags.length > 0) ||
       batchId !== undefined ||
       (runId !== undefined && runId.length > 0) ||
+      (queues !== undefined && queues.length > 0) ||
       typeof isTest === "boolean" ||
       rootOnly === true ||
       !time.isDefault;
@@ -173,6 +176,7 @@ export class NextRunListPresenter {
       batchId,
       runId,
       bulkId,
+      queues,
       page: {
         size: pageSize,
         cursor,
@@ -233,6 +237,10 @@ export class NextRunListPresenter {
           metadata: run.metadata,
           metadataType: run.metadataType,
           machinePreset: run.machinePreset ? machinePresetFromRun(run)?.name : undefined,
+          queue: {
+            name: run.queue.replace("task/", ""),
+            type: run.queue.startsWith("task/") ? "task" : "custom",
+          },
         };
       }),
       pagination: {
diff --git a/apps/webapp/app/services/runsRepository.server.ts b/apps/webapp/app/services/runsRepository.server.ts
