Skip to content

Commit b137f79

Browse files
astandrikastandrik
committed
fix: remove hover
1 parent 32df3a9 commit b137f79

File tree

4 files changed

+74
-134
lines changed

4 files changed

+74
-134
lines changed

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryDetailsSection.tsx‎

Lines changed: 21 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import {DefinitionList, Flex, Progress, Text} from '@gravity-ui/uikit';
22

3-
import {HoverPopup} from '../../../../../components/HoverPopup/HoverPopup';
43
import i18n from '../../../../../components/MemoryViewer/i18n';
54
import {
65
getMemorySegmentColor,
76
getMemorySegments,
87
} from '../../../../../components/MemoryViewer/utils';
9-
import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
108
import type {TMemoryStats} from '../../../../../types/api/nodes';
119
import {formatBytes} from '../../../../../utils/bytesParsers';
1210
import {cn} from '../../../../../utils/cn';
@@ -44,90 +42,27 @@ export function MemoryDetailsSection({memoryStats}: MemoryDetailsSectionProps) {
4442
</div>
4543
<div className={b('content')}>
4644
<div className={b('main-progress')}>
47-
<HoverPopup
48-
renderPopupContent={() => (
49-
<DefinitionList responsive>
50-
{memorySegments.map(
51-
({
52-
label,
53-
value: segmentSize,
54-
capacity: segmentCapacity,
55-
key,
56-
}) => (
57-
<DefinitionList.Item
58-
key={label}
59-
name={
60-
<div className={b('popup-container')}>
61-
<div
62-
className={b('popup-legend')}
63-
style={{
64-
backgroundColor:
65-
getMemorySegmentColor(key),
66-
}}
67-
/>
68-
<div className={b('popup-name')}>{label}</div>
69-
</div>
70-
}
71-
>
72-
{segmentCapacity ? (
73-
<ProgressViewer
74-
value={segmentSize}
75-
capacity={segmentCapacity}
76-
formatValues={(
77-
value?: number,
78-
total?: number,
79-
): [string, string] => [
80-
formatBytes({
81-
value: value || 0,
82-
size: 'gb',
83-
withSizeLabel: false,
84-
precision: 2,
85-
}),
86-
formatBytes({
87-
value: total || 0,
88-
size: 'gb',
89-
withSizeLabel: true,
90-
precision: 1,
91-
}),
92-
]}
93-
colorizeProgress
94-
/>
95-
) : (
96-
formatBytes({
97-
value: segmentSize,
98-
size: 'gb',
99-
withSizeLabel: true,
100-
precision: 2,
101-
})
102-
)}
103-
</DefinitionList.Item>
104-
),
105-
)}
106-
</DefinitionList>
107-
)}
108-
>
109-
<ProgressWrapper
110-
stack={memorySegments}
111-
totalCapacity={memoryStats.HardLimit}
112-
formatValues={(value?: number, total?: number): [string, string] => [
113-
formatBytes({
114-
value: value || 0,
115-
size: 'gb',
116-
withSizeLabel: false,
117-
precision: 2,
118-
}),
119-
formatBytes({
120-
value: total || 0,
121-
size: 'gb',
122-
withSizeLabel: true,
123-
precision: 1,
124-
}),
125-
]}
126-
className={b('main-progress-bar')}
127-
size="m"
128-
width="full"
129-
/>
130-
</HoverPopup>
45+
<ProgressWrapper
46+
stack={memorySegments}
47+
totalCapacity={memoryStats.HardLimit}
48+
formatValues={(value?: number, total?: number): [string, string] => [
49+
formatBytes({
50+
value: value || 0,
51+
size: 'gb',
52+
withSizeLabel: false,
53+
precision: 2,
54+
}),
55+
formatBytes({
56+
value: total || 0,
57+
size: 'gb',
58+
withSizeLabel: true,
59+
precision: 1,
60+
}),
61+
]}
62+
className={b('main-progress-bar')}
63+
size="m"
64+
width="full"
65+
/>
13166
</div>
13267
<div className={b('segments-container')}>
13368
{displaySegments.map((segment) => {

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryProgressBar.scss‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@use '../../../../../styles/mixins.scss';
2+
3+
.memory-progress-bar {
4+
&__main-progress-container {
5+
margin-bottom: var(--g-spacing-4);
6+
}
7+
8+
&__main-progress-bar {
9+
display: flex;
10+
overflow: hidden;
11+
12+
height: 20px;
13+
14+
border-radius: var(--g-border-radius-xs);
15+
background: var(--g-color-base-generic);
16+
}
17+
18+
&__main-segment {
19+
&:first-child {
20+
border-radius: var(--g-border-radius-xs) 0 0 var(--g-border-radius-xs);
21+
}
22+
23+
&:last-child {
24+
border-radius: 0 var(--g-border-radius-xs) var(--g-border-radius-xs) 0;
25+
}
26+
27+
&:only-child {
28+
border-radius: var(--g-border-radius-xs);
29+
}
30+
}
31+
32+
&__popup-container {
33+
display: flex;
34+
align-items: center;
35+
gap: var(--g-spacing-2);
36+
}
37+
38+
&__popup-legend {
39+
flex-shrink: 0;
40+
41+
width: 12px;
42+
height: 12px;
43+
44+
border-radius: var(--g-border-radius-xs);
45+
}
46+
47+
&__popup-name {
48+
color: var(--g-color-text-primary);
49+
}
50+
}

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryProgressBar.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import type {TMemoryStats} from '../../../../../types/api/nodes';
1313
import {formatBytes} from '../../../../../utils/bytesParsers';
1414
import {cn} from '../../../../../utils/cn';
1515

16-
const b = cn('tenant-memory');
16+
import './MemoryProgressBar.scss';
17+
18+
const b = cn('memory-progress-bar');
1719
const MIN_SEGMENT_WIDTH_PERCENT = 0.5;
1820

1921
const formatDetailedValues = (value?: number, total?: number): [string, string] => {

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.scss‎

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,6 @@
11
@use '../../../../../styles/mixins.scss';
22

33
.tenant-memory {
4-
&__main-progress-container {
5-
margin-bottom: var(--g-spacing-4);
6-
}
7-
8-
&__main-progress-bar {
9-
display: flex;
10-
overflow: hidden;
11-
12-
height: 20px;
13-
14-
border-radius: var(--g-border-radius-xs);
15-
background: var(--g-color-base-generic);
16-
}
17-
18-
&__main-segment {
19-
&:first-child {
20-
border-radius: var(--g-border-radius-xs) 0 0 var(--g-border-radius-xs);
21-
}
22-
23-
&:last-child {
24-
border-radius: 0 var(--g-border-radius-xs) var(--g-border-radius-xs) 0;
25-
}
26-
27-
&:only-child {
28-
border-radius: var(--g-border-radius-xs);
29-
}
30-
}
31-
32-
&__popup-container {
33-
display: flex;
34-
align-items: center;
35-
gap: var(--g-spacing-2);
36-
}
37-
38-
&__popup-legend {
39-
flex-shrink: 0;
40-
41-
width: 12px;
42-
height: 12px;
43-
44-
border-radius: var(--g-border-radius-xs);
45-
}
46-
47-
&__popup-name {
48-
color: var(--g-color-text-primary);
49-
}
50-
514
&__value-text {
525
flex-shrink: 0;
536

0 commit comments

Comments
 (0)