[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

@@ -4,10 +4,12 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Suspense, useMemo, useState } from "react";
 
+import { FlowLink } from "@/components/flows/flow-link";
+import { WorkPoolLink } from "@/components/work-pools/work-pool-link";
+import { WorkQueueLink } from "@/components/work-pools/work-queue-link";
 import { DeploymentActionMenu } from "./deployment-action-menu";
 import { DeploymentDetailsHeader } from "./deployment-details-header";
 import { DeploymentDetailsTabs } from "./deployment-details-tabs";
-import { DeploymentFlowLink } from "./deployment-flow-link";
 import { DeploymentMetadata } from "./deployment-metadata";
 import { DeploymentScheduleDialog } from "./deployment-schedules/deployment-schedule-dialog";
 import { DeploymentSchedules } from "./deployment-schedules/deployment-schedules";
@@ -60,9 +62,20 @@ 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} />}>
+								<FlowLink flowId={deployment.flow_id} />
+							</Suspense>
+							{deployment.work_pool_name && (
+								<WorkPoolLink workPoolName={deployment.work_pool_name} />
+							)}
+							{deployment.work_pool_name && deployment.work_queue_name && (
+								<WorkQueueLink
+									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 → ui-v2/src/components/flows/flow-link.tsx

@@ -3,15 +3,15 @@ import { Icon } from "@/components/ui/icons";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 
-type DeploymentFlowLinkProps = {
+type FlowLinkProps = {
 	flowId: string;
 };
 
-export const DeploymentFlowLink = ({ flowId }: DeploymentFlowLinkProps) => {
+export const FlowLink = ({ flowId }: FlowLinkProps) => {
 	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/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/components/work-pools/work-pool-link.tsx

@@ -0,0 +1,22 @@
+import { Icon } from "@/components/ui/icons";
+import { Link } from "@tanstack/react-router";
+
+type WorkPoolLinkProps = {
+	workPoolName: string;
+};
+
+export const WorkPoolLink = ({ workPoolName }: WorkPoolLinkProps) => {
+	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/work-pools/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 WorkQueueLinkProps = {
+	workPoolName: string;
+	workQueueName: string;
+};
+
+export const WorkQueueLink = ({
+	workPoolName,
+	workQueueName,
+}: WorkQueueLinkProps) => {
+	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/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,
 });