feat: redesign Memory section (#2627)

Author: astandrik

package-lock.json

@@ -13,7 +13,7 @@
     "@bem-react/classname": "^1.6.0",
     "@ebay/nice-modal-react": "^1.2.13",
     "@gravity-ui/axios-wrapper": "^1.5.1",
-    "@gravity-ui/chartkit": "^7.0.1",
+    "@gravity-ui/chartkit": "^7.1.0",
     "@gravity-ui/components": "^4.4.0",
     "@gravity-ui/date-components": "^3.2.3",
     "@gravity-ui/date-utils": "^2.5.6",

package.json

@@ -1,9 +1,9 @@
 $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-generic-medium-hover),
+    'AllocatorCachesMemory': var(--g-color-base-danger-medium),
+    'SharedCacheConsumption': var(--g-color-base-info-medium),
+    'MemTableConsumption': var(--g-color-base-warning-medium),
+    'QueryExecutionConsumption': var(--g-color-base-positive-medium),
+    'Other': var(--g-color-base-neutral-medium),
 );
 
 @mixin memory-type-color($type) {
@@ -31,8 +31,6 @@ $memory-type-colors: (
     }
 
     &__container {
-        display: flex;
-
         padding: 2px 0;
     }
 
@@ -93,10 +91,4 @@ $memory-type-colors: (
             }
         }
     }
-
-    &__text {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
 }

src/components/MemoryViewer/MemoryViewer.scss

@@ -1,4 +1,4 @@
-import {DefinitionList, useTheme} from '@gravity-ui/uikit';
+import {DefinitionList, Flex, useTheme} from '@gravity-ui/uikit';
 
 import type {TMemoryStats} from '../../types/api/nodes';
 import {formatBytes} from '../../utils/bytesParsers';
@@ -107,10 +107,10 @@ export function MemoryViewer({
                             <DefinitionList.Item
                                 key={label}
                                 name={
-                                    <div className={b('container')}>
+                                    <Flex alignItems="center" gap="1" className={b('container')}>
                                         <div className={b('legend', {type: key})}></div>
                                         <div className={b('name')}>{label}</div>
-                                    </div>
+                                    </Flex>
                                 }
                             >
                                 {segmentCapacity ? (
@@ -161,7 +161,9 @@ export function MemoryViewer({
                                 />
                             );
                         })}
-                    <div className={b('text')}>{renderContent()}</div>
+                    <Flex justifyContent="center" alignItems="center" className={b('text')}>
+                        {renderContent()}
+                    </Flex>
                 </div>
             </div>
         </HoverPopup>

src/components/MemoryViewer/MemoryViewer.tsx

@@ -7,5 +7,6 @@
   "text_usage": "Usage",
   "text_soft-limit": "Soft Limit",
   "text_hard-limit": "Hard Limit",
-  "text_other": "Other"
+  "text_other": "Other",
+  "text_memory-details": "Memory Details"
 }

src/components/MemoryViewer/i18n/en.json

@@ -9,18 +9,31 @@ export function calculateAllocatedMemory(stats: TMemoryStats) {
     return String(allocatedMemory + allocatorCaches);
 }
 
-export function getMaybeNumber(value: string | number | undefined): number | undefined {
+function getMaybeNumber(value: string | number | undefined): number | undefined {
     return isNumeric(value) ? parseFloat(String(value)) : undefined;
 }
 
-interface MemorySegment {
+export interface MemorySegment {
     label: string;
     key: string;
     value: number;
     capacity?: number;
     isInfo?: boolean;
 }
 
+// Memory segment colors using CSS variables for theme support
+export const MEMORY_SEGMENT_COLORS: Record<string, string> = {
+    AllocatorCachesMemory: 'var(--g-color-base-danger-medium)',
+    SharedCacheConsumption: 'var(--g-color-base-info-medium)',
+    MemTableConsumption: 'var(--g-color-base-warning-medium)',
+    QueryExecutionConsumption: 'var(--g-color-base-positive-medium)',
+    Other: 'var(--g-color-base-neutral-medium)',
+};
+
+export function getMemorySegmentColor(key: string): string {
+    return MEMORY_SEGMENT_COLORS[key] || MEMORY_SEGMENT_COLORS['Other'];
+}
+
 export function getMemorySegments(stats: TMemoryStats, memoryUsage: number): MemorySegment[] {
     const segments = [
         {

src/components/MemoryViewer/utils.ts

@@ -0,0 +1,25 @@
+import {Flex, Text} from '@gravity-ui/uikit';
+
+import {getProgressStyle} from './progressUtils';
+import type {ProgressContainerProps} from './types';
+
+export function ProgressContainer({
+    children,
+    displayText,
+    withCapacityUsage = false,
+    className,
+    width,
+}: ProgressContainerProps) {
+    const progressStyle = getProgressStyle(width);
+
+    return (
+        <Flex alignItems="center" gap="2" className={className}>
+            <div style={progressStyle}>{children}</div>
+            {withCapacityUsage && displayText && (
+                <Text variant="body-1" color="secondary">
+                    {displayText}
+                </Text>
+            )}
+        </Flex>
+    );
+}

src/components/ProgressWrapper/ProgressContainer.tsx

@@ -0,0 +1,10 @@
+import {SingleProgress} from './SingleProgress';
+import {StackProgress} from './StackProgress';
+import type {ProgressWrapperProps} from './types';
+
+export function ProgressWrapper(props: ProgressWrapperProps) {
+    if ('stack' in props && props.stack) {
+        return <StackProgress {...props} />;
+    }
+    return <SingleProgress {...props} />;
+}

src/components/ProgressWrapper/ProgressWrapper.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import {Progress} from '@gravity-ui/uikit';
+
+import {defaultFormatProgressValues} from '../../utils/progress';
+import {safeParseNumber} from '../../utils/utils';
+
+import {ProgressContainer} from './ProgressContainer';
+import i18n from './i18n';
+import {
+    PROGRESS_SIZE,
+    calculateProgressWidth,
+    formatDisplayValues,
+    formatProgressText,
+    isValidValue,
+} from './progressUtils';
+import type {ProgressWrapperSingleProps} from './types';
+
+export function SingleProgress({
+    value,
+    capacity,
+    formatValues = defaultFormatProgressValues,
+    className,
+    width,
+    size = PROGRESS_SIZE,
+    withCapacityUsage = false,
+}: ProgressWrapperSingleProps) {
+    if (!isValidValue(value)) {
+        return <div className={className}>{i18n('alert_no-data')}</div>;
+    }
+
+    const numericValue = safeParseNumber(value);
+    const numericCapacity = safeParseNumber(capacity);
+    const clampedFillWidth = calculateProgressWidth(numericValue, numericCapacity);
+
+    const [valueText, capacityText] = React.useMemo(() => {
+        return formatDisplayValues(value, capacity, formatValues);
+    }, [formatValues, value, capacity]);
+
+    const displayText = React.useMemo(() => {
+        return formatProgressText(valueText, capacityText, numericCapacity);
+    }, [valueText, capacityText, numericCapacity]);
+
+    return (
+        <ProgressContainer
+            displayText={displayText}
+            withCapacityUsage={withCapacityUsage}
+            className={className}
+            width={width}
+        >
+            <Progress value={clampedFillWidth} theme="success" size={size} />
+        </ProgressContainer>
+    );
+}

src/components/ProgressWrapper/SingleProgress.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import {Progress} from '@gravity-ui/uikit';
+
+import {defaultFormatProgressValues} from '../../utils/progress';
+import {safeParseNumber} from '../../utils/utils';
+import {getMemorySegmentColor} from '../MemoryViewer/utils';
+
+import {ProgressContainer} from './ProgressContainer';
+import i18n from './i18n';
+import {
+    MAX_PERCENTAGE,
+    PROGRESS_SIZE,
+    formatDisplayValues,
+    formatProgressText,
+} from './progressUtils';
+import type {ProgressWrapperStackProps} from './types';
+
+export function StackProgress({
+    stack,
+    totalCapacity,
+    formatValues = defaultFormatProgressValues,
+    className,
+    width,
+    size = PROGRESS_SIZE,
+    withCapacityUsage = false,
+}: ProgressWrapperStackProps) {
+    const displaySegments = React.useMemo(() => {
+        return stack.filter((segment) => !segment.isInfo && segment.value > 0);
+    }, [stack]);
+
+    if (displaySegments.length === 0) {
+        return <div className={className}>{i18n('alert_no-data')}</div>;
+    }
+
+    const totalValue = React.useMemo(() => {
+        return displaySegments.reduce((sum, segment) => sum + segment.value, 0);
+    }, [displaySegments]);
+
+    const numericTotalCapacity = React.useMemo(() => {
+        return safeParseNumber(totalCapacity);
+    }, [totalCapacity]);
+
+    const maxValue = numericTotalCapacity || totalValue;
+
+    const stackElements = React.useMemo(() => {
+        return displaySegments.map((segment) => ({
+            value: maxValue > 0 ? (segment.value / maxValue) * MAX_PERCENTAGE : 0,
+            color: getMemorySegmentColor(segment.key),
+            title: segment.label,
+        }));
+    }, [displaySegments, maxValue]);
+
+    const [totalValueText, totalCapacityText] = React.useMemo(() => {
+        return formatDisplayValues(totalValue, numericTotalCapacity || totalValue, formatValues);
+    }, [formatValues, totalValue, numericTotalCapacity]);
+
+    const displayText = React.useMemo(() => {
+        return formatProgressText(totalValueText, totalCapacityText, numericTotalCapacity || 0);
+    }, [totalValueText, totalCapacityText, numericTotalCapacity]);
+
+    return (
+        <ProgressContainer
+            displayText={displayText}
+            withCapacityUsage={withCapacityUsage}
+            className={className}
+            width={width}
+        >
+            <Progress value={MAX_PERCENTAGE} stack={stackElements} size={size} />
+        </ProgressContainer>
+    );
+}