Style improvements and run pagination

Author: matt-aitken

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

@@ -12,6 +12,7 @@ const errorGroupGranularity = new TimeGranularity([
 ]);
 import { type PrismaClientOrTransaction } from "@trigger.dev/database";
 import { timeFilterFromTo } from "~/components/runs/v3/SharedFilters";
+import { type Direction, DirectionSchema } from "~/components/ListPagination";
 import { findDisplayableEnvironment } from "~/models/runtimeEnvironment.server";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
 import { BasePresenter } from "~/presenters/v3/basePresenter.server";
@@ -29,6 +30,8 @@ export type ErrorGroupOptions = {
   period?: string;
   from?: number;
   to?: number;
+  cursor?: string;
+  direction?: Direction;
 };
 
 export const ErrorGroupOptionsSchema = z.object({
@@ -39,6 +42,8 @@ export const ErrorGroupOptionsSchema = z.object({
   period: z.string().optional(),
   from: z.number().int().nonnegative().optional(),
   to: z.number().int().nonnegative().optional(),
+  cursor: z.string().optional(),
+  direction: DirectionSchema.optional(),
 });
 
 const DEFAULT_RUNS_PAGE_SIZE = 25;
@@ -87,6 +92,8 @@ export class ErrorGroupPresenter extends BasePresenter {
       period,
       from,
       to,
+      cursor,
+      direction,
     }: ErrorGroupOptions
   ) {
     const displayableEnvironment = await findDisplayableEnvironment(environmentId, userId);
@@ -112,6 +119,8 @@ export class ErrorGroupPresenter extends BasePresenter {
         pageSize: runsPageSize,
         from: time.from.getTime(),
         to: time.to.getTime(),
+        cursor,
+        direction,
       }),
     ]);
 
@@ -268,6 +277,8 @@ export class ErrorGroupPresenter extends BasePresenter {
       pageSize: number;
       from?: number;
       to?: number;
+      cursor?: string;
+      direction?: Direction;
     }
   ): Promise<NextRunList | undefined> {
     const runListPresenter = new NextRunListPresenter(this.replica, this.clickhouse);
@@ -279,6 +290,8 @@ export class ErrorGroupPresenter extends BasePresenter {
       pageSize: options.pageSize,
       from: options.from,
       to: options.to,
+      cursor: options.cursor,
+      direction: options.direction,
     });
 
     if (result.runs.length === 0) {

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

@@ -31,6 +31,7 @@ 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";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -67,6 +68,9 @@ 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 cursor = url.searchParams.get("cursor") ?? undefined;
+  const directionRaw = url.searchParams.get("direction") ?? undefined;
+  const direction = directionRaw ? DirectionSchema.parse(directionRaw) : undefined;
 
   const presenter = new ErrorGroupPresenter($replica, logsClickhouseClient, clickhouseClient);
 
@@ -78,6 +82,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       period,
       from,
       to,
+      cursor,
+      direction,
     })
     .catch((error) => {
       if (error instanceof ServiceValidationError) {
@@ -250,7 +256,7 @@ function ErrorGroupDetail({
 
           <Property.Table>
             <Property.Item>
-              <Property.Label>Occurrences</Property.Label>
+              <Property.Label>Total occurrences</Property.Label>
               <Property.Value>{formatNumberCompact(errorGroup.count)}</Property.Value>
             </Property.Item>
             {errorGroup.affectedVersions.length > 0 && (
@@ -300,7 +306,10 @@ function ErrorGroupDetail({
 
       {/* Runs Table */}
       <div className="flex flex-col gap-1 overflow-y-hidden">
-        <Header3 className="mb-1 mt-2 px-4">Recent runs</Header3>
+        <div className="flex items-center justify-between px-4">
+          <Header3 className="mb-1 mt-2">Runs</Header3>
+          {runList && <ListPagination list={runList} />}
+        </div>
         {runList ? (
           <TaskRunsTable
             total={runList.runs.length}
@@ -318,7 +327,7 @@ function ErrorGroupDetail({
             disableAdjacentRows
           />
         ) : (
-          <Paragraph variant="small" className="text-text-dimmed">
+          <Paragraph variant="small" className="p-4 text-text-dimmed">
             No runs found for this error.
           </Paragraph>
         )}
@@ -330,7 +339,7 @@ function ErrorGroupDetail({
 const activityChartConfig: ChartConfig = {
   count: {
     label: "Occurrences",
-    color: "#EC003F",
+    color: "#6366F1",
   },
 };
 

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

@@ -421,10 +421,10 @@ function ErrorActivityGraph({ activity }: { activity: ErrorOccurrenceActivity })
               wrapperStyle={{ zIndex: 1000 }}
               animationDuration={0}
             />
-            <Bar dataKey="count" fill="#EC003F" strokeWidth={0} isAnimationActive={false} />
-            <ReferenceLine y={0} stroke="#B5B8C0" strokeWidth={1} />
+            <Bar dataKey="count" fill="#6366F1" strokeWidth={0} isAnimationActive={false} />
+            <ReferenceLine y={0} stroke="#2C3034" strokeWidth={1} />
             {maxCount > 0 && (
-              <ReferenceLine y={maxCount} stroke="#B5B8C0" strokeDasharray="3 2" strokeWidth={1} />
+              <ReferenceLine y={maxCount} stroke="#4D525B" strokeDasharray="4 4" strokeWidth={1} />
             )}
           </BarChart>
         </ResponsiveContainer>