feat: 定时刷新执行时间

react-ui/src/pages/ActiveLearn/Instance/index.tsx

@@ -35,6 +35,8 @@ function ActiveLearnInstance() {
   const params = useParams();
   const instanceId = safeInvoke(Number)(params.id);
   const evtSourceRef = useRef<EventSource | null>(null);
+  const [currentTime, setCurrentTime] = useState<Date>();
+  const finish_time = workflowStatus?.finishedAt;
 
   useEffect(() => {
     if (instanceId) {
@@ -46,6 +48,20 @@ function ActiveLearnInstance() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [instanceId]);
 
+  // 定时刷新耗时
+  useEffect(() => {
+    if (finish_time) {
+      setCurrentTime(new Date(finish_time));
+    } else {
+      const timer = setInterval(() => {
+        setCurrentTime(new Date());
+      }, 1000);
+      return () => {
+        clearInterval(timer);
+      };
+    }
+  }, [finish_time]);
+
   // 获取实验实例详情
   const getExperimentInsInfo = async (isStatusDetermined: boolean) => {
     const [res] = await to(getActiveLearnInsReq(instanceId));
@@ -153,6 +169,7 @@ function ActiveLearnInstance() {
           className={styles['active-learn-instance__basic']}
           info={experimentInfo}
           runStatus={workflowStatus}
+          finishTime={currentTime}
           isInstance
         />
       ),

react-ui/src/pages/ActiveLearn/components/ActiveLearnBasic/index.tsx

@@ -31,9 +31,10 @@ type BasicInfoProps = {
   className?: string;
   isInstance?: boolean;
   runStatus?: NodeStatus;
+  finishTime?: Date;
 };
 
-function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfoProps) {
+function BasicInfo({ info, className, runStatus, finishTime, isInstance = false }: BasicInfoProps) {
   const getResourceDescription = useComputingResource()[1];
   const basicDatas: BasicInfoData[] = useMemo(() => {
     if (!info) {
@@ -218,7 +219,7 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo
       },
       {
         label: '执行时长',
-        value: elapsedTime(info.create_time, runStatus.finishedAt),
+        value: elapsedTime(info.create_time, finishTime),
         ellipsis: true,
       },
       {
@@ -245,7 +246,7 @@ function BasicInfo({ info, className, runStatus, isInstance = false }: BasicInfo
         ellipsis: true,
       },
     ];
-  }, [runStatus, info]);
+  }, [runStatus, info, finishTime]);
 
   return (
     <div className={classNames(styles['active-learn-basic'], className)}>

react-ui/src/pages/AutoML/Instance/index.tsx

@@ -35,6 +35,8 @@ function AutoMLInstance() {
   const params = useParams();
   const instanceId = safeInvoke(Number)(params.id);
   const evtSourceRef = useRef<EventSource | null>(null);
+  const [currentTime, setCurrentTime] = useState<Date>();
+  const finish_time = workflowStatus?.finishedAt;
 
   useEffect(() => {
     if (instanceId) {
@@ -46,6 +48,20 @@ function AutoMLInstance() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [instanceId]);
 
+  // 定时刷新耗时
+  useEffect(() => {
+    if (finish_time) {
+      setCurrentTime(new Date(finish_time));
+    } else {
+      const timer = setInterval(() => {
+        setCurrentTime(new Date());
+      }, 1000);
+      return () => {
+        clearInterval(timer);
+      };
+    }
+  }, [finish_time]);
+
   // 获取实验实例详情
   const getExperimentInsInfo = async (isStatusDetermined: boolean) => {
     const [res] = await to(getExperimentInsReq(instanceId));
@@ -156,6 +172,7 @@ function AutoMLInstance() {
           className={styles['auto-ml-instance__basic']}
           info={autoMLInfo}
           runStatus={workflowStatus}
+          finishTime={currentTime}
           isInstance
         />
       ),

react-ui/src/pages/AutoML/components/AutoMLBasic/index.tsx

@@ -40,9 +40,16 @@ type AutoMLBasicProps = {
   className?: string;
   isInstance?: boolean;
   runStatus?: NodeStatus;
+  finishTime?: Date;
 };
 
-function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLBasicProps) {
+function AutoMLBasic({
+  info,
+  className,
+  runStatus,
+  finishTime,
+  isInstance = false,
+}: AutoMLBasicProps) {
   const getResourceDescription = useComputingResource()[1];
   const basicDatas: BasicInfoData[] = useMemo(() => {
     if (!info) {
@@ -296,7 +303,7 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB
       },
       {
         label: '执行时长',
-        value: elapsedTime(info.create_time, runStatus.finishedAt),
+        value: elapsedTime(info.create_time, finishTime),
       },
       {
         label: '状态',
@@ -321,7 +328,7 @@ function AutoMLBasic({ info, className, runStatus, isInstance = false }: AutoMLB
         ),
       },
     ];
-  }, [runStatus, info]);
+  }, [runStatus, info, finishTime]);
 
   return (
     <div className={classNames(styles['auto-ml-basic'], className)}>

react-ui/src/pages/Experiment/Info/index.jsx

@@ -27,11 +27,12 @@ function ExperimentText() {
   const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false);
   const [propsDrawerOpen, openPropsDrawer, closePropsDrawer, propsDrawerOpenRef] =
     useVisible(false);
-  const [currentDate, setCurrentDate] = useState();
+  const [currentTime, setCurrentTime] = useState();
   const navigate = useNavigate();
   const evtSourceRef = useRef();
   const width = 110;
   const height = 36;
+  const finish_time = experimentIns?.finish_time
 
   useEffect(() => {
     initGraph();
@@ -62,16 +63,17 @@ function ExperimentText() {
 
   // 定时刷新耗时
   useEffect(() => {
-    if (experimentIns && !experimentIns.finish_time) {
+    if (finish_time) {
+      setCurrentTime(new Date(finish_time));
+    } else {
       const timer = setInterval(() => {
-        setCurrentDate(new Date());
-        console.log('定时刷新');
+        setCurrentTime(new Date());
       }, 1000);
       return () => {
         clearInterval(timer);
       };
     }
-  }, [experimentIns]);
+  }, [finish_time]);
 
   // 获取流水线模版
   const getWorkflow = async () => {
@@ -100,7 +102,6 @@ function ExperimentText() {
     if (res && res.data && workflowRef.current) {
       setExperimentIns(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) => {
@@ -489,7 +490,7 @@ function ExperimentText() {
         </div>
         <div className={styles['pipeline-container__top__info']}>
           执行时长：
-          {elapsedTime(experimentIns?.create_time, experimentIns?.finish_time)}
+          {elapsedTime(experimentIns?.create_time, currentTime)}
         </div>
         <div className={styles['pipeline-container__top__info']}>
           状态：

react-ui/src/pages/Experiment/components/ExperimentDrawer/index.tsx

@@ -41,15 +41,17 @@ const ExperimentDrawer = ({
   instanceNodeStartTime,
   instanceNodeEndTime,
 }: ExperimentDrawerProps) => {
-  const [currentDate, setCurrentDate] = useState(
+  const [currentTime, setCurrentTime] = useState(
     instanceNodeEndTime ? new Date(instanceNodeEndTime) : new Date(),
   );
 
   // 定时刷新耗时
   useEffect(() => {
-    if (!instanceNodeEndTime) {
+    if (instanceNodeEndTime) {
+      setCurrentTime(new Date(instanceNodeEndTime));
+    } else {
       const timer = setInterval(() => {
-        setCurrentDate(new Date());
+        setCurrentTime(new Date());
       }, 1000);
       return () => {
         clearInterval(timer);
@@ -158,7 +160,7 @@ const ExperimentDrawer = ({
         </div>
         <div className={styles['experiment-drawer__info']}>
           耗时：
-          {elapsedTime(instanceNodeStartTime, currentDate)}
+          {elapsedTime(instanceNodeStartTime, currentTime)}
         </div>
       </div>
       <Tabs

react-ui/src/pages/HyperParameter/Instance/index.tsx

@@ -35,6 +35,8 @@ function HyperParameterInstance() {
   const params = useParams();
   const instanceId = safeInvoke(Number)(params.id);
   const evtSourceRef = useRef<EventSource | null>(null);
+  const [currentTime, setCurrentTime] = useState<Date>();
+  const finish_time = workflowStatus?.finishedAt;
 
   useEffect(() => {
     if (instanceId) {
@@ -46,6 +48,20 @@ function HyperParameterInstance() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [instanceId]);
 
+  // 定时刷新耗时
+  useEffect(() => {
+    if (finish_time) {
+      setCurrentTime(new Date(finish_time));
+    } else {
+      const timer = setInterval(() => {
+        setCurrentTime(new Date());
+      }, 1000);
+      return () => {
+        clearInterval(timer);
+      };
+    }
+  }, [finish_time]);
+
   // 获取实验实例详情
   const getExperimentInsInfo = async (isStatusDetermined: boolean) => {
     const [res] = await to(getRayInsReq(instanceId));
@@ -168,6 +184,7 @@ function HyperParameterInstance() {
           className={styles['hyper-parameter-instance__basic']}
           info={experimentInfo}
           runStatus={workflowStatus}
+          finishTime={currentTime}
           isInstance
         />
       ),

react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx

@@ -33,12 +33,14 @@ type HyperParameterBasicProps = {
   className?: string;
   isInstance?: boolean;
   runStatus?: NodeStatus;
+  finishTime?: Date;
 };
 
 function HyperParameterBasic({
   info,
   className,
   runStatus,
+  finishTime,
   isInstance = false,
 }: HyperParameterBasicProps) {
   const getResourceDescription = useComputingResource()[1];
@@ -155,7 +157,7 @@ function HyperParameterBasic({
       },
       {
         label: '执行时长',
-        value: elapsedTime(info.create_time, runStatus.finishedAt),
+        value: elapsedTime(info.create_time, finishTime),
         ellipsis: true,
       },
       {
@@ -182,7 +184,7 @@ function HyperParameterBasic({
         ellipsis: true,
       },
     ];
-  }, [runStatus, info]);
+  }, [runStatus, info, finishTime]);
 
   return (
     <div className={classNames(styles['hyper-parameter-basic'], className)}>

react-ui/src/utils/index.ts

@@ -6,6 +6,7 @@
 
 import { PageEnum } from '@/enums/pagesEnums';
 import G6 from '@antv/g6';
+import { number } from 'echarts';
 
 /**
  * 生成 8 位随机数
@@ -346,3 +347,13 @@ export const trimCharacter = (str: string, ch: string): string => {
 export const convertEmptyStringToUndefined = (value?: string): string | undefined => {
   return value === '' ? undefined : value;
 };
+
+
+export const formatNumber = (value?: number | null, toFixed?: number) : number | string => {
+  if (typeof value !== "number") {
+    return '--'
+  }
+
+  return toFixed ? Number(value).toFixed(toFixed) : value
+}
+