Merge pull request '合并' (#214) from dev-zw into dev

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) => {

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

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 '--';
   }