feat(FR-2691): relocate /data header panels — Dashboard + host-capacity cell

ironAiken2 · ironAiken2 · commit fbabca70e924 · 2026-04-23T16:55:28.000+09:00
Resolves #6937(FR-2691) Removes the three header panels from the /data VFolder list page (Create Folder action card, StorageStatusPanelCard, QuotaPerStorageVolumePanelCard) and redistributes their responsibilities: - Folder-status counts move to the Dashboard as a new `folderStatus` board item. StorageStatusPanelCard is unchanged functionally; a `TODO(FR-2691 v2-migration)` marker is added alongside its two legacy query surfaces (baiClient.vfolder.list REST call and the V1 user_resource_policy / project_resource_policy GraphQL fields) so a follow-up task can move them to myVfolders / projectVfolders V2 connections with server-side filter+count. - Per-volume quota visibility moves into the folder table's Location column via a new VFolderHostCell: the host name is now clickable and carries a StorageUsageBadge sourced from the shared vhostInfo tan-query cache key used by StorageSelect. Clicking opens QuotaPerStorageVolumePanelCard in a modal, pre-seeded on the clicked host through a new `defaultVolumeInfo` prop (auto-select is disabled when a default is passed; users can still switch volumes via the inline StorageSelect). The Create Folder affordance is retained through the existing primary button inside the folder table card header, so no replacement for the removed action card is needed. The cell suspense is scoped per-row so a cold hosts cache does not suspend the whole page — each row falls back to a plain host label until the shared payload resolves, after which the badge and click handler light up.
diff --git a/react/src/components/QuotaPerStorageVolumePanelCard.tsx b/react/src/components/QuotaPerStorageVolumePanelCard.tsx
@@ -10,9 +10,8 @@ import { useCurrentProjectValue } from '../hooks/useCurrentProject';
 import BAIProgress from './BAIProgress';
 import FlexActivityIndicator from './FlexActivityIndicator';
 import StorageSelect from './StorageSelect';
-import { QuestionCircleOutlined } from '@ant-design/icons';
-import { Col, Empty, Row, theme, Tooltip, Typography } from 'antd';
-import { BAICard, BAICardProps, BAIFlex } from 'backend.ai-ui';
+import { Col, Empty, Row, theme, Typography } from 'antd';
+import { BAIFlex } from 'backend.ai-ui';
 import * as _ from 'lodash-es';
 import React, { useDeferredValue, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -28,14 +27,27 @@ export type VolumeInfo = {
   sftp_scaling_groups: string[];
 };
 
-interface QuotaPerStorageVolumePanelCardProps extends BAICardProps {}
+interface QuotaPerStorageVolumePanelCardProps {
+  /**
+   * Pre-selects a volume so the content renders that host's quota immediately
+   * (e.g. when opened from a specific folder row). When provided, the built-in
+   * usage-based auto-select is disabled; users can still switch volumes via
+   * the inline `StorageSelect`.
+   */
+  defaultVolumeInfo?: VolumeInfo;
+}
 
+// Modal-body view for per-volume quota. Intentionally not wrapped in a BAICard
+// — the consuming Modal provides its own title and chrome, so a nested card
+// would duplicate the header and inflate the modal visually.
 const QuotaPerStorageVolumePanelCard: React.FC<
   QuotaPerStorageVolumePanelCardProps
-> = ({ ...baiCardProps }) => {
+> = ({ defaultVolumeInfo }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
-  const [selectedVolumeInfo, setSelectedVolumeInfo] = useState<VolumeInfo>();
+  const [selectedVolumeInfo, setSelectedVolumeInfo] = useState<
+    VolumeInfo | undefined
+  >(defaultVolumeInfo);
   const deferredSelectedVolumeInfo = useDeferredValue(selectedVolumeInfo);
   const currentProject = useCurrentProjectValue();
   const baiClient = useSuspendedBackendaiClient();
@@ -121,42 +133,17 @@ const QuotaPerStorageVolumePanelCard: React.FC<
     : 0;
 
   return (
-    <BAICard
-      {...baiCardProps}
-      title={
-        <BAIFlex gap={'xs'} align="center">
-          {t('data.QuotaPerStorageVolume')}
-          <Tooltip title={t('data.HostDetails')}>
-            <QuestionCircleOutlined
-              style={{ color: token.colorTextDescription }}
-            />
-          </Tooltip>
-        </BAIFlex>
-      }
-      extra={
-        <BAIFlex
-          style={{
-            marginRight: -8,
-          }}
-        >
-          <StorageSelect
-            value={selectedVolumeInfo?.id}
-            onChange={(__, vInfo) => {
-              setSelectedVolumeInfo(vInfo);
-            }}
-            autoSelectType="usage"
-            showUsageStatus
-            showSearch
-            variant="borderless"
-          />
-        </BAIFlex>
-      }
-      styles={{
-        body: {
-          paddingTop: token.paddingLG,
-        },
-      }}
-    >
+    <BAIFlex direction="column" align="stretch" gap={'md'}>
+      <StorageSelect
+        value={selectedVolumeInfo?.id}
+        onChange={(__, vInfo) => {
+          setSelectedVolumeInfo(vInfo);
+        }}
+        autoSelectType={defaultVolumeInfo ? undefined : 'usage'}
+        showUsageStatus
+        showSearch
+        style={{ alignSelf: 'flex-start', minWidth: 240 }}
+      />
       {selectedVolumeInfo !== deferredSelectedVolumeInfo ? (
         <FlexActivityIndicator style={{ minHeight: 120 }} />
       ) : selectedVolumeInfo?.capabilities?.includes('quota') ? (
@@ -232,7 +219,7 @@ const QuotaPerStorageVolumePanelCard: React.FC<
           style={{ margin: 'auto 25px' }}
         />
       )}
-    </BAICard>
+    </BAIFlex>
   );
 };
 
diff --git a/react/src/components/StorageStatusPanelCard.tsx b/react/src/components/StorageStatusPanelCard.tsx
@@ -69,6 +69,10 @@ const StorageStatusPanelCard: React.FC<StorageStatusPanelProps> = ({
     );
   };
 
+  // TODO(FR-2691 v2-migration): the counts below are derived from the legacy
+  // REST call `baiClient.vfolder.list()` and then filtered in JS. Migrate to
+  // the Strawberry V2 GraphQL `myVfolders` / `projectVfolders` connections
+  // (with `filter` + `count`) so the server returns the three counts directly.
   const { data: vfolders } = useSuspenseTanQuery({
     queryKey: ['vfolders', { deferredFetchKey, id: currentProject.id }],
     queryFn: () => {
@@ -97,6 +101,9 @@ const StorageStatusPanelCard: React.FC<StorageStatusPanelProps> = ({
       !isExcludedCount(item.status),
   ).length;
 
+  // TODO(FR-2691 v2-migration): `user_resource_policy` and
+  // `project_resource_policy` are legacy (V1) root fields. Port this to the V2
+  // schema once it exposes per-user / per-project vfolder count limits.
   const { user_resource_policy, project_resource_policy } =
     useLazyLoadQuery<StorageStatusPanelCardQuery>(
       graphql`
diff --git a/react/src/components/VFolderNodesV2.tsx b/react/src/components/VFolderNodesV2.tsx
@@ -9,20 +9,26 @@ import {
 } from '../__generated__/VFolderNodesV2Fragment.graphql';
 import { VFolderNodesV2PurgeMutation } from '../__generated__/VFolderNodesV2PurgeMutation.graphql';
 import { VFolderNodesV2RestoreMutation } from '../__generated__/VFolderNodesV2RestoreMutation.graphql';
-import { useWebUINavigate } from '../hooks';
+import { useSuspendedBackendaiClient, useWebUINavigate } from '../hooks';
 import { useCurrentUserInfo } from '../hooks/backendai';
+import { useSuspenseTanQuery } from '../hooks/reactQueryAlias';
 import { useSetBAINotification } from '../hooks/useBAINotification';
 import { isDeletedCategory } from '../pages/VFolderNodeListPage';
 import { useFolderExplorerOpener } from './FolderExplorerOpener';
 import InviteFolderSettingModal from './InviteFolderSettingModal';
+import QuotaPerStorageVolumePanelCard, {
+  type VolumeInfo,
+} from './QuotaPerStorageVolumePanelCard';
 import SharedFolderPermissionInfoModal from './SharedFolderPermissionInfoModal';
 import VFolderDeployModal from './VFolderDeployModal';
 import VFolderNodeIdenticon from './VFolderNodeIdenticon';
 import VFolderPermissionCell from './VFolderPermissionCell';
-import { UserOutlined } from '@ant-design/icons';
-import { Alert, App, theme, Typography } from 'antd';
+import { QuestionCircleOutlined, UserOutlined } from '@ant-design/icons';
+import { useToggle } from 'ahooks';
+import { Alert, App, Modal, Skeleton, theme, Tooltip, Typography } from 'antd';
 import {
   filterOutNullAndUndefined,
+  BAIAlertIconWithTooltip,
   BAIEndpointsIcon,
   BAIRestoreIcon,
   BAIShareAltIcon,
@@ -39,11 +45,12 @@ import {
   BAIConfirmModalWithInput,
   BAITag,
   bytesToGB,
+  StorageUsageBadge,
 } from 'backend.ai-ui';
 import type { BAINameActionCellAction } from 'backend.ai-ui';
 import dayjs from 'dayjs';
 import * as _ from 'lodash-es';
-import React, { useState } from 'react';
+import React, { Suspense, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment, useMutation } from 'react-relay';
 
@@ -204,6 +211,138 @@ const VFolderNameCell: React.FC<VFolderNameCellProps> = ({
   );
 };
 
+interface VFolderHostCellProps {
+  host?: string | null;
+}
+
+// Renders a Location column cell: usage badge (if the backend reports one)
+// plus the host name. The badge's data comes from `vfolder.list_hosts()`,
+// cached under the same tan-query key that `StorageSelect` uses, so the
+// payload is fetched once and shared across rows + selects.
+const VFolderHostCellInner: React.FC<{ host: string }> = ({ host }) => {
+  'use memo';
+  const { t } = useTranslation();
+  const baiClient = useSuspendedBackendaiClient();
+
+  const { data: vhostInfo } = useSuspenseTanQuery<{
+    volume_info?: Record<string, Omit<VolumeInfo, 'id'>>;
+  } | null>({
+    queryKey: ['vhostInfo'],
+    queryFn: () => baiClient.vfolder.list_hosts(),
+  });
+
+  const volumeInfo = vhostInfo?.volume_info?.[host];
+  const usagePercent = volumeInfo?.usage?.percentage;
+  const usageLabel =
+    usagePercent === undefined
+      ? undefined
+      : usagePercent < 70
+        ? t('data.usage.Adequate')
+        : usagePercent < 90
+          ? t('data.usage.Caution')
+          : t('data.usage.Insufficient');
+
+  return (
+    <BAIFlex gap={'xs'} align="center">
+      {usagePercent !== undefined ? (
+        <Tooltip
+          title={`${t('data.Host')} ${t('data.usage.Status')}: ${usageLabel ?? ''}`}
+        >
+          <StorageUsageBadge percent={usagePercent} />
+        </Tooltip>
+      ) : null}
+      <Typography.Text>{host}</Typography.Text>
+    </BAIFlex>
+  );
+};
+
+const VFolderHostCell: React.FC<VFolderHostCellProps> = ({ host }) => {
+  'use memo';
+  if (!host) return null;
+  // Wrap in Suspense so the first render after a cache miss falls back to a
+  // plain host label for this cell only, instead of suspending the whole
+  // page while `vfolder.list_hosts()` resolves.
+  return (
+    <Suspense fallback={<Typography.Text>{host}</Typography.Text>}>
+      <VFolderHostCellInner host={host} />
+    </Suspense>
+  );
+};
+
+// Column-header affordance that opens `QuotaPerStorageVolumePanelCard` in a
+// modal, pre-selected on a quota-supporting host so the empty "does not
+// support" state is not the first thing users see. Renders nothing when no
+// volume reports `quota` in its capabilities — removing the modal entry
+// point entirely rather than opening a dialog with no useful content.
+const HostQuotaTriggerInner: React.FC = () => {
+  'use memo';
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const baiClient = useSuspendedBackendaiClient();
+  const [isOpenModal, { toggle: toggleModal }] = useToggle(false);
+
+  const { data: vhostInfo } = useSuspenseTanQuery<{
+    volume_info?: Record<string, Omit<VolumeInfo, 'id'>>;
+  } | null>({
+    queryKey: ['vhostInfo'],
+    queryFn: () => baiClient.vfolder.list_hosts(),
+  });
+
+  const quotaSupportedEntry = _.find(
+    _.entries(vhostInfo?.volume_info ?? {}),
+    ([, info]) => _.includes(info?.capabilities, 'quota'),
+  );
+  if (!quotaSupportedEntry) return null;
+
+  const [host, info] = quotaSupportedEntry;
+  const defaultVolumeInfo: VolumeInfo = { id: host, ...info };
+
+  return (
+    <>
+      <BAIAlertIconWithTooltip
+        title={t('data.QuotaPerStorageVolume')}
+        iconProps={{
+          size: 14,
+          onClick: (e) => {
+            e.stopPropagation();
+            toggleModal();
+          },
+          style: { cursor: 'pointer' },
+        }}
+      />
+      <Modal
+        open={isOpenModal}
+        onCancel={toggleModal}
+        footer={null}
+        title={
+          <BAIFlex gap={'xs'} align="center">
+            {t('data.QuotaPerStorageVolume')}
+            <Tooltip title={t('data.HostDetails')}>
+              <QuestionCircleOutlined
+                style={{ color: token.colorTextDescription }}
+              />
+            </Tooltip>
+          </BAIFlex>
+        }
+        width={640}
+        destroyOnHidden
+      >
+        <Suspense fallback={<Skeleton active />}>
+          <QuotaPerStorageVolumePanelCard
+            defaultVolumeInfo={defaultVolumeInfo}
+          />
+        </Suspense>
+      </Modal>
+    </>
+  );
+};
+
+const HostQuotaTrigger: React.FC = () => (
+  <Suspense fallback={null}>
+    <HostQuotaTriggerInner />
+  </Suspense>
+);
+
 interface VFolderNodesV2Props extends Omit<
   BAITableProps<VFolderNodeInList>,
   'dataSource' | 'columns'
@@ -490,8 +629,16 @@ const VFolderNodesV2: React.FC<VFolderNodesV2Props> = ({
           },
           {
             key: 'host',
-            title: t('data.folders.Location'),
+            title: (
+              <BAIFlex gap={'xs'} align="center">
+                {t('data.Host')}
+                <HostQuotaTrigger />
+              </BAIFlex>
+            ),
             dataIndex: 'host',
+            render: (host: string | null | undefined) => (
+              <VFolderHostCell host={host} />
+            ),
             sorter: isEnableSorter('host'),
           },
           {
diff --git a/react/src/pages/DashboardPage.tsx b/react/src/pages/DashboardPage.tsx
@@ -8,10 +8,11 @@ import MyResource from '../components/MyResource';
 import MyResourceWithinResourceGroup from '../components/MyResourceWithinResourceGroup';
 import RecentlyCreatedSession from '../components/RecentlyCreatedSession';
 import SessionCountDashboardItem from '../components/SessionCountDashboardItem';
+import StorageStatusPanelCard from '../components/StorageStatusPanelCard';
 import TotalResourceWithinResourceGroup, {
   useIsAvailableTotalResourceWithinResourceGroup,
 } from '../components/TotalResourceWithinResourceGroup';
-import { useSuspendedBackendaiClient } from '../hooks';
+import { useSuspendedBackendaiClient, useWebUINavigate } from '../hooks';
 import { useBAISettingUserState } from '../hooks/useBAISetting';
 import {
   useCurrentProjectValue,
@@ -41,6 +42,7 @@ const DashboardPage: React.FC = () => {
   const currentResourceGroup = useCurrentResourceGroupValue();
   const userRole = useCurrentUserRole();
   const baiClient = useSuspendedBackendaiClient();
+  const webuiNavigate = useWebUINavigate();
 
   const [fetchKey, updateFetchKey] = useFetchKey();
   const [isPendingIntervalRefetch, startIntervalRefetchTransition] =
@@ -169,6 +171,39 @@ const DashboardPage: React.FC = () => {
         ),
       },
     },
+    {
+      id: 'folderStatus',
+      rowSpan: 2,
+      columnSpan: 2,
+      definition: {
+        minRowSpan: 2,
+        minColumnSpan: 2,
+      },
+      data: {
+        content: (
+          <BAIBoardItemErrorBoundary
+            title={t('data.FolderStatus')}
+            status="error"
+          >
+            <Suspense
+              fallback={<Skeleton active style={{ padding: token.marginMD }} />}
+            >
+              <StorageStatusPanelCard
+                fetchKey={fetchKey}
+                onRequestBadgeClick={() => {
+                  webuiNavigate({
+                    pathname: '/data',
+                    search: new URLSearchParams({
+                      invitation: 'true',
+                    }).toString(),
+                  });
+                }}
+              />
+            </Suspense>
+          </BAIBoardItemErrorBoundary>
+        ),
+      },
+    },
     isAvailableTotalResourcePanel && {
       id: 'totalResourceWithinResourceGroup',
       rowSpan: 2,
diff --git a/react/src/pages/VFolderNodeListPage.tsx b/react/src/pages/VFolderNodeListPage.tsx
