Link to bulk replay. Better styling

matt-aitken · matt-aitken · commit 0818772db082 · 2026-03-04T15:12:26.000Z
diff --git a/apps/webapp/app/components/runs/v3/RunFilters.tsx b/apps/webapp/app/components/runs/v3/RunFilters.tsx
@@ -1,6 +1,5 @@
 import * as Ariakit from "@ariakit/react";
 import {
-  BugAntIcon,
   CalendarIcon,
   ClockIcon,
   FingerPrintIcon,
@@ -10,7 +9,7 @@ import {
   XMarkIcon,
 } from "@heroicons/react/20/solid";
 import { Form, useFetcher } from "@remix-run/react";
-import { IconRotateClockwise2, IconToggleLeft } from "@tabler/icons-react";
+import { IconBugFilled, IconRotateClockwise2, IconToggleLeft } 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";
@@ -263,7 +262,7 @@ export function filterIcon(filterKey: string): ReactNode | undefined {
     case "versions":
       return <IconRotateClockwise2 className="size-4" />;
     case "errorId":
-      return <BugAntIcon className="size-4" />;
+      return <IconBugFilled className="size-4" />;
     default:
       return undefined;
   }
@@ -388,7 +387,7 @@ const filterTypes = [
   { name: "batch", title: "Batch ID", icon: <Squares2X2Icon className="size-4" /> },
   { name: "schedule", title: "Schedule ID", icon: <ClockIcon className="size-4" /> },
   { name: "bulk", title: "Bulk action", icon: <ListCheckedIcon className="size-4" /> },
-  { name: "error", title: "Error ID", icon: <BugAntIcon className="size-4" /> },
+  { name: "error", title: "Error ID", icon: <IconBugFilled className="size-4" /> },
 ] as const;
 
 type FilterType = (typeof filterTypes)[number]["name"];
@@ -667,7 +666,7 @@ function TasksDropdown({
                 <TaskTriggerSourceIcon source={item.triggerSource} className="size-4 flex-none" />
               }
             >
-              <MiddleTruncate text={item.slug}/>
+              <MiddleTruncate text={item.slug} />
             </SelectItem>
           ))}
         </SelectList>
diff --git a/apps/webapp/app/presenters/v3/ErrorGroupPresenter.server.ts b/apps/webapp/app/presenters/v3/ErrorGroupPresenter.server.ts
@@ -1,15 +1,6 @@
 import { z } from "zod";
 import { type ClickHouse, msToClickHouseInterval } from "@internal/clickhouse";
 import { TimeGranularity } from "~/utils/timeGranularity";
-
-const errorGroupGranularity = new TimeGranularity([
-  { max: "1h", granularity: "1m" },
-  { max: "1d", granularity: "30m" },
-  { max: "1w", granularity: "8h" },
-  { max: "31d", granularity: "1d" },
-  { max: "45d", granularity: "1w" },
-  { max: "Infinity", granularity: "30d" },
-]);
 import { ErrorId } from "@trigger.dev/core/v3/isomorphic";
 import { type PrismaClientOrTransaction } from "@trigger.dev/database";
 import { timeFilterFromTo } from "~/components/runs/v3/SharedFilters";
@@ -23,6 +14,15 @@ import {
 } from "~/presenters/v3/NextRunListPresenter.server";
 import { sortVersionsDescending } from "~/utils/semver";
 
+const errorGroupGranularity = new TimeGranularity([
+  { max: "1h", granularity: "1m" },
+  { max: "1d", granularity: "20m" },
+  { max: "1w", granularity: "2h" },
+  { max: "31d", granularity: "12h" },
+  { max: "60d", granularity: "1w" },
+  { max: "Infinity", granularity: "30d" },
+]);
+
 export type ErrorGroupOptions = {
   userId?: string;
   projectId: string;
@@ -287,6 +287,7 @@ export class ErrorGroupPresenter extends BasePresenter {
     const result = await runListPresenter.call(organizationId, environmentId, {
       userId: options.userId,
       projectId: options.projectId,
+      rootOnly: false,
       errorId: ErrorId.toFriendlyId(options.fingerprint),
       pageSize: options.pageSize,
       from: options.from,
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx
@@ -3,7 +3,12 @@ import { type MetaFunction } from "@remix-run/react";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
 import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { requireUser } from "~/services/session.server";
-import { EnvironmentParamSchema, v3ErrorsPath } from "~/utils/pathBuilder";
+import {
+  EnvironmentParamSchema,
+  v3CreateBulkActionPath,
+  v3ErrorsPath,
+  v3RunsPath,
+} from "~/utils/pathBuilder";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import {
@@ -21,17 +26,26 @@ import { Suspense, useMemo } from "react";
 import { Spinner } from "~/components/primitives/Spinner";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Callout } from "~/components/primitives/Callout";
-import { Header2, Header3 } from "~/components/primitives/Headers";
+import { Header1, Header2, Header3 } from "~/components/primitives/Headers";
 import { formatDistanceToNow } from "date-fns";
 import { formatNumberCompact } from "~/utils/numberFormatter";
 import * as Property from "~/components/primitives/PropertyTable";
 import { TaskRunsTable } from "~/components/runs/v3/TaskRunsTable";
-import { DateTime } from "~/components/primitives/DateTime";
+import { DateTime, RelativeDateTime } from "~/components/primitives/DateTime";
 import { ErrorId } from "@trigger.dev/core/v3/isomorphic";
 import { Chart, type ChartConfig } from "~/components/primitives/charts/ChartCompound";
 import { TimeFilter, timeFilterFromTo } from "~/components/runs/v3/SharedFilters";
 import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 import { DirectionSchema, ListPagination } from "~/components/ListPagination";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { RunsIcon } from "~/assets/icons/RunsIcon";
+import { TaskRunListSearchFilters } from "~/components/runs/v3/RunFilters";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { CopyableText } from "~/components/primitives/CopyableText";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -218,6 +232,11 @@ function ErrorGroupDetail({
   envParam: string;
   fingerprint: string;
 }) {
+  const { value } = useSearchParams();
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
   if (!errorGroup) {
     return (
       <div className="flex h-full items-center justify-center">
@@ -231,37 +250,58 @@ function ErrorGroupDetail({
     );
   }
 
+  const fromValue = value("from") ?? undefined;
+  const toValue = value("to") ?? undefined;
+
+  const filters: TaskRunListSearchFilters = {
+    period: value("period") ?? undefined,
+    from: fromValue ? parseInt(fromValue, 10) : undefined,
+    to: toValue ? parseInt(toValue, 10) : undefined,
+    rootOnly: false,
+    errorId: ErrorId.toFriendlyId(fingerprint),
+  };
+
   return (
-    <div className="grid h-full grid-rows-[auto_16rem_1fr] overflow-hidden">
+    <div className="grid h-full grid-rows-[auto_12rem_1fr] overflow-hidden">
       {/* Error Summary */}
-      <div className="border-b border-grid-bright p-4">
-        <Header2 className="mb-4">{errorGroup.errorMessage}</Header2>
-
-        <div className="mb-4">
-          <TimeFilter defaultPeriod="7d" labelName="Occurred" />
+      <div className="flex flex-col gap-2 border-b border-grid-bright bg-background-bright p-4">
+        <div className="flex flex-col gap-0.5">
+          <Header2>{errorGroup.errorMessage}</Header2>
+          <Header3>{formatNumberCompact(errorGroup.count)} total occurrences</Header3>
         </div>
 
-        <div className="grid grid-cols-3 gap-x-12 gap-y-1">
+        <div className="grid grid-cols-[auto_auto_auto_1fr] gap-x-12 gap-y-0.5">
           <Property.Table>
             <Property.Item>
               <Property.Label>ID</Property.Label>
               <Property.Value>
-                <span className="font-mono">{ErrorId.toFriendlyId(errorGroup.fingerprint)}</span>
+                <CopyableText value={ErrorId.toFriendlyId(errorGroup.fingerprint)} />
               </Property.Value>
             </Property.Item>
             <Property.Item>
               <Property.Label>Task</Property.Label>
               <Property.Value>
-                <span className="font-mono">{errorGroup.taskIdentifier}</span>
+                <CopyableText value={errorGroup.taskIdentifier} />
               </Property.Value>
             </Property.Item>
           </Property.Table>
 
           <Property.Table>
             <Property.Item>
-              <Property.Label>Total occurrences</Property.Label>
-              <Property.Value>{formatNumberCompact(errorGroup.count)}</Property.Value>
+              <Property.Label>First seen</Property.Label>
+              <Property.Value>
+                <DateTime date={errorGroup.firstSeen} />
+              </Property.Value>
+            </Property.Item>
+            <Property.Item>
+              <Property.Label>Last seen</Property.Label>
+              <Property.Value>
+                <RelativeDateTime date={errorGroup.lastSeen} />
+              </Property.Value>
             </Property.Item>
+          </Property.Table>
+
+          <Property.Table>
             {errorGroup.affectedVersions.length > 0 && (
               <Property.Item>
                 <Property.Label>Affected versions</Property.Label>
@@ -273,27 +313,15 @@ function ErrorGroupDetail({
               </Property.Item>
             )}
           </Property.Table>
-
-          <Property.Table>
-            <Property.Item>
-              <Property.Label>First seen</Property.Label>
-              <Property.Value>
-                <DateTime date={errorGroup.firstSeen} />
-              </Property.Value>
-            </Property.Item>
-            <Property.Item>
-              <Property.Label>Last seen</Property.Label>
-              <Property.Value>
-                {formatDistanceToNow(errorGroup.lastSeen, { addSuffix: true })}
-              </Property.Value>
-            </Property.Item>
-          </Property.Table>
         </div>
       </div>
 
       {/* Activity chart */}
-      <div className="flex flex-col overflow-hidden border-b border-grid-bright px-4 py-3">
-        <Header3 className="mb-2 shrink-0">Activity</Header3>
+      <div className="flex flex-col gap-3 overflow-hidden border-b border-grid-bright px-4 py-3">
+        <div className="flex items-center">
+          <TimeFilter defaultPeriod="7d" labelName="Occurred" />
+        </div>
+
         <Suspense fallback={<ActivityChartBlankState />}>
           <TypedAwait resolve={activity} errorElement={<ActivityChartBlankState />}>
             {(result) =>
@@ -311,7 +339,32 @@ function ErrorGroupDetail({
       <div className="flex flex-col gap-1 overflow-y-hidden">
         <div className="flex items-center justify-between px-4">
           <Header3 className="mb-1 mt-2">Runs</Header3>
-          {runList && <ListPagination list={runList} />}
+          {runList && (
+            <div className="flex items-center gap-2">
+              <LinkButton
+                variant="secondary/small"
+                to={v3RunsPath(organization, project, environment, filters)}
+                LeadingIcon={RunsIcon}
+              >
+                View all runs
+              </LinkButton>
+              <LinkButton
+                variant="secondary/small"
+                to={v3CreateBulkActionPath(
+                  organization,
+                  project,
+                  environment,
+                  filters,
+                  "filter",
+                  "replay"
+                )}
+                LeadingIcon={ListCheckedIcon}
+              >
+                Bulk replay…
+              </LinkButton>
+              <ListPagination list={runList} />
+            </div>
+          )}
         </div>
         {runList ? (
           <TaskRunsTable
diff --git a/apps/webapp/app/utils/pathBuilder.ts b/apps/webapp/app/utils/pathBuilder.ts
@@ -325,7 +325,7 @@ export function v3CreateBulkActionPath(
   project: ProjectForPath,
   environment: EnvironmentForPath,
   filters?: TaskRunListSearchFilters,
-  mode?: "selected" | "filters",
+  mode?: "selected" | "filter",
   action?: "replay" | "cancel"
 ) {
   const searchParams = objectToSearchParams(filters) ?? new URLSearchParams();
