fix: refactor

Author: astandrik

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, i18n);
+    }, [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,67 @@
+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 = stack.filter((segment) => !segment.isInfo && segment.value > 0);
+
+    if (displaySegments.length === 0) {
+        return <div className={className}>{i18n('alert_no-data')}</div>;
+    }
+
+    const totalValue = displaySegments.reduce((sum, segment) => sum + segment.value, 0);
+    const numericTotalCapacity = safeParseNumber(totalCapacity);
+    const maxValue = numericTotalCapacity || totalValue;
+
+    const stackElements = displaySegments.map((segment) => ({
+        value: maxValue > 0 ? (segment.value / maxValue) * MAX_PERCENTAGE : 0,
+        color: getMemorySegmentColor(segment.key),
+        title: segment.label,
+    }));
+
+    const [totalValueText, totalCapacityText] = React.useMemo(() => {
+        return formatDisplayValues(totalValue, numericTotalCapacity || totalValue, formatValues);
+    }, [formatValues, totalValue, numericTotalCapacity]);
+
+    const displayText = React.useMemo(() => {
+        return formatProgressText(
+            totalValueText,
+            totalCapacityText,
+            numericTotalCapacity || 0,
+            i18n,
+        );
+    }, [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';

src/components/ProgressWrapper/progressUtils.ts

@@ -0,0 +1,52 @@
+import type {FormatProgressViewerValues} from '../../utils/progress';
+import {isNumeric, safeParseNumber} from '../../utils/utils';
+
+// Constants that were previously in TenantStorage/constants
+export const DEFAULT_PROGRESS_WIDTH = 400;
+export const MAX_PERCENTAGE = 100;
+export const MIN_PERCENTAGE = 0;
+export const PROGRESS_SIZE = 's';
+
+export const isValidValue = (val?: number | string): boolean =>
+    isNumeric(val) && safeParseNumber(val) >= 0;
+
+export function calculateProgressWidth(value: number, capacity: number): number {
+    const rawPercentage =
+        capacity > 0 ? Math.floor((value / capacity) * MAX_PERCENTAGE) : MAX_PERCENTAGE;
+    const fillWidth = Math.max(MIN_PERCENTAGE, rawPercentage);
+    return Math.min(fillWidth, MAX_PERCENTAGE);
+}
+
+export function getProgressStyle(width?: number | 'full') {
+    const isFullWidth = width === 'full';
+    const validatedWidth = isFullWidth ? 0 : Math.max(0, width || DEFAULT_PROGRESS_WIDTH);
+
+    return {
+        width: isFullWidth ? '100%' : `${validatedWidth}px`,
+        flex: isFullWidth ? '1' : 'none',
+    };
+}
+
+export function formatProgressText(
+    valueText: string | number | undefined,
+    capacityText: string | number | undefined,
+    numericCapacity: number,
+    i18n: any,
+): string {
+    if (numericCapacity <= 0) {
+        return String(valueText);
+    }
+    return i18n('context_capacity-usage', {value: valueText, capacity: capacityText});
+}
+
+export function formatDisplayValues(
+    value: number | string | undefined,
+    capacity: number | string | undefined,
+    formatValues?: FormatProgressViewerValues,
+): [string | number | undefined, string | number | undefined] {
+    if (formatValues) {
+        const result = formatValues(Number(value), Number(capacity));
+        return [result[0], result[1]] as [string | number | undefined, string | number | undefined];
+    }
+    return [value, capacity];
+}

src/components/ProgressWrapper/types.ts

@@ -0,0 +1,35 @@
+import type {ProgressSize} from '@gravity-ui/uikit';
+
+import type {FormatProgressViewerValues} from '../../utils/progress';
+import type {MemorySegment} from '../MemoryViewer/utils';
+
+export interface ProgressWrapperBaseProps {
+    formatValues?: FormatProgressViewerValues;
+    className?: string;
+    width?: number | 'full';
+    size?: ProgressSize;
+    withValue?: boolean;
+}
+
+export interface ProgressWrapperSingleProps extends ProgressWrapperBaseProps {
+    value?: number | string;
+    capacity?: number | string;
+    stack?: never;
+}
+
+export interface ProgressWrapperStackProps extends ProgressWrapperBaseProps {
+    stack: MemorySegment[];
+    totalCapacity?: number | string;
+    value?: never;
+    capacity?: never;
+}
+
+export type ProgressWrapperProps = ProgressWrapperSingleProps | ProgressWrapperStackProps;
+
+export interface ProgressContainerProps {
+    children: React.ReactNode;
+    displayText?: string;
+    withValue?: boolean;
+    className?: string;
+    width?: number | 'full';
+}

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

@@ -2,10 +2,10 @@ import {Text} from '@gravity-ui/uikit';
 
 import i18n from '../../../../../components/MemoryViewer/i18n';
 import {getMemorySegments} from '../../../../../components/MemoryViewer/utils';
+import {ProgressWrapper} from '../../../../../components/ProgressWrapper';
 import type {TMemoryStats} from '../../../../../types/api/nodes';
 import {formatBytes} from '../../../../../utils/bytesParsers';
 import {cn} from '../../../../../utils/cn';
-import {ProgressWrapper} from '../TenantStorage/ProgressWrapper';
 
 import {MemorySegmentItem} from './MemorySegmentItem';