feat: Events list page

apps/webapp/app/components/event/EventDetail.tsx

@@ -0,0 +1,45 @@
+import { CodeBlock } from "../code/CodeBlock";
+import { DateTime } from "../primitives/DateTime";
+import { Header3 } from "../primitives/Headers";
+import {
+  RunPanel,
+  RunPanelBody,
+  RunPanelDivider,
+  RunPanelIconProperty,
+  RunPanelIconSection,
+} from "~/components/run/RunCard";
+import { Event } from "~/presenters/EventPresenter.server";
+
+export function EventDetail({ event }: { event: Event }) {
+  const { id, name, payload, context, timestamp, deliveredAt } = event;
+
+  return (
+    <RunPanel selected={false}>
+      <RunPanelBody>
+        <RunPanelIconSection>
+          <RunPanelIconProperty
+            icon="calendar"
+            label="Created"
+            value={<DateTime date={timestamp} />}
+          />
+          {deliveredAt && (
+            <RunPanelIconProperty
+              icon="flag"
+              label="Finished at"
+              value={<DateTime date={deliveredAt} />}
+            />
+          )}
+          <RunPanelIconProperty icon="id" label="Event name" value={name} />
+          <RunPanelIconProperty icon="account" label="Event ID" value={id} />
+        </RunPanelIconSection>
+        <RunPanelDivider />
+        <div className="mt-4 flex flex-col gap-2">
+          <Header3>Payload</Header3>
+          <CodeBlock code={payload} />
+          <Header3>Context</Header3>
+          <CodeBlock code={context} />
+        </div>
+      </RunPanelBody>
+    </RunPanel>
+  );
+}

apps/webapp/app/components/events/EventStatuses.tsx

@@ -0,0 +1,8 @@
+import { z } from "zod";
+import { DirectionSchema, FilterableEnvironment } from "~/components/runs/RunStatuses";
+
+export const EventListSearchSchema = z.object({
+  cursor: z.string().optional(),
+  direction: DirectionSchema.optional(),
+  environment: FilterableEnvironment.optional(),
+});

apps/webapp/app/components/events/EventsFilters.tsx

@@ -0,0 +1,67 @@
+import { useNavigate } from "@remix-run/react";
+import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
+import { EnvironmentLabel } from "../environments/EnvironmentLabel";
+import { Paragraph } from "../primitives/Paragraph";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives/Select";
+import { EventListSearchSchema } from "./EventStatuses";
+import { environmentKeys, FilterableEnvironment } from "~/components/runs/RunStatuses";
+
+export function EventsFilters() {
+  const navigate = useNavigate();
+  const location = useOptimisticLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const { environment } = EventListSearchSchema.parse(Object.fromEntries(searchParams.entries()));
+
+  const handleFilterChange = (filterType: string, value: string | undefined) => {
+    if (value) {
+      searchParams.set(filterType, value);
+    } else {
+      searchParams.delete(filterType);
+    }
+    searchParams.delete("cursor");
+    searchParams.delete("direction");
+    navigate(`${location.pathname}?${searchParams.toString()}`);
+  };
+
+  const handleEnvironmentChange = (value: FilterableEnvironment | "ALL") => {
+    handleFilterChange("environment", value === "ALL" ? undefined : value);
+  };
+
+  return (
+    <div className="flex flex-row justify-between gap-x-2">
+      <SelectGroup>
+        <Select
+          name="environment"
+          value={environment ?? "ALL"}
+          onValueChange={handleEnvironmentChange}
+        >
+          <SelectTrigger size="secondary/small" width="full">
+            <SelectValue placeholder={"Select environment"} className="ml-2 p-0" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={"ALL"}>
+              <Paragraph variant="extra-small" className="pl-0.5">
+                All environments
+              </Paragraph>
+            </SelectItem>
+            {environmentKeys.map((env) => (
+              <SelectItem key={env} value={env}>
+                <div className="flex items-center gap-x-2">
+                  <EnvironmentLabel environment={{ type: env }} />
+                  <Paragraph variant="extra-small">environment</Paragraph>
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </SelectGroup>
+    </div>
+  );
+}

apps/webapp/app/components/events/EventsTable.tsx

@@ -0,0 +1,129 @@
+import { StopIcon } from "@heroicons/react/24/outline";
+import { CheckIcon } from "@heroicons/react/24/solid";
+import { RuntimeEnvironmentType, User } from "@trigger.dev/database";
+import { EnvironmentLabel } from "../environments/EnvironmentLabel";
+import { DateTime } from "../primitives/DateTime";
+import { Paragraph } from "../primitives/Paragraph";
+import { Spinner } from "../primitives/Spinner";
+import {
+  Table,
+  TableBlankRow,
+  TableBody,
+  TableCell,
+  TableCellChevron,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "../primitives/Table";
+
+type EventTableItem = {
+  id: string;
+  name: string | null;
+  environment: {
+    type: RuntimeEnvironmentType;
+    userId?: string;
+    userName?: string;
+  };
+  createdAt: Date | null;
+  isTest: boolean;
+  deliverAt: Date | null;
+  deliveredAt: Date | null;
+  runs: number;
+};
+
+type EventsTableProps = {
+  total: number;
+  hasFilters: boolean;
+  events: EventTableItem[];
+  isLoading?: boolean;
+  eventsParentPath: string;
+  currentUser: User;
+};
+
+export function EventsTable({
+  total,
+  hasFilters,
+  events,
+  isLoading = false,
+  eventsParentPath,
+  currentUser,
+}: EventsTableProps) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderCell>Event</TableHeaderCell>
+          <TableHeaderCell>Env</TableHeaderCell>
+          <TableHeaderCell>Received Time</TableHeaderCell>
+          <TableHeaderCell>Delivery Time</TableHeaderCell>
+          <TableHeaderCell>Delivered</TableHeaderCell>
+          <TableHeaderCell>Test</TableHeaderCell>
+          <TableHeaderCell>Runs</TableHeaderCell>
+          <TableHeaderCell>
+            <span className="sr-only">Go to page</span>
+          </TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {total === 0 && !hasFilters ? (
+          <TableBlankRow colSpan={9}>
+            <NoEvents title="No events found" />
+          </TableBlankRow>
+        ) : events.length === 0 ? (
+          <TableBlankRow colSpan={9}>
+            <NoEvents title="No events match your filters" />
+          </TableBlankRow>
+        ) : (
+          events.map((event) => {
+            const path = `${eventsParentPath}/events/${event.id}`;
+            const usernameForEnv =
+              currentUser.id !== event.environment.userId ? event.environment.userName : undefined;
+
+            return (
+              <TableRow key={event.id}>
+                <TableCell to={path}>{typeof event.name === "string" ? event.name : "-"}</TableCell>
+                <TableCell to={path}>
+                  <EnvironmentLabel environment={event.environment} userName={usernameForEnv} />
+                </TableCell>
+                <TableCell to={path}>
+                  {event.createdAt ? <DateTime date={event.createdAt} /> : "–"}
+                </TableCell>
+                <TableCell to={path}>
+                  {event.deliverAt ? <DateTime date={event.deliverAt} /> : "–"}
+                </TableCell>
+                <TableCell to={path}>
+                  {event.deliveredAt ? <DateTime date={event.deliveredAt} /> : "–"}
+                </TableCell>
+                <TableCell to={path}>
+                  {event.isTest ? (
+                    <CheckIcon className="h-4 w-4 text-slate-400" />
+                  ) : (
+                    <StopIcon className="h-4 w-4 text-slate-850" />
+                  )}
+                </TableCell>
+                <TableCell to={path}>{event.runs}</TableCell>
+                <TableCellChevron to={path} isSticky />
+              </TableRow>
+            );
+          })
+        )}
+        {isLoading && (
+          <TableBlankRow
+            colSpan={8}
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center gap-2 bg-slate-900/90"
+          >
+            <Spinner /> <span className="text-dimmed">Loading…</span>
+          </TableBlankRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+
+function NoEvents({ title }: { title: string }) {
+  return (
+    <div className="flex items-center justify-center">
+      <Paragraph className="w-auto">{title}</Paragraph>
+    </div>
+  );
+}

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -3,6 +3,7 @@ import {
   ArrowRightIcon,
   ArrowRightOnRectangleIcon,
   ChartBarIcon,
+  CursorArrowRaysIcon,
   EllipsisHorizontalIcon,
 } from "@heroicons/react/20/solid";
 import { UserGroupIcon, UserPlusIcon } from "@heroicons/react/24/solid";
@@ -31,6 +32,7 @@ import {
   projectHttpEndpointsPath,
   projectPath,
   projectRunsPath,
+  projectEventsPath,
   projectSetupPath,
   projectTriggersPath,
 } from "~/utils/pathBuilder";
@@ -144,6 +146,12 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
               data-action="triggers"
               hasWarning={project.hasInactiveExternalTriggers}
             />
+            <SideMenuItem
+              name="Events"
+              icon={CursorArrowRaysIcon}
+              iconColor="text-sky-500"
+              to={projectEventsPath(organization, project)}
+            />
             <SideMenuItem
               name="HTTP endpoints"
               icon="http-endpoint"