Skip to content

Commit 7b1eff6

Browse files
artemmufazalovartemmufazalov
authored
fix(AsyncReplicationInfo): do not show empty fields (#1189)
1 parent d7df777 commit 7b1eff6

File tree

12 files changed

+129
-77
lines changed

12 files changed

+129
-77
lines changed

‎src/components/FullNodeViewer/FullNodeViewer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type {PreparedNode} from '../../store/reducers/node/types';
22
import {cn} from '../../utils/cn';
33
import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
4-
import InfoViewer from '../InfoViewer/InfoViewer';
4+
import {InfoViewer} from '../InfoViewer/InfoViewer';
55
import type {InfoViewerItem} from '../InfoViewer/InfoViewer';
66
import {PoolUsage} from '../PoolUsage/PoolUsage';
77
import {ProgressViewer} from '../ProgressViewer/ProgressViewer';

‎src/components/InfoViewer/InfoViewer.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -60,5 +60,3 @@ export const InfoViewer = ({
6060
</div>
6161
);
6262
};
63-
64-
export default InfoViewer;

‎src/components/InfoViewer/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import InfoViewer from './InfoViewer';
1+
import {InfoViewer} from './InfoViewer';
22

33
export {InfoViewer};
44
export * from './utils';

‎src/containers/Tenant/Info/View/View.scss ‎src/components/YDBDefinitionList/YDBDefinitionList.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
@import '../../../../styles/mixins.scss';
1+
@import '../../styles/mixins.scss';
22

3-
.ydb-view-info {
3+
.ydb-definition-list {
44
@include flex-container();
55

6-
&__properties-list {
7-
max-width: calc(100% - 40px);
8-
}
9-
106
&__title {
117
@include info-viewer-title();
128
}
9+
10+
&__properties-list {
11+
max-width: calc(100% - 40px);
12+
}
1313
}

‎src/components/YDBDefinitionList/YDBDefinitionList.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react';
2+
3+
import type {DefinitionListProps} from '@gravity-ui/components';
4+
import {DefinitionList} from '@gravity-ui/components';
5+
6+
import {cn} from '../../utils/cn';
7+
8+
import i18n from './i18n';
9+
10+
import './YDBDefinitionList.scss';
11+
12+
const b = cn('ydb-definition-list');
13+
14+
interface YDBDefinitionListProps extends DefinitionListProps {
15+
title?: React.ReactNode;
16+
}
17+
18+
/** DefinitionList with predefined styles and layout */
19+
export function YDBDefinitionList({
20+
title,
21+
items,
22+
nameMaxWidth = 220,
23+
copyPosition = 'outside',
24+
className,
25+
itemClassName,
26+
...restProps
27+
}: YDBDefinitionListProps) {
28+
const renderTitle = () => {
29+
if (title) {
30+
return <div className={b('title')}>{title}</div>;
31+
}
32+
return null;
33+
};
34+
35+
const renderContent = () => {
36+
if (items.length) {
37+
return (
38+
<DefinitionList
39+
items={items}
40+
nameMaxWidth={nameMaxWidth}
41+
copyPosition={copyPosition}
42+
className={b('properties-list', className)}
43+
itemClassName={b('item', itemClassName)}
44+
{...restProps}
45+
/>
46+
);
47+
}
48+
49+
return i18n('no-data');
50+
};
51+
52+
return (
53+
<div className={b(null)}>
54+
{renderTitle()}
55+
{renderContent()}
56+
</div>
57+
);
58+
}

‎src/components/YDBDefinitionList/i18n/en.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"no-data": "No data"
3+
}

‎src/components/YDBDefinitionList/i18n/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {registerKeysets} from '../../../utils/i18n';
2+
3+
import en from './en.json';
4+
5+
const COMPONENT = 'ydb-definition-list';
6+
7+
export default registerKeysets(COMPONENT, {en});

‎src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {ContentWithPopup} from '../../../components/ContentWithPopup/ContentWithPopup';
22
import {ResponseError} from '../../../components/Errors/ResponseError';
33
import type {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
4-
import InfoViewer from '../../../components/InfoViewer/InfoViewer';
4+
import {InfoViewer} from '../../../components/InfoViewer/InfoViewer';
55
import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
66
import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
77
import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';

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

+46-47
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import type {DefinitionListItem} from '@gravity-ui/components';
12
import {Flex, Text} from '@gravity-ui/uikit';
23

34
import {AsyncReplicationState} from '../../../../../components/AsyncReplicationState';
4-
import {InfoViewer} from '../../../../../components/InfoViewer';
5+
import {YDBDefinitionList} from '../../../../../components/YDBDefinitionList/YDBDefinitionList';
56
import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
67
import {getEntityName} from '../../../utils';
78
import {AsyncReplicationPaths} from '../AsyncReplicationPaths';
@@ -25,55 +26,53 @@ export function AsyncReplicationInfo({data}: AsyncReplicationProps) {
2526
);
2627
}
2728

29+
const replicationItems = prepareReplicationItems(data);
30+
2831
return (
2932
<Flex direction="column" gap="4">
30-
<InfoViewer
31-
title={entityName}
32-
info={[
33-
{
34-
label: i18n('state.label'),
35-
value: (
36-
<AsyncReplicationState
37-
state={data.PathDescription?.ReplicationDescription?.State}
38-
/>
39-
),
40-
},
41-
{
42-
label: i18n('srcConnection.endpoint.label'),
43-
value: (
44-
<Text variant="code-inline-2">
45-
{
46-
data.PathDescription?.ReplicationDescription?.Config
47-
?.SrcConnectionParams?.Endpoint
48-
}
49-
</Text>
50-
),
51-
},
52-
{
53-
label: i18n('srcConnection.database.label'),
54-
value: (
55-
<Text variant="code-inline-2">
56-
{
57-
data.PathDescription?.ReplicationDescription?.Config
58-
?.SrcConnectionParams?.Database
59-
}
60-
</Text>
61-
),
62-
},
63-
{
64-
label: i18n('credentials.label'),
65-
value: (
66-
<Credentials
67-
connection={
68-
data.PathDescription?.ReplicationDescription?.Config
69-
?.SrcConnectionParams
70-
}
71-
/>
72-
),
73-
},
74-
]}
75-
/>
33+
<YDBDefinitionList title={entityName} items={replicationItems} />
7634
<AsyncReplicationPaths config={data.PathDescription?.ReplicationDescription?.Config} />
7735
</Flex>
7836
);
7937
}
38+
39+
function prepareReplicationItems(data: TEvDescribeSchemeResult) {
40+
const replicationDescription = data.PathDescription?.ReplicationDescription || {};
41+
const state = replicationDescription.State;
42+
const srcConnectionParams = replicationDescription.Config?.SrcConnectionParams || {};
43+
const {Endpoint, Database} = srcConnectionParams;
44+
45+
const info: DefinitionListItem[] = [];
46+
47+
if (state) {
48+
info.push({
49+
name: i18n('state.label'),
50+
content: <AsyncReplicationState state={state} />,
51+
});
52+
}
53+
54+
if (Endpoint) {
55+
info.push({
56+
name: i18n('srcConnection.endpoint.label'),
57+
copyText: Endpoint,
58+
content: <Text variant="code-inline-2">{Endpoint}</Text>,
59+
});
60+
}
61+
62+
if (Database) {
63+
info.push({
64+
name: i18n('srcConnection.database.label'),
65+
copyText: Database,
66+
content: <Text variant="code-inline-2">{Database}</Text>,
67+
});
68+
}
69+
70+
if (srcConnectionParams) {
71+
info.push({
72+
name: i18n('credentials.label'),
73+
content: <Credentials connection={srcConnectionParams} />,
74+
});
75+
}
76+
77+
return info;
78+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
3+
import {InfoViewer} from '../../../../../components/InfoViewer/InfoViewer';
44
import {LabelWithPopover} from '../../../../../components/LabelWithPopover';
55
import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
66
import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';

‎src/containers/Tenant/Info/View/View.tsx

+4-17
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
11
import type {DefinitionListItem} from '@gravity-ui/components';
2-
import {DefinitionList} from '@gravity-ui/components';
32
import {Text} from '@gravity-ui/uikit';
43

4+
import {YDBDefinitionList} from '../../../../components/YDBDefinitionList/YDBDefinitionList';
55
import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
6-
import {cn} from '../../../../utils/cn';
76
import {getEntityName} from '../../utils';
87
import i18n from '../i18n';
98

10-
const b = cn('ydb-view-info');
11-
12-
import './View.scss';
13-
149
const prepareViewItems = (data: TEvDescribeSchemeResult): DefinitionListItem[] => {
1510
const queryText = data.PathDescription?.ViewDescription?.QueryText;
1611

@@ -38,15 +33,7 @@ export function ViewInfo({data}: ViewInfoProps) {
3833
return <div className="error">No {entityName} data</div>;
3934
}
4035

41-
return (
42-
<div className={b(null)}>
43-
<div className={b('title')}>{entityName}</div>
44-
<DefinitionList
45-
nameMaxWidth={200}
46-
copyPosition="outside"
47-
className={b('properties-list')}
48-
items={prepareViewItems(data)}
49-
/>
50-
</div>
51-
);
36+
const items = prepareViewItems(data);
37+
38+
return <YDBDefinitionList title={entityName} items={items} />;
5239
}

‎src/containers/Tenant/ObjectSummary/ObjectSummary.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {StringParam, useQueryParam} from 'use-query-params';
99
import {AsyncReplicationState} from '../../../components/AsyncReplicationState';
1010
import {ClipboardButton} from '../../../components/ClipboardButton';
1111
import {toFormattedSize} from '../../../components/FormattedBytes/utils';
12-
import InfoViewer from '../../../components/InfoViewer/InfoViewer';
12+
import {InfoViewer} from '../../../components/InfoViewer/InfoViewer';
1313
import type {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
1414
import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
1515
import {Loader} from '../../../components/Loader';

0 commit comments

Comments
 (0)