Skip to content

Commit 16b0195

Browse files
astandrikastandrik
committed
fix: better code
1 parent b137f79 commit 16b0195

File tree

5 files changed

+97
-200
lines changed

5 files changed

+97
-200
lines changed

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

Lines changed: 7 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
import {DefinitionList, Flex, Progress, Text} from '@gravity-ui/uikit';
1+
import {Text} from '@gravity-ui/uikit';
22

33
import i18n from '../../../../../components/MemoryViewer/i18n';
4-
import {
5-
getMemorySegmentColor,
6-
getMemorySegments,
7-
} from '../../../../../components/MemoryViewer/utils';
4+
import {getMemorySegments} from '../../../../../components/MemoryViewer/utils';
85
import type {TMemoryStats} from '../../../../../types/api/nodes';
96
import {formatBytes} from '../../../../../utils/bytesParsers';
107
import {cn} from '../../../../../utils/cn';
118
import {ProgressWrapper} from '../TenantStorage/ProgressWrapper';
129

10+
import {MemorySegmentItem} from './MemorySegmentItem';
11+
1312
import './MemoryDetailsSection.scss';
1413

1514
const b = cn('memory-details');
@@ -65,69 +64,9 @@ export function MemoryDetailsSection({memoryStats}: MemoryDetailsSectionProps) {
6564
/>
6665
</div>
6766
<div className={b('segments-container')}>
68-
{displaySegments.map((segment) => {
69-
const segmentColor = getMemorySegmentColor(segment.key);
70-
let valueText: string;
71-
if (segment.capacity) {
72-
valueText = `${formatBytes({value: segment.value, size: 'tb', withSizeLabel: false, precision: 2})} of ${formatBytes({value: segment.capacity, size: 'tb', withSizeLabel: true, precision: 0})}`;
73-
} else {
74-
valueText = formatBytes({
75-
value: segment.value,
76-
size: 'gb',
77-
withSizeLabel: true,
78-
precision: 1,
79-
});
80-
}
81-
82-
return (
83-
<div key={segment.key} className={b('segment-row')}>
84-
<div
85-
className={b('segment-indicator')}
86-
style={{backgroundColor: segmentColor}}
87-
/>
88-
<DefinitionList
89-
nameMaxWidth={200}
90-
className={b('segment-definition-list')}
91-
>
92-
<DefinitionList.Item
93-
name={
94-
<Text variant="body-1" color="secondary">
95-
{segment.label}
96-
</Text>
97-
}
98-
>
99-
<Flex alignItems="center" gap="3">
100-
<div className={b('segment-progress')}>
101-
<div
102-
style={
103-
{
104-
'--g-progress-filled-background-color':
105-
getMemorySegmentColor(segment.key),
106-
} as React.CSSProperties
107-
}
108-
>
109-
<Progress
110-
value={
111-
segment.capacity
112-
? (segment.value /
113-
segment.capacity) *
114-
100
115-
: 100
116-
}
117-
size="s"
118-
className={b('progress-bar')}
119-
/>
120-
</div>
121-
</div>
122-
<Text variant="body-1" color="secondary">
123-
{valueText}
124-
</Text>
125-
</Flex>
126-
</DefinitionList.Item>
127-
</DefinitionList>
128-
</div>
129-
);
130-
})}
67+
{displaySegments.map((segment) => (
68+
<MemorySegmentItem key={segment.key} segment={segment} />
69+
))}
13170
</div>
13271
</div>
13372
</div>

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

Lines changed: 2 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,16 @@
1-
import React from 'react';
2-
3-
import {DefinitionList} from '@gravity-ui/uikit';
4-
5-
import {HoverPopup} from '../../../../../components/HoverPopup/HoverPopup';
6-
import {
7-
MEMORY_SEGMENT_COLORS,
8-
getMemorySegmentColor,
9-
getMemorySegments,
10-
} from '../../../../../components/MemoryViewer/utils';
11-
import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
12-
import type {TMemoryStats} from '../../../../../types/api/nodes';
13-
import {formatBytes} from '../../../../../utils/bytesParsers';
1+
import {MEMORY_SEGMENT_COLORS} from '../../../../../components/MemoryViewer/utils';
142
import {cn} from '../../../../../utils/cn';
153

164
import './MemoryProgressBar.scss';
175

186
const b = cn('memory-progress-bar');
19-
const MIN_SEGMENT_WIDTH_PERCENT = 0.5;
20-
21-
const formatDetailedValues = (value?: number, total?: number): [string, string] => {
22-
return [
23-
formatBytes({
24-
value: value || 0,
25-
size: 'gb',
26-
withSizeLabel: false,
27-
precision: 2,
28-
}),
29-
formatBytes({
30-
value: total || 0,
31-
size: 'gb',
32-
withSizeLabel: true,
33-
precision: 1,
34-
}),
35-
];
36-
};
377

388
interface MemoryProgressBarProps {
39-
memoryStats?: TMemoryStats;
409
memoryUsed?: string;
4110
memoryLimit?: string;
4211
}
4312

44-
export function MemoryProgressBar({memoryStats, memoryUsed, memoryLimit}: MemoryProgressBarProps) {
45-
if (memoryStats) {
46-
// Full stats case - multi-segment progress bar
47-
let memoryUsage: number;
48-
if (memoryStats.AnonRss === undefined) {
49-
memoryUsage =
50-
Number(memoryStats.AllocatedMemory || 0) +
51-
Number(memoryStats.AllocatorCachesMemory || 0);
52-
} else {
53-
memoryUsage = Number(memoryStats.AnonRss);
54-
}
55-
56-
const memorySegments = getMemorySegments(memoryStats, Number(memoryUsage));
57-
const displaySegments = memorySegments.filter(
58-
(segment) => !segment.isInfo && segment.value > 0,
59-
);
60-
61-
const totalCapacity = memoryStats.HardLimit ? Number(memoryStats.HardLimit) : 100;
62-
const segmentWidths = displaySegments.map((segment) => {
63-
return Math.max((segment.value / totalCapacity) * 100, MIN_SEGMENT_WIDTH_PERCENT);
64-
});
65-
66-
return (
67-
<HoverPopup
68-
renderPopupContent={() => (
69-
<DefinitionList responsive>
70-
{memorySegments.map(
71-
({label, value: segmentSize, capacity: segmentCapacity, key}) => (
72-
<DefinitionList.Item
73-
key={label}
74-
name={
75-
<div className={b('popup-container')}>
76-
<div
77-
className={b('popup-legend')}
78-
style={{
79-
backgroundColor: getMemorySegmentColor(key),
80-
}}
81-
/>
82-
<div className={b('popup-name')}>{label}</div>
83-
</div>
84-
}
85-
>
86-
{segmentCapacity ? (
87-
<ProgressViewer
88-
value={segmentSize}
89-
capacity={segmentCapacity}
90-
formatValues={formatDetailedValues}
91-
colorizeProgress
92-
/>
93-
) : (
94-
formatBytes({
95-
value: segmentSize,
96-
size: 'gb',
97-
withSizeLabel: true,
98-
precision: 2,
99-
})
100-
)}
101-
</DefinitionList.Item>
102-
),
103-
)}
104-
</DefinitionList>
105-
)}
106-
>
107-
<div className={b('main-progress-container')}>
108-
<div className={b('main-progress-bar')}>
109-
{displaySegments.map((segment, index) => (
110-
<div
111-
key={segment.key}
112-
className={b('main-segment')}
113-
style={{
114-
width: `${segmentWidths[index]}%`,
115-
backgroundColor: getMemorySegmentColor(segment.key),
116-
}}
117-
/>
118-
))}
119-
</div>
120-
</div>
121-
</HoverPopup>
122-
);
123-
}
124-
13+
export function MemoryProgressBar({memoryUsed, memoryLimit}: MemoryProgressBarProps) {
12514
// Simple case - single segment progress bar
12615
if (!memoryUsed || !memoryLimit) {
12716
return null;

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
3+
import {DefinitionList, Flex, Progress, Text} from '@gravity-ui/uikit';
4+
5+
import type {MemorySegment} from '../../../../../components/MemoryViewer/utils';
6+
import {getMemorySegmentColor} from '../../../../../components/MemoryViewer/utils';
7+
import {cn} from '../../../../../utils/cn';
8+
import {formatSegmentValue} from '../../../../../utils/progress';
9+
10+
const b = cn('memory-details');
11+
12+
interface MemorySegmentItemProps {
13+
segment: MemorySegment;
14+
}
15+
16+
export function MemorySegmentItem({segment}: MemorySegmentItemProps) {
17+
const segmentColor = getMemorySegmentColor(segment.key);
18+
19+
const valueText = formatSegmentValue(segment.value, segment.capacity);
20+
21+
return (
22+
<div className={b('segment-row')}>
23+
<div className={b('segment-indicator')} style={{backgroundColor: segmentColor}} />
24+
<DefinitionList nameMaxWidth={200} className={b('segment-definition-list')}>
25+
<DefinitionList.Item
26+
name={
27+
<Text variant="body-1" color="secondary">
28+
{segment.label}
29+
</Text>
30+
}
31+
>
32+
<Flex alignItems="center" gap="3">
33+
<div className={b('segment-progress')}>
34+
<div
35+
style={
36+
{
37+
'--g-progress-filled-background-color': segmentColor,
38+
} as React.CSSProperties
39+
}
40+
>
41+
<Progress
42+
value={
43+
segment.capacity
44+
? (segment.value / segment.capacity) * 100
45+
: 100
46+
}
47+
size="s"
48+
className={b('progress-bar')}
49+
/>
50+
</div>
51+
</div>
52+
<Text variant="body-1" color="secondary">
53+
{valueText}
54+
</Text>
55+
</Flex>
56+
</DefinitionList.Item>
57+
</DefinitionList>
58+
</div>
59+
);
60+
}

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/ProgressWrapper.tsx‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import {Flex, Progress, Text} from '@gravity-ui/uikit';
4-
import type {ProgressSize, ProgressTheme} from '@gravity-ui/uikit';
4+
import type {ProgressSize} from '@gravity-ui/uikit';
55

66
import type {MemorySegment} from '../../../../../components/MemoryViewer/utils';
77
import {getMemorySegmentColor} from '../../../../../components/MemoryViewer/utils';
@@ -38,22 +38,6 @@ type ProgressWrapperProps = ProgressWrapperSingleProps | ProgressWrapperStackPro
3838
const isValidValue = (val?: number | string): boolean =>
3939
isNumeric(val) && safeParseNumber(val) >= 0;
4040

41-
// Map memory segment types to Progress themes
42-
const getProgressThemeForSegment = (segmentKey: string): ProgressTheme => {
43-
switch (segmentKey) {
44-
case 'SharedCacheConsumption':
45-
return 'info';
46-
case 'QueryExecutionConsumption':
47-
return 'success';
48-
case 'MemTableConsumption':
49-
return 'warning';
50-
case 'AllocatorCachesMemory':
51-
return 'misc';
52-
default:
53-
return 'default';
54-
}
55-
};
56-
5741
export function ProgressWrapper({
5842
formatValues = defaultFormatProgressValues,
5943
className,
@@ -82,7 +66,6 @@ export function ProgressWrapper({
8266
value: maxValue > 0 ? (segment.value / maxValue) * MAX_PERCENTAGE : 0,
8367
color: getMemorySegmentColor(segment.key),
8468
title: segment.label,
85-
theme: getProgressThemeForSegment(segment.key),
8669
}));
8770

8871
const [totalValueText, totalCapacityText] = React.useMemo(() => {

‎src/utils/progress.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {formatBytes} from './bytesParsers';
12
import {DEFAULT_DANGER_THRESHOLD, DEFAULT_WARNING_THRESHOLD} from './constants';
23
import {formatNumber, roundToPrecision} from './dataFormatters/dataFormatters';
34

@@ -9,13 +10,38 @@ export type FormatProgressViewerValues = (
910
) => (string | number | undefined)[];
1011

1112
const formatValue = (value?: number) => {
12-
return formatNumber(roundToPrecision(Number(value), 2));
13+
return formatNumber(roundToPrecision(value || 0, 2));
1314
};
1415

1516
export const defaultFormatProgressValues: FormatProgressViewerValues = (value, total) => {
1617
return [formatValue(value), formatValue(total)];
1718
};
1819

20+
export function formatSegmentValue(value: number, capacity?: number): string {
21+
if (capacity) {
22+
const usedValue = formatBytes({
23+
value,
24+
size: 'tb',
25+
withSizeLabel: false,
26+
precision: 2,
27+
});
28+
const totalValue = formatBytes({
29+
value: capacity,
30+
size: 'tb',
31+
withSizeLabel: true,
32+
precision: 0,
33+
});
34+
return `${usedValue} of ${totalValue}`;
35+
}
36+
37+
return formatBytes({
38+
value,
39+
size: 'gb',
40+
withSizeLabel: true,
41+
precision: 1,
42+
});
43+
}
44+
1945
interface CalculateProgressStatusProps {
2046
inverseColorize?: boolean;
2147
dangerThreshold?: number;

0 commit comments

Comments
 (0)