chore: os image filter

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'