From 6e9c4a827d45cbf6c5dcc2e60db668af41c4133f Mon Sep 17 00:00:00 2001
From: Shrushti Polekar <shrushtipolekar@gmail.com>
Date: Tue, 29 Apr 2025 10:55:59 +0530
Subject: [PATCH] Update formatting for duration in application configuration
 (#20987)

* update formatting for duration in application configuration

* fix unit test case

* address pr comment
---
 .../AppRunsHistory/AppRunsHistory.component.tsx             | 6 +++---
 .../Applications/AppRunsHistory/AppRunsHistory.test.tsx     | 4 ++++
 .../main/resources/ui/src/utils/date-time/DateTimeUtils.ts  | 3 +++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppRunsHistory/AppRunsHistory.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppRunsHistory/AppRunsHistory.component.tsx
index f827dbd82ba..943689cd92b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppRunsHistory/AppRunsHistory.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppRunsHistory/AppRunsHistory.component.tsx
@@ -45,7 +45,7 @@ import { getApplicationRuns } from '../../../../rest/applicationAPI';
 import { getStatusTypeForApplication } from '../../../../utils/ApplicationUtils';
 import {
   formatDateTime,
-  formatDuration,
+  formatDurationToHHMMSS,
   getEpochMillisForPastDays,
   getIntervalInMilliseconds,
 } from '../../../../utils/date-time/DateTimeUtils';
@@ -220,14 +220,14 @@ const AppRunsHistory = forwardRef(
           key: 'executionTime',
           render: (_, record: AppRunRecordWithId) => {
             if (isExternalApp && record.executionTime) {
-              return formatDuration(record.executionTime);
+              return formatDurationToHHMMSS(record.executionTime);
             }
 
             if (record.startTime) {
               const endTime = record.endTime || Date.now(); // Use current time in epoch milliseconds if endTime is not present
               const ms = getIntervalInMilliseconds(record.startTime, endTime);
 
-              return formatDuration(ms);
+              return formatDurationToHHMMSS(ms);
             } else {
               return NO_DATA_PLACEHOLDER;
             }
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppRunsHistory/AppRunsHistory.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppRunsHistory/AppRunsHistory.test.tsx
index 74941a1fc86..6fc91ad5596 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppRunsHistory/AppRunsHistory.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Applications/AppRunsHistory/AppRunsHistory.test.tsx
@@ -107,6 +107,10 @@ jest.mock('../../../../utils/date-time/DateTimeUtils', () => ({
   getEpochMillisForPastDays: jest.fn().mockReturnValue('startDay'),
   getIntervalInMilliseconds: jest.fn().mockReturnValue('interval'),
   formatDuration: jest.fn().mockReturnValue('formatDuration'),
+  formatDurationToHHMMSS: jest.fn().mockImplementation((_ms) => {
+    // Return a consistent formatted duration for all cases
+    return '02:30:15';
+  }),
 }));
 
 jest.mock('../../../common/ErrorWithPlaceholder/ErrorPlaceHolder', () =>
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/date-time/DateTimeUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/date-time/DateTimeUtils.ts
index 585c2760b59..434c309b508 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/date-time/DateTimeUtils.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/date-time/DateTimeUtils.ts
@@ -309,6 +309,9 @@ export const formatDuration = (ms: number) => {
     return pluralize(hours, 'hour');
   }
 };
+export const formatDurationToHHMMSS = (ms: number) => {
+  return Duration.fromMillis(ms).toFormat('hh:mm:ss');
+};
 
 export const getStartOfDayInMillis = (timestamp: number) =>
   DateTime.fromMillis(timestamp).toUTC().startOf('day').toMillis();