fix: ensure valid accelerator type (#2729)

* refactor: `useResourceSlotsDetails` returns details info * fix: ensure valid accelerator type * fix: lint * fix: `mergedResourceSlots`
lablup · Sep 30, 2024 · 431f70d · 431f70d
1 parent 25973e0
commit 431f70d
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 63 deletions.
diff --git a/react/src/components/AgentDetailModal.tsx b/react/src/components/AgentDetailModal.tsx
@@ -32,7 +32,7 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
 }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
-  const [resourceSlotsDetails] = useResourceSlotsDetails();
+  const { mergedResourceSlots } = useResourceSlotsDetails();
   const agent = useFragment(
     graphql`
       fragment AgentDetailModalFragment on Agent {
@@ -64,7 +64,7 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
             {parsedLiveStat?.devices?.cpu_util ? (
               <Flex direction="column" gap="xxs" align="stretch">
                 <Typography.Title level={5} style={{ marginTop: 0 }}>
-                  {resourceSlotsDetails?.cpu?.human_readable_name}
+                  {mergedResourceSlots?.cpu?.human_readable_name}
                 </Typography.Title>
                 {_.map(parsedLiveStat?.devices?.cpu_util, (value, key) => (
                   <Flex justify="between">
@@ -73,7 +73,7 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
                       type="secondary"
                       style={{ flex: 0.5 }}
                     >
-                      {resourceSlotsDetails?.cpu?.human_readable_name}
+                      {mergedResourceSlots?.cpu?.human_readable_name}
                       {key}
                     </Typography.Text>
                     <BAIProgressWithLabel
@@ -89,7 +89,7 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
             {parsedAvailableSlots?.mem ? (
               <Flex direction="column" gap="xxs" align="stretch">
                 <Typography.Title level={5} style={{ marginTop: 0 }}>
-                  {resourceSlotsDetails?.mem?.human_readable_name}
+                  {mergedResourceSlots?.mem?.human_readable_name}
                 </Typography.Title>
                 <BAIProgressWithLabel
                   percent={
@@ -145,7 +145,7 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
                 <Col xs={24} sm={12}>
                   <Flex direction="column" gap="xxs" align="stretch">
                     <Typography.Title level={5} style={{ marginTop: 0 }}>
-                      {resourceSlotsDetails?.[deviceName]?.human_readable_name}{' '}
+                      {mergedResourceSlots?.[deviceName]?.human_readable_name}{' '}
                       {t('session.Utilization')}
                     </Typography.Title>
                     {_.map(
@@ -158,7 +158,7 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
                             style={{ flex: 0.5 }}
                           >
                             {
-                              resourceSlotsDetails?.[deviceName]
+                              mergedResourceSlots?.[deviceName]
                                 ?.human_readable_name
                             }
                             {index}
@@ -179,7 +179,7 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
                 <Col xs={24} sm={12}>
                   <Flex direction="column" gap="xxs" align="stretch">
                     <Typography.Title level={5} style={{ marginTop: 0 }}>
-                      {resourceSlotsDetails?.[deviceName]?.human_readable_name}{' '}
+                      {mergedResourceSlots?.[deviceName]?.human_readable_name}{' '}
                       {t('session.launcher.Memory')}
                     </Typography.Title>
                     {_.map(
@@ -192,7 +192,7 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
                             style={{ flex: 0.5 }}
                           >
                             {
-                              resourceSlotsDetails?.[deviceName]
+                              mergedResourceSlots?.[deviceName]
                                 ?.human_readable_name
                             }
                             {index}

diff --git a/react/src/components/AgentList.tsx b/react/src/components/AgentList.tsx
@@ -65,7 +65,7 @@ const AgentList: React.FC<AgentListProps> = ({
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const { isDarkMode } = useThemeMode();
-  const [resourceSlotsDetails] = useResourceSlotsDetails();
+  const { mergedResourceSlots } = useResourceSlotsDetails();
   const [currentAgentInfo, setCurrentAgentInfo] =
     useState<AgentDetailModalFragment$key | null>();
   const [currentSettingAgent, setCurrentSettingAgent] =
@@ -303,7 +303,7 @@ const AgentList: React.FC<AgentListProps> = ({
                           type="secondary"
                           style={{ fontSize: token.sizeXS }}
                         >
-                          {resourceSlotsDetails?.cpu?.display_unit}
+                          {mergedResourceSlots?.cpu?.display_unit}
                         </Typography.Text>
                       </Flex>
                       <BAIProgressWithLabel
@@ -392,7 +392,7 @@ const AgentList: React.FC<AgentListProps> = ({
                           type="secondary"
                           style={{ fontSize: token.sizeXS }}
                         >
-                          {resourceSlotsDetails?.[key]?.display_unit}
+                          {mergedResourceSlots?.[key]?.display_unit}
                         </Typography.Text>
                       </Flex>
                       <BAIProgressWithLabel
@@ -475,7 +475,7 @@ const AgentList: React.FC<AgentListProps> = ({
             <Flex direction="column" gap="xxs">
               <Flex justify="between" style={{ minWidth: 200 }}>
                 <Typography.Text>
-                  {resourceSlotsDetails?.cpu?.human_readable_name}
+                  {mergedResourceSlots?.cpu?.human_readable_name}
                 </Typography.Text>
                 <BAIProgressWithLabel
                   percent={liveStat.cpu_util.ratio * 100}
@@ -490,7 +490,7 @@ const AgentList: React.FC<AgentListProps> = ({
               </Flex>
               <Flex justify="between" style={{ minWidth: 200 }}>
                 <Typography.Text>
-                  {resourceSlotsDetails?.mem?.human_readable_name}
+                  {mergedResourceSlots?.mem?.human_readable_name}
                 </Typography.Text>
                 <BAIProgressWithLabel
                   percent={liveStat.mem_util.ratio}
@@ -518,10 +518,7 @@ const AgentList: React.FC<AgentListProps> = ({
                       gap="xxs"
                     >
                       <Typography.Text>
-                        {
-                          resourceSlotsDetails?.[deviceName]
-                            ?.human_readable_name
-                        }
+                        {mergedResourceSlots?.[deviceName]?.human_readable_name}
                         (util)
                       </Typography.Text>
                       <BAIProgressWithLabel
@@ -554,10 +551,7 @@ const AgentList: React.FC<AgentListProps> = ({
                       gap="xxs"
                     >
                       <Typography.Text>
-                        {
-                          resourceSlotsDetails?.[deviceName]
-                            ?.human_readable_name
-                        }
+                        {mergedResourceSlots?.[deviceName]?.human_readable_name}
                         (mem)
                       </Typography.Text>
                       <BAIProgressWithLabel

diff --git a/react/src/components/ImageResourceFormItem.tsx b/react/src/components/ImageResourceFormItem.tsx
@@ -21,23 +21,23 @@ const ImageResourceFormItem: React.FC<ImageResourceFormItemProps> = ({
 }) => {
   const { token } = theme.useToken();
 
-  const [resourceSlotsDetails] = useResourceSlotsDetails();
+  const { mergedResourceSlots } = useResourceSlotsDetails();
 
   const getResourceInfo = (type: string) => {
     return (
       {
         cpu: {
-          label: resourceSlotsDetails?.cpu?.description,
+          label: mergedResourceSlots?.cpu?.description,
           steps: _.map(
             ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
             (value) => ({
               value,
-              label: `${value} ${resourceSlotsDetails?.cpu?.display_unit}`,
+              label: `${value} ${mergedResourceSlots?.cpu?.display_unit}`,
             }),
           ),
         },
         mem: {
-          label: resourceSlotsDetails?.mem?.description,
+          label: mergedResourceSlots?.mem?.description,
           steps: _.map(
             [
               '64m',
@@ -62,31 +62,31 @@ const ImageResourceFormItem: React.FC<ImageResourceFormItemProps> = ({
           ),
         },
         'cuda.device': {
-          label: resourceSlotsDetails?.['cuda.device']?.description,
+          label: mergedResourceSlots?.['cuda.device']?.description,
           steps: _.map(['0', '1', '2', '3', '4', '5', '6', '7', '8'], (v) => ({
             value: v,
-            label: `${v} ${resourceSlotsDetails?.['cuda.device']?.display_unit}`,
+            label: `${v} ${mergedResourceSlots?.['cuda.device']?.display_unit}`,
           })),
         },
         'cuda.shares': {
-          label: resourceSlotsDetails?.['cuda.shares']?.description,
+          label: mergedResourceSlots?.['cuda.shares']?.description,
           steps: _.map(
             ['0', '0.1', '0.2', '0.5', '1.0', '2.0', '4.0', '8.0'],
             (v) => ({
               value: v,
-              label: `${v} ${resourceSlotsDetails?.['cuda.shares']?.display_unit}`,
+              label: `${v} ${mergedResourceSlots?.['cuda.shares']?.display_unit}`,
             }),
           ),
         },
         'rocm.device': {
-          label: resourceSlotsDetails?.['rocm.device']?.description,
+          label: mergedResourceSlots?.['rocm.device']?.description,
           steps: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
         },
       }[type] || {
-        label: resourceSlotsDetails?.[type]?.description,
+        label: mergedResourceSlots?.[type]?.description,
         steps: _.map(['0', '1', '2', '3', '4'], (v) => ({
           value: v,
-          label: `${v} ${resourceSlotsDetails?.[type]?.display_unit || ''}`,
+          label: `${v} ${mergedResourceSlots?.[type]?.display_unit || ''}`,
         })),
       }
     );

diff --git a/react/src/components/KeypairResourcePolicySettingModal.tsx b/react/src/components/KeypairResourcePolicySettingModal.tsx
@@ -58,7 +58,7 @@ const KeypairResourcePolicySettingModal: React.FC<
   const { message } = App.useApp();
   const formRef = useRef<FormInstance>(null);
   const [resourceSlots] = useResourceSlots();
-  const [resourceSlotsDetails] = useResourceSlotsDetails();
+  const { mergedResourceSlots } = useResourceSlotsDetails();
   const baiClient = useSuspendedBackendaiClient();
   const isDeprecatedMaxVfolderCountInKeypairResourcePolicy =
     baiClient?.supports(
@@ -342,7 +342,7 @@ const KeypairResourcePolicySettingModal: React.FC<
                       <FormItemWithUnlimited
                         unlimitedValue={undefined}
                         label={
-                          _.get(resourceSlotsDetails, resourceSlotKey)
+                          _.get(mergedResourceSlots, resourceSlotKey)
                             ?.description || resourceSlotKey
                         }
                         name={['parsedTotalResourceSlots', resourceSlotKey]}
@@ -377,7 +377,7 @@ const KeypairResourcePolicySettingModal: React.FC<
                               _.includes(resourceSlotKey, '.shares') ? 0.1 : 1
                             }
                             addonAfter={
-                              _.get(resourceSlotsDetails, resourceSlotKey)
+                              _.get(mergedResourceSlots, resourceSlotKey)
                                 ?.display_unit
                             }
                           />

diff --git a/react/src/components/ResourceAllocationFormItems.tsx b/react/src/components/ResourceAllocationFormItems.tsx
@@ -4,7 +4,7 @@ import {
   iSizeToSize,
 } from '../helper';
 import { useSuspendedBackendaiClient } from '../hooks';
-import { useResourceSlots, useResourceSlotsDetails } from '../hooks/backendai';
+import { useResourceSlotsDetails } from '../hooks/backendai';
 import { useCurrentKeyPairResourcePolicyLazyLoadQuery } from '../hooks/hooksUsingRelay';
 import {
   useCurrentProjectValue,
@@ -98,7 +98,6 @@ const ResourceAllocationFormItems: React.FC<
   const { token } = theme.useToken();
 
   const baiClient = useSuspendedBackendaiClient();
-  const [resourceSlots] = useResourceSlots();
 
   const [{ keypairResourcePolicy, sessionLimitAndRemaining }] =
     useCurrentKeyPairResourcePolicyLazyLoadQuery();
@@ -121,9 +120,8 @@ const ResourceAllocationFormItems: React.FC<
       currentImage: currentImage,
     });
 
-  const [resourceSlotsDetails] = useResourceSlotsDetails(
-    currentResourceGroup || undefined,
-  );
+  const { mergedResourceSlots, resourceSlotsInRG: resourceSlots } =
+    useResourceSlotsDetails(currentResourceGroup || undefined);
 
   const acceleratorSlots = _.omitBy(resourceSlots, (value, key) => {
     if (['cpu', 'mem', 'shmem'].includes(key)) return true;
@@ -183,7 +181,7 @@ const ResourceAllocationFormItems: React.FC<
         form.getFieldValue('allocationPreset'),
       )
     ) {
-      ensureValidAcceleratorType();
+      // if the current preset is custom or minimum-required, do nothing.
     } else {
       if (
         allocatablePresetNames.includes(form.getFieldValue('allocationPreset'))
@@ -197,13 +195,12 @@ const ResourceAllocationFormItems: React.FC<
         updateResourceFieldsBasedOnPreset(autoSelectedPreset);
       } else {
         // if the current preset is not available in the current resource group, set to custom
-        ensureValidAcceleratorType();
         form.setFieldsValue({
           allocationPreset: 'custom',
         });
       }
     }
-
+    ensureValidAcceleratorType();
     form
       .validateFields(['resource'], {
         recursive: true,
@@ -468,7 +465,7 @@ const ResourceAllocationFormItems: React.FC<
                     name={['resource', 'cpu']}
                     // initialValue={0}
                     label={
-                      resourceSlotsDetails?.cpu?.human_readable_name || 'CPU'
+                      mergedResourceSlots?.cpu?.human_readable_name || 'CPU'
                     }
                     tooltip={{
                       placement: 'right',
@@ -525,7 +522,7 @@ const ResourceAllocationFormItems: React.FC<
                     <InputNumberWithSlider
                       inputNumberProps={{
                         addonAfter:
-                          resourceSlotsDetails?.cpu?.display_unit ||
+                          mergedResourceSlots?.cpu?.display_unit ||
                           t('session.launcher.Core'),
                       }}
                       sliderProps={{
@@ -1030,7 +1027,7 @@ const ResourceAllocationFormItems: React.FC<
                             },
                             tooltip: {
                               formatter: (value = 0) => {
-                                return `${value} ${resourceSlotsDetails?.[currentAcceleratorType]?.display_unit || ''}`;
+                                return `${value} ${mergedResourceSlots?.[currentAcceleratorType]?.display_unit || ''}`;
                               },
                               open:
                                 currentImageAcceleratorLimits.length <= 0
@@ -1094,7 +1091,7 @@ const ResourceAllocationFormItems: React.FC<
                                       return {
                                         value: name,
                                         label:
-                                          resourceSlotsDetails?.[name]
+                                          mergedResourceSlots?.[name]
                                             ?.display_unit || 'UNIT',
                                         disabled:
                                           currentImageAcceleratorLimits.length >

diff --git a/react/src/components/ResourceNumber.tsx b/react/src/components/ResourceNumber.tsx
@@ -39,21 +39,21 @@ const ResourceNumber: React.FC<ResourceNumberProps> = ({
 }) => {
   const { token } = theme.useToken();
   const currentGroup = useCurrentResourceGroupValue();
-  const [resourceSlotsDetails] = useResourceSlotsDetails(
+  const { mergedResourceSlots } = useResourceSlotsDetails(
     currentGroup || undefined,
   );
 
   const formatAmount = (amount: string) => {
-    return resourceSlotsDetails?.[type]?.number_format.binary
+    return mergedResourceSlots?.[type]?.number_format.binary
       ? Number(iSizeToSize(amount, 'g', 3, true)?.numberFixed).toString()
-      : (resourceSlotsDetails?.[type]?.number_format.round_length || 0) > 0
+      : (mergedResourceSlots?.[type]?.number_format.round_length || 0) > 0
         ? parseFloat(amount).toFixed(2)
         : amount;
   };
 
   return (
     <Flex direction="row" gap="xxs">
-      {resourceSlotsDetails?.[type] ? (
+      {mergedResourceSlots?.[type] ? (
         <ResourceTypeIcon type={type} showTooltip={!hideTooltip} />
       ) : (
         type
@@ -68,7 +68,7 @@ const ResourceNumber: React.FC<ResourceNumberProps> = ({
             : `~${formatAmount(max)}`}
       </Typography.Text>
       <Typography.Text type="secondary">
-        {resourceSlotsDetails?.[type]?.display_unit || ''}
+        {mergedResourceSlots?.[type]?.display_unit || ''}
       </Typography.Text>
       {type === 'mem' && opts?.shmem && opts?.shmem > 0 ? (
         <Typography.Text

diff --git a/react/src/components/ResourcePresetSettingModal.tsx b/react/src/components/ResourcePresetSettingModal.tsx
@@ -35,7 +35,7 @@ const ResourcePresetSettingModal: React.FC<ResourcePresetSettingModalProps> = ({
   const formRef = useRef<FormInstance>(null);
 
   const [resourceSlots] = useResourceSlots();
-  const [resourceSlotsDetails] = useResourceSlotsDetails();
+  const { mergedResourceSlots } = useResourceSlotsDetails();
 
   const resourcePreset = useFragment(
     graphql`
@@ -231,7 +231,7 @@ const ResourcePresetSettingModal: React.FC<ResourcePresetSettingModalProps> = ({
                     >
                       <Form.Item
                         label={
-                          _.get(resourceSlotsDetails, resourceSlotKey)
+                          _.get(mergedResourceSlots, resourceSlotKey)
                             ?.description || resourceSlotKey
                         }
                         name={['resource_slots', resourceSlotKey]}
@@ -266,7 +266,7 @@ const ResourcePresetSettingModal: React.FC<ResourcePresetSettingModalProps> = ({
                               _.includes(resourceSlotKey, '.shares') ? 0.1 : 1
                             }
                             addonAfter={
-                              _.get(resourceSlotsDetails, resourceSlotKey)
+                              _.get(mergedResourceSlots, resourceSlotKey)
                                 ?.display_unit
                             }
                           />