feat(FR-1093): migrate file browser function to react (#4596)

ironAiken2 · ironAiken2 · commit 2bd9044faf87 · 2025-11-11T07:57:52.000Z
### Implement File Browser Launcher in Folder Explorer resolves #3791 ([FR-1093](https://lablup.atlassian.net/browse/FR-1093)) This PR replaces the previous file browser execution method with a new implementation that: 1. Fetches images that support file browser functionality 2. Creates a session with the appropriate image (using system SSH image if configured) 3. Mounts the current folder to the session 4. Shows loading state during the process 5. Displays error messages when no compatible images are found 6. Modify `ResourceAllocationFormValue` to allow optional for `shmem, accelerator, acceleratorType`. The implementation uses the `useStartSession` hook to launch a session with minimum required resources and the selected folder mounted. **Checklist:** (if applicable) - [ ] 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 [FR-1093]: https://lablup.atlassian.net/browse/FR-1093?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
diff --git a/config.toml.sample b/config.toml.sample
@@ -22,7 +22,8 @@ hideAgents = true                       # If false, show the `Agent Summary` men
 force2FA = false                        # (Deprecated since v25.9.0, This will be replaced by the false setting in the Totp plugin.) If true, user should be register the 2FA to use Backend.AI WebUI.
 appDownloadUrl = ""                     # URL to download the electron app. If blank, https://github.com/lablup/backend.ai-webui/releases/download will be used.
 allowAppDownloadPanel = true            # If true, display the download WebUI app panel on the summary page.
-systemSSHImage = ""                     # This image is used to launch ssh session from the filebrowser dialog to support fast uploading.
+systemSSHImage = ""                     # This image is used to launch ssh session from the file explorer to support fast uploading.
+defaultFileBrowserImage = ""            # This image is used to launch file browser session from the file explorer.
 directoryBasedUsage = false             # If true, display the amount of usage per directory such as folder capacity, and number of files and directories.
 isDirectorySizeVisible = true           # If false, directory size in folder explorer will show `-`. default value is set to true.
 maxCountForPreopenPorts = 10            # The maximum allowed number of preopen ports. If you set this option to 0, the feature of preopen ports is disabled.
diff --git a/react/src/components/FolderExplorerHeader.tsx b/react/src/components/FolderExplorerHeader.tsx
@@ -1,11 +1,24 @@
 import { FolderExplorerHeaderFragment$key } from '../__generated__/FolderExplorerHeaderFragment.graphql';
 import EditableVFolderName from './EditableVFolderName';
 import VFolderNodeIdenticon from './VFolderNodeIdenticon';
-import { Button, Tooltip, Image, Grid, theme, Typography } from 'antd';
-import { BAIFlex } from 'backend.ai-ui';
+import { Button, Tooltip, Image, Grid, theme, Typography, App } from 'antd';
+import { BAIButton, BAIFlex, useErrorMessageResolver } from 'backend.ai-ui';
+import _ from 'lodash';
 import React, { LegacyRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { graphql, useFragment } from 'react-relay';
+import {
+  fetchQuery,
+  graphql,
+  useFragment,
+  useRelayEnvironment,
+} from 'react-relay';
+import { FolderExplorerHeader_ImageQuery } from 'src/__generated__/FolderExplorerHeader_ImageQuery.graphql';
+import { getImageFullName } from 'src/helper';
+import { useSuspendedBackendaiClient } from 'src/hooks';
+import {
+  StartSessionWithDefaultValue,
+  useStartSession,
+} from 'src/hooks/useStartSession';
 
 interface FolderExplorerHeaderProps {
   vfolderNodeFrgmt?: FolderExplorerHeaderFragment$key | null;
@@ -18,16 +31,26 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
   folderExplorerRef,
   titleStyle,
 }) => {
+  'use memo';
+
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const { lg } = Grid.useBreakpoint();
+  const { message, modal } = App.useApp();
+
+  const relayEnv = useRelayEnvironment();
+  const baiClient = useSuspendedBackendaiClient();
+  const { getErrorMessage } = useErrorMessageResolver();
+  const { startSessionWithDefault, upsertSessionNotification } =
+    useStartSession();
 
   const vfolderNode = useFragment(
     graphql`
       fragment FolderExplorerHeaderFragment on VirtualFolderNode {
         id
         user
         permission
+        row_id @required(action: THROW)
         unmanaged_path @since(version: "25.04.0")
         ...VFolderNameTitleNodeFragment
         ...VFolderNodeIdenticonFragment
@@ -96,7 +119,7 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
         {!vfolderNode?.unmanaged_path ? (
           <>
             <Tooltip title={!lg && t('data.explorer.ExecuteFileBrowser')}>
-              <Button
+              <BAIButton
                 icon={
                   <Image
                     width="18px"
@@ -105,13 +128,121 @@ const FolderExplorerHeader: React.FC<FolderExplorerHeaderProps> = ({
                     preview={false}
                   />
                 }
-                onClick={() =>
-                  // @ts-ignore
-                  folderExplorerRef.current?._executeFileBrowser()
-                }
+                action={async () => {
+                  // FIXME: Currently, file browser filtering by server-side is not supported.
+                  await fetchQuery<FolderExplorerHeader_ImageQuery>(
+                    relayEnv,
+                    graphql`
+                      query FolderExplorerHeader_ImageQuery(
+                        $installed: Boolean
+                      ) {
+                        images(is_installed: $installed) {
+                          id
+                          tag
+                          registry
+                          architecture
+                          name @deprecatedSince(version: "24.12.0")
+                          namespace @since(version: "24.12.0")
+                          labels {
+                            key
+                            value
+                          }
+                          tags @since(version: "24.12.0") {
+                            key
+                            value
+                          }
+                        }
+                      }
+                    `,
+                    {
+                      installed: true,
+                    },
+                    {
+                      fetchPolicy: 'store-or-network',
+                    },
+                  )
+                    .toPromise()
+                    .then((response) =>
+                      response?.images?.filter((image) =>
+                        image?.labels?.find(
+                          (label) =>
+                            label?.key === 'ai.backend.service-ports' &&
+                            label?.value?.toLowerCase().includes('filebrowser'),
+                        ),
+                      ),
+                    )
+                    .then(async (filebrowserImages) => {
+                      if (_.isEmpty(filebrowserImages)) {
+                        message.error(
+                          t('data.explorer.NoImagesSupportingFileBrowser'),
+                        );
+                        return;
+                      }
+
+                      const fileBrowserFormValue: StartSessionWithDefaultValue =
+                        {
+                          sessionName: `filebrowser-${vfolderNode?.row_id.split('-')[0]}`,
+                          sessionType: 'interactive',
+                          // use default file browser image if configured and allowed
+                          ...(baiClient._config?.defaultFileBrowserImage &&
+                          baiClient._config?.allow_manual_image_name_for_session
+                            ? {
+                                environments: {
+                                  manual:
+                                    baiClient._config.defaultFileBrowserImage,
+                                },
+                              }
+                            : // otherwise use the first image found
+                              {
+                                environments: {
+                                  version:
+                                    getImageFullName(filebrowserImages?.[0]) ||
+                                    '',
+                                },
+                              }),
+                          allocationPreset: 'minimum-required',
+                          cluster_mode: 'single-node',
+                          cluster_size: 1,
+                          mount_ids: [
+                            vfolderNode?.row_id?.replaceAll('-', '') || '',
+                          ],
+                          resource: {
+                            cpu: 1,
+                            mem: '0.5g',
+                          },
+                        };
+
+                      await startSessionWithDefault(fileBrowserFormValue)
+                        .then((results) => {
+                          if (
+                            results?.fulfilled &&
+                            results.fulfilled.length > 0
+                          ) {
+                            upsertSessionNotification(results.fulfilled);
+                          }
+                          if (
+                            results?.rejected &&
+                            results.rejected.length > 0
+                          ) {
+                            const error = results.rejected[0].reason;
+                            modal.error({
+                              title: error?.title,
+                              content: getErrorMessage(error),
+                            });
+                          }
+                        })
+                        .catch((error) => {
+                          console.error(
+                            'Unexpected error during session creation:',
+                            error,
+                          );
+                          message.error(t('error.UnexpectedError'));
+                        });
+                    });
+                }}
               >
                 {lg && t('data.explorer.ExecuteFileBrowser')}
-              </Button>
+              </BAIButton>
             </Tooltip>
             <Tooltip title={!lg && t('data.explorer.RunSSH/SFTPserver')}>
               <Button
diff --git a/react/src/components/ModelTryContentButton.tsx b/react/src/components/ModelTryContentButton.tsx
@@ -202,21 +202,25 @@ const ModelTryContentButton: React.FC<ModelTryContentButtonProps> = ({
             // FIXME: manually convert to string since server-side only allows [str,str] tuple
             cpu: values.resource.cpu.toString(),
             mem: values.resource.mem,
-            ...(values.resource.accelerator > 0
+            ...(values.resource?.acceleratorType &&
+            values.resource.accelerator &&
+            values.resource.accelerator > 0
               ? {
                   [values.resource.acceleratorType]:
                     // FIXME: manually convert to string since server-side only allows [str,str] tuple
                     values.resource.accelerator.toString(),
                 }
               : undefined),
           },
-          resource_opts: {
-            shmem:
-              compareNumberWithUnits(values.resource.mem, '4g') > 0 &&
-              compareNumberWithUnits(values.resource.shmem, '1g') < 0
-                ? '1g'
-                : values.resource.shmem,
-          },
+          ...(values.resource.shmem && {
+            resource_opts: {
+              shmem:
+                compareNumberWithUnits(values.resource.mem, '4g') > 0 &&
+                compareNumberWithUnits(values.resource.shmem, '1g') < 0
+                  ? '1g'
+                  : values.resource.shmem,
+            },
+          }),
         },
       };
       return baiSignedRequestWithPromise({
diff --git a/react/src/components/ServiceLauncherPageContent.tsx b/react/src/components/ServiceLauncherPageContent.tsx
@@ -335,21 +335,23 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
             // FIXME: manually convert to string since server-side only allows [str,str] tuple
             cpu: values.resource.cpu?.toString(),
             mem: values.resource.mem,
-            ...(values.resource.accelerator > 0
+            ...(values.resource?.acceleratorType &&
+            values.resource?.accelerator &&
+            values.resource.accelerator > 0
               ? {
                   [values.resource.acceleratorType]:
                     // FIXME: manually convert to string since server-side only allows [str,str] tuple
                     values.resource.accelerator?.toString(),
                 }
               : undefined),
           },
-          resource_opts: {
+          ...(values.resource.shmem && {
             shmem:
               compareNumberWithUnits(values.resource.mem, '4g') > 0 &&
               compareNumberWithUnits(values.resource.shmem, '1g') < 0
                 ? '1g'
                 : values.resource.shmem,
-          },
+          }),
         },
       };
       return baiSignedRequestWithPromise({
@@ -487,7 +489,9 @@ const ServiceLauncherPageContent: React.FC<ServiceLauncherPageContentProps> = ({
                 resource_slots: JSON.stringify({
                   cpu: values.resource.cpu,
                   mem: values.resource.mem,
-                  ...(values.resource.accelerator > 0
+                  ...(values.resource?.acceleratorType &&
+                  values.resource?.accelerator &&
+                  values.resource.accelerator > 0
                     ? {
                         [values.resource.acceleratorType]:
                           values.resource.accelerator,
diff --git a/react/src/components/ServiceValidationView.tsx b/react/src/components/ServiceValidationView.tsx
@@ -104,20 +104,22 @@ const ServiceValidationView: React.FC<ServiceValidationModalProps> = ({
             // FIXME: manually convert to string since server-side only allows [str,str] tuple
             cpu: values.resource.cpu.toString(),
             mem: values.resource.mem,
-            ...(values.resource.accelerator > 0
+            ...(values.resource?.acceleratorType &&
+            values.resource?.accelerator &&
+            values.resource.accelerator > 0
               ? {
                   [values.resource.acceleratorType]:
                     values.resource.accelerator,
                 }
               : undefined),
           },
-          resource_opts: {
+          ...(values.resource.shmem && {
             shmem:
               compareNumberWithUnits(values.resource.mem, '4g') > 0 &&
               compareNumberWithUnits(values.resource.shmem, '1g') < 0
                 ? '1g'
                 : values.resource.shmem,
-          },
+          }),
         },
       };
 
diff --git a/react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx b/react/src/components/SessionFormItems/ResourceAllocationFormItems.tsx
@@ -57,9 +57,9 @@ export interface ResourceAllocationFormValue {
   resource: {
     cpu: number;
     mem: string;
-    shmem: string;
-    accelerator: number;
-    acceleratorType: string;
+    shmem?: string;
+    accelerator?: number;
+    acceleratorType?: string;
   };
   resourceGroup: string;
   num_of_sessions?: number;
diff --git a/react/src/helper/index.tsx b/react/src/helper/index.tsx
@@ -386,7 +386,7 @@ export const isOutsideRangeWithUnits = (
 };
 
 export const getImageFullName = (
-  image: Image | CommittedImage | EnvironmentImage,
+  image: DeepPartial<Image | CommittedImage | EnvironmentImage>,
 ) => {
   return image
     ? `${image.registry}/${image.namespace ?? image.name}:${image.tag}@${image.architecture}`
diff --git a/react/src/hooks/index.tsx b/react/src/hooks/index.tsx
@@ -592,6 +592,7 @@ type BackendAIConfig = {
   enableModelFolders: boolean;
   appDownloadUrl: string;
   systemSSHImage: string;
+  defaultFileBrowserImage: string;
   fasttrackEndpoint: string;
   hideAgents: boolean;
   force2FA: boolean;
diff --git a/react/src/hooks/useStartSession.tsx b/react/src/hooks/useStartSession.tsx
@@ -214,7 +214,9 @@ export const useStartSession = () => {
             cpu: values.resource.cpu,
             mem: values.resource.mem,
             // Add accelerator only if specified
-            ...(values.resource.accelerator > 0
+            ...(values.resource?.acceleratorType &&
+            values.resource?.accelerator &&
+            values.resource?.accelerator > 0
               ? {
                   [values.resource.acceleratorType]:
                     values.resource.accelerator,
diff --git a/src/components/backend-ai-login.ts b/src/components/backend-ai-login.ts
@@ -86,6 +86,7 @@ export default class BackendAILogin extends BackendAIPage {
   @property({ type: Boolean }) allowAppDownloadPanel = true;
   @property({ type: String }) connection_mode = 'SESSION' as ConnectionMode;
   @property({ type: String }) systemSSHImage = '';
+  @property({ type: String }) defaultFileBrowserImage = '';
   @property({ type: String }) fasttrackEndpoint = '';
   @property({ type: Number }) login_attempt_limit = 500;
   @property({ type: Number }) login_block_time = 180;
@@ -754,6 +755,13 @@ export default class BackendAILogin extends BackendAIPage {
       value: generalConfig?.systemSSHImage,
     } as ConfigValueObject) as string;
 
+    // Default file browser image
+    this.defaultFileBrowserImage = this._getConfigValueByExists(generalConfig, {
+      valueType: 'string',
+      defaultValue: '',
+      value: generalConfig?.defaultFileBrowserImage,
+    } as ConfigValueObject) as string;
+
     // Enable hide agent flag
     this.hideAgents = this._getConfigValueByExists(generalConfig, {
       valueType: 'boolean',
@@ -1919,6 +1927,8 @@ export default class BackendAILogin extends BackendAIPage {
         globalThis.backendaiclient._config.allowAppDownloadPanel =
           this.allowAppDownloadPanel;
         globalThis.backendaiclient._config.systemSSHImage = this.systemSSHImage;
+        globalThis.backendaiclient._config.defaultFileBrowserImage =
+          this.defaultFileBrowserImage;
         globalThis.backendaiclient._config.fasttrackEndpoint =
           this.fasttrackEndpoint;
         globalThis.backendaiclient._config.hideAgents = this.hideAgents;
