fix(frontend): fix run page ms readability (#4059)

frontend/src/lib/components/DurationMs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { msToSec } from '$lib/utils'
+	import { msToReadableTime } from '$lib/utils'
 	import { Badge } from './common'
 	import { Hourglass } from 'lucide-svelte'
 	import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte'
@@ -11,7 +11,7 @@
 
 <div>
 	<Badge large icon={{ icon: Hourglass, position: 'left' }}>
-		Ran in {msToSec(duration_ms)}s
+		Ran in {msToReadableTime(duration_ms)}
 		{#if self_wait_time_ms || aggregate_wait_time_ms}
 			<WaitTimeWarning {self_wait_time_ms} {aggregate_wait_time_ms} variant="alert" />
 		{/if}

frontend/src/lib/components/runs/RunRow.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
 	import type { Job } from '$lib/gen'
-	import { displayDate, msToSec, truncateHash, truncateRev } from '$lib/utils'
+	import { displayDate, msToReadableTime, truncateHash, truncateRev } from '$lib/utils'
 	import { Badge, Button } from '../common'
 	import ScheduleEditor from '../ScheduleEditor.svelte'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
@@ -107,9 +107,9 @@
 				{#if 'started_at' in job && job.started_at}
 					Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
 					{#if job && 'duration_ms' in job && job.duration_ms != undefined}
-						(Ran in {msToSec(
+						(Ran in {msToReadableTime(
 							job.duration_ms
-						)}s{#if job.job_kind == 'flow' || job.job_kind == 'flowpreview'}&nbsp;total{/if})
+						)}{#if job.job_kind == 'flow' || job.job_kind == 'flowpreview'}&nbsp;total{/if})
 					{/if}
 					{#if job && (job.self_wait_time_ms || job.aggregate_wait_time_ms)}
 						<WaitTimeWarning

frontend/src/lib/utils.ts

@@ -113,6 +113,25 @@ export function msToSec(ms: number | undefined, maximumFractionDigits?: number):
 	})
 }
 
+export function msToReadableTime(ms: number | undefined): string {
+	if (ms === undefined) return '?'
+
+	const seconds = Math.floor(ms / 1000)
+	const minutes = Math.floor(seconds / 60)
+	const hours = Math.floor(minutes / 60)
+	const days = Math.floor(hours / 24)
+
+	if (days > 0) {
+		return `${days}d ${hours % 24}h ${minutes % 60}m ${seconds % 60}s`
+	} else if (hours > 0) {
+		return `${hours}h ${minutes % 60}m ${seconds % 60}s`
+	} else if (minutes > 0) {
+		return `${minutes}m ${seconds % 60}s`
+	} else {
+		return `${seconds}s`
+	}
+}
+
 export function getToday() {
 	var today = new Date()
 	return today
@@ -272,7 +291,6 @@ export function itemsExists<T>(arr: T[] | undefined, item: T): boolean {
 	return false
 }
 
-
 export function groupBy<K, V>(
 	items: V[],
 	toGroup: (t: V) => K,