Skip to content

Commit 107b139

Browse files
ariserariser
committed
fix(VDisk): new popup design
1 parent fc06451 commit 107b139

File tree

2 files changed

+59
-81
lines changed

2 files changed

+59
-81
lines changed

‎src/containers/Storage/Vdisk/Vdisk.js‎

Lines changed: 53 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, {useEffect, useState, useRef, useMemo} from 'react';
22
import PropTypes from 'prop-types';
33
import cn from 'bem-cn-lite';
4-
import _ from 'lodash';
54
import {Popup} from '@yandex-cloud/uikit';
65

76
import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
87
import routes, {createHref} from '../../../routes';
98
import {stringifyVdiskId, getPDiskId} from '../../../utils';
109
import {getPDiskType} from '../../../utils/pdisk';
10+
import {InfoViewer} from '../../../components/InfoViewer';
1111
import DiskStateProgressBar, {
1212
diskProgressColors,
1313
} from '../DiskStateProgressBar/DiskStateProgressBar';
@@ -97,62 +97,62 @@ function Vdisk(props) {
9797
ReadThroughput,
9898
WriteThroughput,
9999
} = props;
100-
const vdiskData = [{property: 'VDisk', value: stringifyVdiskId(VDiskId)}];
101-
vdiskData.push({property: 'State', value: VDiskState ?? 'not available'});
102-
PoolName && vdiskData.push({property: 'StoragePool', value: PoolName});
100+
const vdiskData = [{label: 'VDisk', value: stringifyVdiskId(VDiskId)}];
101+
vdiskData.push({label: 'State', value: VDiskState ?? 'not available'});
102+
PoolName && vdiskData.push({label: 'StoragePool', value: PoolName});
103103

104104
SatisfactionRank &&
105105
SatisfactionRank.FreshRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
106106
vdiskData.push({
107-
property: 'Fresh',
107+
label: 'Fresh',
108108
value: SatisfactionRank.FreshRank.Flag,
109109
});
110110

111111
SatisfactionRank &&
112112
SatisfactionRank.LevelRank?.Flag !== diskProgressColors[colorSeverity.Green] &&
113113
vdiskData.push({
114-
property: 'Level',
114+
label: 'Level',
115115
value: SatisfactionRank.LevelRank.Flag,
116116
});
117117

118118
SatisfactionRank &&
119119
SatisfactionRank.FreshRank?.RankPercent &&
120120
vdiskData.push({
121-
property: 'Fresh',
121+
label: 'Fresh',
122122
value: SatisfactionRank.FreshRank.RankPercent,
123123
});
124124

125125
SatisfactionRank &&
126126
SatisfactionRank.LevelRank?.RankPercent &&
127127
vdiskData.push({
128-
property: 'Level',
128+
label: 'Level',
129129
value: SatisfactionRank.LevelRank.RankPercent,
130130
});
131131

132132
DiskSpace &&
133133
DiskSpace !== diskProgressColors[colorSeverity.Green] &&
134-
vdiskData.push({property: 'Space', value: DiskSpace});
134+
vdiskData.push({label: 'Space', value: DiskSpace});
135135

136136
FrontQueues &&
137137
FrontQueues !== diskProgressColors[colorSeverity.Green] &&
138-
vdiskData.push({property: 'FrontQueues', value: FrontQueues});
138+
vdiskData.push({label: 'FrontQueues', value: FrontQueues});
139139

140-
!Replicated && vdiskData.push({property: 'Replicated', value: 'NO'});
140+
!Replicated && vdiskData.push({label: 'Replicated', value: 'NO'});
141141

142-
UnsyncedVDisks && vdiskData.push({property: 'UnsyncVDisks', value: UnsyncedVDisks});
142+
UnsyncedVDisks && vdiskData.push({label: 'UnsyncVDisks', value: UnsyncedVDisks});
143143

144144
Boolean(Number(AllocatedSize)) &&
145145
vdiskData.push({
146-
property: 'Allocated',
146+
label: 'Allocated',
147147
value: bytesToGB(AllocatedSize),
148148
});
149149

150150
Boolean(Number(ReadThroughput)) &&
151-
vdiskData.push({property: 'Read', value: bytesToSpeed(ReadThroughput)});
151+
vdiskData.push({label: 'Read', value: bytesToSpeed(ReadThroughput)});
152152

153153
Boolean(Number(WriteThroughput)) &&
154154
vdiskData.push({
155-
property: 'Write',
155+
label: 'Write',
156156
value: bytesToSpeed(WriteThroughput),
157157
});
158158

@@ -167,61 +167,53 @@ function Vdisk(props) {
167167
diskProgressColors[colorSeverity.Yellow],
168168
];
169169
if (PDisk && nodes) {
170-
const pdiskData = [{property: 'PDisk', value: getPDiskId(PDisk)}];
170+
const pdiskData = [{label: 'PDisk', value: getPDiskId(PDisk)}];
171171
pdiskData.push({
172-
property: 'State',
172+
label: 'State',
173173
value: PDisk.State || 'not available',
174174
});
175-
pdiskData.push({property: 'Type', value: getPDiskType(PDisk) || 'unknown'});
176-
PDisk.NodeId && pdiskData.push({property: 'Node Id', value: PDisk.NodeId});
175+
pdiskData.push({label: 'Type', value: getPDiskType(PDisk) || 'unknown'});
176+
PDisk.NodeId && pdiskData.push({label: 'Node Id', value: PDisk.NodeId});
177177
PDisk.NodeId &&
178178
nodes[PDisk.NodeId] &&
179-
pdiskData.push({property: 'Host', value: nodes[PDisk.NodeId]});
180-
PDisk.Path && pdiskData.push({property: 'Path', value: PDisk.Path});
179+
pdiskData.push({label: 'Host', value: nodes[PDisk.NodeId]});
180+
PDisk.Path && pdiskData.push({label: 'Path', value: PDisk.Path});
181181
pdiskData.push({
182-
property: 'Available',
182+
label: 'Available',
183183
value: `${bytesToGB(PDisk.AvailableSize)} of ${bytesToGB(PDisk.TotalSize)}`,
184184
});
185185
errorColors.includes(PDisk.Realtime) &&
186-
pdiskData.push({property: 'Realtime', value: PDisk.Realtime});
186+
pdiskData.push({label: 'Realtime', value: PDisk.Realtime});
187187
errorColors.includes(PDisk.Device) &&
188-
pdiskData.push({property: 'Device', value: PDisk.Device});
188+
pdiskData.push({label: 'Device', value: PDisk.Device});
189189
return pdiskData;
190190
}
191191
return null;
192192
};
193193
/* eslint-enable */
194194

195-
const renderPopup = () => {
196-
const vdiskData = prepareVdiskData();
197-
const pdiskData = preparePdiskData();
198-
return (
199-
<Popup
200-
className={b('popup-wrapper')}
201-
anchorRef={anchor}
202-
open={isPopupVisible}
203-
placement={['top', 'bottom']}
204-
hasArrow
205-
>
206-
<div className={b('popup-content')}>
207-
<div className={b('popup-section-name')}>VDisk</div>
208-
{_.map(vdiskData, (row) => (
209-
<React.Fragment key={row.property}>
210-
<div className={b('property')}>{row.property}</div>
211-
<div className={b('value')}>{row.value}</div>
212-
</React.Fragment>
213-
))}
214-
<div className={b('popup-section-name')}>PDisk</div>
215-
{_.map(pdiskData, (row) => (
216-
<React.Fragment key={row.property}>
217-
<div className={b('property')}>{row.property}</div>
218-
<div className={b('value')}>{row.value}</div>
219-
</React.Fragment>
220-
))}
221-
</div>
222-
</Popup>
223-
);
224-
};
195+
const renderPopup = () => (
196+
<Popup
197+
className={b('popup-wrapper')}
198+
anchorRef={anchor}
199+
open={isPopupVisible}
200+
placement={['top', 'bottom']}
201+
// bigger offset for easier switching to neighbour nodes
202+
// matches the default offset for popup with arrow out of a sense of beauty
203+
offset={[0, 12]}
204+
>
205+
<InfoViewer
206+
title="VDisk"
207+
info={prepareVdiskData()}
208+
size="s"
209+
/>
210+
<InfoViewer
211+
title="PDisk"
212+
info={preparePdiskData()}
213+
size="s"
214+
/>
215+
</Popup>
216+
);
225217

226218
const vdiskAllocatedPercent = useMemo(() => {
227219
const {AvailableSize, AllocatedSize, PDisk} = props;
@@ -245,13 +237,13 @@ function Vdisk(props) {
245237
href={
246238
props.NodeId
247239
? createHref(
248-
routes.node,
249-
{id: props.NodeId, activeTab: STRUCTURE},
250-
{
251-
pdiskId: props.PDisk?.PDiskId,
252-
vdiskId: stringifyVdiskId(props.VDiskId),
253-
},
254-
)
240+
routes.node,
241+
{id: props.NodeId, activeTab: STRUCTURE},
242+
{
243+
pdiskId: props.PDisk?.PDiskId,
244+
vdiskId: stringifyVdiskId(props.VDiskId),
245+
},
246+
)
255247
: undefined
256248
}
257249
/>

‎src/containers/Storage/Vdisk/Vdisk.scss‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,11 @@
11
.vdisk-storage {
2-
cursor: pointer;
3-
42
&__popup-wrapper {
5-
padding: 5px 10px;
6-
}
7-
&__popup-content {
8-
display: grid;
9-
justify-items: stretch;
10-
column-gap: 5px;
11-
}
12-
&__popup-section-name {
13-
grid-column: 1 / 3;
3+
padding: 12px;
144

15-
margin: 5px 0;
16-
17-
font-weight: 500;
18-
text-align: center;
19-
20-
border-bottom: 1px solid var(--yc-color-line-generic);
21-
}
22-
&__property {
23-
text-align: right;
5+
.info-viewer + .info-viewer {
6+
border-top: 1px solid var(--yc-color-line-generic);
7+
padding-top: 8px;
8+
margin-top: 8px;
9+
}
2410
}
2511
}

0 commit comments

Comments
 (0)