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

/*
 * @Author: 赵伟
 * @Date: 2024-05-16 08:47:46
 * @Description: 日志组件
 */

import { useStateRef } from '@/hooks';
import { ExperimentStatus } from '@/pages/Experiment/status';
import { ExperimentLog } from '@/pages/Experiment/training/props';
import { getExperimentPodsLog } from '@/services/experiment/index.js';
import { DoubleRightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

export type LogGroupProps = ExperimentLog & {
  status: ExperimentStatus; // 实验状态
};

type Log = {
  start_time: string; // 日志开始时间
  log_content: string; // 日志内容
};

function LogGroup({
  log_type = 'normal',
  pod_name = '',
  log_content = '',
  start_time,
  status = ExperimentStatus.Pending,
}: LogGroupProps) {
  const [collapse, setCollapse] = useState(true);
  const [logList, setLogList, logListRef] = useStateRef<Log[]>([]);
  const [completed, setCompleted] = useState(false);

  useEffect(() => {
    if (status === ExperimentStatus.Running) {
      const timerId = setInterval(() => {
        requestExperimentPodsLog();
      }, 5000);
      return () => {
        clearInterval(timerId);
      };
    }
  }, []);

  // 请求日志
  const requestExperimentPodsLog = async () => {
    const list = logListRef.current;
    const startTime = list.length > 0 ? list[list.length - 1].start_time : start_time;
    const params = {
      pod_name,
      start_time: startTime,
    };
    const res = await getExperimentPodsLog(params);
    const { log_detail } = res.data;
    if (log_detail && log_detail.log_content) {
      setLogList((oldList) => oldList.concat(log_detail));
    } else {
      setCompleted(true);
    }
  };

  // 处理折叠
  const handleCollapse = async () => {
    if (!collapse) {
      setCollapse(true);
      return;
    }

    if (logList.length === 0) {
      try {
        await requestExperimentPodsLog();
        setCollapse(false);
      } catch (error) {
        return Promise.reject(error);
      }
    } else {
      setCollapse(false);
    }
  };

  // 加载更多
  const loadMore = () => {
    requestExperimentPodsLog();
  };

  const showLog = (log_type === 'resource' && !collapse) || log_type === 'normal';
  const logText = log_content + logList.map((v) => v.log_content).join('');
  const showMoreBtn = status !== 'Running' && showLog && !completed && logText !== '';
  return (
    <div className={styles['log-group']}>
      {log_type === 'resource' && (
        <div className={styles['log-group__pod']} onClick={handleCollapse}>
          <div className={styles['log-group__pod__name']}>{pod_name}</div>
          {collapse ? <DownOutlined /> : <UpOutlined />}
        </div>
      )}
      {showLog && <div className={styles['log-group__detail']}>{logText}</div>}
      <div className={styles['log-group__more-button']}>
        {showMoreBtn && (
          <Button
            type="text"
            style={{ color: 'white' }}
            icon={<DoubleRightOutlined rotate={90} />}
            onClick={loadMore}
          >
            更多
          </Button>
        )}
      </div>
    </div>
  );
}

export default LogGroup;