Skip to content

Commit 23c77d4

Browse files
matt-aitkenmatt-aitken
committed
Span overview panel can be changed based on the entity type
1 parent 26d1017 commit 23c77d4

File tree

2 files changed

+104
-186
lines changed
  • apps/webapp/app/routes
    • resources.orgs.$organizationSlug.projects.$projectParam.waitpoints.$waitpointFriendlyId.complete
    • resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam

2 files changed

+104
-186
lines changed

‎apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.waitpoints.$waitpointFriendlyId.complete/route.tsx‎

Lines changed: 10 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,25 @@
1-
import { conform, useForm } from "@conform-to/react";
21
import { parse } from "@conform-to/zod";
3-
import { CheckIcon, XMarkIcon } from "@heroicons/react/20/solid";
4-
import { Form, useActionData, useLocation, useNavigation, useSubmit } from "@remix-run/react";
2+
import { Form, useNavigation, useSubmit } from "@remix-run/react";
53
import { ActionFunctionArgs, json } from "@remix-run/server-runtime";
6-
import { useVirtualizer } from "@tanstack/react-virtual";
7-
import { parseExpression } from "cron-parser";
8-
import cronstrue from "cronstrue";
9-
import { useCallback, useRef, useState } from "react";
10-
import {
11-
environmentTextClassName,
12-
environmentTitle,
13-
} from "~/components/environments/EnvironmentLabel";
14-
import { Button, LinkButton } from "~/components/primitives/Buttons";
15-
import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
16-
import { DateTime } from "~/components/primitives/DateTime";
4+
import { Waitpoint } from "@trigger.dev/database";
5+
import { useCallback, useRef } from "react";
6+
import { z } from "zod";
7+
import { JSONEditor } from "~/components/code/JSONEditor";
8+
import { Button } from "~/components/primitives/Buttons";
179
import { Fieldset } from "~/components/primitives/Fieldset";
18-
import { FormError } from "~/components/primitives/FormError";
19-
import { Header2, Header3 } from "~/components/primitives/Headers";
20-
import { Hint } from "~/components/primitives/Hint";
21-
import { Input } from "~/components/primitives/Input";
10+
import { Header2 } from "~/components/primitives/Headers";
2211
import { InputGroup } from "~/components/primitives/InputGroup";
2312
import { Label } from "~/components/primitives/Label";
24-
import { Paragraph } from "~/components/primitives/Paragraph";
25-
import { Select, SelectItem } from "~/components/primitives/Select";
26-
import {
27-
Table,
28-
TableBody,
29-
TableCell,
30-
TableHeader,
31-
TableHeaderCell,
32-
TableRow,
33-
} from "~/components/primitives/Table";
34-
import { TextLink } from "~/components/primitives/TextLink";
3513
import { prisma } from "~/db.server";
3614
import { useOrganization } from "~/hooks/useOrganizations";
3715
import { useProject } from "~/hooks/useProject";
3816
import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
39-
import { EditableScheduleElements } from "~/presenters/v3/EditSchedulePresenter.server";
17+
import { logger } from "~/services/logger.server";
4018
import { requireUserId } from "~/services/session.server";
4119
import { cn } from "~/utils/cn";
42-
import { ProjectParamSchema, docsPath, v3SchedulesPath } from "~/utils/pathBuilder";
43-
import { CronPattern, UpsertSchedule } from "~/v3/schedules";
20+
import { ProjectParamSchema, v3SchedulesPath } from "~/utils/pathBuilder";
21+
import { UpsertSchedule } from "~/v3/schedules";
4422
import { UpsertTaskScheduleService } from "~/v3/services/upsertTaskSchedule.server";
45-
import { AIGeneratedCronField } from "../resources.orgs.$organizationSlug.projects.$projectParam.schedules.new.natural-language";
46-
import { TimezoneList } from "~/components/scheduled/timezones";
47-
import { logger } from "~/services/logger.server";
48-
import { Waitpoint } from "@trigger.dev/database";
49-
import { z } from "zod";
50-
import { JSONEditor } from "~/components/code/JSONEditor";
5123

5224
const CompleteWaitpointFormData = z.discriminatedUnion("type", [
5325
z.object({

‎apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx‎

Lines changed: 94 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -288,104 +288,6 @@ function SpanBody({
288288
</div>
289289
) : (
290290
<div className="flex flex-col gap-4 pt-3">
291-
{span.level === "TRACE" ? (
292-
<>
293-
<div className="border-b border-grid-bright pb-3">
294-
<TaskRunAttemptStatusCombo
295-
status={
296-
span.isCancelled
297-
? "CANCELED"
298-
: span.isError
299-
? "FAILED"
300-
: span.isPartial
301-
? "EXECUTING"
302-
: "COMPLETED"
303-
}
304-
className="text-sm"
305-
/>
306-
</div>
307-
<SpanTimeline
308-
startTime={new Date(span.startTime)}
309-
duration={span.duration}
310-
inProgress={span.isPartial}
311-
isError={span.isError}
312-
/>
313-
</>
314-
) : (
315-
<div className="min-w-fit max-w-80">
316-
<RunTimelineEvent
317-
title="Timestamp"
318-
subtitle={<DateTimeAccurate date={span.startTime} />}
319-
state="complete"
320-
/>
321-
</div>
322-
)}
323-
<Property.Table>
324-
<Property.Item>
325-
<Property.Label>Message</Property.Label>
326-
<Property.Value className="whitespace-pre-wrap">{span.message}</Property.Value>
327-
</Property.Item>
328-
{span.triggeredRuns.length > 0 && (
329-
<Property.Item>
330-
<div className="flex flex-col gap-1.5">
331-
<Header3>Triggered runs</Header3>
332-
<Table containerClassName="max-h-[12.5rem]">
333-
<TableHeader className="bg-background-bright">
334-
<TableRow>
335-
<TableHeaderCell>Run #</TableHeaderCell>
336-
<TableHeaderCell>Task</TableHeaderCell>
337-
<TableHeaderCell>Version</TableHeaderCell>
338-
<TableHeaderCell>Created at</TableHeaderCell>
339-
</TableRow>
340-
</TableHeader>
341-
<TableBody>
342-
{span.triggeredRuns.map((run) => {
343-
const path = v3RunSpanPath(
344-
organization,
345-
project,
346-
{ friendlyId: run.friendlyId },
347-
{ spanId: run.spanId }
348-
);
349-
return (
350-
<TableRow key={run.friendlyId}>
351-
<TableCell
352-
to={path}
353-
actionClassName="py-1.5"
354-
rowHoverStyle="bright"
355-
>
356-
{run.number}
357-
</TableCell>
358-
<TableCell
359-
to={path}
360-
actionClassName="py-1.5"
361-
rowHoverStyle="bright"
362-
>
363-
{run.taskIdentifier}
364-
</TableCell>
365-
<TableCell
366-
to={path}
367-
actionClassName="py-1.5"
368-
rowHoverStyle="bright"
369-
>
370-
{run.lockedToVersion?.version ?? "–"}
371-
</TableCell>
372-
<TableCell
373-
to={path}
374-
actionClassName="py-1.5"
375-
rowHoverStyle="bright"
376-
>
377-
<DateTime date={run.createdAt} />
378-
</TableCell>
379-
</TableRow>
380-
);
381-
})}
382-
</TableBody>
383-
</Table>
384-
</div>
385-
</Property.Item>
386-
)}
387-
</Property.Table>
388-
{span.events.length > 0 && <SpanEvents spanEvents={span.events} />}
389291
<SpanEntity span={span} />
390292
</div>
391293
)}
@@ -1159,21 +1061,6 @@ function SpanTimeline({ startTime, duration, inProgress, isError }: TimelineProp
11591061
);
11601062
}
11611063

1162-
function VerticalBar({ state }: { state: TimelineState }) {
1163-
return <div className={cn("h-3 w-0.75 rounded-full", classNameForState(state))}></div>;
1164-
}
1165-
1166-
function DottedLine() {
1167-
return (
1168-
<div className="flex h-0.75 flex-1 items-center justify-evenly">
1169-
<div className="h-0.75 w-0.75 bg-pending" />
1170-
<div className="h-0.75 w-0.75 bg-pending" />
1171-
<div className="h-0.75 w-0.75 bg-pending" />
1172-
<div className="h-0.75 w-0.75 bg-pending" />
1173-
</div>
1174-
);
1175-
}
1176-
11771064
function classNameForState(state: TimelineState) {
11781065
switch (state) {
11791066
case "pending": {
@@ -1188,30 +1075,6 @@ function classNameForState(state: TimelineState) {
11881075
}
11891076
}
11901077

1191-
function SpanLinkElement({ link }: { link: SpanLink }) {
1192-
const organization = useOrganization();
1193-
const project = useProject();
1194-
1195-
switch (link.type) {
1196-
case "run": {
1197-
return (
1198-
<TextLink to={v3RunPath(organization, project, { friendlyId: link.runId })}>
1199-
{link.title}
1200-
</TextLink>
1201-
);
1202-
}
1203-
case "span": {
1204-
return (
1205-
<TextLink to={v3TraceSpanPath(organization, project, link.traceId, link.spanId)}>
1206-
{link.title}
1207-
</TextLink>
1208-
);
1209-
}
1210-
}
1211-
1212-
return null;
1213-
}
1214-
12151078
function SpanEntity({ span }: { span: Span }) {
12161079
switch (span.entityType) {
12171080
case "waitpoint": {
@@ -1275,17 +1138,100 @@ function SpanEntity({ span }: { span: Span }) {
12751138
);
12761139
}
12771140
default: {
1278-
if (span.properties !== undefined)
1279-
return (
1280-
<CodeBlock
1281-
rowTitle="Properties"
1282-
code={span.properties}
1283-
maxLines={20}
1284-
showLineNumbers={false}
1285-
/>
1286-
);
1141+
return (
1142+
<>
1143+
{span.level === "TRACE" ? (
1144+
<>
1145+
<div className="border-b border-grid-bright pb-3">
1146+
<TaskRunAttemptStatusCombo
1147+
status={
1148+
span.isCancelled
1149+
? "CANCELED"
1150+
: span.isError
1151+
? "FAILED"
1152+
: span.isPartial
1153+
? "EXECUTING"
1154+
: "COMPLETED"
1155+
}
1156+
className="text-sm"
1157+
/>
1158+
</div>
1159+
<SpanTimeline
1160+
startTime={new Date(span.startTime)}
1161+
duration={span.duration}
1162+
inProgress={span.isPartial}
1163+
isError={span.isError}
1164+
/>
1165+
</>
1166+
) : (
1167+
<div className="min-w-fit max-w-80">
1168+
<RunTimelineEvent
1169+
title="Timestamp"
1170+
subtitle={<DateTimeAccurate date={span.startTime} />}
1171+
state="complete"
1172+
/>
1173+
</div>
1174+
)}
1175+
<Property.Table>
1176+
<Property.Item>
1177+
<Property.Label>Message</Property.Label>
1178+
<Property.Value className="whitespace-pre-wrap">{span.message}</Property.Value>
1179+
</Property.Item>
1180+
{span.triggeredRuns.length > 0 && (
1181+
<Property.Item>
1182+
<div className="flex flex-col gap-1.5">
1183+
<Header3>Triggered runs</Header3>
1184+
<Table containerClassName="max-h-[12.5rem]">
1185+
<TableHeader className="bg-background-bright">
1186+
<TableRow>
1187+
<TableHeaderCell>Run #</TableHeaderCell>
1188+
<TableHeaderCell>Task</TableHeaderCell>
1189+
<TableHeaderCell>Version</TableHeaderCell>
1190+
<TableHeaderCell>Created at</TableHeaderCell>
1191+
</TableRow>
1192+
</TableHeader>
1193+
<TableBody>
1194+
{span.triggeredRuns.map((run) => {
1195+
const path = v3RunSpanPath(
1196+
organization,
1197+
project,
1198+
{ friendlyId: run.friendlyId },
1199+
{ spanId: run.spanId }
1200+
);
1201+
return (
1202+
<TableRow key={run.friendlyId}>
1203+
<TableCell to={path} actionClassName="py-1.5" rowHoverStyle="bright">
1204+
{run.number}
1205+
</TableCell>
1206+
<TableCell to={path} actionClassName="py-1.5" rowHoverStyle="bright">
1207+
{run.taskIdentifier}
1208+
</TableCell>
1209+
<TableCell to={path} actionClassName="py-1.5" rowHoverStyle="bright">
1210+
{run.lockedToVersion?.version ?? "–"}
1211+
</TableCell>
1212+
<TableCell to={path} actionClassName="py-1.5" rowHoverStyle="bright">
1213+
<DateTime date={run.createdAt} />
1214+
</TableCell>
1215+
</TableRow>
1216+
);
1217+
})}
1218+
</TableBody>
1219+
</Table>
1220+
</div>
1221+
</Property.Item>
1222+
)}
1223+
</Property.Table>
1224+
{span.events.length > 0 && <SpanEvents spanEvents={span.events} />}
1225+
{span.properties !== undefined ? (
1226+
<CodeBlock
1227+
rowTitle="Properties"
1228+
code={span.properties}
1229+
maxLines={20}
1230+
showLineNumbers={false}
1231+
/>
1232+
) : null}
1233+
</>
1234+
);
12871235
}
12881236
}
1289-
1290-
return <></>;
12911237
}

0 commit comments

Comments
 (0)