Skip to content

Commit 09413a6

Browse files
matt-aitkenmatt-aitken
authored
Improved run page and replaying (#1240)
* PropertyTable component changed to use sub components * Separate run span component * Early WIP on tabs that use search query * Shortcut key tabs for the span panel * The span timeline is working * When runs get expired, update the OTEL event with an error * Improved the expired error message * Reveal env vars when editing * Tightened things up a bit * Added detail tab properties * Progress dashed line * Move the env label next to the Run number title * Top level cancel/replay buttons * Replay with a different payload and environment * Fix for non json payloads * Hide the clear/copy buttons * UI improvements with large payloads * Close the panels when you replay/cancel * Added the new timeline to spans * Use the u-turn left icon for replay * Added an index for spanId on TaskRun * Remove replay/cancel buttons the span view * Replay shortcut works inside the code editor * Split the log/span inspector between Overview and Detail as well * More improvements to the inspector * Context and output improvements * Focus on run working * Added version to run.ctx * Added some padding to the detail view * Added context tab with shortcut * Only load the replay data when the dialog is open * Replaying uses the tags from the original run * Links are now text links * Removed version links for now because we don’t have dropdown filters for them yet * Tabs are now outside of the scrollview * The inspector is now 30% of the width by default * Allow replaying and editing SuperJSON payloads * Deleted unused CodeGroup file * Increase the tags limit to 5, do the limiting on the server * The admin tooltip now always shows basic org, project and user info * Fix for schedule inspector disabled state layout * Remove new unused span metadata and context * Removed unused import
1 parent c1d4c04 commit 09413a6

File tree

37 files changed

+1858
-689
lines changed

37 files changed

+1858
-689
lines changed

‎.changeset/fast-melons-listen.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@trigger.dev/core": patch
3+
---
4+
5+
Added version to ctx.run

‎apps/webapp/app/components/admin/debugTooltip.tsx

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
1+
import * as Property from "~/components/primitives/PropertyTable";
12
import { ShieldCheckIcon } from "@heroicons/react/20/solid";
23
import {
34
Tooltip,
45
TooltipContent,
56
TooltipProvider,
67
TooltipTrigger,
78
} from "~/components/primitives/Tooltip";
8-
import { useIsImpersonating } from "~/hooks/useOrganizations";
9-
import { useHasAdminAccess } from "~/hooks/useUser";
9+
import {
10+
useIsImpersonating,
11+
useOptionalOrganization,
12+
useOrganization,
13+
} from "~/hooks/useOrganizations";
14+
import { useOptionalProject, useProject } from "~/hooks/useProject";
15+
import { useHasAdminAccess, useUser } from "~/hooks/useUser";
1016

1117
export function AdminDebugTooltip({ children }: { children: React.ReactNode }) {
1218
const hasAdminAccess = useHasAdminAccess();
@@ -22,10 +28,46 @@ export function AdminDebugTooltip({ children }: { children: React.ReactNode }) {
2228
<TooltipTrigger>
2329
<ShieldCheckIcon className="size-5" />
2430
</TooltipTrigger>
25-
<TooltipContent className="flex max-h-[90vh] items-center gap-1 overflow-y-auto">
26-
{children}
31+
<TooltipContent className="max-h-[90vh] overflow-y-auto">
32+
<Content>{children}</Content>
2733
</TooltipContent>
2834
</Tooltip>
2935
</TooltipProvider>
3036
);
3137
}
38+
39+
function Content({ children }: { children: React.ReactNode }) {
40+
const organization = useOptionalOrganization();
41+
const project = useOptionalProject();
42+
const user = useUser();
43+
44+
return (
45+
<div className="flex flex-col gap-2 divide-y divide-slate-700">
46+
<Property.Table>
47+
<Property.Item>
48+
<Property.Label>User ID</Property.Label>
49+
<Property.Value>{user.id}</Property.Value>
50+
</Property.Item>
51+
{organization && (
52+
<Property.Item>
53+
<Property.Label>Org ID</Property.Label>
54+
<Property.Value>{organization.id}</Property.Value>
55+
</Property.Item>
56+
)}
57+
{project && (
58+
<>
59+
<Property.Item>
60+
<Property.Label>Project ID</Property.Label>
61+
<Property.Value>{project.id}</Property.Value>
62+
</Property.Item>
63+
<Property.Item>
64+
<Property.Label>Project ref</Property.Label>
65+
<Property.Value>{project.ref}</Property.Value>
66+
</Property.Item>
67+
</>
68+
)}
69+
</Property.Table>
70+
<div className="pt-2">{children}</div>
71+
</div>
72+
);
73+
}

‎apps/webapp/app/components/code/CodeBlock.tsx

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -241,16 +241,12 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
241241
onMouseEnter={() => setMouseOver(true)}
242242
onMouseLeave={() => setMouseOver(false)}
243243
className={cn(
244-
"absolute right-3 z-50 transition-colors duration-100 hover:cursor-pointer",
245-
showChrome ? "top-10" : "top-3",
244+
"absolute right-3 z-50 transition-colors duration-100 hover:cursor-pointer",
245+
showChrome ? "top-10" : "top-2.5",
246246
copied ? "text-emerald-500" : "text-charcoal-500 hover:text-charcoal-300"
247247
)}
248248
>
249-
{copied ? (
250-
<ClipboardCheck className="h-5 w-5" />
251-
) : (
252-
<Clipboard className="h-5 w-5" />
253-
)}
249+
{copied ? <ClipboardCheck className="size-4" /> : <Clipboard className="size-4" />}
254250
</TooltipTrigger>
255251
<TooltipContent side="left" className="text-xs">
256252
{copied ? "Copied" : "Copy"}
@@ -391,8 +387,8 @@ function Chrome({ title }: { title?: string }) {
391387

392388
export function TitleRow({ title }: { title: string }) {
393389
return (
394-
<div className="flex items-center justify-between px-4">
395-
<Paragraph variant="base/bright" className="w-full border-b border-grid-dimmed py-2.5">
390+
<div className="flex items-center justify-between px-3">
391+
<Paragraph variant="small/bright" className="w-full border-b border-grid-dimmed py-2">
396392
{title}
397393
</Paragraph>
398394
</div>

‎apps/webapp/app/components/code/JSONEditor.tsx

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -107,39 +107,51 @@ export function JSONEditor(opts: JSONEditorProps) {
107107
}, 1500);
108108
}, [view]);
109109

110+
const showButtons = showClearButton || showCopyButton;
111+
110112
return (
111-
<div className={cn(opts.className, "grid grid-rows-[2.5rem_1fr]")}>
112-
<div className="mx-3 flex items-center justify-end gap-2 border-b border-grid-dimmed">
113-
{showClearButton && (
114-
<Button
115-
type="button"
116-
variant="minimal/small"
117-
TrailingIcon={TrashIcon}
118-
onClick={(event) => {
119-
event.preventDefault();
120-
event.stopPropagation();
121-
clear();
122-
}}
123-
>
124-
Clear
125-
</Button>
126-
)}
127-
{showCopyButton && (
128-
<Button
129-
type="button"
130-
variant="minimal/small"
131-
TrailingIcon={copied ? CheckIcon : ClipboardIcon}
132-
trailingIconClassName={copied ? "text-green-500 group-hover:text-green-500" : undefined}
133-
onClick={(event) => {
134-
event.preventDefault();
135-
event.stopPropagation();
136-
copy();
137-
}}
138-
>
139-
Copy
140-
</Button>
141-
)}
142-
</div>
113+
<div
114+
className={cn(
115+
opts.className,
116+
"grid",
117+
showButtons ? "grid-rows-[2.5rem_1fr]" : "grid-rows-[1fr]"
118+
)}
119+
>
120+
{showButtons && (
121+
<div className="mx-3 flex items-center justify-end gap-2 border-b border-grid-dimmed">
122+
{showClearButton && (
123+
<Button
124+
type="button"
125+
variant="minimal/small"
126+
TrailingIcon={TrashIcon}
127+
onClick={(event) => {
128+
event.preventDefault();
129+
event.stopPropagation();
130+
clear();
131+
}}
132+
>
133+
Clear
134+
</Button>
135+
)}
136+
{showCopyButton && (
137+
<Button
138+
type="button"
139+
variant="minimal/small"
140+
TrailingIcon={copied ? CheckIcon : ClipboardIcon}
141+
trailingIconClassName={
142+
copied ? "text-green-500 group-hover:text-green-500" : undefined
143+
}
144+
onClick={(event) => {
145+
event.preventDefault();
146+
event.stopPropagation();
147+
copy();
148+
}}
149+
>
150+
Copy
151+
</Button>
152+
)}
153+
</div>
154+
)}
143155
<div
144156
className="w-full overflow-auto"
145157
ref={editor}

‎apps/webapp/app/components/primitives/PageHeader.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { LoadingBarDivider } from "./LoadingBarDivider";
1010
import { NamedIcon } from "./NamedIcon";
1111
import { Paragraph } from "./Paragraph";
1212
import { Tabs, TabsProps } from "./Tabs";
13+
import { ReactNode } from "react";
1314

1415
type WithChildren = {
1516
children: React.ReactNode;
@@ -34,7 +35,7 @@ export function NavBar({ children }: WithChildren) {
3435
}
3536

3637
type PageTitleProps = {
37-
title: string;
38+
title: ReactNode;
3839
backButton?: {
3940
to: string;
4041
text: string;

‎apps/webapp/app/components/primitives/PropertyTable.tsx

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,31 @@
1-
import { ReactNode } from "react";
1+
import { type ReactNode } from "react";
22
import { Paragraph } from "./Paragraph";
33
import { cn } from "~/utils/cn";
44

5-
export function PropertyTable({
6-
children,
7-
className,
8-
}: {
5+
type ChildrenClassName = {
96
children: ReactNode;
107
className?: string;
11-
}) {
12-
return (
13-
<div className={cn("grid grid-cols-[auto,1fr] items-center gap-x-4 gap-y-2", className)}>
14-
{children}
15-
</div>
16-
);
8+
};
9+
10+
function PropertyTable({ children, className }: { children: ReactNode; className?: string }) {
11+
return <div className={cn("flex flex-col gap-y-3", className)}>{children}</div>;
1712
}
1813

19-
export type PropertyProps = {
20-
label: ReactNode;
21-
labelClassName?: string;
22-
children: ReactNode;
23-
};
14+
function PropertyItem({ children, className }: ChildrenClassName) {
15+
return <div className={cn("flex flex-col gap-0 text-sm", className)}>{children}</div>;
16+
}
2417

25-
export function Property({ label, labelClassName, children }: PropertyProps) {
26-
return (
27-
<>
28-
<div className={labelClassName}>
29-
{typeof label === "string" ? <Paragraph variant="small">{label}</Paragraph> : label}
30-
</div>
31-
<div>
32-
{typeof children === "string" ? (
33-
<Paragraph variant="small/bright">{children}</Paragraph>
34-
) : (
35-
children
36-
)}
37-
</div>
38-
</>
39-
);
18+
function PropertyLabel({ children, className }: ChildrenClassName) {
19+
return <div className={cn("font-medium text-text-bright", className)}>{children}</div>;
4020
}
21+
22+
function PropertyValue({ children, className }: ChildrenClassName) {
23+
return <div className={cn("text-text-dimmed", className)}>{children}</div>;
24+
}
25+
26+
export {
27+
PropertyTable as Table,
28+
PropertyItem as Item,
29+
PropertyLabel as Label,
30+
PropertyValue as Value,
31+
};

0 commit comments

Comments
 (0)