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

import ConfigInfo, { type BasicInfoData } from '@/components/ConfigInfo';
import { hyperParameterOptimizedMode } from '@/enums';
import { useComputingResource } from '@/hooks/useComputingResource';
import { experimentStatusInfo } from '@/pages/Experiment/status';
import {
  schedulerAlgorithms,
  searchAlgorithms,
} from '@/pages/HyperParameter/components/CreateForm/utils';
import { HyperParameterData } from '@/pages/HyperParameter/types';
import { type NodeStatus } from '@/types';
import { elapsedTime } from '@/utils/date';
import {
  formatCodeConfig,
  formatDataset,
  formatDate,
  formatEnum,
  formatMirror,
  formatModel,
} from '@/utils/format';
import { Flex } from 'antd';
import classNames from 'classnames';
import { useMemo } from 'react';
import ParameterInfo from '../ParameterInfo';
import styles from './index.less';

// 格式化优化方向
const formatOptimizeMode = (value: string) => {
  return value === hyperParameterOptimizedMode.Max ? '越大越好' : '越小越好';
};

type HyperParameterBasicProps = {
  info?: HyperParameterData;
  className?: string;
  isInstance?: boolean;
  runStatus?: NodeStatus;
};

function HyperParameterBasic({
  info,
  className,
  runStatus,
  isInstance = false,
}: HyperParameterBasicProps) {
  const getResourceDescription = useComputingResource()[1];

  const basicDatas: BasicInfoData[] = useMemo(() => {
    if (!info) {
      return [];
    }

    return [
      {
        label: '实验名称',
        value: info.name,
      },
      {
        label: '实验描述',
        value: info.description,
      },
      {
        label: '创建人',
        value: info.create_by,
      },
      {
        label: '创建时间',
        value: info.create_time,
        format: formatDate,
      },
      {
        label: '更新时间',
        value: info.update_time,
        format: formatDate,
      },
    ];
  }, [info]);

  const configDatas: BasicInfoData[] = useMemo(() => {
    if (!info) {
      return [];
    }
    return [
      {
        label: '代码',
        value: info.code_config,
        format: formatCodeConfig,
      },
      {
        label: '主函数代码文件',
        value: info.main_py,
      },
      {
        label: '镜像',
        value: info.image,
        format: formatMirror,
      },
      {
        label: '数据集',
        value: info.dataset,
        format: formatDataset,
      },
      {
        label: '模型',
        value: info.model,
        format: formatModel,
      },
      {
        label: '总试验次数',
        value: info.num_samples,
      },
      {
        label: '搜索算法',
        value: info.search_alg,
        format: formatEnum(searchAlgorithms),
      },
      {
        label: '调度算法',
        value: info.scheduler,
        format: formatEnum(schedulerAlgorithms),
      },
      {
        label: '单次试验最大时间',
        value: info.max_t,
      },
      {
        label: '最小试验数',
        value: info.min_samples_required,
      },
      {
        label: '指标优化方向',
        value: info.mode,
        format: formatOptimizeMode,
      },
      {
        label: '指标',
        value: info.metric,
      },
      {
        label: '资源规格',
        value: info.computing_resource_id,
        format: getResourceDescription,
      },
    ];
  }, [info, getResourceDescription]);

  const instanceDatas = useMemo(() => {
    if (!info || !runStatus) {
      return [];
    }

    return [
      {
        label: '启动时间',
        value: formatDate(info.create_time),
        ellipsis: true,
      },
      {
        label: '执行时长',
        value: elapsedTime(info.create_time, runStatus.finishedAt),
        ellipsis: true,
      },
      {
        label: '状态',
        value: (
          <Flex align="center">
            <img
              style={{ width: '17px', marginRight: '7px' }}
              src={experimentStatusInfo[runStatus.phase]?.icon}
              draggable={false}
              alt=""
            />
            <div
              style={{
                color: experimentStatusInfo[runStatus?.phase]?.color,
                fontSize: '15px',
                lineHeight: 1.6,
              }}
            >
              {experimentStatusInfo[runStatus?.phase]?.label}
            </div>
          </Flex>
        ),
        ellipsis: true,
      },
    ];
  }, [runStatus, info]);

  return (
    <div className={classNames(styles['hyper-parameter-basic'], className)}>
      {isInstance && runStatus && (
        <ConfigInfo
          title="运行信息"
          datas={instanceDatas}
          labelWidth={70}
          style={{ marginBottom: '20px' }}
        />
      )}
      {!isInstance && (
        <ConfigInfo
          title="基本信息"
          datas={basicDatas}
          labelWidth={70}
          style={{ marginBottom: '20px' }}
        />
      )}
      <ConfigInfo
        title="配置信息"
        datas={configDatas}
        labelWidth={120}
        style={{ marginBottom: '20px' }}
      >
        {info && <ParameterInfo info={info} />}
      </ConfigInfo>
    </div>
  );
}

export default HyperParameterBasic;