From 02e8c796d3afd1833b5ea7ac62305fc5793560ef Mon Sep 17 00:00:00 2001
From: cp3hnu <cp3hnu@gmail.com>
Date: Wed, 7 May 2025 14:56:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=BF=90=E8=A1=8C=E6=97=B6=E9=95=BF?=
 =?UTF-8?q?=E5=AE=9A=E6=97=B6=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react-ui/src/pages/Experiment/Info/index.jsx  | 17 +++++++++++++++-
 .../components/ExperimentDrawer/index.tsx     | 20 +++++++++++++++++--
 react-ui/src/utils/date.ts                    |  2 +-
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/react-ui/src/pages/Experiment/Info/index.jsx b/react-ui/src/pages/Experiment/Info/index.jsx
index fd795873..7ecaf4ee 100644
--- a/react-ui/src/pages/Experiment/Info/index.jsx
+++ b/react-ui/src/pages/Experiment/Info/index.jsx
@@ -27,6 +27,7 @@ function ExperimentText() {
   const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false);
   const [propsDrawerOpen, openPropsDrawer, closePropsDrawer, propsDrawerOpenRef] =
     useVisible(false);
+  const [currentDate, setCurrentDate] = useState();
   const navigate = useNavigate();
   const evtSourceRef = useRef();
   const width = 110;
@@ -59,6 +60,19 @@ function ExperimentText() {
     };
   }, []);
 
+  // 定时刷新耗时
+  useEffect(() => {
+    if (experimentIns && !experimentIns.finish_time) {
+      const timer = setInterval(() => {
+        setCurrentDate(new Date());
+        console.log('定时刷新');
+      }, 1000);
+      return () => {
+        clearInterval(timer);
+      };
+    }
+  }, [experimentIns]);
+
   // 获取流水线模版
   const getWorkflow = async () => {
     const [res] = await to(getWorkflowById(locationParams.workflowId));
@@ -85,7 +99,8 @@ function ExperimentText() {
     const [res] = await to(getExperimentIns(locationParams.id));
     if (res && res.data && workflowRef.current) {
       setExperimentIns(res.data);
-      const { status, nodes_status, argo_ins_ns, argo_ins_name } = res.data;
+      const { status, nodes_status, argo_ins_ns, argo_ins_name, finish_time } = res.data;
+      setCurrentDate(new Date(finish_time));
       const workflowData = workflowRef.current;
       const experimentStatusObjs = parseJsonText(nodes_status);
       workflowData.nodes.forEach((item) => {
diff --git a/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx
index 3ee726e5..bcb3af1e 100644
--- a/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx
+++ b/react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx
@@ -4,7 +4,7 @@ import { PipelineNodeModelSerialize } from '@/types';
 import { elapsedTime, formatDate } from '@/utils/date';
 import { CloseOutlined, DatabaseOutlined, ProfileOutlined } from '@ant-design/icons';
 import { Drawer, Tabs, Typography } from 'antd';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import ExperimentParameter from '../ExperimentParameter';
 import ExperimentResult from '../ExperimentResult';
 import LogList from '../LogList';
@@ -41,6 +41,22 @@ const ExperimentDrawer = ({
   instanceNodeStartTime,
   instanceNodeEndTime,
 }: ExperimentDrawerProps) => {
+  const [currentDate, setCurrentDate] = useState(
+    instanceNodeEndTime ? new Date(instanceNodeEndTime) : new Date(),
+  );
+
+  // 定时刷新耗时
+  useEffect(() => {
+    if (!instanceNodeEndTime) {
+      const timer = setInterval(() => {
+        setCurrentDate(new Date());
+      }, 1000);
+      return () => {
+        clearInterval(timer);
+      };
+    }
+  }, [instanceNodeEndTime]);
+
   // 如果性能有问题，可以进一步拆解
   const items = useMemo(
     () => [
@@ -142,7 +158,7 @@ const ExperimentDrawer = ({
         </div>
         <div className={styles['experiment-drawer__info']}>
           耗时：
-          {elapsedTime(instanceNodeStartTime, instanceNodeEndTime)}
+          {elapsedTime(instanceNodeStartTime, currentDate)}
         </div>
       </div>
       <Tabs
diff --git a/react-ui/src/utils/date.ts b/react-ui/src/utils/date.ts
index 1bed434d..0089bee4 100644
--- a/react-ui/src/utils/date.ts
+++ b/react-ui/src/utils/date.ts
@@ -7,7 +7,7 @@ import dayjs from 'dayjs';
  * @param {string | null | undefined} end - The ending date.
  * @return {string} The formatted elapsed time string.
  */
-export const elapsedTime = (begin?: string | null, end?: string | null): string => {
+export const elapsedTime = (begin?: string | Date | null, end?: string | Date | null): string => {
   if (begin === undefined || begin === null) {
     return '--';
   }