Merge pull request #678 from zenml-io/staging

Followup Release

Author: Cahllagerfeld

src/app/runs/[id]/_Tabs/Overview/ComponentCollapsible.tsx

@@ -1,15 +1,13 @@
 import { AlertPanels } from "./AlertPanels";
 import { Details } from "./Details";
 import { OrchestratorCollapsible } from "./Orchestrator";
-import { StackCollapsible } from "./Stack";
 
 export function OverviewTab() {
 	return (
 		<div className="grid grid-cols-1 gap-5">
 			<AlertPanels />
 			<Details />
 			<OrchestratorCollapsible />
-			<StackCollapsible />
 		</div>
 	);
 }

src/app/runs/[id]/_Tabs/Overview/Stack.tsx

@@ -0,0 +1,49 @@
+import AlertCircle from "@/assets/icons/alert-circle.svg?react";
+import { EmptyState } from "@/components/EmptyState";
+import { StackInfo } from "@/components/stacks/info";
+import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
+import { useStack } from "@/data/stacks/stack-detail-query";
+import { PipelineRun } from "@/types/pipeline-runs";
+import { Skeleton } from "@zenml-io/react-component-library";
+import { useParams } from "react-router-dom";
+
+export function StackTab() {
+	const { runId } = useParams() as { runId: string };
+
+	const run = usePipelineRun({ runId: runId }, { throwOnError: true });
+
+	if (run.isPending) return <Skeleton className="h-[250px] w-full" />;
+	if (run.isError) return <p>Something went wrong fetching the run</p>;
+
+	const stackId = run.data?.body?.stack?.id;
+
+	if (!stackId)
+		return (
+			<EmptyState icon={<AlertCircle className="h-[120px] w-[120px] fill-neutral-300" />}>
+				<div className="text-center">
+					<p className="text-display-xs font-semibold">No Stack</p>
+					<p className="text-text-lg text-theme-text-secondary">
+						There is no stack associated with this run.
+					</p>
+				</div>
+			</EmptyState>
+		);
+
+	return <StackTabContent run={run.data} stackId={stackId} />;
+}
+
+type StackTabContentProps = {
+	stackId: string;
+	run: PipelineRun;
+};
+function StackTabContent({ stackId, run }: StackTabContentProps) {
+	const { data, isError, isPending } = useStack({ stackId: stackId });
+
+	if (isPending) return <Skeleton className="h-[250px] w-full" />;
+
+	if (isError) {
+		return <p>Failed to fetch Stack</p>;
+	}
+
+	return <StackInfo stack={data} run={run} />;
+}

src/app/runs/[id]/_Tabs/Overview/index.tsx

@@ -1,6 +1,7 @@
 import MetadataIcon from "@/assets/icons/code-square.svg?react";
 import Collapse from "@/assets/icons/collapse.svg?react";
 import Info from "@/assets/icons/info.svg?react";
+import Stack from "@/assets/icons/stack.svg?react";
 import Tools from "@/assets/icons/tool.svg?react";
 import {
 	Button,
@@ -12,9 +13,10 @@ import {
 import { Dispatch, SetStateAction } from "react";
 import { useNavigate } from "react-router-dom";
 import { ConfigurationTab } from "./Configuration";
+import { MetadataTab } from "./Metadata";
 import { OverviewTab } from "./Overview";
 import { useSelectedTab } from "./service";
-import { MetadataTab } from "./Metadata";
+import { StackTab } from "./Stack";
 
 type TabsHeaderProps = {
 	setIsPanelOpen: Dispatch<SetStateAction<boolean>>;
@@ -52,6 +54,10 @@ export function RunsDetailTabs() {
 						<Info className="h-5 w-5 shrink-0 fill-theme-text-tertiary group-data-[state=active]/trigger:fill-theme-surface-strong" />
 						<span>Overview</span>
 					</TabsTrigger>
+					<TabsTrigger className="flex items-center gap-2 truncate text-text-md" value="stack">
+						<Stack className="h-5 w-5 shrink-0 fill-theme-text-tertiary group-data-[state=active]/trigger:fill-theme-surface-strong" />
+						<span>Stack</span>
+					</TabsTrigger>
 					<TabsTrigger
 						className="flex items-center gap-2 truncate text-text-md"
 						value="configuration"
@@ -68,6 +74,9 @@ export function RunsDetailTabs() {
 				<TabsContent className="m-0 mt-5 border-0 bg-transparent p-0" value="overview">
 					<OverviewTab />
 				</TabsContent>
+				<TabsContent className="m-0 mt-5 border-0 bg-transparent p-0" value="stack">
+					<StackTab />
+				</TabsContent>
 				<TabsContent className="m-0 mt-5 border-0 bg-transparent p-0" value="configuration">
 					<ConfigurationTab />
 				</TabsContent>

src/app/runs/[id]/_Tabs/Stack/index.tsx

@@ -3,7 +3,7 @@ import { z } from "zod";
 
 const tabParamSchema = z.object({
 	tab: z
-		.enum(["overview", "configuration", "metadata"])
+		.enum(["overview", "configuration", "metadata", "stack"])
 		.optional()
 		.default("overview")
 		.catch("overview")

src/app/runs/[id]/_Tabs/index.tsx

@@ -7,7 +7,7 @@ import {
 	TooltipProvider,
 	TooltipTrigger
 } from "@zenml-io/react-component-library/components/client";
-import { ReactNode } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 import { Codesnippet } from "./CodeSnippet";
 import { CollapsibleCard } from "./CollapsibleCard";
 import { KeyValue } from "./KeyValue";
@@ -27,8 +27,9 @@ export function NestedCollapsible({
 	intent = "primary",
 	isInitialOpen = false,
 	contentClassName,
+	children,
 	className
-}: Props) {
+}: PropsWithChildren<Props>) {
 	const objects: { [key: string]: any } = {};
 	const nonObjects: { [key: string]: any } = {};
 	const arrays: { [key: string]: any } = {};
@@ -95,6 +96,7 @@ export function NestedCollapsible({
 					))}
 				</div>
 			)}
+			{children}
 		</CollapsibleCard>
 	);
 }

src/app/runs/[id]/_Tabs/service.ts

@@ -2,6 +2,7 @@ import MetadataIcon from "@/assets/icons/code-square.svg?react";
 import Info from "@/assets/icons/info.svg?react";
 import TemplatesIcon from "@/assets/icons/pipeline-template.svg?react";
 import PipelineIcon from "@/assets/icons/pipeline.svg?react";
+import Stack from "@/assets/icons/stack.svg?react";
 import RunIcon from "@/assets/icons/terminal.svg?react";
 import Tools from "@/assets/icons/tool-02.svg?react";
 import { capitalize } from "@/lib/strings";
@@ -106,7 +107,8 @@ export const matchSegmentWithTab = (segment: string) => {
 		pipelines: <PipelineIcon className={iconClasses} />,
 		metadata: <MetadataIcon className={iconClasses} />,
 		runs: <RunIcon className={iconClasses} />,
-		templates: <TemplatesIcon className={iconClasses} />
+		templates: <TemplatesIcon className={iconClasses} />,
+		stack: <Stack className={iconClasses} />
 	};
 
 	return routeMap[segment] || <Info className="h-5 w-5 fill-theme-text-tertiary" />;

src/components/NestedCollapsible.tsx

@@ -11,12 +11,12 @@ export function ComponentBadge({ type, children }: Props) {
 	return (
 		<Tag
 			rounded={false}
-			className="inline-flex items-center gap-0.5 text-text-sm"
+			className="inline-flex shrink items-center gap-0.5 overflow-x-hidden text-text-sm"
 			color="purple"
 			emphasis="minimal"
 		>
-			<ComponentIcon type={type} className="h-4 w-4 fill-current" />
-			<span>{children}</span>
+			<ComponentIcon type={type} className="h-4 w-4 shrink-0 fill-current" />
+			<div className="truncate">{children}</div>
 		</Tag>
 	);
 }