Added version filtering

Author: matt-aitken

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -9,7 +9,7 @@ import {
   XMarkIcon,
 } from "@heroicons/react/20/solid";
 import { Form, useFetcher } from "@remix-run/react";
-import { IconToggleLeft } from "@tabler/icons-react";
+import { IconToggleLeft, IconRotateClockwise2 } from "@tabler/icons-react";
 import { MachinePresetName } from "@trigger.dev/core/v3";
 import type { BulkActionType, TaskRunStatus, TaskTriggerSource } from "@trigger.dev/database";
 import { ListFilterIcon } from "lucide-react";
@@ -57,6 +57,7 @@ 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 { type loader as versionsLoader } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.versions";
 import { Button } from "../../primitives/Buttons";
 import { BulkActionTypeCombo } from "./BulkAction";
 import { appliedSummary, FilterMenuProvider, TimeFilter } from "./SharedFilters";
@@ -68,6 +69,7 @@ import {
   TaskRunStatusCombo,
 } from "./TaskRunStatus";
 import { TaskTriggerSourceIcon } from "./TaskTriggerSource";
+import { Badge } from "~/components/primitives/Badge";
 
 export const RunStatus = z.enum(allTaskRunStatuses);
 
@@ -177,6 +179,8 @@ export function filterTitle(filterKey: string) {
       return "Queues";
     case "machines":
       return "Machine";
+    case "versions":
+      return "Version";
     default:
       return filterKey;
   }
@@ -213,6 +217,8 @@ export function filterIcon(filterKey: string): ReactNode | undefined {
       return <RectangleStackIcon className="size-4" />;
     case "machines":
       return <MachineDefaultIcon className="size-4" />;
+    case "versions":
+      return <IconRotateClockwise2 className="size-4" />;
     default:
       return undefined;
   }
@@ -255,6 +261,10 @@ export function getRunFiltersFromSearchParams(
       searchParams.getAll("machines").filter((v) => v.length > 0).length > 0
         ? searchParams.getAll("machines")
         : undefined,
+    versions:
+      searchParams.getAll("versions").filter((v) => v.length > 0).length > 0
+        ? searchParams.getAll("versions")
+        : undefined,
   };
 
   const parsed = TaskRunListSearchFilters.safeParse(params);
@@ -290,7 +300,8 @@ export function RunsFilters(props: RunFiltersProps) {
     searchParams.has("runId") ||
     searchParams.has("scheduleId") ||
     searchParams.has("queues") ||
-    searchParams.has("machines");
+    searchParams.has("machines") ||
+    searchParams.has("versions");
 
   return (
     <div className="flex flex-row flex-wrap items-center gap-1">
@@ -318,6 +329,7 @@ const filterTypes = [
   },
   { name: "tasks", title: "Tasks", icon: <TaskIcon className="size-4" /> },
   { name: "tags", title: "Tags", icon: <TagIcon className="size-4" /> },
+  { name: "versions", title: "Versions", icon: <IconRotateClockwise2 className="size-4" /> },
   { name: "queues", title: "Queues", icon: <RectangleStackIcon className="size-4" /> },
   { name: "machines", title: "Machines", icon: <MachineDefaultIcon className="size-4" /> },
   { name: "run", title: "Run ID", icon: <FingerPrintIcon className="size-4" /> },
@@ -370,6 +382,7 @@ function AppliedFilters({ possibleTasks, bulkActions }: RunFiltersProps) {
       <AppliedStatusFilter />
       <AppliedTaskFilter possibleTasks={possibleTasks} />
       <AppliedTagsFilter />
+      <AppliedVersionsFilter />
       <AppliedQueuesFilter />
       <AppliedMachinesFilter />
       <AppliedRunIdFilter />
@@ -410,6 +423,8 @@ function Menu(props: MenuProps) {
       return <BatchIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "schedule":
       return <ScheduleIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "versions":
+      return <VersionsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
   }
 }
 
@@ -1130,6 +1145,153 @@ function AppliedMachinesFilter() {
   );
 }
 
+function VersionsDropdown({
+  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({
+      versions: values.length > 0 ? values : undefined,
+      cursor: undefined,
+      direction: undefined,
+    });
+  };
+
+  const versionValues = values("versions").filter((v) => v !== "");
+  const selected = versionValues.length > 0 ? versionValues : undefined;
+
+  const fetcher = useFetcher<typeof versionsLoader>();
+
+  useDebounceEffect(
+    searchValue,
+    (s) => {
+      const searchParams = new URLSearchParams();
+      if (searchValue) {
+        searchParams.set("query", encodeURIComponent(s));
+      }
+      fetcher.load(
+        `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${
+          environment.slug
+        }/versions?${searchParams.toString()}`
+      );
+    },
+    250
+  );
+
+  const filtered = useMemo(() => {
+    let items: { version: string; isCurrent: boolean }[] = [];
+
+    for (const version of selected ?? []) {
+      const versionItem = fetcher.data?.versions.find((v) => v.version === version);
+      if (!versionItem) {
+        items.push({
+          version,
+          isCurrent: false,
+        });
+      }
+    }
+
+    if (fetcher.data === undefined) {
+      return matchSorter(items, searchValue);
+    }
+
+    items.push(...fetcher.data.versions);
+
+    if (searchValue === "") {
+      return items;
+    }
+
+    return matchSorter(Array.from(new Set(items)), searchValue, {
+      keys: ["version"],
+    });
+  }, [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 versions..."} />
+              {fetcher.state === "loading" && <Spinner color="muted" />}
+            </div>
+          )}
+        />
+        <SelectList>
+          {filtered.length > 0
+            ? filtered.map((version) => (
+                <SelectItem key={version.version} value={version.version}>
+                  {version.version}{" "}
+                  {version.isCurrent ? <Badge variant="extra-small">current</Badge> : null}
+                </SelectItem>
+              ))
+            : null}
+          {filtered.length === 0 && fetcher.state !== "loading" && (
+            <SelectItem disabled>No versions found</SelectItem>
+          )}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function AppliedVersionsFilter() {
+  const { values, del } = useSearchParams();
+
+  const versions = values("versions");
+
+  if (versions.length === 0 || versions.every((v) => v === "")) {
+    return null;
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <VersionsDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Versions"
+                icon={filterIcon("versions")}
+                value={appliedSummary(values("versions"))}
+                onRemove={() => del(["versions", "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");

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

@@ -0,0 +1,69 @@
+import { type AuthenticatedEnvironment } from "~/services/apiAuth.server";
+import { BasePresenter } from "./basePresenter.server";
+import { CURRENT_DEPLOYMENT_LABEL } from "@trigger.dev/core/v3/isomorphic";
+
+const DEFAULT_ITEMS_PER_PAGE = 25;
+const MAX_ITEMS_PER_PAGE = 100;
+
+export class VersionListPresenter extends BasePresenter {
+  private readonly perPage: number;
+
+  constructor(perPage: number = DEFAULT_ITEMS_PER_PAGE) {
+    super();
+    this.perPage = Math.min(perPage, MAX_ITEMS_PER_PAGE);
+  }
+
+  public async call({
+    environment,
+    query,
+  }: {
+    environment: AuthenticatedEnvironment;
+    query?: string;
+  }) {
+    const hasFilters = query !== undefined && query.length > 0;
+
+    const versions = await this._replica.backgroundWorker.findMany({
+      select: {
+        version: true,
+      },
+      where: {
+        runtimeEnvironmentId: environment.id,
+      },
+      orderBy: {
+        createdAt: "desc",
+      },
+      take: this.perPage,
+    });
+
+    let currentVersion: string | undefined;
+
+    if (environment.type !== "DEVELOPMENT") {
+      const currentWorker = await this._replica.workerDeploymentPromotion.findFirst({
+        select: {
+          deployment: {
+            select: {
+              version: true,
+            },
+          },
+        },
+        where: {
+          environmentId: environment.id,
+          label: CURRENT_DEPLOYMENT_LABEL,
+        },
+      });
+
+      if (currentWorker) {
+        currentVersion = currentWorker.deployment.version;
+      }
+    }
+
+    return {
+      success: true as const,
+      versions: versions.map((version) => ({
+        version: version.version,
+        isCurrent: version.version === currentVersion,
+      })),
+      hasFilters,
+    };
+  }
+}

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.versions.ts

@@ -0,0 +1,55 @@
+import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { VersionListPresenter } from "~/presenters/v3/VersionListPresenter.server";
+import { requireUserId } from "~/services/session.server";
+import { EnvironmentParamSchema } from "~/utils/pathBuilder";
+
+const SearchParamsSchema = z.object({
+  query: z.string().optional(),
+  per_page: z.coerce.number().min(1).default(25),
+});
+
+export async function loader({ request, params }: LoaderFunctionArgs) {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+
+  const url = new URL(request.url);
+  const { per_page, query } = SearchParamsSchema.parse(Object.fromEntries(url.searchParams));
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    throw new Response(undefined, {
+      status: 404,
+      statusText: "Project not found",
+    });
+  }
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) {
+    throw new Response(undefined, {
+      status: 404,
+      statusText: "Environment not found",
+    });
+  }
+
+  const presenter = new VersionListPresenter(per_page);
+
+  const result = await presenter.call({
+    environment: environment,
+    query,
+  });
+
+  if (!result.success) {
+    return {
+      versions: [],
+      hasFilters: Boolean(query?.trim()),
+    };
+  }
+
+  return {
+    versions: result.versions,
+    hasFilters: result.hasFilters,
+  };
+}

apps/webapp/app/services/runsRepository.server.ts

@@ -1,13 +1,13 @@
 import { type ClickHouse, type ClickhouseQueryBuilder } from "@internal/clickhouse";
 import { type Tracer } from "@internal/tracing";
 import { type Logger, type LogLevel } from "@trigger.dev/core/logger";
-import { Prisma, TaskRunStatus } from "@trigger.dev/database";
+import { MachinePresetName } from "@trigger.dev/core/v3";
+import { BulkActionId, RunId } from "@trigger.dev/core/v3/isomorphic";
+import { TaskRunStatus } from "@trigger.dev/database";
 import parseDuration from "parse-duration";
+import { z } from "zod";
 import { timeFilters } from "~/components/runs/v3/SharedFilters";
 import { type PrismaClient } from "~/db.server";
-import { z } from "zod";
-import { BulkActionId, RunId } from "@trigger.dev/core/v3/isomorphic";
-import { MachinePresetName } from "@trigger.dev/core/v3";
 
 export type RunsRepositoryOptions = {
   clickhouse: ClickHouse;