feat: small additions (#800)

Author: Cahllagerfeld

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

@@ -41,6 +41,12 @@ export function ConfigurationTab() {
 			)}
 			<CodeCollapsible runId={runId} />
 			<EnvironmentCollapsible run={data} />
+			<NestedCollapsible
+				isInitialOpen
+				title="Cache Policy"
+				sortKeysAlphabetically={false}
+				data={data.metadata?.config.cache_policy ?? undefined}
+			/>
 			<NestedCollapsible
 				isInitialOpen
 				title="Resources"

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

@@ -10,6 +10,7 @@ import { Key, Value } from "@/components/KeyValue";
 import { RepoBadge } from "@/components/repositories/RepoBadge";
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { calculateTimeDifference } from "@/lib/dates";
+import { snakeCaseToTitleCase } from "@/lib/strings";
 import { routes } from "@/router/routes";
 import {
 	CollapsibleContent,
@@ -48,6 +49,9 @@ export function Details() {
 	if (isError) return null;
 	if (isPending) return <Skeleton className="h-[200px] w-full" />;
 
+	const statusReason = data.body?.status_reason;
+	const executionMode = data.metadata?.config.execution_mode;
+
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
 			<CollapsibleHeader className="flex items-center gap-[10px]">
@@ -71,15 +75,31 @@ export function Details() {
 					</Value>
 					<Key>Status</Key>
 					<Value>
-						<Tag
-							className="inline-flex items-center gap-0.5"
-							emphasis="subtle"
-							color={getExecutionStatusTagColor(data.body?.status)}
-						>
-							<ExecutionStatusIcon className="fill-current" status={data.body?.status} />
-							{data.body?.status}
-						</Tag>
+						{(() => {
+							const statusTag = (
+								<Tag
+									className="inline-flex items-center gap-0.5"
+									emphasis="subtle"
+									color={getExecutionStatusTagColor(data.body?.status)}
+								>
+									<ExecutionStatusIcon className="fill-current" status={data.body?.status} />
+									{statusReason ?? data.body?.status}
+								</Tag>
+							);
+
+							return statusReason ? (
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger>{statusTag}</TooltipTrigger>
+										<TooltipContent>{data.body?.status}</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							) : (
+								statusTag
+							);
+						})()}
 					</Value>
+
 					<Key>Pipeline</Key>
 					<Value>
 						{data.body?.pipeline ? (
@@ -102,6 +122,8 @@ export function Details() {
 							"Not available"
 						)}
 					</Value>
+					<Key>Execution Mode</Key>
+					<Value>{executionMode ? snakeCaseToTitleCase(executionMode) : "Not available"}</Value>
 					<Key>
 						<div className="flex items-center space-x-0.5 truncate">
 							<span className="truncate">Repository/Commit</span>

src/components/ExecutionStatus.tsx

@@ -18,6 +18,7 @@ export function getExecutionStatusColor(status?: ExecutionStatus | "unknown" | n
 		case "failed":
 			return "fill-error-500";
 		case "initializing":
+		case "provisioning":
 			return "fill-primary-400";
 		case "cached":
 		case "stopped":
@@ -62,6 +63,7 @@ export function getExecutionStatusBackgroundColor(status?: ExecutionStatus | "un
 		case "failed":
 			return "bg-error-50";
 		case "initializing":
+		case "provisioning":
 			return "bg-primary-50";
 		case "cached":
 		case "stopped":
@@ -86,6 +88,7 @@ export function getExecutionStatusTagColor(
 		case "failed":
 			return "red";
 		case "initializing":
+		case "provisioning":
 			return "purple";
 		case "cached":
 		case "stopped":
@@ -115,6 +118,7 @@ export function ExecutionStatusIcon({
 		case "failed":
 			return <AlertCircle className={classNames} />;
 		case "initializing":
+		case "provisioning":
 		case "stopping":
 			return <Initializing className={classNames} />;
 		case "cached":

src/components/NestedCollapsible.tsx

@@ -20,6 +20,7 @@ type Props = {
 	title: ReactNode;
 	isInitialOpen?: boolean;
 	contentClassName?: string;
+	sortKeysAlphabetically?: boolean;
 	className?: string;
 	schema?: JSONSchemaDefinition;
 };
@@ -34,7 +35,8 @@ export function NestedCollapsible({
 	contentClassName,
 	className,
 	children,
-	isInitialOpen = false
+	isInitialOpen = false,
+	sortKeysAlphabetically = true
 }: PropsWithChildren<Props>) {
 	const objects: { [key: string]: Record<string, unknown> } = {};
 	const nonObjects: { [key: string]: unknown } = {};
@@ -52,7 +54,9 @@ export function NestedCollapsible({
 
 	// sort keys of nonObjects alphabetically
 	const values = Object.entries(nonObjects);
-	values.sort((a, b) => a[0].localeCompare(b[0]));
+	if (sortKeysAlphabetically) {
+		values.sort((a, b) => a[0].localeCompare(b[0]));
+	}
 
 	const hasNoData = Object.keys(data || {}).length === 0;
 

src/components/runs/stop-group/index.tsx

@@ -12,8 +12,11 @@ export function RunStopGroup({ runId }: Props) {
 	if (runQuery.isError) return null;
 	if (runQuery.isPending) return <Skeleton className="h-6 w-[100px]" />;
 
-	const status = runQuery.data?.body?.status;
-	const isActive = status === "running" || status === "initializing";
+	const status = runQuery.data.body?.status;
+	const orchestratorRunID = runQuery.data.metadata?.orchestrator_run_id;
+	const isActive =
+		(status === "running" || status === "initializing" || status === "provisioning") &&
+		!!orchestratorRunID;
 
 	return (
 		<div className="flex">

src/components/steps/step-sheet/ConfigurationTab.tsx

@@ -94,6 +94,17 @@ export function StepConfigTab({ stepId }: Props) {
 				title="Resources"
 				data={(data.metadata?.config.settings as { [key: string]: any })?.resources || {}}
 			/>
+			<NestedCollapsible
+				isInitialOpen
+				title="Cache Policy"
+				sortKeysAlphabetically={false}
+				data={data.metadata?.config.cache_policy}
+			/>
+			<NestedCollapsible
+				isInitialOpen
+				title="Retry"
+				data={data.metadata?.config.retry ?? undefined}
+			/>
 			<NestedCollapsible
 				isInitialOpen
 				title="Substitutions"

src/types/core.ts

@@ -4769,6 +4769,12 @@ export type components = {
 			/** The line number of the step code that raised the exception. */
 			step_code_line?: number | null;
 		};
+		/**
+		 * ExecutionMode
+		 * @description Enum that represents the execution mode of a pipeline run.
+		 * @enum {string}
+		 */
+		ExecutionMode: "fail_fast" | "stop_on_failure" | "continue_on_failure";
 		/**
 		 * ExecutionStatus
 		 * @description Enum that represents the execution status of a step or pipeline run.
@@ -6445,6 +6451,8 @@ export type components = {
 			enable_step_logs?: boolean | null;
 			/** Enable Pipeline Logs */
 			enable_pipeline_logs?: boolean | null;
+			/** @default continue_on_failure */
+			execution_mode?: components["schemas"]["ExecutionMode"];
 			/**
 			 * Settings
 			 * @default {}
@@ -6495,6 +6503,8 @@ export type components = {
 			enable_step_logs?: boolean | null;
 			/** Enable Pipeline Logs */
 			enable_pipeline_logs?: boolean | null;
+			/** @default continue_on_failure */
+			execution_mode?: components["schemas"]["ExecutionMode"];
 			/**
 			 * Settings
 			 * @default {}
@@ -6892,6 +6902,8 @@ export type components = {
 			project_id: string;
 			/** The status of the pipeline run. */
 			status: components["schemas"]["ExecutionStatus"];
+			/** Whether the pipeline run is in progress. */
+			in_progress: boolean;
 			/** The reason for the status of the pipeline run. */
 			status_reason?: string | null;
 			/** The stack that was used for this run. */
@@ -13900,6 +13912,7 @@ export type operations = {
 				template_id?: string | null;
 				model_version_id?: string | null;
 				status?: string | null;
+				in_progress?: boolean | null;
 				start_time?: string | null;
 				end_time?: string | null;
 				unlisted?: boolean | null;
@@ -14453,6 +14466,7 @@ export type operations = {
 				template_id?: string | null;
 				model_version_id?: string | null;
 				status?: string | null;
+				in_progress?: boolean | null;
 				start_time?: string | null;
 				end_time?: string | null;
 				unlisted?: boolean | null;
@@ -21405,6 +21419,7 @@ export type operations = {
 				template_id?: string | null;
 				model_version_id?: string | null;
 				status?: string | null;
+				in_progress?: boolean | null;
 				start_time?: string | null;
 				end_time?: string | null;
 				unlisted?: boolean | null;