fix: better code

astandrik · astandrik · commit 1ffd9e762330 · 2025-07-21T18:38:22.000+03:00
diff --git a/src/containers/Cluster/ClusterOverview/components/ClusterMetricsCores.tsx b/src/containers/Cluster/ClusterOverview/components/ClusterMetricsCores.tsx
@@ -1,5 +1,5 @@
 import {DoughnutMetrics} from '../../../../components/DoughnutMetrics/DoughnutMetrics';
-import {formatNumber, formatNumericValues} from '../../../../utils/dataFormatters/dataFormatters';
+import {formatCoresLegend} from '../../../../utils/metrics/formatMetricLegend';
 import i18n from '../../i18n';
 import type {ClusterMetricsCommonProps} from '../shared';
 import {getDiagramValues} from '../utils';
@@ -8,16 +8,6 @@ import {ClusterMetricsCardContent} from './ClusterMetricsCard';
 
 interface ClusterMetricsCoresProps extends ClusterMetricsCommonProps {}
 
-function formatCoresLegend({value, capacity}: {value: number; capacity: number}) {
-    let formatted = [];
-    if (capacity < 10_000) {
-        formatted = [formatNumber(Math.round(value)), formatNumber(Math.round(capacity))];
-    } else {
-        formatted = formatNumericValues(value, capacity, undefined, '', true);
-    }
-    return `${formatted[0]} ${i18n('context_of')} ${formatted[1]} ${i18n('context_cores')}`;
-}
-
 export function ClusterMetricsCores({
     collapsed,
     value,
diff --git a/src/containers/Cluster/ClusterOverview/components/ClusterMetricsMemory.tsx b/src/containers/Cluster/ClusterOverview/components/ClusterMetricsMemory.tsx
@@ -1,5 +1,5 @@
 import {DoughnutMetrics} from '../../../../components/DoughnutMetrics/DoughnutMetrics';
-import {formatStorageValues} from '../../../../utils/dataFormatters/dataFormatters';
+import {formatStorageLegend} from '../../../../utils/metrics/formatMetricLegend';
 import i18n from '../../i18n';
 import type {ClusterMetricsCommonProps} from '../shared';
 import {getDiagramValues} from '../utils';
@@ -8,11 +8,6 @@ import {ClusterMetricsCardContent} from './ClusterMetricsCard';
 
 interface ClusterMetricsMemoryProps extends ClusterMetricsCommonProps {}
 
-function formatStorageLegend({value, capacity}: {value: number; capacity: number}) {
-    const formatted = formatStorageValues(value, capacity, undefined, '\n');
-    return `${formatted[0]} ${i18n('context_of')} ${formatted[1]}`;
-}
-
 export function ClusterMetricsMemory({
     value,
     capacity,
diff --git a/src/containers/Cluster/ClusterOverview/components/ClusterMetricsStorage.tsx b/src/containers/Cluster/ClusterOverview/components/ClusterMetricsStorage.tsx
@@ -1,5 +1,5 @@
 import {DoughnutMetrics} from '../../../../components/DoughnutMetrics/DoughnutMetrics';
-import {formatStorageValues} from '../../../../utils/dataFormatters/dataFormatters';
+import {formatStorageLegend} from '../../../../utils/metrics/formatMetricLegend';
 import i18n from '../../i18n';
 import type {ClusterMetricsCommonProps} from '../shared';
 import {getDiagramValues} from '../utils';
@@ -10,11 +10,6 @@ interface ClusterMetricsStorageProps extends ClusterMetricsCommonProps {
     groups: number;
 }
 
-function formatStorageLegend({value, capacity}: {value: number; capacity: number}) {
-    const formatted = formatStorageValues(value, capacity, undefined, '\n');
-    return `${formatted[0]} ${i18n('context_of')} ${formatted[1]}`;
-}
-
 export function ClusterMetricsStorage({
     value,
     capacity,
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx
@@ -88,7 +88,6 @@ export function MetricsCards({
                         limit={cpuMetrics.totalLimit}
                         unit="cores"
                         active={metricsTab === TENANT_METRICS_TABS_IDS.cpu}
-                        status={cpuMetrics.status}
                         helpText={i18n('context_cpu-description')}
                     />
                 </Link>
@@ -106,7 +105,6 @@ export function MetricsCards({
                         limit={storageMetrics.totalLimit}
                         unit="bytes"
                         active={metricsTab === TENANT_METRICS_TABS_IDS.storage}
-                        status={storageMetrics.status}
                         helpText={i18n('context_storage-description')}
                     />
                 </Link>
@@ -124,7 +122,6 @@ export function MetricsCards({
                         limit={memoryMetrics.totalLimit}
                         unit="bytes"
                         active={metricsTab === TENANT_METRICS_TABS_IDS.memory}
-                        status={memoryMetrics.status}
                         helpText={i18n('context_memory-description')}
                     />
                 </Link>
@@ -139,7 +136,6 @@ export function MetricsCards({
                             limit={networkMetrics.totalLimit}
                             unit="bytes"
                             active={false}
-                            status={networkMetrics.status}
                             clickable={false}
                             helpText={i18n('context_network-description')}
                         />
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TabCard/TabCard.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TabCard/TabCard.tsx
@@ -1,10 +1,12 @@
 import {Card, Flex} from '@gravity-ui/uikit';
 
 import {DoughnutMetrics} from '../../../../../components/DoughnutMetrics/DoughnutMetrics';
-import {formatBytes} from '../../../../../utils/bytesParsers';
+import {getDiagramValues} from '../../../../../containers/Cluster/ClusterOverview/utils';
 import {cn} from '../../../../../utils/cn';
-import {formatPercent} from '../../../../../utils/dataFormatters/dataFormatters';
-import type {ProgressStatus} from '../../../../../utils/progress';
+import {
+    formatCoresLegend,
+    formatStorageLegend,
+} from '../../../../../utils/metrics/formatMetricLegend';
 
 import './TabCard.scss';
 
@@ -15,9 +17,8 @@ interface TabCardProps {
     sublabel?: string;
     value: number;
     limit: number;
-    unit?: string;
+    unit: 'bytes' | 'cores';
     active?: boolean;
-    status?: ProgressStatus;
     helpText?: string;
     clickable?: boolean;
 }
@@ -27,24 +28,18 @@ export function TabCard({
     sublabel,
     value,
     limit,
-    unit = '',
+    unit,
     active,
-    status = 'good',
     helpText,
     clickable = true,
 }: TabCardProps) {
-    const percentage = limit > 0 ? (value / limit) * 100 : 0;
-    const formattedPercentage = formatPercent(percentage / 100);
+    const legendFormatter = unit === 'bytes' ? formatStorageLegend : formatCoresLegend;
 
-    // Format values based on unit type
-    let formattedValue: string;
-    if (unit === 'bytes') {
-        const formattedUsed = formatBytes({value});
-        const formattedLimit = formatBytes({value: limit});
-        formattedValue = `${formattedUsed} of ${formattedLimit}`;
-    } else {
-        formattedValue = `${value} of ${limit}${unit ? ' ' + unit : ''}`;
-    }
+    const {status, percents, legend, fill} = getDiagramValues({
+        value,
+        capacity: limit,
+        legendFormatter,
+    });
 
     return (
         <div className={b({active})}>
@@ -57,16 +52,16 @@ export function TabCard({
                     <DoughnutMetrics
                         size="small"
                         status={status}
-                        fillWidth={percentage}
+                        fillWidth={fill}
                         className={b('doughnut')}
                     >
                         <DoughnutMetrics.Value variant="subheader-1">
-                            {formattedPercentage}
+                            {percents}
                         </DoughnutMetrics.Value>
                     </DoughnutMetrics>
                     <div className={b('legend-wrapper')}>
                         <DoughnutMetrics.Legend variant="subheader-2">
-                            {formattedValue}
+                            {legend}
                         </DoughnutMetrics.Legend>
                         <DoughnutMetrics.Legend
                             variant="body-1"
diff --git a/src/utils/metrics/formatMetricLegend.ts b/src/utils/metrics/formatMetricLegend.ts
@@ -0,0 +1,27 @@
+import {
+    formatNumber,
+    formatNumericValues,
+    formatStorageValues,
+} from '../dataFormatters/dataFormatters';
+
+import i18n from './i18n';
+
+export interface MetricFormatParams {
+    value: number;
+    capacity: number;
+}
+
+export function formatStorageLegend({value, capacity}: MetricFormatParams): string {
+    const formatted = formatStorageValues(value, capacity, undefined, '\n');
+    return `${formatted[0]} ${i18n('context_of')} ${formatted[1]}`;
+}
+
+export function formatCoresLegend({value, capacity}: MetricFormatParams): string {
+    let formatted = [];
+    if (capacity < 10_000) {
+        formatted = [formatNumber(Math.round(value)), formatNumber(Math.round(capacity))];
+    } else {
+        formatted = formatNumericValues(value, capacity, undefined, '', true);
+    }
+    return `${formatted[0]} ${i18n('context_of')} ${formatted[1]} ${i18n('context_cores')}`;
+}
diff --git a/src/utils/metrics/i18n/en.json b/src/utils/metrics/i18n/en.json
@@ -0,0 +1,4 @@
+{
+  "context_of": "of",
+  "context_cores": "cores"
+}
diff --git a/src/utils/metrics/i18n/index.ts b/src/utils/metrics/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-metrics';
+
+export default registerKeysets(COMPONENT, {en});

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "context_of": "of",
 +  "context_cores": "cores"
 +}