Skip to content

Commit 1322ef0

Browse files
DaryaVorontsovaDaryaVorontsova
authored
feat: add show more expandable section (#3265)
1 parent 3e610e6 commit 1322ef0

File tree

4 files changed

+109
-29
lines changed

4 files changed

+109
-29
lines changed

‎src/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
align-items: flex-start;
2121
gap: var(--g-spacing-9);
2222

23-
&:not(:last-child) {
23+
&_general-info {
2424
margin-bottom: var(--g-spacing-1);
2525
}
2626
}
@@ -63,4 +63,10 @@
6363
color: var(--g-color-base-neutral-medium);
6464
}
6565
}
66+
67+
&__show-more-disclosure {
68+
display: flex;
69+
flex-direction: column-reverse;
70+
align-items: flex-start;
71+
}
6672
}

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

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

3+
import {ChevronDown, ChevronUp} from '@gravity-ui/icons';
4+
import {Button, Disclosure, Icon} from '@gravity-ui/uikit';
5+
36
import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
47
import type {EPathType, TEvDescribeSchemeResult} from '../../../../../types/api/schema';
58
import {cn} from '../../../../../utils/cn';
@@ -21,12 +24,22 @@ export const TableInfo = ({data, type}: TableInfoProps) => {
2124
const {
2225
generalInfoLeft = [],
2326
generalInfoRight = [],
27+
generalStats = [],
2428
tableStatsInfo = [],
29+
generalMetrics = [],
2530
tabletMetricsInfo = [],
2631
partitionConfigInfo = [],
2732
partitionProgressConfig,
2833
} = React.useMemo(() => prepareTableInfo(data, type), [data, type]);
2934

35+
const [expanded, setExpanded] = React.useState(false);
36+
37+
const handleExpandedChange = React.useCallback((value: boolean) => setExpanded(value), []);
38+
39+
const hasMoreLeft = tableStatsInfo.some((items) => items.length > 0);
40+
const hasMoreRight = tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0;
41+
const hasMore = hasMoreLeft || hasMoreRight;
42+
3043
return (
3144
<div className={b()}>
3245
<div className={b('title')}>{i18n('title_partitioning')}</div>
@@ -39,7 +52,7 @@ export const TableInfo = ({data, type}: TableInfoProps) => {
3952
/>
4053
</div>
4154
)}
42-
<div className={b('row')}>
55+
<div className={b('row', {'general-info': true})}>
4356
<div className={b('col')}>
4457
{generalInfoLeft.length > 0 ? (
4558
<YDBDefinitionList
@@ -63,40 +76,26 @@ export const TableInfo = ({data, type}: TableInfoProps) => {
6376
) : null}
6477
</div>
6578
</div>
66-
<div className={b('row')}>
67-
{tableStatsInfo?.length ? (
68-
<div className={b('col')}>
69-
{tableStatsInfo
70-
.filter((items) => items.length > 0)
71-
.map((items, index) => (
72-
<YDBDefinitionList
73-
key={index}
74-
items={items}
75-
title={index === 0 ? i18n('title_table-stats') : undefined}
76-
className={b('info-block')}
77-
nameMaxWidth="auto"
78-
responsive
79-
titleClassname={b('info-title')}
80-
/>
81-
))}
82-
</div>
83-
) : null}
8479

80+
<div className={b('row')}>
8581
<div className={b('col')}>
86-
{tabletMetricsInfo.length > 0 ? (
82+
{generalStats.length > 0 ? (
8783
<YDBDefinitionList
88-
items={tabletMetricsInfo}
89-
title={i18n('title_tablet-metrics')}
84+
items={generalStats}
85+
title={i18n('title_table-stats')}
9086
className={b('info-block')}
9187
nameMaxWidth="auto"
92-
titleClassname={b('info-title')}
9388
responsive
89+
titleClassname={b('info-title')}
9490
/>
9591
) : null}
96-
{partitionConfigInfo.length > 0 ? (
92+
</div>
93+
94+
<div className={b('col')}>
95+
{generalMetrics.length > 0 ? (
9796
<YDBDefinitionList
98-
items={partitionConfigInfo}
99-
title={i18n('title_partition-config')}
97+
items={generalMetrics}
98+
title={i18n('title_tablet-metrics')}
10099
className={b('info-block')}
101100
nameMaxWidth="auto"
102101
responsive
@@ -105,6 +104,62 @@ export const TableInfo = ({data, type}: TableInfoProps) => {
105104
) : null}
106105
</div>
107106
</div>
107+
108+
{hasMore ? (
109+
<Disclosure
110+
className={b('show-more-disclosure')}
111+
expanded={expanded}
112+
onUpdate={handleExpandedChange}
113+
>
114+
<Disclosure.Summary>
115+
{(props) => (
116+
<Button {...props} view="normal" size="s">
117+
{expanded ? i18n('button_show-less') : i18n('button_show-more')}
118+
<Icon data={expanded ? ChevronUp : ChevronDown} size={16} />
119+
</Button>
120+
)}
121+
</Disclosure.Summary>
122+
123+
<Disclosure.Details>
124+
<div className={b('row')}>
125+
<div className={b('col')}>
126+
{tableStatsInfo
127+
.filter((items) => items.length > 0)
128+
.map((items, index) => (
129+
<YDBDefinitionList
130+
key={index}
131+
items={items}
132+
className={b('info-block')}
133+
nameMaxWidth="auto"
134+
responsive
135+
/>
136+
))}
137+
</div>
138+
139+
<div className={b('col')}>
140+
{tabletMetricsInfo.length > 0 ? (
141+
<YDBDefinitionList
142+
items={tabletMetricsInfo}
143+
className={b('info-block')}
144+
nameMaxWidth="auto"
145+
responsive
146+
/>
147+
) : null}
148+
{partitionConfigInfo.length > 0 ? (
149+
<YDBDefinitionList
150+
items={partitionConfigInfo}
151+
title={i18n('title_partition-config')}
152+
className={b('info-block')}
153+
nameMaxWidth="auto"
154+
responsive
155+
titleClassname={b('info-title')}
156+
/>
157+
) : null}
158+
</div>
159+
</div>
160+
</Disclosure.Details>
161+
</Disclosure>
162+
) : null}
108163
</div>
109164
);
110165
};

‎src/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"title_tablet-metrics": "Metrics",
55
"title_partition-config": "Partition config",
66

7+
"button_show-more": "Show more",
8+
"button_show-less": "Show less",
9+
710
"field_current-partitions": "Current partitions",
811
"field_ttl-for-rows": "TTL for rows",
912
"field_standalone": "Standalone",

‎src/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {CircleCheckFill, CircleQuestion, CircleXmarkFill} from '@gravity-ui/icons';
22
import {Flex, Icon, Label, Popover, Text} from '@gravity-ui/uikit';
33
import omit from 'lodash/omit';
4+
import pick from 'lodash/pick';
45

56
import {toFormattedSize} from '../../../../../components/FormattedBytes/utils';
67
import type {YDBDefinitionListItem} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
@@ -32,6 +33,8 @@ import {
3233
} from './constants';
3334
import i18n from './i18n';
3435

36+
const GENERAL_METRICS_KEYS = ['CPU', 'Memory', 'ReadThroughput', 'Network'] as const;
37+
3538
const isInStoreColumnTable = (table: TColumnTableDescription) => {
3639
// SchemaPresetId could be 0
3740
return table.SchemaPresetName && table.SchemaPresetId !== undefined;
@@ -310,15 +313,17 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathTyp
310313
IndexSize,
311314
});
312315

316+
const bloomFilterItems: YDBDefinitionListItem[] = [];
317+
313318
if (
314319
isNumeric(ByKeyFilterSize) &&
315320
(PartitionConfig.EnableFilterByKey || Number(ByKeyFilterSize) > 0)
316321
) {
317-
generalStats.push({name: 'BloomFilterSize', content: toFormattedSize(ByKeyFilterSize)});
322+
bloomFilterItems.push({name: 'BloomFilterSize', content: toFormattedSize(ByKeyFilterSize)});
318323
}
319324

320325
const tableStatsInfo = [
321-
generalStats,
326+
...(bloomFilterItems.length > 0 ? [bloomFilterItems] : []),
322327
formatObjectToDefinitionItems(formatTableStatsItem, {
323328
LastAccessTime,
324329
LastUpdateTime,
@@ -340,9 +345,15 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathTyp
340345
}),
341346
];
342347

348+
const generalMetrics = formatObjectToDefinitionItems(
349+
formatTabletMetricsItem,
350+
pick(TabletMetrics, GENERAL_METRICS_KEYS),
351+
);
352+
343353
const tabletMetricsInfo = formatObjectToDefinitionItems(
344354
formatTabletMetricsItem,
345355
omit(TabletMetrics, [
356+
...GENERAL_METRICS_KEYS,
346357
'GroupReadIops',
347358
'GroupReadThroughput',
348359
'GroupWriteIops',
@@ -368,8 +379,13 @@ export const prepareTableInfo = (data?: TEvDescribeSchemeResult, type?: EPathTyp
368379
return {
369380
generalInfoRight,
370381
generalInfoLeft,
382+
383+
generalStats,
371384
tableStatsInfo,
385+
386+
generalMetrics,
372387
tabletMetricsInfo,
388+
373389
partitionConfigInfo,
374390
partitionProgressConfig,
375391
};

0 commit comments

Comments
 (0)