Show build server in build details

Amp-Thread-ID: https://ampcode.com/threads/T-019fc6e3-ac3b-77e6-928a-10b57adca428
Co-authored-by: Arjun Komath <arjunkomath@gmail.com>

Author: ampagent

web/app/(dashboard)/dashboard/projects/[slug]/[env]/services/[serviceId]/builds/[buildId]/page.tsx

@@ -3,7 +3,13 @@ import { notFound } from "next/navigation";
 import { BuildDetails } from "@/components/builds/build-details";
 import { SetBreadcrumbs } from "@/components/core/breadcrumb-data";
 import { db } from "@/db";
-import { builds, projects, serviceRevisions, services } from "@/db/schema";
+import {
+	builds,
+	projects,
+	servers,
+	serviceRevisions,
+	services,
+} from "@/db/schema";
 import { parseServiceRevisionSpec } from "@/lib/service-revision-changes";
 
 async function getBuild(
@@ -27,13 +33,18 @@ async function getBuild(
 
 	if (!service) return null;
 
-	const build = await db
-		.select()
+	const buildData = await db
+		.select({
+			build: builds,
+			server: { id: servers.id, name: servers.name },
+		})
 		.from(builds)
+		.leftJoin(servers, eq(builds.claimedBy, servers.id))
 		.where(and(eq(builds.id, buildId), eq(builds.serviceId, serviceId)))
 		.then((r) => r[0]);
 
-	if (!build) return null;
+	if (!buildData) return null;
+	const { build, server } = buildData;
 
 	const revision = await db
 		.select({ specification: serviceRevisions.specification })
@@ -63,6 +74,7 @@ async function getBuild(
 		project,
 		service,
 		build,
+		server,
 		githubRepo,
 	};
 }
@@ -108,6 +120,7 @@ export default async function BuildPage({
 				envName={env}
 				service={data.service}
 				build={data.build}
+				server={data.server}
 				githubRepo={data.githubRepo}
 			/>
 		</>

web/app/api/builds/[buildId]/route.ts

@@ -1,19 +1,26 @@
 import { eq } from "drizzle-orm";
 import { type NextRequest, NextResponse } from "next/server";
 import { db } from "@/db";
-import { builds } from "@/db/schema";
+import { builds, servers } from "@/db/schema";
 
 export async function GET(
 	_: NextRequest,
 	{ params }: { params: Promise<{ buildId: string }> },
 ) {
 	const { buildId } = await params;
 
-	const [build] = await db.select().from(builds).where(eq(builds.id, buildId));
+	const [buildData] = await db
+		.select({
+			build: builds,
+			server: { id: servers.id, name: servers.name },
+		})
+		.from(builds)
+		.leftJoin(servers, eq(builds.claimedBy, servers.id))
+		.where(eq(builds.id, buildId));
 
-	if (!build) {
+	if (!buildData) {
 		return NextResponse.json({ error: "Build not found" }, { status: 404 });
 	}
 
-	return NextResponse.json({ build });
+	return NextResponse.json(buildData);
 }

web/components/builds/build-details.tsx

@@ -42,6 +42,8 @@ type BuildWithDates = Omit<
 	claimedAt: string | Date | null;
 };
 
+type BuildServer = { id: string; name: string };
+
 const STATUS_CONFIG: Record<
 	BuildStatus,
 	{
@@ -97,28 +99,31 @@ export function BuildDetails({
 	envName,
 	service,
 	build: initialBuild,
+	server: initialServer,
 	githubRepo,
 }: {
 	projectSlug: string;
 	envName: string;
 	service: Pick<Service, "id" | "name">;
 	build: BuildWithDates;
+	server: BuildServer | null;
 	githubRepo: { repoFullName: string } | null;
 }) {
 	const router = useRouter();
 	const [isCancelling, setIsCancelling] = useState(false);
 	const [isRetrying, setIsRetrying] = useState(false);
 
-	const { data } = useSWR<{ build: BuildWithDates }>(
-		`/api/builds/${initialBuild.id}`,
-		fetcher,
-		{
-			fallbackData: { build: initialBuild },
-			refreshInterval: isActiveBuild(initialBuild.status) ? 1500 : 0,
-		},
-	);
+	const { data } = useSWR<{
+		build: BuildWithDates;
+		server: BuildServer | null;
+	}>(`/api/builds/${initialBuild.id}`, fetcher, {
+		fallbackData: { build: initialBuild, server: initialServer },
+		refreshInterval: (latestData) =>
+			isActiveBuild(latestData?.build.status ?? initialBuild.status) ? 1500 : 0,
+	});
 
 	const build = data?.build || initialBuild;
+	const server = data ? data.server : initialServer;
 	const config = STATUS_CONFIG[build.status];
 	const isAnimated = ["cloning", "building", "pushing"].includes(build.status);
 
@@ -257,6 +262,17 @@ export function BuildDetails({
 				<Item variant="outline">
 					<ItemContent>
 						<ItemDescription as="div" className="space-y-1">
+							{server && (
+								<div className="flex justify-between">
+									<span>Build server</span>
+									<Link
+										href={`/dashboard/servers/${server.id}`}
+										className="text-foreground hover:underline"
+									>
+										{server.name}
+									</Link>
+								</div>
+							)}
 							<div className="flex justify-between">
 								<span>Created</span>
 								<span>{formatRelativeTime(build.createdAt)}</span>