(incubator-devlake) branch main updated: feat: improve the pipeline duration display (#8071)

[klesh]

This is an automated email from the ASF dual-hosted git repository.

klesh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git


The following commit(s) were added to refs/heads/main by this push:
     new 3ad9839fa feat: improve the pipeline duration display (#8071)
3ad9839fa is described below

commit 3ad9839fae4ffdc06d154b327807b8905db5b3d9
Author: 青湛 <0x1304...@gmail.com>
AuthorDate: Thu Sep 19 20:53:29 2024 +1200

    feat: improve the pipeline duration display (#8071)
---
 .../src/routes/pipeline/components/duration.tsx    | 26 ++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/config-ui/src/routes/pipeline/components/duration.tsx 
b/config-ui/src/routes/pipeline/components/duration.tsx
index 7558f9fb3..67ea9e290 100644
--- a/config-ui/src/routes/pipeline/components/duration.tsx
+++ b/config-ui/src/routes/pipeline/components/duration.tsx
@@ -20,6 +20,28 @@ import dayjs from 'dayjs';
 
 import { IPipelineStatus } from '@/types';
 
+const duration = (minute: number) => {
+  if (minute < 1) {
+    return '1m';
+  }
+
+  if (minute < 60) {
+    return `${Math.ceil(minute / 60)}m`;
+  }
+
+  if (minute < 60 * 24) {
+    const hours = Math.floor(minute / 60);
+    const minutes = minute - hours * 60;
+    return `${hours}h${minutes}m`;
+  }
+
+  const days = Math.floor(minute / (60 * 24));
+  const hours = Math.floor((minute - days * 60 * 24) / 60);
+  const minutes = minute - days * 60 * 24 - hours * 60;
+
+  return `${days}d${hours}h${minutes}m`;
+};
+
 interface Props {
   status: IPipelineStatus;
   beganAt: string | null;
@@ -36,12 +58,12 @@ export const PipelineDuration = ({ status, beganAt, 
finishedAt }: Props) => {
       status,
     )
   ) {
-    return <span>{dayjs(beganAt).toNow(true)}</span>;
+    return <span>{duration(dayjs(beganAt).diff(dayjs(), 'm'))}</span>;
   }
 
   if (!finishedAt) {
     return <span>-</span>;
   }
 
-  return <span>{dayjs(beganAt).from(finishedAt, true)}</span>;
+  return <span>{duration(dayjs(beganAt).diff(dayjs(finishedAt), 'm'))}</span>;
 };