refactor: improve resource allocation form item labels with resource …

…details API (#2485)

### TL;DR

Add functionality to use `resourceSlotsDetails` for better resource information display in `ResourceAllocationFormItems` and `ResourceNumber` components.

### What changed?

- Imported `useResourceSlotsDetails` from `backendai` hooks
- Added `resourceSlotsDetails` usage in `ResourceAllocationFormItems`
- Updated `ResourceNumber` component to use `resourceSlotsDetails` for better display of resources
- Adjusted stale time for `useResourceSlotsDetails` query

### How to test?

1. Ensure that the resource display reflects human-readable names and units as provided by `resourceSlotsDetails`.
2. Check the display of CPU and memory resources in the `ResourceAllocationFormItems`.
3. Verify the `ResourceNumber` component displays the updated format and units.

### Why make this change?

Enhances the clarity and accuracy of resource information displayed to the users through the `ResourceAllocationFormItems` and `ResourceNumber` components by utilizing detailed slot information.

---

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

react/src/components/AgentList.tsx

@@ -14,7 +14,7 @@ import BAIProgressWithLabel from './BAIProgressWithLabel';
 import BAIPropertyFilter from './BAIPropertyFilter';
 import DoubleTag from './DoubleTag';
 import Flex from './Flex';
-import { ResourceTypeIcon, ResourceTypeKey } from './ResourceNumber';
+import { ResourceTypeIcon } from './ResourceNumber';
 import TableColumnsSettingModal from './TableColumnsSettingModal';
 import { AgentDetailModalFragment$key } from './__generated__/AgentDetailModalFragment.graphql';
 import {
@@ -361,10 +361,7 @@ const AgentList: React.FC<AgentListProps> = ({
                 return (
                   <Flex key={key} justify="between" style={{ minWidth: 220 }}>
                     <Flex gap="xxs">
-                      <ResourceTypeIcon
-                        key={key as ResourceTypeKey}
-                        type={key as ResourceTypeKey}
-                      />
+                      <ResourceTypeIcon key={key} type={key} />
                       <Typography.Text>
                         {parsedOccupiedSlots[key] ?? 0}/
                         {parsedAvailableSlots[key] ?? 0}

react/src/components/ResourceAllocationFormItems.tsx

@@ -4,7 +4,7 @@ import {
   iSizeToSize,
 } from '../helper';
 import { useSuspendedBackendaiClient } from '../hooks';
-import { useResourceSlots } from '../hooks/backendai';
+import { useResourceSlots, useResourceSlotsDetails } from '../hooks/backendai';
 import { useCurrentKeyPairResourcePolicyLazyLoadQuery } from '../hooks/hooksUsingRelay';
 import {
   useCurrentProjectValue,
@@ -107,6 +107,10 @@ const ResourceAllocationFormItems: React.FC<
       currentImage: currentImage,
     });
 
+  const [resourceSlotsDetails] = useResourceSlotsDetails(
+    currentResourceGroup || undefined,
+  );
+
   const acceleratorSlots = _.omitBy(resourceSlots, (value, key) => {
     if (['cpu', 'mem', 'shmem'].includes(key)) return true;
 
@@ -480,7 +484,9 @@ const ResourceAllocationFormItems: React.FC<
                   <Form.Item
                     name={['resource', 'cpu']}
                     // initialValue={0}
-                    label={t('session.launcher.CPU')}
+                    label={
+                      resourceSlotsDetails?.cpu.human_readable_name || 'CPU'
+                    }
                     tooltip={{
                       placement: 'right',
                       title: <Trans i18nKey={'session.launcher.DescCPU'} />,
@@ -517,7 +523,9 @@ const ResourceAllocationFormItems: React.FC<
                   >
                     <InputNumberWithSlider
                       inputNumberProps={{
-                        addonAfter: t('session.launcher.Core'),
+                        addonAfter:
+                          resourceSlotsDetails?.cpu.display_unit ||
+                          t('session.launcher.Core'),
                       }}
                       sliderProps={{
                         marks: {

react/src/components/ResourceNumber.tsx

@@ -1,24 +1,11 @@
 import { iSizeToSize } from '../helper';
+import { useResourceSlotsDetails } from '../hooks/backendai';
+import { useCurrentResourceGroupValue } from '../hooks/useCurrentProject';
 import Flex from './Flex';
 import { Tooltip, Typography, theme } from 'antd';
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const resourceTypes = [
-  'cpu',
-  'mem',
-  'cuda.device',
-  'cuda.shares',
-  'rocm.device',
-  'tpu.device',
-  'ipu.device',
-  'atom.device',
-  'warboy.device',
-  'hyperaccel-lpu.device',
-] as const;
-
-export type ResourceTypeKey = (typeof resourceTypes)[number];
-
 export const ACCELERATOR_UNIT_MAP: {
   [key: string]: string;
 } = {
@@ -35,8 +22,8 @@ export const ACCELERATOR_UNIT_MAP: {
 export type ResourceOpts = {
   shmem?: number;
 };
-interface Props {
-  type: ResourceTypeKey;
+interface ResourceNumberProps {
+  type: string;
   extra?: ReactElement;
   opts?: ResourceOpts;
   value: string;
@@ -46,37 +33,37 @@ interface Props {
 type ResourceTypeInfo<V> = {
   [key in string]: V;
 };
-const ResourceNumber: React.FC<Props> = ({
+const ResourceNumber: React.FC<ResourceNumberProps> = ({
   type,
   value: amount,
   extra,
   opts,
   hideTooltip = false,
 }) => {
-  const { t } = useTranslation();
   const { token } = theme.useToken();
-  const units: ResourceTypeInfo<string> = {
-    cpu: t('session.core'),
-    mem: 'GiB',
-    ...ACCELERATOR_UNIT_MAP,
-  };
+  const currentGroup = useCurrentResourceGroupValue();
+  const [resourceSlotsDetails] = useResourceSlotsDetails(
+    currentGroup || undefined,
+  );
 
   return (
     <Flex direction="row" gap="xxs">
-      {resourceTypes.includes(type) ? (
+      {resourceSlotsDetails?.[type] ? (
         <ResourceTypeIcon type={type} showTooltip={!hideTooltip} />
       ) : (
         type
       )}
 
       <Typography.Text>
-        {units[type] === 'GiB'
+        {resourceSlotsDetails?.[type].number_format.binary
           ? Number(iSizeToSize(amount, 'g', 3, true)?.numberFixed).toString()
-          : units[type] === 'FGPU'
+          : (resourceSlotsDetails?.[type].number_format.round_length || 0) > 0
             ? parseFloat(amount).toFixed(2)
             : amount}
       </Typography.Text>
-      <Typography.Text type="secondary">{units[type]}</Typography.Text>
+      <Typography.Text type="secondary">
+        {resourceSlotsDetails?.[type].display_unit || ''}
+      </Typography.Text>
       {type === 'mem' && opts?.shmem && opts?.shmem > 0 ? (
         <Typography.Text
           type="secondary"
@@ -111,7 +98,7 @@ const MWCIconWrap: React.FC<{ size?: number; children: string }> = ({
 };
 interface AccTypeIconProps
   extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
-  type: ResourceTypeKey;
+  type: string;
   showIcon?: boolean;
   showUnit?: boolean;
   showTooltip?: boolean;

react/src/hooks/backendai.tsx

@@ -58,7 +58,7 @@ type ResourceSlotDetail = {
 
 /**
  * Custom hook to fetch resource slot details by resource group name.
- * @param resourceGroupName - The name of the resource group. if not provided, it will fetch resource/device_metadata.json
+ * @param resourceGroupName - The name of the resource group. if not provided, it will use resource/device_metadata.json
  * @returns An array containing the resource slots and a refresh function.
  */
 export const useResourceSlotsDetails = (resourceGroupName?: string) => {
@@ -85,19 +85,18 @@ export const useResourceSlotsDetails = (resourceGroupName?: string) => {
         });
       }
     },
-    staleTime: 0,
+    staleTime: 3000,
   });
 
+  // TODO: improve waterfall loading
   const { data: deviceMetadata } = useTanQuery<{
     [key: string]: ResourceSlotDetail;
   }>({
     queryKey: ['backendai-metadata-device', key],
     queryFn: () => {
-      return !resourceSlots
-        ? fetch('resources/device_metadata.json')
-            .then((response) => response.json())
-            .then((result) => result?.deviceInfo)
-        : {};
+      return fetch('resources/device_metadata.json')
+        .then((response) => response.json())
+        .then((result) => result?.deviceInfo);
     },
     staleTime: 1000 * 60 * 60 * 24,
   });

react/src/pages/EndpointDetailPage.tsx

@@ -5,7 +5,7 @@ import EndpointTokenGenerationModal from '../components/EndpointTokenGenerationM
 import Flex from '../components/Flex';
 import ImageMetaIcon from '../components/ImageMetaIcon';
 import InferenceSessionErrorModal from '../components/InferenceSessionErrorModal';
-import ResourceNumber, { ResourceTypeKey } from '../components/ResourceNumber';
+import ResourceNumber from '../components/ResourceNumber';
 import ServiceLauncherModal from '../components/ServiceLauncherModal';
 import VFolderLazyView from '../components/VFolderLazyView';
 import { InferenceSessionErrorModalFragment$key } from '../components/__generated__/InferenceSessionErrorModalFragment.graphql';
@@ -314,7 +314,7 @@ const EndpointDetailPage: React.FC<EndpointDetailPageProps> = () => {
           </Tooltip>
           {_.map(
             JSON.parse(endpoint?.resource_slots || '{}'),
-            (value: string, type: ResourceTypeKey) => {
+            (value: string, type) => {
               return (
                 <ResourceNumber
                   key={type}