Display Deployment in Run Detail

src/components/runs/detail-tabs/Overview/Details.tsx

@@ -27,6 +27,7 @@ import {
 } from "@zenml-io/react-component-library";
 import { useEffect, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
+import { DeploymentTag } from "./deployment-tag";
 
 type Props = {
 	runId: string;
@@ -57,6 +58,7 @@ export function Details({ runId }: Props) {
 	const executionMode = data.metadata?.config.execution_mode;
 
 	const sourceSnapshot = data.resources?.source_snapshot;
+	const deploymentId = data.metadata?.trigger_info?.deployment_id;
 	const schedule = data.resources?.schedule;
 
 	return (
@@ -128,6 +130,11 @@ export function Details({ runId }: Props) {
 							)
 						}
 					/>
+
+					<KeyValue
+						label="Deployment"
+						value={deploymentId ? <DeploymentTag deploymentId={deploymentId} /> : "Not available"}
+					/>
 					<Key>Execution Mode</Key>
 					<Value>{executionMode ? snakeCaseToTitleCase(executionMode) : "Not available"}</Value>
 					<Key>

src/components/runs/detail-tabs/Overview/deployment-tag.tsx

@@ -0,0 +1,25 @@
+import { DeploymentStatusTag } from "@/components/deployments/deployment-status-tag";
+import { deploymentQueries } from "@/data/deployments";
+import { routes } from "@/router/routes";
+import { useQuery } from "@tanstack/react-query";
+import { Skeleton } from "@zenml-io/react-component-library";
+import { Link } from "react-router-dom";
+
+type Props = {
+	deploymentId: string;
+};
+
+export function DeploymentTag({ deploymentId }: Props) {
+	const deploymentQuery = useQuery(deploymentQueries.detail(deploymentId));
+
+	if (deploymentQuery.isPending) return <Skeleton className="h-6 w-[100px]" />;
+	if (deploymentQuery.isError) return "Not available";
+
+	const deployment = deploymentQuery.data;
+
+	return (
+		<Link to={routes.projects.deployments.detail.overview(deploymentId)}>
+			<DeploymentStatusTag size="sm" status={deployment.body?.status ?? undefined} />
+		</Link>
+	);
+}