diff --git a/src/pages/cluster-management/cluster-create.tsx b/src/pages/cluster-management/cluster-create.tsx index a816c26d..45b6d34e 100644 --- a/src/pages/cluster-management/cluster-create.tsx +++ b/src/pages/cluster-management/cluster-create.tsx @@ -20,6 +20,7 @@ import { ProviderType, ProviderValueMap } from './config'; import providerList from './config/providers'; import { StepsContext } from './config/steps-context'; import { ClusterFormData } from './config/types'; +import useSystemConfig from './services/use-system-config'; import { moduleMap, moduleRegistry } from './step-forms/module-registry'; import useStepList from './step-forms/use-step-list'; @@ -38,6 +39,7 @@ const ClusterCreate = () => { const intl = useIntl(); const startStep = 0; const stepList = useStepList(); + const { systemConfig } = useSystemConfig(); const [searchParams] = useSearchParams(); const action = (searchParams.get('action') as PageActionType) || PageAction.CREATE; @@ -308,7 +310,8 @@ const ClusterCreate = () => { )} {renderModules()} diff --git a/src/pages/cluster-management/components/cloud-provider-form.tsx b/src/pages/cluster-management/components/cloud-provider-form.tsx index 7fb60b1f..8d69c587 100644 --- a/src/pages/cluster-management/components/cloud-provider-form.tsx +++ b/src/pages/cluster-management/components/cloud-provider-form.tsx @@ -10,9 +10,9 @@ import { useAtom } from 'jotai'; import _ from 'lodash'; import React, { useEffect } from 'react'; import styled from 'styled-components'; +import { useStepsContext } from '../config/steps-context'; import { ClusterFormData as FormData } from '../config/types'; import { useProviderRegions } from '../hooks/use-provider-regions'; -import useSystemConfig from '../services/use-system-config'; const OptionItem = styled.div` display: flex; @@ -47,7 +47,6 @@ const NotFoundCredentialContent: React.FC = () => { const [, setFromClusterCreation] = useAtom(fromClusterCreationAtom); const intl = useIntl(); const handleOnClick = () => { - console.log('click add credential'); setFromClusterCreation(true); }; @@ -76,7 +75,7 @@ const optionRender = (option: any): React.ReactNode => { const CloudProvider: React.FC = (props) => { const { credentialList, action, credentialID } = props; const intl = useIntl(); - const { systemConfig } = useSystemConfig(); + const { systemConfig } = useStepsContext(); const form = Form.useFormInstance(); const { diff --git a/src/pages/cluster-management/components/pool-form.tsx b/src/pages/cluster-management/components/pool-form.tsx index ecf5cd40..7f95f561 100644 --- a/src/pages/cluster-management/components/pool-form.tsx +++ b/src/pages/cluster-management/components/pool-form.tsx @@ -184,25 +184,36 @@ const PoolForm: React.FC = forwardRef((props, ref) => { useEffect(() => { if (currentData) { - // when change the region, shoudle check the instance type and the os Image. - const selectOSImage = osImageList.find( - (item) => item.os_image === currentData.os_image - ); - const selectInstanceType = instanceTypeList.find( - (item) => item.value === currentData.instance_type - ); - form.setFieldsValue({ - ...currentData, - instance_type: selectInstanceType?.value || '', - os_image: selectOSImage?.os_image || '', - image_name: selectOSImage?.value || '' - }); + if (action === PageAction.CREATE) { + // when change the region, shoudle check the instance type and the os Image. + const selectOSImage = osImageList.find( + (item) => item.os_image === currentData.os_image + ); + const selectInstanceType = instanceTypeList.find( + (item) => item.value === currentData.instance_type + ); - setInstanceSpec(() => { - return selectInstanceType ? currentData.instance_spec : {}; - }); + form.setFieldsValue({ + ...currentData, + instance_type: selectInstanceType?.value || '', + os_image: selectOSImage?.os_image || '', + image_name: selectOSImage?.value || '' + }); + + setInstanceSpec(() => { + return selectInstanceType ? currentData.instance_spec : {}; + }); + } else if (action === PageAction.EDIT) { + form.setFieldsValue({ + ...currentData + }); + + setInstanceSpec(() => { + return currentData.instance_spec || {}; + }); + } } - }, [currentData, instanceTypeList, osImageList]); + }, [currentData, instanceTypeList, osImageList, action]); const updateImageList = useMemoizedFn((instanceSpec: Record) => { if (instanceSpec.count === 8) { diff --git a/src/pages/cluster-management/config/steps-context.tsx b/src/pages/cluster-management/config/steps-context.tsx index f5962fd4..af6f2b3d 100644 --- a/src/pages/cluster-management/config/steps-context.tsx +++ b/src/pages/cluster-management/config/steps-context.tsx @@ -2,10 +2,12 @@ import { createContext, useContext } from 'react'; export interface StepsContextProps { formValues: Record; + systemConfig?: Record; } export const StepsContext = createContext({ - formValues: {} + formValues: {}, + systemConfig: {} }); export const useStepsContext = () => useContext(StepsContext);