Add versions filtering to the Errors list page

Author: matt-aitken

apps/webapp/app/components/logs/LogsVersionFilter.tsx

@@ -0,0 +1,58 @@
+import * as Ariakit from "@ariakit/react";
+import { SelectTrigger } from "~/components/primitives/Select";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { appliedSummary, FilterMenuProvider } from "~/components/runs/v3/SharedFilters";
+import { filterIcon, VersionsDropdown } from "~/components/runs/v3/RunFilters";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+
+const shortcut = { key: "v" };
+
+export function LogsVersionFilter() {
+  const { values, del } = useSearchParams();
+  const selectedVersions = values("versions");
+
+  if (selectedVersions.length === 0 || selectedVersions.every((v) => v === "")) {
+    return (
+      <FilterMenuProvider>
+        {(search, setSearch) => (
+          <VersionsDropdown
+            trigger={
+              <SelectTrigger
+                icon={filterIcon("versions")}
+                variant="secondary/small"
+                shortcut={shortcut}
+                tooltipTitle="Filter by version"
+              >
+                <span className="ml-0.5">Versions</span>
+              </SelectTrigger>
+            }
+            searchValue={search}
+            clearSearchValue={() => setSearch("")}
+          />
+        )}
+      </FilterMenuProvider>
+    );
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <VersionsDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Versions"
+                icon={filterIcon("versions")}
+                value={appliedSummary(selectedVersions)}
+                onRemove={() => del(["versions", "cursor", "direction"])}
+                variant="secondary/small"
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}

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

@@ -1216,7 +1216,7 @@ function AppliedMachinesFilter() {
   );
 }
 
-function VersionsDropdown({
+export function VersionsDropdown({
   trigger,
   clearSearchValue,
   searchValue,

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

@@ -22,6 +22,7 @@ export type ErrorsListOptions = {
   projectId: string;
   // filters
   tasks?: string[];
+  versions?: string[];
   period?: string;
   from?: number;
   to?: number;
@@ -39,6 +40,7 @@ export const ErrorsListOptionsSchema = z.object({
   userId: z.string().optional(),
   projectId: z.string(),
   tasks: z.array(z.string()).optional(),
+  versions: z.array(z.string()).optional(),
   period: z.string().optional(),
   from: z.number().int().nonnegative().optional(),
   to: z.number().int().nonnegative().optional(),
@@ -123,6 +125,7 @@ export class ErrorsListPresenter extends BasePresenter {
       userId,
       projectId,
       tasks,
+      versions,
       period,
       search,
       from,
@@ -156,6 +159,7 @@ export class ErrorsListPresenter extends BasePresenter {
 
     const hasFilters =
       (tasks !== undefined && tasks.length > 0) ||
+      (versions !== undefined && versions.length > 0) ||
       (search !== undefined && search !== "") ||
       !time.isDefault;
 
@@ -189,6 +193,10 @@ export class ErrorsListPresenter extends BasePresenter {
       queryBuilder.where("task_identifier IN {tasks: Array(String)}", { tasks });
     }
 
+    if (versions && versions.length > 0) {
+      queryBuilder.where("task_version IN {versions: Array(String)}", { versions });
+    }
+
     queryBuilder.groupBy("error_fingerprint, task_identifier");
 
     // Text search via HAVING (operates on aggregated values)
@@ -282,6 +290,7 @@ export class ErrorsListPresenter extends BasePresenter {
       },
       filters: {
         tasks,
+        versions,
         search,
         period: time,
         from: effectiveFrom,

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

@@ -16,6 +16,7 @@ import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { PageBody } from "~/components/layout/AppLayout";
 import { LogsSearchInput } from "~/components/logs/LogsSearchInput";
 import { LogsTaskFilter } from "~/components/logs/LogsTaskFilter";
+import { LogsVersionFilter } from "~/components/logs/LogsVersionFilter";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { formatDateTime, RelativeDateTime } from "~/components/primitives/DateTime";
@@ -80,6 +81,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   const url = new URL(request.url);
   const tasks = url.searchParams.getAll("tasks").filter((t) => t.length > 0);
+  const versions = url.searchParams.getAll("versions").filter((v) => v.length > 0);
   const search = url.searchParams.get("search") ?? undefined;
   const period = url.searchParams.get("period") ?? undefined;
   const fromStr = url.searchParams.get("from");
@@ -101,6 +103,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       userId,
       projectId: project.id,
       tasks: tasks.length > 0 ? tasks : undefined,
+      versions: versions.length > 0 ? versions : undefined,
       search,
       period,
       from,
@@ -239,6 +242,7 @@ function FiltersBar({
   const searchParams = new URLSearchParams(location.search);
   const hasFilters =
     searchParams.has("tasks") ||
+    searchParams.has("versions") ||
     searchParams.has("search") ||
     searchParams.has("period") ||
     searchParams.has("from") ||
@@ -250,6 +254,7 @@ function FiltersBar({
         {list ? (
           <>
             <LogsTaskFilter possibleTasks={list.filters.possibleTasks} />
+            <LogsVersionFilter />
             <TimeFilter
               defaultPeriod={defaultPeriod}
               maxPeriodDays={retentionLimitDays}
@@ -269,6 +274,7 @@ function FiltersBar({
         ) : (
           <>
             <LogsTaskFilter possibleTasks={[]} />
+            <LogsVersionFilter />
             <TimeFilter defaultPeriod={defaultPeriod} maxPeriodDays={retentionLimitDays} />
             <LogsSearchInput placeholder="Search errors..." />
             {hasFilters && (