Skip to content

Commit 0e8bdd8

Browse files
artemmufazalovartemmufazalov
authored
fix(FormattedBytes): show 1_000 with another unit (#1901)
1 parent 286d493 commit 0e8bdd8

File tree

9 files changed

+43
-102
lines changed

9 files changed

+43
-102
lines changed

‎src/components/FormattedBytes/utils.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export const toFormattedSize = (
1111
return null;
1212
}
1313

14-
return <FormattedBytes value={value} significantDigits={2} {...params} />;
14+
return <FormattedBytes value={value} {...params} />;
1515
};

‎src/containers/Cluster/ClusterInfo/components/DiskGroupsStatsBars/DiskGroupsStatsBars.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {DefinitionList} from '@gravity-ui/components';
22

33
import {ContentWithPopup} from '../../../../../components/ContentWithPopup/ContentWithPopup';
44
import type {DiskErasureGroupsStats} from '../../../../../store/reducers/cluster/types';
5-
import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
5+
import {formatBytes, getBytesSizeUnit} from '../../../../../utils/bytesParsers';
66
import {cn} from '../../../../../utils/cn';
77
import i18n from '../../../i18n';
88

@@ -36,7 +36,7 @@ interface GroupsStatsPopupContentProps {
3636
function GroupsStatsPopupContent({stats}: GroupsStatsPopupContentProps) {
3737
const {diskType, erasure, allocatedSize, availableSize} = stats;
3838

39-
const sizeToConvert = getSizeWithSignificantDigits(Math.max(allocatedSize, availableSize), 2);
39+
const sizeToConvert = getBytesSizeUnit(Math.max(allocatedSize, availableSize));
4040

4141
const convertedAllocatedSize = formatBytes({value: allocatedSize, size: sizeToConvert});
4242
const convertedAvailableSize = formatBytes({value: availableSize, size: sizeToConvert});

‎src/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {CellWithPopover} from '../../../../../components/CellWithPopover/CellWit
66
import {LinkToSchemaObject} from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
77
import {topTablesApi} from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
88
import type {KeyValueRow} from '../../../../../types/api/query';
9-
import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
9+
import {formatBytes, getBytesSizeUnit} from '../../../../../utils/bytesParsers';
1010
import {useAutoRefreshInterval} from '../../../../../utils/hooks';
1111
import {parseQueryErrorToString} from '../../../../../utils/query';
1212
import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
@@ -35,7 +35,7 @@ export function TopTables({path}: TopTablesProps) {
3535
const data = currentData?.resultSets?.[0]?.result || [];
3636

3737
const formatSize = (value?: number) => {
38-
const size = getSizeWithSignificantDigits(data?.length ? Number(data[0].Size) : 0, 0);
38+
const size = getBytesSizeUnit(data?.length ? Number(data[0].Size) : 0);
3939

4040
return formatBytes({value, size, precision: 1});
4141
};

‎src/utils/bytesParsers/__test__/formatBytes.test.ts‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,6 @@ describe('formatBytes', () => {
3333
`100${UNBREAKABLE_GAP}000${UNBREAKABLE_GAP}B/s`,
3434
);
3535
});
36-
it('should return fixed amount of significant digits', () => {
37-
expect(formatBytes({value: 99_000, significantDigits: 2})).toEqual(
38-
`99${UNBREAKABLE_GAP}000${UNBREAKABLE_GAP}B`,
39-
);
40-
expect(formatBytes({value: 100_000, significantDigits: 2})).toEqual(
41-
`100${UNBREAKABLE_GAP}KB`,
42-
);
43-
expect(formatBytes({value: 99_000_000_000_000, significantDigits: 2})).toEqual(
44-
`99${UNBREAKABLE_GAP}000${UNBREAKABLE_GAP}GB`,
45-
);
46-
expect(formatBytes({value: 100_000_000_000_000, significantDigits: 2})).toEqual(
47-
`100${UNBREAKABLE_GAP}TB`,
48-
);
49-
});
5036
it('should return empty string on invalid data', () => {
5137
expect(formatBytes({value: undefined})).toEqual('');
5238
expect(formatBytes({value: null})).toEqual('');

‎src/utils/bytesParsers/formatBytes.ts‎

Lines changed: 7 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -26,47 +26,23 @@ const sizes = {
2626
value: TERABYTE,
2727
label: i18n('tb'),
2828
},
29-
};
29+
} as const;
3030

3131
export type BytesSizes = keyof typeof sizes;
3232

33-
/**
34-
* This function is needed to keep more than 3 digits of the same size.
35-
*
36-
* @param significantDigits - number of digits above 3
37-
* @returns size to format value to get required number of digits
38-
*
39-
* By default value converted to the next size when it's above 1000,
40-
* so we have 900mb and 1gb. To extend it additional significantDigits could be set
41-
*
42-
* significantDigits value added above default 3
43-
*
44-
* significantDigits = 1 - 9 000 mb and 10 gb
45-
*
46-
* significantDigits = 2 - 90 000 mb and 100 gb
47-
*
48-
* significantDigits = 3 - 900 000 mb and 1000 gb
49-
*/
50-
export const getSizeWithSignificantDigits = (value: number, significantDigits: number) => {
51-
const multiplier = 10 ** significantDigits;
52-
53-
const tbLevel = sizes.tb.value * multiplier;
54-
const gbLevel = sizes.gb.value * multiplier;
55-
const mbLevel = sizes.mb.value * multiplier;
56-
const kbLevel = sizes.kb.value * multiplier;
57-
33+
export const getBytesSizeUnit = (value: number) => {
5834
let size: BytesSizes = 'b';
5935

60-
if (value >= kbLevel) {
36+
if (value >= sizes.kb.value) {
6137
size = 'kb';
6238
}
63-
if (value >= mbLevel) {
39+
if (value >= sizes.mb.value) {
6440
size = 'mb';
6541
}
66-
if (value >= gbLevel) {
42+
if (value >= sizes.gb.value) {
6743
size = 'gb';
6844
}
69-
if (value >= tbLevel) {
45+
if (value >= sizes.tb.value) {
7046
size = 'tb';
7147
}
7248

@@ -87,15 +63,11 @@ const addSpeedLabel = (result: string, size: BytesSizes) => {
8763
return addSizeLabel(result, size) + i18n('perSecond');
8864
};
8965

90-
/**
91-
* @param significantDigits - number of digits above 3
92-
*/
9366
export const formatBytes = ({
9467
value,
9568
size,
9669
withSpeedLabel = false,
9770
withSizeLabel = true,
98-
significantDigits = 0,
9971
delimiter,
10072
...params
10173
}: FormatValuesArgs<BytesSizes>) => {
@@ -105,7 +77,7 @@ export const formatBytes = ({
10577

10678
const numValue = Number(value);
10779

108-
const sizeToConvert = size ?? getSizeWithSignificantDigits(numValue, significantDigits);
80+
const sizeToConvert = size ?? getBytesSizeUnit(numValue);
10981

11082
const result = formatToSize({value: numValue, size: sizeToConvert, ...params});
11183

‎src/utils/dataFormatters/__test__/formatNumbers.test.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,12 @@ describe('formatNumericValues', () => {
2121
const result = formatNumericValues(1024, 2048);
2222
expect(result).toEqual(['1', `2${UNBREAKABLE_GAP}k`]);
2323
});
24+
25+
it('should format values without units (less than 1000)', () => {
26+
const result1 = formatNumericValues(10, 20);
27+
expect(result1).toEqual(['10', `20`]);
28+
});
29+
2430
it('should format value with label if set', () => {
2531
const result = formatNumericValues(1024, 2048, undefined, undefined, true);
2632
expect(result).toEqual([`1${UNBREAKABLE_GAP}k`, `2${UNBREAKABLE_GAP}k`]);

‎src/utils/dataFormatters/common.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,24 @@ export type FormatValuesArgs<T> = Omit<FormatToSizeArgs<T>, 'value'> & {
1010
value: number | string | undefined | null;
1111
withSpeedLabel?: boolean;
1212
withSizeLabel?: boolean;
13-
significantDigits?: number;
1413
delimiter?: string;
1514
};
1615

1716
export function formatValues<T>(
1817
formatter: (args: FormatValuesArgs<T>) => string,
19-
sizeGetter: (value: number, significantDigits: number) => T,
18+
sizeGetter: (value: number) => T,
2019
value?: number,
2120
total?: number,
2221
size?: T,
2322
delimiter?: string,
2423
withValueLabel = false,
2524
) {
26-
let calculatedSize = sizeGetter(Number(value), 0);
25+
let calculatedSize = sizeGetter(Number(value));
2726
let valueWithSizeLabel = true;
2827
let valuePrecision = 0;
2928

3029
if (isNumeric(total)) {
31-
calculatedSize = sizeGetter(Number(total), 0);
30+
calculatedSize = sizeGetter(Number(total));
3231
valueWithSizeLabel = withValueLabel;
3332
valuePrecision = 1;
3433
}

‎src/utils/dataFormatters/dataFormatters.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import {dateTimeParse, duration} from '@gravity-ui/date-utils';
22

33
import type {TVDiskID, TVSlotId} from '../../types/api/vdisk';
4-
import {
5-
formatBytes as formatBytesCustom,
6-
getSizeWithSignificantDigits,
7-
} from '../bytesParsers/formatBytes';
4+
import {formatBytes as formatBytesCustom, getBytesSizeUnit} from '../bytesParsers/formatBytes';
85
import type {BytesSizes} from '../bytesParsers/formatBytes';
96
import {HOUR_IN_SECONDS} from '../constants';
107
import {configuredNumeral} from '../numeral';
118
import {UNBREAKABLE_GAP, isNumeric} from '../utils';
129

1310
import {formatValues} from './common';
14-
import {formatNumberWithDigits, getNumberWithSignificantDigits} from './formatNumber';
11+
import {formatNumberWithDigits, getNumberSizeUnit} from './formatNumber';
1512
import type {Digits} from './formatNumber';
1613
import i18n from './i18n';
1714

@@ -114,7 +111,7 @@ export function formatStorageValues(
114111
) {
115112
return formatValues<BytesSizes>(
116113
formatBytesCustom,
117-
getSizeWithSignificantDigits,
114+
getBytesSizeUnit,
118115
value,
119116
total,
120117
size,
@@ -132,7 +129,7 @@ export function formatNumericValues(
132129
) {
133130
return formatValues<Digits>(
134131
formatNumberWithDigits,
135-
getNumberWithSignificantDigits,
132+
getNumberSizeUnit,
136133
value,
137134
total,
138135
size,

‎src/utils/dataFormatters/formatNumber.ts‎

Lines changed: 18 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import type {FormatToSizeArgs, FormatValuesArgs} from './common';
55
import {formatNumber, roundToPrecision} from './dataFormatters';
66

77
const sizes = {
8+
noUnit: {
9+
value: 1,
10+
label: '',
11+
},
812
thousand: {
913
value: 1_000,
1014
label: i18n('label_thousand'),
@@ -25,43 +29,19 @@ const sizes = {
2529

2630
export type Digits = keyof typeof sizes;
2731

28-
/**
29-
* This function is needed to keep more than 3 digits of the same size.
30-
*
31-
* @param significantDigits - number of digits above 3
32-
* @returns size to format value to get required number of digits
33-
*
34-
* By default value converted to the next size when it's above 1000,
35-
* so we have 900k and 1m. To extend it additional significantDigits could be set
36-
*
37-
* significantDigits value added above default 3
38-
*
39-
* significantDigits = 1 - 9 000k and 10m
40-
*
41-
* significantDigits = 2 - 90 000m and 100b
42-
*
43-
* significantDigits = 3 - 900 000b and 1000t
44-
*/
45-
export const getNumberWithSignificantDigits = (value: number, significantDigits: number) => {
46-
const multiplier = 10 ** significantDigits;
47-
48-
const thousandLevel = sizes.thousand.value * multiplier;
49-
const millionLevel = sizes.million.value * multiplier;
50-
const billionLevel = sizes.billion.value * multiplier;
51-
const trillionLevel = sizes.trillion.value * multiplier;
52-
53-
let size: Digits = 'thousand';
54-
55-
if (value > thousandLevel) {
32+
export const getNumberSizeUnit = (value: number) => {
33+
let size: Digits = 'noUnit';
34+
35+
if (value >= sizes.thousand.value) {
5636
size = 'thousand';
5737
}
58-
if (value >= millionLevel) {
38+
if (value >= sizes.million.value) {
5939
size = 'million';
6040
}
61-
if (value >= billionLevel) {
41+
if (value >= sizes.billion.value) {
6242
size = 'billion';
6343
}
64-
if (value >= trillionLevel) {
44+
if (value >= sizes.trillion.value) {
6545
size = 'trillion';
6646
}
6747

@@ -75,17 +55,18 @@ const formatToSize = ({value, size = 'thousand', precision = 0}: FormatToSizeArg
7555
};
7656

7757
const addSizeLabel = (result: string, size: Digits, delimiter = UNBREAKABLE_GAP) => {
78-
return result + delimiter + sizes[size].label;
58+
const label = sizes[size].label;
59+
if (!label) {
60+
return result;
61+
}
62+
63+
return result + delimiter + label;
7964
};
8065

81-
/**
82-
* @param significantDigits - number of digits above 3
83-
*/
8466
export const formatNumberWithDigits = ({
8567
value,
8668
size,
8769
withSizeLabel = true,
88-
significantDigits = 0,
8970
delimiter,
9071
...params
9172
}: FormatValuesArgs<Digits>) => {
@@ -95,7 +76,7 @@ export const formatNumberWithDigits = ({
9576

9677
const numValue = Number(value);
9778

98-
const sizeToConvert = size ?? getNumberWithSignificantDigits(numValue, significantDigits);
79+
const sizeToConvert = size ?? getNumberSizeUnit(numValue);
9980

10081
const result = formatToSize({value: numValue, size: sizeToConvert, ...params});
10182

0 commit comments

Comments
 (0)