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

react-ui/package.json

@@ -32,7 +32,7 @@
     "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
     "serve": "umi-serve",
     "start": "cross-env UMI_ENV=dev max dev",
-    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
+    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev UMI_DEV_SERVER_COMPRESS=none max dev",
     "start:mock": "cross-env REACT_APP_ENV=dev UMI_ENV=dev max dev",
     "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
     "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",

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

@@ -10,10 +10,10 @@ import G6, { Util } from '@antv/g6';
 import { Button } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import ExperimentDrawer from '../components/ExperimentDrawer';
 import ParamsModal from '../components/ViewParamsModal';
 import { experimentStatusInfo } from '../status';
 import styles from './index.less';
-import ExperimentDrawer from './props';
 
 let graph = null;
 
@@ -28,6 +28,7 @@ function ExperimentText() {
   const [propsDrawerOpen, openPropsDrawer, closePropsDrawer, propsDrawerOpenRef] =
     useVisible(false);
   const navigate = useNavigate();
+  const evtSourceRef = useRef();
   const width = 110;
   const height = 36;
 
@@ -48,6 +49,10 @@ function ExperimentText() {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
+      if (evtSourceRef.current) {
+        evtSourceRef.current.close();
+        evtSourceRef.current = null;
+      }
     };
   }, []);
 
@@ -68,7 +73,7 @@ function ExperimentText() {
           item.imgName = item.img.slice(0, item.img.length - 4);
         });
         workflowRef.current = dag;
-        getExperimentInstance(true);
+        getExperimentInstance();
       } catch (error) {
         // JSON.parse 错误
         console.log(error);
@@ -77,48 +82,30 @@ function ExperimentText() {
   };
 
   // 获取实验实例
-  const getExperimentInstance = async (first) => {
+  const getExperimentInstance = async () => {
     const [res] = await to(getExperimentIns(locationParams.id));
     if (res && res.data && workflowRef.current) {
       setExperimentIns(res.data);
-      const { status, nodes_status } = res.data;
+      const { status, nodes_status, argo_ins_ns, argo_ins_name } = res.data;
       const workflowData = workflowRef.current;
       const experimentStatusObjs = JSON.parse(nodes_status);
       workflowData.nodes.forEach((item) => {
-        const experimentNode = experimentStatusObjs?.[item.id] ?? {};
-        const { finishedAt, startedAt, phase, id } = experimentNode;
-        item.experimentStartTime = startedAt;
-        item.experimentEndTime = finishedAt;
-        item.experimentStatus = phase;
-        item.workflowId = id;
-        item.img = phase ? `${item.imgName}-${phase}.png` : `${item.imgName}.png`;
+        const experimentNode = experimentStatusObjs?.[item.id];
+        updateWorkflowNode(item, experimentNode);
       });
 
-      // 更新打开的抽屉数据
-      if (propsDrawerOpenRef.current && experimentNodeDataRef.current) {
-        const currentId = experimentNodeDataRef.current.id;
-        const node = workflowData.nodes.find((item) => item.id === currentId);
-        if (node) {
-          setExperimentNodeData(node);
-        }
-      }
-
-      getGraphData(workflowData, first);
-
-      // 运行中或者等待中，每5秒获取一次实验实例
-      if (status === ExperimentStatus.Pending || status === ExperimentStatus.Running) {
-        timerRef.current = setTimeout(() => {
-          getExperimentInstance(false);
-        }, 5 * 1000);
-      }
+      // 绘制图
+      getGraphData(workflowData, true);
 
-      if (first && status === ExperimentStatus.Pending) {
+      // 如果状态是 Pending, 打开第一个节点
+      // 如果状态是 Running，打开第一个运行中的节点，如果没有运行中的节点，打开第一个节点
+      if (status === ExperimentStatus.Pending) {
         const node = workflowData.nodes[0];
         if (node) {
           setExperimentNodeData(node);
           openPropsDrawer();
         }
-      } else if (first && status === ExperimentStatus.Running) {
+      } else if (status === ExperimentStatus.Running) {
         const node =
           workflowData.nodes.find((item) => item.experimentStatus === ExperimentStatus.Running) ??
           workflowData.nodes[0];
@@ -127,9 +114,83 @@ function ExperimentText() {
           openPropsDrawer();
         }
       }
+
+      // 运行中或者等待中，开启 SSE
+      if (status === ExperimentStatus.Pending || status === ExperimentStatus.Running) {
+        setupSSE(argo_ins_name, argo_ins_ns);
+      }
     }
   };
 
+  const setupSSE = (name, namespace) => {
+    const { origin } = location;
+    const params = encodeURIComponent(`metadata.namespace=${namespace},metadata.name=${name}`);
+    const evtSource = new EventSource(
+      `${origin}/api/v1/realtimeStatus?listOptions.fieldSelector=${params}`,
+      { withCredentials: false },
+    );
+    evtSource.onmessage = (event) => {
+      const data = event?.data;
+      if (!data) {
+        return;
+      }
+      try {
+        const dataJson = JSON.parse(data);
+        const statusData = dataJson?.result?.object?.status;
+        if (!statusData) {
+          return;
+        }
+        const { startedAt, finishedAt, phase, nodes = {} } = statusData;
+        setExperimentIns((prev) => ({
+          ...prev,
+          finish_time: finishedAt,
+          status: phase,
+        }));
+
+        const workflowData = workflowRef.current;
+        workflowData.nodes.forEach((item) => {
+          const experimentNode = Object.values(nodes).find((node) => node.displayName === item.id);
+          updateWorkflowNode(item, experimentNode);
+        });
+        getGraphData(workflowData, false);
+
+        // 更新打开的抽屉数据
+        if (propsDrawerOpenRef.current && experimentNodeDataRef.current) {
+          const currentId = experimentNodeDataRef.current.id;
+          const node = workflowData.nodes.find((item) => item.id === currentId);
+          if (node) {
+            setExperimentNodeData(node);
+          }
+        }
+        if (phase !== ExperimentStatus.Pending && phase !== ExperimentStatus.Running) {
+          evtSource.close();
+          evtSourceRef.current = null;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    };
+    evtSource.onerror = (error) => {
+      console.log('sse error', error);
+    };
+
+    evtSourceRef.current = evtSource;
+  };
+
+  function updateWorkflowNode(workflowNode, statusNode) {
+    if (!statusNode) {
+      return;
+    }
+    const { finishedAt, startedAt, phase, id } = statusNode;
+    workflowNode.experimentStartTime = startedAt;
+    workflowNode.experimentEndTime = finishedAt;
+    workflowNode.experimentStatus = phase;
+    workflowNode.workflowId = id;
+    workflowNode.img = phase
+      ? `${workflowNode.imgName}-${phase}.png`
+      : `${workflowNode.imgName}.png`;
+  }
+
   // 根据数据，渲染图
   const getGraphData = (data, first) => {
     if (graph) {
@@ -149,7 +210,7 @@ function ExperimentText() {
       }
     } else {
       setTimeout(() => {
-        getGraphData(data);
+        getGraphData(data, first);
       }, 500);
     }
   };
@@ -390,6 +451,10 @@ function ExperimentText() {
     graph.on('node:mouseleave', (e) => {
       graph.setItemState(e.item, 'hover', false);
     });
+    graph.on('canvas:click', (e) => {
+      setExperimentNodeData(null);
+      closePropsDrawer();
+    });
   };
 
   return (
@@ -425,18 +490,19 @@ function ExperimentText() {
         </Button>
       </div>
       <div className={styles['pipeline-container__graph']} ref={graphRef}></div>
-      {experimentNodeData ? (
+      {experimentIns && experimentNodeData ? (
         <ExperimentDrawer
+          key={experimentNodeData.id}
           open={propsDrawerOpen}
           onClose={closePropsDrawer}
-          instanceId={experimentIns?.id}
-          instanceName={experimentIns?.argo_ins_name}
-          instanceNamespace={experimentIns?.argo_ins_ns}
+          instanceId={experimentIns.id}
+          instanceName={experimentIns.argo_ins_name}
+          instanceNamespace={experimentIns.argo_ins_ns}
           instanceNodeData={experimentNodeData}
           workflowId={experimentNodeData.workflowId}
           instanceNodeStatus={experimentNodeData.experimentStatus}
           instanceNodeStartTime={experimentNodeData.experimentStartTime}
-          instanceNodeEndTime={experimentIns.experimentEndTime}
+          instanceNodeEndTime={experimentNodeData.experimentEndTime}
         ></ExperimentDrawer>
       ) : null}
       <ParamsModal

react-ui/src/pages/Experiment/Info/props.tsx

@@ -1,146 +0,0 @@
-import { ExperimentStatus } from '@/enums';
-import { PipelineNodeModelSerialize } from '@/types';
-import { elapsedTime, formatDate } from '@/utils/date';
-import { DatabaseOutlined, ProfileOutlined } from '@ant-design/icons';
-import { Drawer, Tabs } from 'antd';
-import { forwardRef, useImperativeHandle, useMemo } from 'react';
-import ExperimentParameter from '../components/ExperimentParameter';
-import ExperimentResult from '../components/ExperimentResult';
-import LogList from '../components/LogList';
-import { experimentStatusInfo } from '../status';
-import styles from './props.less';
-
-export type ExperimentLog = {
-  log_type: 'normal' | 'resource'; // 日志类型
-  pod_name?: string; // 分布式名称
-  log_content?: string; // 日志内容
-  start_time?: string; // 日志开始时间
-};
-
-type ExperimentDrawerProps = {
-  open: boolean;
-  onClose: () => void;
-  instanceId?: number; // 实验实例 id
-  instanceName?: string; // 实验实例 name
-  instanceNamespace?: string; // 实验实例 namespace
-  instanceNodeData: PipelineNodeModelSerialize; // 节点数据，在定时刷新实验实例状态中不会变化
-  workflowId?: string; // 实验实例工作流 id
-  instanceNodeStatus?: ExperimentStatus; // 在定时刷新实验实例状态中，变化一两次
-  instanceNodeStartTime?: string; // 在定时刷新实验实例状态中，变化一两次
-  instanceNodeEndTime?: string; // 在定时刷新实验实例状态中，会经常变化
-};
-
-const ExperimentDrawer = forwardRef(
-  (
-    {
-      open,
-      onClose,
-      instanceId,
-      instanceName,
-      instanceNamespace,
-      instanceNodeData,
-      workflowId,
-      instanceNodeStatus,
-      instanceNodeStartTime,
-      instanceNodeEndTime,
-    }: ExperimentDrawerProps,
-    ref,
-  ) => {
-    useImperativeHandle(ref, () => ({}));
-
-    // 如果性能有问题，可以进一步拆解
-    const items = useMemo(
-      () => [
-        {
-          key: '1',
-          label: '日志详情',
-          children: (
-            <LogList
-              instanceName={instanceName}
-              instanceNamespace={instanceNamespace}
-              pipelineNodeId={instanceNodeData.id}
-              workflowId={workflowId}
-              instanceNodeStartTime={instanceNodeStartTime}
-              instanceNodeStatus={instanceNodeStatus}
-            ></LogList>
-          ),
-          icon: <ProfileOutlined />,
-        },
-        {
-          key: '2',
-          label: '配置参数',
-          icon: <DatabaseOutlined />,
-          children: <ExperimentParameter nodeData={instanceNodeData} />,
-        },
-        {
-          key: '3',
-          label: '输出结果',
-          children: (
-            <ExperimentResult
-              experimentInsId={instanceId}
-              pipelineNodeId={instanceNodeData.id}
-            ></ExperimentResult>
-          ),
-          icon: <ProfileOutlined />,
-        },
-      ],
-      [
-        instanceNodeData,
-        instanceId,
-        instanceName,
-        instanceNamespace,
-        instanceNodeStatus,
-        workflowId,
-        instanceNodeStartTime,
-      ],
-    );
-
-    return (
-      <Drawer
-        title="任务执行详情"
-        placement="right"
-        getContainer={false}
-        closeIcon={false}
-        onClose={onClose}
-        open={open}
-        width={520}
-        className={styles['experiment-drawer']}
-        destroyOnClose={true}
-      >
-        <div style={{ paddingTop: '15px' }}>
-          <div className={styles['experiment-drawer__info']}>
-            任务名称：{instanceNodeData.label}
-          </div>
-          <div className={styles['experiment-drawer__info']}>
-            执行状态：
-            {instanceNodeStatus ? (
-              <>
-                <div
-                  className={styles['experiment-drawer__status-dot']}
-                  style={{
-                    backgroundColor: experimentStatusInfo[instanceNodeStatus]?.color,
-                  }}
-                ></div>
-                <span style={{ color: experimentStatusInfo[instanceNodeStatus]?.color }}>
-                  {experimentStatusInfo[instanceNodeStatus]?.label}
-                </span>
-              </>
-            ) : (
-              '--'
-            )}
-          </div>
-          <div className={styles['experiment-drawer__info']}>
-            启动时间：{formatDate(instanceNodeStartTime)}
-          </div>
-          <div className={styles['experiment-drawer__info']}>
-            耗时：
-            {elapsedTime(instanceNodeStartTime, instanceNodeEndTime)}
-          </div>
-        </div>
-        <Tabs defaultActiveKey="1" items={items} className={styles['experiment-drawer__tabs']} />
-      </Drawer>
-    );
-  },
-);
-
-export default ExperimentDrawer;

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

@@ -0,0 +1,131 @@
+import { ExperimentStatus } from '@/enums';
+import { experimentStatusInfo } from '@/pages/Experiment/status';
+import { PipelineNodeModelSerialize } from '@/types';
+import { elapsedTime, formatDate } from '@/utils/date';
+import { DatabaseOutlined, ProfileOutlined } from '@ant-design/icons';
+import { Drawer, Tabs } from 'antd';
+import { useMemo } from 'react';
+import ExperimentParameter from '../ExperimentParameter';
+import ExperimentResult from '../ExperimentResult';
+import LogList from '../LogList';
+import styles from './index.less';
+
+type ExperimentDrawerProps = {
+  open: boolean;
+  onClose: () => void;
+  instanceId: number; // 实验实例 id
+  instanceName: string; // 实验实例 name
+  instanceNamespace: string; // 实验实例 namespace
+  instanceNodeData: PipelineNodeModelSerialize; // 节点数据，在定时刷新实验实例状态中不会变化
+  workflowId?: string; // 实验实例工作流 id
+  instanceNodeStatus?: ExperimentStatus; // 实例节点状态
+  instanceNodeStartTime?: string; // 开始时间
+  instanceNodeEndTime?: string; // 在定时刷新实验实例状态中，会经常变化
+};
+
+const ExperimentDrawer = ({
+  open,
+  onClose,
+  instanceId,
+  instanceName,
+  instanceNamespace,
+  instanceNodeData,
+  workflowId,
+  instanceNodeStatus,
+  instanceNodeStartTime,
+  instanceNodeEndTime,
+}: ExperimentDrawerProps) => {
+  // 如果性能有问题，可以进一步拆解
+  const items = useMemo(
+    () => [
+      {
+        key: '1',
+        label: '日志详情',
+        children: (
+          <LogList
+            instanceName={instanceName}
+            instanceNamespace={instanceNamespace}
+            pipelineNodeId={instanceNodeData.id}
+            workflowId={workflowId}
+            instanceNodeStartTime={instanceNodeStartTime}
+            instanceNodeStatus={instanceNodeStatus}
+          ></LogList>
+        ),
+        icon: <ProfileOutlined />,
+      },
+      {
+        key: '2',
+        label: '配置参数',
+        icon: <DatabaseOutlined />,
+        children: <ExperimentParameter nodeData={instanceNodeData} />,
+      },
+      {
+        key: '3',
+        label: '输出结果',
+        children: (
+          <ExperimentResult
+            experimentInsId={instanceId}
+            pipelineNodeId={instanceNodeData.id}
+          ></ExperimentResult>
+        ),
+        icon: <ProfileOutlined />,
+      },
+    ],
+    [
+      instanceNodeData,
+      instanceId,
+      instanceName,
+      instanceNamespace,
+      instanceNodeStatus,
+      workflowId,
+      instanceNodeStartTime,
+    ],
+  );
+
+  return (
+    <Drawer
+      title="任务执行详情"
+      placement="right"
+      getContainer={false}
+      closeIcon={false}
+      onClose={onClose}
+      open={open}
+      width={520}
+      className={styles['experiment-drawer']}
+      destroyOnClose={true}
+      mask={false}
+    >
+      <div style={{ paddingTop: '15px' }}>
+        <div className={styles['experiment-drawer__info']}>任务名称：{instanceNodeData.label}</div>
+        <div className={styles['experiment-drawer__info']}>
+          执行状态：
+          {instanceNodeStatus ? (
+            <>
+              <div
+                className={styles['experiment-drawer__status-dot']}
+                style={{
+                  backgroundColor: experimentStatusInfo[instanceNodeStatus]?.color,
+                }}
+              ></div>
+              <span style={{ color: experimentStatusInfo[instanceNodeStatus]?.color }}>
+                {experimentStatusInfo[instanceNodeStatus]?.label}
+              </span>
+            </>
+          ) : (
+            '--'
+          )}
+        </div>
+        <div className={styles['experiment-drawer__info']}>
+          启动时间：{formatDate(instanceNodeStartTime)}
+        </div>
+        <div className={styles['experiment-drawer__info']}>
+          耗时：
+          {elapsedTime(instanceNodeStartTime, instanceNodeEndTime)}
+        </div>
+      </div>
+      <Tabs defaultActiveKey="1" items={items} className={styles['experiment-drawer__tabs']} />
+    </Drawer>
+  );
+};
+
+export default ExperimentDrawer;

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

@@ -8,8 +8,8 @@ import ExportModelModal from '../ExportModelModal';
 import styles from './index.less';
 
 type ExperimentResultProps = {
-  experimentInsId?: number; // 实验实例 id
-  pipelineNodeId?: string; // 流水线节点 id
+  experimentInsId: number; // 实验实例 id
+  pipelineNodeId: string; // 流水线节点 id
 };
 
 type ExperimentResultData = {

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

@@ -6,12 +6,13 @@
 
 import { ExperimentStatus } from '@/enums';
 import { useStateRef } from '@/hooks';
-import { ExperimentLog } from '@/pages/Experiment/Info/props';
 import { getExperimentPodsLog } from '@/services/experiment/index.js';
 import { DoubleRightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import classNames from 'classnames';
+import dayjs from 'dayjs';
 import { useEffect, useRef, useState } from 'react';
+import { ExperimentLog } from '../LogList';
 import styles from './index.less';
 
 export type LogGroupProps = ExperimentLog & {
@@ -21,6 +22,7 @@ export type LogGroupProps = ExperimentLog & {
 type Log = {
   start_time: string; // 日志开始时间
   log_content: string; // 日志内容
+  pod_name: string; // pod名称
 };
 
 // 滚动到底部
@@ -49,44 +51,33 @@ function LogGroup({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_isMouseDown, setIsMouseDown, isMouseDownRef] = useStateRef(false);
   const preStatusRef = useRef<ExperimentStatus | undefined>(undefined);
+  const socketRef = useRef<WebSocket | undefined>(undefined);
+  const retryRef = useRef(2);
 
   useEffect(() => {
     scrollToBottom(false);
-    let timerId: NodeJS.Timeout | undefined;
     if (status === ExperimentStatus.Running) {
-      timerId = setInterval(() => {
-        requestExperimentPodsLog();
-      }, 5 * 1000);
+      setupSockect();
     } else if (preStatusRef.current === ExperimentStatus.Running) {
-      requestExperimentPodsLog();
-      setTimeout(() => {
-        requestExperimentPodsLog();
-      }, 5 * 1000);
+      setCompleted(true);
     }
     preStatusRef.current = status;
-    return () => {
-      if (timerId) {
-        clearInterval(timerId);
-        timerId = undefined;
-      }
-    };
   }, [status]);
 
+  // 鼠标拖到中不滚动到底部
   useEffect(() => {
     const mouseDown = () => {
       setIsMouseDown(true);
     };
-
     const mouseUp = () => {
       setIsMouseDown(false);
     };
-
     document.addEventListener('mousedown', mouseDown);
     document.addEventListener('mouseup', mouseUp);
-
     return () => {
       document.removeEventListener('mousedown', mouseDown);
       document.removeEventListener('mouseup', mouseUp);
+      closeSocket();
     };
   }, []);
 
@@ -140,6 +131,85 @@ function LogGroup({
     requestExperimentPodsLog();
   };
 
+  // 建立 socket 连接
+  const setupSockect = () => {
+    let { host } = location;
+    console.log('setupSockect');
+
+    if (process.env.NODE_ENV === 'development') {
+      host = '172.20.32.181:31213';
+    }
+    const socket = new WebSocket(
+      `ws://${host}/newlog/realtimeLog?start=${start_time}&query={pod="${pod_name}"}`,
+    );
+
+    socket.addEventListener('open', () => {
+      console.log('WebSocket is open now.');
+    });
+
+    socket.addEventListener('close', (event) => {
+      console.log('WebSocket is closed:', event);
+      if (event.code !== 1000 && retryRef.current > 0) {
+        retryRef.current -= 1;
+        setTimeout(() => {
+          setupSockect();
+        }, 2 * 1000);
+      }
+    });
+
+    socket.addEventListener('error', (event) => {
+      console.error('WebSocket error observed:', event);
+    });
+
+    socket.addEventListener('message', (event) => {
+      if (!event.data) {
+        return;
+      }
+      try {
+        const data = JSON.parse(event.data);
+        const streams = data.streams;
+        if (!streams || !Array.isArray(streams)) {
+          return;
+        }
+        let startTime = start_time;
+        const logContent = streams.reduce((result, item) => {
+          const values = item.values;
+          return (
+            result +
+            values.reduce((prev: string, cur: [string, string]) => {
+              const [time, value] = cur;
+              startTime = time;
+              const str = `[${dayjs(Number(time) / 1.0e6).format('YYYY-MM-DD HH:mm:ss')}] ${value}`;
+              return prev + str;
+            }, '')
+          );
+        }, '');
+        const logDetail: Log = {
+          start_time: startTime!,
+          log_content: logContent,
+          pod_name: pod_name,
+        };
+        setLogList((oldList) => oldList.concat(logDetail));
+        if (!isMouseDownRef.current && logContent) {
+          setTimeout(() => {
+            scrollToBottom();
+          }, 100);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    });
+
+    socketRef.current = socket;
+  };
+
+  const closeSocket = () => {
+    if (socketRef.current) {
+      socketRef.current.close(1000, 'completed');
+      socketRef.current = undefined;
+    }
+  };
+
   const showLog = (log_type === 'resource' && !collapse) || log_type === 'normal';
   const logText = log_content + logList.map((v) => v.log_content).join('');
   const showMoreBtn =

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

@@ -1,16 +1,22 @@
 import { ExperimentStatus } from '@/enums';
-import { ExperimentLog } from '@/pages/Experiment/Info/props';
 import { getQueryByExperimentLog } from '@/services/experiment/index.js';
 import { to } from '@/utils/promise';
 import dayjs from 'dayjs';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import LogGroup from '../LogGroup';
 import styles from './index.less';
 
+export type ExperimentLog = {
+  log_type: 'normal' | 'resource'; // 日志类型
+  pod_name?: string; // 分布式名称
+  log_content?: string; // 日志内容
+  start_time?: string; // 日志开始时间
+};
+
 type LogListProps = {
-  instanceName?: string; // 实验实例 name
-  instanceNamespace?: string; // 实验实例 namespace
-  pipelineNodeId?: string; // 流水线节点 id
+  instanceName: string; // 实验实例 name
+  instanceNamespace: string; // 实验实例 namespace
+  pipelineNodeId: string; // 流水线节点 id
   workflowId?: string; // 实验实例工作流 id
   instanceNodeStartTime?: string; // 实验实例节点开始运行时间
   instanceNodeStatus?: ExperimentStatus;
@@ -25,23 +31,30 @@ function LogList({
   instanceNodeStatus,
 }: LogListProps) {
   const [logList, setLogList] = useState<ExperimentLog[]>([]);
+  const preStatusRef = useRef<ExperimentStatus | undefined>(undefined);
+  const retryRef = useRef(3);
 
   useEffect(() => {
-    if (workflowId) {
-      const start_time = dayjs(instanceNodeStartTime).valueOf() * 1.0e6;
-      const params = {
-        task_id: pipelineNodeId,
-        component_id: workflowId,
-        name: instanceName,
-        namespace: instanceNamespace,
-        start_time: start_time,
-      };
-      getExperimentLog(params, start_time);
+    if (
+      instanceNodeStatus &&
+      instanceNodeStatus !== ExperimentStatus.Pending &&
+      (!preStatusRef.current || preStatusRef.current === ExperimentStatus.Pending)
+    ) {
+      getExperimentLog();
     }
-  }, [workflowId, instanceNodeStartTime]);
+    preStatusRef.current = instanceNodeStatus;
+  }, [instanceNodeStatus]);
 
   // 获取实验日志
-  const getExperimentLog = async (params: any, start_time: number) => {
+  const getExperimentLog = async () => {
+    const start_time = dayjs(instanceNodeStartTime).valueOf() * 1.0e6;
+    const params = {
+      task_id: pipelineNodeId,
+      component_id: workflowId,
+      name: instanceName,
+      namespace: instanceNamespace,
+      start_time: start_time,
+    };
     const [res] = await to(getQueryByExperimentLog(params));
     if (res && res.data) {
       const { log_type, pods, log_detail } = res.data;
@@ -62,6 +75,13 @@ function LogList({
         }));
         setLogList(list);
       }
+    } else {
+      if (retryRef.current > 0) {
+        retryRef.current -= 1;
+        setTimeout(() => {
+          getExperimentLog();
+        }, 2 * 1000);
+      }
     }
   };
 

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -18,7 +18,7 @@ import { findAllParentNodes } from './utils';
 let graph = null;
 
 const EditPipeline = () => {
-  const navgite = useNavigate();
+  const navigate = useNavigate();
   const locationParams = useParams(); //新版本获取路由参数接口
   const graphRef = useRef();
   const paramsDrawerRef = useRef();
@@ -104,9 +104,7 @@ const EditPipeline = () => {
     setTimeout(() => {
       const data = graph.save();
       console.log(data);
-      const errorNode = data.nodes.find((item) => {
-        return item.formError === true;
-      });
+      const errorNode = data.nodes.find((item) => item.formError === true);
       if (errorNode) {
         message.error(`【${errorNode.label}】节点必填项必须配置`);
         const graphNode = graph.findById(errorNode.id);
@@ -124,7 +122,7 @@ const EditPipeline = () => {
         message.success('保存成功');
         setTimeout(() => {
           if (val) {
-            navgite({ pathname: `/pipeline/template` });
+            navigate({ pathname: `/pipeline/template` });
           }
         }, 500);
       });