ci4sManagement-cloud/react-ui/src/pages/AutoML/components/ExperimentRunBasic/index.tsx

import ConfigInfo from '@/components/ConfigInfo';
import RunDuration from '@/components/RunDuration';
import { ExperimentStatus } from '@/enums';
import { experimentStatusInfo } from '@/pages/Experiment/status';
import { type NodeStatus } from '@/types';
import { getExperimentInstanceStatus } from '@/utils/experiment';
import { formatDate } from '@/utils/format';
import { Flex } from 'antd';
import { useMemo } from 'react';

type ExperimentRunBasicProps = {
  workflowStatus?: NodeStatus;
  instanceStatus?: ExperimentStatus;
};

function ExperimentRunBasic({ workflowStatus, instanceStatus }: ExperimentRunBasicProps) {
  const instanceDatas = useMemo(() => {
    const status = getExperimentInstanceStatus(instanceStatus as ExperimentStatus, workflowStatus);
    const statusInfo = experimentStatusInfo[status];

    return [
      {
        label: '启动时间',
        value: formatDate(workflowStatus?.startedAt),
      },
      {
        label: '执行时长',
        value: (
          <RunDuration
            createTime={workflowStatus?.startedAt}
            finishTime={workflowStatus?.finishedAt}
          />
        ),
      },
      {
        label: '状态',
        value: statusInfo ? (
          <Flex align="center">
            <img
              style={{ width: '17px', marginRight: '7px' }}
              src={statusInfo.icon}
              draggable={false}
              alt=""
            />
            <div
              style={{
                color: statusInfo.color,
                fontSize: '15px',
                lineHeight: 1.6,
              }}
            >
              {statusInfo.label}
            </div>
          </Flex>
        ) : (
          '--'
        ),
      },
    ];
  }, [workflowStatus, instanceStatus]);

  return (
    <ConfigInfo
      title="运行信息"
      datas={instanceDatas}
      labelWidth={70}
      style={{ marginBottom: '20px' }}
    />
  );
}

export default ExperimentRunBasic;