fix(FR-1384): handle backend API failures gracefully with Promise.allSettled (#4165)

Resolves [FR-1384](https://lablup.atlassian.net/browse/FR-1384)

## Problem

When either `scalingGroup.list` or `vfolder.list_hosts` API calls fail, the entire Promise.all chain throws an error, preventing the UI from displaying any available data and potentially causing the entire page to crash.

## Solution

- Replace `Promise.all` with `Promise.allSettled` to handle failures gracefully
- Return `undefined` for failed API calls while preserving successful data
- Update dependent components to handle undefined values appropriately
- Rename variables for clarity (`allSftpScalingGroups` → `sftpScalingGroups`, `resourceGroups` → `nonSftpScalingGroups`)

## Impact

This change improves the resilience of the UI when backend services are partially unavailable, allowing users to continue working with available resources rather than experiencing a complete failure.

## Changed Files

- `react/src/hooks/useCurrentProject.tsx` - Core fix for Promise handling
- `react/src/components/AgentSummaryList.tsx` - Updated variable references
- `react/src/components/ResourceGroupSelectForCurrentProject.tsx` - Updated variable references
- `react/src/hooks/useResourceLimitAndRemaining.tsx` - Updated variable references
- `react/src/pages/ComputeSessionListPage.tsx` - Added undefined check for resource group

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

Author: yomybaby

react/src/components/AgentSummaryList.tsx

@@ -80,7 +80,7 @@ const AgentSummaryList: React.FC<AgentSummaryListProps> = ({
     startRefreshTransition(() => {
       updateFetchKey();
     });
-  const { allSftpScalingGroups } = useResourceGroupsForCurrentProject();
+  const { sftpResourceGroups } = useResourceGroupsForCurrentProject();
 
   const { agent_summary_list } = useLazyLoadQuery<AgentSummaryListQuery>(
     graphql`
@@ -127,7 +127,7 @@ const AgentSummaryList: React.FC<AgentSummaryListProps> = ({
   // Hide sFTP upload agents
   const filteredAgentSummaryList = _.filter(
     agent_summary_list?.items,
-    (item) => !_.includes(allSftpScalingGroups, item?.scaling_group),
+    (item) => !_.includes(sftpResourceGroups, item?.scaling_group),
   );
 
   const columns: ColumnsType<AgentSummary> = [

react/src/components/ResourceGroupSelectForCurrentProject.tsx

@@ -50,7 +50,7 @@ const ResourceGroupSelectForCurrentProject: React.FC<
   );
 
   const [isPendingLoading, startLoadingTransition] = useTransition();
-  const { resourceGroups } = useResourceGroupsForCurrentProject();
+  const { nonSftpResourceGroups } = useResourceGroupsForCurrentProject();
   const [optimisticValue, setOptimisticValue] = useState(currentResourceGroup);
 
   const searchProps: Pick<
@@ -68,7 +68,7 @@ const ResourceGroupSelectForCurrentProject: React.FC<
     <BAISelect
       defaultActiveFirstOption
       loading={isPendingLoading}
-      options={_.map(resourceGroups, (resourceGroup) => {
+      options={_.map(nonSftpResourceGroups, (resourceGroup) => {
         return { value: resourceGroup.name, label: resourceGroup.name };
       })}
       optionRender={(option) => {

react/src/hooks/useCurrentProject.tsx

@@ -47,22 +47,25 @@ const previousSelectedResourceGroupNameAtom = atom<string | null>(null);
 
 export const useCurrentResourceGroupValue = () => {
   useSuspendedBackendaiClient();
-  const { resourceGroups } = useResourceGroupsForCurrentProject();
+  const { nonSftpResourceGroups } = useResourceGroupsForCurrentProject();
   const [prevSelectedRGName, setPrevSelectedRGName] = useAtom(
     previousSelectedResourceGroupNameAtom,
   );
 
   let nextResourceGroupName: string | null = null;
-  if (resourceGroups.length === 0) {
+  if (
+    nonSftpResourceGroups === undefined ||
+    nonSftpResourceGroups.length === 0
+  ) {
     nextResourceGroupName = null;
   } else if (
-    _.some(resourceGroups, (item) => item.name === prevSelectedRGName)
+    _.some(nonSftpResourceGroups, (item) => item.name === prevSelectedRGName)
   ) {
     nextResourceGroupName = prevSelectedRGName;
   } else {
     const autoSelectedResourceGroup =
       // _.find(resourceGroups, (item) => item.name === 'default') ||
-      resourceGroups[0];
+      nonSftpResourceGroups[0];
     nextResourceGroupName = autoSelectedResourceGroup.name;
   }
 
@@ -91,30 +94,42 @@ export const useCurrentResourceGroupState = () => {
 const resourceGroupsForCurrentProjectAtom = atom(async (get) => {
   // NOTE: cannot use hook inside atom
   const currentProject = get(currentProjectAtom);
-  const [resourceGroups, vhostInfo] = await Promise.all([
+  const [resourceGroupsResult, vhostInfoResult] = await Promise.allSettled([
     // @ts-ignore
     globalThis.backendaiclient.scalingGroup.list(
       currentProject.name,
-    ) as ScalingGroupsResponse,
+    ) as Promise<ScalingGroupsResponse>,
     // @ts-ignore
     globalThis.backendaiclient.vfolder.list_hosts(
       currentProject.id,
-    ) as VHostInfo,
+    ) as Promise<VHostInfo>,
   ]);
 
-  const allSftpScalingGroups = _.uniq(
-    _.flatten(
-      _.map(vhostInfo.volume_info, (volume) => volume?.sftp_scaling_groups),
-    ),
-  );
+  const resourceGroups =
+    resourceGroupsResult.status === 'fulfilled'
+      ? resourceGroupsResult.value
+      : undefined;
+  const vhostInfo =
+    vhostInfoResult.status === 'fulfilled' ? vhostInfoResult.value : undefined;
+
+  const sftpResourceGroups = vhostInfo
+    ? _.uniq(
+        _.flatten(
+          _.map(vhostInfo.volume_info, (volume) => volume?.sftp_scaling_groups),
+        ),
+      )
+    : undefined;
 
   return {
-    resourceGroups: _.filter(
-      resourceGroups.scaling_groups,
-      (rg) => !allSftpScalingGroups.includes(rg.name),
-    ),
+    nonSftpResourceGroups:
+      resourceGroups && vhostInfo && sftpResourceGroups
+        ? _.filter(
+            resourceGroups.scaling_groups,
+            (rg) => !sftpResourceGroups.includes(rg.name),
+          )
+        : resourceGroups?.scaling_groups || undefined,
     vhostInfo,
-    allSftpScalingGroups,
+    sftpResourceGroups,
   };
 });
 

react/src/hooks/useResourceLimitAndRemaining.tsx

@@ -115,7 +115,7 @@ export const useResourceLimitAndRemaining = ({
   const baiClient = useSuspendedBackendaiClient();
   const [resourceSlots] = useResourceSlots();
   const acceleratorSlots = _.omit(resourceSlots, ['cpu', 'mem', 'shmem']);
-  const { resourceGroups } = useResourceGroupsForCurrentProject();
+  const { nonSftpResourceGroups } = useResourceGroupsForCurrentProject();
 
   const currentResourceGroupForLimit = useFragment(
     graphql`
@@ -152,7 +152,7 @@ export const useResourceLimitAndRemaining = ({
 
       if (
         currentResourceGroup &&
-        _.some(resourceGroups, (rg) => rg.name === currentResourceGroup)
+        _.some(nonSftpResourceGroups, (rg) => rg.name === currentResourceGroup)
       ) {
         params.scaling_group = currentResourceGroup;
       }