Added versions filter to the fingerprint page

Author: matt-aitken

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

@@ -27,6 +27,7 @@ export type ErrorGroupOptions = {
   userId?: string;
   projectId: string;
   fingerprint: string;
+  versions?: string[];
   runsPageSize?: number;
   period?: string;
   from?: number;
@@ -39,6 +40,7 @@ export const ErrorGroupOptionsSchema = z.object({
   userId: z.string().optional(),
   projectId: z.string(),
   fingerprint: z.string(),
+  versions: z.array(z.string()).optional(),
   runsPageSize: z.number().int().positive().max(1000).optional(),
   period: z.string().optional(),
   from: z.number().int().nonnegative().optional(),
@@ -89,6 +91,7 @@ export class ErrorGroupPresenter extends BasePresenter {
       userId,
       projectId,
       fingerprint,
+      versions,
       runsPageSize = DEFAULT_RUNS_PAGE_SIZE,
       period,
       from,
@@ -117,6 +120,7 @@ export class ErrorGroupPresenter extends BasePresenter {
         userId,
         projectId,
         fingerprint,
+        versions,
         pageSize: runsPageSize,
         from: time.from.getTime(),
         to: time.to.getTime(),
@@ -149,7 +153,8 @@ export class ErrorGroupPresenter extends BasePresenter {
     environmentId: string,
     fingerprint: string,
     from: Date,
-    to: Date
+    to: Date,
+    versions?: string[]
   ): Promise<{
     data: Array<{ date: Date; count: number }>;
   }> {
@@ -169,6 +174,10 @@ export class ErrorGroupPresenter extends BasePresenter {
       toTimeMs: to.getTime(),
     });
 
+    if (versions && versions.length > 0) {
+      queryBuilder.where("task_version IN {versions: Array(String)}", { versions });
+    }
+
     queryBuilder.groupBy("error_fingerprint, bucket_epoch");
     queryBuilder.orderBy("bucket_epoch ASC");
 
@@ -275,6 +284,7 @@ export class ErrorGroupPresenter extends BasePresenter {
       userId?: string;
       projectId: string;
       fingerprint: string;
+      versions?: string[];
       pageSize: number;
       from?: number;
       to?: number;
@@ -289,6 +299,7 @@ export class ErrorGroupPresenter extends BasePresenter {
       projectId: options.projectId,
       rootOnly: false,
       errorId: ErrorId.toFriendlyId(options.fingerprint),
+      versions: options.versions,
       pageSize: options.pageSize,
       from: options.from,
       to: options.to,

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

@@ -46,6 +46,7 @@ import { RunsIcon } from "~/assets/icons/RunsIcon";
 import { TaskRunListSearchFilters } from "~/components/runs/v3/RunFilters";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { CopyableText } from "~/components/primitives/CopyableText";
+import { LogsVersionFilter } from "~/components/logs/LogsVersionFilter";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -82,6 +83,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const toStr = url.searchParams.get("to");
   const from = fromStr ? parseInt(fromStr, 10) : undefined;
   const to = toStr ? parseInt(toStr, 10) : undefined;
+  const versions = url.searchParams.getAll("versions").filter((v) => v.length > 0);
   const cursor = url.searchParams.get("cursor") ?? undefined;
   const directionRaw = url.searchParams.get("direction") ?? undefined;
   const direction = directionRaw ? DirectionSchema.parse(directionRaw) : undefined;
@@ -93,6 +95,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       userId,
       projectId: project.id,
       fingerprint,
+      versions: versions.length > 0 ? versions : undefined,
       period,
       from,
       to,
@@ -115,7 +118,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       environment.id,
       fingerprint,
       time.from,
-      time.to
+      time.to,
+      versions.length > 0 ? versions : undefined
     )
     .catch(() => ({ data: [] as ErrorGroupActivity }));
 
@@ -149,6 +153,9 @@ export default function Page() {
     if (period) carry.set("period", period);
     if (from) carry.set("from", from);
     if (to) carry.set("to", to);
+    for (const v of searchParams.getAll("versions")) {
+      if (v) carry.append("versions", v);
+    }
     const qs = carry.toString();
     return qs ? `${base}?${qs}` : base;
   }, [organizationSlug, projectParam, envParam, searchParams.toString()]);
@@ -232,7 +239,7 @@ function ErrorGroupDetail({
   envParam: string;
   fingerprint: string;
 }) {
-  const { value } = useSearchParams();
+  const { value, values } = useSearchParams();
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
@@ -252,11 +259,13 @@ function ErrorGroupDetail({
 
   const fromValue = value("from") ?? undefined;
   const toValue = value("to") ?? undefined;
+  const selectedVersions = values("versions").filter((v) => v !== "");
 
   const filters: TaskRunListSearchFilters = {
     period: value("period") ?? undefined,
     from: fromValue ? parseInt(fromValue, 10) : undefined,
     to: toValue ? parseInt(toValue, 10) : undefined,
+    versions: selectedVersions.length > 0 ? selectedVersions : undefined,
     rootOnly: false,
     errorId: ErrorId.toFriendlyId(fingerprint),
   };
@@ -318,8 +327,9 @@ function ErrorGroupDetail({
 
       {/* Activity chart */}
       <div className="flex flex-col gap-3 overflow-hidden border-b border-grid-bright px-4 py-3">
-        <div className="flex items-center">
+        <div className="flex items-center gap-1">
           <TimeFilter defaultPeriod="7d" labelName="Occurred" />
+          <LogsVersionFilter />
         </div>
 
         <Suspense fallback={<ActivityChartBlankState />}>
@@ -369,10 +379,10 @@ function ErrorGroupDetail({
         {runList ? (
           <TaskRunsTable
             total={runList.runs.length}
-            hasFilters={false}
+            hasFilters={selectedVersions.length > 0}
             filters={{
               tasks: [],
-              versions: [],
+              versions: selectedVersions,
               statuses: [],
               from: undefined,
               to: undefined,

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

@@ -379,6 +379,9 @@ function ErrorGroupRow({
     if (period) carry.set("period", period);
     if (from) carry.set("from", from);
     if (to) carry.set("to", to);
+    for (const v of searchParams.getAll("versions")) {
+      if (v) carry.append("versions", v);
+    }
     const qs = carry.toString();
     return qs ? `${base}?${qs}` : base;
   }, [organizationSlug, projectParam, envParam, errorGroup.fingerprint, searchParams.toString()]);