diff --git a/react-ui/src/pages/Dataset/datasetIntro.jsx b/react-ui/src/pages/Dataset/datasetIntro.jsx index c32f4541..19069507 100644 --- a/react-ui/src/pages/Dataset/datasetIntro.jsx +++ b/react-ui/src/pages/Dataset/datasetIntro.jsx @@ -126,7 +126,7 @@ const Dataset = () => { }; const getDatasetVersions = (params) => { getDatasetVersionIdList(params).then((res) => { - setWordList(res.data); + setWordList(res?.data?.content ?? []); }); }; const handleChange = (value) => { @@ -277,7 +277,9 @@ const Dataset = () => {
- {wordList.length > 0 ? wordList[0].description : null} + {wordList.length > 0 && wordList[0].description + ? '版本描述:' + wordList[0].description + : null}
diff --git a/react-ui/src/pages/Experiment/experimentText/addExperimentModal.less b/react-ui/src/pages/Experiment/experimentText/addExperimentModal.less index a7bb2af8..a92ff9de 100644 --- a/react-ui/src/pages/Experiment/experimentText/addExperimentModal.less +++ b/react-ui/src/pages/Experiment/experimentText/addExperimentModal.less @@ -48,4 +48,12 @@ margin-right: 10px; } } + + .global_param_item { + max-height: 230px; + padding: 20px 12px; + overflow-y: auto; + border: 1px solid #e6e6e6; + border-radius: 6px; + } } diff --git a/react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx b/react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx index 89148473..b236566c 100644 --- a/react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx +++ b/react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx @@ -1,4 +1,5 @@ -import { Form, Input, Modal, Select } from 'antd'; +import { type PipelineGlobalParam } from '@/types'; +import { Form, Input, Modal, Radio, Select, type FormRule } from 'antd'; import { useState } from 'react'; import styles from './addExperimentModal.less'; @@ -6,6 +7,7 @@ type FormData = { name?: string; description?: string; workflow_id?: string | number; + global_param?: PipelineGlobalParam[]; }; type AddExperimentModalProps = { @@ -17,17 +19,55 @@ type AddExperimentModalProps = { initialValues: FormData; }; -interface GlobalParam { - param_name: string; - param_value: string; -} - interface Workflow { id: string | number; name: string; - global_param?: GlobalParam[] | null; + global_param?: PipelineGlobalParam[] | null; } +// 根据参数设置输入组件 +export const getParamComponent = (paramType: number, isSensitive?: number): JSX.Element => { + // 防止后台返回不是 number 类型 + if (Number(paramType) === 3) { + return ( + + + + + ); + } + if (isSensitive && Number(isSensitive) === 1) { + return ; + } + return ; +}; + +// 根据参数设置校验规则 +export const getParamRules = (paramType: number, required: boolean = false): FormRule[] => { + const rules = []; + // 防止后台返回不是 number 类型 + if (Number(paramType) === 2) { + rules.push({ + pattern: /^-?\d+(\.\d+)?$/, + message: '整型必须是数字', + }); + } + if (required) { + rules.push({ required: true, message: '请输入值' }); + } + return rules; +}; + +// 根据参数设置 label +const getParamType = (param: PipelineGlobalParam): string => { + const paramTypes: Readonly> = { + 1: '字符串', + 2: '整型', + 3: '布尔类型', + }; + return param.param_name + `(${paramTypes[param.param_type]})`; +}; + function AddExperimentModal({ isAdd, open, @@ -38,20 +78,30 @@ function AddExperimentModal({ }: AddExperimentModalProps) { const dialogTitle = isAdd ? '新建实验' : '编辑实验'; const workflowDisabled = isAdd ? false : true; - const [globalParam, setGlobalParam] = useState([]); + const [globalParam, setGlobalParam] = useState( + initialValues.global_param || [], + ); const [form] = Form.useForm(); + + const layout = { + labelCol: { span: 24 }, + wrapperCol: { span: 24 }, + }; + + const tailLayout = { + labelCol: { span: 8 }, + wrapperCol: { span: 16 }, + }; + // 除了流水线选择发生变化 - const handleWorkflowChange = (id: string) => { + const handleWorkflowChange = (id: string | number) => { const pipeline: Workflow | undefined = workflowList.find((v) => v.id === id); if (pipeline && pipeline.global_param) { setGlobalParam(pipeline.global_param); - const fields = pipeline.global_param.reduce((acc, item) => { - acc[item.param_name] = item.param_value; - return acc; - }, {} as Record); - form.setFieldsValue(fields); + form.setFieldValue('global_param', pipeline.global_param); } else { setGlobalParam([]); + form.setFieldValue('global_param', []); } }; return ( @@ -73,11 +123,12 @@ function AddExperimentModal({ >
- {globalParam.map((item) => ( - - + {globalParam.length > 0 && ( + +
+ + {(fields) => + fields.map(({ key, name, ...restField }) => ( + + {getParamComponent( + globalParam[name]['param_type'], + globalParam[name]['is_sensitive'], + )} + + )) + } + +
- ))} + )} ); diff --git a/react-ui/src/pages/Experiment/index.jsx b/react-ui/src/pages/Experiment/index.jsx index ad9703c1..a93eccbc 100644 --- a/react-ui/src/pages/Experiment/index.jsx +++ b/react-ui/src/pages/Experiment/index.jsx @@ -119,22 +119,12 @@ function Experiment() { }; // 创建或者编辑实验接口请求 const handleAddExperiment = async (values) => { - const workflow_id = values['workflow_id']; - let global_param = undefined; - const pipeline = workflowList.find((v) => v.id === workflow_id); - if (pipeline && pipeline.global_param) { - const globalParamList = [...pipeline.global_param]; - for (const item of globalParamList) { - item.param_value = values[item.param_name]; - values[item.param_name] = undefined; - } - global_param = JSON.stringify(globalParamList); - } - const params = { - ...values, - global_param, - }; + const global_param = JSON.stringify(values.global_param); if (!experimentId) { + const params = { + ...values, + global_param, + }; const [res, _] = await to(postExperiment(params)); if (res) { message.success('新建实验成功'); @@ -142,7 +132,7 @@ function Experiment() { getList(); } } else { - const params = { ...values, id: experimentId }; + const params = { ...values, global_param, id: experimentId }; const [res, _] = await to(putExperiment(params)); if (res) { message.success('编辑实验成功'); @@ -431,14 +421,16 @@ function Experiment() { rowExpandable: (record) => true, }} /> - + {isModalOpen && ( + + )} ); } diff --git a/react-ui/src/pages/Model/modelIntro.jsx b/react-ui/src/pages/Model/modelIntro.jsx index e4f1cf6c..707b347a 100644 --- a/react-ui/src/pages/Model/modelIntro.jsx +++ b/react-ui/src/pages/Model/modelIntro.jsx @@ -121,8 +121,7 @@ const Dataset = () => { }; const getModelVersions = (params) => { getModelVersionIdList(params).then((ret) => { - console.log(ret); - setWordList(ret.data); + setWordList(ret?.data?.content ?? []); }); }; const handleExport = async () => { @@ -278,7 +277,9 @@ const Dataset = () => {
- {wordList.length > 0 ? wordList[0].description : null} + {wordList.length > 0 && wordList[0].description + ? '版本描述:' + wordList[0].description + : null}
diff --git a/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.less b/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.less index da9461c4..913419c0 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.less +++ b/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.less @@ -8,7 +8,13 @@ top: 5px; right: 0; } -.add_button { +.add_button_form_item { margin-top: 15px; + + &:first-child { + margin-top: 0; + } +} +.add_button_form_item .add_button { padding: 0; } diff --git a/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx b/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx index 513f5e05..fad63da3 100644 --- a/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx +++ b/react-ui/src/pages/Pipeline/editPipeline/globalParamsDrawer.tsx @@ -1,7 +1,12 @@ +import { + getParamComponent, + getParamRules, +} from '@/pages/Experiment/experimentText/addExperimentModal'; import { type PipelineGlobalParam } from '@/types'; import { to } from '@/utils/promise'; import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'; import { Button, Drawer, Form, Input, Radio } from 'antd'; +import { NamePath } from 'antd/es/form/interface'; import { forwardRef, useImperativeHandle } from 'react'; import styles from './globalParamsDrawer.less'; @@ -26,6 +31,11 @@ const GlobalParamsDrawer = forwardRef( } }, })); + + const handleTypeChange = (name: NamePath) => { + form.setFieldValue(name, null); + }; + return ( - + handleTypeChange(['global_param', name, 'param_value'])} + > 字符串 整型 布尔类型 + prev.global_param?.[name]?.param_type !== + cur.global_param?.[name]?.param_type + } > - + {({ getFieldValue }) => ( + + {getParamComponent(getFieldValue(['global_param', name, 'param_type']))} + + )} @@ -111,11 +136,11 @@ const GlobalParamsDrawer = forwardRef( > ))} - +