feat: Pipeline Serving (#814)

Author: Cahllagerfeld

src/app/deployments/[deploymentId]/_components/config-collapsible.tsx

@@ -0,0 +1,38 @@
+import { NestedCollapsible } from "@/components/NestedCollapsible";
+import { componentQueries } from "@/data/components";
+import { Deployment } from "@/types/deployments";
+import { useQuery } from "@tanstack/react-query";
+import { Skeleton } from "@zenml-io/react-component-library/components/server";
+import { DeploymentDetailWrapper } from "./fetch-wrapper";
+
+type Props = {
+	deployment: Deployment;
+};
+
+export function DeployerConfigCollapsible() {
+	return <DeploymentDetailWrapper Component={DeployerConfigCollapsibleContent} />;
+}
+
+function DeployerConfigCollapsibleContent({ deployment }: Props) {
+	const deployerId = deployment.resources?.deployer?.id;
+
+	const deployerQuery = useQuery({
+		...componentQueries.componentDetail(deployerId!),
+		enabled: !!deployerId
+	});
+
+	if (!deployerId) return null;
+
+	if (deployerQuery.isPending) return <Skeleton className="h-[200px] w-full" />;
+	if (deployerQuery.isError) return null;
+
+	const deployer = deployerQuery.data;
+
+	return (
+		<NestedCollapsible
+			isInitialOpen
+			title="Deployer Configuration"
+			data={deployer.metadata?.configuration}
+		/>
+	);
+}

src/app/deployments/[deploymentId]/_components/deployment-detail.tsx

@@ -0,0 +1,77 @@
+import { CollapsibleChevron } from "@/components/collapsible-chevron";
+import { CopyButton } from "@/components/CopyButton";
+import { Key, KeyValue, Value } from "@/components/KeyValue";
+import { NotAvailable } from "@/components/not-available";
+import { SnapshotLink } from "@/components/pipeline-snapshots/snapshot-link";
+import { PipelineLink } from "@/components/pipelines/pipeline-link";
+import { Deployment } from "@/types/deployments";
+import {
+	CollapsibleContent,
+	CollapsibleHeader,
+	CollapsiblePanel,
+	CollapsibleTrigger
+} from "@zenml-io/react-component-library";
+import { useState } from "react";
+import { DeploymentDetailWrapper } from "./fetch-wrapper";
+
+export function DeploymentDetail() {
+	return <DeploymentDetailWrapper Component={DeploymentDetailContent} />;
+}
+
+type Props = {
+	deployment: Deployment;
+};
+
+function DeploymentDetailContent({ deployment }: Props) {
+	const [open, setOpen] = useState(true);
+
+	const deploymentId = deployment.id;
+	const snapshot = deployment.resources?.snapshot;
+	const snapshotId = snapshot?.id;
+	const snapshotName = snapshot?.name;
+
+	const pipelineId = deployment.resources?.pipeline?.id;
+	const pipelineName = deployment.resources?.pipeline?.name;
+
+	return (
+		<CollapsiblePanel open={open} onOpenChange={setOpen}>
+			<CollapsibleHeader className="flex items-center gap-[10px]">
+				<CollapsibleTrigger className="flex w-full gap-2">
+					<CollapsibleChevron open={open} />
+					Details
+				</CollapsibleTrigger>
+			</CollapsibleHeader>
+			<CollapsibleContent className="border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3">
+				<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
+					<KeyValue
+						label="Id"
+						value={
+							<div className="group/copybutton flex items-center gap-0.5">
+								{deploymentId}
+								<CopyButton copyText={deploymentId} />
+							</div>
+						}
+					/>
+					<KeyValue
+						label="Snapshot"
+						value={
+							snapshotId && snapshotName ? (
+								<SnapshotLink snapshotId={snapshotId} snapshotName={snapshotName} />
+							) : (
+								<NotAvailable />
+							)
+						}
+					/>
+					<Key className="h-auto">Pipeline</Key>
+					<Value className="h-auto">
+						{pipelineId && pipelineName ? (
+							<PipelineLink pipelineId={pipelineId} pipelineName={pipelineName} />
+						) : (
+							<NotAvailable />
+						)}
+					</Value>
+				</dl>
+			</CollapsibleContent>
+		</CollapsiblePanel>
+	);
+}

src/app/deployments/[deploymentId]/_components/endpoint.tsx

@@ -0,0 +1,62 @@
+import { CollapsibleChevron } from "@/components/collapsible-chevron";
+import { CopyButton } from "@/components/CopyButton";
+import { KeyValue } from "@/components/KeyValue";
+import { NotAvailable } from "@/components/not-available";
+import { Deployment } from "@/types/deployments";
+import {
+	CollapsibleContent,
+	CollapsibleHeader,
+	CollapsiblePanel,
+	CollapsibleTrigger
+} from "@zenml-io/react-component-library";
+import { useState } from "react";
+import { DeploymentDetailWrapper } from "./fetch-wrapper";
+
+export function EndpointCollapsible() {
+	return <DeploymentDetailWrapper Component={EndpointCollapsibleContent} />;
+}
+
+type Props = {
+	deployment: Deployment;
+};
+
+function EndpointCollapsibleContent({ deployment }: Props) {
+	const [open, setOpen] = useState(true);
+
+	const deploymentEndpoint = deployment.body?.url;
+
+	return (
+		<CollapsiblePanel open={open} onOpenChange={setOpen}>
+			<CollapsibleHeader className="flex items-center gap-[10px]">
+				<CollapsibleTrigger className="flex w-full gap-2">
+					<CollapsibleChevron open={open} />
+					Endpoint
+				</CollapsibleTrigger>
+			</CollapsibleHeader>
+			<CollapsibleContent className="border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3">
+				<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
+					<KeyValue
+						label="Endpoint"
+						value={
+							deploymentEndpoint ? (
+								<div className="group/copybutton flex items-center gap-0.5">
+									<a
+										className="link"
+										href={deploymentEndpoint}
+										target="_blank"
+										rel="noopener noreferrer"
+									>
+										{deploymentEndpoint}
+									</a>
+									<CopyButton copyText={deploymentEndpoint} />
+								</div>
+							) : (
+								<NotAvailable />
+							)
+						}
+					/>
+				</dl>
+			</CollapsibleContent>
+		</CollapsiblePanel>
+	);
+}

src/app/deployments/[deploymentId]/_components/fetch-wrapper.tsx

@@ -0,0 +1,28 @@
+import { deploymentQueries } from "@/data/deployments";
+import { Deployment } from "@/types/deployments";
+import { useQuery } from "@tanstack/react-query";
+import { Skeleton } from "@zenml-io/react-component-library/components/server";
+import { ComponentType } from "react";
+import { useParams } from "react-router-dom";
+
+type DeploymentDetailWrapperProps = {
+	Component: ComponentType<{ deployment: Deployment }>;
+};
+
+export function DeploymentDetailWrapper({ Component }: DeploymentDetailWrapperProps) {
+	const { deploymentId } = useParams() as {
+		deploymentId: string;
+	};
+
+	const deploymentQuery = useQuery({
+		...deploymentQueries.detail(deploymentId),
+		throwOnError: true
+	});
+
+	if (deploymentQuery.isPending) return <Skeleton className="h-[200px] w-full" />;
+	if (deploymentQuery.isError) return null;
+
+	const deployment = deploymentQuery.data;
+
+	return <Component deployment={deployment} />;
+}

src/app/deployments/[deploymentId]/_layout/header/index.tsx

@@ -0,0 +1,13 @@
+import { DeploymentDetailHeaderInfo } from "./info";
+import { DeploymentDetailTabs } from "./tabs";
+
+export function DeploymentDetailHeader({ deploymentId }: { deploymentId: string }) {
+	return (
+		<section className="overflow-x-hidden border-b border-theme-border-moderate bg-theme-surface-primary">
+			<div className="space-y-1 px-5 pt-5 lg:px-[80px]">
+				<DeploymentDetailHeaderInfo deploymentId={deploymentId} />
+				<DeploymentDetailTabs />
+			</div>
+		</section>
+	);
+}

src/app/deployments/[deploymentId]/_layout/header/info-subrow.tsx

@@ -0,0 +1,36 @@
+import { SnapshotLink } from "@/components/pipeline-snapshots/snapshot-link";
+import { Deployment } from "@/types/deployments";
+import { NotAvailableTag } from "./not-available-tag";
+import { PipelineTag } from "./pipeline-tag";
+
+type Props = {
+	deployment: Deployment;
+};
+
+export function DeploymentDetailHeaderInfoSubrow({ deployment }: Props) {
+	const snapshotId = deployment.resources?.snapshot?.id;
+	const snapshotName = deployment.resources?.snapshot?.name;
+	const pipelineId = deployment.resources?.pipeline?.id;
+	const pipelineName = deployment.resources?.pipeline?.name;
+
+	return (
+		<div className="flex items-center gap-5">
+			<div className="flex items-center gap-[10px]">
+				<div className="text-text-sm text-theme-text-secondary">Pipeline</div>
+				{pipelineId && pipelineName ? (
+					<PipelineTag pipelineId={pipelineId} pipelineName={pipelineName} />
+				) : (
+					<NotAvailableTag />
+				)}
+			</div>
+			<div className="flex items-center gap-[10px]">
+				<div className="text-text-sm text-theme-text-secondary">Snapshot</div>
+				{snapshotId && snapshotName ? (
+					<SnapshotLink size="xs" snapshotId={snapshotId} snapshotName={snapshotName} />
+				) : (
+					<NotAvailableTag />
+				)}
+			</div>
+		</div>
+	);
+}

src/app/deployments/[deploymentId]/_layout/header/info.tsx

@@ -0,0 +1,93 @@
+import { DisplayDate } from "@/components/DisplayDate";
+import { InlineAvatar } from "@/components/InlineAvatar";
+import { deploymentQueries } from "@/data/deployments";
+import { getUsername } from "@/lib/user";
+import { Deployment } from "@/types/deployments";
+import { useQuery } from "@tanstack/react-query";
+import { Skeleton, Tag } from "@zenml-io/react-component-library/components/server";
+import { DeploymentDetailHeaderInfoSubrow } from "./info-subrow";
+import { usePipelineDetailRunsBreadcrumbs } from "./use-breadcrumb";
+import { capitalize } from "@/lib/strings";
+import { useActiveTab } from "./use-active-tab";
+import { getDeploymentStatusTagColor } from "@/lib/deployments";
+// import { useSnapshotDetailRunsBreadcrumbs } from "./breadcrumbs";
+
+type Props = {
+	deploymentId: string;
+};
+
+export function DeploymentDetailHeaderInfo({ deploymentId }: Props) {
+	const deploymentQuery = useQuery({
+		...deploymentQueries.detail(deploymentId),
+		throwOnError: true
+	});
+
+	const activeTab = useActiveTab();
+	usePipelineDetailRunsBreadcrumbs(capitalize(activeTab), deploymentQuery.data);
+
+	if (deploymentQuery.isPending) return <InfoSkeleton />;
+	if (deploymentQuery.isError) return null;
+
+	const deployment = deploymentQuery.data;
+
+	return <SnapshotDetailInfoContent deployment={deployment} />;
+}
+
+function SnapshotDetailInfoContent({ deployment }: { deployment: Deployment }) {
+	const name = deployment.name;
+	const status = deployment.body?.status;
+
+	const user = deployment.resources?.user ?? undefined;
+	const updated = deployment.body?.updated;
+
+	return (
+		<section className="space-y-2 bg-theme-surface-primary">
+			<div className="flex items-center gap-1">
+				<h1 className="text-display-xs font-semibold text-theme-text-primary">{name}</h1>
+				<Tag
+					emphasis="subtle"
+					rounded={false}
+					className="inline-flex items-center gap-0.5"
+					color={getDeploymentStatusTagColor(status ?? undefined)}
+				>
+					{capitalize(status ?? "")}
+				</Tag>
+			</div>
+			<div className="flex flex-wrap items-center justify-between gap-1">
+				<DeploymentDetailHeaderInfoSubrow deployment={deployment} />
+				<div className="flex items-center gap-1 text-text-sm text-theme-text-secondary lg:whitespace-nowrap">
+					Deployed by{" "}
+					<InlineAvatar
+						isServiceAccount={!!user?.body?.is_service_account}
+						username={getUsername(user!)}
+						avatarUrl={user?.body?.avatar_url || undefined}
+					/>
+					at <DisplayDate dateString={updated || ""} />
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function InfoSkeleton() {
+	return (
+		<section className="space-y-2 bg-theme-surface-primary">
+			{/* Title row with name and status tag */}
+			<div className="flex items-center gap-1">
+				<Skeleton className="h-6 w-[180px]" /> {/* Name */}
+				<Skeleton className="h-5 w-[60px] rounded-sm" /> {/* Status tag */}
+			</div>
+			{/* Bottom row with subrow info and deployed by info */}
+			<div className="flex flex-wrap items-center justify-between gap-1">
+				<Skeleton className="h-4 w-[120px]" /> {/* Subrow content placeholder */}
+				<div className="flex items-center gap-1">
+					<Skeleton className="h-4 w-[80px]" /> {/* "Deployed by" text */}
+					<Skeleton className="h-5 w-5 rounded-rounded" /> {/* Avatar */}
+					<Skeleton className="h-4 w-[60px]" /> {/* Username */}
+					<Skeleton className="h-4 w-[20px]" /> {/* "at" text */}
+					<Skeleton className="h-4 w-[100px]" /> {/* Date */}
+				</div>
+			</div>
+		</section>
+	);
+}

src/app/deployments/[deploymentId]/_layout/header/not-available-tag.tsx

@@ -0,0 +1,9 @@
+import { Tag } from "@zenml-io/react-component-library";
+
+export function NotAvailableTag() {
+	return (
+		<Tag size="xs" rounded={false} emphasis="subtle" color="grey">
+			Not available
+		</Tag>
+	);
+}

src/app/deployments/[deploymentId]/_layout/header/pipeline-tag.tsx

@@ -0,0 +1,25 @@
+import PipelineIcon from "@/assets/icons/pipeline.svg?react";
+import { routes } from "@/router/routes";
+import { Tag } from "@zenml-io/react-component-library";
+import { Link } from "react-router-dom";
+type Props = {
+	pipelineId: string;
+	pipelineName: string;
+};
+
+export function PipelineTag({ pipelineId, pipelineName }: Props) {
+	return (
+		<Link to={routes.projects.pipelines.detail.runs(pipelineId)}>
+			<Tag
+				size="xs"
+				color="purple"
+				className="inline-flex items-center gap-0.5 text-primary-400"
+				rounded={false}
+				emphasis="minimal"
+			>
+				<PipelineIcon className="size-3 shrink-0 fill-primary-400" />
+				{pipelineName}
+			</Tag>
+		</Link>
+	);
+}