Skip to content

Commit 662deef

Browse files
astandrikastandrik
committed
fix: use card instead of disclosure
1 parent a9ecc25 commit 662deef

File tree

2 files changed

+65
-70
lines changed

2 files changed

+65
-70
lines changed

‎src/components/QueriesActivityBar/QueriesActivityBar.scss‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,13 @@
55

66
border-radius: var(--g-border-radius-s);
77

8-
// Collapsed state (default)
9-
background-color: var(--g-color-base-float);
8+
&__card {
9+
width: 100%;
1010

11-
&_expanded {
12-
border: 1px solid var(--g-color-base-generic);
13-
border-radius: var(--g-border-radius-s);
14-
background-color: transparent;
15-
}
11+
// Override Card's default padding for custom content layout
12+
padding: 0;
1613

17-
&__disclosure {
18-
width: 100%;
14+
border-radius: var(--g-border-radius-s);
1915
}
2016

2117
&__header {
@@ -39,9 +35,10 @@
3935

4036
#{$b}_expanded & {
4137
border: none;
38+
border-bottom-right-radius: 0;
39+
border-bottom-left-radius: 0;
4240
}
4341

44-
// When expanded, only round top corners
4542
#{$b}_expanded &:hover {
4643
background-color: transparent;
4744
}
@@ -64,6 +61,9 @@
6461
display: flex;
6562
flex-direction: column;
6663
gap: var(--g-spacing-4);
64+
65+
padding-top: var(--g-spacing-3);
66+
padding-bottom: var(--g-spacing-3);
6767
}
6868

6969
&__stats {
@@ -84,7 +84,6 @@
8484
gap: var(--g-spacing-4);
8585

8686
padding: 0 var(--g-spacing-4);
87-
padding-top: var(--g-spacing-4);
8887

8988
@media (max-width: 1200px) {
9089
flex-direction: column;

‎src/components/QueriesActivityBar/QueriesActivityBar.tsx‎

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

33
import {CirclePlay, Clock, Display, Person, Rocket} from '@gravity-ui/icons';
4-
import {ArrowToggle, Button, Disclosure, Flex, Icon, Label, Text} from '@gravity-ui/uikit';
4+
import {ArrowToggle, Button, Card, Flex, Icon, Label, Text} from '@gravity-ui/uikit';
55
import {useHistory, useLocation} from 'react-router-dom';
66

77
import {TenantTabsGroups, getTenantPath} from '../../containers/Tenant/TenantPages';
@@ -128,61 +128,57 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
128128
history.push(path);
129129
};
130130

131+
const handleToggleExpanded = () => {
132+
setExpanded(!expanded);
133+
};
134+
131135
return (
132136
<div className={b({expanded})} style={{display: isActivityBarHidden ? 'none' : undefined}}>
133-
<Disclosure expanded={expanded} onUpdate={setExpanded} className={b('disclosure')}>
134-
<Disclosure.Summary>
135-
{(props) => (
136-
<div {...props} className={b('header')}>
137-
<Flex justifyContent="space-between" className={b('content-wrapper')}>
138-
<Flex direction="column" className={b('title-section')}>
139-
<Text variant="subheader-2" className={b('title')}>
140-
{i18n('title_queries-activity')}
141-
</Text>
142-
<Text
143-
color="secondary"
144-
variant="caption-2"
145-
className={b('subtitle')}
146-
>
147-
{i18n('context_monitor-changes-realtime')}
148-
</Text>
149-
</Flex>
150-
151-
<div className={b('metrics')}>
152-
<Label
153-
theme={runningQueriesCount > 0 ? 'success' : 'unknown'}
154-
size="s"
155-
icon={<Icon data={CirclePlay} size={14} />}
156-
>
157-
{runningQueriesCount}
158-
</Label>
159-
160-
<Label
161-
theme="clear"
162-
size="s"
163-
icon={<Icon data={Rocket} size={14} />}
164-
value={formatTrendValue(qps.trend.value)}
165-
>
166-
{i18n('value_per-sec', {count: qps.value})}
167-
</Label>
168-
169-
<Label
170-
theme="clear"
171-
size="s"
172-
icon={<Icon data={Clock} size={14} />}
173-
value={formatTrendValue(latency.trend.value)}
174-
>
175-
{i18n('value_ms', {time: latency.value})}
176-
</Label>
177-
</div>
178-
</Flex>
179-
180-
<ArrowToggle direction={props.expanded ? 'top' : 'bottom'} />
137+
<Card className={b('card')} type="container" view={expanded ? 'outlined' : 'raised'}>
138+
<div className={b('header')} onClick={handleToggleExpanded}>
139+
<Flex justifyContent="space-between" className={b('content-wrapper')}>
140+
<Flex direction="column" className={b('title-section')}>
141+
<Text variant="subheader-2" className={b('title')}>
142+
{i18n('title_queries-activity')}
143+
</Text>
144+
<Text color="secondary" variant="caption-2" className={b('subtitle')}>
145+
{i18n('context_monitor-changes-realtime')}
146+
</Text>
147+
</Flex>
148+
149+
<div className={b('metrics')}>
150+
<Label
151+
theme={runningQueriesCount > 0 ? 'success' : 'unknown'}
152+
size="s"
153+
icon={<Icon data={CirclePlay} size={14} />}
154+
>
155+
{runningQueriesCount}
156+
</Label>
157+
158+
<Label
159+
theme="clear"
160+
size="s"
161+
icon={<Icon data={Rocket} size={14} />}
162+
value={formatTrendValue(qps.trend.value)}
163+
>
164+
{i18n('value_per-sec', {count: qps.value})}
165+
</Label>
166+
167+
<Label
168+
theme="clear"
169+
size="s"
170+
icon={<Icon data={Clock} size={14} />}
171+
value={formatTrendValue(latency.trend.value)}
172+
>
173+
{i18n('value_ms', {time: latency.value})}
174+
</Label>
181175
</div>
182-
)}
183-
</Disclosure.Summary>
176+
</Flex>
177+
178+
<ArrowToggle direction={expanded ? 'top' : 'bottom'} />
179+
</div>
184180

185-
{expanded ? (
181+
{expanded && (
186182
<div className={b('content')}>
187183
<div className={b('stats')}>
188184
<Label
@@ -222,13 +218,13 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
222218
</Button>
223219
</div>
224220
</div>
225-
) : null}
226-
</Disclosure>
227-
<QueriesActivityCharts
228-
tenantName={tenantName}
229-
expanded={expanded}
230-
onChartDataStatusChange={handleChartDataStatusChange}
231-
/>
221+
)}
222+
<QueriesActivityCharts
223+
tenantName={tenantName}
224+
expanded={expanded}
225+
onChartDataStatusChange={handleChartDataStatusChange}
226+
/>
227+
</Card>
232228
</div>
233229
);
234230
}

0 commit comments

Comments
 (0)