Skip to content

Commit f2e5aec

Browse files
astandrikastandrik
committed
fix: better code
1 parent 2b9a61a commit f2e5aec

File tree

6 files changed

+68
-169
lines changed

6 files changed

+68
-169
lines changed

‎src/components/QueriesActivityBar/QueriesActivityAlert.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
}
1515

1616
&__content {
17-
padding: var(--g-spacing-3) var(--g-spacing-4);
17+
padding: var(--g-spacing-5) var(--g-spacing-4);
1818
}
1919

2020
&__title {
@@ -23,10 +23,5 @@
2323

2424
&__open-queries-button {
2525
margin-left: var(--g-spacing-1);
26-
27-
&:focus-visible {
28-
outline: 2px solid var(--g-color-line-focus);
29-
outline-offset: 2px;
30-
}
3126
}
3227
}

‎src/components/QueriesActivityBar/QueriesActivityBar.scss‎

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@
1515
}
1616

1717
&__header {
18-
display: flex;
19-
justify-content: space-between;
20-
align-items: center;
21-
gap: var(--g-spacing-3);
22-
2318
padding: var(--g-spacing-3) var(--g-spacing-4);
2419

2520
cursor: pointer;
@@ -44,69 +39,24 @@
4439
}
4540
}
4641

47-
&__content-wrapper {
48-
display: flex;
49-
flex-grow: 1;
50-
align-items: center;
51-
gap: var(--g-spacing-2);
52-
}
53-
54-
&__metrics {
55-
display: flex;
56-
align-items: center;
57-
gap: var(--g-spacing-1);
58-
}
59-
60-
&__header-metrics {
61-
display: flex;
62-
align-items: center;
63-
gap: var(--g-spacing-1);
64-
}
65-
6642
&__content {
67-
display: flex;
68-
flex-direction: column;
69-
gap: var(--g-spacing-4);
70-
7143
padding-top: var(--g-spacing-3);
7244
padding-bottom: var(--g-spacing-3);
7345
}
7446

7547
&__stats {
76-
display: flex;
77-
flex-wrap: wrap;
78-
align-items: center;
79-
gap: var(--g-spacing-1);
80-
8148
padding: 0 var(--g-spacing-4);
8249
}
8350

8451
&__open-queries-button {
85-
margin-left: 4px;
52+
margin-left: var(--g-spacing-1);
8653
}
8754

8855
&__charts {
89-
display: flex;
90-
gap: var(--g-spacing-4);
91-
9256
padding: 0 var(--g-spacing-4);
9357

9458
@media (max-width: 1200px) {
95-
flex-direction: column;
59+
flex-direction: column !important;
9660
}
9761
}
98-
99-
&__chart-container {
100-
display: flex;
101-
flex: 1;
102-
flex-direction: column;
103-
gap: var(--g-spacing-3);
104-
}
105-
106-
// Focus states for accessibility
107-
&__header:focus-visible,
108-
&__open-queries-button:focus-visible {
109-
outline: 2px solid var(--g-color-line-focus);
110-
outline-offset: 2px;
111-
}
11262
}

‎src/components/QueriesActivityBar/QueriesActivityBar.tsx‎

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -70,52 +70,56 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
7070
return (
7171
<div className={b({expanded})}>
7272
<Card className={b('card')} type="container" view={expanded ? 'outlined' : 'raised'}>
73-
<div className={b('header')} onClick={handleToggleExpanded}>
74-
<Flex justifyContent="space-between" className={b('content-wrapper')}>
75-
<Flex direction="column" className={b('title-section')}>
76-
<Text variant="subheader-2" className={b('title')}>
77-
{i18n('title_queries-activity')}
78-
</Text>
79-
<Text color="secondary" variant="caption-2" className={b('subtitle')}>
80-
{i18n('context_monitor-changes-realtime')}
81-
</Text>
82-
</Flex>
83-
84-
<Flex alignItems="center" gap={4} className={b('header-metrics')}>
85-
<div className={b('metrics')}>
86-
<Label
87-
theme={runningQueriesCount > 0 ? 'success' : 'unknown'}
88-
size="s"
89-
icon={<Icon data={CirclePlay} size={14} />}
90-
>
91-
{runningQueriesCount}
92-
</Label>
93-
<Label
94-
theme="unknown"
95-
icon={<Icon data={Rocket} />}
96-
size="s"
97-
value={formatTrendValue(qps?.trend?.value ?? 0)}
98-
>
99-
{i18n('value_per-sec', {count: qps?.value ?? '0'})}
100-
</Label>
101-
<Label
102-
theme="unknown"
103-
icon={<Icon data={Clock} />}
104-
size="s"
105-
value={formatTrendValue(latency?.trend?.value ?? 0)}
106-
>
107-
{i18n('value_ms', {time: latency?.value ?? '0'})}
108-
</Label>
109-
</div>
73+
<Flex
74+
className={b('header')}
75+
onClick={handleToggleExpanded}
76+
justifyContent="space-between"
77+
alignItems="center"
78+
gap={3}
79+
>
80+
<Flex direction="column">
81+
<Text variant="subheader-2" className={b('title')}>
82+
{i18n('title_queries-activity')}
83+
</Text>
84+
<Text color="secondary" variant="caption-2" className={b('subtitle')}>
85+
{i18n('context_monitor-changes-realtime')}
86+
</Text>
87+
</Flex>
11088

111-
<ArrowToggle direction={expanded ? 'top' : 'bottom'} size={16} />
89+
<Flex alignItems="center" gap={4}>
90+
<Flex alignItems="center" gap={1}>
91+
<Label
92+
theme={runningQueriesCount > 0 ? 'success' : 'unknown'}
93+
size="s"
94+
icon={<Icon data={CirclePlay} size={14} />}
95+
>
96+
{runningQueriesCount}
97+
</Label>
98+
<Label
99+
theme="unknown"
100+
icon={<Icon data={Rocket} />}
101+
size="s"
102+
value={formatTrendValue(qps?.trend?.value ?? 0)}
103+
>
104+
{i18n('value_per-sec', {count: qps?.value ?? '0'})}
105+
</Label>
106+
<Label
107+
theme="unknown"
108+
icon={<Icon data={Clock} />}
109+
size="s"
110+
value={formatTrendValue(latency?.trend?.value ?? 0)}
111+
>
112+
{i18n('value_ms', {time: latency?.value ?? '0'})}
113+
</Label>
112114
</Flex>
115+
116+
<ArrowToggle direction={expanded ? 'top' : 'bottom'} size={16} />
113117
</Flex>
114-
</div>
118+
</Flex>
115119

116120
{expanded && (
117-
<div className={b('content')}>
118-
<div className={b('stats')}>
121+
<Flex direction="column" gap={4} className={b('content')}>
122+
<Flex wrap alignItems="center" gap={1} className={b('stats')}>
119123
<Label
120124
theme="unknown"
121125
icon={<Icon data={CirclePlay} />}
@@ -153,8 +157,8 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
153157
{i18n('action_open-running-queries')}
154158
</Button>
155159
)}
156-
</div>
157-
</div>
160+
</Flex>
161+
</Flex>
158162
)}
159163
<QueriesActivityCharts tenantName={tenantName} expanded={expanded} />
160164
</Card>

‎src/components/QueriesActivityBar/QueriesActivityCharts.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react';
22

3+
import {Flex} from '@gravity-ui/uikit';
4+
35
import {defaultDashboardConfig} from '../../containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig';
46
import {cn} from '../../utils/cn';
57
import {useAutoRefreshInterval} from '../../utils/hooks';
@@ -66,8 +68,13 @@ export function QueriesActivityCharts({
6668
// TODO: Remove this workaround once the upstream issue is fixed
6769

6870
return (
69-
<div className={b('charts')} style={{display: expanded ? undefined : 'none'}}>
70-
<div className={b('chart-container')}>
71+
<Flex
72+
className={b('charts')}
73+
gap={4}
74+
direction="row"
75+
style={{display: expanded ? undefined : 'none'}}
76+
>
77+
<Flex direction="column" gap={3} grow>
7178
<MetricChart
7279
database={tenantName}
7380
metrics={queriesChartConfig.metrics}
@@ -78,9 +85,9 @@ export function QueriesActivityCharts({
7885
isChartVisible={hasChartsLoaded && expanded}
7986
title={queriesChartConfig.title}
8087
/>
81-
</div>
88+
</Flex>
8289

83-
<div className={b('chart-container')}>
90+
<Flex direction="column" gap={3} grow>
8491
<MetricChart
8592
database={tenantName}
8693
metrics={latenciesChartConfig.metrics}
@@ -91,7 +98,7 @@ export function QueriesActivityCharts({
9198
isChartVisible={hasChartsLoaded && expanded}
9299
title={latenciesChartConfig.title}
93100
/>
94-
</div>
95-
</div>
101+
</Flex>
102+
</Flex>
96103
);
97104
}

‎src/components/QueriesActivityBar/QueriesActivitySkeleton.scss‎

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,8 @@
11
@use '../../styles/mixins.scss';
22

33
.queries-activity-skeleton {
4-
$b: &;
5-
6-
border-radius: var(--g-border-radius-s);
7-
8-
&__card {
4+
&__skeleton {
95
width: 100%;
10-
padding: 0;
11-
12-
border: 1px solid var(--g-color-line-generic);
13-
border-radius: var(--g-border-radius-s);
14-
}
15-
16-
&__content {
17-
padding: var(--g-spacing-3) var(--g-spacing-4);
18-
}
19-
20-
&__title {
21-
width: 120px;
22-
height: 20px;
23-
}
24-
25-
&__label {
26-
width: 80px;
27-
height: 24px;
28-
29-
border-radius: var(--g-border-radius-xs);
30-
}
31-
32-
&__button {
33-
width: 140px;
34-
height: 24px;
35-
36-
border-radius: var(--g-border-radius-xs);
6+
height: 62px;
377
}
388
}

‎src/components/QueriesActivityBar/QueriesActivitySkeleton.tsx‎

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,11 @@
1-
import {Card, Flex, Skeleton} from '@gravity-ui/uikit';
1+
import {Skeleton} from '@gravity-ui/uikit';
22

33
import {cn} from '../../utils/cn';
4-
import {useDelayed} from '../../utils/hooks/useDelayed';
54

65
import './QueriesActivitySkeleton.scss';
76

87
const b = cn('queries-activity-skeleton');
98

10-
interface QueriesActivitySkeletonProps {
11-
delay?: number;
12-
}
13-
14-
export function QueriesActivitySkeleton({delay = 600}: QueriesActivitySkeletonProps) {
15-
const [show] = useDelayed(delay);
16-
17-
if (!show) {
18-
return null;
19-
}
20-
21-
return (
22-
<div className={b()}>
23-
<Card className={b('card')} type="container" view="outlined">
24-
<Flex direction="row" gap={4} className={b('content')}>
25-
<Flex>
26-
<Skeleton className={b('title')} />
27-
</Flex>
28-
<Flex wrap alignItems="center" gap={1} className={b('stats')}>
29-
<Skeleton className={b('label')} />
30-
<Skeleton className={b('label')} />
31-
<Skeleton className={b('label')} />
32-
<Skeleton className={b('button')} />
33-
</Flex>
34-
</Flex>
35-
</Card>
36-
</div>
37-
);
9+
export function QueriesActivitySkeleton() {
10+
return <Skeleton className={b('skeleton')} />;
3811
}

0 commit comments

Comments
 (0)