Add deploy admin debug tooltips

Author: ericallam

apps/webapp/app/env.server.ts

@@ -104,6 +104,7 @@ const EnvironmentSchema = z.object({
   COORDINATOR_SECRET: z.string().default("coordinator-secret"),
   DEPOT_TOKEN: z.string().optional(),
   DEPOT_PROJECT_ID: z.string().optional(),
+  DEPOT_ORG_ID: z.string().optional(),
   CONTAINER_REGISTRY_ORIGIN: z.string().optional(),
   CONTAINER_REGISTRY_USERNAME: z.string().optional(),
   CONTAINER_REGISTRY_PASSWORD: z.string().optional(),

apps/webapp/app/presenters/v3/DeploymentPresenter.server.ts

@@ -1,5 +1,6 @@
 import {
   DeploymentErrorData,
+  ExternalBuildData,
   TaskMetadataFailedToParseData,
   groupTaskMetadataIssuesByTask,
 } from "@trigger.dev/core/v3";
@@ -39,6 +40,7 @@ export class DeploymentPresenter {
     const project = await this.#prismaClient.project.findFirstOrThrow({
       select: {
         id: true,
+        organizationId: true,
       },
       where: {
         slug: projectSlug,
@@ -65,6 +67,9 @@ export class DeploymentPresenter {
         shortCode: true,
         version: true,
         errorData: true,
+        imageReference: true,
+        externalBuildData: true,
+        projectId: true,
         environment: {
           select: {
             id: true,
@@ -117,6 +122,10 @@ export class DeploymentPresenter {
       },
     });
 
+    const externalBuildData = deployment.externalBuildData
+      ? ExternalBuildData.safeParse(deployment.externalBuildData)
+      : undefined;
+
     return {
       deployment: {
         id: deployment.id,
@@ -137,6 +146,11 @@ export class DeploymentPresenter {
         deployedBy: deployment.triggeredBy,
         errorData: this.#prepareErrorData(deployment.errorData),
         sdkVersion: deployment.worker?.sdkVersion,
+        imageReference: deployment.imageReference,
+        externalBuildData:
+          externalBuildData && externalBuildData.success ? externalBuildData.data : undefined,
+        projectId: deployment.projectId,
+        organizationId: project.organizationId,
       },
     };
   }

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.deployments.$deploymentParam/route.tsx

@@ -1,8 +1,9 @@
-import { useLocation } from "@remix-run/react";
+import { Link, useLocation } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { UserAvatar } from "~/components/UserProfilePhoto";
+import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
 import { Badge } from "~/components/primitives/Badge";
@@ -68,6 +69,48 @@ export default function Page() {
     <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-bright">
       <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
         <Header2 className={cn("whitespace-nowrap")}>Deploy: {deployment.shortCode}</Header2>
+
+        <AdminDebugTooltip>
+          <PropertyTable>
+            <Property label="ID">
+              <div className="flex items-center gap-2">
+                <Paragraph variant="extra-small/bright/mono">{deployment.id}</Paragraph>
+              </div>
+            </Property>
+            <Property label="Project ID">
+              <div className="flex items-center gap-2">
+                <Paragraph variant="extra-small/bright/mono">{deployment.projectId}</Paragraph>
+              </div>
+            </Property>
+            <Property label="Org ID">
+              <div className="flex items-center gap-2">
+                <Paragraph variant="extra-small/bright/mono">{deployment.organizationId}</Paragraph>
+              </div>
+            </Property>
+            {deployment.imageReference && (
+              <Property label="Image">
+                <div className="flex items-center gap-2">
+                  <Paragraph variant="extra-small/bright/mono">
+                    {deployment.imageReference}
+                  </Paragraph>
+                </div>
+              </Property>
+            )}
+            {deployment.externalBuildData && (
+              <Property label="Build Server">
+                <div className="flex items-center gap-2">
+                  <Link
+                    to={`/resources/${deployment.projectId}/deployments/${deployment.id}/logs`}
+                    className="extra-small/bright/mono underline"
+                  >
+                    {deployment.externalBuildData.buildId}
+                  </Link>
+                </div>
+              </Property>
+            )}
+          </PropertyTable>
+        </AdminDebugTooltip>
+
         <LinkButton
           to={`${v3DeploymentsPath(organization, project)}${page ? `?page=${page}` : ""}`}
           variant="minimal/medium"

apps/webapp/app/routes/resources.$projectId.deployments.$deploymentId.logs.ts

@@ -0,0 +1,57 @@
+import { LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { ExternalBuildData } from "@trigger.dev/core/v3";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { env } from "~/env.server";
+import { redirectBackWithErrorMessage } from "~/models/message.server";
+import { requireUserId } from "~/services/session.server";
+
+const ParamsSchema = z.object({
+  projectId: z.string(),
+  deploymentId: z.string(),
+});
+
+// Redirects to Depot.dev
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const userId = await requireUserId(request);
+  const { projectId, deploymentId } = ParamsSchema.parse(params);
+
+  await prisma.project.findFirstOrThrow({
+    where: {
+      id: projectId,
+      organization: {
+        members: {
+          some: {
+            userId,
+          },
+        },
+      },
+    },
+  });
+
+  const deployment = await prisma.workerDeployment.findUniqueOrThrow({
+    where: {
+      id: deploymentId,
+      projectId: projectId,
+    },
+  });
+
+  const externalBuildData = deployment.externalBuildData
+    ? ExternalBuildData.safeParse(deployment.externalBuildData)
+    : undefined;
+
+  if (!externalBuildData || externalBuildData.success === false) {
+    return redirectBackWithErrorMessage(request, "No build data found for this deployment.");
+  }
+
+  if (!env.DEPOT_ORG_ID) {
+    return redirectBackWithErrorMessage(request, "No Depot organization ID found.");
+  }
+
+  return new Response(null, {
+    status: 302,
+    headers: {
+      Location: `https://depot.dev/orgs/${env.DEPOT_ORG_ID}/projects/${externalBuildData.data.projectId}/builds/${externalBuildData.data.buildId}/logs`,
+    },
+  });
+}