[UI v2] feat: Updates deployment details page to have associated work…

… pools and work queues links

ui-v2/src/components/deployments/deployment-details-page.tsx

@@ -12,6 +12,8 @@ import { DeploymentMetadata } from "./deployment-metadata";
 import { DeploymentScheduleDialog } from "./deployment-schedules/deployment-schedule-dialog";
 import { DeploymentSchedules } from "./deployment-schedules/deployment-schedules";
 import { DeploymentTriggers } from "./deployment-triggers";
+import { DeploymentWorkPoolLink } from "./deployment-work-pool-link";
+import { DeploymentWorkQueueLink } from "./deployment-work-queue-link";
 import { RunFlowButton } from "./run-flow-button";
 import { useDeleteDeploymentConfirmationDialog } from "./use-delete-deployment-confirmation-dialog";
 
@@ -60,9 +62,22 @@ export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
 				<div className="flex align-middle justify-between">
 					<div className="flex flex-col gap-2">
 						<DeploymentDetailsHeader deployment={deployment} />
-						<Suspense fallback={<LoadingSkeleton numSkeletons={1} />}>
-							<DeploymentFlowLink flowId={deployment.flow_id} />
-						</Suspense>
+						<div className="flex items-center gap-4">
+							<Suspense fallback={<LoadingSkeleton numSkeletons={1} />}>
+								<DeploymentFlowLink flowId={deployment.flow_id} />
+							</Suspense>
+							{deployment.work_pool_name && (
+								<DeploymentWorkPoolLink
+									workPoolName={deployment.work_pool_name}
+								/>
+							)}
+							{deployment.work_pool_name && deployment.work_queue_name && (
+								<DeploymentWorkQueueLink
+									workPoolName={deployment.work_pool_name}
+									workQueueName={deployment.work_queue_name}
+								/>
+							)}
+						</div>
 					</div>
 					<div className="flex align-middle gap-2">
 						<RunFlowButton deployment={deployment} />

ui-v2/src/components/deployments/deployment-flow-link.tsx

@@ -11,7 +11,7 @@ export const DeploymentFlowLink = ({ flowId }: DeploymentFlowLinkProps) => {
 	const { data: flow } = useSuspenseQuery(buildFLowDetailsQuery(flowId));
 
 	return (
-		<div className="flex items-center gap-1 text-sm">
+		<div className="flex items-center gap-1 text-xs">
 			Flow
 			<Link
 				to="/flows/flow/$id"

ui-v2/src/components/deployments/deployment-work-pool-link.tsx

@@ -0,0 +1,24 @@
+import { Icon } from "@/components/ui/icons";
+import { Link } from "@tanstack/react-router";
+
+type DeploymentWorkPoolLinkProps = {
+	workPoolName: string;
+};
+
+export const DeploymentWorkPoolLink = ({
+	workPoolName,
+}: DeploymentWorkPoolLinkProps) => {
+	return (
+		<div className="flex items-center gap-1 text-xs">
+			Work Pool
+			<Link
+				to="/work-pools/work-pool/$workPoolName"
+				params={{ workPoolName }}
+				className="flex items-center gap-1"
+			>
+				<Icon id="Cpu" className="size-4" />
+				{workPoolName}
+			</Link>
+		</div>
+	);
+};

ui-v2/src/components/deployments/deployment-work-queue-link.tsx

@@ -0,0 +1,38 @@
+import { buildWorkQueueDetailsQuery } from "@/api/work-queues";
+import { Icon } from "@/components/ui/icons";
+import { StatusIcon } from "@/components/ui/status-badge";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+
+type DeploymentWorkQueueLinkProps = {
+	workPoolName: string;
+	workQueueName: string;
+};
+
+export const DeploymentWorkQueueLink = ({
+	workPoolName,
+	workQueueName,
+}: DeploymentWorkQueueLinkProps) => {
+	const { data: workQueue } = useQuery(
+		buildWorkQueueDetailsQuery(workPoolName, workQueueName),
+	);
+
+	if (workQueue) {
+		return (
+			<div className="flex items-center gap-1 text-xs">
+				Work Queue
+				<Link
+					to="/work-pools/work-pool/$workPoolName/queue/$workQueueName"
+					params={{ workPoolName, workQueueName }}
+					className="flex items-center gap-1"
+				>
+					<Icon id="Cpu" className="size-4" />
+					{workQueueName}
+				</Link>
+				{workQueue.status && <StatusIcon status={workQueue.status} />}
+			</div>
+		);
+	}
+
+	return null;
+};

ui-v2/src/components/ui/status-badge/index.tsx

@@ -31,12 +31,14 @@ const statusBadgeVariants = cva(
 	},
 );
 
+export const StatusIcon = ({ status }: StatusBadgeProps) =>
+	STATUS_ICONS[status];
+
 export const StatusBadge = ({ status }: StatusBadgeProps) => {
-	const Icon = STATUS_ICONS[status];
 	const statusText = status.split("_").map(capitalize).join(" ");
 	return (
 		<Badge className={statusBadgeVariants({ status })}>
-			{Icon}
+			<StatusIcon status={status} />
 			{statusText}
 		</Badge>
 	);

ui-v2/src/routes/deployments/deployment.$id.tsx

@@ -1,6 +1,7 @@
 import { buildListAutomationsRelatedQuery } from "@/api/automations/automations";
 import { buildDeploymentDetailsQuery } from "@/api/deployments";
 import { buildFLowDetailsQuery } from "@/api/flows";
+import { buildWorkQueueDetailsQuery } from "@/api/work-queues";
 import { DeploymentDetailsPage } from "@/components/deployments/deployment-details-page";
 import {
 	FLOW_RUN_STATES,
@@ -78,7 +79,14 @@ export const Route = createFileRoute("/deployments/deployment/$id")({
 		void queryClient.prefetchQuery(
 			buildListAutomationsRelatedQuery(`prefect.deployment.${params.id}`),
 		);
+
 		void queryClient.prefetchQuery(buildFLowDetailsQuery(res.flow_id));
+
+		if (res.work_pool_name && res.work_queue_name) {
+			void queryClient.prefetchQuery(
+				buildWorkQueueDetailsQuery(res.work_pool_name, res.work_queue_name),
+			);
+		}
 	},
 	wrapInSuspense: true,
 });