Skip to content

Commit eb3dc51

Browse files
DaryaVorontsovaDaryaVorontsova
committed
Revert "feat(ui): update Disk indicators visual design across console (#3142)"
This reverts commit 0859c37.
1 parent be5facc commit eb3dc51

File tree

31 files changed

+199
-469
lines changed

31 files changed

+199
-469
lines changed

‎src/components/DiskStateProgressBar/DiskStateProgressBar.scss‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@
44
$block: &;
55

66
$border-width: 1px;
7-
$outer-border-radius: var(--g-border-radius-s);
7+
$outer-border-radius: 4px;
88
$inner-border-radius: $outer-border-radius - $border-width;
9-
$outer-compact-border-radius: var(--g-border-radius-xs);
10-
$inner-compact-border-radius: $outer-compact-border-radius - $border-width;
119

12-
--progress-bar-full-height: var(--g-text-subheader-2-line-height);
10+
--progress-bar-full-height: var(--g-text-body-3-line-height);
1311
--progress-bar-compact-height: 12px;
1412

1513
--stripe-width: 4px;
@@ -18,8 +16,6 @@
1816
position: relative;
1917
z-index: 0;
2018

21-
overflow: hidden;
22-
2319
min-width: 50px;
2420
height: var(--progress-bar-full-height);
2521

@@ -29,16 +25,13 @@
2925
border: $border-width solid var(--entity-state-border-color);
3026
border-radius: $outer-border-radius;
3127
background-color: var(--entity-state-background-color);
32-
33-
transition: opacity 300ms ease-in-out;
34-
35-
@include mixins.entity-state-colors($block);
28+
@include mixins.entity-state-colors();
3629

3730
&_compact {
38-
min-width: 8px;
31+
min-width: 0;
3932
height: var(--progress-bar-compact-height);
4033

41-
border-radius: $outer-compact-border-radius;
34+
border-radius: 2px;
4235
}
4336

4437
&_faded {
@@ -49,10 +42,6 @@
4942
opacity: 0.5;
5043
}
5144

52-
&_darkened {
53-
opacity: 0.8;
54-
}
55-
5645
&_empty {
5746
color: var(--g-color-text-hint);
5847
border-style: dashed;
@@ -89,7 +78,7 @@
8978
}
9079

9180
&_compact {
92-
border-radius: $inner-compact-border-radius;
81+
border-radius: 1px;
9382
}
9483

9584
&_inverted {
@@ -104,21 +93,20 @@
10493
position: relative;
10594
z-index: 2;
10695

107-
margin-right: var(--g-spacing-half);
96+
margin-right: var(--g-spacing-1);
10897

109-
font-family: var(--g-text-caption-font-family);
110-
font-size: var(--g-text-caption-1-font-size);
98+
font-size: var(--g-text-body-1-font-size);
11199
// bar height minus borders
112100
line-height: calc(var(--progress-bar-full-height) - #{$border-width * 2});
113101

114-
color: var(--entity-state-font-color);
102+
color: inherit;
115103
}
116104

117105
&__icon {
118106
position: relative;
119107
z-index: 2;
120108

121-
margin-left: calc(var(--g-spacing-1) - $border-width);
109+
margin-left: var(--g-spacing-1);
122110

123111
color: var(--entity-state-border-color);
124112
}

‎src/components/DiskStateProgressBar/DiskStateProgressBar.tsx‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {cn} from '../../utils/cn';
77
import {DONOR_COLOR} from '../../utils/disks/constants';
88
import {getSeverityColor, getVDiskStatusIcon} from '../../utils/disks/helpers';
99
import {useSetting} from '../../utils/hooks';
10-
import {isNumeric} from '../../utils/utils';
1110

1211
import './DiskStateProgressBar.scss';
1312

@@ -25,9 +24,6 @@ interface DiskStateProgressBarProps {
2524
className?: string;
2625
isDonor?: boolean;
2726
withIcon?: boolean;
28-
highlighted?: boolean;
29-
darkened?: boolean;
30-
noDataPlaceholder?: React.ReactNode;
3127
}
3228

3329
export function DiskStateProgressBar({
@@ -42,9 +38,6 @@ export function DiskStateProgressBar({
4238
className,
4339
isDonor,
4440
withIcon,
45-
highlighted,
46-
darkened,
47-
noDataPlaceholder,
4841
}: DiskStateProgressBarProps) {
4942
const [inverted] = useSetting<boolean | undefined>(SETTING_KEYS.INVERTED_DISKS);
5043

@@ -55,8 +48,6 @@ export function DiskStateProgressBar({
5548
empty,
5649
inactive,
5750
striped,
58-
highlighted,
59-
darkened,
6051
};
6152

6253
if (isDonor) {
@@ -68,39 +59,33 @@ export function DiskStateProgressBar({
6859
}
6960
}
7061

71-
const hasAllocatedPercent = isNumeric(diskAllocatedPercent) && diskAllocatedPercent >= 0;
72-
7362
const renderAllocatedPercent = () => {
7463
if (compact) {
7564
return <div className={b('fill-bar', mods)} style={{width: '100%'}} />;
7665
}
7766

78-
if (!hasAllocatedPercent) {
79-
return null;
80-
}
81-
8267
// diskAllocatedPercent could be more than 100
8368
let fillWidth = Math.min(diskAllocatedPercent, 100);
8469
if (inverted) {
8570
fillWidth = Math.max(100 - diskAllocatedPercent, 0);
8671
}
8772

88-
return <div className={b('fill-bar', mods)} style={{width: `${fillWidth}%`}} />;
73+
if (diskAllocatedPercent >= 0) {
74+
return <div className={b('fill-bar', mods)} style={{width: `${fillWidth}%`}} />;
75+
}
76+
77+
return null;
8978
};
9079

9180
const renderContent = () => {
9281
if (content) {
9382
return content;
9483
}
9584

96-
if (!compact && hasAllocatedPercent) {
85+
if (!compact && diskAllocatedPercent >= 0) {
9786
return <div className={b('title')}>{`${Math.floor(diskAllocatedPercent)}%`}</div>;
9887
}
9988

100-
if (!compact && !hasAllocatedPercent && noDataPlaceholder) {
101-
return <div className={b('title')}>{noDataPlaceholder}</div>;
102-
}
103-
10489
return null;
10590
};
10691

@@ -126,7 +111,7 @@ export function DiskStateProgressBar({
126111
aria-label="Disk allocated space"
127112
aria-valuemin={0}
128113
aria-valuemax={100}
129-
aria-valuenow={hasAllocatedPercent ? diskAllocatedPercent : undefined}
114+
aria-valuenow={diskAllocatedPercent}
130115
>
131116
{iconElement}
132117
{renderAllocatedPercent()}

‎src/components/HoverPopup/HoverPopup.tsx‎

Lines changed: 14 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -34,47 +34,44 @@ export const HoverPopup = ({
3434
delayOpen = DEBOUNCE_TIMEOUT,
3535
}: HoverPopupProps) => {
3636
const [isPopupVisible, setIsPopupVisible] = React.useState(false);
37-
const [isPopupContentHovered, setIsPopupContentHovered] = React.useState(false);
38-
const [isFocused, setIsFocused] = React.useState(false);
39-
40-
const anchor = React.useRef<HTMLSpanElement>(null);
37+
const anchor = React.useRef<HTMLDivElement>(null);
4138

4239
const debouncedHandleShowPopup = React.useMemo(
4340
() =>
4441
debounce(() => {
4542
setIsPopupVisible(true);
43+
onShowPopup?.();
4644
}, delayOpen),
47-
[delayOpen],
45+
[onShowPopup, delayOpen],
4846
);
4947

5048
const hidePopup = React.useCallback(() => {
5149
setIsPopupVisible(false);
52-
}, []);
50+
onHidePopup?.();
51+
}, [onHidePopup]);
5352

5453
const debouncedHandleHidePopup = React.useMemo(
5554
() => debounce(hidePopup, delayClose),
5655
[hidePopup, delayClose],
5756
);
5857

59-
const onMouseEnter = () => {
60-
debouncedHandleHidePopup.cancel();
61-
debouncedHandleShowPopup();
62-
};
58+
const onMouseEnter = debouncedHandleShowPopup;
6359

6460
const onMouseLeave = () => {
6561
debouncedHandleShowPopup.cancel();
6662
debouncedHandleHidePopup();
6763
};
6864

65+
const [isPopupContentHovered, setIsPopupContentHovered] = React.useState(false);
66+
const [isFocused, setIsFocused] = React.useState(false);
67+
6968
const onPopupMouseEnter = React.useCallback(() => {
7069
setIsPopupContentHovered(true);
71-
debouncedHandleHidePopup.cancel();
72-
}, [debouncedHandleHidePopup]);
70+
}, []);
7371

7472
const onPopupMouseLeave = React.useCallback(() => {
7573
setIsPopupContentHovered(false);
76-
debouncedHandleHidePopup();
77-
}, [debouncedHandleHidePopup]);
74+
}, []);
7875

7976
const onPopupContextMenu = React.useCallback(() => {
8077
setIsFocused(true);
@@ -90,39 +87,16 @@ export const HoverPopup = ({
9087
hidePopup();
9188
}, [hidePopup]);
9289

93-
const internalOpen = isPopupVisible || isPopupContentHovered || isFocused;
94-
const open = internalOpen || showPopup;
95-
96-
const prevInternalOpenRef = React.useRef(internalOpen);
97-
98-
React.useEffect(() => {
99-
const prev = prevInternalOpenRef.current;
100-
101-
if (prev === internalOpen) {
102-
return;
103-
}
104-
105-
if (internalOpen) {
106-
onShowPopup?.();
107-
} else {
108-
onHidePopup?.();
109-
}
110-
111-
prevInternalOpenRef.current = internalOpen;
112-
}, [internalOpen, onShowPopup, onHidePopup]);
113-
114-
// Do not render Popup until it is available
115-
// to avoid a brief initial render at (0, 0) before positioning is applied.
116-
const anchorElement = anchorRef?.current || anchor.current;
90+
const open = isPopupVisible || showPopup || isPopupContentHovered || isFocused;
11791

11892
return (
11993
<React.Fragment>
12094
<span ref={anchor} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
12195
{children}
12296
</span>
123-
{open && anchorElement ? (
97+
{open ? (
12498
<Popup
125-
anchorElement={anchorElement}
99+
anchorElement={anchorRef?.current || anchor.current}
126100
onOpenChange={(_open, _event, reason) => {
127101
if (reason === 'escape-key') {
128102
onPopupEscapeKeyDown();

‎src/components/VDisk/VDisk.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ export interface VDiskProps {
2222
delayOpen?: number;
2323
delayClose?: number;
2424
withIcon?: boolean;
25-
highlighted?: boolean;
26-
darkened?: boolean;
2725
}
2826

2927
export const VDisk = ({
@@ -37,15 +35,13 @@ export const VDisk = ({
3735
delayClose,
3836
delayOpen,
3937
withIcon,
40-
highlighted,
41-
darkened,
4238
}: VDiskProps) => {
4339
const getVDiskLink = useVDiskPagePath();
4440
const vDiskPath = getVDiskLink({nodeId: data.NodeId, vDiskId: data.StringifiedId});
4541

4642
const severity = data.Severity;
4743
const isReplicatingColor = severity === DISK_COLOR_STATE_TO_NUMERIC_SEVERITY.Blue;
48-
const isDonor = data.DonorMode;
44+
const isHealthyDonor = data.DonorMode && isReplicatingColor;
4945

5046
return (
5147
<HoverPopup
@@ -64,12 +60,10 @@ export const VDisk = ({
6460
severity={severity}
6561
compact={compact}
6662
inactive={inactive}
67-
striped={isReplicatingColor || isDonor}
68-
isDonor={isDonor}
63+
striped={isReplicatingColor}
64+
isDonor={isHealthyDonor}
6965
className={progressBarClassName}
7066
withIcon={withIcon}
71-
highlighted={highlighted}
72-
darkened={darkened}
7367
/>
7468
</InternalLink>
7569
</div>

0 commit comments

Comments
 (0)