fix: memory fixes

Author: astandrik

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

@@ -18,7 +18,8 @@
         height: 20px;
     }
 
-    &__segments-container {
+    &__memory-segments-list {
+        --g-definition-list-item-gap: var(--g-spacing-2);
         margin-bottom: var(--g-spacing-4);
     }
 
@@ -31,10 +32,6 @@
         border-radius: 50%;
     }
 
-    &__segment-definition-list {
-        flex: 1;
-    }
-
     &__segment-progress {
         flex-shrink: 0;
 

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

@@ -2,15 +2,15 @@ import React from 'react';
 
 import {Flex, Text} from '@gravity-ui/uikit';
 
-import i18n from '../../../../../components/MemoryViewer/i18n';
+import memoryI18n from '../../../../../components/MemoryViewer/i18n';
 import {getMemorySegments} from '../../../../../components/MemoryViewer/utils';
 import {ProgressWrapper} from '../../../../../components/ProgressWrapper';
 import type {TMemoryStats} from '../../../../../types/api/nodes';
 import {cn} from '../../../../../utils/cn';
 import {formatStorageValuesToGb} from '../../../../../utils/dataFormatters/dataFormatters';
 import {safeParseNumber} from '../../../../../utils/utils';
 
-import {MemorySegmentItem} from './MemorySegmentItem';
+import {MemorySegmentsList} from './MemorySegmentsList';
 
 import './MemoryDetailsSection.scss';
 
@@ -48,7 +48,7 @@ export function MemoryDetailsSection({memoryStats}: MemoryDetailsSectionProps) {
         <Flex direction="column" alignItems="flex-start" gap="3">
             <div className={b('header')}>
                 <Text variant="body-1" className={b('title')}>
-                    {i18n('text_memory-details')}
+                    {memoryI18n('text_memory-details')}
                 </Text>
             </div>
             <Flex direction="column" alignItems="flex-start" gap="4" width="100%">
@@ -62,16 +62,10 @@ export function MemoryDetailsSection({memoryStats}: MemoryDetailsSectionProps) {
                         width="full"
                     />
                 </div>
-                <Flex
-                    direction="column"
-                    alignItems="flex-start"
-                    gap="2"
-                    className={b('segments-container')}
-                >
-                    {displaySegments.map((segment) => (
-                        <MemorySegmentItem key={segment.key} segment={segment} />
-                    ))}
-                </Flex>
+                <MemorySegmentsList
+                    segments={displaySegments}
+                    className={b('memory-segments-list')}
+                />
             </Flex>
         </Flex>
     );

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

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import {DefinitionList, Flex, Progress, Text} from '@gravity-ui/uikit';
+
+import type {MemorySegment} from '../../../../../components/MemoryViewer/utils';
+import {getMemorySegmentColor} from '../../../../../components/MemoryViewer/utils';
+import progressI18n from '../../../../../components/ProgressWrapper/i18n';
+import {cn} from '../../../../../utils/cn';
+import {formatStorageValuesToGb} from '../../../../../utils/dataFormatters/dataFormatters';
+
+const b = cn('memory-details');
+
+interface MemorySegmentsListProps {
+    segments: MemorySegment[];
+    className?: string;
+}
+
+export function MemorySegmentsList({segments, className}: MemorySegmentsListProps) {
+    // TODO: Stretch content https://github.com/gravity-ui/uikit/issues/2353
+    return (
+        <DefinitionList nameMaxWidth={200} responsive className={className}>
+            {segments.map((segment) => {
+                const segmentColor = getMemorySegmentColor(segment.key);
+                const [valueFormatted, capacityFormatted] = formatStorageValuesToGb(
+                    segment.value,
+                    segment.capacity,
+                );
+                const valueText = segment.capacity
+                    ? progressI18n('context_capacity-usage', {
+                          value: valueFormatted,
+                          capacity: capacityFormatted,
+                      })
+                    : valueFormatted;
+                const progressValue = segment.capacity
+                    ? (segment.value / segment.capacity) * 100
+                    : 100;
+                const progressStyle: React.CSSProperties & Record<string, string> = {
+                    '--g-progress-filled-background-color': segmentColor,
+                };
+
+                return (
+                    <DefinitionList.Item
+                        key={segment.key}
+                        name={
+                            <Flex alignItems="center" gap="1">
+                                <div
+                                    className={b('segment-indicator')}
+                                    style={{backgroundColor: segmentColor}}
+                                />
+                                <Text variant="body-1" color="secondary">
+                                    {segment.label}
+                                </Text>
+                            </Flex>
+                        }
+                    >
+                        <Flex alignItems="center" gap="3">
+                            <div className={b('segment-progress')}>
+                                <div style={progressStyle}>
+                                    <Progress
+                                        value={progressValue}
+                                        size="s"
+                                        className={b('progress-bar')}
+                                    />
+                                </div>
+                            </div>
+                            <Text variant="body-1" color="secondary">
+                                {valueText}
+                            </Text>
+                        </Flex>
+                    </DefinitionList.Item>
+                );
+            })}
+        </DefinitionList>
+    );
+}