Skip to content

Add machine to run list #2275

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Jul 17, 2025
Merged

Add machine to run list #2275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
fc6441f
Access machinePreset from the run list presenter
samejr Jul 16, 2025
fa8c893
New icons for machine presets
samejr Jul 16, 2025
c570803
New icon + name combo label for the machine preset
samejr Jul 16, 2025
7dafc2a
Adds new “Machine” column to the runs list
samejr Jul 16, 2025
efb20b6
Make a separate component for the machine tooltip info
samejr Jul 16, 2025
3d5f276
add machinePreset to the span presenter
samejr Jul 16, 2025
ddc8735
Show the Machine in the Details tab in the Run inspector
samejr Jul 16, 2025
391cd50
Show an admin only separator
samejr Jul 16, 2025
cfe6916
Fix docs icon in the button
samejr Jul 16, 2025
47fa254
Small padding tweak
samejr Jul 16, 2025
d1ec2ba
Move the Machine nearer the costs
samejr Jul 16, 2025
7ff3a63
Don't cast the machine preset
matt-aitken Jul 17, 2025
1f75ca6
Remove typecast, better to have a bad label if we add a new machine a…
matt-aitken Jul 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 221 additions & 0 deletions apps/webapp/app/assets/icons/MachineIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
import { cn } from "~/utils/cn";

export function MachineIcon({ preset, className }: { preset?: string; className?: string }) {
if (!preset) {
return <MachineIconNoMachine className={cn("size-5", className)} />;
}

switch (preset) {
case "no-machine":
return <MachineIconNoMachine className={cn("size-5", className)} />;
case "micro":
return <MachineIconMicro className={cn("size-5", className)} />;
case "small-1x":
return <MachineIconSmall1x className={cn("size-5", className)} />;
case "small-2x":
return <MachineIconSmall2x className={cn("size-5", className)} />;
case "medium-1x":
return <MachineIconMedium1x className={cn("size-5", className)} />;
case "medium-2x":
return <MachineIconMedium2x className={cn("size-5", className)} />;
case "large-1x":
return <MachineIconLarge1x className={cn("size-5", className)} />;
case "large-2x":
return <MachineIconLarge2x className={cn("size-5", className)} />;
default:
return <MachineDefaultIcon className={cn("size-5", className)} />;
}
}

function MachineDefaultIcon({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="currentColor"
/>
<path
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"
fill="currentColor"
/>
<path
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"
fill="currentColor"
/>
</svg>
);
}

function MachineIconNoMachine({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
<line
x1="3"
y1="16.9998"
x2="17.0018"
y2="2.99805"
stroke="#D7D9DD"
strokeOpacity="0.4"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
);
}

function MachineIconMicro({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
</svg>
);
}

function MachineIconSmall1x({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
</svg>
);
}

function MachineIconSmall2x({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
</svg>
);
}

function MachineIconMedium1x({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
</svg>
);
}

function MachineIconMedium2x({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#D7D9DD"
fillOpacity="0.4"
/>
</svg>
);
}

function MachineIconLarge1x({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#3B82F6"
/>
</svg>
);
}

function MachineIconLarge2x({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#3B82F6"
/>
<path
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"
fill="#3B82F6"
/>
</svg>
);
}
59 changes: 59 additions & 0 deletions apps/webapp/app/components/MachineLabelCombo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { type MachinePresetName } from "@trigger.dev/core/v3";
import { MachineIcon } from "~/assets/icons/MachineIcon";
import { cn } from "~/utils/cn";

export function MachineLabelCombo({
preset,
className,
iconClassName,
labelClassName,
}: {
preset?: MachinePresetName | null;
className?: string;
iconClassName?: string;
labelClassName?: string;
}) {
return (
<span className={cn("flex items-center gap-1", className)}>
<MachineIcon preset={preset ?? undefined} className={cn("size-5", iconClassName)} />
<MachineLabel preset={preset} className={labelClassName} />
</span>
);
}

export function MachineLabel({
preset,
className,
}: {
preset?: MachinePresetName | null;
className?: string;
}) {
return (
<span className={cn("text-text-dimmed", className)}>{formatMachinePresetName(preset)}</span>
);
}

export function formatMachinePresetName(preset?: MachinePresetName | null): string {
if (!preset) {
return "No machine yet";
}

switch (preset) {
case "micro":
return "Micro";
case "small-1x":
return "Small 1x";
case "small-2x":
return "Small 2x";
case "medium-1x":
return "Medium 1x";
case "medium-2x":
return "Medium 2x";
case "large-1x":
return "Large 1x";
case "large-2x":
return "Large 2x";
default:
return preset;
}
}
63 changes: 63 additions & 0 deletions apps/webapp/app/components/MachineTooltipInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { MachineIcon } from "~/assets/icons/MachineIcon";
import { docsPath } from "~/utils/pathBuilder";
import { LinkButton } from "./primitives/Buttons";
import { Header3 } from "./primitives/Headers";
import { Paragraph } from "./primitives/Paragraph";
import { BookOpenIcon } from "@heroicons/react/20/solid";

export function MachineTooltipInfo() {
return (
<div className="flex max-w-xs flex-col gap-4 p-1 pb-2">
<div>
<div className="mb-0.5 flex items-center gap-1.5">
<MachineIcon preset="no-machine" />
<Header3>No machine yet</Header3>
</div>
<Paragraph variant="small" className="text-text-dimmed">
The machine is set at the moment the run is dequeued.
</Paragraph>
</div>
<div>
<div className="mb-0.5 flex items-center gap-1.5">
<MachineIcon preset="micro" />
<Header3>Micro</Header3>
</div>
<Paragraph variant="small" className="text-text-dimmed">
The smallest and cheapest machine available.
</Paragraph>
</div>
<div>
<div className="mb-0.5 flex items-center gap-1.5">
<MachineIcon preset="small-1x" /> <Header3>Small 1x & 2x</Header3>
</div>
<Paragraph variant="small" className="text-text-dimmed">
Smaller machines for basic workloads. Small 1x is the default machine.
</Paragraph>
</div>
<div>
<div className="mb-0.5 flex items-center gap-1.5">
<MachineIcon preset="medium-1x" /> <Header3>Medium 1x & 2x</Header3>
</div>
<Paragraph variant="small" className="text-text-dimmed">
Medium machines for more demanding workloads.
</Paragraph>
</div>
<div>
<div className="mb-0.5 flex items-center gap-1.5">
<MachineIcon preset="large-1x" /> <Header3>Large 1x & 2x</Header3>
</div>
<Paragraph variant="small" className="text-text-dimmed">
Larger machines for the most demanding workloads such as video processing. The larger the
machine, the more expensive it is.
</Paragraph>
</div>
<LinkButton
to={docsPath("machines#machine-configurations")}
variant="docs/small"
LeadingIcon={BookOpenIcon}
>
Read docs
</LinkButton>
</div>
);
}
15 changes: 14 additions & 1 deletion apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import {
} from "@heroicons/react/20/solid";
import { BeakerIcon, BookOpenIcon, CheckIcon } from "@heroicons/react/24/solid";
import { useLocation } from "@remix-run/react";
import { formatDuration, formatDurationMilliseconds } from "@trigger.dev/core/v3";
import {
formatDuration,
formatDurationMilliseconds,
MachinePresetName,
} from "@trigger.dev/core/v3";
import { useCallback, useRef } from "react";
import { Badge } from "~/components/primitives/Badge";
import { Button, LinkButton } from "~/components/primitives/Buttons";
Expand Down Expand Up @@ -52,6 +56,9 @@ import {
filterableTaskRunStatuses,
TaskRunStatusCombo,
} from "./TaskRunStatus";
import { MachineIcon } from "~/assets/icons/MachineIcon";
import { MachineLabelCombo } from "~/components/MachineLabelCombo";
import { MachineTooltipInfo } from "~/components/MachineTooltipInfo";

type RunsTableProps = {
total: number;
Expand Down Expand Up @@ -201,6 +208,9 @@ export function TaskRunsTable({
<TableHeaderCell>Compute</TableHeaderCell>
</>
)}
<TableHeaderCell className="pl-4" tooltip={<MachineTooltipInfo />}>
Machine
</TableHeaderCell>
<TableHeaderCell>Test</TableHeaderCell>
<TableHeaderCell>Created at</TableHeaderCell>
<TableHeaderCell
Expand Down Expand Up @@ -375,6 +385,9 @@ export function TaskRunsTable({
: "–"}
</TableCell>
)}
<TableCell to={path}>
<MachineLabelCombo preset={run.machinePreset} />
</TableCell>
<TableCell to={path}>
{run.isTest ? <CheckIcon className="size-4 text-charcoal-400" /> : "–"}
</TableCell>
Expand Down
Loading