feat(FR-1448): allow user to select multi agents when creating multi-node session

Author: nowgnuesLee

react/src/components/AgentSelect.tsx

@@ -9,7 +9,7 @@ import React, { useDeferredValue, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useLazyLoadQuery } from 'react-relay';
 
-interface Props extends SelectProps {
+interface Props extends Omit<SelectProps, 'options'> {
   autoSelectDefault?: boolean;
   fetchKey?: string;
   resourceGroup?: string | null;
@@ -122,19 +122,33 @@ const AgentSelect: React.FC<Props> = ({
     : undefined;
   return (
     <Select
-      onChange={(value, option) => {
-        setValue(value, option);
-      }}
       loading={searchStr !== deferredSearchStr}
       filterOption={false}
       showSearch
       searchValue={searchStr}
       onSearch={(v) => {
         setSearchStr(v);
       }}
-      {...selectProps}
-      value={value}
       options={filterOutEmpty([autoSelectIfMatch, ...agentOptions])}
+      //override props.onChange and props.value, it is handled by useControllableValue
+      {..._.omit(selectProps, ['value', 'onChange'])}
+      onChange={(value: unknown, option) => {
+        if (
+          selectProps.mode === 'multiple' &&
+          _.isArray(value) &&
+          _.isArray(option)
+        ) {
+          if (_.last(value) === 'auto' || value.length === 0) {
+            value = ['auto'];
+            option = _.last(option);
+          } else if (value[0] === 'auto' && value.length > 1) {
+            value = value.slice(1);
+            option = option.slice(1);
+          }
+        }
+        setValue(value, option);
+      }}
+      value={value}
     />
   );
 };

react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx

@@ -46,7 +46,7 @@ export const RESOURCE_ALLOCATION_INITIAL_FORM_VALUES: DeepPartial<ResourceAlloca
     cluster_mode: 'single-node',
     cluster_size: 1,
     enabledAutomaticShmem: true,
-    agent: 'auto',
+    agent: ['auto'],
   };
 
 export const isMinOversMaxValue = (min: number, max: number) => {
@@ -67,7 +67,7 @@ export interface ResourceAllocationFormValue {
   cluster_size: number;
   enabledAutomaticShmem: boolean;
   allocationPreset?: string;
-  agent?: string;
+  agent?: string[] | string;
 }
 
 export type MergedResourceAllocationFormValue = ResourceAllocationFormValue &
@@ -95,6 +95,7 @@ const ResourceAllocationFormItems: React.FC<
   const { token } = theme.useToken();
 
   const baiClient = useSuspendedBackendaiClient();
+  const supportMultiAgents = baiClient.supports('multi-agents');
 
   const [{ keypairResourcePolicy, sessionLimitAndRemaining }] =
     useCurrentKeyPairResourcePolicyLazyLoadQuery();
@@ -1225,22 +1226,40 @@ const ResourceAllocationFormItems: React.FC<
         <Form.Item
           label={t('session.launcher.SelectAgent')}
           required
-          tooltip={<Trans i18nKey={'session.launcher.DescSelectAgent'} />}
+          tooltip={
+            <Trans
+              i18nKey={
+                supportMultiAgents
+                  ? 'session.launcher.DescSelectAgent'
+                  : 'session.launcher.DescSelectAgentBefore2516'
+              }
+            />
+          }
         >
           <BAIFlex gap={'xs'}>
             <Suspense>
               <Form.Item required noStyle style={{ flex: 1 }} name="agent">
                 <AgentSelect
                   resourceGroup={currentResourceGroupInForm}
                   fetchKey={agentFetchKey}
+                  mode={supportMultiAgents ? 'multiple' : undefined}
+                  labelRender={
+                    supportMultiAgents
+                      ? ({ label, value }) => {
+                          return value === 'auto' ? label : value;
+                        }
+                      : undefined
+                  }
                   onChange={(value) => {
-                    if (value !== 'auto') {
+                    if (
+                      !supportMultiAgents &&
+                      !_.isEqual(_.castArray(value), ['auto'])
+                    ) {
                       form.setFieldsValue({
                         cluster_mode: 'single-node',
                         cluster_size: 1,
                       });
                     }
-                    // TODO: set cluster mode to single node and cluster size to 1 when agent value is not "auto"
                   }}
                 ></AgentSelect>
               </Form.Item>
@@ -1286,7 +1305,12 @@ const ResourceAllocationFormItems: React.FC<
                       onChange={() => {
                         form.validateFields().catch(() => {});
                       }}
-                      disabled={getFieldValue('agent') !== 'auto'}
+                      disabled={
+                        !supportMultiAgents &&
+                        !_.isEqual(_.castArray(getFieldValue('agent')), [
+                          'auto',
+                        ])
+                      }
                     >
                       <Radio.Button value="single-node">
                         {t('session.launcher.SingleNode')}
@@ -1351,7 +1375,11 @@ const ResourceAllocationFormItems: React.FC<
                             }
                             disabled={
                               derivedClusterSizeMaxLimit === 1 ||
-                              getFieldValue('agent') !== 'auto'
+                              (!supportMultiAgents &&
+                                !_.isEqual(
+                                  _.castArray(getFieldValue('agent')),
+                                  ['auto'],
+                                ))
                             }
                             sliderProps={{
                               marks: {

react/src/components/SessionLauncherPreview.tsx

@@ -523,7 +523,7 @@ const SessionLauncherPreview: React.FC<{
             {baiClient.supports('agent-select') &&
               !baiClient?._config?.hideAgents && (
                 <Descriptions.Item label={t('session.launcher.AgentNode')}>
-                  {form.getFieldValue('agent') ||
+                  {_.castArray(form.getFieldValue('agent')).join(', ') ||
                     t('session.launcher.AutoSelect')}
                 </Descriptions.Item>
               )}

react/src/hooks/useStartSession.tsx

@@ -255,12 +255,14 @@ export const useStartSession = () => {
           // Agent selection (optional)
           ...(baiClient.supports('agent-select') &&
           !baiClient?._config?.hideAgents &&
-          values.agent !== 'auto'
+          values.agent !== undefined &&
+          !_.isEqual(values.agent, ['auto'])
             ? {
                 // Filter out undefined values
-                agent_list: [values.agent].filter(
-                  (agent): agent is string => !!agent,
-                ),
+                agent_list: _.chain(values.agent)
+                  .castArray()
+                  .filter((agent): agent is string => !!agent)
+                  .value(),
               }
             : undefined),
         },

react/src/pages/SessionLauncherPage.tsx

@@ -1276,7 +1276,7 @@ const SessionLauncherPage = () => {
                   command: undefined,
                   scheduleDate: undefined,
                 },
-                agent: 'auto', // Add the missing 'agent' property
+                agent: ['auto'], // Add the missing 'agent' property
               } as SessionLauncherFormData,
               formValue,
             );

resources/i18n/de.json

@@ -1468,7 +1468,8 @@
       "DescMemory": " <p> Der Computerspeicher ist ein temporärer Speicherbereich. </p> <p> Es enthält die Daten und Anweisungen, die die Central Processing Unit (CPU) benötigt. </p> <p> Wenn Sie eine GPU in einem Machine Learning-Workload verwenden, müssen Sie dem Arbeitsspeicher mindestens den doppelten Arbeitsspeicher der GPU zuweisen. Andernfalls erhöht sich die Leerlaufzeit der GPU, was zu einer Leistungseinbuße führt. </p>",
       "DescMultiNode": " <p> Beim Ausführen einer Sitzung werden ein verwalteter Knoten und ein oder mehrere Worker-Knoten auf mehrere physische Knoten oder virtuelle Maschinen aufgeteilt. </p>",
       "DescOpenMPOptimization": "<p>Dieser Wert legt die Anzahl der Threads fest, die für parallele Regionen verwendet werden sollen, indem er den Anfangswert der internen Steuervariablen nthreads-var festlegt.</p><p>Backend.AI setzt diesen Wert gleich der Anzahl der CPU-Kerne, was zur Folge hat, dass typische High-Performance-Computing-Workloads beschleunigt werden. Bei einigen Multi-Thread-Workloads werden jedoch mehrere Prozesse, die OpenMP verwenden, gleichzeitig verwendet, was zu einer abnormal großen Anzahl von Threads und einer erheblichen Leistungsverschlechterung führt. In diesem Fall stellen Sie diesen Wert bitte auf 1 oder 2 ein.</p>>",
-      "DescSelectAgent": "Die auf der rechten Seite des Agenten angezeigten Ressourcen stellen die tatsächliche Menge der verfügbaren Ressourcen dar. \nDerzeit ist die Agentenauswahl nur in einer Single-Node-Single-Container-Umgebung verfügbar. \nDie Standardeinstellung ist die Agentenzuteilung durch den Scheduler.",
+      "DescSelectAgent": "Die rechts neben einem Agenten angezeigten Ressourcen geben die tatsächlich verfügbaren Mengen an. Ausgewählte Agenten stellen die Kandidaten für eine Zuweisung dar; auch wenn mehrere ausgewählt sind, kann nur einem Agenten zugewiesen werden. Die Standardeinstellung ist die automatische Zuweisung durch den Scheduler.",
+      "DescSelectAgentBefore2516": "Die rechts beim Agenten angezeigten Ressourcen entsprechen der tatsächlich verfügbaren Menge. Derzeit ist die Agentenauswahl nur in einer Einzelknoten-/Einzelcontainer-Umgebung verfügbar. Standardmäßig erfolgt die Agentenzuweisung durch den Scheduler.",
       "DescSession": " <p> Eine Sitzung ist eine Einheit einer Rechenumgebung, die gemäß einer bestimmten Umgebung und Ressourcen erstellt wird. </p> <p> Wenn dieser Wert auf einen Wert größer als 1 gesetzt ist, werden mehrere Sitzungen erstellt, die dem oben genannten Ressourcensatz entsprechen. </p> <p> Wenn nicht genügend Ressourcen verfügbar sind, werden Anforderungen zum Erstellen von Sitzungen, die nicht erstellt werden können, in die Warteschlange gestellt. </p>",
       "DescSetEnv": " <p> Wenn Sie eine Standardumgebungsvariable im Container setzen und auch eine Umgebungsvariable mit demselben Namen auf der Backend.AI setzen, hat der auf der Backend.AI festgelegte Wert Vorrang. </p> <p style='color:var(--paper-red-400);'> Jeder Eingabewert wird nach dem Start des Sitzungsstarters initialisiert. <br /> Außerdem werden diese Umgebungen nur übergeben, wenn sowohl die Variable als auch der Wert nicht leer sind. </p>",
       "DescSetPreOpenPort": "Preopen Ports\" bezieht sich auf einen bestimmten <span style='color:var(--paper-red-400);'>internen Container-Port</span>, der eingehende Verbindungen von externen Geräten oder Computern auf einem Netzwerkgerät oder Computer erlaubt.",

resources/i18n/el.json

@@ -1467,7 +1467,8 @@
       "DescMemory": " <p> Η μνήμη του υπολογιστή είναι μια προσωρινή περιοχή αποθήκευσης. </p> <p> Διατηρεί τα δεδομένα και τις οδηγίες που χρειάζεται η κεντρική μονάδα επεξεργασίας (CPU). </p> <p> Όταν χρησιμοποιείτε GPU σε φόρτο εργασίας μηχανικής εκμάθησης, πρέπει να εκχωρήσετε τουλάχιστον δύο φορές τη μνήμη της GPU στη μνήμη. Διαφορετικά, ο χρόνος αδράνειας της GPU θα αυξηθεί, οδηγώντας σε ποινή απόδοσης. </p>",
       "DescMultiNode": " <p> Κατά την εκτέλεση μιας περιόδου σύνδεσης, ένας διαχειριζόμενος κόμβος και ένας ή περισσότεροι κόμβοι εργαζομένων χωρίζονται σε πολλούς φυσικούς κόμβους ή εικονικές μηχανές. </p>",
       "DescOpenMPOptimization": "<p>Αυτή η τιμή καθορίζει τον αριθμό των νημάτων που θα χρησιμοποιηθούν για τις παράλληλες περιοχές, θέτοντας την αρχική τιμή της εσωτερικής μεταβλητής ελέγχου nthreads-var.</p><p>Το Backend.AI θέτει αυτή την τιμή ίση με τον αριθμό των πυρήνων της CPU, γεγονός που έχει ως αποτέλεσμα την επιτάχυνση τυπικών υπολογιστικών φόρτων εργασίας υψηλών επιδόσεων. Ωστόσο, για ορισμένα φορτία εργασίας με πολλά νήματα, χρησιμοποιούνται ταυτόχρονα πολλές διεργασίες που χρησιμοποιούν OpenMP, με αποτέλεσμα να δημιουργείται ασυνήθιστα μεγάλος αριθμός νημάτων και σημαντική υποβάθμιση των επιδόσεων. Σε αυτή την περίπτωση, παρακαλούμε προσαρμόστε αυτή την τιμή σε 1 ή 2.</p>",
-      "DescSelectAgent": "Οι πόροι που εμφανίζονται στη δεξιά πλευρά του πράκτορα αντιπροσωπεύουν την πραγματική ποσότητα των διαθέσιμων πόρων. \nΠρος το παρόν, η επιλογή πράκτορα είναι διαθέσιμη μόνο σε περιβάλλον ενός κοντέινερ ενός κόμβου. \nΗ προεπιλεγμένη ρύθμιση είναι η κατανομή πράκτορα από τον προγραμματιστή.",
+      "DescSelectAgent": "Οι πόροι στα δεξιά του agent δείχνουν την πραγματικά διαθέσιμη ποσότητα. Οι επιλεγμένοι agent αντιπροσωπεύουν υποψήφιους προς ανάθεση — ακόμα κι αν επιλεγούν πολλοί, η ανάθεση μπορεί να γίνει μόνο σε έναν agent. Η προεπιλεγμένη ρύθμιση είναι η αυτόματη ανάθεση από τον scheduler.",
+      "DescSelectAgentBefore2516": "Οι πόροι που εμφανίζονται στη δεξιά πλευρά του agent αντιπροσωπεύουν την πραγματική ποσότητα διαθέσιμων πόρων. Προς το παρόν, η επιλογή agent είναι διαθέσιμη μόνο σε περιβάλλον με έναν κόμβο και ένα κοντέινερ. Η προεπιλεγμένη ρύθμιση είναι η ανάθεση των agent από τον scheduler.",
       "DescSession": " <p> Η περίοδος σύνδεσης είναι μια μονάδα υπολογιστικού περιβάλλοντος που δημιουργείται σύμφωνα με ένα καθορισμένο περιβάλλον και πόρους. </p> <p> Εάν αυτή η τιμή έχει οριστεί σε μια τιμή μεγαλύτερη από 1, δημιουργούνται πολλές συνεδρίες που αντιστοιχούν στον παραπάνω πόρο. </p> <p> Εάν δεν υπάρχουν αρκετοί διαθέσιμοι πόροι, τα αιτήματα για δημιουργία περιόδων σύνδεσης που δεν μπορούν να δημιουργηθούν τίθενται στην ουρά αναμονής. </p>",
       "DescSetEnv": " <p> Εάν ορίσετε μια προεπιλεγμένη μεταβλητή περιβάλλοντος στο κοντέινερ και επίσης ορίσετε μια μεταβλητή περιβάλλοντος με το ίδιο όνομα στο Backend.AI, υπερισχύει η τιμή που έχει οριστεί στο Backend.AI. </p> <p style='color:var(--paper-red-400);'> Κάθε τιμή εισόδου θα αρχικοποιηθεί μετά την έναρξη της εκκίνησης περιόδου λειτουργίας. <br /> Επίσης, αυτά τα περιβάλλοντα θα περάσουν μόνο αν και η μεταβλητή και η τιμή δεν είναι κενά. </p>",
       "DescSetPreOpenPort": "Οι \"Προανοιχτές θύρες\" αναφέρονται σε μια συγκεκριμένη <span style='color:var(--paper-red-400);'>εσωτερική θύρα εμπορευματοκιβωτίου</span> που επιτρέπει εισερχόμενες συνδέσεις από εξωτερικές συσκευές ή υπολογιστές σε μια συσκευή ή έναν υπολογιστή δικτύου.",

resources/i18n/en.json

@@ -1476,7 +1476,8 @@
       "DescMemory": "<p>Computer memory is a temporary storage area.</p><p>It holds the data and instructions that the Central Processing Unit (CPU) needs.</p><p>When using a GPU in a machine learning workload, you must allocate at least twice the memory of the GPU to memory. Otherwise, the GPU's idle time will increase, resulting in a performance penalty.</p>",
       "DescMultiNode": "<p>When running a session, one managed node and one or more worker nodes are split across multiple physical nodes or virtual machines.</p>",
       "DescOpenMPOptimization": "<p>This value sets the number of threads to use for parallel regions by setting the initial value of the nthreads-var internal control variable.</p><p>Backend.AI sets this value equal to the number of CPU cores, which has the effect of accelerating typical high-performance computing workloads. However, for some multi-threaded workloads, multiple processes using OpenMP are used at the same time, resulting in an abnormally large number of threads and significant performance degradation. In this case, please adjust this value to 1 or 2.</p>",
-      "DescSelectAgent": "The resources displayed on the right side of the agent represent the actual amount of available resources. Currently, agent selection is only available in a single-node single-container environment. The default setting is agent allocation by the scheduler.",
+      "DescSelectAgent": "The resources shown on the right side of each agent represent the actual available capacity. The selected agents indicate the candidates that can be allocated, and even if multiple agents are selected, the allocation may be made to only one agent. By default, the scheduler automatically handles the allocation.",
+      "DescSelectAgentBefore2516": "The resources displayed on the right side of the agent represent the actual amount of available resources. Currently, agent selection is only available in a single-node single-container environment. The default setting is agent allocation by the scheduler.",
       "DescSession": "<p>A session is a unit of computational environment that is created according to a specified environment and resources.</p><p>If this value is set to a value greater than 1, multiple sessions corresponding to the resource set above are created.</p><p>If there are not enough resources available, requests to create sessions that cannot be created are put on the waiting queue.</p>",
       "DescSetEnv": "<p>If you set a default environment variable in the container and also set an environment variable with the same name on the Backend.AI, the value set on the Backend.AI takes precedence.</p><p style='color:var(--paper-red-400);'>Every input value will be initialized after starting session launcher.<br />Also, those environment will be passed only if both variable and value are not empty.</p>",
       "DescSetPreOpenPort": "'Preopen Ports' refers to a specific <span style='color:var(--paper-red-400);'>internal container port</span> that allows incoming connections from external devices or computers on a network device or computer.",