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

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.

Author: ironAiken2

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';
@@ -22,20 +21,50 @@ export type VolumeInfo = {
   id: string;
   backend: string;
   capabilities: string[];
-  usage: {
-    percentage: number;
+  // `usage` is optional because `vfolder.list_hosts()` only attaches it for
+  // hosts that can report capacity; `usage.percentage` is optional because
+  // even a reporting host may omit the percentage (rendered as "Unknown").
+  usage?: {
+    percentage?: number;
   };
   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 }) => {
+  'use memo';
   const { t } = useTranslation();
   const { token } = theme.useToken();
-  const [selectedVolumeInfo, setSelectedVolumeInfo] = useState<VolumeInfo>();
+  const [selectedVolumeInfo, setSelectedVolumeInfo] = useState<
+    VolumeInfo | undefined
+  >(defaultVolumeInfo);
+  // Reset the inline selection when the consumer passes a different
+  // `defaultVolumeInfo` while the panel stays mounted (e.g., reopened for a
+  // different host). Compare ids only — following the
+  // "storing info from previous renders" pattern
+  // (https://react.dev/reference/react/useState#storing-information-from-previous-renders),
+  // so the badge reflects the latest prop without an effect.
+  const [prevDefaultVolumeId, setPrevDefaultVolumeId] = useState(
+    defaultVolumeInfo?.id,
+  );
+  if (prevDefaultVolumeId !== defaultVolumeInfo?.id) {
+    setPrevDefaultVolumeId(defaultVolumeInfo?.id);
+    setSelectedVolumeInfo(defaultVolumeInfo);
+  }
   const deferredSelectedVolumeInfo = useDeferredValue(selectedVolumeInfo);
   const currentProject = useCurrentProjectValue();
   const baiClient = useSuspendedBackendaiClient();
@@ -121,42 +150,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 +236,7 @@ const QuotaPerStorageVolumePanelCard: React.FC<
           style={{ margin: 'auto 25px' }}
         />
       )}
-    </BAICard>
+    </BAIFlex>
   );
 };
 

react/src/components/StorageSelect.tsx

@@ -21,8 +21,11 @@ export type VolumeInfo = {
   id: string;
   backend: string;
   capabilities: string[];
-  usage: {
-    percentage: number;
+  // `usage` is optional because `vfolder.list_hosts()` only attaches it for
+  // hosts that can report capacity; `usage.percentage` is optional because
+  // even a reporting host may omit the percentage.
+  usage?: {
+    percentage?: number;
   };
   sftp_scaling_groups: string[];
 };
@@ -118,38 +121,42 @@ const StorageSelect: React.FC<Props> = ({
             }
       }
       optionLabelProp={showUsageStatus ? 'label' : 'value'}
-      options={_.map(vhostInfo?.allowed, (host) => ({
-        label: showUsageStatus ? (
-          <BAIFlex align="center">
-            {vhostInfo?.volume_info?.[host]?.usage && (
-              <Tooltip
-                title={`${t('data.Host')} ${t('data.usage.Status')}:
-                ${
-                  vhostInfo?.volume_info[host]?.usage?.percentage < 70
-                    ? t('data.usage.Adequate')
-                    : vhostInfo?.volume_info[host]?.usage?.percentage < 90
-                      ? t('data.usage.Caution')
-                      : t('data.usage.Insufficient')
-                }`}
-              >
-                <StorageUsageBadge
-                  percent={vhostInfo?.volume_info[host]?.usage?.percentage}
-                />
-                {/* Use &nbsp; instead of Flex gap to fix Tooltip  */}
-                &nbsp;&nbsp;
-              </Tooltip>
-            )}
-            <TextHighlighter keyword={controllableSearchValue}>
-              {host}
-            </TextHighlighter>
-            {/* TODO: uncomment after implementing click action */}
-            {/* <Button type="link" size="small" icon={<InfoCircleOutlined />} /> */}
-          </BAIFlex>
-        ) : (
-          host
-        ),
-        value: host,
-      }))}
+      options={_.map(vhostInfo?.allowed, (host) => {
+        const usagePercent = vhostInfo?.volume_info?.[host]?.usage?.percentage;
+        const usageLabel =
+          usagePercent === undefined
+            ? t('data.usage.Unknown')
+            : usagePercent < 70
+              ? t('data.usage.Adequate')
+              : usagePercent < 90
+                ? t('data.usage.Caution')
+                : t('data.usage.Insufficient');
+        return {
+          label: showUsageStatus ? (
+            <BAIFlex align="center">
+              {vhostInfo?.volume_info?.[host]?.usage && (
+                <Tooltip
+                  title={t('data.usage.HostStatusTooltip', {
+                    status: usageLabel,
+                  })}
+                >
+                  <StorageUsageBadge percent={usagePercent} />
+                  {/* Use &nbsp; instead of Flex gap to fix Tooltip  */}
+                  &nbsp;&nbsp;
+                </Tooltip>
+              )}
+              <TextHighlighter keyword={controllableSearchValue}>
+                {host}
+              </TextHighlighter>
+              {/* TODO: uncomment after implementing click action */}
+              {/* <Button type="link" size="small" icon={<InfoCircleOutlined />} /> */}
+            </BAIFlex>
+          ) : (
+            host
+          ),
+          value: host,
+        };
+      })}
       {...partialSelectProps}
     />
   );