Skip to content

Commit b3d5897

Browse files
artemmufazalovartemmufazalov
authored
fix(ClusterInfo): update links view (#1746)
1 parent ef0d830 commit b3d5897

File tree

6 files changed

+74
-75
lines changed

6 files changed

+74
-75
lines changed

‎src/containers/Cluster/ClusterInfo/ClusterInfo.scss

+7-26
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,19 @@
33
.cluster-info {
44
padding: 20px 0;
55

6+
@include mixins.body-2-typography();
7+
68
&__skeleton {
79
margin-top: 5px;
810
}
911

10-
&__error {
11-
@include mixins.body-2-typography();
12+
&__section-title {
13+
margin: var(--g-spacing-1) 0 var(--g-spacing-3);
14+
@include mixins.text-subheader-2();
1215
}
1316

14-
&__metrics {
15-
margin: 0 -15px;
16-
padding: 0 15px !important;
17-
18-
.info-viewer__items {
19-
grid-template-columns: repeat(2, minmax(auto, 250px));
20-
}
21-
22-
.info-viewer__label {
23-
width: 50px;
24-
}
25-
.info-viewer__value {
26-
width: 130px;
27-
}
28-
}
29-
30-
&__tablets {
31-
margin-left: 15px;
32-
padding: 0 !important;
33-
}
34-
&__links {
35-
display: flex;
36-
flex-flow: row wrap;
37-
gap: var(--g-spacing-2);
17+
&__dc {
18+
height: 20px;
3819
}
3920

4021
&__clipboard-button {

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

+52-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1+
import {DefinitionList, Flex} from '@gravity-ui/uikit';
2+
13
import {ResponseError} from '../../../components/Errors/ResponseError';
2-
import {InfoViewer} from '../../../components/InfoViewer/InfoViewer';
34
import {InfoViewerSkeleton} from '../../../components/InfoViewerSkeleton/InfoViewerSkeleton';
5+
import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
46
import type {AdditionalClusterProps} from '../../../types/additionalProps';
57
import type {TClusterInfo} from '../../../types/api/cluster';
68
import type {IResponseError} from '../../../types/api/error';
79
import type {VersionToColorMap} from '../../../types/versions';
10+
import i18n from '../i18n';
811

912
import {b} from './shared';
1013
import {getInfo, useClusterLinks} from './utils';
@@ -28,25 +31,65 @@ export const ClusterInfo = ({
2831
const {info = [], links = []} = additionalClusterProps;
2932

3033
const clusterLinks = useClusterLinks();
34+
const linksList = links.concat(clusterLinks);
3135

32-
const clusterInfo = getInfo(cluster ?? {}, info, [...links, ...clusterLinks]);
33-
34-
const getContent = () => {
35-
if (loading) {
36-
return <InfoViewerSkeleton className={b('skeleton')} rows={9} />;
37-
}
36+
const clusterInfo = getInfo(cluster ?? {}, info);
3837

38+
const renderInfo = () => {
3939
if (error && !cluster) {
4040
return null;
4141
}
4242

43-
return <InfoViewer dots={true} info={clusterInfo} />;
43+
return (
44+
<div>
45+
<div className={b('section-title')}>{i18n('title_info')}</div>
46+
<DefinitionList nameMaxWidth={200}>
47+
{clusterInfo.map(({label, value}) => {
48+
return (
49+
<DefinitionList.Item key={label} name={label}>
50+
{value}
51+
</DefinitionList.Item>
52+
);
53+
})}
54+
</DefinitionList>
55+
</div>
56+
);
57+
};
58+
59+
const renderLinks = () => {
60+
if (linksList.length) {
61+
return (
62+
<div>
63+
<div className={b('section-title')}>{i18n('title_links')}</div>
64+
<Flex direction="column" gap={4}>
65+
{linksList.map(({title, url}) => {
66+
return <LinkWithIcon key={title} title={title} url={url} />;
67+
})}
68+
</Flex>
69+
</div>
70+
);
71+
}
72+
73+
return null;
74+
};
75+
76+
const renderContent = () => {
77+
if (loading) {
78+
return <InfoViewerSkeleton className={b('skeleton')} rows={4} />;
79+
}
80+
81+
return (
82+
<Flex gap={10} wrap="nowrap">
83+
{renderInfo()}
84+
{renderLinks()}
85+
</Flex>
86+
);
4487
};
4588

4689
return (
4790
<div className={b()}>
4891
{error ? <ResponseError error={error} className={b('error')} /> : null}
49-
<div className={b('info')}>{getContent()}</div>
92+
{renderContent()}
5093
</div>
5194
);
5295
};

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

+4-36
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@ import React from 'react';
22

33
import {Flex} from '@gravity-ui/uikit';
44

5-
import type {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
6-
import {LinkWithIcon} from '../../../components/LinkWithIcon/LinkWithIcon';
75
import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
86
import {Tags} from '../../../components/Tags';
97
import {useClusterBaseInfo} from '../../../store/reducers/cluster/cluster';
108
import type {ClusterLink} from '../../../types/additionalProps';
119
import {isClusterInfoV2} from '../../../types/api/cluster';
1210
import type {TClusterInfo} from '../../../types/api/cluster';
1311
import type {EFlag} from '../../../types/api/enums';
14-
import type {TTabletStateInfo} from '../../../types/api/tablet';
15-
import {EType} from '../../../types/api/tablet';
12+
import type {InfoItem} from '../../../types/components';
1613
import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
1714
import {parseJson} from '../../../utils/utils';
1815
import i18n from '../i18n';
@@ -29,18 +26,6 @@ const COLORS_PRIORITY: Record<EFlag, number> = {
2926
Grey: 0,
3027
};
3128

32-
export const compareTablets = (tablet1: TTabletStateInfo, tablet2: TTabletStateInfo) => {
33-
if (tablet1.Type === EType.TxAllocator) {
34-
return 1;
35-
}
36-
37-
if (tablet2.Type === EType.TxAllocator) {
38-
return -1;
39-
}
40-
41-
return 0;
42-
};
43-
4429
const getDCInfo = (cluster: TClusterInfo) => {
4530
if (isClusterInfoV2(cluster) && cluster.MapDataCenters) {
4631
return Object.entries(cluster.MapDataCenters).map(([dc, count]) => (
@@ -52,12 +37,8 @@ const getDCInfo = (cluster: TClusterInfo) => {
5237
return undefined;
5338
};
5439

55-
export const getInfo = (
56-
cluster: TClusterInfo,
57-
additionalInfo: InfoViewerItem[],
58-
links: ClusterLink[],
59-
) => {
60-
const info: InfoViewerItem[] = [];
40+
export const getInfo = (cluster: TClusterInfo, additionalInfo: InfoItem[]) => {
41+
const info: InfoItem[] = [];
6142

6243
if (isClusterInfoV2(cluster) && cluster.MapNodeStates) {
6344
const arrayNodesStates = Object.entries(cluster.MapNodeStates) as [EFlag, number][];
@@ -80,7 +61,7 @@ export const getInfo = (
8061
if (dataCenters?.length) {
8162
info.push({
8263
label: i18n('label_dc'),
83-
value: <Tags tags={dataCenters} gap={2} />,
64+
value: <Tags tags={dataCenters} gap={2} className={b('dc')} />,
8465
});
8566
}
8667

@@ -91,19 +72,6 @@ export const getInfo = (
9172

9273
info.push(...additionalInfo);
9374

94-
if (links.length) {
95-
info.push({
96-
label: i18n('links'),
97-
value: (
98-
<div className={b('links')}>
99-
{links.map(({title, url}) => (
100-
<LinkWithIcon key={title} title={title} url={url} />
101-
))}
102-
</div>
103-
),
104-
});
105-
}
106-
10775
return info;
10876
};
10977

‎src/containers/Cluster/i18n/en.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@
99
"storage-size": "Storage size",
1010
"storage-groups": "Storage groups, {{diskType}}",
1111
"links": "Links",
12-
"link_cores": "Cores",
12+
"link_cores": "Coredumps",
1313
"link_logging": "Logging",
1414
"context_cores": "cores",
1515
"title_cpu": "CPU",
1616
"title_storage": "Storage",
1717
"title_memory": "Memory",
18+
"title_info": "Info",
19+
"title_links": "Links",
1820
"label_nodes": "Nodes",
1921
"label_hosts": "Hosts",
2022
"label_storage-groups": "Storage groups",

‎src/types/additionalProps.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import type {InfoViewerItem} from '../components/InfoViewer';
2-
31
import type {TSystemStateInfo} from './api/nodes';
42
import type {ETenantType} from './api/tenant';
3+
import type {InfoItem} from './components';
54
import type {VersionToColorMap} from './versions';
65

76
export interface AdditionalVersionsProps {
@@ -14,7 +13,7 @@ export interface ClusterLink {
1413
}
1514

1615
export interface AdditionalClusterProps {
17-
info?: InfoViewerItem[];
16+
info?: InfoItem[];
1817
links?: ClusterLink[];
1918
}
2019

‎src/types/components.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type React from 'react';
2+
3+
export interface InfoItem {
4+
label: string;
5+
value: React.ReactNode;
6+
}

0 commit comments

Comments
 (0)