Test, output and canceling improvements (#952)

matt-aitken · web-flow · commit 9304c447be18 · 2024-03-18T17:27:52.000Z
* The vertical lines in the run tree view are now brighter

* Blank state when you click a task with no runs

* Canceling from the runs table

* Fix for styles coming through incorrectly to properties

* Fix for the OTEL output column having a $output prefix if it’s an object
diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx
@@ -253,7 +253,7 @@ export const TableCellMenu = forwardRef<
 type TableBlankRowProps = {
   className?: string;
   colSpan: number;
-  children: ReactNode;
+  children?: ReactNode;
 };
 
 export const TableBlankRow = forwardRef<HTMLTableRowElement, TableBlankRowProps>(
diff --git a/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx b/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx
@@ -0,0 +1,43 @@
+import { StopCircleIcon } from "@heroicons/react/20/solid";
+import { useFetcher } from "@remix-run/react";
+import { Button } from "~/components/primitives/Buttons";
+import {
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+} from "~/components/primitives/Dialog";
+
+type CancelRunDialogProps = {
+  runFriendlyId: string;
+  redirectPath: string;
+};
+
+export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialogProps) {
+  const cancelFetcher = useFetcher();
+
+  return (
+    <DialogContent>
+      <DialogHeader>Cancel this run?</DialogHeader>
+      <DialogDescription>
+        Canceling a run will stop execution. If you want to run this later you will have to replay
+        the entire run with the original payload.
+      </DialogDescription>
+      <DialogFooter>
+        <cancelFetcher.Form action={`/resources/taskruns/${runFriendlyId}/cancel`} method="post">
+          <Button
+            type="submit"
+            name="redirectUrl"
+            value={redirectPath}
+            variant="danger/small"
+            LeadingIcon={cancelFetcher.state === "idle" ? StopCircleIcon : "spinner-white"}
+            disabled={cancelFetcher.state !== "idle"}
+            shortcut={{ modifiers: ["meta"], key: "enter" }}
+          >
+            {cancelFetcher.state === "idle" ? "Cancel run" : "Canceling..."}
+          </Button>
+        </cancelFetcher.Form>
+      </DialogFooter>
+    </DialogContent>
+  );
+}
diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
@@ -1,10 +1,10 @@
 import { StopIcon } from "@heroicons/react/24/outline";
-import { CheckIcon } from "@heroicons/react/24/solid";
+import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid";
 import { User } from "@trigger.dev/database";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { RunListItem } from "~/presenters/v3/RunListPresenter.server";
-import { v3RunPath } from "~/utils/pathBuilder";
+import { RunListAppliedFilters, RunListItem } from "~/presenters/v3/RunListPresenter.server";
+import { docsPath, v3RunPath, v3TestPath } from "~/utils/pathBuilder";
 import { EnvironmentLabel } from "../../environments/EnvironmentLabel";
 import { DateTime } from "../../primitives/DateTime";
 import { Paragraph } from "../../primitives/Paragraph";
@@ -15,16 +15,24 @@ import {
   TableBody,
   TableCell,
   TableCellChevron,
+  TableCellMenu,
   TableHeader,
   TableHeaderCell,
   TableRow,
 } from "../../primitives/Table";
 import { formatDuration } from "@trigger.dev/core/v3";
 import { TaskRunStatusCombo } from "./TaskRunStatus";
+import { useEnvironments } from "~/hooks/useEnvironments";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { StopCircleIcon } from "@heroicons/react/20/solid";
+import { Dialog, DialogTrigger } from "~/components/primitives/Dialog";
+import { CancelRunDialog } from "./CancelRunDialog";
+import { useLocation } from "@remix-run/react";
 
 type RunsTableProps = {
   total: number;
   hasFilters: boolean;
+  filters: RunListAppliedFilters;
   showJob?: boolean;
   runs: RunListItem[];
   isLoading?: boolean;
@@ -34,12 +42,14 @@ type RunsTableProps = {
 export function TaskRunsTable({
   total,
   hasFilters,
+  filters,
   runs,
   isLoading = false,
   currentUser,
 }: RunsTableProps) {
   const organization = useOrganization();
   const project = useProject();
+  const location = useLocation();
 
   return (
     <Table>
@@ -65,9 +75,7 @@ export function TaskRunsTable({
             {!isLoading && <NoRuns title="No runs found" />}
           </TableBlankRow>
         ) : runs.length === 0 ? (
-          <TableBlankRow colSpan={9}>
-            {!isLoading && <NoRuns title="No runs match your filters" />}
-          </TableBlankRow>
+          <BlankState isLoading={isLoading} filters={filters} />
         ) : (
           runs.map((run) => {
             const path = v3RunPath(organization, project, run);
@@ -102,7 +110,23 @@ export function TaskRunsTable({
                 <TableCell to={path}>
                   {run.createdAt ? <DateTime date={run.createdAt} /> : "–"}
                 </TableCell>
-                <TableCellChevron to={path} isSticky />
+                {run.isCancellable ? (
+                  <TableCellMenu isSticky>
+                    <Dialog>
+                      <DialogTrigger asChild>
+                        <Button variant="small-menu-item" LeadingIcon={StopCircleIcon}>
+                          Cancel run
+                        </Button>
+                      </DialogTrigger>
+                      <CancelRunDialog
+                        runFriendlyId={run.friendlyId}
+                        redirectPath={`${location.pathname}${location.search}`}
+                      />
+                    </Dialog>
+                  </TableCellMenu>
+                ) : (
+                  <TableCell to={path}>{""}</TableCell>
+                )}
               </TableRow>
             );
           })
@@ -127,3 +151,62 @@ function NoRuns({ title }: { title: string }) {
     </div>
   );
 }
+
+function BlankState({ isLoading, filters }: Pick<RunsTableProps, "isLoading" | "filters">) {
+  const organization = useOrganization();
+  const project = useProject();
+  const envs = useEnvironments();
+  if (isLoading) return <TableBlankRow colSpan={9}></TableBlankRow>;
+
+  const { environments, tasks, from, to, ...otherFilters } = filters;
+
+  if (
+    filters.environments.length === 1 &&
+    filters.tasks.length === 1 &&
+    filters.from === undefined &&
+    filters.to === undefined &&
+    Object.values(otherFilters).every((filterArray) => filterArray.length === 0)
+  ) {
+    const environment = envs?.find((env) => env.id === filters.environments[0]);
+    return (
+      <TableBlankRow colSpan={9}>
+        <div className="py-14">
+          <Paragraph className="w-auto" variant="base/bright" spacing>
+            There are no runs for {filters.tasks[0]}
+            {environment ? (
+              <>
+                {" "}
+                in <EnvironmentLabel environment={environment} size="large" />
+              </>
+            ) : null}
+          </Paragraph>
+          <div className="flex items-center justify-center gap-2">
+            <LinkButton
+              to={v3TestPath(organization, project)}
+              variant="primary/small"
+              LeadingIcon={BeakerIcon}
+              className="inline-flex"
+            >
+              Create a test run
+            </LinkButton>
+            <Paragraph variant="small">or</Paragraph>
+            <LinkButton
+              to={docsPath("v3/triggering")}
+              variant="primary/small"
+              LeadingIcon={BookOpenIcon}
+              className="inline-flex"
+            >
+              Triggering a task docs
+            </LinkButton>
+          </div>
+        </div>
+      </TableBlankRow>
+    );
+  }
+
+  return (
+    <TableBlankRow colSpan={9}>
+      <NoRuns title="No runs match your filters" />
+    </TableBlankRow>
+  );
+}
diff --git a/apps/webapp/app/presenters/v3/RunListPresenter.server.ts b/apps/webapp/app/presenters/v3/RunListPresenter.server.ts
@@ -2,6 +2,7 @@ import { Prisma, TaskRunAttemptStatus, TaskRunStatus } from "@trigger.dev/databa
 import { Direction } from "~/components/runs/RunStatuses";
 import { PrismaClient, prisma } from "~/db.server";
 import { getUsername } from "~/utils/username";
+import { CANCELLABLE_STATUSES } from "~/v3/services/cancelTaskRun.server";
 
 type RunListOptions = {
   userId: string;
@@ -23,6 +24,7 @@ const DEFAULT_PAGE_SIZE = 20;
 
 export type RunList = Awaited<ReturnType<RunListPresenter["call"]>>;
 export type RunListItem = RunList["runs"][0];
+export type RunListAppliedFilters = RunList["filters"];
 
 export class RunListPresenter {
   #prismaClient: PrismaClient;
@@ -220,6 +222,7 @@ export class RunListPresenter {
           version: run.version,
           taskIdentifier: run.taskIdentifier,
           attempts: Number(run.attempts),
+          isCancellable: CANCELLABLE_STATUSES.includes(run.status),
           environment: {
             type: environment.type,
             slug: environment.slug,
@@ -233,6 +236,14 @@ export class RunListPresenter {
         previous,
       },
       possibleTasks: possibleTasks.map((task) => task.slug),
+      filters: {
+        tasks: tasks || [],
+        versions: versions || [],
+        statuses: statuses || [],
+        environments: environments || [],
+        from,
+        to,
+      },
       hasFilters,
     };
   }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -19,6 +19,7 @@ import {
 import { Header2 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { Property, PropertyTable } from "~/components/primitives/PropertyTable";
+import { CancelRunDialog } from "~/components/runs/v3/CancelRunDialog";
 import { LiveTimer } from "~/components/runs/v3/LiveTimer";
 import { RunIcon } from "~/components/runs/v3/RunIcon";
 import { SpanEvents } from "~/components/runs/v3/SpanEvents";
@@ -54,7 +55,6 @@ export default function Page() {
   const organization = useOrganization();
   const project = useProject();
   const { runParam } = useParams();
-  const cancelFetcher = useFetcher();
 
   return (
     <div
@@ -176,38 +176,15 @@ export default function Page() {
                     Cancel run
                   </Button>
                 </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>Cancel this run?</DialogHeader>
-                  <DialogDescription>
-                    Canceling a run will stop execution. If you want to run this later you will have
-                    to replay the entire run with the original payload.
-                  </DialogDescription>
-                  <DialogFooter>
-                    <cancelFetcher.Form
-                      action={`/resources/taskruns/${event.runId}/cancel`}
-                      method="post"
-                    >
-                      <Button
-                        type="submit"
-                        name="redirectUrl"
-                        value={v3RunSpanPath(
-                          organization,
-                          project,
-                          { friendlyId: runParam },
-                          { spanId: event.spanId }
-                        )}
-                        variant="danger/small"
-                        LeadingIcon={
-                          cancelFetcher.state === "idle" ? StopCircleIcon : "spinner-white"
-                        }
-                        disabled={cancelFetcher.state !== "idle"}
-                        shortcut={{ modifiers: ["meta"], key: "enter" }}
-                      >
-                        {cancelFetcher.state === "idle" ? "Cancel run" : "Canceling..."}
-                      </Button>
-                    </cancelFetcher.Form>
-                  </DialogFooter>
-                </DialogContent>
+                <CancelRunDialog
+                  runFriendlyId={event.runId}
+                  redirectPath={v3RunSpanPath(
+                    organization,
+                    project,
+                    { friendlyId: runParam },
+                    { spanId: event.spanId }
+                  )}
+                />
               </Dialog>
             )}
           </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
@@ -581,11 +581,7 @@ function NodeStatusIcon({ node }: { node: RunEvent }) {
 }
 
 function TaskLine({ isError, isSelected }: { isError: boolean; isSelected: boolean }) {
-  return (
-    <div
-      className={cn("h-8 w-2 border-r", isError ? "border-rose-500/10" : "border-charcoal-800")}
-    />
-  );
+  return <div className={cn("h-8 w-2 border-r border-grid-bright")} />;
 }
 
 function ShowParentLink({ runFriendlyId }: { runFriendlyId: string }) {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs._index/route.tsx
@@ -84,6 +84,7 @@ export default function Page() {
               <TaskRunsTable
                 total={list.runs.length}
                 hasFilters={list.hasFilters}
+                filters={list.filters}
                 runs={list.runs}
                 isLoading={isLoading}
                 currentUser={user}
diff --git a/apps/webapp/app/v3/eventRepository.server.ts b/apps/webapp/app/v3/eventRepository.server.ts
@@ -9,10 +9,10 @@ import {
   SpanEvents,
   TaskEventStyle,
   correctErrorStackTrace,
-  flattenAndNormalizeAttributes,
   flattenAttributes,
   isExceptionSpanEvent,
   omit,
+  primitiveValueOrflattenedAttributes,
   unflattenAttributes,
 } from "@trigger.dev/core/v3";
 import { Prisma, TaskEvent, TaskEventStatus, type TaskEventKind } from "@trigger.dev/database";
@@ -178,10 +178,7 @@ export class EventRepository {
       metadata: event.metadata as Attributes,
       style: event.style as Attributes,
       output: options?.attributes.output
-        ? flattenAndNormalizeAttributes(
-            options.attributes.output,
-            SemanticInternalAttributes.OUTPUT
-          )
+        ? primitiveValueOrflattenedAttributes(options.attributes.output, undefined)
         : undefined,
     });
   }
@@ -564,7 +561,6 @@ export class EventRepository {
       queueName: options.attributes.queueName,
       batchId: options.attributes.batchId ?? undefined,
       properties: {
-        ...style,
         ...(flattenAttributes(metadata, SemanticInternalAttributes.METADATA) as Record<
           string,
           string
diff --git a/apps/webapp/app/v3/services/cancelTaskRun.server.ts b/apps/webapp/app/v3/services/cancelTaskRun.server.ts
@@ -8,7 +8,7 @@ import { assertUnreachable } from "../utils/asserts.server";
 import { CancelAttemptService } from "./cancelAttempt.server";
 import { logger } from "~/services/logger.server";
 
-const CANCELLABLE_STATUSES: Array<TaskRunStatus> = [
+export const CANCELLABLE_STATUSES: Array<TaskRunStatus> = [
   "PENDING",
   "EXECUTING",
   "PAUSED",
diff --git a/packages/core/src/v3/index.ts b/packages/core/src/v3/index.ts
@@ -42,7 +42,7 @@ export { ConsoleInterceptor } from "./consoleInterceptor";
 export {
   flattenAttributes,
   unflattenAttributes,
-  flattenAndNormalizeAttributes,
+  primitiveValueOrflattenedAttributes,
 } from "./utils/flattenAttributes";
 export { defaultRetryOptions, calculateNextRetryDelay, calculateResetAt } from "./utils/retries";
 export { accessoryAttributes } from "./utils/styleAttributes";
diff --git a/packages/core/src/v3/utils/flattenAttributes.ts b/packages/core/src/v3/utils/flattenAttributes.ts

Original file line number	Diff line number	Diff line change
`@@ -581,11 +581,7 @@ function NodeStatusIcon({ node }: { node: RunEvent }) {`
`581`	`581`	`}`
`582`	`582`
`583`	`583`	`function TaskLine({ isError, isSelected }: { isError: boolean; isSelected: boolean }) {`
`584`		`- return (`
`585`		`- <div`
`586`		`- className={cn("h-8 w-2 border-r", isError ? "border-rose-500/10" : "border-charcoal-800")}`
`587`		`- />`
`588`		`- );`
	`584`	`+ return <div className={cn("h-8 w-2 border-r border-grid-bright")} />;`
`589`	`585`	`}`
`590`	`586`
`591`	`587`	`function ShowParentLink({ runFriendlyId }: { runFriendlyId: string }) {`