fix: 实验参数修改
This commit is contained in:
parent
7ebb943653
commit
299b6635b0
|
@ -29,7 +29,6 @@ function ParameterInput({
|
|||
onClick,
|
||||
canInput = true,
|
||||
textArea = false,
|
||||
placeholder,
|
||||
allowClear,
|
||||
className,
|
||||
style,
|
||||
|
@ -44,6 +43,7 @@ function ParameterInput({
|
|||
}
|
||||
const isSelect = valueObj?.fromSelect;
|
||||
const InputComponent = textArea ? Input.TextArea : Input;
|
||||
const placeholder = valueObj?.placeholder;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
@ -0,0 +1,72 @@
|
|||
import { getDatasetList, getModelList } from '@/services/dataset/index.js';
|
||||
import { getComputingResourceReq } from '@/services/pipeline';
|
||||
import { ComputingResource } from '@/types';
|
||||
import { type SelectProps } from 'antd';
|
||||
|
||||
// 过滤资源规格
|
||||
const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] = (
|
||||
input: string,
|
||||
option?: ComputingResource,
|
||||
) => {
|
||||
return (
|
||||
option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false
|
||||
);
|
||||
};
|
||||
|
||||
// id 从 number 转换为 string
|
||||
const convertId = (item: any) => ({ ...item, id: String(item.id) });
|
||||
|
||||
export type SelectPropsConfig = {
|
||||
getOptions: () => Promise<any>;
|
||||
fieldNames?: SelectProps['fieldNames'];
|
||||
optionFilterProp?: SelectProps['optionFilterProp'];
|
||||
filterOption?: SelectProps['filterOption'];
|
||||
};
|
||||
|
||||
export const paramSelectConfig: Record<string, SelectPropsConfig> = {
|
||||
dataset: {
|
||||
getOptions: async () => {
|
||||
const res = await getDatasetList({
|
||||
page: 0,
|
||||
size: 1000,
|
||||
available_range: 0,
|
||||
});
|
||||
return res?.data?.content?.map(convertId) ?? [];
|
||||
},
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
},
|
||||
optionFilterProp: 'name',
|
||||
},
|
||||
model: {
|
||||
getOptions: async () => {
|
||||
const res = await getModelList({
|
||||
page: 0,
|
||||
size: 1000,
|
||||
available_range: 0,
|
||||
});
|
||||
return res?.data?.content?.map(convertId) ?? [];
|
||||
},
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
},
|
||||
optionFilterProp: 'name',
|
||||
},
|
||||
resource: {
|
||||
getOptions: async () => {
|
||||
const res = await getComputingResourceReq({
|
||||
page: 0,
|
||||
size: 1000,
|
||||
resource_type: '',
|
||||
});
|
||||
return res?.data?.content ?? [];
|
||||
},
|
||||
fieldNames: {
|
||||
label: 'description',
|
||||
value: 'standard',
|
||||
},
|
||||
filterOption: filterResourceStandard as SelectProps['filterOption'],
|
||||
},
|
||||
};
|
|
@ -1,85 +1,20 @@
|
|||
import { PipelineNodeModelParameter } from '@/types';
|
||||
import { to } from '@/utils/promise';
|
||||
import { Select } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
// import styles from './index.less';
|
||||
import { getDatasetList, getModelList } from '@/services/dataset/index.js';
|
||||
import { getComputingResourceReq } from '@/services/pipeline';
|
||||
import { ComputingResource, PipelineNodeModelParameter } from '@/types';
|
||||
import { Select, type SelectProps } from 'antd';
|
||||
|
||||
// 过滤资源规格
|
||||
const filterResourceStandard: SelectProps<string, ComputingResource>['filterOption'] = (
|
||||
input: string,
|
||||
option?: ComputingResource,
|
||||
) => {
|
||||
return (
|
||||
option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false
|
||||
);
|
||||
};
|
||||
|
||||
// id 从 number 转换为 string
|
||||
const convertId = (item: any) => ({ ...item, id: String(item.id) });
|
||||
|
||||
type SelectPropsConfig = {
|
||||
getOptions: () => Promise<any>;
|
||||
fieldNames?: SelectProps['fieldNames'];
|
||||
filterOption?: SelectProps['filterOption'];
|
||||
};
|
||||
|
||||
const config: Record<string, SelectPropsConfig> = {
|
||||
dataset: {
|
||||
getOptions: async () => {
|
||||
const res = await getDatasetList({
|
||||
page: 0,
|
||||
size: 1000,
|
||||
available_range: 0,
|
||||
});
|
||||
return res?.data?.content?.map(convertId) ?? [];
|
||||
},
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
},
|
||||
},
|
||||
model: {
|
||||
getOptions: async () => {
|
||||
const res = await getModelList({
|
||||
page: 0,
|
||||
size: 1000,
|
||||
available_range: 0,
|
||||
});
|
||||
return res?.data?.content?.map(convertId) ?? [];
|
||||
},
|
||||
fieldNames: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
},
|
||||
},
|
||||
resource: {
|
||||
getOptions: async () => {
|
||||
const res = await getComputingResourceReq({
|
||||
page: 0,
|
||||
size: 1000,
|
||||
resource_type: '',
|
||||
});
|
||||
return res?.data?.content ?? [];
|
||||
},
|
||||
fieldNames: {
|
||||
label: 'description',
|
||||
value: 'standard',
|
||||
},
|
||||
filterOption: filterResourceStandard as SelectProps['filterOption'],
|
||||
},
|
||||
};
|
||||
import { paramSelectConfig } from './config';
|
||||
|
||||
type ParameterSelectProps = {
|
||||
value?: PipelineNodeModelParameter;
|
||||
onChange?: (value: PipelineNodeModelParameter) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
function ParameterSelect({ value, onChange }: ParameterSelectProps) {
|
||||
function ParameterSelect({ value, onChange, disabled = false }: ParameterSelectProps) {
|
||||
const [options, setOptions] = useState([]);
|
||||
const valueNonNullable = value ?? ({} as PipelineNodeModelParameter);
|
||||
const { item_type } = valueNonNullable;
|
||||
const propsConfig = paramSelectConfig[item_type];
|
||||
|
||||
useEffect(() => {
|
||||
getSelectOptions();
|
||||
|
@ -94,7 +29,6 @@ function ParameterSelect({ value, onChange }: ParameterSelectProps) {
|
|||
|
||||
// 获取下拉数据
|
||||
const getSelectOptions = async () => {
|
||||
const propsConfig = config[item_type];
|
||||
if (!propsConfig) {
|
||||
return;
|
||||
}
|
||||
|
@ -108,11 +42,13 @@ function ParameterSelect({ value, onChange }: ParameterSelectProps) {
|
|||
return (
|
||||
<Select
|
||||
placeholder={valueNonNullable.placeholder}
|
||||
filterOption={config[item_type]?.filterOption}
|
||||
filterOption={propsConfig?.filterOption}
|
||||
options={options}
|
||||
fieldNames={config[item_type]?.fieldNames}
|
||||
fieldNames={propsConfig?.fieldNames}
|
||||
value={valueNonNullable.value}
|
||||
optionFilterProp={propsConfig.optionFilterProp}
|
||||
onChange={hangleChange}
|
||||
disabled={disabled}
|
||||
showSearch
|
||||
allowClear
|
||||
/>
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
import ParameterInput from '@/components/ParameterInput';
|
||||
import ParameterSelect from '@/components/ParameterSelect';
|
||||
import SubAreaTitle from '@/components/SubAreaTitle';
|
||||
import { useComputingResource } from '@/hooks/resource';
|
||||
import { PipelineNodeModelSerialize } from '@/types';
|
||||
|
@ -122,15 +124,8 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
|
|||
<TextArea disabled />
|
||||
</Form.Item>
|
||||
{controlStrategyList.map((item) => (
|
||||
<Form.Item
|
||||
key={item.key}
|
||||
name={['control_strategy', item.key]}
|
||||
label={item.value.label}
|
||||
getValueProps={(e) => {
|
||||
return { value: e.showValue || e.value };
|
||||
}}
|
||||
>
|
||||
<Input disabled />
|
||||
<Form.Item key={item.key} name={['control_strategy', item.key]} label={item.value.label}>
|
||||
<ParameterInput disabled />
|
||||
</Form.Item>
|
||||
))}
|
||||
<div className={styles['experiment-parameter__title']}>
|
||||
|
@ -142,11 +137,12 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
|
|||
name={['in_parameters', item.key]}
|
||||
label={item.value.label + '(' + item.key + ')'}
|
||||
rules={[{ required: item.value.require ? true : false }]}
|
||||
getValueProps={(e) => {
|
||||
return { value: e.showValue || e.value };
|
||||
}}
|
||||
>
|
||||
<Input disabled />
|
||||
{item.value.type === 'select' ? (
|
||||
<ParameterSelect disabled />
|
||||
) : (
|
||||
<ParameterInput disabled />
|
||||
)}
|
||||
</Form.Item>
|
||||
))}
|
||||
<div className={styles['experiment-parameter__title']}>
|
||||
|
@ -158,11 +154,8 @@ function ExperimentParameter({ form, nodeData }: ExperimentParameterProps) {
|
|||
name={['out_parameters', item.key]}
|
||||
label={item.value.label + '(' + item.key + ')'}
|
||||
rules={[{ required: item.value.require ? true : false }]}
|
||||
getValueProps={(e) => {
|
||||
return { value: e.showValue || e.value };
|
||||
}}
|
||||
>
|
||||
<Input disabled />
|
||||
<ParameterInput disabled />
|
||||
</Form.Item>
|
||||
))}
|
||||
</Form>
|
||||
|
|
|
@ -388,7 +388,7 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
|
|||
name={['control_strategy', item.key]}
|
||||
label={getLabel(item, 'control_strategy')}
|
||||
>
|
||||
<ParameterInput placeholder={item.value.placeholder} allowClear></ParameterInput>
|
||||
<ParameterInput allowClear></ParameterInput>
|
||||
</Form.Item>
|
||||
))}
|
||||
<div className={styles['pipeline-drawer__title']}>
|
||||
|
@ -409,11 +409,7 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
|
|||
{item.value.type === 'select' ? (
|
||||
<ParameterSelect />
|
||||
) : (
|
||||
<ParameterInput
|
||||
placeholder={item.value.placeholder}
|
||||
canInput={canInput(item.value)}
|
||||
allowClear
|
||||
></ParameterInput>
|
||||
<ParameterInput canInput={canInput(item.value)} allowClear></ParameterInput>
|
||||
)}
|
||||
</Form.Item>
|
||||
{item.value.type === 'ref' && (
|
||||
|
@ -442,7 +438,7 @@ const PipelineNodeParameter = forwardRef(({ onParentChange }: PipelineNodeParame
|
|||
label={getLabel(item, 'out_parameters')}
|
||||
rules={[{ required: item.value.require ? true : false }]}
|
||||
>
|
||||
<ParameterInput placeholder={item.value.placeholder} allowClear></ParameterInput>
|
||||
<ParameterInput allowClear></ParameterInput>
|
||||
</Form.Item>
|
||||
))}
|
||||
</Form>
|
||||
|
|
Loading…
Reference in New Issue