github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Add machine to run list (#2275)

Browse Source 
* 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 <matt@mattaitken.com>
This commit is contained in:
James Ritchie
2025-07-17 14:26:52 +01:00
committed by GitHub
parent f685c6637d
commit 3ad4b8b32d
9 changed files with 388 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/webapp/app/assets/icons/MachineIcon.tsx
+221
View File
@@ -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>
);
}
apps/webapp/app/components/MachineLabelCombo.tsx
+59
View File
@@ -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;
}
}
apps/webapp/app/components/MachineTooltipInfo.tsx
+63
View File
@@ -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>
);
}
apps/webapp/app/components/runs/v3/TaskRunsTable.tsx
+14 -1
View File
@@ -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";
@@ -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;
@@ -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
@@ -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>
apps/webapp/app/presenters/v3/NextRunListPresenter.server.ts
+2
View File
@@ -9,6 +9,7 @@ import { timeFilters } from "~/components/runs/v3/SharedFilters";
import { findDisplayableEnvironment } from "~/models/runtimeEnvironment.server";
import { getAllTaskIdentifiers } from "~/models/task.server";
import { RunsRepository } from "~/services/runsRepository.server";
import { machinePresetFromRun } from "~/v3/machinePresets.server";
import { ServiceValidationError } from "~/v3/services/baseService.server";
import { isCancellableRunStatus, isFinalRunStatus, isPendingRunStatus } from "~/v3/taskStatus";
@@ -231,6 +232,7 @@ export class NextRunListPresenter {
rootTaskRunId: run.rootTaskRunId,
metadata: run.metadata,
metadataType: run.metadataType,
machinePreset: run.machinePreset ? machinePresetFromRun(run)?.name : undefined,
};
}),
pagination: {
apps/webapp/app/presenters/v3/SpanPresenter.server.ts
+5 -4
View File
@@ -8,7 +8,7 @@ import { getMaxDuration } from "@trigger.dev/core/v3/isomorphic";
import { RUNNING_STATUSES } from "~/components/runs/v3/TaskRunStatus";
import { logger } from "~/services/logger.server";
import { eventRepository, rehydrateAttribute } from "~/v3/eventRepository.server";
import { machinePresetFromName } from "~/v3/machinePresets.server";
import { machinePresetFromName, machinePresetFromRun } from "~/v3/machinePresets.server";
import { getTaskEventStoreTableForRun, type TaskEventStoreTable } from "~/v3/taskEventStore.server";
import { isFailedRunStatus, isFinalRunStatus } from "~/v3/taskStatus";
import { BasePresenter } from "./basePresenter.server";
@@ -269,6 +269,8 @@ export class SpanPresenter extends BasePresenter {
})
: undefined;
const machine = run.machinePreset ? machinePresetFromRun(run) : undefined;
const context = {
task: {
id: run.taskIdentifier,
@@ -307,9 +309,7 @@ export class SpanPresenter extends BasePresenter {
slug: run.project.slug,
name: run.project.name,
},
machine: run.machinePreset
? machinePresetFromName(run.machinePreset as MachinePresetName)
: undefined,
machine,
};
return {
@@ -372,6 +372,7 @@ export class SpanPresenter extends BasePresenter {
workerQueue: run.workerQueue,
spanId: run.spanId,
isCached: !!span.originalRun,
machinePreset: machine?.name,
};
}
apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+21 -3
View File
@@ -7,6 +7,7 @@ import {
import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
import {
formatDurationMilliseconds,
MachinePresetName,
type TaskRunError,
taskRunErrorEnhancer,
} from "@trigger.dev/core/v3";
@@ -18,6 +19,8 @@ import { AdminDebugRun } from "~/components/admin/debugRun";
import { CodeBlock } from "~/components/code/CodeBlock";
import { EnvironmentCombo } from "~/components/environments/EnvironmentLabel";
import { Feedback } from "~/components/Feedback";
import { MachineLabelCombo } from "~/components/MachineLabelCombo";
import { MachineTooltipInfo } from "~/components/MachineTooltipInfo";
import { Button, LinkButton } from "~/components/primitives/Buttons";
import { Callout } from "~/components/primitives/Callout";
import { DateTime, DateTimeAccurate } from "~/components/primitives/DateTime";
@@ -36,7 +39,6 @@ import {
import { TabButton, TabContainer } from "~/components/primitives/Tabs";
import { TextLink } from "~/components/primitives/TextLink";
import { InfoIconTooltip, SimpleTooltip } from "~/components/primitives/Tooltip";
import { RuntimeIcon } from "~/components/RuntimeIcon";
import { RunTimeline, RunTimelineEvent, SpanTimeline } from "~/components/run/RunTimeline";
import { PacketDisplay } from "~/components/runs/v3/PacketDisplay";
import { RunIcon } from "~/components/runs/v3/RunIcon";
@@ -46,6 +48,7 @@ import { SpanTitle } from "~/components/runs/v3/SpanTitle";
import { TaskRunAttemptStatusCombo } from "~/components/runs/v3/TaskRunAttemptStatus";
import { TaskRunStatusCombo, TaskRunStatusReason } from "~/components/runs/v3/TaskRunStatus";
import { WaitpointDetailTable } from "~/components/runs/v3/WaitpointDetails";
import { RuntimeIcon } from "~/components/RuntimeIcon";
import { WarmStartCombo } from "~/components/WarmStarts";
import { useEnvironment } from "~/hooks/useEnvironment";
import { useOrganization } from "~/hooks/useOrganizations";
@@ -615,6 +618,7 @@ function RunBody({
</Property.Value>
</Property.Item>
)}
{run.schedule && (
<Property.Item>
<Property.Label>Schedule</Property.Label>
@@ -681,6 +685,17 @@ function RunBody({
: "–"}
</Property.Value>
</Property.Item>
<Property.Item>
<Property.Label>
<span className="flex items-center gap-1">
Machine
<InfoIconTooltip content={<MachineTooltipInfo />} />
</span>
</Property.Label>
<Property.Value className="-ml-0.5">
<MachineLabelCombo preset={run.machinePreset} />
</Property.Value>
</Property.Item>
<Property.Item>
<Property.Label>Run invocation cost</Property.Label>
<Property.Value>
@@ -724,12 +739,15 @@ function RunBody({
<Property.Value>{run.engine}</Property.Value>
</Property.Item>
{isAdmin && (
<>
<div className="border-t border-yellow-500/50 pt-2">
<Paragraph spacing variant="small" className="text-yellow-500">
Admin only
</Paragraph>
<Property.Item>
<Property.Label>Worker queue</Property.Label>
<Property.Value>{run.workerQueue}</Property.Value>
</Property.Item>
</>
</div>
)}
</Property.Table>
</div>
apps/webapp/app/routes/resources.runs.$runParam.ts
+2 -4
View File
@@ -5,7 +5,7 @@ import { RUNNING_STATUSES } from "~/components/runs/v3/TaskRunStatus";
import { $replica } from "~/db.server";
import { requireUserId } from "~/services/session.server";
import { v3RunParamsSchema } from "~/utils/pathBuilder";
import { machinePresetFromName } from "~/v3/machinePresets.server";
import { machinePresetFromName, machinePresetFromRun } from "~/v3/machinePresets.server";
import { FINAL_ATTEMPT_STATUSES, isFinalRunStatus } from "~/v3/taskStatus";
export type RunInspectorData = UseDataFunctionReturn<typeof loader>;
@@ -183,9 +183,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
slug: run.project.slug,
name: run.project.name,
},
machine: run.machinePreset
? machinePresetFromName(run.machinePreset as MachinePresetName)
: undefined,
machine: run.machinePreset ? machinePresetFromRun(run) : undefined,
};
return typedjson({
apps/webapp/app/services/runsRepository.server.ts
+1
View File
@@ -169,6 +169,7 @@ export class RunsRepository {
batchId: true,
metadata: true,
metadataType: true,
machinePreset: true,
},
});