chore: os image filter

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()}
-        <Container>
-          <Content>{renderForms()}</Content>
-        </Container>
+        <StepsContext.Provider
+          value={{
+            formValues: formValues
+          }}
+        >
+          {renderModules()}
+          <Container>
+            <Content>{renderForms()}</Content>
+          </Container>
+        </StepsContext.Provider>
       </div>
     </PageContainerInner>
   );

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 (
-    <NoContent>
-      {intl.formatMessage({ id: 'clusters.create.noImages' })}
-    </NoContent>
-  );
-};
-
 const RenderLabel = (data: {
   label: React.ReactNode;
   vendor: string;
@@ -179,6 +172,7 @@ const PoolForm: React.FC<AddModalProps> = 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<AddModalProps> = 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<AddModalProps> = 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<AddModalProps> = forwardRef((props, ref) => {
               }
               labelRender={imageLabelRender}
               placeholder={currentData?.image_name}
-              options={osImageList}
+              options={imageList}
               disabled={action === PageAction.EDIT}
               label={intl.formatMessage({
                 id: 'clusters.workerpool.osImage'

src/pages/cluster-management/config/steps-context.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+export interface StepsContextProps {
+  formValues: Record<string, any>;
+}
+
+export const StepsContext = createContext<StepsContextProps>({
+  formValues: {}
+});
+
+export const useStepsContext = () => useContext(StepsContext);

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);
   };
 

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]);