Skip to content

Commit cfb0d28

Browse files
astandrikastandrik
committed
fix: better code
1 parent 610df88 commit cfb0d28

File tree

4 files changed

+126
-91
lines changed

4 files changed

+126
-91
lines changed

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,3 +224,13 @@
224224
padding-right: 0;
225225
}
226226
}
227+
228+
.tenant-metrics-tabs_serverless {
229+
.tenant-metrics-tabs__link-container_placeholder {
230+
pointer-events: none;
231+
232+
.tenant-tab-card__card-container {
233+
opacity: 0;
234+
}
235+
}
236+
}

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

Lines changed: 0 additions & 9 deletions
This file was deleted.

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,10 @@ import React from 'react';
22

33
import {cn} from '../../../../../utils/cn';
44
import {NON_BREAKING_SPACE} from '../../../../../utils/constants';
5-
import {formatCoresLegend} from '../../../../../utils/metrics/formatMetricLegend';
65
import {TabCard} from '../TabCard/TabCard';
76

8-
import './ServerlessPlaceholderTabs.scss';
9-
107
const b = cn('tenant-metrics-tabs');
11-
12-
const PLACEHOLDER_VALUE = 0;
13-
const PLACEHOLDER_LIMIT = 1;
14-
8+
import './MetricsTabs.scss';
159
interface ServerlessPlaceholderTabsProps {
1610
count?: number;
1711
}
@@ -27,9 +21,6 @@ export const ServerlessPlaceholderTabs: React.FC<ServerlessPlaceholderTabsProps>
2721
<div className={b('link')}>
2822
<TabCard
2923
text={NON_BREAKING_SPACE}
30-
value={PLACEHOLDER_VALUE}
31-
limit={PLACEHOLDER_LIMIT}
32-
legendFormatter={formatCoresLegend}
3324
active={false}
3425
variant="serverless"
3526
subtitle={NON_BREAKING_SPACE}

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

Lines changed: 115 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import React, {useMemo} from 'react';
2+
13
import {Card, Flex} from '@gravity-ui/uikit';
24

35
import {DoughnutMetrics} from '../../../../../components/DoughnutMetrics/DoughnutMetrics';
@@ -8,93 +10,134 @@ import './TabCard.scss';
810

911
const b = cn('tenant-tab-card');
1012

11-
interface TabCardProps {
13+
type TabCardVariant = 'default' | 'serverless';
14+
15+
interface TabCardBaseProps {
1216
text: string;
13-
value: number;
14-
limit: number;
1517
active?: boolean;
1618
helpText?: string;
17-
legendFormatter: (params: {value: number; capacity: number}) => string;
18-
variant?: 'default' | 'serverless';
1919
subtitle?: string;
2020
}
2121

22-
export function TabCard({
23-
text,
24-
value,
25-
limit,
26-
active,
27-
helpText,
28-
legendFormatter,
29-
variant = 'default',
30-
subtitle,
31-
}: TabCardProps) {
32-
const {status, percents, legend, fill} = getDiagramValues({
33-
value,
34-
capacity: limit,
35-
legendFormatter,
36-
});
37-
38-
if (variant === 'serverless') {
39-
return (
40-
<div className={b({active})}>
41-
<Card
42-
className={b('card-container', {active})}
43-
type="container"
44-
view={active ? 'outlined' : 'raised'}
45-
>
46-
<div className={b('legend-wrapper')}>
47-
<DoughnutMetrics.Legend
48-
variant="subheader-2"
49-
note={helpText}
50-
noteIconSize="s"
51-
>
52-
{text}
53-
</DoughnutMetrics.Legend>
54-
{subtitle ? (
55-
<DoughnutMetrics.Legend variant="body-1" color="secondary">
56-
{subtitle}
57-
</DoughnutMetrics.Legend>
58-
) : null}
59-
</div>
60-
</Card>
61-
</div>
62-
);
63-
}
22+
interface TabCardDefaultProps extends TabCardBaseProps {
23+
variant?: Extract<TabCardVariant, 'default'>;
24+
value: number;
25+
limit: number;
26+
legendFormatter: (params: {value: number; capacity: number}) => string;
27+
}
28+
29+
interface TabCardServerlessProps extends TabCardBaseProps {
30+
variant: Extract<TabCardVariant, 'serverless'>;
31+
}
32+
33+
type TabCardProps = TabCardDefaultProps | TabCardServerlessProps;
34+
35+
function isServerlessProps(props: TabCardProps): props is TabCardServerlessProps {
36+
return props.variant === 'serverless';
37+
}
6438

39+
function TabCardContainer({active, children}: {active?: boolean; children: React.ReactNode}) {
6540
return (
6641
<div className={b({active})}>
6742
<Card
6843
className={b('card-container', {active})}
6944
type="container"
7045
view={active ? 'outlined' : 'raised'}
7146
>
72-
<Flex gap={3} alignItems="center">
73-
<DoughnutMetrics
74-
size="small"
75-
status={status}
76-
fillWidth={fill}
77-
className={b('doughnut')}
78-
>
79-
<DoughnutMetrics.Value variant="subheader-1">
80-
{percents}
81-
</DoughnutMetrics.Value>
82-
</DoughnutMetrics>
83-
<div className={b('legend-wrapper')}>
84-
<DoughnutMetrics.Legend variant="subheader-2">
85-
{legend}
86-
</DoughnutMetrics.Legend>
87-
<DoughnutMetrics.Legend
88-
variant="body-1"
89-
color="secondary"
90-
note={helpText}
91-
noteIconSize="s"
92-
>
93-
{text}
94-
</DoughnutMetrics.Legend>
95-
</div>
96-
</Flex>
47+
{children}
9748
</Card>
9849
</div>
9950
);
10051
}
52+
53+
const TabCardDefaultContent = React.memo(function TabCardDefaultContent({
54+
text,
55+
value,
56+
limit,
57+
helpText,
58+
legendFormatter,
59+
}: {
60+
text: string;
61+
value: number;
62+
limit: number;
63+
helpText?: string;
64+
legendFormatter: (params: {value: number; capacity: number}) => string;
65+
}) {
66+
const diagram = useMemo(
67+
() => getDiagramValues({value, capacity: limit, legendFormatter}),
68+
[value, limit, legendFormatter],
69+
);
70+
71+
const {status, percents, legend, fill} = diagram;
72+
73+
return (
74+
<Flex gap={3} alignItems="center">
75+
<DoughnutMetrics
76+
size="small"
77+
status={status}
78+
fillWidth={fill}
79+
className={b('doughnut')}
80+
>
81+
<DoughnutMetrics.Value variant="subheader-1">{percents}</DoughnutMetrics.Value>
82+
</DoughnutMetrics>
83+
<div className={b('legend-wrapper')}>
84+
<DoughnutMetrics.Legend variant="subheader-2">{legend}</DoughnutMetrics.Legend>
85+
<DoughnutMetrics.Legend
86+
variant="body-1"
87+
color="secondary"
88+
note={helpText}
89+
noteIconSize="s"
90+
>
91+
{text}
92+
</DoughnutMetrics.Legend>
93+
</div>
94+
</Flex>
95+
);
96+
});
97+
98+
const TabCardServerlessContent = React.memo(function TabCardServerlessContent({
99+
text,
100+
helpText,
101+
subtitle,
102+
}: {
103+
text: string;
104+
helpText?: string;
105+
subtitle?: string;
106+
}) {
107+
return (
108+
<div className={b('legend-wrapper')}>
109+
<DoughnutMetrics.Legend variant="subheader-2" note={helpText} noteIconSize="s">
110+
{text}
111+
</DoughnutMetrics.Legend>
112+
{subtitle ? (
113+
<DoughnutMetrics.Legend variant="body-1" color="secondary">
114+
{subtitle}
115+
</DoughnutMetrics.Legend>
116+
) : null}
117+
</div>
118+
);
119+
});
120+
121+
export function TabCard(props: TabCardProps) {
122+
const {active} = props;
123+
124+
return (
125+
<TabCardContainer active={active}>
126+
{isServerlessProps(props) ? (
127+
<TabCardServerlessContent
128+
text={props.text}
129+
helpText={props.helpText}
130+
subtitle={props.subtitle}
131+
/>
132+
) : (
133+
<TabCardDefaultContent
134+
text={props.text}
135+
value={props.value}
136+
limit={props.limit}
137+
helpText={props.helpText}
138+
legendFormatter={props.legendFormatter}
139+
/>
140+
)}
141+
</TabCardContainer>
142+
);
143+
}

0 commit comments

Comments
 (0)