refactor: migrate ProgressViewer to ts (#533)

Author: krosy1337

src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -3,10 +3,10 @@ import cn from 'bem-cn-lite';
 import type {TSystemStateInfo} from '../../types/api/nodes';
 
 import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
-import {calcUptime} from '../../utils';
+import {calcUptime} from '../../utils/dataFormatters/dataFormatters';
 
 import InfoViewer from '../InfoViewer/InfoViewer';
-import ProgressViewer from '../ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 
 import './FullNodeViewer.scss';

src/components/InfoViewer/formatters/common.ts

@@ -1,5 +1,5 @@
 import type {TDirEntry} from '../../../types/api/schema';
-import {formatDateTime} from '../../../utils';
+import {formatDateTime} from '../../../utils/dataFormatters/dataFormatters';
 
 import {createInfoFormatter} from '../utils';
 

src/components/InfoViewer/formatters/pqGroup.ts

@@ -4,7 +4,7 @@ import {
     TPQPartitionConfig,
     TPQTabletConfig,
 } from '../../../types/api/schema';
-import {formatBps, formatBytes, formatNumber} from '../../../utils';
+import {formatBps, formatBytes, formatNumber} from '../../../utils/dataFormatters/dataFormatters';
 import {HOUR_IN_SECONDS} from '../../../utils/constants';
 
 import {createInfoFormatter} from '../utils';

src/components/InfoViewer/formatters/table.ts

@@ -1,6 +1,11 @@
 import type {TFollowerGroup, TPartitionConfig, TTableStats} from '../../../types/api/schema';
 import type {TMetrics} from '../../../types/api/tenant';
-import {formatCPU, formatNumber, formatBps, formatDateTime} from '../../../utils';
+import {
+    formatBps,
+    formatCPU,
+    formatDateTime,
+    formatNumber,
+} from '../../../utils/dataFormatters/dataFormatters';
 import {toFormattedSize} from '../../FormattedBytes/utils';
 
 import {createInfoFormatter} from '../utils';

src/components/ProgressViewer/ProgressViewer.js

@@ -0,0 +1,94 @@
+import cn from 'bem-cn-lite';
+
+import type {ValueOf} from '../../types/common';
+
+import './ProgressViewer.scss';
+
+const b = cn('progress-viewer');
+
+export const PROGRESS_VIEWER_SIZE_IDS = {
+    xs: 'xs',
+    s: 's',
+    ns: 'ns',
+    m: 'm',
+    n: 'n',
+    l: 'l',
+    head: 'head',
+} as const;
+
+type ProgressViewerSize = ValueOf<typeof PROGRESS_VIEWER_SIZE_IDS>;
+
+/*
+
+Props description:
+1) value - the amount of progress
+2) capacity - maximum possible progress value
+3) formatValues - function for formatting the value and capacity
+4) percents - display progress in percents
+5) colorizeProgress - change the color of the progress bar depending on its value
+6) inverseColorize - invert the colors of the progress bar
+*/
+
+interface ProgressViewerProps {
+    value?: number | string;
+    capacity?: number | string;
+    formatValues?: (value?: number, capacity?: number) => (string | undefined)[];
+    percents?: boolean;
+    className?: string;
+    size?: ProgressViewerSize;
+    colorizeProgress?: boolean;
+    inverseColorize?: boolean;
+}
+
+export function ProgressViewer({
+    value,
+    capacity = 100,
+    formatValues,
+    percents,
+    className,
+    size = PROGRESS_VIEWER_SIZE_IDS.xs,
+    colorizeProgress,
+    inverseColorize,
+}: ProgressViewerProps) {
+    let fillWidth = Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100);
+    fillWidth = fillWidth > 100 ? 100 : fillWidth;
+
+    let valueText: number | string | undefined = Math.round(Number(value)),
+        capacityText: number | string | undefined = capacity,
+        divider = '/';
+    if (formatValues) {
+        [valueText, capacityText] = formatValues(Number(value), Number(capacity));
+    } else if (percents) {
+        valueText = fillWidth + '%';
+        capacityText = '';
+        divider = '';
+    }
+
+    let bg = inverseColorize ? 'scarlet' : 'apple';
+    if (colorizeProgress) {
+        if (fillWidth > 60 && fillWidth <= 80) {
+            bg = 'saffron';
+        } else if (fillWidth > 80) {
+            bg = inverseColorize ? 'apple' : 'scarlet';
+        }
+    }
+
+    const lineStyle = {
+        width: fillWidth + '%',
+    };
+
+    const text = fillWidth > 60 ? 'contrast0' : 'contrast70';
+
+    if (!isNaN(fillWidth)) {
+        return (
+            <div className={b({size}, className)}>
+                <div className={b('line', {bg})} style={lineStyle}></div>
+                <span
+                    className={b('text', {text})}
+                >{`${valueText} ${divider} ${capacityText}`}</span>
+            </div>
+        );
+    }
+
+    return <div className={`${b({size})} ${className} error`}>no data</div>;
+}

src/components/ProgressViewer/ProgressViewer.tsx

@@ -1,6 +1,6 @@
 import type {TTabletStateInfo} from '../../../types/api/tablet';
 
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
 
 const formatTablet = createInfoFormatter<TTabletStateInfo>({

src/components/TooltipsContent/TabletTooltipContent/TabletTooltipContent.tsx

@@ -3,7 +3,7 @@ import block from 'bem-cn-lite';
 import {Skeleton} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import ProgressViewer from '../../../components/ProgressViewer/ProgressViewer';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 import InfoViewer, {InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
 import {Tags} from '../../../components/Tags';
 import {Tablet} from '../../../components/Tablet';
@@ -16,7 +16,7 @@ import type {AdditionalClusterProps, ClusterLink} from '../../../types/additiona
 import type {VersionValue} from '../../../types/versions';
 import type {TClusterInfo} from '../../../types/api/cluster';
 import {backend, customBackend} from '../../../store';
-import {formatStorageValues} from '../../../utils';
+import {formatStorageValues} from '../../../utils/dataFormatters/dataFormatters';
 import {useSetting, useTypedSelector} from '../../../utils/hooks';
 import {
     CLUSTER_DEFAULT_TITLE,

src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -7,7 +7,7 @@ import {Checkbox, Select} from '@gravity-ui/uikit';
 import type {IHeatmapMetricValue} from '../../types/store/heatmap';
 import {getTabletsInfo, setHeatmapOptions} from '../../store/reducers/heatmap';
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
-import {formatNumber} from '../../utils';
+import {formatNumber} from '../../utils/dataFormatters/dataFormatters';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
 
 import {Loader} from '../../components/Loader';

src/containers/Heatmap/Heatmap.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 
 import {getColorRange, getCurrentMetricLimits} from '../util';
-import {formatNumber} from '../../../utils';
+import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
 
 import './Histogram.scss';