fix: review fixes

Author: astandrik

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

@@ -224,15 +224,3 @@
         padding-right: 0;
     }
 }
-
-// Serverless variant: exactly two tabs (CPU, Storage) at 50% width each
-
-.tenant-metrics-tabs_serverless {
-    .tenant-metrics-tabs__link-container_placeholder {
-        pointer-events: none;
-
-        .tenant-tab-card__card-container {
-            opacity: 0;
-        }
-    }
-}

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

@@ -12,7 +12,7 @@ import type {
     TenantStorageStats,
 } from '../../../../../store/reducers/tenants/utils';
 import {cn} from '../../../../../utils/cn';
-import {NON_BREAKING_SPACE, SHOW_NETWORK_UTILIZATION} from '../../../../../utils/constants';
+import {SHOW_NETWORK_UTILIZATION} from '../../../../../utils/constants';
 import {useSetting, useTypedSelector} from '../../../../../utils/hooks';
 import {calculateMetricAggregates} from '../../../../../utils/metrics';
 import {
@@ -24,14 +24,12 @@ import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
 import {TabCard} from '../TabCard/TabCard';
 import i18n from '../i18n';
 
+import {ServerlessPlaceholderTabs} from './ServerlessPlaceholderTabs';
+
 import './MetricsTabs.scss';
 
 const b = cn('tenant-metrics-tabs');
 
-// Placeholder values used for serverless layout filler cards
-const PLACEHOLDER_VALUE = 0;
-const PLACEHOLDER_LIMIT = 1;
-
 interface MetricsTabsProps {
     poolsCpuStats?: TenantPoolsStats[];
     memoryStats?: TenantMetricStats[];
@@ -190,36 +188,7 @@ export function MetricsTabs({
                 </>
             )}
 
-            {isServerless && (
-                <>
-                    <div className={b('link-container', {placeholder: true})}>
-                        <div className={b('link')}>
-                            <TabCard
-                                text={NON_BREAKING_SPACE}
-                                value={PLACEHOLDER_VALUE}
-                                limit={PLACEHOLDER_LIMIT}
-                                legendFormatter={formatCoresLegend}
-                                active={false}
-                                variant={isServerless ? 'serverless' : 'default'}
-                                subtitle={NON_BREAKING_SPACE}
-                            />
-                        </div>
-                    </div>
-                    <div className={b('link-container', {placeholder: true})}>
-                        <div className={b('link')}>
-                            <TabCard
-                                text={NON_BREAKING_SPACE}
-                                value={PLACEHOLDER_VALUE}
-                                limit={PLACEHOLDER_LIMIT}
-                                legendFormatter={formatCoresLegend}
-                                active={false}
-                                variant={isServerless ? 'serverless' : 'default'}
-                                subtitle={NON_BREAKING_SPACE}
-                            />
-                        </div>
-                    </div>
-                </>
-            )}
+            {isServerless && <ServerlessPlaceholderTabs />}
         </Flex>
     );
 }

src/containers/Tenant/Diagnostics/TenantOverview/MetricsTabs/ServerlessPlaceholderTabs.scss

@@ -0,0 +1,7 @@
+.tenant-metrics-tabs_serverless {
+    pointer-events: none;
+
+    .tenant-tab-card__card-container {
+        opacity: 0;
+    }
+}

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import {cn} from '../../../../../utils/cn';
+import {NON_BREAKING_SPACE} from '../../../../../utils/constants';
+import {formatCoresLegend} from '../../../../../utils/metrics/formatMetricLegend';
+import {TabCard} from '../TabCard/TabCard';
+
+import './ServerlessPlaceholderTabs.scss';
+
+const b = cn('tenant-metrics-tabs');
+
+const PLACEHOLDER_VALUE = 0;
+const PLACEHOLDER_LIMIT = 1;
+
+interface ServerlessPlaceholderTabsProps {
+    count?: number;
+}
+
+export const ServerlessPlaceholderTabs: React.FC<ServerlessPlaceholderTabsProps> = React.memo(
+    ({count = 2}) => {
+        const items = React.useMemo(() => Array.from({length: count}, (_, i) => i), [count]);
+
+        return (
+            <>
+                {items.map((idx) => (
+                    <div key={idx} className={b('link-container', {placeholder: true})}>
+                        <div className={b('link')}>
+                            <TabCard
+                                text={NON_BREAKING_SPACE}
+                                value={PLACEHOLDER_VALUE}
+                                limit={PLACEHOLDER_LIMIT}
+                                legendFormatter={formatCoresLegend}
+                                active={false}
+                                variant="serverless"
+                                subtitle={NON_BREAKING_SPACE}
+                            />
+                        </div>
+                    </div>
+                ))}
+            </>
+        );
+    },
+);