@@ -12,7 +12,6 @@ import type {PreparedVDisk} from '../../utils/disks/types';
12
12
import { useIsUserAllowedToMakeChanges } from '../../utils/hooks/useIsUserAllowedToMakeChanges' ;
13
13
import { bytesToSpeed } from '../../utils/utils' ;
14
14
import { InfoViewer } from '../InfoViewer' ;
15
- import type { InfoViewerProps } from '../InfoViewer/InfoViewer' ;
16
15
import { LinkWithIcon } from '../LinkWithIcon/LinkWithIcon' ;
17
16
import { ProgressViewer } from '../ProgressViewer/ProgressViewer' ;
18
17
import { StatusIcon } from '../StatusIcon/StatusIcon' ;
@@ -23,18 +22,21 @@ import './VDiskInfo.scss';
23
22
24
23
const b = cn ( 'ydb-vdisk-info' ) ;
25
24
26
- interface VDiskInfoProps < T extends PreparedVDisk > extends Omit < InfoViewerProps , 'info' > {
25
+ interface VDiskInfoProps < T extends PreparedVDisk > {
27
26
data ?: T ;
28
27
withVDiskPageLink ?: boolean ;
29
28
withTitle ?: boolean ;
29
+ className ?: string ;
30
+ wrap ?: true ;
30
31
}
31
32
32
33
// eslint-disable-next-line complexity
33
34
export function VDiskInfo < T extends PreparedVDisk > ( {
34
35
data,
35
36
withVDiskPageLink,
36
37
withTitle,
37
- ...infoViewerProps
38
+ className,
39
+ wrap,
38
40
} : VDiskInfoProps < T > ) {
39
41
const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges ( ) ;
40
42
@@ -59,22 +61,19 @@ export function VDiskInfo<T extends PreparedVDisk>({
59
61
NodeId,
60
62
} = data || { } ;
61
63
62
- const vdiskInfo = [ ] ;
64
+ const leftColumn = [ ] ;
63
65
64
- if ( valueIsDefined ( VDiskSlotId ) ) {
65
- vdiskInfo . push ( { label : vDiskInfoKeyset ( 'slot-id' ) , value : VDiskSlotId } ) ;
66
- }
67
66
if ( valueIsDefined ( StoragePoolName ) ) {
68
- vdiskInfo . push ( { label : vDiskInfoKeyset ( 'pool-name' ) , value : StoragePoolName } ) ;
67
+ leftColumn . push ( { label : vDiskInfoKeyset ( 'pool-name' ) , value : StoragePoolName } ) ;
69
68
}
70
69
if ( valueIsDefined ( VDiskState ) ) {
71
- vdiskInfo . push ( {
70
+ leftColumn . push ( {
72
71
label : vDiskInfoKeyset ( 'state-status' ) ,
73
72
value : VDiskState ,
74
73
} ) ;
75
74
}
76
75
if ( Number ( AllocatedSize ) >= 0 && Number ( AvailableSize ) >= 0 ) {
77
- vdiskInfo . push ( {
76
+ leftColumn . push ( {
78
77
label : vDiskInfoKeyset ( 'size' ) ,
79
78
value : (
80
79
< ProgressViewer
@@ -86,67 +85,74 @@ export function VDiskInfo<T extends PreparedVDisk>({
86
85
) ,
87
86
} ) ;
88
87
}
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
- }
107
88
if ( valueIsDefined ( DiskSpace ) ) {
108
- vdiskInfo . push ( {
89
+ leftColumn . push ( {
109
90
label : vDiskInfoKeyset ( 'space-status' ) ,
110
91
value : < StatusIcon status = { DiskSpace } /> ,
111
92
} ) ;
112
93
}
94
+ if ( valueIsDefined ( FrontQueues ) ) {
95
+ leftColumn . push ( {
96
+ label : vDiskInfoKeyset ( 'front-queues' ) ,
97
+ value : < StatusIcon status = { FrontQueues } /> ,
98
+ } ) ;
99
+ }
113
100
if ( valueIsDefined ( SatisfactionRank ?. FreshRank ?. Flag ) ) {
114
- vdiskInfo . push ( {
101
+ leftColumn . push ( {
115
102
label : vDiskInfoKeyset ( 'fresh-rank-satisfaction' ) ,
116
103
value : < StatusIcon status = { SatisfactionRank ?. FreshRank ?. Flag } /> ,
117
104
} ) ;
118
105
}
119
106
if ( valueIsDefined ( SatisfactionRank ?. LevelRank ?. Flag ) ) {
120
- vdiskInfo . push ( {
107
+ leftColumn . push ( {
121
108
label : vDiskInfoKeyset ( 'level-rank-satisfaction' ) ,
122
109
value : < StatusIcon status = { SatisfactionRank ?. LevelRank ?. Flag } /> ,
123
110
} ) ;
124
111
}
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
- }
137
112
if ( valueIsDefined ( ReadThroughput ) ) {
138
- vdiskInfo . push ( {
113
+ leftColumn . push ( {
139
114
label : vDiskInfoKeyset ( 'read-throughput' ) ,
140
115
value : bytesToSpeed ( ReadThroughput ) ,
141
116
} ) ;
142
117
}
143
118
if ( valueIsDefined ( WriteThroughput ) ) {
144
- vdiskInfo . push ( {
119
+ leftColumn . push ( {
145
120
label : vDiskInfoKeyset ( 'write-throughput' ) ,
146
121
value : bytesToSpeed ( WriteThroughput ) ,
147
122
} ) ;
148
123
}
149
124
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
+
150
156
const diskParamsDefined =
151
157
valueIsDefined ( PDiskId ) && valueIsDefined ( NodeId ) && valueIsDefined ( VDiskSlotId ) ;
152
158
@@ -186,7 +192,7 @@ export function VDiskInfo<T extends PreparedVDisk>({
186
192
}
187
193
188
194
if ( links . length ) {
189
- vdiskInfo . push ( {
195
+ rightColumn . push ( {
190
196
label : vDiskInfoKeyset ( 'links' ) ,
191
197
value : (
192
198
< Flex wrap = "wrap" gap = { 2 } >
@@ -199,7 +205,19 @@ export function VDiskInfo<T extends PreparedVDisk>({
199
205
200
206
const title = data && withTitle ? < VDiskTitle data = { data } /> : null ;
201
207
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
+ ) ;
203
221
}
204
222
205
223
interface VDiskTitleProps < T extends PreparedVDisk > {
0 commit comments