fix: show max gpu

src/pages/gpu-service/instances/components/instance-type-item.tsx

@@ -58,7 +58,7 @@ interface InstanceTypeItemProps {
 
 const MetaItem: React.FC<{
   icon: string;
-  label: string;
+  label?: string;
   value?: string | null;
   showDot?: boolean;
   show?: boolean;
@@ -141,12 +141,18 @@ const InstanceTypeItem: React.FC<InstanceTypeItemProps> = ({ item }) => {
                 value={specData?.sliced}
               ></MetaItem>
               <MetaItem
-                show={!!remainingData.accelerator}
+                show={!!item.maxAccelerator}
                 icon="icon-database"
-                label={intl.formatMessage({
-                  id: 'gpuservice.instance.stock'
-                })}
-                value={remainingData.accelerator}
+                value={
+                  item.maxAccelerator! > 0
+                    ? `${intl.formatMessage(
+                        {
+                          id: 'common.max'
+                        },
+                        { count: item.maxAccelerator }
+                      )}`
+                    : '-'
+                }
               ></MetaItem>
             </span>
           )}

src/pages/gpu-service/instances/config/types.ts

@@ -133,6 +133,7 @@ export interface InstanceTypeItem {
   name: string;
   spec: InstanceTypeSpec;
   disabled?: boolean;
+  maxAccelerator?: number;
   status: InstanceTypeStatus;
 }
 

src/pages/gpu-service/instances/services/use-query-instance-types.ts

@@ -25,8 +25,16 @@ export default function useQueryInstanceTypes() {
   const [dataList, setDataList] = React.useState<InstanceType[]>([]);
 
   const isAvailable = (item: InstanceTypeItem) => {
-    if (!item.spec?.acceleratable) return true;
-    return getAcceleratorMax(item.status?.acceleratorTiers) > 0;
+    if (!item.spec?.acceleratable)
+      return {
+        maxAccelerator: 0,
+        available: true
+      };
+    const max = getAcceleratorMax(item.status?.acceleratorTiers);
+    return {
+      maxAccelerator: max || 0,
+      available: (max || 0) > 0
+    };
   };
 
   const queryInstanceTypes = async (
@@ -34,10 +42,14 @@ export default function useQueryInstanceTypes() {
   ) => {
     const res = await fetchData(params);
 
-    const list = (res?.items || []).map((item) => ({
-      ...item,
-      disabled: !isAvailable(item)
-    }));
+    const list = (res?.items || []).map((item) => {
+      const remainingData = isAvailable(item);
+      return {
+        ...item,
+        maxAccelerator: remainingData.maxAccelerator,
+        disabled: !remainingData.available
+      };
+    });
     console.log('queryInstanceTypes', list);
     setDataList(list);
     return list;