From 0ed1d59a223cdfce6054081c6e35fc3a80c27cb0 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Wed, 29 May 2024 10:50:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=81=E6=B0=B4=E7=BA=BF=E5=8F=82?= =?UTF-8?q?=E6=95=B0=E6=B7=BB=E5=8A=A0=E4=B8=8B=E6=8B=89=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=9B=86=E3=80=81=E6=A8=A1=E5=9E=8B=E3=80=81?= =?UTF-8?q?=E8=B5=84=E6=BA=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ParameterInput/index.tsx | 2 - .../src/components/ParameterSelect/index.less | 0 .../src/components/ParameterSelect/index.tsx | 119 +++++++++++++ .../components/AddDatasetModal/index.tsx | 2 +- .../components/AddModelModal/index.tsx | 2 +- .../components/AddVersionModal/index.tsx | 2 +- .../Dataset/components/CategoryItem/index.tsx | 2 +- .../Dataset/components/CategoryList/index.tsx | 2 +- .../Dataset/components/ResourceList/index.tsx | 2 +- .../Dataset/components/ResourcePage/index.tsx | 2 +- .../Dataset/components/Resourcetem/index.tsx | 2 +- .../pages/Dataset/{types.tsx => config.tsx} | 0 .../pages/Dataset/{index.jsx => index.tsx} | 2 +- react-ui/src/pages/Dataset/intro.jsx | 2 +- .../src/pages/Model/{index.jsx => index.tsx} | 2 +- react-ui/src/pages/Model/intro.jsx | 2 +- .../ResourceSelectorModal/config.tsx | 7 +- .../ResourceSelectorModal/index.tsx | 68 ++++---- .../editPipeline/{props.jsx => props.tsx} | 162 +++++++++--------- react-ui/src/types.ts | 11 +- 20 files changed, 254 insertions(+), 139 deletions(-) create mode 100644 react-ui/src/components/ParameterSelect/index.less create mode 100644 react-ui/src/components/ParameterSelect/index.tsx rename react-ui/src/pages/Dataset/{types.tsx => config.tsx} (100%) rename react-ui/src/pages/Dataset/{index.jsx => index.tsx} (81%) rename react-ui/src/pages/Model/{index.jsx => index.tsx} (77%) rename react-ui/src/pages/Pipeline/editPipeline/{props.jsx => props.tsx} (79%) diff --git a/react-ui/src/components/ParameterInput/index.tsx b/react-ui/src/components/ParameterInput/index.tsx index 27ba2856..aa573091 100644 --- a/react-ui/src/components/ParameterInput/index.tsx +++ b/react-ui/src/components/ParameterInput/index.tsx @@ -37,8 +37,6 @@ function ParameterInput({ disabled = false, ...rest }: ParameterInputProps) { - // console.log('ParameterInput', value); - const valueObj = typeof value === 'string' ? { value: value, fromSelect: false, showValue: value } : value; if (valueObj && !valueObj.showValue) { diff --git a/react-ui/src/components/ParameterSelect/index.less b/react-ui/src/components/ParameterSelect/index.less new file mode 100644 index 00000000..e69de29b diff --git a/react-ui/src/components/ParameterSelect/index.tsx b/react-ui/src/components/ParameterSelect/index.tsx new file mode 100644 index 00000000..d96a886c --- /dev/null +++ b/react-ui/src/components/ParameterSelect/index.tsx @@ -0,0 +1,119 @@ +import { to } from '@/utils/promise'; +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['filterOption'] = ( + input: string, + option?: ComputingResource, +) => { + return ( + option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false + ); +}; + +type SelectPropsConfig = { + getOptions: () => Promise; + fieldNames?: SelectProps['fieldNames']; + filterOption?: SelectProps['filterOption']; +}; + +const config: Record = { + dataset: { + getOptions: async () => { + const res = await getDatasetList({ + page: 0, + size: 1000, + available_range: 0, + }); + return res?.data?.content ?? []; + }, + fieldNames: { + label: 'name', + value: 'id', + }, + }, + model: { + getOptions: async () => { + const res = await getModelList({ + page: 0, + size: 1000, + available_range: 0, + }); + return res?.data?.content ?? []; + }, + 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'], + }, +}; + +type ParameterSelectProps = { + value?: PipelineNodeModelParameter; + onChange?: (value: PipelineNodeModelParameter) => void; +}; + +function ParameterSelect({ value, onChange }: ParameterSelectProps) { + const [options, setOptions] = useState([]); + const valueNonNullable = value ?? ({} as PipelineNodeModelParameter); + const { item_type } = valueNonNullable; + + useEffect(() => { + getSelectOptions(); + }, []); + + const hangleChange = (e: string) => { + onChange?.({ + ...valueNonNullable, + value: e, + }); + }; + + // 获取下拉数据 + const getSelectOptions = async () => { + const propsConfig = config[item_type]; + if (!propsConfig) { + return; + } + const getOptions = propsConfig.getOptions; + const [res] = await to(getOptions()); + if (res) { + setOptions(res); + } + }; + + return ( + { label: 'description', value: 'standard', }} + showSearch + allowClear /> { { - handleParameterClick(['control_strategy', item.key], { - ...item.value, - value, - fromSelect: true, - showValue: value, - }); - }} - /> - } - // getValueProps={(e) => { - // return { value: e.value }; - // }} - // getValueFromEvent={(e) => { - // return { - // ...item.value, - // value: e.target.value, - // }; - // }} + label={getLabel(item, 'control_strategy')} > @@ -365,20 +394,7 @@ const Props = forwardRef(({ onParentChange }, ref) => { {inParametersList.map((item) => ( { - handleParameterClick(['in_parameters', item.key], { - ...item.value, - value, - fromSelect: true, - showValue: value, - }); - }} - /> - } + label={getLabel(item, 'in_parameters')} required={item.value.require ? true : false} >
@@ -387,11 +403,15 @@ const Props = forwardRef(({ onParentChange }, ref) => { noStyle rules={[{ required: item.value.require ? true : false }]} > - + {item.value.type === 'select' ? ( + + ) : ( + + )} {item.value.type === 'ref' && ( @@ -416,30 +436,8 @@ const Props = forwardRef(({ onParentChange }, ref) => { { - handleParameterClick(['out_parameters', item.key], { - ...item.value, - value, - fromSelect: true, - showValue: value, - }); - }} - /> - } + label={getLabel(item, 'out_parameters')} rules={[{ required: item.value.require ? true : false }]} - // getValueProps={(e) => { - // return { value: e.value }; - // }} - // getValueFromEvent={(e) => { - // return { - // ...item.value, - // value: e.target.value, - // }; - // }} > @@ -449,4 +447,4 @@ const Props = forwardRef(({ onParentChange }, ref) => { ); }); -export default Props; +export default PipelineNodeParameter; diff --git a/react-ui/src/types.ts b/react-ui/src/types.ts index 605131a4..9f558618 100644 --- a/react-ui/src/types.ts +++ b/react-ui/src/types.ts @@ -47,16 +47,19 @@ export type PipelineNodeModel = { // 流水线节点模型数据 export type PipelineNodeModelParameter = { - label: string; - value: any; - require: number; type: string; item_type: string; + label: string; + value: any; + require?: number; placeholder?: string; describe?: string; fromSelect?: boolean; showValue?: any; - editable: number; + editable?: number; + activeTab?: string; // ResourceSelectorModal tab + expandedKeys?: string[]; // ResourceSelectorModal expandedKeys + checkedKeys?: string[]; // ResourceSelectorModal checkedKeys }; // type ChangePropertyType = Omit & { [P in K]: NewType }