Skip to content

Commit fc7df32

Browse files
astandrikastandrik
committed
fix: refactoring
1 parent bea42b4 commit fc7df32

File tree

10 files changed

+215
-118
lines changed

10 files changed

+215
-118
lines changed

‎src/containers/Tenant/Diagnostics/Diagnostics.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ function Diagnostics(props: DiagnosticsProps) {
7373
hasBackups: typeof uiFactory.renderBackups === 'function' && Boolean(controlPlane),
7474
hasConfigs: isViewerUser,
7575
hasAccess: uiFactory.hasAccess,
76-
isServerless: databaseType === 'Serverless',
76+
databaseType,
7777
});
7878
let activeTab = pages.find((el) => el.id === diagnosticsTab);
7979
if (!activeTab) {

‎src/containers/Tenant/Diagnostics/DiagnosticsPages.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {StringParam, useQueryParams} from 'use-query-params';
55
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
66
import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
77
import {EPathSubType, EPathType} from '../../../types/api/schema';
8+
import type {ETenantType} from '../../../types/api/tenant';
89
import type {TenantQuery} from '../TenantPages';
910
import {TenantTabsGroups, getTenantPath} from '../TenantPages';
1011
import {isDatabaseEntityType, isTopicEntityType} from '../utils/schema';
@@ -21,7 +22,7 @@ interface GetPagesOptions {
2122
hasBackups?: boolean;
2223
hasConfigs?: boolean;
2324
hasAccess?: boolean;
24-
isServerless?: boolean;
25+
databaseType?: ETenantType;
2526
}
2627

2728
const overview = {
@@ -194,8 +195,8 @@ function computeInitialPages(type?: EPathType, subType?: EPathSubType) {
194195
return subTypePages || typePages || DIR_PAGES;
195196
}
196197

197-
function getDatabasePages(isServerless?: boolean) {
198-
return isServerless ? SERVERLESS_DATABASE_PAGES : DATABASE_PAGES;
198+
function getDatabasePages(databaseType?: ETenantType) {
199+
return databaseType === 'Serverless' ? SERVERLESS_DATABASE_PAGES : DATABASE_PAGES;
199200
}
200201

201202
function applyFilters(pages: Page[], type?: EPathType, options: GetPagesOptions = {}) {
@@ -226,7 +227,7 @@ export const getPagesByType = (
226227
) => {
227228
const base = computeInitialPages(type, subType);
228229
const dbContext = isDatabaseEntityType(type) || options?.isTopLevel;
229-
const seeded = dbContext ? getDatabasePages(options?.isServerless) : base;
230+
const seeded = dbContext ? getDatabasePages(options?.databaseType) : base;
230231

231232
let withFlags = seeded;
232233
if (!options?.hasFeatureFlags) {

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import {Link} from 'react-router-dom';
2+
3+
import {TENANT_METRICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
4+
import type {TenantMetricsTab} from '../../../../../store/reducers/tenant/types';
5+
import type {ETenantType} from '../../../../../types/api/tenant';
6+
import {cn} from '../../../../../utils/cn';
7+
import {
8+
formatCoresLegend,
9+
formatStorageLegend,
10+
} from '../../../../../utils/metrics/formatMetricLegend';
11+
import {TabCard} from '../TabCard/TabCard';
12+
import i18n from '../i18n';
13+
14+
const b = cn('tenant-metrics-tabs');
15+
16+
interface CommonMetricsTabsProps {
17+
activeTab: TenantMetricsTab;
18+
tabLinks: Record<TenantMetricsTab, string>;
19+
cpu: {totalUsed: number; totalLimit: number};
20+
storage: {totalUsed: number; totalLimit: number};
21+
storageGroupsCount?: number;
22+
databaseType?: ETenantType;
23+
}
24+
25+
export function CommonMetricsTabs({
26+
activeTab,
27+
tabLinks,
28+
cpu,
29+
storage,
30+
storageGroupsCount,
31+
databaseType,
32+
}: CommonMetricsTabsProps) {
33+
const isServerless = databaseType === 'Serverless';
34+
35+
return (
36+
<>
37+
<div
38+
className={b('link-container', {
39+
active: activeTab === TENANT_METRICS_TABS_IDS.cpu,
40+
})}
41+
>
42+
<Link to={tabLinks.cpu} className={b('link')}>
43+
<TabCard
44+
text={i18n('context_cpu-load')}
45+
value={cpu.totalUsed}
46+
limit={cpu.totalLimit}
47+
legendFormatter={formatCoresLegend}
48+
active={activeTab === TENANT_METRICS_TABS_IDS.cpu}
49+
helpText={i18n('context_cpu-description')}
50+
databaseType={databaseType}
51+
subtitle={isServerless ? i18n('context_serverless-autoscaled') : undefined}
52+
/>
53+
</Link>
54+
</div>
55+
<div
56+
className={b('link-container', {
57+
active: activeTab === TENANT_METRICS_TABS_IDS.storage,
58+
})}
59+
>
60+
<Link to={tabLinks.storage} className={b('link')}>
61+
<TabCard
62+
text={
63+
storageGroupsCount === undefined || isServerless
64+
? i18n('cards.storage-label')
65+
: i18n('context_storage-groups', {count: storageGroupsCount})
66+
}
67+
value={storage.totalUsed}
68+
limit={storage.totalLimit}
69+
legendFormatter={formatStorageLegend}
70+
active={activeTab === TENANT_METRICS_TABS_IDS.storage}
71+
helpText={i18n('context_storage-description')}
72+
databaseType={databaseType}
73+
subtitle={
74+
isServerless && storage.totalLimit
75+
? i18n('context_serverless-storage-subtitle', {
76+
groups: String(storageGroupsCount ?? 0),
77+
legend: formatStorageLegend({
78+
value: storage.totalUsed,
79+
capacity: storage.totalLimit,
80+
}),
81+
})
82+
: undefined
83+
}
84+
/>
85+
</Link>
86+
</div>
87+
</>
88+
);
89+
}

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import {Link} from 'react-router-dom';
2+
3+
import {TENANT_METRICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
4+
import type {TenantMetricsTab} from '../../../../../store/reducers/tenant/types';
5+
import {cn} from '../../../../../utils/cn';
6+
import {
7+
formatSpeedLegend,
8+
formatStorageLegend,
9+
} from '../../../../../utils/metrics/formatMetricLegend';
10+
import {TabCard} from '../TabCard/TabCard';
11+
import i18n from '../i18n';
12+
13+
const b = cn('tenant-metrics-tabs');
14+
15+
interface DedicatedMetricsTabsProps {
16+
activeTab: TenantMetricsTab;
17+
tabLinks: Record<TenantMetricsTab, string>;
18+
memory: {totalUsed: number; totalLimit: number};
19+
network: {totalUsed: number; totalLimit: number} | null;
20+
showNetwork: boolean;
21+
}
22+
23+
export function DedicatedMetricsTabs({
24+
activeTab,
25+
tabLinks,
26+
memory,
27+
network,
28+
showNetwork,
29+
}: DedicatedMetricsTabsProps) {
30+
return (
31+
<>
32+
<div
33+
className={b('link-container', {
34+
active: activeTab === TENANT_METRICS_TABS_IDS.memory,
35+
})}
36+
>
37+
<Link to={tabLinks.memory} className={b('link')}>
38+
<TabCard
39+
text={i18n('context_memory-used')}
40+
value={memory.totalUsed}
41+
limit={memory.totalLimit}
42+
legendFormatter={formatStorageLegend}
43+
active={activeTab === TENANT_METRICS_TABS_IDS.memory}
44+
helpText={i18n('context_memory-description')}
45+
databaseType="Dedicated"
46+
/>
47+
</Link>
48+
</div>
49+
{showNetwork && network && (
50+
<div
51+
className={b('link-container', {
52+
active: activeTab === TENANT_METRICS_TABS_IDS.network,
53+
})}
54+
>
55+
<Link to={tabLinks.network} className={b('link')}>
56+
<TabCard
57+
text={i18n('context_network-usage')}
58+
value={network.totalUsed}
59+
limit={network.totalLimit}
60+
legendFormatter={formatSpeedLegend}
61+
active={activeTab === TENANT_METRICS_TABS_IDS.network}
62+
helpText={i18n('context_network-description')}
63+
databaseType="Dedicated"
64+
/>
65+
</Link>
66+
</div>
67+
)}
68+
</>
69+
);
70+
}

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

Lines changed: 31 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {useMemo} from 'react';
22

33
import {Flex} from '@gravity-ui/uikit';
4-
import {Link, useLocation} from 'react-router-dom';
4+
import {useLocation} from 'react-router-dom';
55

66
import {parseQuery} from '../../../../../routes';
77
import {TENANT_METRICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
@@ -11,19 +11,16 @@ import type {
1111
TenantPoolsStats,
1212
TenantStorageStats,
1313
} from '../../../../../store/reducers/tenants/utils';
14+
import type {ETenantType} from '../../../../../types/api/tenant';
1415
import {cn} from '../../../../../utils/cn';
1516
import {SHOW_NETWORK_UTILIZATION} from '../../../../../utils/constants';
1617
import {useSetting} from '../../../../../utils/hooks';
1718
import {calculateMetricAggregates} from '../../../../../utils/metrics';
18-
import {
19-
formatCoresLegend,
20-
formatSpeedLegend,
21-
formatStorageLegend,
22-
} from '../../../../../utils/metrics/formatMetricLegend';
19+
// no direct legend formatters needed here – handled in subcomponents
2320
import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
24-
import {TabCard} from '../TabCard/TabCard';
25-
import i18n from '../i18n';
2621

22+
import {CommonMetricsTabs} from './CommonMetricsTabs';
23+
import {DedicatedMetricsTabs} from './DedicatedMetricsTabs';
2724
import {ServerlessPlaceholderTabs} from './ServerlessPlaceholderTabs';
2825

2926
import './MetricsTabs.scss';
@@ -37,7 +34,7 @@ interface MetricsTabsProps {
3734
tabletStorageStats?: TenantStorageStats[];
3835
networkStats?: TenantMetricStats[];
3936
storageGroupsCount?: number;
40-
isServerless?: boolean;
37+
databaseType?: ETenantType;
4138
activeTab: TenantMetricsTab;
4239
}
4340

@@ -48,7 +45,7 @@ export function MetricsTabs({
4845
tabletStorageStats,
4946
networkStats,
5047
storageGroupsCount,
51-
isServerless,
48+
databaseType,
5249
activeTab,
5350
}: MetricsTabsProps) {
5451
const location = useLocation();
@@ -98,99 +95,36 @@ export function MetricsTabs({
9895
[networkStats],
9996
);
10097

101-
const cardVariant = isServerless ? 'serverless' : 'default';
98+
// card variant is handled within subcomponents
99+
100+
const isServerless = databaseType === 'Serverless';
102101

103102
return (
104103
<Flex className={b({serverless: Boolean(isServerless)})} alignItems="center">
105-
<div
106-
className={b('link-container', {
107-
active: activeTab === TENANT_METRICS_TABS_IDS.cpu,
108-
})}
109-
>
110-
<Link to={tabLinks.cpu} className={b('link')}>
111-
<TabCard
112-
text={i18n('context_cpu-load')}
113-
value={cpuMetrics.totalUsed}
114-
limit={cpuMetrics.totalLimit}
115-
legendFormatter={formatCoresLegend}
116-
active={activeTab === TENANT_METRICS_TABS_IDS.cpu}
117-
helpText={i18n('context_cpu-description')}
118-
variant={cardVariant}
119-
subtitle={isServerless ? i18n('context_serverless-autoscaled') : undefined}
120-
/>
121-
</Link>
122-
</div>
123-
<div
124-
className={b('link-container', {
125-
active: activeTab === TENANT_METRICS_TABS_IDS.storage,
126-
})}
127-
>
128-
<Link to={tabLinks.storage} className={b('link')}>
129-
<TabCard
130-
text={
131-
storageGroupsCount === undefined || isServerless
132-
? i18n('cards.storage-label')
133-
: i18n('context_storage-groups', {count: storageGroupsCount})
134-
}
135-
value={storageMetrics.totalUsed}
136-
limit={storageMetrics.totalLimit}
137-
legendFormatter={formatStorageLegend}
138-
active={activeTab === TENANT_METRICS_TABS_IDS.storage}
139-
helpText={i18n('context_storage-description')}
140-
variant={cardVariant}
141-
subtitle={
142-
isServerless && storageMetrics.totalLimit
143-
? i18n('context_serverless-storage-subtitle', {
144-
groups: String(storageGroupsCount ?? 0),
145-
legend: formatStorageLegend({
146-
value: storageMetrics.totalUsed,
147-
capacity: storageMetrics.totalLimit,
148-
}),
149-
})
150-
: undefined
151-
}
152-
/>
153-
</Link>
154-
</div>
104+
<CommonMetricsTabs
105+
activeTab={activeTab}
106+
tabLinks={tabLinks}
107+
cpu={{totalUsed: cpuMetrics.totalUsed, totalLimit: cpuMetrics.totalLimit}}
108+
storage={{
109+
totalUsed: storageMetrics.totalUsed,
110+
totalLimit: storageMetrics.totalLimit,
111+
}}
112+
storageGroupsCount={storageGroupsCount}
113+
databaseType={databaseType}
114+
/>
155115
{isServerless ? (
156116
<ServerlessPlaceholderTabs />
157117
) : (
158-
<>
159-
<div
160-
className={b('link-container', {
161-
active: activeTab === TENANT_METRICS_TABS_IDS.memory,
162-
})}
163-
>
164-
<Link to={tabLinks.memory} className={b('link')}>
165-
<TabCard
166-
text={i18n('context_memory-used')}
167-
value={memoryMetrics.totalUsed}
168-
limit={memoryMetrics.totalLimit}
169-
legendFormatter={formatStorageLegend}
170-
active={activeTab === TENANT_METRICS_TABS_IDS.memory}
171-
helpText={i18n('context_memory-description')}
172-
/>
173-
</Link>
174-
</div>
175-
{showNetworkUtilization && networkStats && networkMetrics && (
176-
<div
177-
className={b('link-container', {
178-
active: activeTab === TENANT_METRICS_TABS_IDS.network,
179-
})}
180-
>
181-
<Link to={tabLinks.network} className={b('link')}>
182-
<TabCard
183-
text={i18n('context_network-usage')}
184-
value={networkMetrics.totalUsed}
185-
limit={networkMetrics.totalLimit}
186-
legendFormatter={formatSpeedLegend}
187-
active={activeTab === TENANT_METRICS_TABS_IDS.network}
188-
helpText={i18n('context_network-description')}
189-
/>
190-
</Link>
191-
</div>
192-
)}
193-
</>
118+
<DedicatedMetricsTabs
119+
activeTab={activeTab}
120+
tabLinks={tabLinks}
121+
memory={{
122+
totalUsed: memoryMetrics.totalUsed,
123+
totalLimit: memoryMetrics.totalLimit,
124+
}}
125+
network={networkMetrics}
126+
showNetwork={Boolean(showNetworkUtilization && networkStats && networkMetrics)}
127+
/>
194128
)}
195129
</Flex>
196130
);

0 commit comments

Comments
 (0)