(feature/PRD-383-dates-during-running): Handle end date and duration (#597)

* (feature/PRD-383-dates-during-running): Handle end date and duration

* (feature/PRD-361-artifact-pannel-fixes): docker image and contains code fixed

* (feature/PRD-361-artifact-pannel-fixes): docker image and contains code fixed

* fix: deepscan

* (feature/PRD-383-dates-during-running): Docker image key

* (feature/PRD-383-dates-during-running): Fixed tests

---------

Co-authored-by: Cahllagerfeld <[email protected]>

Author: atzin-escandia

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

@@ -13,6 +13,7 @@ import { CopyButton } from "@/components/CopyButton";
 import { Codesnippet } from "@/components/CodeSnippet";
 import { KeyValue } from "@/components/KeyValue";
 import { BuildItem } from "@/types/pipeline-builds";
+import { extractDockerImageKey } from "@/lib/strings";
 
 type Props = {
 	data: BuildItem;
@@ -41,7 +42,7 @@ export function DockerImageCollapsible({ data }: Props) {
 							<div className="flex justify-between">
 								<Tag className="inline-flex items-center gap-0.5" rounded={false} emphasis="subtle">
 									<Docker className="mr-1 h-4 w-4 fill-theme-text-brand" />
-									{"zenml/my_pipeline:data"}
+									{extractDockerImageKey(data.image)}
 								</Tag>
 								<div className="align-center mr-1 flex">
 									<a

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

@@ -74,11 +74,19 @@ export function Details() {
 					</Value>
 					<Key>Start Time</Key>
 					<Value>
-						<DisplayDate dateString={data.metadata?.start_time || ""} />
+						{data.metadata?.start_time ? (
+							<DisplayDate dateString={data.metadata?.start_time} />
+						) : (
+							"Not available"
+						)}
 					</Value>
 					<Key>End Time</Key>
 					<Value>
-						<DisplayDate dateString={data.metadata?.end_time || ""} />
+						{data.metadata?.end_time ? (
+							<DisplayDate dateString={data.metadata?.end_time} />
+						) : (
+							"Not available"
+						)}
 					</Value>
 				</dl>
 			</CollapsibleContent>

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

@@ -160,11 +160,23 @@ export function StepDetailsTab({ stepId, runId }: Props) {
 				<KeyValue label="Cache key" value={data.metadata?.cache_key || ""} />
 				<KeyValue
 					label="Start Time"
-					value={<DisplayDate dateString={data.metadata?.start_time || ""} />}
+					value={
+						data.metadata?.start_time ? (
+							<DisplayDate dateString={data.metadata?.start_time} />
+						) : (
+							"Not available"
+						)
+					}
 				/>
 				<KeyValue
 					label="End Time"
-					value={<DisplayDate dateString={data.metadata?.end_time || ""} />}
+					value={
+						data.metadata?.end_time ? (
+							<DisplayDate dateString={data.metadata?.end_time} />
+						) : (
+							"Not available"
+						)
+					}
 				/>
 				<KeyValue
 					label="Duration"

src/lib/strings.spec.ts

@@ -1,5 +1,10 @@
 import { describe, expect, test } from "vitest";
-import { snakeCaseToTitleCase } from "./strings";
+import {
+	extractDockerImageKey,
+	renderAnyToString,
+	snakeCaseToTitleCase,
+	transformToEllipsis
+} from "./strings";
 
 describe("snakeCaseToTitleCase converts snake_case to Title Case", () => {
 	const testCases = [
@@ -16,3 +21,70 @@ describe("snakeCaseToTitleCase converts snake_case to Title Case", () => {
 		});
 	});
 });
+
+describe("renderAnyToString converts any value to string", () => {
+	const testCases = [
+		{ value: true, expected: "true", description: "Boolean conversion" },
+		{ value: false, expected: "false", description: "Boolean conversion" },
+		{ value: { key: "value" }, expected: '{"key":"value"}', description: "Object conversion" },
+		{ value: "text", expected: "text", description: "Original value" },
+		{ value: 123, expected: 123, description: "Original value" }
+	];
+
+	testCases.forEach(({ value, expected, description }) => {
+		test(description, () => {
+			expect(renderAnyToString(value)).toBe(expected);
+		});
+	});
+});
+
+describe("transformToEllipsis truncates text to maxLength and adds '...'", () => {
+	const testCases = [
+		{
+			text: "Short text",
+			maxLength: 20,
+			expected: "Short text",
+			description: "Text shorter than maxLength"
+		},
+		{
+			text: "This is a long text",
+			maxLength: 12,
+			expected: "This is a...",
+			description: "Text longer than maxLength"
+		},
+		{
+			text: "Equal length",
+			maxLength: 12,
+			expected: "Equal length",
+			description: "Text equal to maxLength"
+		}
+	];
+
+	testCases.forEach(({ text, maxLength, expected, description }) => {
+		test(description, () => {
+			expect(transformToEllipsis(text, maxLength)).toBe(expected);
+		});
+	});
+});
+
+describe("extractDockerImageKey extracts Docker image key from string", () => {
+	const testCases = [
+		{
+			string: "1.amazonaws.com/zenml:0.57.0",
+			expected: "zenml:0.57.0",
+			description: "String with tag"
+		},
+		{
+			string:
+				"339712793861.dkr.ecr.eu-central-1.amazonaws.com/zenml@sha256:8913beaf69e74a4b5b6cf2ee7c99f34dc6eac26fa967a743e9894a890c46a4e1",
+			expected: "zenml",
+			description: "String without tag"
+		}
+	];
+
+	testCases.forEach(({ string, expected, description }) => {
+		test(description, () => {
+			expect(extractDockerImageKey(string)).toBe(expected);
+		});
+	});
+});

src/lib/strings.ts

@@ -22,3 +22,17 @@ export const transformToEllipsis = (text: string, maxLength: number) => {
 		return text.slice(0, maxLength - 3) + "...";
 	}
 };
+
+export const extractDockerImageKey = (string: string) => {
+	const regex = /\/([^@/:]+)(?:@[^@]*$|:([^@]*$|$))/;
+	const match = regex.exec(string);
+	if (match && match[1]) {
+		if (match[2]) {
+			return `${match[1]}:${match[2]}`;
+		} else {
+			return match[1];
+		}
+	} else {
+		return null;
+	}
+};