Skip to content

Commit 82375c3

Browse files
artemmufazalovartemmufazalov
authored
feat(PDiskPage): add disk space distribution (#1029)
1 parent 6fa1e0b commit 82375c3

39 files changed

+917
-307
lines changed

‎src/components/DiskStateProgressBar/DiskStateProgressBar.scss

+45-45
Original file line numberDiff line numberDiff line change
@@ -5,97 +5,97 @@
55
$outer-border-radius: 4px;
66
$inner-border-radius: $outer-border-radius - $border-width;
77

8+
--progress-bar-border-color: var(--g-color-base-misc-heavy);
9+
--progress-bar-background-color: var(--g-color-base-misc-light);
10+
--progress-bar-fill-color: var(--g-color-base-misc-medium);
11+
812
position: relative;
913
z-index: 0;
1014

11-
display: block;
12-
1315
min-width: 50px;
1416
height: var(--g-text-body-3-line-height);
1517

1618
text-align: center;
1719

1820
color: var(--g-color-text-primary);
19-
border: $border-width solid var(--g-color-base-misc-heavy);
21+
border: $border-width solid var(--progress-bar-border-color);
2022
border-radius: $outer-border-radius;
21-
background-color: var(--g-color-base-misc-light);
23+
background-color: var(--progress-bar-background-color);
2224

2325
&_compact {
2426
min-width: 0;
2527
height: 12px;
2628

2729
border-radius: 2px;
28-
29-
#{$block}__filled {
30-
border-radius: 1px;
31-
}
32-
}
33-
34-
#{$block}__filled {
35-
background-color: var(--g-color-base-misc-medium);
3630
}
3731

3832
&_green {
39-
border-color: var(--g-color-base-positive-heavy);
40-
background-color: var(--g-color-base-positive-light);
41-
#{$block}__filled {
42-
background-color: var(--g-color-base-positive-medium);
43-
44-
.g-root_theme_dark & {
45-
// the common medium green is too bright for this case
46-
background-color: rgb(124, 227, 121, 0.4);
47-
}
48-
}
33+
--progress-bar-border-color: var(--g-color-base-positive-heavy);
34+
--progress-bar-background-color: var(--g-color-base-positive-light);
35+
--progress-bar-fill-color: var(--g-color-base-positive-medium);
4936
}
5037

5138
&_blue {
52-
border-color: var(--g-color-base-info-heavy);
53-
background-color: var(--g-color-base-info-light);
54-
#{$block}__filled {
55-
background-color: var(--g-color-base-info-medium);
56-
}
39+
--progress-bar-border-color: var(--g-color-base-info-heavy);
40+
--progress-bar-background-color: var(--g-color-base-info-light);
41+
--progress-bar-fill-color: var(--g-color-base-info-medium);
5742
}
5843

5944
&_yellow {
60-
border-color: var(--g-color-base-warning-heavy);
61-
background-color: var(--g-color-base-yellow-light);
62-
#{$block}__filled {
63-
background-color: var(--g-color-base-yellow-medium);
64-
}
45+
--progress-bar-border-color: var(--g-color-base-warning-heavy);
46+
--progress-bar-background-color: var(--g-color-base-yellow-light);
47+
--progress-bar-fill-color: var(--g-color-base-yellow-medium);
6548
}
6649

6750
&_orange {
68-
border-color: var(--ydb-color-status-orange);
69-
background-color: var(--g-color-base-warning-light);
70-
#{$block}__filled {
71-
background-color: var(--g-color-base-warning-medium);
72-
}
51+
--progress-bar-border-color: var(--ydb-color-status-orange);
52+
--progress-bar-background-color: var(--g-color-base-warning-light);
53+
--progress-bar-fill-color: var(--g-color-base-warning-medium);
7354
}
7455
&_red {
75-
border-color: var(--g-color-base-danger-heavy);
76-
background-color: var(--g-color-base-danger-light);
77-
#{$block}__filled {
78-
background-color: var(--g-color-base-danger-medium);
79-
}
56+
--progress-bar-border-color: var(--g-color-base-danger-heavy);
57+
--progress-bar-background-color: var(--g-color-base-danger-light);
58+
--progress-bar-fill-color: var(--g-color-base-danger-medium);
59+
}
60+
61+
&_faded {
62+
background-color: unset;
8063
}
8164

82-
&__filled {
65+
&_empty {
66+
color: var(--g-color-text-hint);
67+
border-style: dashed;
68+
background-color: unset;
69+
}
70+
71+
&__fill-bar {
8372
position: absolute;
8473
top: 0;
8574
left: 0;
8675

8776
height: 100%;
8877

8978
border-radius: $inner-border-radius 0 0 $inner-border-radius;
79+
background-color: var(--progress-bar-fill-color);
9080

91-
#{$block}_inverted & {
81+
&_faded {
82+
// Bg color is light variant, use it to make bar less bright
83+
background-color: var(--progress-bar-background-color);
84+
}
85+
86+
&_compact {
87+
border-radius: 1px;
88+
}
89+
90+
&_inverted {
9291
right: 0;
9392
left: auto;
9493

9594
border-radius: 0 $inner-border-radius $inner-border-radius 0;
9695
}
9796
}
98-
&__filled-title {
97+
98+
&__title {
9999
position: relative;
100100
z-index: 2;
101101

‎src/components/DiskStateProgressBar/DiskStateProgressBar.tsx

+35-24
Original file line numberDiff line numberDiff line change
@@ -13,56 +13,67 @@ interface DiskStateProgressBarProps {
1313
diskAllocatedPercent?: number;
1414
severity?: number;
1515
compact?: boolean;
16+
faded?: boolean;
17+
empty?: boolean;
18+
content?: React.ReactNode;
19+
className?: string;
1620
}
1721

1822
export function DiskStateProgressBar({
1923
diskAllocatedPercent = -1,
2024
severity,
2125
compact,
26+
faded,
27+
empty,
28+
content,
29+
className,
2230
}: DiskStateProgressBarProps) {
2331
const [inverted] = useSetting<boolean | undefined>(INVERTED_DISKS_KEY);
2432

33+
const mods: Record<string, boolean | undefined> = {inverted, compact, faded, empty};
34+
35+
const color = severity !== undefined && getSeverityColor(severity);
36+
if (color) {
37+
mods[color.toLocaleLowerCase()] = true;
38+
}
39+
2540
const renderAllocatedPercent = () => {
2641
if (compact) {
27-
return <div className={b('filled')} style={{width: '100%'}} />;
42+
return <div className={b('fill-bar', mods)} style={{width: '100%'}} />;
43+
}
44+
45+
const fillWidth = inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent;
46+
47+
if (diskAllocatedPercent >= 0) {
48+
return <div className={b('fill-bar', mods)} style={{width: `${fillWidth}%`}} />;
2849
}
2950

30-
return (
31-
diskAllocatedPercent >= 0 && (
32-
<React.Fragment>
33-
<div
34-
className={b('filled')}
35-
style={{
36-
width: `${
37-
inverted ? 100 - diskAllocatedPercent : diskAllocatedPercent
38-
}%`,
39-
}}
40-
/>
41-
<div className={b('filled-title')}>
42-
{`${Math.round(diskAllocatedPercent)}%`}
43-
</div>
44-
</React.Fragment>
45-
)
46-
);
51+
return null;
4752
};
4853

49-
const mods: Record<string, boolean | undefined> = {inverted, compact};
54+
const renderContent = () => {
55+
if (content) {
56+
return content;
57+
}
5058

51-
const color = severity !== undefined && getSeverityColor(severity);
52-
if (color) {
53-
mods[color.toLocaleLowerCase()] = true;
54-
}
59+
if (!compact && diskAllocatedPercent >= 0) {
60+
return <div className={b('title')}>{`${Math.round(diskAllocatedPercent)}%`}</div>;
61+
}
62+
63+
return null;
64+
};
5565

5666
return (
5767
<div
58-
className={b(mods)}
68+
className={b(mods, className)}
5969
role="meter"
6070
aria-label="Disk allocated space"
6171
aria-valuemin={0}
6272
aria-valuemax={100}
6373
aria-valuenow={diskAllocatedPercent}
6474
>
6575
{renderAllocatedPercent()}
76+
{renderContent()}
6677
</div>
6778
);
6879
}

‎src/components/PDiskInfo/PDiskInfo.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
&__links {
33
display: flex;
44
flex-flow: row wrap;
5-
gap: 12px;
5+
gap: var(--g-spacing-2);
66
}
77
}

‎src/components/PDiskInfo/PDiskInfo.tsx

+14-19
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import './PDiskInfo.scss';
1919
const b = cn('ydb-pdisk-info');
2020

2121
interface PDiskInfoProps<T extends PreparedPDisk> extends Omit<InfoViewerProps, 'info'> {
22-
pDisk: T;
22+
pDisk?: T;
2323
nodeId?: number | string | null;
2424
isPDiskPage?: boolean;
2525
}
@@ -41,11 +41,8 @@ export function PDiskInfo<T extends PreparedPDisk>({
4141
State,
4242
SerialNumber,
4343
TotalSize,
44-
AvailableSize,
45-
} = pDisk;
46-
47-
const total = Number(TotalSize);
48-
const available = Number(AvailableSize);
44+
AllocatedSize,
45+
} = pDisk || {};
4946

5047
const pdiskInfo: InfoViewerItem[] = [];
5148

@@ -59,19 +56,17 @@ export function PDiskInfo<T extends PreparedPDisk>({
5956
pdiskInfo.push({label: pDiskInfoKeyset('category'), value: Category});
6057
pdiskInfo.push({label: pDiskInfoKeyset('type'), value: Type});
6158
}
62-
if (total >= 0 && available >= 0) {
63-
pdiskInfo.push({
64-
label: pDiskInfoKeyset('size'),
65-
value: (
66-
<ProgressViewer
67-
value={total - available}
68-
capacity={total}
69-
formatValues={formatStorageValuesToGb}
70-
colorizeProgress={true}
71-
/>
72-
),
73-
});
74-
}
59+
pdiskInfo.push({
60+
label: pDiskInfoKeyset('size'),
61+
value: (
62+
<ProgressViewer
63+
value={AllocatedSize}
64+
capacity={TotalSize}
65+
formatValues={formatStorageValuesToGb}
66+
colorizeProgress={true}
67+
/>
68+
),
69+
});
7570
if (valueIsDefined(State)) {
7671
pdiskInfo.push({label: pDiskInfoKeyset('state'), value: State});
7772
}

‎src/components/PDiskPopup/PDiskPopup.tsx

+9-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import {Popup} from '@gravity-ui/uikit';
55

66
import {EFlag} from '../../types/api/enums';
77
import type {NodesMap} from '../../types/store/nodesList';
8+
import {valueIsDefined} from '../../utils';
89
import {cn} from '../../utils/cn';
910
import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
10-
import {getPDiskId} from '../../utils/dataFormatters/dataFormatters';
11+
import {getPDiskId} from '../../utils/disks/helpers';
1112
import type {PreparedPDisk} from '../../utils/disks/types';
1213
import {bytesToGB} from '../../utils/utils';
1314
import type {InfoViewerItem} from '../InfoViewer';
@@ -23,7 +24,13 @@ export const preparePDiskData = (data: PreparedPDisk, nodes?: NodesMap) => {
2324
const {AvailableSize, TotalSize, State, PDiskId, NodeId, Path, Realtime, Type, Device} = data;
2425

2526
const pdiskData: InfoViewerItem[] = [
26-
{label: 'PDisk', value: getPDiskId({NodeId, PDiskId}) || EMPTY_DATA_PLACEHOLDER},
27+
{
28+
label: 'PDisk',
29+
value:
30+
valueIsDefined(NodeId) && valueIsDefined(PDiskId)
31+
? getPDiskId(NodeId, PDiskId)
32+
: EMPTY_DATA_PLACEHOLDER,
33+
},
2734
{label: 'State', value: State || 'not available'},
2835
{label: 'Type', value: Type || 'unknown'},
2936
];

‎src/components/VDiskInfo/VDiskInfo.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
&__links {
33
display: flex;
44
flex-flow: row wrap;
5-
gap: 12px;
5+
gap: var(--g-spacing-2);
6+
}
7+
8+
&__title {
9+
display: flex;
10+
flex-direction: row;
11+
gap: var(--g-spacing-2);
612
}
713
}

0 commit comments

Comments
 (0)