feat: updates to client env & deep refresh (#737)

* feat: updates for client env

* feat: init deep refresh (#738)

Author: Cahllagerfeld

src/app/runs/[id]/Header.tsx

@@ -7,6 +7,7 @@ import { Skeleton } from "@zenml-io/react-component-library";
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { RunActionsMenu } from "./RunActionMenu";
+import { RunRefreshGroup } from "@/components/runs/refresh-group";
 
 export function RunsDetailHeader() {
 	const { runId } = useParams() as { runId: string };
@@ -42,7 +43,10 @@ export function RunsDetailHeader() {
 					</>
 				)}
 			</div>
-			<RunActionsMenu />
+			<div className="flex items-center gap-1">
+				<RunRefreshGroup runId={runId} />
+				<RunActionsMenu />
+			</div>
 		</PageHeader>
 	);
 }

src/app/runs/[id]/RunActionMenu.tsx

@@ -1,6 +1,7 @@
 import HorizontalDots from "@/assets/icons/dots-horizontal.svg?react";
 import Trash from "@/assets/icons/trash.svg?react";
 import {
+	Button,
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
@@ -19,9 +20,16 @@ export function RunActionsMenu() {
 			<DeleteRunAlert setOpen={setDeleteOpen} open={deleteOpen} />
 			<DropdownMenu modal={dropdownOpen} open={dropdownOpen} onOpenChange={setDropdownOpen}>
 				<DropdownMenu>
-					<DropdownMenuTrigger className="z-10">
-						<HorizontalDots className="h-5 w-5 shrink-0 fill-theme-text-secondary" />
-						<p className="sr-only">Run Actions</p>
+					<DropdownMenuTrigger asChild>
+						<Button
+							intent="secondary"
+							className="flex aspect-square items-center justify-center p-0"
+							emphasis="minimal"
+							size="md"
+						>
+							<HorizontalDots className="h-5 w-5 shrink-0 fill-theme-text-secondary" />
+							<p className="sr-only">Run Actions</p>
+						</Button>
 					</DropdownMenuTrigger>
 					<DropdownMenuContent className="z-10" align="end" sideOffset={1}>
 						<DropdownMenuItem onClick={() => setDeleteOpen(true)} className="space-x-2">

src/app/runs/[id]/_Tabs/Configuration/EnvironmentCollapsible.tsx

@@ -5,17 +5,29 @@ import {
 	CollapsibleContent,
 	CollapsibleHeader,
 	CollapsiblePanel,
-	CollapsibleTrigger
+	CollapsibleTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
 } from "@zenml-io/react-component-library";
 import { useState } from "react";
 
 type Props = {
 	run: PipelineRun;
 };
 
+const PYTHON_PACKAGES_KEY = "python_packages";
+
 export function EnvironmentCollapsible({ run }: Props) {
 	const [open, setOpen] = useState(true);
 
+	const executionEnvironment = run.metadata?.orchestrator_environment;
+	const clientEnvironment = run.metadata?.client_environment;
+
+	const normalizedExecutionEnvironment = normalizePythonPackages(executionEnvironment ?? {});
+	const normalizedClientEnvironment = normalizePythonPackages(clientEnvironment ?? {});
+
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
 			<CollapsibleHeader intent="primary" className="flex items-center gap-[10px]">
@@ -32,16 +44,65 @@ export function EnvironmentCollapsible({ run }: Props) {
 				<NestedCollapsible
 					isInitialOpen
 					intent="secondary"
-					title="Client Environment"
-					data={run.metadata?.client_environment}
+					title={
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<span>Client Environment</span>
+								</TooltipTrigger>
+								<TooltipContent className="max-w-[200px] whitespace-normal xl:max-w-[300px]">
+									Environment where you start your pipeline run by calling the pipeline function.{" "}
+									<a
+										rel="noopener noreferrer"
+										className="link"
+										href="https://docs.zenml.io/user-guides/best-practices/configure-python-environments#client-environment-or-the-runner-environment"
+										target="_blank"
+									>
+										Learn more about client environments
+									</a>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					}
+					data={normalizedClientEnvironment}
 				/>
 				<NestedCollapsible
 					isInitialOpen
 					intent="secondary"
-					title="Orchestrator Environment"
-					data={run.metadata?.orchestrator_environment}
+					title={
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<span>Execution Environment</span>
+								</TooltipTrigger>
+								<TooltipContent className="max-w-[200px] whitespace-normal xl:max-w-[300px]">
+									Environment where your ZenML steps get executed.{" "}
+									<a
+										rel="noopener noreferrer"
+										className="link"
+										href="https://docs.zenml.io/user-guides/best-practices/configure-python-environments#execution-environments"
+										target="_blank"
+									>
+										Learn more about exectuion environments
+									</a>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					}
+					data={normalizedExecutionEnvironment}
 				/>
 			</CollapsibleContent>
 		</CollapsiblePanel>
 	);
 }
+
+function normalizePythonPackages(env: Record<string, unknown>) {
+	const pythonPackages = env[PYTHON_PACKAGES_KEY];
+	if (typeof pythonPackages === "string") {
+		return {
+			...env,
+			[PYTHON_PACKAGES_KEY]: pythonPackages.split("\n").map((pkg) => pkg.trim())
+		};
+	}
+	return env;
+}

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

@@ -11,7 +11,10 @@ import { PipelineParamsCollapsible } from "./ParameterCollapsible";
 
 export function ConfigurationTab() {
 	const { runId } = useParams() as { runId: string };
-	const { data, isError, isPending } = usePipelineRun({ runId: runId }, { throwOnError: true });
+	const { data, isError, isPending } = usePipelineRun(
+		{ runId: runId, queryParams: { include_python_packages: true } },
+		{ throwOnError: true }
+	);
 	const { data: buildData } = usePipelineBuild(
 		{
 			buildId: data?.body?.build?.id as string

src/components/CollapsibleCard.tsx

@@ -16,6 +16,8 @@ type CollapsibleCardProps = {
 	className?: string;
 	contentClassName?: string;
 	intent?: CollapsibleHeaderProps["intent"];
+	headerClassName?: string;
+	headerChildren?: React.ReactNode;
 };
 
 export function CollapsibleCard({
@@ -24,12 +26,14 @@ export function CollapsibleCard({
 	initialOpen = false,
 	className,
 	contentClassName,
-	intent = "primary"
+	intent = "primary",
+	headerClassName,
+	headerChildren
 }: CollapsibleCardProps) {
 	const [open, setOpen] = useState(initialOpen);
 	return (
 		<CollapsiblePanel className={className} open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader intent={intent}>
+			<CollapsibleHeader intent={intent} className={headerClassName}>
 				<CollapsibleTrigger className="flex w-full items-center gap-[10px]">
 					<ChevronDown
 						className={` ${
@@ -38,6 +42,8 @@ export function CollapsibleCard({
 					/>
 					{title}
 				</CollapsibleTrigger>
+
+				{headerChildren}
 			</CollapsibleHeader>
 
 			<CollapsibleContent

src/components/MetadataCards.tsx

@@ -11,6 +11,7 @@ import { CollapsibleCard } from "./CollapsibleCard";
 import { KeyValue } from "./KeyValue";
 import { NestedCollapsible } from "./NestedCollapsible";
 import { isUrl } from "../lib/url";
+import { CopyMetadataButton } from "./copy-metadata-button";
 
 type Props = { metadata: MetadataMap };
 
@@ -35,9 +36,22 @@ export function UncategorizedCard({ metadata, title }: Props & { title?: string
 	// sort nonDicts alphabetically by index 0
 	nonDicts.sort((a, b) => a[0].localeCompare(b[0]));
 
+	const nonDictsObject = nonDicts.reduce(
+		(acc, [key, value]) => {
+			acc[key] = value;
+			return acc;
+		},
+		{} as Record<string, unknown>
+	);
+
 	return (
 		<div>
-			<CollapsibleCard initialOpen title={title || "Uncategorized"}>
+			<CollapsibleCard
+				headerClassName="flex items-center gap-2"
+				headerChildren={<CopyMetadataButton copyText={JSON.stringify(nonDictsObject)} />}
+				initialOpen
+				title={title || "Uncategorized"}
+			>
 				<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
 					{nonDicts.map(([name, value], idx) => {
 						return (

src/components/NestedCollapsible.tsx

@@ -11,6 +11,9 @@ import { PropsWithChildren, ReactNode } from "react";
 import { Codesnippet } from "./CodeSnippet";
 import { CollapsibleCard } from "./CollapsibleCard";
 import { KeyValue } from "./KeyValue";
+import { CopyMetadataButton } from "./copy-metadata-button";
+
+const regex = /^<class\s+'.*'>$/;
 
 type Props = {
 	intent?: CollapsibleHeaderProps["intent"];
@@ -33,7 +36,6 @@ export function NestedCollapsible({
 	const objects: { [key: string]: Record<string, unknown> } = {};
 	const nonObjects: { [key: string]: unknown } = {};
 	const arrays: { [key: string]: unknown[] } = {};
-	const regex = /^<class\s+'.*'>$/;
 
 	for (const [key, value] of Object.entries(data || {})) {
 		if (isObject(value)) {
@@ -48,15 +50,19 @@ export function NestedCollapsible({
 	const values = Object.entries(nonObjects);
 	values.sort((a, b) => a[0].localeCompare(b[0]));
 
+	const hasNoData = Object.keys(data || {}).length === 0;
+
 	return (
 		<CollapsibleCard
 			contentClassName={contentClassName}
 			className={className}
 			initialOpen={isInitialOpen}
 			intent={intent}
 			title={title}
+			headerClassName="flex items-center gap-2"
+			headerChildren={hasNoData ? null : <CopyMetadataButton copyText={JSON.stringify(data)} />}
 		>
-			{Object.keys(data || {}).length === 0 ? (
+			{hasNoData ? (
 				<p>Not available</p>
 			) : (
 				<div className="flex flex-col gap-3">
@@ -72,28 +78,7 @@ export function NestedCollapsible({
 										</Tooltip>
 									</TooltipProvider>
 								}
-								value={
-									<>
-										{isString(value) && regex.test(value) ? (
-											<Codesnippet className="py-1" highlightCode code={value} />
-										) : value === null ? (
-											<div>null</div>
-										) : isString(value) && isUrl(value) ? (
-											<a
-												className="underline transition-all duration-200 hover:decoration-transparent"
-												href={value}
-												target="_blank"
-												rel="noopener noreferrer"
-											>
-												{value}
-											</a>
-										) : (
-											<div className="whitespace-normal">
-												{isString(value) ? value : JSON.stringify(value)}
-											</div>
-										)}
-									</>
-								}
+								value={<RenderSimpleValue value={value} />}
 							/>
 						))}
 					</dl>
@@ -118,43 +103,21 @@ function RenderArray({ title, value }: { title: string; value: unknown[] }) {
 
 	return (
 		<>
-			<CollapsibleCard intent="secondary" key={title} title={title}>
+			<CollapsibleCard
+				headerClassName="flex items-center gap-2"
+				headerChildren={<CopyMetadataButton copyText={JSON.stringify(value)} />}
+				intent="secondary"
+				key={title}
+				title={title}
+			>
 				{simpleValues.length > 0 && (
-					<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 truncate md:grid-cols-3 md:gap-y-4">
-						{Object.entries(simpleValues).map(([key, value]) => (
-							<KeyValue
-								key={key}
-								label={
-									<TooltipProvider>
-										<Tooltip>
-											<TooltipTrigger className="cursor-default truncate">{key}</TooltipTrigger>
-											<TooltipContent className="max-w-[480px]">{key}</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-								}
-								value={
-									<div className="py-1">
-										{value === null ? (
-											<div>null</div>
-										) : isString(value) && isUrl(value) ? (
-											<a
-												className="underline transition-all duration-200 hover:decoration-transparent"
-												href={value}
-												target="_blank"
-												rel="noopener noreferrer"
-											>
-												{value}
-											</a>
-										) : (
-											<div className="whitespace-normal">
-												{isString(value) ? value : JSON.stringify(value)}
-											</div>
-										)}
-									</div>
-								}
-							/>
+					<ul className="space-y-2 md:space-y-4">
+						{simpleValues.map((val, index) => (
+							<li key={index}>
+								<RenderSimpleValue value={val} />
+							</li>
 						))}
-					</dl>
+					</ul>
 				)}
 				{nestedValues.length > 0 && (
 					<ul className="space-y-4">
@@ -174,3 +137,28 @@ function RenderArray({ title, value }: { title: string; value: unknown[] }) {
 		</>
 	);
 }
+
+function RenderSimpleValue({ value }: { value: unknown }) {
+	if (isString(value) && regex.test(value)) {
+		return <Codesnippet highlightCode code={value} />;
+	}
+
+	if (value === null) {
+		return <div>null</div>;
+	}
+
+	if (isString(value) && isUrl(value)) {
+		return (
+			<a
+				className="underline transition-all duration-200 hover:decoration-transparent"
+				href={value}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				{value}
+			</a>
+		);
+	}
+
+	return <div className="whitespace-normal">{isString(value) ? value : JSON.stringify(value)}</div>;
+}