Skip to content

Commit be57439

Browse files
artemmufazalovartemmufazalov
committed
feat(PDiskPage): add pdisk attributes, display in 2 columns
1 parent 4b34e05 commit be57439

File tree

6 files changed

+167
-50
lines changed

6 files changed

+167
-50
lines changed

‎src/components/PDiskInfo/PDiskInfo.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,18 @@
11
.ydb-pdisk-info {
2+
&__wrapper {
3+
display: flex;
4+
flex-flow: row wrap;
5+
gap: 7px;
6+
}
7+
8+
&__col {
9+
display: flex;
10+
flex-direction: column;
11+
gap: 7px;
12+
13+
width: 500px;
14+
}
15+
216
&__links {
317
display: flex;
418
flex-flow: row wrap;

‎src/components/PDiskInfo/PDiskInfo.tsx‎

Lines changed: 114 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import {getPDiskPagePath} from '../../routes';
22
import {valueIsDefined} from '../../utils';
3+
import {formatBytes} from '../../utils/bytesParsers';
34
import {cn} from '../../utils/cn';
4-
import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
55
import {formatStorageValuesToGb} from '../../utils/dataFormatters/dataFormatters';
66
import {createPDiskDeveloperUILink} from '../../utils/developerUI/developerUI';
77
import type {PreparedPDisk} from '../../utils/disks/types';
88
import {EntityStatus} from '../EntityStatus/EntityStatus';
99
import type {InfoViewerItem} from '../InfoViewer';
1010
import {InfoViewer} from '../InfoViewer/InfoViewer';
11-
import type {InfoViewerProps} from '../InfoViewer/InfoViewer';
1211
import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
1312
import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
1413

@@ -18,18 +17,17 @@ import './PDiskInfo.scss';
1817

1918
const b = cn('ydb-pdisk-info');
2019

21-
interface PDiskInfoProps<T extends PreparedPDisk> extends Omit<InfoViewerProps, 'info'> {
20+
interface GetPDiskInfoOptions<T extends PreparedPDisk> {
2221
pDisk?: T;
2322
nodeId?: number | string | null;
2423
isPDiskPage?: boolean;
2524
}
2625

27-
export function PDiskInfo<T extends PreparedPDisk>({
26+
function getPDiskInfo<T extends PreparedPDisk>({
2827
pDisk,
2928
nodeId,
3029
isPDiskPage = false,
31-
...infoViewerProps
32-
}: PDiskInfoProps<T>) {
30+
}: GetPDiskInfoOptions<T>) {
3331
const {
3432
PDiskId,
3533
Path,
@@ -42,22 +40,72 @@ export function PDiskInfo<T extends PreparedPDisk>({
4240
SerialNumber,
4341
TotalSize,
4442
AllocatedSize,
43+
DecommitStatus,
44+
StatusV2,
45+
NumActiveSlots,
46+
ExpectedSlotCount,
47+
LogUsedSize,
48+
LogTotalSize,
49+
SystemSize,
50+
SharedWithOs,
4551
} = pDisk || {};
4652

47-
const pdiskInfo: InfoViewerItem[] = [];
53+
const generalInfo: InfoViewerItem[] = [];
4854

55+
if (valueIsDefined(DecommitStatus)) {
56+
generalInfo.push({
57+
label: pDiskInfoKeyset('decomission-status'),
58+
value: DecommitStatus.replace('DECOMMIT_', ''),
59+
});
60+
}
61+
if (valueIsDefined(Category)) {
62+
generalInfo.push({label: pDiskInfoKeyset('type'), value: Type});
63+
}
4964
if (valueIsDefined(Path)) {
50-
pdiskInfo.push({label: pDiskInfoKeyset('path'), value: Path});
65+
generalInfo.push({label: pDiskInfoKeyset('path'), value: Path});
5166
}
5267
if (valueIsDefined(Guid)) {
53-
pdiskInfo.push({label: pDiskInfoKeyset('guid'), value: Guid});
68+
generalInfo.push({label: pDiskInfoKeyset('guid'), value: Guid});
5469
}
55-
if (valueIsDefined(Category)) {
56-
pdiskInfo.push({label: pDiskInfoKeyset('category'), value: Category});
57-
pdiskInfo.push({label: pDiskInfoKeyset('type'), value: Type});
70+
// SerialNumber could be an empty string ""
71+
if (SerialNumber) {
72+
generalInfo.push({
73+
label: pDiskInfoKeyset('serial-number'),
74+
value: SerialNumber,
75+
});
76+
}
77+
if (valueIsDefined(SharedWithOs)) {
78+
generalInfo.push({
79+
label: pDiskInfoKeyset('shared-with-os'),
80+
value: pDiskInfoKeyset('yes'),
81+
});
82+
}
83+
84+
const statusInfo: InfoViewerItem[] = [];
85+
86+
if (valueIsDefined(StatusV2)) {
87+
statusInfo.push({label: pDiskInfoKeyset('drive-status'), value: StatusV2});
88+
}
89+
if (valueIsDefined(State)) {
90+
statusInfo.push({label: pDiskInfoKeyset('state'), value: State});
91+
}
92+
if (valueIsDefined(Device)) {
93+
statusInfo.push({
94+
label: pDiskInfoKeyset('device'),
95+
value: <EntityStatus status={Device} />,
96+
});
97+
}
98+
if (valueIsDefined(Realtime)) {
99+
statusInfo.push({
100+
label: pDiskInfoKeyset('realtime'),
101+
value: <EntityStatus status={Realtime} />,
102+
});
58103
}
59-
pdiskInfo.push({
60-
label: pDiskInfoKeyset('size'),
104+
105+
const spaceInfo: InfoViewerItem[] = [];
106+
107+
spaceInfo.push({
108+
label: pDiskInfoKeyset('space'),
61109
value: (
62110
<ProgressViewer
63111
value={AllocatedSize}
@@ -67,36 +115,41 @@ export function PDiskInfo<T extends PreparedPDisk>({
67115
/>
68116
),
69117
});
70-
if (valueIsDefined(State)) {
71-
pdiskInfo.push({label: pDiskInfoKeyset('state'), value: State});
72-
}
73-
if (valueIsDefined(Device)) {
74-
pdiskInfo.push({
75-
label: pDiskInfoKeyset('device'),
76-
value: <EntityStatus status={Device} />,
118+
if (valueIsDefined(NumActiveSlots) && valueIsDefined(ExpectedSlotCount)) {
119+
spaceInfo.push({
120+
label: pDiskInfoKeyset('slots'),
121+
value: <ProgressViewer value={NumActiveSlots} capacity={ExpectedSlotCount} />,
77122
});
78123
}
79-
if (valueIsDefined(Realtime)) {
80-
pdiskInfo.push({
81-
label: pDiskInfoKeyset('realtime'),
82-
value: <EntityStatus status={Realtime} />,
124+
if (valueIsDefined(LogUsedSize) && valueIsDefined(LogTotalSize)) {
125+
spaceInfo.push({
126+
label: pDiskInfoKeyset('log-size'),
127+
value: (
128+
<ProgressViewer
129+
value={LogUsedSize}
130+
capacity={LogTotalSize}
131+
formatValues={formatStorageValuesToGb}
132+
/>
133+
),
83134
});
84135
}
85-
if (valueIsDefined(SerialNumber)) {
86-
pdiskInfo.push({
87-
label: pDiskInfoKeyset('serial-number'),
88-
value: SerialNumber || EMPTY_DATA_PLACEHOLDER,
136+
if (valueIsDefined(SystemSize)) {
137+
spaceInfo.push({
138+
label: pDiskInfoKeyset('system-size'),
139+
value: formatBytes({value: SystemSize}),
89140
});
90141
}
91142

143+
const additionalInfo: InfoViewerItem[] = [];
144+
92145
if (valueIsDefined(PDiskId) && valueIsDefined(nodeId)) {
93146
const pDiskPagePath = getPDiskPagePath(PDiskId, nodeId);
94147
const pDiskInternalViewerPath = createPDiskDeveloperUILink({
95148
nodeId,
96149
pDiskId: PDiskId,
97150
});
98151

99-
pdiskInfo.push({
152+
additionalInfo.push({
100153
label: pDiskInfoKeyset('links'),
101154
value: (
102155
<span className={b('links')}>
@@ -116,5 +169,35 @@ export function PDiskInfo<T extends PreparedPDisk>({
116169
});
117170
}
118171

119-
return <InfoViewer info={pdiskInfo} {...infoViewerProps} />;
172+
return [generalInfo, statusInfo, spaceInfo, additionalInfo];
173+
}
174+
175+
interface PDiskInfoProps<T extends PreparedPDisk> extends GetPDiskInfoOptions<T> {
176+
className?: string;
177+
}
178+
179+
export function PDiskInfo<T extends PreparedPDisk>({
180+
pDisk,
181+
nodeId,
182+
isPDiskPage = false,
183+
className,
184+
}: PDiskInfoProps<T>) {
185+
const [generalInfo, statusInfo, spaceInfo, additionalInfo] = getPDiskInfo({
186+
pDisk,
187+
nodeId,
188+
isPDiskPage,
189+
});
190+
191+
return (
192+
<div className={b('wrapper', className)}>
193+
<div className={b('col')}>
194+
<InfoViewer info={generalInfo} />
195+
<InfoViewer info={spaceInfo} />
196+
</div>
197+
<div className={b('col')}>
198+
<InfoViewer info={statusInfo} />
199+
<InfoViewer info={additionalInfo} />
200+
</div>
201+
</div>
202+
);
120203
}

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

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
{
2+
"decomission-status": "Decomission Status",
3+
"type": "Type",
24
"path": "Path",
35
"guid": "GUID",
4-
"category": "Category",
5-
"type": "Type",
6-
"size": "Size",
6+
"serial-number": "Serial Number",
7+
"shared-with-os": "SharedWithOs",
8+
9+
"drive-status": "Drive Status",
710
"state": "State",
811
"device": "Device",
912
"realtime": "Realtime",
10-
"serial-number": "SerialNumber",
13+
14+
"space": "Space",
15+
"slots": "Slots",
16+
"log-size": "Log Size",
17+
"system-size": "System Size",
18+
1119
"links": "Links",
1220

1321
"developer-ui": "Developer UI",
14-
"pdisk-page": "PDisk page"
22+
"pdisk-page": "PDisk page",
23+
24+
"yes": "Yes"
1525
}

‎src/store/reducers/pdisk/utils.ts‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,16 @@ export function preparePDiskDataResponse([pdiskResponse = {}, nodeResponse]: [
1818
const {PDisk: WhiteboardPDiskData = {}, VDisks: WhiteboardVDisksData = []} = Whiteboard;
1919
const {PDisk: BSCPDiskData = {}} = BSC;
2020

21-
const {ExpectedSlotCount, EnforcedDynamicSlotSize} = BSCPDiskData;
22-
23-
const preparedPDisk = preparePDiskData(WhiteboardPDiskData);
24-
25-
const {LogUsedSize, LogTotalSize, TotalSize: PDiskTotalSize, SystemSize} = preparedPDisk;
21+
const preparedPDisk = preparePDiskData(WhiteboardPDiskData, BSCPDiskData);
22+
23+
const {
24+
LogUsedSize,
25+
LogTotalSize,
26+
TotalSize: PDiskTotalSize,
27+
SystemSize,
28+
ExpectedSlotCount,
29+
EnforcedDynamicSlotSize,
30+
} = preparedPDisk;
2631

2732
const logSlot: SlotItem<'log'> = {
2833
SlotType: 'log',

‎src/utils/disks/prepareDisks.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type {TPDiskStateInfo} from '../../types/api/pdisk';
1+
import type {TPDiskInfo, TPDiskStateInfo} from '../../types/api/pdisk';
22
import type {TVDiskStateInfo} from '../../types/api/vdisk';
33

44
import {calculatePDiskSeverity} from './calculatePDiskSeverity';
@@ -35,7 +35,10 @@ export function prepareVDiskData(vdiskState: TVDiskStateInfo = {}): PreparedVDis
3535
};
3636
}
3737

38-
export function preparePDiskData(pdiskState: TPDiskStateInfo = {}): PreparedPDisk {
38+
export function preparePDiskData(
39+
pdiskState: TPDiskStateInfo = {},
40+
bscPDiskInfo: TPDiskInfo = {},
41+
): PreparedPDisk {
3942
const {AvailableSize, TotalSize, Category} = pdiskState;
4043

4144
const Type = getPDiskType(Category);
@@ -48,6 +51,7 @@ export function preparePDiskData(pdiskState: TPDiskStateInfo = {}): PreparedPDis
4851
const Severity = calculatePDiskSeverity(pdiskState, allocatedPercent);
4952

5053
return {
54+
...bscPDiskInfo,
5155
...pdiskState,
5256
Type,
5357
Severity,

‎src/utils/disks/types.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import type {TPDiskStateInfo} from '../../types/api/pdisk';
1+
import type {TPDiskInfo, TPDiskStateInfo} from '../../types/api/pdisk';
22
import type {TVDiskStateInfo, TVSlotId} from '../../types/api/vdisk';
33
import type {ValueOf} from '../../types/common';
44

55
import type {PDISK_TYPES} from './getPDiskType';
66

7-
export interface PreparedPDisk extends TPDiskStateInfo {
8-
Type?: PDiskType;
9-
Severity?: number;
7+
export type PreparedPDisk = TPDiskStateInfo &
8+
Omit<Partial<TPDiskInfo>, 'Type'> & {
9+
Type?: PDiskType;
10+
Severity?: number;
1011

11-
AllocatedSize?: number;
12-
AllocatedPercent?: number;
13-
}
12+
AllocatedSize?: number;
13+
AllocatedPercent?: number;
14+
};
1415

1516
export interface PreparedVDisk extends TVDiskStateInfo {
1617
PDisk?: PreparedPDisk;

0 commit comments

Comments
 (0)