Skip to content

Commit 2e0f203

Browse files
artemmufazalovartemmufazalov
authored
fix(VDiskPage): display params in 2 columns, change order (#2479)
1 parent 229c544 commit 2e0f203

File tree

3 files changed

+71
-49
lines changed

3 files changed

+71
-49
lines changed

‎src/components/VDiskInfo/VDiskInfo.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
.ydb-vdisk-info {
2+
&__info {
3+
width: 500px;
4+
}
5+
26
&__title {
37
display: flex;
48
flex-direction: row;

‎src/components/VDiskInfo/VDiskInfo.tsx‎

Lines changed: 65 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import type {PreparedVDisk} from '../../utils/disks/types';
1212
import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
1313
import {bytesToSpeed} from '../../utils/utils';
1414
import {InfoViewer} from '../InfoViewer';
15-
import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
1615
import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
1716
import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
1817
import {StatusIcon} from '../StatusIcon/StatusIcon';
@@ -23,18 +22,21 @@ import './VDiskInfo.scss';
2322

2423
const b = cn('ydb-vdisk-info');
2524

26-
interface VDiskInfoProps<T extends PreparedVDisk> extends Omit<InfoViewerProps, 'info'> {
25+
interface VDiskInfoProps<T extends PreparedVDisk> {
2726
data?: T;
2827
withVDiskPageLink?: boolean;
2928
withTitle?: boolean;
29+
className?: string;
30+
wrap?: true;
3031
}
3132

3233
// eslint-disable-next-line complexity
3334
export function VDiskInfo<T extends PreparedVDisk>({
3435
data,
3536
withVDiskPageLink,
3637
withTitle,
37-
...infoViewerProps
38+
className,
39+
wrap,
3840
}: VDiskInfoProps<T>) {
3941
const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
4042

@@ -59,22 +61,19 @@ export function VDiskInfo<T extends PreparedVDisk>({
5961
NodeId,
6062
} = data || {};
6163

62-
const vdiskInfo = [];
64+
const leftColumn = [];
6365

64-
if (valueIsDefined(VDiskSlotId)) {
65-
vdiskInfo.push({label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId});
66-
}
6766
if (valueIsDefined(StoragePoolName)) {
68-
vdiskInfo.push({label: vDiskInfoKeyset('pool-name'), value: StoragePoolName});
67+
leftColumn.push({label: vDiskInfoKeyset('pool-name'), value: StoragePoolName});
6968
}
7069
if (valueIsDefined(VDiskState)) {
71-
vdiskInfo.push({
70+
leftColumn.push({
7271
label: vDiskInfoKeyset('state-status'),
7372
value: VDiskState,
7473
});
7574
}
7675
if (Number(AllocatedSize) >= 0 && Number(AvailableSize) >= 0) {
77-
vdiskInfo.push({
76+
leftColumn.push({
7877
label: vDiskInfoKeyset('size'),
7978
value: (
8079
<ProgressViewer
@@ -86,67 +85,74 @@ export function VDiskInfo<T extends PreparedVDisk>({
8685
),
8786
});
8887
}
89-
if (valueIsDefined(Kind)) {
90-
vdiskInfo.push({label: vDiskInfoKeyset('kind'), value: Kind});
91-
}
92-
if (valueIsDefined(Guid)) {
93-
vdiskInfo.push({label: vDiskInfoKeyset('guid'), value: Guid});
94-
}
95-
if (valueIsDefined(IncarnationGuid)) {
96-
vdiskInfo.push({label: vDiskInfoKeyset('incarnation-guid'), value: IncarnationGuid});
97-
}
98-
if (valueIsDefined(InstanceGuid)) {
99-
vdiskInfo.push({label: vDiskInfoKeyset('instance-guid'), value: InstanceGuid});
100-
}
101-
if (valueIsDefined(Replicated)) {
102-
vdiskInfo.push({
103-
label: vDiskInfoKeyset('replication-status'),
104-
value: Replicated ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
105-
});
106-
}
10788
if (valueIsDefined(DiskSpace)) {
108-
vdiskInfo.push({
89+
leftColumn.push({
10990
label: vDiskInfoKeyset('space-status'),
11091
value: <StatusIcon status={DiskSpace} />,
11192
});
11293
}
94+
if (valueIsDefined(FrontQueues)) {
95+
leftColumn.push({
96+
label: vDiskInfoKeyset('front-queues'),
97+
value: <StatusIcon status={FrontQueues} />,
98+
});
99+
}
113100
if (valueIsDefined(SatisfactionRank?.FreshRank?.Flag)) {
114-
vdiskInfo.push({
101+
leftColumn.push({
115102
label: vDiskInfoKeyset('fresh-rank-satisfaction'),
116103
value: <StatusIcon status={SatisfactionRank?.FreshRank?.Flag} />,
117104
});
118105
}
119106
if (valueIsDefined(SatisfactionRank?.LevelRank?.Flag)) {
120-
vdiskInfo.push({
107+
leftColumn.push({
121108
label: vDiskInfoKeyset('level-rank-satisfaction'),
122109
value: <StatusIcon status={SatisfactionRank?.LevelRank?.Flag} />,
123110
});
124111
}
125-
if (valueIsDefined(FrontQueues)) {
126-
vdiskInfo.push({
127-
label: vDiskInfoKeyset('front-queues'),
128-
value: <StatusIcon status={FrontQueues} />,
129-
});
130-
}
131-
if (valueIsDefined(HasUnreadableBlobs)) {
132-
vdiskInfo.push({
133-
label: vDiskInfoKeyset('has-unreadable-blobs'),
134-
value: HasUnreadableBlobs ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
135-
});
136-
}
137112
if (valueIsDefined(ReadThroughput)) {
138-
vdiskInfo.push({
113+
leftColumn.push({
139114
label: vDiskInfoKeyset('read-throughput'),
140115
value: bytesToSpeed(ReadThroughput),
141116
});
142117
}
143118
if (valueIsDefined(WriteThroughput)) {
144-
vdiskInfo.push({
119+
leftColumn.push({
145120
label: vDiskInfoKeyset('write-throughput'),
146121
value: bytesToSpeed(WriteThroughput),
147122
});
148123
}
149124

125+
const rightColumn = [];
126+
127+
if (valueIsDefined(Replicated)) {
128+
rightColumn.push({
129+
label: vDiskInfoKeyset('replication-status'),
130+
value: Replicated ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
131+
});
132+
}
133+
if (valueIsDefined(VDiskSlotId)) {
134+
rightColumn.push({label: vDiskInfoKeyset('slot-id'), value: VDiskSlotId});
135+
}
136+
137+
if (valueIsDefined(Kind)) {
138+
rightColumn.push({label: vDiskInfoKeyset('kind'), value: Kind});
139+
}
140+
if (valueIsDefined(Guid)) {
141+
rightColumn.push({label: vDiskInfoKeyset('guid'), value: Guid});
142+
}
143+
if (valueIsDefined(IncarnationGuid)) {
144+
rightColumn.push({label: vDiskInfoKeyset('incarnation-guid'), value: IncarnationGuid});
145+
}
146+
if (valueIsDefined(InstanceGuid)) {
147+
rightColumn.push({label: vDiskInfoKeyset('instance-guid'), value: InstanceGuid});
148+
}
149+
if (valueIsDefined(HasUnreadableBlobs)) {
150+
rightColumn.push({
151+
label: vDiskInfoKeyset('has-unreadable-blobs'),
152+
value: HasUnreadableBlobs ? vDiskInfoKeyset('yes') : vDiskInfoKeyset('no'),
153+
});
154+
}
155+
150156
const diskParamsDefined =
151157
valueIsDefined(PDiskId) && valueIsDefined(NodeId) && valueIsDefined(VDiskSlotId);
152158

@@ -186,7 +192,7 @@ export function VDiskInfo<T extends PreparedVDisk>({
186192
}
187193

188194
if (links.length) {
189-
vdiskInfo.push({
195+
rightColumn.push({
190196
label: vDiskInfoKeyset('links'),
191197
value: (
192198
<Flex wrap="wrap" gap={2}>
@@ -199,7 +205,19 @@ export function VDiskInfo<T extends PreparedVDisk>({
199205

200206
const title = data && withTitle ? <VDiskTitle data={data} /> : null;
201207

202-
return <InfoViewer info={vdiskInfo} title={title} {...infoViewerProps} />;
208+
// Component is used both on vdisk page and in popups
209+
// Display in two columns on page (row + wrap) and in one column in popups (column + nowrap)
210+
return (
211+
<Flex className={className} gap={2} direction={wrap ? 'row' : 'column'} wrap={wrap}>
212+
<InfoViewer
213+
title={title}
214+
info={leftColumn}
215+
renderEmptyState={() => null}
216+
className={b('info')}
217+
/>
218+
<InfoViewer info={rightColumn} renderEmptyState={() => null} className={b('info')} />
219+
</Flex>
220+
);
203221
}
204222

205223
interface VDiskTitleProps<T extends PreparedVDisk> {

‎src/containers/VDiskPage/VDiskPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ export function VDiskPage() {
182182
};
183183

184184
const renderInfo = () => {
185-
return <VDiskInfo data={vDiskData} className={vDiskPageCn('info')} />;
185+
return <VDiskInfo data={vDiskData} className={vDiskPageCn('info')} wrap />;
186186
};
187187

188188
const renderStorageInfo = () => {
@@ -211,7 +211,7 @@ export function VDiskPage() {
211211

212212
const renderContent = () => {
213213
if (loading) {
214-
return <InfoViewerSkeleton rows={20} />;
214+
return <InfoViewerSkeleton rows={9} />;
215215
}
216216

217217
return (

0 commit comments

Comments
 (0)