feat: redesign Memory section

Author: astandrik

src/components/MemoryViewer/MemoryViewer.scss

@@ -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),
+    'SharedCacheConsumption': var(--g-color-base-info-medium),
+    'QueryExecutionConsumption': var(--g-color-base-positive-medium),
+    'MemTableConsumption': var(--g-color-base-warning-medium),
+    'AllocatorCachesMemory': var(--g-color-base-danger-medium),
+    'Other': var(--g-color-base-neutral-medium),
 );
 
 @mixin memory-type-color($type) {

src/components/MemoryViewer/i18n/en.json

@@ -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/utils.ts

@@ -13,14 +13,27 @@ export function getMaybeNumber(value: string | number | undefined): number | und
     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> = {
+    SharedCacheConsumption: 'var(--g-color-base-info-medium)',
+    QueryExecutionConsumption: 'var(--g-color-base-positive-medium)',
+    MemTableConsumption: 'var(--g-color-base-warning-medium)',
+    AllocatorCachesMemory: 'var(--g-color-base-danger-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/ProgressWrapper/ProgressContainer.tsx

@@ -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,
+    withValue = false,
+    className,
+    width,
+}: ProgressContainerProps) {
+    const progressStyle = getProgressStyle(width);
+
+    return (
+        <Flex alignItems="center" gap="2" className={className}>
+            <div style={progressStyle}>{children}</div>
+            {withValue && displayText && (
+                <Text variant="body-1" color="secondary">
+                    {displayText}
+                </Text>
+            )}
+        </Flex>
+    );
+}

src/components/ProgressWrapper/ProgressWrapper.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/SingleProgress.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,
+    withValue = 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}
+            withValue={withValue}
+            className={className}
+            width={width}
+        >
+            <Progress value={clampedFillWidth} theme="success" size={size} />
+        </ProgressContainer>
+    );
+}

src/components/ProgressWrapper/StackProgress.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,
+    withValue = 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}
+            withValue={withValue}
+            className={className}
+            width={width}
+        >
+            <Progress value={MAX_PERCENTAGE} stack={stackElements} size={size} />
+        </ProgressContainer>
+    );
+}

src/components/ProgressWrapper/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "alert_no-data": "no data",
+  "context_capacity-usage": "{{value}} of {{capacity}}"
+}

src/components/ProgressWrapper/i18n/index.ts

@@ -0,0 +1,11 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'progress-wrapper';
+
+const keysets = {
+    en,
+};
+
+export default registerKeysets(COMPONENT, keysets);

src/components/ProgressWrapper/index.ts

@@ -0,0 +1,18 @@
+// Main component - public API
+export {ProgressWrapper} from './ProgressWrapper';
+
+// Individual components - for direct usage if needed
+export {SingleProgress} from './SingleProgress';
+export {StackProgress} from './StackProgress';
+export {ProgressContainer} from './ProgressContainer';
+
+// Types - for consumers
+export type {
+    ProgressWrapperProps,
+    ProgressWrapperSingleProps,
+    ProgressWrapperStackProps,
+    ProgressContainerProps,
+} from './types';
+
+// Utils - for advanced usage
+export * from './progressUtils';