fix: incorrect storage group count

Author: astandrik

src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/MetricsTabs.tsx

@@ -2,6 +2,11 @@ import {Flex} from '@gravity-ui/uikit';
 import {Link, useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../../../../routes';
+import {
+    useCapabilitiesLoaded,
+    useStorageGroupsHandlerAvailable,
+} from '../../../../../store/reducers/capabilities/hooks';
+import {storageApi} from '../../../../../store/reducers/storage/storage';
 import {TENANT_METRICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import type {TenantMetricsTab} from '../../../../../store/reducers/tenant/types';
 import type {
@@ -11,7 +16,7 @@ import type {
 } from '../../../../../store/reducers/tenants/utils';
 import {cn} from '../../../../../utils/cn';
 import {SHOW_NETWORK_UTILIZATION} from '../../../../../utils/constants';
-import {useSetting, useTypedSelector} from '../../../../../utils/hooks';
+import {useAutoRefreshInterval, useSetting, useTypedSelector} from '../../../../../utils/hooks';
 import {calculateMetricAggregates} from '../../../../../utils/metrics';
 import {
     formatCoresLegend,
@@ -27,6 +32,7 @@ import './MetricsTabs.scss';
 const b = cn('tenant-metrics-tabs');
 
 interface MetricsTabsProps {
+    tenantName: string;
     poolsCpuStats?: TenantPoolsStats[];
     memoryStats?: TenantMetricStats[];
     blobStorageStats?: TenantStorageStats[];
@@ -35,6 +41,7 @@ interface MetricsTabsProps {
 }
 
 export function MetricsTabs({
+    tenantName,
     poolsCpuStats,
     memoryStats,
     blobStorageStats,
@@ -45,6 +52,25 @@ export function MetricsTabs({
     const {metricsTab} = useTypedSelector((state) => state.tenant);
     const queryParams = parseQuery(location);
 
+    // Fetch storage groups data to get correct count (only if groups handler available)
+    const capabilitiesLoaded = useCapabilitiesLoaded();
+    const groupsHandlerAvailable = useStorageGroupsHandlerAvailable();
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+
+    const {currentData: storageGroupsData} = storageApi.useGetStorageGroupsInfoQuery(
+        {
+            tenant: tenantName,
+            shouldUseGroupsHandler: groupsHandlerAvailable,
+            with: 'all',
+            limit: 0,
+            fieldsRequired: [],
+        },
+        {
+            pollingInterval: autoRefreshInterval,
+            skip: !capabilitiesLoaded || !groupsHandlerAvailable,
+        },
+    );
+
     const tabLinks: Record<TenantMetricsTab, string> = {
         [TENANT_METRICS_TABS_IDS.cpu]: getTenantPath({
             ...queryParams,
@@ -73,7 +99,9 @@ export function MetricsTabs({
     // Calculate storage metrics using utility
     const storageStats = tabletStorageStats || blobStorageStats || [];
     const storageMetrics = calculateMetricAggregates(storageStats);
-    const storageGroupCount = storageStats.length;
+
+    // Get correct storage groups count from API (only if groups handler available)
+    const storageGroupCount = groupsHandlerAvailable ? (storageGroupsData?.total ?? 0) : undefined;
 
     // Calculate memory metrics using utility
     const memoryMetrics = calculateMetricAggregates(memoryStats);
@@ -91,8 +119,7 @@ export function MetricsTabs({
             >
                 <Link to={tabLinks.cpu} className={b('link')}>
                     <TabCard
-                        label={i18n('cards.cpu-label')}
-                        sublabel={i18n('context_cpu-load')}
+                        text={i18n('context_cpu-load')}
                         value={cpuMetrics.totalUsed}
                         limit={cpuMetrics.totalLimit}
                         legendFormatter={formatCoresLegend}
@@ -108,8 +135,11 @@ export function MetricsTabs({
             >
                 <Link to={tabLinks.storage} className={b('link')}>
                     <TabCard
-                        label={i18n('cards.storage-label')}
-                        sublabel={i18n('context_storage-groups', {count: storageGroupCount})}
+                        text={
+                            storageGroupCount === undefined
+                                ? i18n('cards.storage-label')
+                                : i18n('context_storage-groups', {count: storageGroupCount})
+                        }
                         value={storageMetrics.totalUsed}
                         limit={storageMetrics.totalLimit}
                         legendFormatter={formatStorageLegend}
@@ -125,8 +155,7 @@ export function MetricsTabs({
             >
                 <Link to={tabLinks.memory} className={b('link')}>
                     <TabCard
-                        label={i18n('cards.memory-label')}
-                        sublabel={i18n('context_memory-used')}
+                        text={i18n('context_memory-used')}
                         value={memoryMetrics.totalUsed}
                         limit={memoryMetrics.totalLimit}
                         legendFormatter={formatStorageLegend}
@@ -143,8 +172,7 @@ export function MetricsTabs({
                 >
                     <Link to={tabLinks.network} className={b('link')}>
                         <TabCard
-                            label={i18n('cards.network-label')}
-                            sublabel={i18n('context_network-usage')}
+                            text={i18n('context_network-usage')}
                             value={networkMetrics.totalUsed}
                             limit={networkMetrics.totalLimit}
                             legendFormatter={formatSpeedLegend}

src/containers/Tenant/Diagnostics/TenantOverview/TabCard/TabCard.tsx

@@ -9,24 +9,15 @@ import './TabCard.scss';
 const b = cn('tenant-tab-card');
 
 interface TabCardProps {
-    label: string;
-    sublabel?: string;
+    text: string;
     value: number;
     limit: number;
     active?: boolean;
     helpText?: string;
     legendFormatter: (params: {value: number; capacity: number}) => string;
 }
 
-export function TabCard({
-    label,
-    sublabel,
-    value,
-    limit,
-    active,
-    helpText,
-    legendFormatter,
-}: TabCardProps) {
+export function TabCard({text, value, limit, active, helpText, legendFormatter}: TabCardProps) {
     const {status, percents, legend, fill} = getDiagramValues({
         value,
         capacity: limit,
@@ -61,7 +52,7 @@ export function TabCard({
                             note={helpText}
                             noteIconSize="s"
                         >
-                            {sublabel || label}
+                            {text}
                         </DoughnutMetrics.Legend>
                     </div>
                 </Flex>

src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx

@@ -173,6 +173,7 @@ export function TenantOverview({
                         <HealthcheckPreview tenantName={tenantName} />
                         <QueriesActivityBar tenantName={tenantName} />
                         <MetricsTabs
+                            tenantName={tenantName}
                             poolsCpuStats={poolsStats}
                             memoryStats={memoryStats}
                             blobStorageStats={blobStorageStats}