feat: better code

Author: astandrik

src/components/MemoryViewer/MemoryViewer.scss

@@ -5,27 +5,31 @@
 
     position: relative;
     z-index: 0;
+
     min-width: 150px;
     padding: 0 4px;
 
     &__progress-container {
         position: relative;
+
+        overflow: hidden;
+
         height: 23px;
+
         border-radius: 2px;
         background: var(--g-color-base-generic);
-        overflow: hidden;
     }
 
     &__container {
         display: flex;
         align-items: end;
+
         text-align: end;
     }
 
     &__legend {
         width: 20px;
         height: 20px;
-
         margin-right: 4px;
 
         &_type_ExternalConsumption {
@@ -51,6 +55,7 @@
 
     &__segment {
         position: absolute;
+
         height: 100%;
 
         &_type_ExternalConsumption {
@@ -78,22 +83,27 @@
         display: flex;
         flex-wrap: wrap;
         gap: 12px;
+
         margin-top: 8px;
+
         color: var(--g-color-text-complementary);
     }
 
     &__legend-item {
         display: flex;
         align-items: center;
         gap: 4px;
+
         white-space: nowrap;
     }
 
     &__legend-color {
+        flex-shrink: 0;
+
         width: 12px;
         height: 12px;
+
         border-radius: 2px;
-        flex-shrink: 0;
     }
 
     &_theme_dark {
@@ -123,45 +133,8 @@
     }
 
     &_size {
-        &_xs {
-            height: 20px;
-            @include body-2-typography();
-        }
-
-        &_s {
-            height: 28px;
-            font-size: var(--g-text-body-1-font-size);
-            line-height: 28px;
-        }
-
-        &_m {
-            height: 32px;
-            font-size: var(--g-text-body-2-font-size);
-            line-height: 32px;
-        }
-
-        &_ns {
-            height: 24px;
-            font-size: 13px;
-            line-height: var(--g-text-subheader-3-line-height);
-        }
-
-        &_n {
-            height: 36px;
-            font-size: var(--g-text-body-1-font-size);
-            line-height: 36px;
-        }
-
-        &_l {
-            height: 38px;
-            font-size: var(--g-text-subheader-3-font-size);
-            line-height: 38px;
-        }
-
-        &_head {
-            font-size: var(--g-text-body-1-font-size);
-            line-height: 36px;
-        }
+        height: 20px;
+        @include body-2-typography();
 
         #{$block}__progress-container {
             height: inherit;
@@ -170,26 +143,7 @@
 
     &__text {
         display: flex;
-        align-items: center;
         justify-content: center;
-    }
-
-    &__memory-segment {
-        display: flex;
         align-items: center;
-
-        width: 280px;
-    }
-
-    &__hard-limit {
-        position: absolute;
-        height: 100%;
-        background-color: var(--g-color-base-danger-medium);
-    }
-
-    &__soft-limit {
-        position: absolute;
-        height: 100%;
-        background-color: var(--g-color-base-warning-medium);
     }
 }

src/components/MemoryViewer/MemoryViewer.tsx

@@ -1,16 +1,13 @@
-import React from 'react';
-
 import {DefinitionList, useTheme} from '@gravity-ui/uikit';
 
 import type {TMemoryStats} from '../../types/api/nodes';
 import {cn} from '../../utils/cn';
-import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
 import {calculateProgressStatus} from '../../utils/progress';
-import {UNBREAKABLE_GAP, isNumeric} from '../../utils/utils';
+import {isNumeric} from '../../utils/utils';
 import {HoverPopup} from '../HoverPopup/HoverPopup';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 
-import i18n from './i18n';
+import {getMemorySegments} from './utils';
 
 import './MemoryViewer.scss';
 
@@ -21,25 +18,13 @@ type FormatProgressViewerValues = (
     capacity?: number,
 ) => (string | number | undefined)[];
 
-const formatValue2 = (value?: number) => {
-    return formatNumber(roundToPrecision(Number(value), 2));
-};
-
-const defaultFormatValues: FormatProgressViewerValues = (value, total) => {
-    return [formatValue2(value), formatValue2(total)];
-};
-
-type ProgressViewerSize = 'xs' | 's' | 'ns' | 'm' | 'n' | 'l' | 'head';
-
 export interface MemoryProgressViewerProps {
-    stats?: TMemoryStats;
-    totalCapacity: number;
+    stats: TMemoryStats;
     className?: string;
-    size?: ProgressViewerSize;
     warningThreshold?: number;
     value?: number | string;
     capacity?: number | string;
-    formatValues?: FormatProgressViewerValues;
+    formatValues: FormatProgressViewerValues;
     percents?: boolean;
     dangerThreshold?: number;
 }
@@ -49,10 +34,8 @@ export function MemoryViewer({
     value,
     capacity,
     percents,
-    formatValues = defaultFormatValues,
-    totalCapacity,
+    formatValues,
     className,
-    size = 'xs',
     warningThreshold = 60,
     dangerThreshold = 80,
 }: MemoryProgressViewerProps) {
@@ -80,49 +63,20 @@ export function MemoryViewer({
         return valueText;
     };
 
-    const calculateMemoryPercentage = (value: number) => {
+    const calculateMemoryShare = (segmentSize: number) => {
         if (!value) {
             return 0;
         }
-        return parseFloat(((value / parseFloat(String(capacity))) * 100).toFixed(2));
+        return (segmentSize / parseFloat(String(capacity))) * 100;
     };
 
-    const memorySegments = [
-        {
-            label: i18n('text_external-consumption'),
-            key: 'ExternalConsumption',
-            value: parseFloat(stats?.ExternalConsumption || '0'),
-        },
-        {
-            label: i18n('text_allocator-caches'),
-            key: 'AllocatorCachesMemory',
-            value: parseFloat(stats?.AllocatorCachesMemory || '0'),
-        },
-        {
-            label: i18n('text_shared-cache'),
-            key: 'SharedCacheConsumption',
-            value: parseFloat(stats?.SharedCacheConsumption || '0'),
-            capacity: stats?.SharedCacheLimit,
-        },
-        {
-            label: i18n('text_memtable'),
-            key: 'MemTableConsumption',
-            value: parseFloat(stats?.MemTableConsumption || '0'),
-            capacity: stats?.MemTableLimit,
-        },
-        {
-            label: i18n('text_query-execution'),
-            key: 'QueryExecutionConsumption',
-            value: parseFloat(stats?.QueryExecutionConsumption || '0'),
-            capacity: stats?.QueryExecutionLimit,
-        },
-    ];
-
-    console.log(memorySegments);
+    const memorySegments = getMemorySegments(stats);
 
     const totalUsedMemory =
-        memorySegments.reduce((acc, segment) => acc + calculateMemoryPercentage(segment.value), 0) /
-        totalCapacity;
+        memorySegments
+            .filter(({isInfo}) => !isInfo)
+            .reduce((acc, segment) => acc + calculateMemoryShare(segment.value), 0) /
+        parseFloat(String(capacity));
 
     const status = calculateProgressStatus({
         fillWidth: totalUsedMemory,
@@ -137,9 +91,8 @@ export function MemoryViewer({
         <HoverPopup
             popupContent={
                 <DefinitionList responsive>
-                    {memorySegments
-                        .filter(({value}) => value)
-                        .map(({label, value, capacity, key}) => (
+                    {memorySegments.map(
+                        ({label, value: segmentSize, capacity: segmentCapacity, key}) => (
                             <DefinitionList.Item
                                 key={label}
                                 name={
@@ -149,67 +102,41 @@ export function MemoryViewer({
                                     </div>
                                 }
                             >
-                                <div className={b('memory-segment')}>
-                                    {capacity ? (
-                                        <React.Fragment>
-                                            <ProgressViewer
-                                                value={value}
-                                                capacity={capacity}
-                                                formatValues={formatValues}
-                                                colorizeProgress
-                                                percents
-                                            />
-                                            {UNBREAKABLE_GAP}
-                                        </React.Fragment>
-                                    ) : null}
-                                    <div className={b('memory-segment-percentage')}>
-                                        {formatValues(value, value)[1]}
-                                    </div>
-                                    {UNBREAKABLE_GAP + '/' + UNBREAKABLE_GAP}
-                                    <div className={b('memory-segment-percentage')}>
-                                        {calculateMemoryPercentage(value)}% total
-                                    </div>
-                                </div>
+                                {segmentCapacity ? (
+                                    <ProgressViewer
+                                        value={segmentSize}
+                                        capacity={segmentCapacity}
+                                        formatValues={formatValues}
+                                        colorizeProgress
+                                    />
+                                ) : (
+                                    formatValues(segmentSize)[0]
+                                )}
                             </DefinitionList.Item>
-                        ))}
+                        ),
+                    )}
                 </DefinitionList>
             }
         >
-            <div className={b({size, theme, status}, className)}>
+            <div className={b({theme, status}, className)}>
                 <div className={b('progress-container')}>
-                    {memorySegments.map((segment) => {
-                        const position = currentPosition;
-                        currentPosition += calculateMemoryPercentage(segment.value);
-
-                        return (
-                            <div
-                                key={segment.key}
-                                className={b('segment', {type: segment.key})}
-                                style={{
-                                    width: `${calculateMemoryPercentage(segment.value)}%`,
-                                    left: `${position}%`,
-                                }}
-                            />
-                        );
-                    })}
-                    {stats?.SoftLimit ? (
-                        <div
-                            className={b('soft-limit')}
-                            style={{
-                                width: '2px',
-                                left: `${calculateMemoryPercentage(parseFloat(stats?.SoftLimit))}%`,
-                            }}
-                        />
-                    ) : null}
-                    {stats?.HardLimit ? (
-                        <div
-                            className={b('hard-limit')}
-                            style={{
-                                width: '2px',
-                                left: `${calculateMemoryPercentage(parseFloat(stats?.HardLimit))}%`,
-                            }}
-                        />
-                    ) : null}
+                    {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>

src/components/MemoryViewer/i18n/en.json

@@ -5,5 +5,7 @@
   "text_shared-cache": "Shared Cache",
   "text_memtable": "MemTable",
   "text_query-execution": "Query Execution",
+  "text_soft-limit": "Soft Limit",
+  "text_hard-limit": "Hard Limit",
   "memory-detailed": "Memory Detailed"
 }