Adds new “Machine” column to the runs list

Author: samejr

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

@@ -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,8 @@ import {
   filterableTaskRunStatuses,
   TaskRunStatusCombo,
 } from "./TaskRunStatus";
+import { MachineIcon } from "~/assets/icons/MachineIcon";
+import { MachineLabelCombo } from "~/components/MachineLabelCombo";
 
 type RunsTableProps = {
   total: number;
@@ -201,6 +207,65 @@ export function TaskRunsTable({
               <TableHeaderCell>Compute</TableHeaderCell>
             </>
           )}
+          <TableHeaderCell
+            className="pl-4"
+            tooltip={
+              <div className="flex max-w-xs flex-col gap-4 p-1">
+                <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>
+            }
+          >
+            Machine
+          </TableHeaderCell>
           <TableHeaderCell>Test</TableHeaderCell>
           <TableHeaderCell>Created at</TableHeaderCell>
           <TableHeaderCell
@@ -375,6 +440,9 @@ export function TaskRunsTable({
                       : "–"}
                   </TableCell>
                 )}
+                <TableCell to={path}>
+                  <MachineLabelCombo preset={run.machinePreset as MachinePresetName} />
+                </TableCell>
                 <TableCell to={path}>
                   {run.isTest ? <CheckIcon className="size-4 text-charcoal-400" /> : "–"}
                 </TableCell>