Skip to content

Commit 3ad4b8b

Browse files
samejrmatt-aitken
samejr
and
matt-aitken
authored
Add machine to run list (#2275)
* Access machinePreset from the run list presenter * New icons for machine presets * New icon + name combo label for the machine preset * Adds new “Machine” column to the runs list * Make a separate component for the machine tooltip info * add machinePreset to the span presenter * Show the Machine in the Details tab in the Run inspector * Show an admin only separator * Fix docs icon in the button * Small padding tweak * Move the Machine nearer the costs * Don't cast the machine preset * Remove typecast, better to have a bad label if we add a new machine and don't update thos --------- Co-authored-by: Matt Aitken <[email protected]>
1 parent f685c66 commit 3ad4b8b

File tree

9 files changed

+388
-12
lines changed

9 files changed

+388
-12
lines changed

‎apps/webapp/app/assets/icons/MachineIcon.tsx

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
import { cn } from "~/utils/cn";
2+
3+
export function MachineIcon({ preset, className }: { preset?: string; className?: string }) {
4+
if (!preset) {
5+
return <MachineIconNoMachine className={cn("size-5", className)} />;
6+
}
7+
8+
switch (preset) {
9+
case "no-machine":
10+
return <MachineIconNoMachine className={cn("size-5", className)} />;
11+
case "micro":
12+
return <MachineIconMicro className={cn("size-5", className)} />;
13+
case "small-1x":
14+
return <MachineIconSmall1x className={cn("size-5", className)} />;
15+
case "small-2x":
16+
return <MachineIconSmall2x className={cn("size-5", className)} />;
17+
case "medium-1x":
18+
return <MachineIconMedium1x className={cn("size-5", className)} />;
19+
case "medium-2x":
20+
return <MachineIconMedium2x className={cn("size-5", className)} />;
21+
case "large-1x":
22+
return <MachineIconLarge1x className={cn("size-5", className)} />;
23+
case "large-2x":
24+
return <MachineIconLarge2x className={cn("size-5", className)} />;
25+
default:
26+
return <MachineDefaultIcon className={cn("size-5", className)} />;
27+
}
28+
}
29+
30+
function MachineDefaultIcon({ className }: { className?: string }) {
31+
return (
32+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
33+
<path
34+
d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
35+
fill="currentColor"
36+
/>
37+
<path
38+
d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
39+
fill="currentColor"
40+
/>
41+
<path
42+
d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
43+
fill="currentColor"
44+
/>
45+
</svg>
46+
);
47+
}
48+
49+
function MachineIconNoMachine({ className }: { className?: string }) {
50+
return (
51+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
52+
<path
53+
d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H6.18945C6.25882 16.9453 6.32663 16.8872 6.39062 16.8232L10.2139 13H16.1875Z"
54+
fill="#D7D9DD"
55+
fillOpacity="0.4"
56+
/>
57+
<path
58+
d="M4.84961 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H8.84961L4.84961 12ZM16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H11.2139L15.2139 8H16.1875Z"
59+
fill="#D7D9DD"
60+
fillOpacity="0.4"
61+
/>
62+
<path
63+
d="M9.85059 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H13.8506L9.85059 7Z"
64+
fill="#D7D9DD"
65+
fillOpacity="0.4"
66+
/>
67+
<line
68+
x1="3"
69+
y1="16.9998"
70+
x2="17.0018"
71+
y2="2.99805"
72+
stroke="#D7D9DD"
73+
strokeOpacity="0.4"
74+
strokeWidth="2"
75+
strokeLinecap="round"
76+
/>
77+
</svg>
78+
);
79+
}
80+
81+
function MachineIconMicro({ className }: { className?: string }) {
82+
return (
83+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
84+
<path
85+
d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
86+
fill="#D7D9DD"
87+
fillOpacity="0.4"
88+
/>
89+
<path
90+
d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
91+
fill="#D7D9DD"
92+
fillOpacity="0.4"
93+
/>
94+
<path
95+
d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
96+
fill="#D7D9DD"
97+
fillOpacity="0.4"
98+
/>
99+
</svg>
100+
);
101+
}
102+
103+
function MachineIconSmall1x({ className }: { className?: string }) {
104+
return (
105+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
106+
<path
107+
d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
108+
fill="#3B82F6"
109+
/>
110+
<path
111+
d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
112+
fill="#D7D9DD"
113+
fillOpacity="0.4"
114+
/>
115+
<path
116+
d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
117+
fill="#D7D9DD"
118+
fillOpacity="0.4"
119+
/>
120+
</svg>
121+
);
122+
}
123+
124+
function MachineIconSmall2x({ className }: { className?: string }) {
125+
return (
126+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
127+
<path
128+
d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
129+
fill="#3B82F6"
130+
/>
131+
<path
132+
d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
133+
fill="#D7D9DD"
134+
fillOpacity="0.4"
135+
/>
136+
<path
137+
d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
138+
fill="#D7D9DD"
139+
fillOpacity="0.4"
140+
/>
141+
</svg>
142+
);
143+
}
144+
145+
function MachineIconMedium1x({ className }: { className?: string }) {
146+
return (
147+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
148+
<path
149+
d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
150+
fill="#3B82F6"
151+
/>
152+
<path
153+
d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
154+
fill="#3B82F6"
155+
/>
156+
<path
157+
d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
158+
fill="#D7D9DD"
159+
fillOpacity="0.4"
160+
/>
161+
</svg>
162+
);
163+
}
164+
165+
function MachineIconMedium2x({ className }: { className?: string }) {
166+
return (
167+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
168+
<path
169+
d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
170+
fill="#3B82F6"
171+
/>
172+
<path
173+
d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
174+
fill="#3B82F6"
175+
/>
176+
<path
177+
d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
178+
fill="#D7D9DD"
179+
fillOpacity="0.4"
180+
/>
181+
</svg>
182+
);
183+
}
184+
185+
function MachineIconLarge1x({ className }: { className?: string }) {
186+
return (
187+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
188+
<path
189+
d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
190+
fill="#3B82F6"
191+
/>
192+
<path
193+
d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
194+
fill="#3B82F6"
195+
/>
196+
<path
197+
d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
198+
fill="#3B82F6"
199+
/>
200+
</svg>
201+
);
202+
}
203+
204+
function MachineIconLarge2x({ className }: { className?: string }) {
205+
return (
206+
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
207+
<path
208+
d="M16.1875 13C16.6362 13 17 13.3638 17 13.8125V16.1875C17 16.6362 16.6362 17 16.1875 17H3.8125C3.36377 17 3 16.6362 3 16.1875V13.8125C3 13.3638 3.36377 13 3.8125 13H16.1875ZM5 14C4.44772 14 4 14.4477 4 15C4 15.5523 4.44772 16 5 16C5.55228 16 6 15.5523 6 15C6 14.4477 5.55228 14 5 14Z"
209+
fill="#3B82F6"
210+
/>
211+
<path
212+
d="M16.1875 8C16.6362 8 17 8.36377 17 8.8125V11.1875C17 11.6362 16.6362 12 16.1875 12H3.8125C3.36377 12 3 11.6362 3 11.1875V8.8125C3 8.36377 3.36377 8 3.8125 8H16.1875ZM5 9C4.44772 9 4 9.44772 4 10C4 10.5523 4.44772 11 5 11C5.55228 11 6 10.5523 6 10C6 9.44772 5.55228 9 5 9Z"
213+
fill="#3B82F6"
214+
/>
215+
<path
216+
d="M16.1875 3C16.6362 3 17 3.36377 17 3.8125V6.1875C17 6.63623 16.6362 7 16.1875 7H3.8125C3.36377 7 3 6.63623 3 6.1875V3.8125C3 3.36377 3.36377 3 3.8125 3H16.1875ZM5 4C4.44772 4 4 4.44772 4 5C4 5.55228 4.44772 6 5 6C5.55228 6 6 5.55228 6 5C6 4.44772 5.55228 4 5 4Z"
217+
fill="#3B82F6"
218+
/>
219+
</svg>
220+
);
221+
}

‎apps/webapp/app/components/MachineLabelCombo.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { type MachinePresetName } from "@trigger.dev/core/v3";
2+
import { MachineIcon } from "~/assets/icons/MachineIcon";
3+
import { cn } from "~/utils/cn";
4+
5+
export function MachineLabelCombo({
6+
preset,
7+
className,
8+
iconClassName,
9+
labelClassName,
10+
}: {
11+
preset?: MachinePresetName | null;
12+
className?: string;
13+
iconClassName?: string;
14+
labelClassName?: string;
15+
}) {
16+
return (
17+
<span className={cn("flex items-center gap-1", className)}>
18+
<MachineIcon preset={preset ?? undefined} className={cn("size-5", iconClassName)} />
19+
<MachineLabel preset={preset} className={labelClassName} />
20+
</span>
21+
);
22+
}
23+
24+
export function MachineLabel({
25+
preset,
26+
className,
27+
}: {
28+
preset?: MachinePresetName | null;
29+
className?: string;
30+
}) {
31+
return (
32+
<span className={cn("text-text-dimmed", className)}>{formatMachinePresetName(preset)}</span>
33+
);
34+
}
35+
36+
export function formatMachinePresetName(preset?: MachinePresetName | null): string {
37+
if (!preset) {
38+
return "No machine yet";
39+
}
40+
41+
switch (preset) {
42+
case "micro":
43+
return "Micro";
44+
case "small-1x":
45+
return "Small 1x";
46+
case "small-2x":
47+
return "Small 2x";
48+
case "medium-1x":
49+
return "Medium 1x";
50+
case "medium-2x":
51+
return "Medium 2x";
52+
case "large-1x":
53+
return "Large 1x";
54+
case "large-2x":
55+
return "Large 2x";
56+
default:
57+
return preset;
58+
}
59+
}

‎apps/webapp/app/components/MachineTooltipInfo.tsx

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { MachineIcon } from "~/assets/icons/MachineIcon";
2+
import { docsPath } from "~/utils/pathBuilder";
3+
import { LinkButton } from "./primitives/Buttons";
4+
import { Header3 } from "./primitives/Headers";
5+
import { Paragraph } from "./primitives/Paragraph";
6+
import { BookOpenIcon } from "@heroicons/react/20/solid";
7+
8+
export function MachineTooltipInfo() {
9+
return (
10+
<div className="flex max-w-xs flex-col gap-4 p-1 pb-2">
11+
<div>
12+
<div className="mb-0.5 flex items-center gap-1.5">
13+
<MachineIcon preset="no-machine" />
14+
<Header3>No machine yet</Header3>
15+
</div>
16+
<Paragraph variant="small" className="text-text-dimmed">
17+
The machine is set at the moment the run is dequeued.
18+
</Paragraph>
19+
</div>
20+
<div>
21+
<div className="mb-0.5 flex items-center gap-1.5">
22+
<MachineIcon preset="micro" />
23+
<Header3>Micro</Header3>
24+
</div>
25+
<Paragraph variant="small" className="text-text-dimmed">
26+
The smallest and cheapest machine available.
27+
</Paragraph>
28+
</div>
29+
<div>
30+
<div className="mb-0.5 flex items-center gap-1.5">
31+
<MachineIcon preset="small-1x" /> <Header3>Small 1x & 2x</Header3>
32+
</div>
33+
<Paragraph variant="small" className="text-text-dimmed">
34+
Smaller machines for basic workloads. Small 1x is the default machine.
35+
</Paragraph>
36+
</div>
37+
<div>
38+
<div className="mb-0.5 flex items-center gap-1.5">
39+
<MachineIcon preset="medium-1x" /> <Header3>Medium 1x & 2x</Header3>
40+
</div>
41+
<Paragraph variant="small" className="text-text-dimmed">
42+
Medium machines for more demanding workloads.
43+
</Paragraph>
44+
</div>
45+
<div>
46+
<div className="mb-0.5 flex items-center gap-1.5">
47+
<MachineIcon preset="large-1x" /> <Header3>Large 1x & 2x</Header3>
48+
</div>
49+
<Paragraph variant="small" className="text-text-dimmed">
50+
Larger machines for the most demanding workloads such as video processing. The larger the
51+
machine, the more expensive it is.
52+
</Paragraph>
53+
</div>
54+
<LinkButton
55+
to={docsPath("machines#machine-configurations")}
56+
variant="docs/small"
57+
LeadingIcon={BookOpenIcon}
58+
>
59+
Read docs
60+
</LinkButton>
61+
</div>
62+
);
63+
}

‎apps/webapp/app/components/runs/v3/TaskRunsTable.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import {
88
} from "@heroicons/react/20/solid";
99
import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid";
1010
import { useLocation } from "@remix-run/react";
11-
import { formatDuration, formatDurationMilliseconds } from "@trigger.dev/core/v3";
11+
import {
12+
formatDuration,
13+
formatDurationMilliseconds,
14+
MachinePresetName,
15+
} from "@trigger.dev/core/v3";
1216
import { useCallback, useRef } from "react";
1317
import { Badge } from "~/components/primitives/Badge";
1418
import { Button, LinkButton } from "~/components/primitives/Buttons";
@@ -52,6 +56,9 @@ import {
5256
filterableTaskRunStatuses,
5357
TaskRunStatusCombo,
5458
} from "./TaskRunStatus";
59+
import { MachineIcon } from "~/assets/icons/MachineIcon";
60+
import { MachineLabelCombo } from "~/components/MachineLabelCombo";
61+
import { MachineTooltipInfo } from "~/components/MachineTooltipInfo";
5562

5663
type RunsTableProps = {
5764
total: number;
@@ -201,6 +208,9 @@ export function TaskRunsTable({
201208
<TableHeaderCell>Compute</TableHeaderCell>
202209
</>
203210
)}
211+
<TableHeaderCell className="pl-4" tooltip={<MachineTooltipInfo />}>
212+
Machine
213+
</TableHeaderCell>
204214
<TableHeaderCell>Test</TableHeaderCell>
205215
<TableHeaderCell>Created at</TableHeaderCell>
206216
<TableHeaderCell
@@ -375,6 +385,9 @@ export function TaskRunsTable({
375385
: "–"}
376386
</TableCell>
377387
)}
388+
<TableCell to={path}>
389+
<MachineLabelCombo preset={run.machinePreset} />
390+
</TableCell>
378391
<TableCell to={path}>
379392
{run.isTest ? <CheckIcon className="size-4 text-charcoal-400" /> : "–"}
380393
</TableCell>

0 commit comments

Comments
 (0)