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,8 +122,17 @@ const AgentSelect: React.FC<Props> = ({
     : undefined;
   return (
     <Select
-      onChange={(value, option) => {
+      onChange={(value: unknown, option) => {
+        if (Array.isArray(value)) {
+          // multi-mode
+          if (value[value.length - 1] === 'auto' || value.length === 0) {
+            value = ['auto'];
+          } else if (value[0] === 'auto' && value.length > 1) {
+            value = value.slice(1);
+          }
+        }
         setValue(value, option);
+        selectProps.onChange?.(value, option);
       }}
       loading={searchStr !== deferredSearchStr}
       filterOption={false}
@@ -132,7 +141,7 @@ const AgentSelect: React.FC<Props> = ({
       onSearch={(v) => {
         setSearchStr(v);
       }}
-      {...selectProps}
+      {..._.omit(selectProps, ['onChange'])}
       value={value}
       options={filterOutEmpty([autoSelectIfMatch, ...agentOptions])}
     />

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 &
@@ -1229,14 +1229,15 @@ const ResourceAllocationFormItems: React.FC<
                 <AgentSelect
                   resourceGroup={currentResourceGroupInForm}
                   fetchKey={agentFetchKey}
-                  onChange={(value, option) => {
-                    if (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"
+                  {...{
+                    mode: baiClient.supports('multi-agents')
+                      ? 'multiple'
+                      : undefined,
+                    labelRender: baiClient.supports('multi-agents')
+                      ? ({ label, value }) => {
+                          return value === 'auto' ? label : value;
+                        }
+                      : undefined,
                   }}
                 ></AgentSelect>
               </Form.Item>
@@ -1282,7 +1283,6 @@ const ResourceAllocationFormItems: React.FC<
                       onChange={(e) => {
                         form.validateFields().catch(() => {});
                       }}
-                      disabled={getFieldValue('agent') !== 'auto'}
                     >
                       <Radio.Button value="single-node">
                         {t('session.launcher.SingleNode')}
@@ -1345,10 +1345,7 @@ const ResourceAllocationFormItems: React.FC<
                                 ? derivedClusterSizeMaxLimit
                                 : undefined
                             }
-                            disabled={
-                              derivedClusterSizeMaxLimit === 1 ||
-                              getFieldValue('agent') !== 'auto'
-                            }
+                            disabled={derivedClusterSizeMaxLimit === 1}
                             sliderProps={{
                               marks: {
                                 1: '1',

react/src/pages/SessionLauncherPage.tsx

@@ -544,16 +544,39 @@ const SessionLauncherPage = () => {
               preopen_ports: transformPortValuesToNumbers(values.ports),
 
               // Agent selection (optional)
-              ...(baiClient.supports('agent-select') &&
-              !baiClient?._config?.hideAgents &&
-              values.agent !== 'auto'
-                ? {
-                    // Filter out undefined values
-                    agent_list: [values.agent].filter(
-                      (agent): agent is string => !!agent,
+              ...(() => {
+                if (values.agent === undefined) return {};
+
+                const agents = Array.isArray(values.agent)
+                  ? values.agent
+                  : [values.agent];
+
+                if (
+                  !baiClient.supports('agent-select') ||
+                  baiClient?._config?.hideAgents ||
+                  _.isEqual(agents, ['auto']) ||
+                  agents.length === 0
+                ) {
+                  return {};
+                }
+
+                if (
+                  !baiClient.supports('multi-agents') &&
+                  values.cluster_mode === 'multi-node'
+                ) {
+                  // The server now requires agents equivalent to the cluster size.
+                  return {
+                    agent_list: Array.from(
+                      { length: values.cluster_size },
+                      () => agents[0],
                     ),
-                  }
-                : undefined),
+                  };
+                }
+
+                return {
+                  agent_list: _.filter(agents, (item) => !!item),
+                };
+              })(),
             },
           },
         };
@@ -1606,7 +1629,7 @@ const SessionLauncherPage = () => {
                   command: undefined,
                   scheduleDate: undefined,
                 },
-                agent: 'auto', // Add the missing 'agent' property
+                agent: ['auto'], // Add the missing 'agent' property
               } as SessionLauncherFormData,
               formValue,
             );

src/lib/backend.ai-client-esm.ts

@@ -813,6 +813,9 @@ class Client {
     if (this.isManagerVersionCompatibleWith('25.13.0')) {
       this._features['pending-session-list'] = true;
     }
+    if (this.isManagerVersionCompatibleWith('25.15.0')) {
+      this._features['multi-agents'] = true;
+    }
   }
 
   /**