feat: render per component memory consumption

src/components/MemoryViewer/MemoryViewer.scss

@@ -0,0 +1,113 @@
+@import '../../styles/mixins.scss';
+
+$memory-type-colors: (
+    'AllocatorCachesMemory': var(--g-color-base-utility-medium-hover),
+    'SharedCacheConsumption': var(--g-color-base-info-medium-hover),
+    'MemTableConsumption': var(--g-color-base-warning-medium-hover),
+    'QueryExecutionConsumption': var(--g-color-base-positive-medium-hover),
+    'Other': var(--g-color-base-neutral-light-hover),
+);
+
+@mixin memory-type-color($type) {
+    background-color: map-get($memory-type-colors, $type);
+}
+
+.memory-viewer {
+    $block: &;
+
+    position: relative;
+    z-index: 0;
+
+    min-width: 150px;
+    padding: 0 var(--g-spacing-1);
+
+    &__progress-container {
+        position: relative;
+
+        overflow: hidden;
+
+        height: 23px;
+
+        border-radius: 2px;
+        background: var(--g-color-base-generic);
+    }
+
+    &__container {
+        display: flex;
+
+        padding: 2px 0;
+    }
+
+    &__legend {
+        position: absolute;
+        bottom: 2px;
+
+        width: 20px;
+        height: 20px;
+
+        border-radius: 2px;
+
+        @each $type, $color in $memory-type-colors {
+            &_type_#{$type} {
+                @include memory-type-color($type);
+            }
+        }
+    }
+
+    &__segment {
+        position: absolute;
+
+        height: 100%;
+
+        @each $type, $color in $memory-type-colors {
+            &_type_#{$type} {
+                @include memory-type-color($type);
+            }
+        }
+    }
+
+    &__name {
+        padding-left: 28px;
+    }
+
+    &_theme_dark {
+        color: var(--g-color-text-light-primary);
+
+        #{$block}__segment {
+            opacity: 0.75;
+        }
+    }
+
+    &_status {
+        &_good {
+            #{$block}__progress-container {
+                background-color: var(--g-color-base-positive-light);
+            }
+        }
+        &_warning {
+            #{$block}__progress-container {
+                background-color: var(--g-color-base-yellow-light);
+            }
+        }
+        &_danger {
+            #{$block}__progress-container {
+                background-color: var(--g-color-base-danger-light);
+            }
+        }
+    }
+
+    &_size {
+        height: 20px;
+        @include body-2-typography();
+
+        #{$block}__progress-container {
+            height: inherit;
+        }
+    }
+
+    &__text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

src/components/MemoryViewer/MemoryViewer.tsx

@@ -0,0 +1,149 @@
+import {DefinitionList, useTheme} from '@gravity-ui/uikit';
+
+import type {TMemoryStats} from '../../types/api/nodes';
+import {cn} from '../../utils/cn';
+import {calculateProgressStatus} from '../../utils/progress';
+import {isNumeric} from '../../utils/utils';
+import {HoverPopup} from '../HoverPopup/HoverPopup';
+import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
+
+import {getMemorySegments} from './utils';
+
+import './MemoryViewer.scss';
+
+const b = cn('memory-viewer');
+
+type FormatProgressViewerValues = (
+    value?: number,
+    capacity?: number,
+    precision?: number,
+) => (string | number | undefined)[];
+
+export interface MemoryProgressViewerProps {
+    stats: TMemoryStats;
+    className?: string;
+    warningThreshold?: number;
+    value?: number | string;
+    capacity?: number | string;
+    formatValues: FormatProgressViewerValues;
+    percents?: boolean;
+    dangerThreshold?: number;
+}
+
+const MEMORY_PRECISION = 1;
+
+export function MemoryViewer({
+    stats,
+    value,
+    capacity,
+    percents,
+    formatValues,
+    className,
+    warningThreshold = 60,
+    dangerThreshold = 80,
+}: MemoryProgressViewerProps) {
+    const theme = useTheme();
+    let fillWidth =
+        Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100) || 0;
+    fillWidth = fillWidth > 100 ? 100 : fillWidth;
+    let valueText: number | string | undefined = value,
+        capacityText: number | string | undefined = capacity,
+        divider = '/';
+    if (percents) {
+        valueText = fillWidth + '%';
+        capacityText = '';
+        divider = '';
+    } else if (formatValues) {
+        [valueText, capacityText] = formatValues(Number(value), Number(capacity), MEMORY_PRECISION);
+    }
+
+    const renderContent = () => {
+        if (isNumeric(capacity)) {
+            return `${valueText} ${divider} ${capacityText}`;
+        }
+
+        return valueText;
+    };
+
+    const calculateMemoryShare = (segmentSize: number) => {
+        if (!value) {
+            return 0;
+        }
+        return (segmentSize / parseFloat(String(capacity))) * 100;
+    };
+
+    const memorySegments = getMemorySegments(stats);
+
+    const totalUsedMemory =
+        memorySegments
+            .filter(({isInfo}) => !isInfo)
+            .reduce((acc, segment) => acc + calculateMemoryShare(segment.value), 0) /
+        parseFloat(String(capacity));
+
+    const status = calculateProgressStatus({
+        fillWidth: totalUsedMemory,
+        warningThreshold,
+        dangerThreshold,
+        colorizeProgress: true,
+    });
+
+    let currentPosition = 0;
+
+    return (
+        <HoverPopup
+            popupContent={
+                <DefinitionList responsive>
+                    {memorySegments.map(
+                        ({label, value: segmentSize, capacity: segmentCapacity, key}) => (
+                            <DefinitionList.Item
+                                key={label}
+                                name={
+                                    <div className={b('container')}>
+                                        <div className={b('legend', {type: key})}></div>
+                                        <div className={b('name')}>{label}</div>
+                                    </div>
+                                }
+                            >
+                                {segmentCapacity ? (
+                                    <ProgressViewer
+                                        value={segmentSize}
+                                        capacity={segmentCapacity}
+                                        formatValues={(val, size) =>
+                                            formatValues(val, size, MEMORY_PRECISION)
+                                        }
+                                        colorizeProgress
+                                    />
+                                ) : (
+                                    formatValues(segmentSize, undefined, MEMORY_PRECISION)[0]
+                                )}
+                            </DefinitionList.Item>
+                        ),
+                    )}
+                </DefinitionList>
+            }
+        >
+            <div className={b({theme, status}, className)}>
+                <div className={b('progress-container')}>
+                    {memorySegments
+                        .filter(({isInfo}) => !isInfo)
+                        .map((segment) => {
+                            const position = currentPosition;
+                            currentPosition += calculateMemoryShare(segment.value);
+
+                            return (
+                                <div
+                                    key={segment.key}
+                                    className={b('segment', {type: segment.key})}
+                                    style={{
+                                        width: `${calculateMemoryShare(segment.value).toFixed(2)}%`,
+                                        left: `${position}%`,
+                                    }}
+                                />
+                            );
+                        })}
+                    <div className={b('text')}>{renderContent()}</div>
+                </div>
+            </div>
+        </HoverPopup>
+    );
+}

src/components/MemoryViewer/i18n/en.json

@@ -0,0 +1,12 @@
+{
+  "text_memory-detailed": "Memory Detailed",
+  "text_external-consumption": "External Consumption",
+  "text_allocator-caches": "Allocator Caches",
+  "text_shared-cache": "Shared Cache",
+  "text_memtable": "MemTable",
+  "text_query-execution": "Query Execution",
+  "text_soft-limit": "Soft Limit",
+  "text_hard-limit": "Hard Limit",
+  "text_other": "Other",
+  "memory-detailed": "Memory Detailed"
+}

src/components/MemoryViewer/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-memory-viewer';
+
+export default registerKeysets(COMPONENT, {en});

src/components/MemoryViewer/utils.ts

@@ -0,0 +1,89 @@
+import type {TMemoryStats} from '../../types/api/nodes';
+import {isNumeric} from '../../utils/utils';
+
+import i18n from './i18n';
+
+function getMaybeNumber(value: string | number | undefined): number | undefined {
+    return isNumeric(value) ? parseFloat(String(value)) : undefined;
+}
+
+interface MemorySegment {
+    label: string;
+    key: string;
+    value: number;
+    capacity?: number;
+    isInfo?: boolean;
+}
+
+export function getMemorySegments(stats: TMemoryStats): MemorySegment[] {
+    const segments = [
+        {
+            label: i18n('text_shared-cache'),
+            key: 'SharedCacheConsumption',
+            value: getMaybeNumber(stats.SharedCacheConsumption),
+            capacity: getMaybeNumber(stats.SharedCacheLimit),
+            isInfo: false,
+        },
+        {
+            label: i18n('text_query-execution'),
+            key: 'QueryExecutionConsumption',
+            value: getMaybeNumber(stats.QueryExecutionConsumption),
+            capacity: getMaybeNumber(stats.QueryExecutionLimit),
+            isInfo: false,
+        },
+        {
+            label: i18n('text_memtable'),
+            key: 'MemTableConsumption',
+            value: getMaybeNumber(stats.MemTableConsumption),
+            capacity: getMaybeNumber(stats.MemTableLimit),
+            isInfo: false,
+        },
+        {
+            label: i18n('text_allocator-caches'),
+            key: 'AllocatorCachesMemory',
+            value: getMaybeNumber(stats.AllocatorCachesMemory),
+            isInfo: false,
+        },
+    ];
+
+    const nonInfoSegments = segments.filter(
+        (segment) => segment.value !== undefined,
+    ) as MemorySegment[];
+    const sumNonInfoSegments = nonInfoSegments.reduce((acc, segment) => acc + segment.value, 0);
+
+    const totalMemory = getMaybeNumber(stats.AnonRss);
+
+    if (totalMemory) {
+        const otherMemory = Math.max(0, totalMemory - sumNonInfoSegments);
+
+        segments.push({
+            label: i18n('text_other'),
+            key: 'Other',
+            value: otherMemory,
+            isInfo: false,
+        });
+    }
+
+    segments.push(
+        {
+            label: i18n('text_external-consumption'),
+            key: 'ExternalConsumption',
+            value: getMaybeNumber(stats.ExternalConsumption),
+            isInfo: true,
+        },
+        {
+            label: i18n('text_soft-limit'),
+            key: 'SoftLimit',
+            value: getMaybeNumber(stats.SoftLimit),
+            isInfo: true,
+        },
+        {
+            label: i18n('text_hard-limit'),
+            key: 'HardLimit',
+            value: getMaybeNumber(stats.HardLimit),
+            isInfo: true,
+        },
+    );
+
+    return segments.filter((segment) => segment.value !== undefined) as MemorySegment[];
+}