feat(FR-1328): Ensure UI supports MIG usage smoothly (#4880)

Resolves #4066 ([FR-1328](https://lablup.atlassian.net/browse/FR-1328))

# Limit Unique Resource Type Allocation to Maximum of 1

This PR adds a constraint for unique resource types (like TPU) to limit their allocation to a maximum of 1 unit. The implementation:

1. Uses the `useResourceSlots` hook to identify unique resource types
2. Adds validation logic to prevent allocating more than 1 unit of a unique resource type
3. Limits the slider and input controls to a maximum value of 1 for unique resource types
4. Adds appropriate error messages in all supported languages
5. Fixes the CPU utilization display in the Agent Detail Modal by moving the conditional rendering to the correct position

![image.png](https://app.graphite.com/user-attachments/assets/144ef553-599f-47d8-ba46-bd1300bedc99.png)

**Checklist:**

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

[FR-1328]: https://lablup.atlassian.net/browse/FR-1328?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: agatha197

react/src/components/AgentDetailModal.tsx

@@ -66,8 +66,8 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
     >
       <BAIFlex direction="column" align="stretch" gap={'md'}>
         <Row gutter={[24, 24]}>
-          <Col xs={24} sm={12}>
-            {parsedLiveStat?.devices?.cpu_util ? (
+          {parsedLiveStat?.devices?.cpu_util ? (
+            <Col xs={24} sm={12}>
               <BAIFlex direction="column" gap="xxs" align="stretch">
                 <Typography.Title level={5} style={{ marginTop: 0 }}>
                   {mergedResourceSlots?.cpu?.human_readable_name}
@@ -91,8 +91,8 @@ const AgentDetailModal: React.FC<AgentDetailModalProps> = ({
                   </BAIFlex>
                 ))}
               </BAIFlex>
-            ) : null}
-          </Col>
+            </Col>
+          ) : null}
           <Col xs={24} sm={12}>
             {parsedAvailableSlots?.mem ? (
               <BAIFlex direction="column" gap="xxs" align="stretch">

react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx

@@ -5,6 +5,7 @@ import {
   convertToBinaryUnit,
 } from '../../helper';
 import { useSuspendedBackendaiClient } from '../../hooks';
+import { useResourceSlots } from '../../hooks/backendai';
 import { useCurrentKeyPairResourcePolicyLazyLoadQuery } from '../../hooks/hooksUsingRelay';
 import { useCurrentProjectValue } from '../../hooks/useCurrentProject';
 import {
@@ -163,6 +164,8 @@ const ResourceAllocationFormItems: React.FC<
       currentImage: currentImage,
     });
 
+  const [resourceSlots] = useResourceSlots();
+
   const { mergedResourceSlots, resourceSlotsInRG } = useResourceSlotsDetails(
     currentResourceGroupInForm || undefined,
   );
@@ -904,6 +907,12 @@ const ResourceAllocationFormItems: React.FC<
                       currentAcceleratorType,
                       'shares',
                     );
+
+                    const isUniqueType =
+                      resourceSlots[
+                        currentAcceleratorType as keyof typeof resourceSlots
+                      ] === 'unique';
+
                     const isSingleCluster =
                       form.getFieldValue('cluster_size') < 2;
                     const hasQuantumSize = _.isNumber(
@@ -948,6 +957,7 @@ const ResourceAllocationFormItems: React.FC<
                             />
                           ),
                         }}
+                        dependencies={[['resource', 'acceleratorType']]}
                         rules={[
                           {
                             required:
@@ -960,9 +970,12 @@ const ResourceAllocationFormItems: React.FC<
                               resourceLimits.accelerators[
                                 currentAcceleratorType
                               ]?.min || 0,
-                            max: resourceLimits.accelerators[
-                              currentAcceleratorType
-                            ]?.max,
+                            // Unique type should only allow 0 or 1
+                            max: isUniqueType
+                              ? 1
+                              : resourceLimits.accelerators[
+                                  currentAcceleratorType
+                                ]?.max,
                           },
                           {
                             validator: async (_rule: any, value: number) => {
@@ -1053,6 +1066,22 @@ const ResourceAllocationFormItems: React.FC<
                               return Promise.resolve();
                             },
                           },
+                          {
+                            warningOnly: true,
+                            validator: async (_rule, _value) => {
+                              if (isUniqueType) {
+                                return Promise.reject(
+                                  t(
+                                    'session.launcher.CurrentAcceleratorTypeAllowsMaxOne',
+                                    {
+                                      accelerator: currentAcceleratorType,
+                                    },
+                                  ),
+                                );
+                              }
+                              return Promise.resolve();
+                            },
+                          },
                         ]}
                       >
                         <InputNumberWithSlider
@@ -1083,6 +1112,7 @@ const ResourceAllocationFormItems: React.FC<
                                       ]?.max,
                                   }
                                 : {}),
+                              ...(isUniqueType ? { 1: 1 } : {}),
                             },
                             tooltip: {
                               formatter: (value = 0) => {
@@ -1100,8 +1130,12 @@ const ResourceAllocationFormItems: React.FC<
                           }
                           min={0}
                           max={
-                            resourceLimits.accelerators[currentAcceleratorType]
-                              ?.max
+                            // Unique type should only allow 0 or 1
+                            isUniqueType
+                              ? 1
+                              : resourceLimits.accelerators[
+                                  currentAcceleratorType
+                                ]?.max
                           }
                           step={currentAcceleratorStep}
                           onChange={() => {

resources/i18n/de.json

@@ -1524,6 +1524,7 @@
       "Container": "Container",
       "Core": "Ader",
       "CreatedAt": "Erstellt am",
+      "CurrentAcceleratorTypeAllowsMaxOne": "Vom Typ \"{{ accelerator }}\" kann höchstens 1 zugewiesen werden.",
       "CurrentResourceGroup": "Aktuelle Ressourcengruppe",
       "CustomAllocation": "Benutzerdefinierte Zuordnung",
       "CustomResourceApplied": "Benutzerdefinierte Ressource wird angewendet",

resources/i18n/el.json

@@ -1523,6 +1523,7 @@
       "Container": "Δοχείο",
       "Core": "Πυρήνας",
       "CreatedAt": "Δημιουργήθηκε στο",
+      "CurrentAcceleratorTypeAllowsMaxOne": "Μπορεί να εκχωρηθεί μόνο 1 συσκευή τύπου \"{{ accelerator }}\".",
       "CurrentResourceGroup": "Τρέχουσα ομάδα πόρων",
       "CustomAllocation": "Προσαρμοσμένη κατανομή",
       "CustomResourceApplied": "Εφαρμόζεται προσαρμοσμένος πόρος",

resources/i18n/en.json

@@ -1531,6 +1531,7 @@
       "Container": "Container",
       "Core": "Core",
       "CreatedAt": "CreatedAt",
+      "CurrentAcceleratorTypeAllowsMaxOne": "\"{{ accelerator }}\" type can only have a maximum of 1.",
       "CurrentResourceGroup": "Current Resource Group",
       "CustomAllocation": "Custom allocation",
       "CustomResourceApplied": "Custom resource applied",

resources/i18n/es.json

@@ -1526,6 +1526,7 @@
       "Container": "Contenedor",
       "Core": "Núcleo",
       "CreatedAt": "Creado en",
+      "CurrentAcceleratorTypeAllowsMaxOne": "Solo se puede asignar como máximo 1 \"{{ accelerator }}\".",
       "CurrentResourceGroup": "Grupo de recursos actual",
       "CustomAllocation": "Asignación personalizada",
       "CustomResourceApplied": "Se aplica el recurso personalizado",

resources/i18n/fi.json

@@ -1525,6 +1525,7 @@
       "Container": "Kontti",
       "Core": "Ydin",
       "CreatedAt": "LuotuAt",
+      "CurrentAcceleratorTypeAllowsMaxOne": "\"{{ accelerator }}\"-tyyppiä voi olla enintään yksi.",
       "CurrentResourceGroup": "Nykyinen resurssiryhmä",
       "CustomAllocation": "Mukautettu jako",
       "CustomResourceApplied": "Mukautettua resurssia sovelletaan",

resources/i18n/fr.json

@@ -1526,6 +1526,7 @@
       "Container": "Container",
       "Core": "Cœur",
       "CreatedAt": "Créé à",
+      "CurrentAcceleratorTypeAllowsMaxOne": "Pour le type \"{{ accelerator }}\", vous ne pouvez attribuer qu'un seul exemplaire.",
       "CurrentResourceGroup": "Groupe de ressources actuel",
       "CustomAllocation": "Attribution personnalisée",
       "CustomResourceApplied": "Ressource personnalisée appliquée",

resources/i18n/id.json

@@ -1524,6 +1524,7 @@
       "Container": "Kontainer",
       "Core": "Core",
       "CreatedAt": "DibuatPada",
+      "CurrentAcceleratorTypeAllowsMaxOne": "Tipe \"{{ accelerator }}\" hanya dapat dialokasikan paling banyak 1.",
       "CurrentResourceGroup": "Grup Sumber Daya Saat Ini",
       "CustomAllocation": "Alokasi khusus",
       "CustomResourceApplied": "Sumber daya khusus diterapkan",

resources/i18n/it.json

@@ -1523,6 +1523,7 @@
       "Container": "Contenitore",
       "Core": "Nucleo",
       "CreatedAt": "CreatoAt",
+      "CurrentAcceleratorTypeAllowsMaxOne": "È possibile assegnare al massimo 1 acceleratore di tipo \"{{ accelerator }}\".",
       "CurrentResourceGroup": "Gruppo di risorse attuale",
       "CustomAllocation": "Allocazione personalizzata",
       "CustomResourceApplied": "Viene applicata la risorsa personalizzata",