diff --git a/react-ui/src/components/ParameterSelect/index.tsx b/react-ui/src/components/ParameterSelect/index.tsx index 2fe4a127..bb23bc06 100644 --- a/react-ui/src/components/ParameterSelect/index.tsx +++ b/react-ui/src/components/ParameterSelect/index.tsx @@ -4,7 +4,7 @@ * @Description: 参数下拉选择组件,支持资源规格、数据集、模型、服务 */ -import jccResourceState from '@/state/jcdResource'; +import jccResourceState, { getResourceTypes } from '@/state/jcdResource'; import systemResourceState, { getSystemResources } from '@/state/systemResource'; import { to } from '@/utils/promise'; import { useSnapshot } from '@umijs/max'; @@ -59,7 +59,6 @@ function ParameterSelect({ const valueText = typeof selectValue === 'object' && selectValue !== null ? getValue(selectValue) : selectValue; const jccResourceSnap = useSnapshot(jccResourceState); - const { getResourceTypes } = jccResourceSnap; const systemResourceSnap = useSnapshot(systemResourceState); const objectOptions = useMemo(() => { @@ -107,13 +106,15 @@ function ParameterSelect({ setOptions(res); } } else if (dataType === 'remote-resource-type') { - getResourceTypes(); + if (jccResourceSnap.types.length === 0) { + getResourceTypes(); + } } else if (dataType === 'resource') { getSystemResources(); } }; getSelectOptions(); - }, [getOptions, dataType, getResourceTypes]); + }, [getOptions, dataType, getResourceTypes, jccResourceSnap.types]); const selectOptions = ( dataType === 'resource' ? systemResourceSnap.resources : objectSelectOptions diff --git a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx index bb9c1b63..80c6d25d 100644 --- a/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx +++ b/react-ui/src/pages/Experiment/components/ExperimentParameter/index.tsx @@ -1,7 +1,11 @@ import FormInfo from '@/components/FormInfo'; -import ParameterSelect, { type ParameterSelectDataType } from '@/components/ParameterSelect'; +import ParameterSelect, { + type ParameterSelectDataType, + ParameterSelectTypeList, +} from '@/components/ParameterSelect'; import SubAreaTitle from '@/components/SubAreaTitle'; import { ComponentType } from '@/enums'; +import { setCurrentType } from '@/state/jcdResource'; import type { PipelineGlobalParam, PipelineNodeModelParameter, @@ -16,6 +20,12 @@ type ExperimentParameterProps = { }; function ExperimentParameter({ nodeData, globalParams }: ExperimentParameterProps) { + // 云际组件,设置 store 当前资源类型 + if (nodeData.id.startsWith('remote-task')) { + const resourceType = nodeData.in_parameters['--resource_type'].value; + setCurrentType(resourceType); + } + // 表单组件 const getFormComponent = ( item: { key: string; value: PipelineNodeModelParameter }, @@ -65,7 +75,7 @@ function ExperimentParameter({ nodeData, globalParams }: ExperimentParameterProp )} {item.value.type === ComponentType.Select && - (['dataset', 'model', 'service', 'resource'].includes(item.value.item_type) ? ( + (ParameterSelectTypeList.includes(item.value.item_type as ParameterSelectDataType) ? ( ) : null)} {item.value.type !== ComponentType.Map && item.value.type !== ComponentType.Select && ( diff --git a/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx b/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx index d6da2b16..3b0baf90 100644 --- a/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx +++ b/react-ui/src/pages/Pipeline/components/PipelineNodeDrawer/index.tsx @@ -13,7 +13,7 @@ import ResourceSelectorModal, { import SubAreaTitle from '@/components/SubAreaTitle'; import { CommonTabKeys, ComponentType } from '@/enums'; import { canInput, createMenuItems } from '@/pages/Pipeline/Info/utils'; -import state from '@/state/jcdResource'; +import { setCurrentType } from '@/state/jcdResource'; import { PipelineGlobalParam, PipelineNodeModel, @@ -26,7 +26,6 @@ import { to } from '@/utils/promise'; import { removeFormListItem } from '@/utils/ui'; import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { INode } from '@antv/g6'; -import { useSnapshot } from '@umijs/max'; import { Button, Drawer, Flex, Form, Input, MenuProps } from 'antd'; import { RuleObject } from 'antd/es/form'; import { NamePath } from 'antd/es/form/interface'; @@ -52,8 +51,6 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete ); const [open, setOpen] = useState(false); const [menuItems, setMenuItems] = useState([]); - const snap = useSnapshot(state); - const { setCurrentType } = snap; const afterOpenChange = async () => { if (!open) { @@ -155,7 +152,7 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete } }, }), - [form, open, setCurrentType], + [form, open], ); // ref 类型选择 @@ -359,7 +356,7 @@ const PipelineNodeParameter = forwardRef(({ onFormChange }: PipelineNodeParamete parentName: string, ) => { if (itemType === 'remote-resource-type') { - snap.setCurrentType(value.value); + setCurrentType(value.value); const remoteImage = form.getFieldValue([parentName, '--image']); form.setFieldValue([parentName, '--image'], { ...remoteImage, value: undefined }); const remoteResource = form.getFieldValue([parentName, '--resource']); diff --git a/react-ui/src/state/jcdResource.ts b/react-ui/src/state/jcdResource.ts index 69fe7b91..1c53e5f9 100644 --- a/react-ui/src/state/jcdResource.ts +++ b/react-ui/src/state/jcdResource.ts @@ -73,68 +73,71 @@ export interface JCCBaseResourceSpec { type JCCResourceTypeStore = { token: string; + userID: number | undefined; types: JCCResourceType[]; images: JCCResourceImage[]; resources: JCCResourceStandard[]; currentType: string | undefined | null; - jccLogin: () => void; - getResourceTypes: () => void; - getImages: (cardTypes: string[]) => void; - getResources: (cardType: string) => void; - setCurrentType: (cardType: string) => void; }; const state = proxy({ token: '', + userID: undefined, types: [], images: [], resources: [], currentType: undefined, - jccLogin: async () => { - const [res] = await to(jccLoginReq()); - if (res && res.code === 200 && res.data) { - const { tokenHead, token } = res.data; - state.token = tokenHead + token; - } - }, - getResourceTypes: async () => { - const [loginRes] = await to(jccLoginReq()); - if (loginRes && loginRes.code === 200 && loginRes.data) { - const { tokenHead, token, jsmUserInfo } = loginRes.data; - state.token = tokenHead + token; - const userID = jsmUserInfo?.data?.userID; - const [res] = await to(jccGetResourceTypesReq(tokenHead + token, userID)); - if (res && res.code === 'OK' && res.data) { - state.types = res.data.resourceRanges?.map((v: JCCResourceRange) => ({ - label: v.type, - value: v.type, - })); - } - } - }, - getImages: async (cardTypes: string[]) => { - const [res] = await to(jccGetImagesReq(state.token, cardTypes)); - if (res && res.code === 'OK' && res.data) { - state.images = res.data.images; - } - }, - getResources: async (cardType: string) => { - const [res] = await to(jccGetResourcesReq(state.token, cardType)); - if (res && res.code === 'OK' && res.data) { - state.resources = res.data.resource; - } - }, - setCurrentType: (cardType: string | undefined | null) => { - if (state.currentType !== cardType) { - state.currentType = cardType; - state.images = []; - state.resources = []; - if (cardType) { - state.getImages([cardType]); - state.getResources(cardType); +}); + +const jccLogin = async () => { + const [res] = await to(jccLoginReq()); + if (res && res.code === 200 && res.data) { + const { tokenHead, token, jsmUserInfo } = res.data; + state.token = tokenHead + token; + state.userID = jsmUserInfo?.data?.userID; + } +}; + +const getImages = async (cardTypes: string[]) => { + const [res] = await to(jccGetImagesReq(state.token, cardTypes)); + if (res && res.code === 'OK' && res.data) { + state.images = res.data.images; + } +}; + +const getResources = async (cardType: string) => { + const [res] = await to(jccGetResourcesReq(state.token, cardType)); + if (res && res.code === 'OK' && res.data) { + state.resources = res.data.resource; + } +}; + +export const getResourceTypes = async () => { + if (!state.token || !state.userID) { + await jccLogin(); + } + const [res] = await to(jccGetResourceTypesReq(state.token, state.userID!)); + if (res && res.code === 'OK' && res.data) { + state.types = res.data.resourceRanges?.map((v: JCCResourceRange) => ({ + label: v.type, + value: v.type, + })); + } +}; + +export const setCurrentType = async (cardType: string | undefined | null) => { + if (state.currentType !== cardType) { + state.currentType = cardType; + state.images = []; + state.resources = []; + if (cardType) { + if (!state.token) { + await jccLogin(); } + getImages([cardType]); + getResources(cardType); } - }, -}); + } +}; export default state;