fix: review fixes

astandrik · astandrik · commit f457e905f374 · 2025-07-28T16:22:20.000+03:00
diff --git a/src/components/MemoryViewer/MemoryViewer.scss b/src/components/MemoryViewer/MemoryViewer.scss
@@ -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;
-    }
 }
diff --git a/src/components/MemoryViewer/MemoryViewer.tsx b/src/components/MemoryViewer/MemoryViewer.tsx
@@ -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">
+                        {renderContent()}
+                    </Flex>
                 </div>
             </div>
         </HoverPopup>
diff --git a/src/components/ProgressWrapper/ProgressContainer.tsx b/src/components/ProgressWrapper/ProgressContainer.tsx
@@ -6,7 +6,7 @@ import type {ProgressContainerProps} from './types';
 export function ProgressContainer({
     children,
     displayText,
-    withValue = false,
+    withCapacityUsage = false,
     className,
     width,
 }: ProgressContainerProps) {
@@ -15,7 +15,7 @@ export function ProgressContainer({
     return (
         <Flex alignItems="center" gap="2" className={className}>
             <div style={progressStyle}>{children}</div>
-            {withValue && displayText && (
+            {withCapacityUsage && displayText && (
                 <Text variant="body-1" color="secondary">
                     {displayText}
                 </Text>
diff --git a/src/components/ProgressWrapper/SingleProgress.tsx b/src/components/ProgressWrapper/SingleProgress.tsx
@@ -23,7 +23,7 @@ export function SingleProgress({
     className,
     width,
     size = PROGRESS_SIZE,
-    withValue = false,
+    withCapacityUsage = false,
 }: ProgressWrapperSingleProps) {
     if (!isValidValue(value)) {
         return <div className={className}>{i18n('alert_no-data')}</div>;
@@ -44,7 +44,7 @@ export function SingleProgress({
     return (
         <ProgressContainer
             displayText={displayText}
-            withValue={withValue}
+            withCapacityUsage={withCapacityUsage}
             className={className}
             width={width}
         >
diff --git a/src/components/ProgressWrapper/StackProgress.tsx b/src/components/ProgressWrapper/StackProgress.tsx
@@ -23,7 +23,7 @@ export function StackProgress({
     className,
     width,
     size = PROGRESS_SIZE,
-    withValue = false,
+    withCapacityUsage = false,
 }: ProgressWrapperStackProps) {
     const displaySegments = React.useMemo(() => {
         return stack.filter((segment) => !segment.isInfo && segment.value > 0);
@@ -62,7 +62,7 @@ export function StackProgress({
     return (
         <ProgressContainer
             displayText={displayText}
-            withValue={withValue}
+            withCapacityUsage={withCapacityUsage}
             className={className}
             width={width}
         >
diff --git a/src/components/ProgressWrapper/types.ts b/src/components/ProgressWrapper/types.ts
@@ -8,7 +8,7 @@ export interface ProgressWrapperBaseProps {
     className?: string;
     width?: number | 'full';
     size?: ProgressSize;
-    withValue?: boolean;
+    withCapacityUsage?: boolean;
 }
 
 export interface ProgressWrapperSingleProps extends ProgressWrapperBaseProps {
@@ -29,7 +29,7 @@ export type ProgressWrapperProps = ProgressWrapperSingleProps | ProgressWrapperS
 export interface ProgressContainerProps {
     children: React.ReactNode;
     displayText?: string;
-    withValue?: boolean;
+    withCapacityUsage?: boolean;
     className?: string;
     width?: number | 'full';
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryDetailsSection.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryDetailsSection.scss
@@ -1,12 +1,6 @@
 @use '../../../../../styles/mixins.scss';
 
 .memory-details {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    align-self: stretch;
-    gap: var(--g-spacing-3);
-
     &__header {
         align-self: stretch;
     }
@@ -16,14 +10,6 @@
         @include mixins.subheader-1-typography();
     }
 
-    &__content {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        align-self: stretch;
-        gap: var(--g-spacing-4);
-    }
-
     &__main-progress {
         align-self: stretch;
     }
@@ -33,22 +19,9 @@
     }
 
     &__segments-container {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        align-self: stretch;
-        gap: var(--g-spacing-2);
-
         margin-bottom: var(--g-spacing-4);
     }
 
-    &__segment-row {
-        display: flex;
-        align-items: center;
-        align-self: stretch;
-        gap: var(--g-spacing-1);
-    }
-
     &__segment-indicator {
         flex-shrink: 0;
 
@@ -72,12 +45,6 @@
         height: 10px;
     }
 
-    &__popup-container {
-        display: flex;
-        align-items: center;
-        gap: var(--g-spacing-2);
-    }
-
     &__popup-legend {
         flex-shrink: 0;
 
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryDetailsSection.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryDetailsSection.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Text} from '@gravity-ui/uikit';
+import {Flex, Text} from '@gravity-ui/uikit';
 
 import i18n from '../../../../../components/MemoryViewer/i18n';
 import {getMemorySegments} from '../../../../../components/MemoryViewer/utils';
@@ -57,13 +57,13 @@ export function MemoryDetailsSection({memoryStats}: MemoryDetailsSectionProps) {
     }, []);
 
     return (
-        <div className={b()}>
+        <Flex direction="column" alignItems="flex-start" gap="3">
             <div className={b('header')}>
                 <Text variant="body-1" className={b('title')}>
                     {i18n('text_memory-details')}
                 </Text>
             </div>
-            <div className={b('content')}>
+            <Flex direction="column" alignItems="flex-start" gap="4">
                 <div className={b('main-progress')}>
                     <ProgressWrapper
                         stack={memorySegments}
@@ -74,12 +74,17 @@ export function MemoryDetailsSection({memoryStats}: MemoryDetailsSectionProps) {
                         width="full"
                     />
                 </div>
-                <div className={b('segments-container')}>
+                <Flex
+                    direction="column"
+                    alignItems="flex-start"
+                    gap="2"
+                    className={b('segments-container')}
+                >
                     {displaySegments.map((segment) => (
                         <MemorySegmentItem key={segment.key} segment={segment} />
                     ))}
-                </div>
-            </div>
-        </div>
+                </Flex>
+            </Flex>
+        </Flex>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryProgressBar.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryProgressBar.scss
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryProgressBar.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryProgressBar.tsx
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemorySegmentItem.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemorySegmentItem.tsx
@@ -33,7 +33,7 @@ export function MemorySegmentItem({segment}: MemorySegmentItemProps) {
     }, [segmentColor]);
 
     return (
-        <div className={b('segment-row')}>
+        <Flex alignItems="center" gap="1">
             <div className={b('segment-indicator')} style={{backgroundColor: segmentColor}} />
             <DefinitionList nameMaxWidth={200} className={b('segment-definition-list')}>
                 <DefinitionList.Item
@@ -59,6 +59,6 @@ export function MemorySegmentItem({segment}: MemorySegmentItemProps) {
                     </Flex>
                 </DefinitionList.Item>
             </DefinitionList>
-        </div>
+        </Flex>
     );
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx
@@ -1,12 +1,12 @@
 import {InfoViewer} from '../../../../../components/InfoViewer/InfoViewer';
+import {ProgressWrapper} from '../../../../../components/ProgressWrapper';
 import type {TMemoryStats} from '../../../../../types/api/nodes';
 import {cn} from '../../../../../utils/cn';
 import {formatStorageValuesToGb} from '../../../../../utils/dataFormatters/dataFormatters';
 import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
 import i18n from '../i18n';
 
 import {MemoryDetailsSection} from './MemoryDetailsSection';
-import {MemoryProgressBar} from './MemoryProgressBar';
 import {TopNodesByMemory} from './TopNodesByMemory';
 import {memoryDashboardConfig} from './memoryDashboardConfig';
 
@@ -41,22 +41,17 @@ export function TenantMemory({
                     {
                         label: i18n('field_memory-usage'),
                         value: (
-                            <div>
-                                <MemoryProgressBar
-                                    memoryUsed={memoryUsed}
-                                    memoryLimit={memoryLimit}
-                                />
-                                {memoryUsed && memoryLimit && (
-                                    <div className={b('value-text')}>
-                                        {i18n('context_capacity-usage', {
-                                            value: formatStorageValuesToGb(Number(memoryUsed))[0],
-                                            capacity: formatStorageValuesToGb(
-                                                Number(memoryLimit),
-                                            )[0],
-                                        })}
-                                    </div>
-                                )}
-                            </div>
+                            <ProgressWrapper
+                                value={memoryUsed}
+                                capacity={memoryLimit}
+                                formatValues={(value, total) => [
+                                    formatStorageValuesToGb(Number(value))[0],
+                                    formatStorageValuesToGb(Number(total))[0],
+                                ]}
+                                withCapacityUsage
+                                size="m"
+                                width="full"
+                            />
                         ),
                     },
                 ]}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.tsx

Original file line number	Diff line number	Diff line change
`@@ -31,8 +31,6 @@ $memory-type-colors: (`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`&__container {`
`34`		`- display: flex;`
`35`		`-`
`36`	`34`	`padding: 2px 0;`
`37`	`35`	`}`
`38`	`36`
`@@ -93,10 +91,4 @@ $memory-type-colors: (`
`93`	`91`	`}`
`94`	`92`	`}`
`95`	`93`	`}`
`96`		`-`
`97`		`- &__text {`
`98`		`- display: flex;`
`99`		`- justify-content: center;`
`100`		`- align-items: center;`
`101`		`- }`
`102`	`94`	`}`