Skip to content

Commit 3afc177

Browse files
astandrikastandrik
committed
fix: better code
1 parent f2e5aec commit 3afc177

File tree

2 files changed

+171
-129
lines changed

2 files changed

+171
-129
lines changed

‎src/components/QueriesActivityBar/QueriesActivityBar.tsx‎

Lines changed: 9 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,22 @@
1-
import React from 'react';
2-
3-
import {CirclePlay, Clock, Display, Person, Rocket} from '@gravity-ui/icons';
4-
import {ArrowToggle, Button, Card, Flex, Icon, Label, Text} from '@gravity-ui/uikit';
5-
import {useHistory, useLocation} from 'react-router-dom';
6-
7-
import {TenantTabsGroups, getTenantPath} from '../../containers/Tenant/TenantPages';
8-
import {parseQuery} from '../../routes';
9-
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../store/reducers/tenant/constants';
10-
import {cn} from '../../utils/cn';
11-
121
import {QueriesActivityAlert} from './QueriesActivityAlert';
13-
import {QueriesActivityCharts} from './QueriesActivityCharts';
2+
import {QueriesActivityExpandable} from './QueriesActivityExpandable';
143
import {QueriesActivitySkeleton} from './QueriesActivitySkeleton';
15-
import i18n from './i18n';
164
import {useChartAvailability} from './useChartAvailability';
175
import {useQueriesActivityData} from './useQueriesActivityData';
18-
import {formatTrendValue} from './utils';
196

207
import './QueriesActivityBar.scss';
218

22-
const b = cn('queries-activity-bar');
23-
249
interface QueriesActivityBarProps {
2510
tenantName: string;
2611
}
2712

2813
export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
29-
const history = useHistory();
30-
const location = useLocation();
31-
const [expanded, setExpanded] = React.useState(false);
32-
3314
// Check chart availability without rendering hidden components
3415
const areChartsAvailable = useChartAvailability(tenantName);
3516

3617
const {runningQueriesCount, uniqueApplications, uniqueUsers, qps, latency} =
3718
useQueriesActivityData(tenantName);
3819

39-
const handleOpenRunningQueries = () => {
40-
const queryParams = parseQuery(location);
41-
const path = getTenantPath({
42-
...queryParams,
43-
[TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
44-
queryMode: 'running',
45-
});
46-
history.push(path);
47-
};
48-
49-
const handleToggleExpanded = () => {
50-
setExpanded(!expanded);
51-
};
52-
5320
// Show skeleton while determining chart availability
5421
if (areChartsAvailable === null) {
5522
return <QueriesActivitySkeleton />;
@@ -68,100 +35,13 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
6835

6936
// Render expandable mode when charts are available
7037
return (
71-
<div className={b({expanded})}>
72-
<Card className={b('card')} type="container" view={expanded ? 'outlined' : 'raised'}>
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>
88-
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>
114-
</Flex>
115-
116-
<ArrowToggle direction={expanded ? 'top' : 'bottom'} size={16} />
117-
</Flex>
118-
</Flex>
119-
120-
{expanded && (
121-
<Flex direction="column" gap={4} className={b('content')}>
122-
<Flex wrap alignItems="center" gap={1} className={b('stats')}>
123-
<Label
124-
theme="unknown"
125-
icon={<Icon data={CirclePlay} />}
126-
size="s"
127-
value={String(runningQueriesCount)}
128-
>
129-
{i18n('field_running-queries')}
130-
</Label>
131-
132-
<Label
133-
theme="unknown"
134-
icon={<Icon data={Display} />}
135-
size="s"
136-
value={String(uniqueApplications)}
137-
>
138-
{i18n('field_applications')}
139-
</Label>
140-
141-
<Label
142-
theme="unknown"
143-
icon={<Icon data={Person} />}
144-
size="s"
145-
value={String(uniqueUsers)}
146-
>
147-
{i18n('field_users')}
148-
</Label>
149-
150-
{runningQueriesCount > 0 && (
151-
<Button
152-
view="outlined"
153-
size="s"
154-
onClick={handleOpenRunningQueries}
155-
className={b('open-queries-button')}
156-
>
157-
{i18n('action_open-running-queries')}
158-
</Button>
159-
)}
160-
</Flex>
161-
</Flex>
162-
)}
163-
<QueriesActivityCharts tenantName={tenantName} expanded={expanded} />
164-
</Card>
165-
</div>
38+
<QueriesActivityExpandable
39+
tenantName={tenantName}
40+
runningQueriesCount={runningQueriesCount}
41+
uniqueApplications={uniqueApplications}
42+
uniqueUsers={uniqueUsers}
43+
qps={qps}
44+
latency={latency}
45+
/>
16646
);
16747
}

‎src/components/QueriesActivityBar/QueriesActivityExpandable.tsx‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import React from 'react';
2+
3+
import {CirclePlay, Clock, Display, Person, Rocket} from '@gravity-ui/icons';
4+
import {ArrowToggle, Button, Card, Flex, Icon, Label, Text} from '@gravity-ui/uikit';
5+
import {useHistory, useLocation} from 'react-router-dom';
6+
7+
import {TenantTabsGroups, getTenantPath} from '../../containers/Tenant/TenantPages';
8+
import {parseQuery} from '../../routes';
9+
import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../store/reducers/tenant/constants';
10+
import {cn} from '../../utils/cn';
11+
12+
import {QueriesActivityCharts} from './QueriesActivityCharts';
13+
import i18n from './i18n';
14+
import {formatTrendValue} from './utils';
15+
16+
import './QueriesActivityBar.scss';
17+
18+
const b = cn('queries-activity-bar');
19+
20+
interface QueriesActivityExpandableProps {
21+
tenantName: string;
22+
runningQueriesCount: number;
23+
uniqueApplications: number;
24+
uniqueUsers: number;
25+
qps?: {
26+
value?: string;
27+
trend?: {
28+
value?: number;
29+
};
30+
};
31+
latency?: {
32+
value?: string;
33+
trend?: {
34+
value?: number;
35+
};
36+
};
37+
}
38+
39+
export function QueriesActivityExpandable({
40+
tenantName,
41+
runningQueriesCount,
42+
uniqueApplications,
43+
uniqueUsers,
44+
qps,
45+
latency,
46+
}: QueriesActivityExpandableProps) {
47+
const history = useHistory();
48+
const location = useLocation();
49+
const [expanded, setExpanded] = React.useState(false);
50+
51+
const handleOpenRunningQueries = () => {
52+
const queryParams = parseQuery(location);
53+
const path = getTenantPath({
54+
...queryParams,
55+
[TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries,
56+
queryMode: 'running',
57+
});
58+
history.push(path);
59+
};
60+
61+
const handleToggleExpanded = () => {
62+
setExpanded(!expanded);
63+
};
64+
65+
return (
66+
<div className={b({expanded})}>
67+
<Card className={b('card')} type="container" view={expanded ? 'outlined' : 'raised'}>
68+
<Flex
69+
className={b('header')}
70+
onClick={handleToggleExpanded}
71+
justifyContent="space-between"
72+
alignItems="center"
73+
gap={3}
74+
>
75+
<Flex direction="column">
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}>
85+
<Flex alignItems="center" gap={1}>
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+
</Flex>
110+
111+
<ArrowToggle direction={expanded ? 'top' : 'bottom'} size={16} />
112+
</Flex>
113+
</Flex>
114+
115+
{expanded && (
116+
<Flex direction="column" gap={4} className={b('content')}>
117+
<Flex wrap alignItems="center" gap={1} className={b('stats')}>
118+
<Label
119+
theme="unknown"
120+
icon={<Icon data={CirclePlay} />}
121+
size="s"
122+
value={String(runningQueriesCount)}
123+
>
124+
{i18n('field_running-queries')}
125+
</Label>
126+
127+
<Label
128+
theme="unknown"
129+
icon={<Icon data={Display} />}
130+
size="s"
131+
value={String(uniqueApplications)}
132+
>
133+
{i18n('field_applications')}
134+
</Label>
135+
136+
<Label
137+
theme="unknown"
138+
icon={<Icon data={Person} />}
139+
size="s"
140+
value={String(uniqueUsers)}
141+
>
142+
{i18n('field_users')}
143+
</Label>
144+
145+
{runningQueriesCount > 0 && (
146+
<Button
147+
view="outlined"
148+
size="s"
149+
onClick={handleOpenRunningQueries}
150+
className={b('open-queries-button')}
151+
>
152+
{i18n('action_open-running-queries')}
153+
</Button>
154+
)}
155+
</Flex>
156+
</Flex>
157+
)}
158+
<QueriesActivityCharts tenantName={tenantName} expanded={expanded} />
159+
</Card>
160+
</div>
161+
);
162+
}

0 commit comments

Comments
 (0)