diff --git a/src/pages/cluster-management/cluster-create.tsx b/src/pages/cluster-management/cluster-create.tsx index 58c0a42a..42e10c76 100644 --- a/src/pages/cluster-management/cluster-create.tsx +++ b/src/pages/cluster-management/cluster-create.tsx @@ -18,6 +18,7 @@ import FooterButtons from './components/footer-buttons'; import ProviderCatalog from './components/provider-catalog'; import { ProviderType, ProviderValueMap } from './config'; import providerList from './config/providers'; +import { StepsContext } from './config/steps-context'; import { ClusterFormData } from './config/types'; import { moduleMap, moduleRegistry } from './step-forms/module-registry'; import useStepList from './step-forms/use-step-list'; @@ -89,6 +90,7 @@ const ClusterCreate = () => { })); }, [action, extraData.provider, stepList]); + // before moving to the next step, get all form values const getFormFieldsValue = () => { setFormValues((prev) => { const newFormValues = _.cloneDeep(prev); @@ -206,7 +208,7 @@ const ClusterCreate = () => { }; /** - * this function is used to render the modules in the current step + * this function is used to render the modules in the current step, they are not forms * @returns */ const renderModules = () => { @@ -304,10 +306,16 @@ const ClusterCreate = () => { current={extraData.provider} /> )} - {renderModules()} - - {renderForms()} - + + {renderModules()} + + {renderForms()} + + ); diff --git a/src/pages/cluster-management/components/pool-form.tsx b/src/pages/cluster-management/components/pool-form.tsx index b9b8db6d..5fe46041 100644 --- a/src/pages/cluster-management/components/pool-form.tsx +++ b/src/pages/cluster-management/components/pool-form.tsx @@ -24,10 +24,12 @@ import React, { forwardRef, useEffect, useImperativeHandle, + useMemo, useState } from 'react'; import styled from 'styled-components'; import { ProviderType, instanceTypeFieldMap, vendorIconMap } from '../config'; +import { useStepsContext } from '../config/steps-context'; import { NodePoolFormData as FormData } from '../config/types'; import VolumesConfig from './volumes-config'; @@ -85,15 +87,6 @@ const NotFoundContent = () => { ); }; -const NotFoundImageContent = () => { - const intl = useIntl(); - return ( - - {intl.formatMessage({ id: 'clusters.create.noImages' })} - - ); -}; - const RenderLabel = (data: { label: React.ReactNode; vendor: string; @@ -179,6 +172,7 @@ const PoolForm: React.FC = forwardRef((props, ref) => { currentData, collapseProps } = props; + const { formValues } = useStepsContext(); const [instanceTypeList] = useAtom(regionInstanceTypeListAtom); const [osImageList] = useAtom(regionOSImageListAtom); const { collapsible, onToggle, ...restCollapseProps } = collapseProps || {}; @@ -200,6 +194,13 @@ const PoolForm: React.FC = forwardRef((props, ref) => { } }, [currentData]); + const imageList = useMemo(() => { + if (instanceSpec.count === 8) { + return osImageList.filter((item) => item.value === 'gpu-h100x8-base'); + } + return osImageList; + }, [osImageList, instanceSpec]); + const imageLabelRender = (data: { label: React.ReactNode; value: string | number; @@ -250,14 +251,16 @@ const PoolForm: React.FC = forwardRef((props, ref) => { ...option.specInfo, label: option.label, vendor: option.vendor, - description: option.description + description: option.description, + count: option.count }); form.setFieldsValue({ instance_spec: { ...option.specInfo, label: option.label, vendor: option.vendor, - description: option.description + description: option.description, + count: option.count } }); }; @@ -422,7 +425,7 @@ const PoolForm: React.FC = forwardRef((props, ref) => { } labelRender={imageLabelRender} placeholder={currentData?.image_name} - options={osImageList} + options={imageList} disabled={action === PageAction.EDIT} label={intl.formatMessage({ id: 'clusters.workerpool.osImage' diff --git a/src/pages/cluster-management/config/steps-context.tsx b/src/pages/cluster-management/config/steps-context.tsx new file mode 100644 index 00000000..f5962fd4 --- /dev/null +++ b/src/pages/cluster-management/config/steps-context.tsx @@ -0,0 +1,11 @@ +import { createContext, useContext } from 'react'; + +export interface StepsContextProps { + formValues: Record; +} + +export const StepsContext = createContext({ + formValues: {} +}); + +export const useStepsContext = () => useContext(StepsContext); diff --git a/src/pages/cluster-management/hooks/use-provider-regions.ts b/src/pages/cluster-management/hooks/use-provider-regions.ts index cc724e40..ef71af21 100644 --- a/src/pages/cluster-management/hooks/use-provider-regions.ts +++ b/src/pages/cluster-management/hooks/use-provider-regions.ts @@ -126,6 +126,7 @@ export const useProviderRegions = () => { const label = formatLabel(item); const description = `${label} ${item.gpu_info?.count}X`; return { + count: item.gpu_info?.count, label: `${description} - ${formatSpec(specInfo)}`, value: item.slug, description: description, @@ -171,9 +172,12 @@ export const useProviderRegions = () => { }; const updateOSImages = (region: string, allImages?: any[]) => { - const list = (allImages || allOSImageList).filter((item) => - item.regions.includes(region) + const list = (allImages || allOSImageList).filter( + (item) => + item.regions.includes(region) && + ['debian', 'ubuntu'].includes(item.vendor) ); + console.log('osimagelist========', list); setOSImageList(list); }; diff --git a/src/pages/cluster-management/step-forms/worker-pools-form.tsx b/src/pages/cluster-management/step-forms/worker-pools-form.tsx index b0eb6062..36676daf 100644 --- a/src/pages/cluster-management/step-forms/worker-pools-form.tsx +++ b/src/pages/cluster-management/step-forms/worker-pools-form.tsx @@ -108,7 +108,6 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => { } return {}; }); - console.log('gatherFormValues========', resultList); return resultList.filter((item) => item); }; @@ -135,7 +134,6 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => { const newWorkerPools = worker_pools.map( (poolData: NodePoolFormData, index: number) => [index, poolData] ); - console.log('newWorkerPools========', newWorkerPools); setWorkerPoolList(new Map(newWorkerPools)); }; @@ -143,14 +141,12 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => { const values = Object.values(formRefs.current).map((form) => form?.getFieldsValue() ); - console.log('getFieldsValue========', values); return { worker_pools: values }; }; const handleOnToggle = (open: boolean, key: number) => { - console.log('Active keys changed:', key); if (open) { setActiveKey((prev) => new Set([key])); } else { @@ -170,7 +166,6 @@ const WorkerPoolsForm = forwardRef((props: WorkerPoolsFormProps, ref) => { useEffect(() => { if (currentData) { - console.log('currentData===========1=', currentData); setFieldsValue(currentData); } }, [currentData]);