From 57346a7eccc53ab3ff39c1e3ccfc75c604ce2026 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 10 Jul 2024 19:05:47 +0200
Subject: [PATCH] fix(frontend): fix run page ms readability (#4059)

---
 frontend/src/lib/components/DurationMs.svelte |  4 ++--
 .../src/lib/components/runs/RunRow.svelte     |  6 +++---
 frontend/src/lib/utils.ts                     | 20 ++++++++++++++++++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/DurationMs.svelte b/frontend/src/lib/components/DurationMs.svelte
index 844c9974bb..451925c0c6 100644
--- a/frontend/src/lib/components/DurationMs.svelte
+++ b/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}
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index 5b41690035..78875e6bc1 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/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
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 47762de1fd..23c2614feb 100644
--- a/frontend/src/lib/utils.ts
+++ b/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,