From 0ebd79eadaa39756ca43c16399ff100c9bf5a61f Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 25 Sep 2024 17:44:22 +0100 Subject: [PATCH 01/19] Removed the inline-code accessory from the logs when calling trigger or batchTrigger from a run --- .changeset/three-olives-love.md | 5 +++++ packages/trigger-sdk/src/v3/shared.ts | 18 ------------------ 2 files changed, 5 insertions(+), 18 deletions(-) create mode 100644 .changeset/three-olives-love.md diff --git a/.changeset/three-olives-love.md b/.changeset/three-olives-love.md new file mode 100644 index 0000000000..a4363d4200 --- /dev/null +++ b/.changeset/three-olives-love.md @@ -0,0 +1,5 @@ +--- +"@trigger.dev/sdk": patch +--- + +Removed the inline-code accessory from the logs when calling trigger or batchTrigger from a run diff --git a/packages/trigger-sdk/src/v3/shared.ts b/packages/trigger-sdk/src/v3/shared.ts index d97cd7a1b0..f5e4b26db3 100644 --- a/packages/trigger-sdk/src/v3/shared.ts +++ b/packages/trigger-sdk/src/v3/shared.ts @@ -805,15 +805,6 @@ async function trigger_internal( [SEMATTRS_MESSAGING_OPERATION]: "publish", ["messaging.client_id"]: taskContext.worker?.id, [SEMATTRS_MESSAGING_SYSTEM]: "trigger.dev", - ...accessoryAttributes({ - items: [ - { - text: id, - variant: "normal", - }, - ], - style: "codepath", - }), }, onResponseBody: (body, span) => { body && @@ -877,15 +868,6 @@ async function batchTrigger_internal( [SEMATTRS_MESSAGING_OPERATION]: "publish", ["messaging.client_id"]: taskContext.worker?.id, [SEMATTRS_MESSAGING_SYSTEM]: "trigger.dev", - ...accessoryAttributes({ - items: [ - { - text: id, - variant: "normal", - }, - ], - style: "codepath", - }), }, ...requestOptions, } From b18129a4053c41b180d75eee69b12f275f524fe5 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 25 Sep 2024 17:44:33 +0100 Subject: [PATCH 02/19] Removed re2 from the v3 catalog --- references/v3-catalog/src/trigger/email.tsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/references/v3-catalog/src/trigger/email.tsx b/references/v3-catalog/src/trigger/email.tsx index 2ffb9f863f..113bd97fcd 100644 --- a/references/v3-catalog/src/trigger/email.tsx +++ b/references/v3-catalog/src/trigger/email.tsx @@ -1,7 +1,6 @@ import { logger, task } from "@trigger.dev/sdk/v3"; import { ExampleEmail } from "./emails/index.js"; import { render } from "@react-email/render"; -import EmailReplyParser from "email-reply-parser"; export const emailTask = task({ id: "email", @@ -12,15 +11,3 @@ export const emailTask = task({ }; }, }); - -export const parseEmailReplyTask = task({ - id: "parse-email-reply", - run: async ({ email }: { email: string }) => { - const parsed = new EmailReplyParser().read(email); - - logger.log("Parsed email", { - email, - parsed, - }); - }, -}); From 77455f3b64c90bd9b937455a8f17183c64c6c9b0 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 25 Sep 2024 17:44:42 +0100 Subject: [PATCH 03/19] Added a Root badge to the runs list --- apps/webapp/app/components/runs/v3/TaskRunsTable.tsx | 7 +++++-- apps/webapp/app/presenters/v3/RunListPresenter.server.ts | 3 +++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index cb8a7e5f02..b7b6ffb096 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -41,6 +41,7 @@ import { LiveTimer } from "./LiveTimer"; import { ReplayRunDialog } from "./ReplayRunDialog"; import { TaskRunStatusCombo } from "./TaskRunStatus"; import { RunTag } from "./RunTag"; +import { Badge } from "~/components/primitives/Badge"; type RunsTableProps = { total: number; @@ -123,7 +124,7 @@ export function TaskRunsTable({ )} Run # Env - Task ID + Task Version Status Started @@ -278,7 +279,9 @@ export function TaskRunsTable({ userName={run.environment.userName} /> - {run.taskIdentifier} + + {run.taskIdentifier} {run.rootTaskRunId === null ? Root : null} + {run.version ?? "–"} diff --git a/apps/webapp/app/presenters/v3/RunListPresenter.server.ts b/apps/webapp/app/presenters/v3/RunListPresenter.server.ts index cea8ca6231..ab73606e52 100644 --- a/apps/webapp/app/presenters/v3/RunListPresenter.server.ts +++ b/apps/webapp/app/presenters/v3/RunListPresenter.server.ts @@ -168,6 +168,7 @@ export class RunListPresenter extends BasePresenter { usageDurationMs: BigInt; tags: string[]; depth: number; + rootTaskRunId: string | null; }[] >` SELECT @@ -192,6 +193,7 @@ export class RunListPresenter extends BasePresenter { tr."costInCents" AS "costInCents", tr."usageDurationMs" AS "usageDurationMs", tr."depth" AS "depth", + tr."rootTaskRunId" AS "rootTaskRunId", array_remove(array_agg(tag.name), NULL) AS "tags" FROM ${sqlDatabaseSchema}."TaskRun" tr @@ -336,6 +338,7 @@ WHERE usageDurationMs: Number(run.usageDurationMs), tags: run.tags.sort((a, b) => a.localeCompare(b)), depth: run.depth, + rootTaskRunId: run.rootTaskRunId, }; }), pagination: { From 77bd829b93c85fb7a5dd1f4a3e31322c03325d69 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 25 Sep 2024 18:22:07 +0100 Subject: [PATCH 04/19] Keep the side panel open when switching tasks & remove links from detail panel --- .../app/presenters/v3/SpanPresenter.server.ts | 39 ++++++- .../route.tsx | 107 +++++++++++++----- .../v3-catalog/src/trigger/taskHierarchy.ts | 5 +- 3 files changed, 119 insertions(+), 32 deletions(-) diff --git a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts index 7fbcd7a7a0..8450ec5300 100644 --- a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts +++ b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts @@ -125,6 +125,21 @@ export class SpanPresenter extends BasePresenter { exportName: true, }, }, + //relationships + rootTaskRun: { + select: { + taskIdentifier: true, + friendlyId: true, + spanId: true, + }, + }, + parentTaskRun: { + select: { + taskIdentifier: true, + friendlyId: true, + spanId: true, + }, + }, }, where: { spanId, @@ -183,8 +198,6 @@ export class SpanPresenter extends BasePresenter { } } - const span = await eventRepository.getSpan(spanId, run.traceId); - const context = { task: { id: run.taskIdentifier, @@ -270,7 +283,15 @@ export class SpanPresenter extends BasePresenter { output, outputType: finishedAttempt?.outputType ?? "application/json", error, - links: span?.links, + relationships: { + root: run.rootTaskRun + ? { + ...run.rootTaskRun, + isParent: run.parentTaskRun?.friendlyId === run.rootTaskRun.friendlyId, + } + : undefined, + parent: run.parentTaskRun ?? undefined, + }, context: JSON.stringify(context, null, 2), }; } @@ -295,10 +316,22 @@ export class SpanPresenter extends BasePresenter { return; } + const triggeredRuns = await this._replica.taskRun.findMany({ + select: { + friendlyId: true, + taskIdentifier: true, + spanId: true, + }, + where: { + parentSpanId: spanId, + }, + }); + return { ...span, events: span.events, properties: span.properties ? JSON.stringify(span.properties, null, 2) : undefined, + triggeredRuns, showActionBar: span.show?.actions === true, }; } diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx index 5c2e51fc15..303cb22def 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx @@ -265,18 +265,6 @@ function SpanBody({ )} - {span.links && span.links.length > 0 && ( - - Links - -
- {span.links.map((link, index) => ( - - ))} -
- - - )} ) : ( @@ -318,13 +306,22 @@ function SpanBody({ Message {span.message} - {span.links && span.links.length > 0 && ( + {span.triggeredRuns.length > 0 && ( - Links + Triggered runs
- {span.links.map((link, index) => ( - + {span.triggeredRuns.map((run) => ( + + {run.taskIdentifier} ({run.friendlyId}) + ))}
@@ -551,18 +548,7 @@ function RunBody({ )} - {run.links && run.links.length > 0 && ( - - Links - -
- {run.links.map((link, index) => ( - - ))} -
- - - )} + Run invocation cost @@ -613,6 +599,71 @@ function RunBody({ + {run.relationships.root ? ( + + {run.relationships.root.isParent ? ( + + Root & Parent + + + {run.relationships.root.taskIdentifier} ( + {run.relationships.root.friendlyId}) + + + + ) : ( + <> + + Root + + + {run.relationships.root.taskIdentifier} ( + {run.relationships.root.friendlyId}) + + + + {run.relationships.parent ? ( + + Parent + + + {run.relationships.parent.taskIdentifier} ( + {run.relationships.parent.friendlyId}) + + + + ) : null} + + )} + + ) : null} {run.payload !== undefined && ( )} diff --git a/references/v3-catalog/src/trigger/taskHierarchy.ts b/references/v3-catalog/src/trigger/taskHierarchy.ts index 9cda1c9232..f35af93601 100644 --- a/references/v3-catalog/src/trigger/taskHierarchy.ts +++ b/references/v3-catalog/src/trigger/taskHierarchy.ts @@ -17,7 +17,10 @@ export const rootTask = task({ } } else { if (useBatch) { - await childTask.batchTrigger([{ payload: { useWaits, useBatch } }]); + await childTask.batchTrigger([ + { payload: { useWaits, useBatch } }, + { payload: { useWaits, useBatch } }, + ]); } else { await childTask.trigger({ useWaits, useBatch }); } From 35bb7a23b13cd4f4b85b70376e7ce5bd7f393409 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 25 Sep 2024 18:39:26 +0100 Subject: [PATCH 05/19] Root and parent task styling inspector --- .../route.tsx | 27 ++++++++++++++----- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx index 303cb22def..8cbf0f4be4 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx @@ -319,8 +319,12 @@ function SpanBody({ { friendlyId: run.friendlyId }, { spanId: run.spanId } )} + className="group flex flex-wrap items-center gap-x-1 gap-y-0" > - {run.taskIdentifier} ({run.friendlyId}) + {run.taskIdentifier} + + ({run.friendlyId}) + ))} @@ -614,9 +618,12 @@ function RunBody({ }, { spanId: run.relationships.root.spanId } )} + className="group flex flex-wrap items-center gap-x-1 gap-y-0" > - {run.relationships.root.taskIdentifier} ( - {run.relationships.root.friendlyId}) + {run.relationships.root.taskIdentifier} + + ({run.relationships.root.friendlyId}) + @@ -634,9 +641,12 @@ function RunBody({ }, { spanId: run.relationships.root.spanId } )} + className="group flex flex-wrap items-center gap-x-1 gap-y-0" > - {run.relationships.root.taskIdentifier} ( - {run.relationships.root.friendlyId}) + {run.relationships.root.taskIdentifier} + + ({run.relationships.root.friendlyId}) + @@ -653,9 +663,12 @@ function RunBody({ }, { spanId: run.relationships.parent.spanId } )} + className="group flex flex-wrap items-center gap-x-1 gap-y-0" > - {run.relationships.parent.taskIdentifier} ( - {run.relationships.parent.friendlyId}) + {run.relationships.parent.taskIdentifier} + + ({run.relationships.parent.friendlyId}) + From 701d5af5a5a6fe9a235de207394afdb96e4a3579 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 25 Sep 2024 19:14:00 +0100 Subject: [PATCH 06/19] =?UTF-8?q?Hide=20the=20root=20badge=20if=20the=20ta?= =?UTF-8?q?sk=20isn=E2=80=99t=20the=20root?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/components/primitives/Badge.tsx | 2 + .../app/components/runs/v3/TaskRunsTable.tsx | 5 ++- .../app/presenters/v3/RunPresenter.server.ts | 9 ++++ .../route.tsx | 41 +++++++++++++++---- 4 files changed, 48 insertions(+), 9 deletions(-) diff --git a/apps/webapp/app/components/primitives/Badge.tsx b/apps/webapp/app/components/primitives/Badge.tsx index e87771e4c0..92f31771f9 100644 --- a/apps/webapp/app/components/primitives/Badge.tsx +++ b/apps/webapp/app/components/primitives/Badge.tsx @@ -6,6 +6,8 @@ const variants = { "grid place-items-center rounded-full px-2 h-5 tracking-wider text-xxs bg-charcoal-750 text-text-bright uppercase whitespace-nowrap", small: "grid place-items-center rounded-full px-[0.4rem] h-4 tracking-wider text-xxs bg-background-dimmed text-text-dimmed uppercase whitespace-nowrap", + "extra-small": + "grid place-items-center rounded-full px-1.5 h-4 border-tracking-wider text-xxs bg-background-bright text-blue-500 whitespace-nowrap", outline: "grid place-items-center rounded-sm px-1.5 h-5 tracking-wider text-xxs border border-dimmed text-text-dimmed uppercase whitespace-nowrap", "outline-rounded": diff --git a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx index b7b6ffb096..002fa8c233 100644 --- a/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx +++ b/apps/webapp/app/components/runs/v3/TaskRunsTable.tsx @@ -280,7 +280,10 @@ export function TaskRunsTable({ /> - {run.taskIdentifier} {run.rootTaskRunId === null ? Root : null} + + {run.taskIdentifier} + {run.rootTaskRunId === null ? Root : null} + {run.version ?? "–"} diff --git a/apps/webapp/app/presenters/v3/RunPresenter.server.ts b/apps/webapp/app/presenters/v3/RunPresenter.server.ts index db67ed4c57..3ac7f73fda 100644 --- a/apps/webapp/app/presenters/v3/RunPresenter.server.ts +++ b/apps/webapp/app/presenters/v3/RunPresenter.server.ts @@ -37,6 +37,13 @@ export class RunPresenter { status: true, completedAt: true, logsDeletedAt: true, + rootTaskRun: { + select: { + friendlyId: true, + taskIdentifier: true, + spanId: true, + }, + }, runtimeEnvironment: { select: { id: true, @@ -80,6 +87,7 @@ export class RunPresenter { isFinished: isFinalRunStatus(run.status), completedAt: run.completedAt, logsDeletedAt: run.logsDeletedAt, + rootTaskRun: run.rootTaskRun, environment: { id: run.runtimeEnvironment.id, organizationId: run.runtimeEnvironment.organizationId, @@ -141,6 +149,7 @@ export class RunPresenter { isFinished: isFinalRunStatus(run.status), completedAt: run.completedAt, logsDeletedAt: run.logsDeletedAt, + rootTaskRun: run.rootTaskRun, environment: { id: run.runtimeEnvironment.id, organizationId: run.runtimeEnvironment.organizationId, 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 index 94bbe3cd85..40fff5397e 100644 --- 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 @@ -65,7 +65,7 @@ import { useProject } from "~/hooks/useProject"; import { useReplaceLocation } from "~/hooks/useReplaceLocation"; import { Shortcut, useShortcutKeys } from "~/hooks/useShortcutKeys"; import { useUser } from "~/hooks/useUser"; -import { RunPresenter } from "~/presenters/v3/RunPresenter.server"; +import { Run, RunPresenter } from "~/presenters/v3/RunPresenter.server"; import { requireUserId } from "~/services/session.server"; import { cn } from "~/utils/cn"; import { lerp } from "~/utils/lerp"; @@ -316,6 +316,7 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade environmentType={run.environment.type} shouldLiveReload={shouldLiveReload} maximumLiveReloadingSetting={maximumLiveReloadingSetting} + rootRun={run.rootTaskRun} /> @@ -438,6 +439,11 @@ type TasksTreeViewProps = { environmentType: RuntimeEnvironmentType; shouldLiveReload: boolean; maximumLiveReloadingSetting: number; + rootRun: { + friendlyId: string; + taskIdentifier: string; + spanId: string; + } | null; }; function TasksTreeView({ @@ -451,6 +457,7 @@ function TasksTreeView({ environmentType, shouldLiveReload, maximumLiveReloadingSetting, + rootRun, }: TasksTreeViewProps) { const [filterText, setFilterText] = useState(""); const [errorsOnly, setErrorsOnly] = useState(false); @@ -517,8 +524,14 @@ function TasksTreeView({ >
- {parentRunFriendlyId ? ( - + {rootRun ? ( + + ) : parentRunFriendlyId ? ( + ) : ( This is the root task @@ -599,7 +612,9 @@ function TasksTreeView({ className="h-4 min-h-4 w-4 min-w-4" /> - {node.data.isRoot && Root} + {node.data.isRoot && !rootRun && ( + Root + )}
@@ -954,24 +969,34 @@ function TaskLine({ isError, isSelected }: { isError: boolean; isSelected: boole return
; } -function ShowParentLink({ runFriendlyId }: { runFriendlyId: string }) { +function ShowParentLink({ + runFriendlyId, + spanId, + isRoot, +}: { + runFriendlyId: string; + spanId?: string; + isRoot: boolean; +}) { const [mouseOver, setMouseOver] = useState(false); const organization = useOrganization(); const project = useProject(); const { spanParam } = useParams(); + const span = spanId ? spanId : spanParam; + return ( - Show parent items + {isRoot ? "Show root run" : "Show parent run"} ); From 5a33a0021747138bc357d8a1579e7113bec9d91e Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 08:55:14 +0100 Subject: [PATCH 07/19] margin between the dev not running message --- .../route.tsx | 2 +- .../route.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index 40fff5397e..ed800cac54 100644 --- 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 @@ -1166,7 +1166,7 @@ function ConnectedDevWarning() { isVisible ? "opacity-100" : "h-0 opacity-0" )} > - +
Runs usually start within 1 second in{" "} diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx index 3be620065f..f0c9e8c1cd 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx @@ -1150,7 +1150,7 @@ function ConnectedDevWarning() { isVisible ? "opacity-100" : "h-0 opacity-0" )} > - +
Runs usually start within 2 seconds in{" "} From 842536199984665cd713fd42be03fcfddfa2e626 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 08:55:28 +0100 Subject: [PATCH 08/19] improved spacing of items --- .../route.tsx | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx index 8cbf0f4be4..17c6952b70 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx @@ -310,24 +310,22 @@ function SpanBody({ Triggered runs -
- {span.triggeredRuns.map((run) => ( - - {run.taskIdentifier} - - ({run.friendlyId}) - - - ))} -
+ {span.triggeredRuns.map((run) => ( + + {run.taskIdentifier} + + ({run.friendlyId}) + + + ))} )} From 84c38c1ae6f65a113a338f9ecab3081d6b2ec9e1 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 10:07:32 +0100 Subject: [PATCH 09/19] Improved Root badge style --- apps/webapp/app/components/primitives/Badge.tsx | 2 +- .../route.tsx | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/webapp/app/components/primitives/Badge.tsx b/apps/webapp/app/components/primitives/Badge.tsx index 92f31771f9..26a4486bb5 100644 --- a/apps/webapp/app/components/primitives/Badge.tsx +++ b/apps/webapp/app/components/primitives/Badge.tsx @@ -7,7 +7,7 @@ const variants = { small: "grid place-items-center rounded-full px-[0.4rem] h-4 tracking-wider text-xxs bg-background-dimmed text-text-dimmed uppercase whitespace-nowrap", "extra-small": - "grid place-items-center rounded-full px-1.5 h-4 border-tracking-wider text-xxs bg-background-bright text-blue-500 whitespace-nowrap", + "grid place-items-center border border-charcoal-650 rounded-sm px-1 h-4 border-tracking-wider text-xxs bg-background-bright text-blue-500 whitespace-nowrap", outline: "grid place-items-center rounded-sm px-1.5 h-5 tracking-wider text-xxs border border-dimmed text-text-dimmed uppercase whitespace-nowrap", "outline-rounded": 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 index ed800cac54..f3d9819c03 100644 --- 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 @@ -612,9 +612,7 @@ function TasksTreeView({ className="h-4 min-h-4 w-4 min-w-4" /> - {node.data.isRoot && !rootRun && ( - Root - )} + {node.data.isRoot && !rootRun && Root}
@@ -660,7 +658,7 @@ function TasksTreeView({ /> -
+
Date: Thu, 26 Sep 2024 11:49:05 +0100 Subject: [PATCH 10/19] Show a table of triggered runs in the inspector --- .../app/presenters/v3/SpanPresenter.server.ts | 7 + .../route.tsx | 213 ++++++++++-------- 2 files changed, 125 insertions(+), 95 deletions(-) diff --git a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts index 8450ec5300..419436b80d 100644 --- a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts +++ b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts @@ -321,6 +321,13 @@ export class SpanPresenter extends BasePresenter { friendlyId: true, taskIdentifier: true, spanId: true, + createdAt: true, + number: true, + lockedToVersion: { + select: { + version: true, + }, + }, }, where: { parentSpanId: spanId, diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx index 17c6952b70..e6ab1a92bb 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx @@ -19,6 +19,14 @@ import { Header2, Header3 } from "~/components/primitives/Headers"; import { Paragraph } from "~/components/primitives/Paragraph"; import * as Property from "~/components/primitives/PropertyTable"; import { Spinner } from "~/components/primitives/Spinner"; +import { + Table, + TableBody, + TableCell, + TableHeader, + TableHeaderCell, + TableRow, +} from "~/components/primitives/Table"; import { TabButton, TabContainer } from "~/components/primitives/Tabs"; import { TextLink } from "~/components/primitives/TextLink"; import { InfoIconTooltip, SimpleTooltip } from "~/components/primitives/Tooltip"; @@ -28,6 +36,7 @@ import { RunTag } from "~/components/runs/v3/RunTag"; import { SpanEvents } from "~/components/runs/v3/SpanEvents"; import { SpanTitle } from "~/components/runs/v3/SpanTitle"; import { TaskRunAttemptStatusCombo } from "~/components/runs/v3/TaskRunAttemptStatus"; +import { TaskRunsTable } from "~/components/runs/v3/TaskRunsTable"; import { TaskRunStatusCombo } from "~/components/runs/v3/TaskRunStatus"; import { useOrganization } from "~/hooks/useOrganizations"; import { useProject } from "~/hooks/useProject"; @@ -308,30 +317,45 @@ function SpanBody({ {span.triggeredRuns.length > 0 && ( - Triggered runs - - {span.triggeredRuns.map((run) => ( - - {run.taskIdentifier} - - ({run.friendlyId}) - - - ))} - +
+ Triggered runs + + + + Run # + Task + Version + Created at + + + + {span.triggeredRuns.map((run) => { + const path = v3RunSpanPath( + organization, + project, + { friendlyId: run.friendlyId }, + { spanId: run.spanId } + ); + return ( + + {run.number} + {run.taskIdentifier} + + {run.lockedToVersion?.version ?? "–"} + + + + + + ); + })} + +
+
)} - - {span.events !== undefined && } + {span.events.length > 0 && } {span.properties !== undefined && ( + {run.relationships.root ? ( + run.relationships.root.isParent ? ( + + Root & Parent + + + {run.relationships.root.taskIdentifier} + + ({run.relationships.root.friendlyId}) + + + + + ) : ( + <> + + Root + + + {run.relationships.root.taskIdentifier} + + ({run.relationships.root.friendlyId}) + + + + + {run.relationships.parent ? ( + + Parent + + + {run.relationships.parent.taskIdentifier} + + ({run.relationships.parent.friendlyId}) + + + + + ) : null} + + ) + ) : null} Version @@ -601,80 +697,7 @@ function RunBody({
- {run.relationships.root ? ( - - {run.relationships.root.isParent ? ( - - Root & Parent - - - {run.relationships.root.taskIdentifier} - - ({run.relationships.root.friendlyId}) - - - - - ) : ( - <> - - Root - - - {run.relationships.root.taskIdentifier} - - ({run.relationships.root.friendlyId}) - - - - - {run.relationships.parent ? ( - - Parent - - - {run.relationships.parent.taskIdentifier} - - ({run.relationships.parent.friendlyId}) - - - - - ) : null} - - )} - - ) : null} + {run.payload !== undefined && ( )} From 7932a0526a98a9b66d57a9eda18c38be043cb9cb Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 12:24:54 +0100 Subject: [PATCH 11/19] Add parentSpanId index to the TaskRun table --- .../migration.sql | 2 ++ packages/database/prisma/schema.prisma | 1 + 2 files changed, 3 insertions(+) create mode 100644 packages/database/prisma/migrations/20240926110455_add_parent_span_id_index_to_the_task_run_table/migration.sql diff --git a/packages/database/prisma/migrations/20240926110455_add_parent_span_id_index_to_the_task_run_table/migration.sql b/packages/database/prisma/migrations/20240926110455_add_parent_span_id_index_to_the_task_run_table/migration.sql new file mode 100644 index 0000000000..da39a8092b --- /dev/null +++ b/packages/database/prisma/migrations/20240926110455_add_parent_span_id_index_to_the_task_run_table/migration.sql @@ -0,0 +1,2 @@ +-- CreateIndex +CREATE INDEX CONCURRENTLY IF NOT EXISTS "TaskRun_parentSpanId_idx" ON "TaskRun"("parentSpanId"); diff --git a/packages/database/prisma/schema.prisma b/packages/database/prisma/schema.prisma index c984e051d5..6b25eb5712 100644 --- a/packages/database/prisma/schema.prisma +++ b/packages/database/prisma/schema.prisma @@ -1782,6 +1782,7 @@ model TaskRun { @@index([scheduleId]) // Run page inspector @@index([spanId]) + @@index([parentSpanId]) // Finding completed runs @@index([completedAt]) } From 4ee496354a2db47a760b3d5e88df1275829298b6 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 13:04:12 +0100 Subject: [PATCH 12/19] Fix for the run inspector now opening when linked from another run/replay --- apps/webapp/app/hooks/useReplaceLocation.ts | 32 ------------------- .../app/hooks/useReplaceSearchParams.ts | 22 +++++++++++++ .../route.tsx | 11 ++----- .../route.tsx | 11 ++----- 4 files changed, 28 insertions(+), 48 deletions(-) delete mode 100644 apps/webapp/app/hooks/useReplaceLocation.ts create mode 100644 apps/webapp/app/hooks/useReplaceSearchParams.ts diff --git a/apps/webapp/app/hooks/useReplaceLocation.ts b/apps/webapp/app/hooks/useReplaceLocation.ts deleted file mode 100644 index 0221ff8f5e..0000000000 --- a/apps/webapp/app/hooks/useReplaceLocation.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { useCallback, useState } from "react"; -import { useOptimisticLocation } from "./useOptimisticLocation"; -import type { Location } from "@remix-run/react"; - -export function useReplaceLocation() { - const optimisticLocation = useOptimisticLocation(); - const [location, setLocation] = useState(optimisticLocation); - - const replaceLocation = useCallback((location: Location) => { - const fullPath = location.pathname + location.search + location.hash; - //replace the URL in the browser - history.replaceState(null, "", fullPath); - //update the state (new object in case the same location ref was modified) - const newLocation = { ...location }; - setLocation(newLocation); - }, []); - - const replaceSearchParam = useCallback( - (key: string, value?: string) => { - const searchParams = new URLSearchParams(location.search); - if (value) { - searchParams.set(key, value); - } else { - searchParams.delete(key); - } - replaceLocation({ ...optimisticLocation, search: "?" + searchParams.toString() }); - }, - [optimisticLocation, replaceLocation] - ); - - return { location, replaceLocation, replaceSearchParam }; -} diff --git a/apps/webapp/app/hooks/useReplaceSearchParams.ts b/apps/webapp/app/hooks/useReplaceSearchParams.ts new file mode 100644 index 0000000000..b55c8bf217 --- /dev/null +++ b/apps/webapp/app/hooks/useReplaceSearchParams.ts @@ -0,0 +1,22 @@ +import { useSearchParams } from "@remix-run/react"; +import { useCallback } from "react"; + +export function useReplaceSearchParams() { + const [searchParams, setSearchParams] = useSearchParams(); + + const replaceSearchParam = useCallback( + (key: string, value?: string) => { + setSearchParams((s) => { + if (value) { + s.set(key, value); + } else { + s.delete(key); + } + return s; + }); + }, + [searchParams] + ); + + return { searchParams, setSearchParams, replaceSearchParam }; +} 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 index f3d9819c03..db16463a6b 100644 --- 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 @@ -62,7 +62,7 @@ import { useEventSource } from "~/hooks/useEventSource"; import { useInitialDimensions } from "~/hooks/useInitialDimensions"; import { useOrganization } from "~/hooks/useOrganizations"; import { useProject } from "~/hooks/useProject"; -import { useReplaceLocation } from "~/hooks/useReplaceLocation"; +import { useReplaceSearchParams } from "~/hooks/useReplaceSearchParams"; import { Shortcut, useShortcutKeys } from "~/hooks/useShortcutKeys"; import { useUser } from "~/hooks/useUser"; import { Run, RunPresenter } from "~/presenters/v3/RunPresenter.server"; @@ -142,11 +142,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => { type LoaderData = SerializeFrom; -function getSpanId(location: Location): string | undefined { - const search = new URLSearchParams(location.search); - return search.get("span") ?? undefined; -} - export default function Page() { const { run, trace, resizable, maximumLiveReloadingSetting } = useLoaderData(); const user = useUser(); @@ -259,8 +254,8 @@ export default function Page() { function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: LoaderData) { const organization = useOrganization(); const project = useProject(); - const { location, replaceSearchParam } = useReplaceLocation(); - const selectedSpanId = getSpanId(location); + const { searchParams, replaceSearchParam } = useReplaceSearchParams(); + const selectedSpanId = searchParams.get("span") ?? undefined; if (!trace) { return <>; diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx index f0c9e8c1cd..25ae7d8378 100644 --- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx +++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx @@ -64,7 +64,7 @@ import { useDebounce } from "~/hooks/useDebounce"; import { useInitialDimensions } from "~/hooks/useInitialDimensions"; import { useOrganization } from "~/hooks/useOrganizations"; import { useProject } from "~/hooks/useProject"; -import { useReplaceLocation } from "~/hooks/useReplaceLocation"; +import { useReplaceSearchParams } from "~/hooks/useReplaceSearchParams"; import { Shortcut, useShortcutKeys } from "~/hooks/useShortcutKeys"; import { useSyncRunPage } from "~/hooks/useSyncRunPage"; import { Trace, TraceEvent } from "~/hooks/useSyncTrace"; @@ -147,11 +147,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => { type LoaderData = UseDataFunctionReturn; -function getSpanId(location: Location): string | undefined { - const search = new URLSearchParams(location.search); - return search.get("span") ?? undefined; -} - export default function Page() { const { run, resizable } = useTypedLoaderData(); @@ -265,8 +260,8 @@ type InspectorState = | undefined; function Panels({ resizable, run: originalRun }: LoaderData) { - const { location, replaceSearchParam } = useReplaceLocation(); - const selectedSpanId = getSpanId(location); + const { searchParams, replaceSearchParam } = useReplaceSearchParams(); + const selectedSpanId = searchParams.get("span") ?? undefined; const appOrigin = useAppOrigin(); const { isUpToDate, events, runs } = useSyncRunPage({ From be23df4008e51258677ba1260ce97f63cc3b2e12 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 13:31:14 +0100 Subject: [PATCH 13/19] Triggered runs table has a max height --- .../route.tsx | 70 ++++++++++--------- 1 file changed, 38 insertions(+), 32 deletions(-) diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx index c6aa2a6f3b..69a0c81506 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx @@ -319,38 +319,44 @@ function SpanBody({
Triggered runs - - - - Run # - Task - Version - Created at - - - - {span.triggeredRuns.map((run) => { - const path = v3RunSpanPath( - organization, - project, - { friendlyId: run.friendlyId }, - { spanId: run.spanId } - ); - return ( - - {run.number} - {run.taskIdentifier} - - {run.lockedToVersion?.version ?? "–"} - - - - - - ); - })} - -
+
+ + + + Run # + Task + Version + Created at + + + + {span.triggeredRuns.map((run) => { + const path = v3RunSpanPath( + organization, + project, + { friendlyId: run.friendlyId }, + { spanId: run.spanId } + ); + return ( + + + {run.number} + + + {run.taskIdentifier} + + + {run.lockedToVersion?.version ?? "–"} + + + + + + ); + })} + +
+
)} From 3953e8b0ab38fcdc20ddac8bc33c2cfb768dcea8 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 14:05:09 +0100 Subject: [PATCH 14/19] Added a description to the replay run modal and improved the styling slightly --- .../components/runs/v3/ReplayRunDialog.tsx | 38 ++++++++++++------- .../route.tsx | 2 +- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx index 91bd08880a..b8af3646f8 100644 --- a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx +++ b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx @@ -1,3 +1,4 @@ +import { DialogClose } from "@radix-ui/react-dialog"; import { Form, useNavigation, useSubmit } from "@remix-run/react"; import { useCallback, useEffect, useRef } from "react"; import { UseDataFunctionReturn, useTypedFetcher } from "remix-typedjson"; @@ -8,6 +9,7 @@ import { DialogContent, DialogHeader } from "~/components/primitives/Dialog"; import { Header3 } from "~/components/primitives/Headers"; import { InputGroup } from "~/components/primitives/InputGroup"; import { Label } from "~/components/primitives/Label"; +import { Paragraph } from "~/components/primitives/Paragraph"; import { Select, SelectItem } from "~/components/primitives/Select"; import { ButtonSpinner, Spinner } from "~/components/primitives/Spinner"; import { type loader } from "~/routes/resources.taskruns.$runParam.replay"; @@ -19,7 +21,7 @@ type ReplayRunDialogProps = { export function ReplayRunDialog({ runFriendlyId, failedRedirect }: ReplayRunDialogProps) { return ( - + ); @@ -95,8 +97,12 @@ function ReplayForm({
submitForm(e)} className="pt-2"> {editablePayload ? ( <> + + Replaying will create a new run using the same or modified payload, executing against + the latest version in your selected environment. + Payload -
+
{ const env = environments.find((env) => env.id === value)!; return ( @@ -144,16 +150,20 @@ function ReplayForm({ - +
+ + + + +
); } 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 index db16463a6b..39a4a49ec7 100644 --- 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 @@ -197,7 +197,7 @@ export default function Page() { LeadingIcon={ArrowUturnLeftIcon} shortcut={{ key: "R" }} > - Replay run + Replay run… Date: Thu, 26 Sep 2024 15:40:55 +0100 Subject: [PATCH 15/19] Only include a bottom border when the triggered run table is more than 4 items --- .../route.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx index 69a0c81506..f092b5d130 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx @@ -319,8 +319,13 @@ function SpanBody({
Triggered runs -
- +
4 && "border-b border-grid-bright" + )} + > +
Run # From ae9adb5b09288ce732d6b03c9df2ccc41b7b4194 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 15:46:47 +0100 Subject: [PATCH 16/19] Improved the triggered runs table borders --- .../route.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx index f092b5d130..9248d74b50 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx @@ -321,7 +321,7 @@ function SpanBody({ Triggered runs
4 && "border-b border-grid-bright" )} > From ba0ec21a8f9c99a404baa2565786a05c3b558afd Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 18:14:34 +0100 Subject: [PATCH 17/19] Improved the tables so they can have an optional sticky header --- .../app/components/primitives/Table.tsx | 16 ++-- .../route.tsx | 79 +++++++++---------- 2 files changed, 47 insertions(+), 48 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index 5f4f0d7e53..85d68ba0c3 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -22,7 +22,7 @@ export const Table = forwardRef( fullWidth && "w-full" )} > -
+
{children}
@@ -40,7 +40,10 @@ export const TableHeader = forwardRef return ( {children} @@ -56,7 +59,10 @@ type TableBodyProps = { export const TableBody = forwardRef( ({ className, children }, ref) => { return ( - + {children} ); @@ -138,7 +144,7 @@ type TableCellProps = TableCellBasicProps & { }; const stickyStyles = - "sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem] before:bg-gradient-to-r before:from-transparent before:to-background before:content-[''] group-hover/table-row:before:to-charcoal-900"; + "sticky right-0 z-10 w-[2.8rem] min-w-[2.8rem] bg-background-dimmed before:absolute before:pointer-events-none before:-left-8 before:top-0 before:h-full before:min-w-[2rem]"; export const TableCell = forwardRef( ( @@ -180,7 +186,7 @@ export const TableCell = forwardRef( className={cn( "text-xs text-charcoal-400", to || onClick || hasAction - ? "cursor-pointer group-hover/table-row:bg-charcoal-900" + ? "cursor-pointer group-hover/table-row:bg-charcoal-800" : "px-3 py-3 align-middle", !to && !onClick && alignmentClassName, isSticky && stickyStyles, diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx index 9248d74b50..fc27590d7f 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx @@ -319,49 +319,42 @@ function SpanBody({
Triggered runs -
4 && "border-b border-grid-bright" - )} - > - - - - Run # - Task - Version - Created at - - - - {span.triggeredRuns.map((run) => { - const path = v3RunSpanPath( - organization, - project, - { friendlyId: run.friendlyId }, - { spanId: run.spanId } - ); - return ( - - - {run.number} - - - {run.taskIdentifier} - - - {run.lockedToVersion?.version ?? "–"} - - - - - - ); - })} - -
-
+ + + + Run # + Task + Version + Created at + + + + {span.triggeredRuns.map((run) => { + const path = v3RunSpanPath( + organization, + project, + { friendlyId: run.friendlyId }, + { spanId: run.spanId } + ); + return ( + + + {run.number} + + + {run.taskIdentifier} + + + {run.lockedToVersion?.version ?? "–"} + + + + + + ); + })} + +
)} From ba60cb617b0d7cac969f2c3e879685596018a8af Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Thu, 26 Sep 2024 18:23:47 +0100 Subject: [PATCH 18/19] Added table types to storybook --- .../app/routes/storybook.table/route.tsx | 65 +++++++++++++++++++ apps/webapp/app/routes/storybook/route.tsx | 4 ++ 2 files changed, 69 insertions(+) create mode 100644 apps/webapp/app/routes/storybook.table/route.tsx diff --git a/apps/webapp/app/routes/storybook.table/route.tsx b/apps/webapp/app/routes/storybook.table/route.tsx new file mode 100644 index 0000000000..2a509e5551 --- /dev/null +++ b/apps/webapp/app/routes/storybook.table/route.tsx @@ -0,0 +1,65 @@ +import React from "react"; +import { Header1, Header2 } from "~/components/primitives/Headers"; +import { Paragraph } from "~/components/primitives/Paragraph"; +import { + Table, + TableBody, + TableCell, + TableHeader, + TableHeaderCell, + TableRow, +} from "~/components/primitives/Table"; + +export default function Story() { + return ( +
+
+ Static table + This table scrolls with its parent container only. + + + + + Col 1 + Col 2 + Col 3 + + + + {Array.from({ length: 10 }, (_, index) => ( + + {index + 1} + {index + 2} + {index + 3} + + ))} + +
+
+
+ Sticky header table + + This table scrolls when a max-height is applied to the Table component. + + + + + Col 1 + Col 2 + Col 3 + + + + {Array.from({ length: 10 }, (_, index) => ( + + {index + 1} + {index + 2} + {index + 3} + + ))} + +
+
+
+ ); +} diff --git a/apps/webapp/app/routes/storybook/route.tsx b/apps/webapp/app/routes/storybook/route.tsx index b6ac587fff..7449597481 100644 --- a/apps/webapp/app/routes/storybook/route.tsx +++ b/apps/webapp/app/routes/storybook/route.tsx @@ -88,6 +88,10 @@ const stories: Story[] = [ name: "Switch", slug: "switch", }, + { + name: "Tables", + slug: "table", + }, { name: "Tabs", slug: "tabs", From 50d56804bcdeaa26ab9cf524ede1cad7a0864d67 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 27 Sep 2024 09:19:45 +0100 Subject: [PATCH 19/19] Fix for hover states on different backgrounds & runs table select cell --- .../app/components/primitives/Table.tsx | 15 ++++++++---- .../route.tsx | 24 +++++++++++++++---- 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/apps/webapp/app/components/primitives/Table.tsx b/apps/webapp/app/components/primitives/Table.tsx index 85d68ba0c3..4bd801eb4a 100644 --- a/apps/webapp/app/components/primitives/Table.tsx +++ b/apps/webapp/app/components/primitives/Table.tsx @@ -141,6 +141,13 @@ type TableCellProps = TableCellBasicProps & { hasAction?: boolean; isSticky?: boolean; actionClassName?: string; + rowHoverStyle?: keyof typeof rowHoverStyles; +}; + +const rowHoverStyles = { + default: "group-hover/table-row:bg-charcoal-800", + dimmed: "group-hover/table-row:bg-charcoal-850", + bright: "group-hover/table-row:bg-charcoal-750", }; const stickyStyles = @@ -158,6 +165,7 @@ export const TableCell = forwardRef( onClick, hasAction = false, isSticky = false, + rowHoverStyle = "default", }, ref ) => { @@ -184,12 +192,11 @@ export const TableCell = forwardRef( - + {run.number} - + {run.taskIdentifier} - + {run.lockedToVersion?.version ?? "–"} - +