feat: add number selection

src/pages/gpu-service/instances/forms/index.tsx

@@ -224,13 +224,14 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
     }, [action, currentData, form, open, namespace]);
 
     const handleFinish = async (values: InstanceFormValues) => {
-      await onFinish({
-        ...values,
-        spec: {
-          ...values.spec,
-          sshPublicKey: { name: sshKeyData?.name }
-        }
-      });
+      console.log('values=========', values);
+      // await onFinish({
+      //   ...values,
+      //   spec: {
+      //     ...values.spec,
+      //     sshPublicKey: { name: sshKeyData?.name }
+      //   }
+      // });
     };
 
     useImperativeHandle(ref, () => ({
@@ -305,7 +306,7 @@ const GPUServiceInstanceForm: React.FC<InstanceFormProps> = forwardRef(
                   id: 'gpuservice.instance.section.type'
                 }),
                 forceRender: true,
-                children: <InstanceTypeFormItem />
+                children: <InstanceTypeFormItem action={action} />
               },
               {
                 key: TABKeysMap.TEMPLATE,

src/pages/gpu-service/instances/forms/instance-type.tsx

@@ -1,6 +1,8 @@
-import { InputNumber as CInputNumber } from '@gpustack/core-ui';
+import { PageAction } from '@/config';
+import { PageActionType } from '@/config/types';
+import NumberSelection from '@/pages/_components/number-selection';
 import { useIntl } from '@umijs/max';
-import { Flex, Form } from 'antd';
+import { Form } from 'antd';
 import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import InstanceTypeItem from '../components/instance-type-item';
@@ -45,7 +47,13 @@ const InstanceTypePicker: React.FC<InstanceTypePickerProps> = ({
   );
 };
 
-const InstanceTypeFormItem = () => {
+interface InstanceTypeFormItemProps {
+  action: PageActionType;
+}
+
+const InstanceTypeFormItem: React.FC<InstanceTypeFormItemProps> = ({
+  action
+}) => {
   const intl = useIntl();
   const form = Form.useFormInstance<FormData>();
   const typeName = Form.useWatch(['spec', 'type'], form) as string | undefined;
@@ -65,8 +73,8 @@ const InstanceTypeFormItem = () => {
   const maxGpuCount = useMemo(() => {
     const onceMaxRequest =
       selectedInstanceType?.status?.accelerator?.onceMaxRequest;
-    const num = onceMaxRequest ? Number(onceMaxRequest) : NaN;
-    return Number.isFinite(num) && num > 0 ? num : 1;
+    const num = onceMaxRequest ? Number(onceMaxRequest) : 0;
+    return num;
   }, [selectedInstanceType]);
 
   useEffect(() => {
@@ -135,24 +143,12 @@ const InstanceTypeFormItem = () => {
             }
           ]}
         >
-          <CInputNumber
+          <NumberSelection
             min={1}
             max={maxGpuCount}
-            precision={0}
-            label={
-              <Flex gap={4} align="center">
-                {intl.formatMessage({ id: 'gpuservice.instance.gpuCount' })}
-                <span>
-                  (
-                  {intl.formatMessage(
-                    { id: 'common.max' },
-                    { count: maxGpuCount }
-                  )}
-                  )
-                </span>
-              </Flex>
-            }
-            required
+            step={1}
+            disabled={action === PageAction.EDIT}
+            label={intl.formatMessage({ id: 'gpuservice.instance.gpuCount' })}
           />
         </Form.Item>
       )}

src/pages/gpu-service/instances/forms/storage-volume.tsx

@@ -106,16 +106,17 @@ const StorageVolume = ({
             }
           ]}
         />
-        {action === PageAction.CREATE && (
-          <Button
-            type="link"
-            size="small"
-            style={{ marginBottom: 6 }}
-            onClick={() => setOverlayOpen(true)}
-          >
-            {intl.formatMessage({ id: 'gpuservice.storage.add' })}
-          </Button>
-        )}
+        {action === PageAction.CREATE &&
+          storageMode === StorageModeValueMap.Existing && (
+            <Button
+              type="link"
+              size="small"
+              style={{ marginBottom: 6 }}
+              onClick={() => setOverlayOpen(true)}
+            >
+              {intl.formatMessage({ id: 'gpuservice.storage.add' })}
+            </Button>
+          )}
       </Flex>
 
       {storageMode === StorageModeValueMap.Existing && (