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

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;