From 91cadb5c7c83310f301662953baa7f932c587c25 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Tue, 18 Mar 2025 15:48:11 +0800 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=E6=B3=A8=E9=87=8A=20react-hook?= =?UTF-8?q?s/exhaustive-deps?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/pages/AutoML/Instance/index.tsx | 2 +- react-ui/src/pages/HyperParameter/Instance/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/react-ui/src/pages/AutoML/Instance/index.tsx b/react-ui/src/pages/AutoML/Instance/index.tsx index 2dead784..60cc2142 100644 --- a/react-ui/src/pages/AutoML/Instance/index.tsx +++ b/react-ui/src/pages/AutoML/Instance/index.tsx @@ -40,7 +40,7 @@ function AutoMLInstance() { closeSSE(); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [instanceId]); // 获取实验实例详情 const getExperimentInsInfo = async (isStatusDetermined: boolean) => { diff --git a/react-ui/src/pages/HyperParameter/Instance/index.tsx b/react-ui/src/pages/HyperParameter/Instance/index.tsx index 5e4c5ab7..93b108db 100644 --- a/react-ui/src/pages/HyperParameter/Instance/index.tsx +++ b/react-ui/src/pages/HyperParameter/Instance/index.tsx @@ -44,7 +44,7 @@ function HyperParameterInstance() { closeSSE(); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, [instanceId]); // 获取实验实例详情 const getExperimentInsInfo = async (isStatusDetermined: boolean) => { From 0fd5af7ee381984d99b948d60acbe6ed585c1ec4 Mon Sep 17 00:00:00 2001 From: cp3hnu Date: Wed, 19 Mar 2025 16:57:52 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E8=AE=A1?= =?UTF-8?q?=E7=AE=97=E8=B5=84=E6=BA=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/src/hooks/resource.ts | 35 +++++++++++-------- .../DevelopmentEnvironment/Create/index.tsx | 23 +++--------- .../components/ExperimentParameter/index.tsx | 12 +------ react-ui/src/pages/Experiment/index.jsx | 1 - .../components/CreateForm/ExecuteConfig.tsx | 19 ++-------- .../components/HyperParameterBasic/index.tsx | 4 +-- react-ui/src/pages/HyperParameter/types.ts | 2 +- .../ModelDeployment/CreateVersion/index.tsx | 17 +++------ .../ModelDeployment/ServiceInfo/index.tsx | 2 +- .../components/VersionBasicInfo/index.tsx | 2 +- .../components/VersionCompareModal/index.tsx | 2 +- .../components/PipelineNodeDrawer/index.tsx | 15 ++------ 12 files changed, 42 insertions(+), 92 deletions(-) diff --git a/react-ui/src/hooks/resource.ts b/react-ui/src/hooks/resource.ts index 6331edab..e1e27506 100644 --- a/react-ui/src/hooks/resource.ts +++ b/react-ui/src/hooks/resource.ts @@ -12,6 +12,22 @@ import { useCallback, useEffect, useState } from 'react'; const computingResource: ComputingResource[] = []; +// 过滤资源规格 +export const filterResourceStandard: SelectProps['filterOption'] = ( + input: string, + option?: ComputingResource, +) => { + return ( + option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? false + ); +}; + +// 资源规格字段 +export const resourceFieldNames = { + label: 'description', + value: 'id', +}; + // 获取资源规格 export function useComputingResource() { const [resourceStandardList, setResourceStandardList] = useState([]); @@ -25,7 +41,7 @@ export function useComputingResource() { resource_type: '', }; const [res] = await to(getComputingResourceReq(params)); - if (res && res.data && res.data.content) { + if (res && res.data && Array.isArray(res.data.content)) { setResourceStandardList(res.data.content); computingResource.splice(0, computingResource.length, ...res.data.content); } @@ -38,25 +54,16 @@ export function useComputingResource() { } }, []); - // 过滤资源规格 - const filterResourceStandard: SelectProps['filterOption'] = - useCallback((input: string, option?: ComputingResource) => { - return ( - option?.computing_resource?.toLocaleLowerCase()?.includes(input.toLocaleLowerCase()) ?? - false - ); - }, []); - // 根据 standard 获取 description const getDescription = useCallback( - (standard?: string) => { - if (!standard) { + (id?: string | number) => { + if (!id) { return undefined; } - return resourceStandardList.find((item) => item.standard === standard)?.description; + return resourceStandardList.find((item) => Number(item.id) === Number(id))?.description; }, [resourceStandardList], ); - return [resourceStandardList, filterResourceStandard, getDescription] as const; + return [resourceStandardList, getDescription] as const; } diff --git a/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx index 1a0b9a18..6469c5af 100644 --- a/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx +++ b/react-ui/src/pages/DevelopmentEnvironment/Create/index.tsx @@ -6,17 +6,17 @@ 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 { useComputingResource } from '@/hooks/resource'; import { createEditorReq } from '@/services/developmentEnvironment'; import { to } from '@/utils/promise'; import { useNavigate } from '@umijs/max'; -import { App, Button, Col, Form, Input, Row, Select } from 'antd'; +import { App, Button, Col, Form, Input, Row } from 'antd'; import { omit, pick } from 'lodash'; import styles from './index.less'; @@ -51,7 +51,6 @@ function EditorCreate() { const navigate = useNavigate(); const [form] = Form.useForm(); const { message } = App.useApp(); - const [resourceStandardList, filterResourceStandard] = useComputingResource(); // 创建编辑器 const createEditor = async (formData: FormData) => { @@ -62,8 +61,8 @@ function EditorCreate() { const params = { ...omit(formData, ['image', 'model', 'dataset']), image: image.value, - model: pick(model, ['id', 'version', 'path', 'showValue']), - dataset: pick(dataset, ['id', 'version', 'path', 'showValue']), + model: model && pick(model, ['id', 'version', 'path', 'showValue']), + dataset: dataset && pick(dataset, ['id', 'version', 'path', 'showValue']), }; const [res] = await to(createEditorReq(params)); if (res) { @@ -146,16 +145,7 @@ function EditorCreate() { }, ]} > - + diff --git a/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx index 2f419f66..feb72d48 100644 --- a/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx +++ b/react-ui/src/pages/HyperParameter/components/HyperParameterBasic/index.tsx @@ -41,7 +41,7 @@ function HyperParameterBasic({ runStatus, isInstance = false, }: HyperParameterBasicProps) { - const getResourceDescription = useComputingResource()[2]; + const getResourceDescription = useComputingResource()[1]; const basicDatas: BasicInfoData[] = useMemo(() => { if (!info) { @@ -136,7 +136,7 @@ function HyperParameterBasic({ }, { label: '资源规格', - value: info.resource, + value: info.computing_resource_id, format: getResourceDescription, }, ]; diff --git a/react-ui/src/pages/HyperParameter/types.ts b/react-ui/src/pages/HyperParameter/types.ts index e0c02957..6787f15a 100644 --- a/react-ui/src/pages/HyperParameter/types.ts +++ b/react-ui/src/pages/HyperParameter/types.ts @@ -24,7 +24,7 @@ export type FormData = { num_samples: number; // 总试验次数 max_t: number; // 单次试验最大时间 min_samples_required: number; // 计算中位数的最小试验数 - resource: string; // 资源规格 + computing_resource_id: number; // 资源规格 parameters: FormParameter[]; points_to_evaluate: { [key: string]: any }[]; }; diff --git a/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx b/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx index a4d35444..6b47ce30 100644 --- a/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx +++ b/react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx @@ -5,13 +5,13 @@ */ import CodeSelect from '@/components/CodeSelect'; import PageTitle from '@/components/PageTitle'; +import ParameterSelect from '@/components/ParameterSelect'; import ResourceSelect, { ResourceSelectorType, requiredValidator, type ParameterInputObject, } from '@/components/ResourceSelect'; import SubAreaTitle from '@/components/SubAreaTitle'; -import { useComputingResource } from '@/hooks/resource'; import { createServiceVersionReq, getServiceInfoReq, @@ -23,7 +23,7 @@ import SessionStorage from '@/utils/sessionStorage'; import { removeFormListItem } from '@/utils/ui'; import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { useNavigate, useParams } from '@umijs/max'; -import { App, Button, Col, Flex, Form, Input, InputNumber, Row, Select } from 'antd'; +import { App, Button, Col, Flex, Form, Input, InputNumber, Row } from 'antd'; import { omit, pick } from 'lodash'; import { useEffect, useState } from 'react'; import { CreateServiceVersionFrom, ServiceOperationType, ServiceVersionData } from '../types'; @@ -51,7 +51,7 @@ type ServiceVersionCache = ServiceVersionData & { function CreateServiceVersion() { const navigate = useNavigate(); const [form] = Form.useForm(); - const [resourceStandardList, filterResourceStandard] = useComputingResource(); + const [operationType, setOperationType] = useState(ServiceOperationType.Create); const [lastPage, setLastPage] = useState(CreateServiceVersionFrom.ServiceInfo); const { message } = App.useApp(); @@ -357,16 +357,7 @@ function CreateServiceVersion() { }, ]} > - + Date: Wed, 19 Mar 2025 17:04:26 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=80=89=E6=8B=A9?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=9B=86=E4=B9=8B=E5=90=8E=EF=BC=8C=E6=B2=A1?= =?UTF-8?q?=E6=9C=89=E5=88=A0=E9=99=A4=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react-ui/.nvmrc | 2 +- react-ui/src/components/CodeSelect/index.tsx | 7 ++ .../src/components/ParameterInput/index.tsx | 18 ++-- .../src/components/ParameterSelect/config.tsx | 26 +----- .../src/components/ParameterSelect/index.tsx | 12 ++- .../src/components/ResourceSelect/index.tsx | 82 +++++++++---------- .../components/CreateForm/DatasetConfig.tsx | 1 - .../components/CreateForm/ExecuteConfig.tsx | 7 +- .../Experiment/components/LogGroup/index.tsx | 24 +++--- .../ModelDeployment/CreateVersion/index.tsx | 2 - react-ui/src/pages/Pipeline/Info/index.jsx | 2 +- react-ui/src/stories/CodeSelect.stories.tsx | 1 + .../src/stories/ParameterInput.stories.tsx | 70 ++++++---------- .../src/stories/ResourceSelect.stories.tsx | 4 +- 14 files changed, 119 insertions(+), 139 deletions(-) diff --git a/react-ui/.nvmrc b/react-ui/.nvmrc index 8ddbc0c6..216afccf 100644 --- a/react-ui/.nvmrc +++ b/react-ui/.nvmrc @@ -1 +1 @@ -v18.16.0 +v18.20.7 diff --git a/react-ui/src/components/CodeSelect/index.tsx b/react-ui/src/components/CodeSelect/index.tsx index d2afbb94..c6486d1e 100644 --- a/react-ui/src/components/CodeSelect/index.tsx +++ b/react-ui/src/components/CodeSelect/index.tsx @@ -30,6 +30,7 @@ function CodeSelect({ onChange, ...rest }: CodeSelectProps) { + // 选择代码配置 const selectResource = () => { const { close } = openAntdModal(CodeSelectorModal, { onOk: (res) => { @@ -59,6 +60,11 @@ function CodeSelect({ }); }; + // 删除 + const handleRemove = () => { + onChange?.(undefined); + }; + return (