feat: redesign Storage section

Author: astandrik

src/components/InfoViewer/InfoViewer.scss

@@ -1,3 +1,5 @@
+@use '../../styles/mixins.scss';
+
 .info-viewer {
     --ydb-info-viewer-font-size: var(--g-text-body-2-font-size);
     --ydb-info-viewer-line-height: var(--g-text-body-2-line-height);
@@ -28,6 +30,10 @@
 
         max-width: 100%;
         padding-top: 4px;
+
+        &:first-child {
+            padding-top: 0;
+        }
     }
 
     &__label {
@@ -88,4 +94,18 @@
             }
         }
     }
+
+    &_variant_small {
+        .info-viewer__title {
+            margin: 0 0 var(--g-spacing-3);
+
+            color: var(--g-color-text-primary);
+            @include mixins.subheader-1-typography();
+        }
+
+        .info-viewer__label {
+            color: var(--g-color-text-secondary);
+            @include mixins.body-1-typography();
+        }
+    }
 }

src/components/InfoViewer/InfoViewer.tsx

@@ -16,6 +16,7 @@ export interface InfoViewerProps {
     info?: InfoViewerItem[];
     dots?: boolean;
     size?: 's';
+    variant?: 'default' | 'small';
     className?: string;
     multilineLabels?: boolean;
     renderEmptyState?: (props?: Pick<InfoViewerProps, 'title' | 'size'>) => React.ReactNode;
@@ -28,6 +29,7 @@ export const InfoViewer = ({
     info,
     dots = true,
     size,
+    variant = 'default',
     className,
     multilineLabels,
     renderEmptyState,
@@ -37,7 +39,7 @@ export const InfoViewer = ({
     }
 
     return (
-        <div className={b({size}, className)}>
+        <div className={b({size, variant}, className)}>
             {title && <div className={b('title')}>{title}</div>}
             {info && info.length > 0 ? (
                 <div className={b('items')}>

src/components/MemoryViewer/MemoryViewer.tsx

@@ -4,10 +4,10 @@ import type {TMemoryStats} from '../../types/api/nodes';
 import {formatBytes} from '../../utils/bytesParsers';
 import {cn} from '../../utils/cn';
 import {GIGABYTE} from '../../utils/constants';
+import type {FormatProgressViewerValues} from '../../utils/progress';
 import {calculateProgressStatus} from '../../utils/progress';
 import {isNumeric} from '../../utils/utils';
 import {HoverPopup} from '../HoverPopup/HoverPopup';
-import type {FormatProgressViewerValues} from '../ProgressViewer/ProgressViewer';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 
 import {calculateAllocatedMemory, getMemorySegments} from './utils';

src/components/ProgressViewer/ProgressViewer.tsx

@@ -1,8 +1,8 @@
 import {useTheme} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
-import {formatNumber, roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
-import {calculateProgressStatus} from '../../utils/progress';
+import {calculateProgressStatus, defaultFormatProgressValues} from '../../utils/progress';
+import type {FormatProgressViewerValues} from '../../utils/progress';
 import {isNumeric} from '../../utils/utils';
 
 import './ProgressViewer.scss';
@@ -11,19 +11,6 @@ const b = cn('progress-viewer');
 
 type ProgressViewerSize = 'xs' | 's' | 'ns' | 'm' | 'n' | 'l' | 'head';
 
-export type FormatProgressViewerValues = (
-    value?: number,
-    capacity?: number,
-) => (string | number | undefined)[];
-
-const formatValue = (value?: number) => {
-    return formatNumber(roundToPrecision(Number(value), 2));
-};
-
-const defaultFormatValues: FormatProgressViewerValues = (value, total) => {
-    return [formatValue(value), formatValue(total)];
-};
-
 /*
 
 Props description:
@@ -56,7 +43,7 @@ export interface ProgressViewerProps {
 export function ProgressViewer({
     value,
     capacity,
-    formatValues = defaultFormatValues,
+    formatValues = defaultFormatProgressValues,
     percents,
     withOverflow,
     className,

src/components/ProgressViewer/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "no-data": "No data"
+}

src/components/ProgressViewer/i18n/index.ts

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

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/useTenantCpuQueryParams.ts

@@ -1,9 +1,9 @@
 import {StringParam, useQueryParams} from 'use-query-params';
 
 import {
-    TENANT_CPU_NODES_MODE_IDS,
-    TENANT_CPU_TABS_IDS,
-} from '../../../../../store/reducers/tenant/constants';
+    tenantCpuTabSchema,
+    tenantNodesModeSchema,
+} from '../../../../../store/reducers/tenant/types';
 import type {TenantCpuTab, TenantNodesMode} from '../../../../../store/reducers/tenant/types';
 
 export function useTenantCpuQueryParams() {
@@ -12,27 +12,8 @@ export function useTenantCpuQueryParams() {
         nodesMode: StringParam,
     });
 
-    // Parse and validate cpuTab with fallback to nodes
-    const cpuTab: TenantCpuTab = (() => {
-        if (!queryParams.cpuTab) {
-            return TENANT_CPU_TABS_IDS.nodes;
-        }
-        const validTabs = Object.values(TENANT_CPU_TABS_IDS) as string[];
-        return validTabs.includes(queryParams.cpuTab)
-            ? (queryParams.cpuTab as TenantCpuTab)
-            : TENANT_CPU_TABS_IDS.nodes;
-    })();
-
-    // Parse and validate nodesMode with fallback to load
-    const nodesMode: TenantNodesMode = (() => {
-        if (!queryParams.nodesMode) {
-            return TENANT_CPU_NODES_MODE_IDS.load;
-        }
-        const validModes = Object.values(TENANT_CPU_NODES_MODE_IDS) as string[];
-        return validModes.includes(queryParams.nodesMode)
-            ? (queryParams.nodesMode as TenantNodesMode)
-            : TENANT_CPU_NODES_MODE_IDS.load;
-    })();
+    const cpuTab: TenantCpuTab = tenantCpuTabSchema.parse(queryParams.cpuTab);
+    const nodesMode: TenantNodesMode = tenantNodesModeSchema.parse(queryParams.nodesMode);
 
     const handleCpuTabChange = (value: TenantCpuTab) => {
         setQueryParams({cpuTab: value}, 'replaceIn');

src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.scss

@@ -1,6 +1,6 @@
 .ydb-tenant-dashboard {
     width: var(--diagnostics-section-table-width);
-    margin-bottom: var(--diagnostics-section-margin);
+    margin-bottom: var(--g-spacing-4);
 
     &__charts {
         display: flex;

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/ProgressWrapper.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import {Flex, Progress, Text} from '@gravity-ui/uikit';
+
+import {defaultFormatProgressValues} from '../../../../../utils/progress';
+import type {FormatProgressViewerValues} from '../../../../../utils/progress';
+import {isNumeric, safeParseNumber} from '../../../../../utils/utils';
+
+import {DEFAULT_PROGRESS_WIDTH, MAX_PERCENTAGE, MIN_PERCENTAGE, PROGRESS_SIZE} from './constants';
+import i18n from './i18n';
+
+interface ProgressWrapperProps {
+    value?: number | string;
+    capacity?: number | string;
+    formatValues?: FormatProgressViewerValues;
+    className?: string;
+    width?: number;
+}
+
+const isValidValue = (val?: number | string): boolean =>
+    isNumeric(val) && safeParseNumber(val) >= 0;
+
+export function ProgressWrapper({
+    value,
+    capacity,
+    formatValues = defaultFormatProgressValues,
+    className,
+    width = DEFAULT_PROGRESS_WIDTH,
+}: ProgressWrapperProps) {
+    if (!isValidValue(value)) {
+        return <div className={className}>{i18n('alert_no-data')}</div>;
+    }
+
+    const numericValue = safeParseNumber(value);
+    const numericCapacity = safeParseNumber(capacity);
+
+    const rawPercentage =
+        numericCapacity > 0
+            ? Math.floor((numericValue / numericCapacity) * MAX_PERCENTAGE)
+            : MAX_PERCENTAGE;
+    const fillWidth = Math.max(MIN_PERCENTAGE, rawPercentage);
+    const clampedFillWidth = Math.min(fillWidth, MAX_PERCENTAGE);
+
+    const [valueText, capacityText] = React.useMemo(() => {
+        return formatValues(Number(value), Number(capacity));
+    }, [formatValues, value, capacity]);
+
+    const displayText = React.useMemo(() => {
+        if (numericCapacity <= 0) {
+            return String(valueText);
+        }
+        return i18n('context_capacity-usage', {value: valueText, capacity: capacityText});
+    }, [valueText, capacityText, numericCapacity]);
+
+    const validatedWidth = Math.max(0, width);
+
+    return (
+        <Flex alignItems="center" gap="2" className={className}>
+            <div style={{width: `${validatedWidth}px`}}>
+                <Progress value={clampedFillWidth} theme="success" size={PROGRESS_SIZE} />
+            </div>
+            <Text variant="body-1" color="secondary">
+                {displayText}
+            </Text>
+        </Flex>
+    );
+}

src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.scss

@@ -0,0 +1,9 @@
+.tenant-storage {
+    &__tabs-container {
+        margin-top: var(--g-spacing-3);
+    }
+
+    &__tab-content {
+        margin-top: var(--g-spacing-3);
+    }
+}