ci4sManagement-cloud/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx

/*
 * @Author: 赵伟
 * @Date: 2024-04-16 13:58:08
 * @Description: 创建开发环境
 */
import KFIcon from '@/components/KFIcon';
import KFRadio, { type KFRadioItem } from '@/components/KFRadio';
import PageTitle from '@/components/PageTitle';
import ParameterSelect from '@/components/ParameterSelect';
import ResourceSelect, {
  requiredValidator,
  ResourceSelectorType,
  type ParameterInputObject,
} from '@/components/ResourceSelect';
import SubAreaTitle from '@/components/SubAreaTitle';
import { createEditorReq } from '@/services/developmentEnvironment';
import { to } from '@/utils/promise';
import { useNavigate } from '@umijs/max';
import { App, Button, Col, Form, Input, Row } from 'antd';
import { omit, pick } from 'lodash';
import styles from './index.less';

type FormData = {
  name: string;
  computing_resource: string;
  standard: string;
  image: ParameterInputObject;
  model: ParameterInputObject;
  dataset: ParameterInputObject;
};

enum ComputingResourceType {
  GPU = 'GPU',
  NPU = 'NPU',
}

const EditorRadioItems: KFRadioItem[] = [
  {
    title: '英伟达GPU',
    value: ComputingResourceType.GPU,
    icon: <KFIcon type="icon-jiyugongwangjingxiang" />,
  },
  {
    title: '昇腾NPU',
    value: ComputingResourceType.NPU,
    icon: <KFIcon type="icon-bendishangchuan" />,
  },
];

function EditorCreate() {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const { message } = App.useApp();

  // 创建编辑器
  const createEditor = async (formData: FormData) => {
    // 根据后台要求，修改表单数据
    const image = formData['image'];
    const model = formData['model'];
    const dataset = formData['dataset'];
    const params = {
      ...omit(formData, ['image', 'model', 'dataset']),
      image: image.value,
      model: model && pick(model, ['id', 'version', 'path', 'showValue']),
      dataset: dataset && pick(dataset, ['id', 'version', 'path', 'showValue']),
    };
    const [res] = await to(createEditorReq(params));
    if (res) {
      message.success('创建成功');
      navigate(-1);
    }
  };

  // 提交
  const handleSubmit = (values: FormData) => {
    createEditor(values);
  };

  // 取消
  const cancel = () => {
    navigate(-1);
  };

  return (
    <div className={styles['editor-create']}>
      <PageTitle title="创建开发环境"></PageTitle>
      <div className={styles['editor-create__content']}>
        <div>
          <Form
            name="editor-create"
            labelCol={{ flex: '100px' }}
            labelAlign="left"
            form={form}
            initialValues={{ computing_resource: ComputingResourceType.GPU }}
            onFinish={handleSubmit}
            size="large"
            autoComplete="off"
          >
            <SubAreaTitle
              title="基本信息"
              image={require('@/assets/img/mirror-basic.png')}
              style={{ marginBottom: '26px' }}
            ></SubAreaTitle>
            <Row gutter={10}>
              <Col span={10}>
                <Form.Item
                  label="任务名称"
                  name="name"
                  rules={[
                    {
                      required: true,
                      message: '请输入任务名称',
                    },
                  ]}
                >
                  <Input placeholder="请输入任务名称" maxLength={64} showCount allowClear />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={10}>
              <Col span={10}>
                <Form.Item
                  label="计算资源"
                  name="computing_resource"
                  rules={[
                    {
                      required: true,
                      message: '请选择计算资源',
                    },
                  ]}
                >
                  <KFRadio items={EditorRadioItems}></KFRadio>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={10}>
                <Form.Item
                  label="资源规格"
                  name="computing_resource_id"
                  rules={[
                    {
                      required: true,
                      message: '请选择资源规格',
                    },
                  ]}
                >
                  <ParameterSelect dataType="resource" placeholder="请选择资源规格" />
                </Form.Item>
              </Col>
            </Row>
            <SubAreaTitle
              title="参数设置"
              image={require('@/assets/img/editor-parameter.png')}
              style={{ marginTop: '20px', marginBottom: '24px' }}
            ></SubAreaTitle>
            <Row gutter={8}>
              <Col span={10}>
                <Form.Item
                  label="镜像"
                  name="image"
                  rules={[
                    {
                      validator: requiredValidator,
                      message: '请选择镜像',
                    },
                  ]}
                  required
                >
                  <ResourceSelect
                    type={ResourceSelectorType.Mirror}
                    placeholder="请选择镜像"
                    canInput={false}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={10}>
                <Form.Item label="模型" name="model">
                  <ResourceSelect
                    type={ResourceSelectorType.Model}
                    placeholder="请选择模型"
                    canInput={false}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={8}>
              <Col span={10}>
                <Form.Item label="数据集" name="dataset">
                  <ResourceSelect
                    type={ResourceSelectorType.Dataset}
                    placeholder="请选择数据集"
                    canInput={false}
                  />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item wrapperCol={{ offset: 0, span: 16 }}>
              <Button type="primary" htmlType="submit">
                确定
              </Button>
              <Button
                type="default"
                htmlType="button"
                onClick={cancel}
                style={{ marginLeft: '20px' }}
              >
                取消
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default EditorCreate;