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

/*
 * @Author: 赵伟
 * @Date: 2024-04-09 15:59:14
 * @Description: 查看实验使用的参数
 */
import parameterImg from '@/assets/img/modal-parameter.png';
import KFEmpty, { EmptyType } from '@/components/KFEmpty';
import KFModal from '@/components/KFModal';
import { type PipelineGlobalParam } from '@/types';
import { Form } from 'antd';
import { getParamComponent, getParamLabel } from '../AddExperimentModal';
import styles from './index.less';

type ParamsModalProps = {
  open: boolean;
  onCancel: () => void;
  globalParam?: PipelineGlobalParam[] | null;
};

function ParamsModal({ open, onCancel, globalParam = [] }: ParamsModalProps) {
  return (
    <KFModal
      title="执行参数"
      image={parameterImg}
      open={open}
      onOk={onCancel}
      onCancel={onCancel}
      cancelButtonProps={{ style: { display: 'none' } }}
      width={825}
    >
      {Array.isArray(globalParam) && globalParam.length > 0 ? (
        <div className={styles['params-container']}>
          <Form
            name="view_params_form"
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            initialValues={{ global_param: globalParam }}
            labelAlign="left"
            disabled
          >
            <Form.List name="global_param">
              {(fields) =>
                fields.map(({ key, name, ...restField }) => (
                  <Form.Item
                    {...restField}
                    key={key}
                    name={[name, 'param_value']}
                    label={getParamLabel(globalParam[name])}
                  >
                    {getParamComponent(globalParam[name]['param_type'])}
                  </Form.Item>
                ))
              }
            </Form.List>
          </Form>
        </div>
      ) : (
        <KFEmpty
          className={styles['params-empty']}
          type={EmptyType.NoData}
          title="暂无数据"
          content="该流水线没有设置全局参数"
          hasFooter={false}
        />
      )}
    </KFModal>
  );
}

export default ParamsModal;