ydb-embedded-ui 4.17.0 → 4.19.0

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,25 +1,12 @@
-import cn from 'bem-cn-lite';
-
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
-import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
-import type {ValueOf} from '../../../types/common';
 import type {NodesMap} from '../../../types/store/nodesList';
 import type {PreparedStorageGroup, VisibleEntities} from '../../../store/reducers/storage/types';
 import type {HandleSort} from '../../../utils/hooks/useTableSort';
-
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
-import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
-import {stringifyVdiskId} from '../../../utils';
-import {getUsage, isFullVDiskData, isSortableStorageProperty} from '../../../utils/storage';
-
-import shieldIcon from '../../../assets/icons/shield.svg';
-import {Stack} from '../../../components/Stack/Stack';
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-
+import {isSortableStorageProperty} from '../../../utils/storage';
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
-import {VDisk} from '../VDisk';
-import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
+import {getStorageGroupsColumns} from './getStorageGroupsColumns';
 
 import i18n from './i18n';
 import './StorageGroups.scss';
@@ -39,8 +26,6 @@ const TableColumnsIds = {
     Degraded: 'Degraded',
 } as const;
 
-type TableColumnId = ValueOf<typeof TableColumnsIds>;
-
 interface StorageGroupsProps {
     data: PreparedStorageGroup[];
     nodes?: NodesMap;
@@ -51,23 +36,6 @@ interface StorageGroupsProps {
     handleSort?: HandleSort;
 }
 
-const tableColumnsNames: Record<TableColumnId, string> = {
-    PoolName: 'Pool Name',
-    Kind: 'Type',
-    Erasure: 'Erasure',
-    GroupId: 'Group ID',
-    Used: 'Used',
-    Limit: 'Limit',
-    UsedSpaceFlag: 'Space',
-    Usage: 'Usage',
-    Read: 'Read',
-    Write: 'Write',
-    VDisks: 'VDisks',
-    Degraded: 'Degraded',
-};
-
-const b = cn('global-storage-groups');
-
 export function StorageGroups({
     data,
     tableSettings,
@@ -77,204 +45,7 @@ export function StorageGroups({
     sort,
     handleSort,
 }: StorageGroupsProps) {
-    const rawColumns: Column<PreparedStorageGroup>[] = [
-        {
-            name: TableColumnsIds.PoolName,
-            header: tableColumnsNames[TableColumnsIds.PoolName],
-            width: 250,
-            render: ({row}) => {
-                const splitted = row.PoolName?.split('/');
-                return (
-                    <div className={b('pool-name-wrapper')}>
-                        {splitted && (
-                            <Popover
-                                content={row.PoolName}
-                                placement={['right']}
-                                behavior={PopoverBehavior.Immediate}
-                            >
-                                <span className={b('pool-name')}>
-                                    {splitted[splitted.length - 1]}
-                                </span>
-                            </Popover>
-                        )}
-                    </div>
-                );
-            },
-            align: DataTable.LEFT,
-        },
-        {
-            name: TableColumnsIds.Kind,
-            header: tableColumnsNames[TableColumnsIds.Kind],
-            // prettier-ignore
-            render: ({row}) => (
-                <>
-                    <Label>{row.Kind || '—'}</Label>
-                    {' '}
-                    {row.Encryption && (
-                        <Popover
-                            content={i18n('encrypted')}
-                            placement="right"
-                            behavior={PopoverBehavior.Immediate}
-                        >
-                            <Label>
-                                <Icon data={shieldIcon} />
-                            </Label>
-                        </Popover>
-                    )}
-                </>
-            ),
-        },
-        {
-            name: TableColumnsIds.Erasure,
-            header: tableColumnsNames[TableColumnsIds.Erasure],
-            render: ({row}) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
-            align: DataTable.LEFT,
-        },
-        {
-            name: TableColumnsIds.Degraded,
-            header: tableColumnsNames[TableColumnsIds.Degraded],
-            width: 100,
-            render: ({row}) =>
-                row.Degraded ? (
-                    <Label theme={getDegradedSeverity(row)}>Degraded: {row.Degraded}</Label>
-                ) : (
-                    '-'
-                ),
-            align: DataTable.LEFT,
-            defaultOrder: DataTable.DESCENDING,
-        },
-        {
-            name: TableColumnsIds.Usage,
-            header: tableColumnsNames[TableColumnsIds.Usage],
-            width: 100,
-            render: ({row}) => {
-                // without a limit the usage can be evaluated as 0,
-                // but the absence of a value is more clear
-                return row.Limit ? (
-                    <Label
-                        theme={getUsageSeverityForStorageGroup(row.Usage)}
-                        className={b('usage-label', {overload: row.Usage >= 90})}
-                    >
-                        {row.Usage}%
-                    </Label>
-                ) : (
-                    '-'
-                );
-            },
-            // without a limit exclude usage from sort to display at the bottom
-            sortAccessor: (row) => (row.Limit ? getUsage(row) : null),
-            align: DataTable.LEFT,
-        },
-        {
-            name: TableColumnsIds.GroupId,
-            header: tableColumnsNames[TableColumnsIds.GroupId],
-            width: 130,
-            render: ({row}) => {
-                return <span className={b('group-id')}>{row.GroupID}</span>;
-            },
-            sortAccessor: (row) => Number(row.GroupID),
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.Used,
-            header: tableColumnsNames[TableColumnsIds.Used],
-            width: 100,
-            render: ({row}) => {
-                return bytesToGB(row.Used, true);
-            },
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.Limit,
-            header: tableColumnsNames[TableColumnsIds.Limit],
-            width: 100,
-            render: ({row}) => {
-                return bytesToGB(row.Limit);
-            },
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.UsedSpaceFlag,
-            header: tableColumnsNames[TableColumnsIds.UsedSpaceFlag],
-            width: 110,
-            render: ({row}) => {
-                const value = row.UsedSpaceFlag;
-
-                let color = 'Red';
-
-                if (value < 100) {
-                    color = 'Green';
-                } else if (value < 10000) {
-                    color = 'Yellow';
-                } else if (value < 1000000) {
-                    color = 'Orange';
-                }
-                return <EntityStatus status={color} />;
-            },
-            align: DataTable.CENTER,
-        },
-
-        {
-            name: TableColumnsIds.Read,
-            header: tableColumnsNames[TableColumnsIds.Read],
-            width: 100,
-            render: ({row}) => {
-                return row.Read ? bytesToSpeed(row.Read) : '-';
-            },
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.Write,
-            header: tableColumnsNames[TableColumnsIds.Write],
-            width: 100,
-            render: ({row}) => {
-                return row.Write ? bytesToSpeed(row.Write) : '-';
-            },
-            align: DataTable.RIGHT,
-        },
-        {
-            name: TableColumnsIds.VDisks,
-            className: b('vdisks-column'),
-            header: tableColumnsNames[TableColumnsIds.VDisks],
-            render: ({row}) => (
-                <div className={b('vdisks-wrapper')}>
-                    {row.VDisks?.map((vDisk) => {
-                        const donors = vDisk.Donors;
-
-                        return donors && donors.length > 0 ? (
-                            <Stack
-                                className={b('vdisks-item')}
-                                key={stringifyVdiskId(vDisk.VDiskId)}
-                            >
-                                <VDisk data={vDisk} nodes={nodes} />
-                                {donors.map((donor) => {
-                                    const isFullData = isFullVDiskData(donor);
-
-                                    return (
-                                        <VDisk
-                                            data={isFullData ? donor : {...donor, DonorMode: true}}
-                                            // donor and acceptor are always in the same group
-                                            nodes={nodes}
-                                            key={stringifyVdiskId(
-                                                isFullData ? donor.VDiskId : donor,
-                                            )}
-                                        />
-                                    );
-                                })}
-                            </Stack>
-                        ) : (
-                            <div className={b('vdisks-item')} key={stringifyVdiskId(vDisk.VDiskId)}>
-                                <VDisk data={vDisk} nodes={nodes} />
-                            </div>
-                        );
-                    })}
-                </div>
-            ),
-            align: DataTable.CENTER,
-            sortable: false,
-            width: 900,
-        },
-    ];
+    const rawColumns: Column<PreparedStorageGroup>[] = getStorageGroupsColumns(nodes);
 
     let columns = rawColumns.map((column) => ({
         ...column,

package/dist/containers/Storage/StorageGroups/getStorageGroupsColumns.tsx

@@ -0,0 +1,278 @@
+import cn from 'bem-cn-lite';
+
+import DataTable, {type Column} from '@gravity-ui/react-data-table';
+import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+
+import shieldIcon from '../../../assets/icons/shield.svg';
+import type {ValueOf} from '../../../types/common';
+import type {NodesMap} from '../../../types/store/nodesList';
+import type {PreparedStorageGroup} from '../../../store/reducers/storage/types';
+import {getUsage, isFullVDiskData} from '../../../utils/storage';
+import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import {Stack} from '../../../components/Stack/Stack';
+import {VDisk} from '../VDisk';
+import {getDegradedSeverity, getUsageSeverityForStorageGroup} from '../utils';
+import i18n from './i18n';
+import './StorageGroups.scss';
+
+const b = cn('global-storage-groups');
+
+const GROUPS_COLUMNS_IDS = {
+    PoolName: 'PoolName',
+    Kind: 'Kind',
+    Erasure: 'Erasure',
+    GroupId: 'GroupId',
+    Used: 'Used',
+    Limit: 'Limit',
+    Usage: 'Usage',
+    UsedSpaceFlag: 'UsedSpaceFlag',
+    Read: 'Read',
+    Write: 'Write',
+    VDisks: 'VDisks',
+    Degraded: 'Degraded',
+} as const;
+
+type GroupsColumns = ValueOf<typeof GROUPS_COLUMNS_IDS>;
+
+const tableColumnsNames: Record<GroupsColumns, string> = {
+    PoolName: 'Pool Name',
+    Kind: 'Type',
+    Erasure: 'Erasure',
+    GroupId: 'Group ID',
+    Used: 'Used',
+    Limit: 'Limit',
+    UsedSpaceFlag: 'Space',
+    Usage: 'Usage',
+    Read: 'Read',
+    Write: 'Write',
+    VDisks: 'VDisks',
+    Degraded: 'Degraded',
+};
+
+const poolNameColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.PoolName,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.PoolName],
+    width: 250,
+    render: ({row}) => {
+        const splitted = row.PoolName?.split('/');
+        return (
+            <div className={b('pool-name-wrapper')}>
+                {splitted && (
+                    <Popover
+                        content={row.PoolName}
+                        placement={['right']}
+                        behavior={PopoverBehavior.Immediate}
+                    >
+                        <span className={b('pool-name')}>{splitted[splitted.length - 1]}</span>
+                    </Popover>
+                )}
+            </div>
+        );
+    },
+    align: DataTable.LEFT,
+};
+
+const kindColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Kind,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Kind],
+    // prettier-ignore
+    render: ({row}) => (
+        <>
+            <Label>{row.Kind || '—'}</Label>
+            {' '}
+            {row.Encryption && (
+                <Popover
+                    content={i18n('encrypted')}
+                    placement="right"
+                    behavior={PopoverBehavior.Immediate}
+                >
+                    <Label>
+                        <Icon data={shieldIcon} />
+                    </Label>
+                </Popover>
+            )}
+        </>
+    ),
+    sortable: false,
+};
+
+const erasureColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Erasure,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Erasure],
+    render: ({row}) => (row.ErasureSpecies ? row.ErasureSpecies : '-'),
+    align: DataTable.LEFT,
+    sortable: false,
+};
+
+const degradedColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Degraded,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Degraded],
+    width: 100,
+    render: ({row}) =>
+        row.Degraded ? (
+            <Label theme={getDegradedSeverity(row)}>Degraded: {row.Degraded}</Label>
+        ) : (
+            '-'
+        ),
+    align: DataTable.LEFT,
+    defaultOrder: DataTable.DESCENDING,
+};
+
+const usageColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Usage,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Usage],
+    width: 100,
+    render: ({row}) => {
+        // without a limit the usage can be evaluated as 0,
+        // but the absence of a value is more clear
+        return row.Limit ? (
+            <Label
+                theme={getUsageSeverityForStorageGroup(row.Usage)}
+                className={b('usage-label', {overload: row.Usage >= 90})}
+            >
+                {row.Usage}%
+            </Label>
+        ) : (
+            '-'
+        );
+    },
+    // without a limit exclude usage from sort to display at the bottom
+    sortAccessor: (row) => (row.Limit ? getUsage(row) : null),
+    align: DataTable.LEFT,
+    sortable: false,
+};
+
+const groupIdColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.GroupId,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.GroupId],
+    width: 130,
+    render: ({row}) => {
+        return <span className={b('group-id')}>{row.GroupID}</span>;
+    },
+    sortAccessor: (row) => Number(row.GroupID),
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+
+const usedColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Used,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Used],
+    width: 100,
+    render: ({row}) => {
+        return bytesToGB(row.Used, true);
+    },
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+
+const limitColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Limit,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Limit],
+    width: 100,
+    render: ({row}) => {
+        return bytesToGB(row.Limit);
+    },
+    align: DataTable.RIGHT,
+    sortable: false,
+};
+
+const usedSpaceFlagColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.UsedSpaceFlag,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.UsedSpaceFlag],
+    width: 110,
+    render: ({row}) => {
+        const value = row.UsedSpaceFlag;
+
+        let color = 'Red';
+
+        if (value < 100) {
+            color = 'Green';
+        } else if (value < 10000) {
+            color = 'Yellow';
+        } else if (value < 1000000) {
+            color = 'Orange';
+        }
+        return <EntityStatus status={color} />;
+    },
+    align: DataTable.CENTER,
+};
+
+const readColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Read,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Read],
+    width: 100,
+    render: ({row}) => {
+        return row.Read ? bytesToSpeed(row.Read) : '-';
+    },
+    align: DataTable.RIGHT,
+};
+
+const writeColumn: Column<PreparedStorageGroup> = {
+    name: GROUPS_COLUMNS_IDS.Write,
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.Write],
+    width: 100,
+    render: ({row}) => {
+        return row.Write ? bytesToSpeed(row.Write) : '-';
+    },
+    align: DataTable.RIGHT,
+};
+
+const getVdiscksColumn = (nodes?: NodesMap): Column<PreparedStorageGroup> => ({
+    name: GROUPS_COLUMNS_IDS.VDisks,
+    className: b('vdisks-column'),
+    header: tableColumnsNames[GROUPS_COLUMNS_IDS.VDisks],
+    render: ({row}) => (
+        <div className={b('vdisks-wrapper')}>
+            {row.VDisks?.map((vDisk) => {
+                const donors = vDisk.Donors;
+
+                return donors && donors.length > 0 ? (
+                    <Stack className={b('vdisks-item')} key={stringifyVdiskId(vDisk.VDiskId)}>
+                        <VDisk data={vDisk} nodes={nodes} />
+                        {donors.map((donor) => {
+                            const isFullData = isFullVDiskData(donor);
+
+                            return (
+                                <VDisk
+                                    data={isFullData ? donor : {...donor, DonorMode: true}}
+                                    // donor and acceptor are always in the same group
+                                    nodes={nodes}
+                                    key={stringifyVdiskId(isFullData ? donor.VDiskId : donor)}
+                                />
+                            );
+                        })}
+                    </Stack>
+                ) : (
+                    <div className={b('vdisks-item')} key={stringifyVdiskId(vDisk.VDiskId)}>
+                        <VDisk data={vDisk} nodes={nodes} />
+                    </div>
+                );
+            })}
+        </div>
+    ),
+    align: DataTable.CENTER,
+    width: 900,
+});
+
+export const getStorageTopGroupsColumns = (): Column<PreparedStorageGroup>[] => {
+    return [groupIdColumn, kindColumn, erasureColumn, usageColumn, usedColumn, limitColumn];
+};
+
+export const getStorageGroupsColumns = (nodes?: NodesMap): Column<PreparedStorageGroup>[] => {
+    return [
+        poolNameColumn,
+        kindColumn,
+        erasureColumn,
+        degradedColumn,
+        usageColumn,
+        groupIdColumn,
+        usedColumn,
+        limitColumn,
+        usedSpaceFlagColumn,
+        readColumn,
+        writeColumn,
+        getVdiscksColumn(nodes),
+    ];
+};

package/dist/containers/Storage/VDisk/VDisk.tsx

@@ -8,7 +8,7 @@ import {InternalLink} from '../../../components/InternalLink';
 import routes, {createHref} from '../../../routes';
 import {EFlag} from '../../../types/api/enums';
 import {EVDiskState, TVDiskStateInfo} from '../../../types/api/vdisk';
-import {stringifyVdiskId} from '../../../utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {isFullVDiskData} from '../../../utils/storage';
 
 import {STRUCTURE} from '../../Node/NodePages';

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -9,7 +9,7 @@ import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 
 import {EFlag} from '../../../types/api/enums';
 import type {TVDiskStateInfo} from '../../../types/api/vdisk';
-import {stringifyVdiskId} from '../../../utils';
+import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {isFullVDiskData} from '../../../utils/storage';
 

package/dist/containers/Tablet/TabletInfo/TabletInfo.tsx

@@ -5,7 +5,7 @@ import {Link as UIKitLink} from '@gravity-ui/uikit';
 import {ETabletState, TTabletStateInfo} from '../../../types/api/tablet';
 import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
 import routes, {createHref} from '../../../routes';
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 import {getDefaultNodePath} from '../../Node/NodePages';
 
 import {b} from '../Tablet';

package/dist/containers/Tablet/TabletTable/TabletTable.tsx

@@ -4,7 +4,7 @@ import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 import {InternalLink} from '../../../components/InternalLink/InternalLink';
 
 import type {ITabletPreparedHistoryItem} from '../../../types/store/tablet';
-import {calcUptime} from '../../../utils';
+import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
 import {getDefaultNodePath} from '../../Node/NodePages';
 
 import {b} from '../Tablet';

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-cn-lite';
 
 import type {IPreparedTopicStats} from '../../../../../types/store/topic';
-import {formatMsToUptime} from '../../../../../utils';
+import {formatMsToUptime} from '../../../../../utils/dataFormatters/dataFormatters';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 
 import './ConsumersTopicStats.scss';

package/dist/containers/Tenant/Diagnostics/Consumers/columns/columns.tsx

@@ -6,7 +6,7 @@ import type {IPreparedConsumerData} from '../../../../../types/store/topic';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../../../store/reducers/tenant/constants';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 import {InternalLink} from '../../../../../components/InternalLink';
-import {formatMsToUptime} from '../../../../../utils';
+import {formatMsToUptime} from '../../../../../utils/dataFormatters/dataFormatters';
 import routes, {createHref} from '../../../../../routes';
 
 import {TenantTabsGroups} from '../../../TenantPages';

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -8,7 +8,7 @@ import type {EPathType} from '../../../../types/api/schema';
 import type {AdditionalTenantsProps} from '../../../../types/additionalProps';
 import {Icon} from '../../../../components/Icon';
 import {useSetting} from '../../../../utils/hooks';
-import {ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN} from '../../../../utils/constants';
+import {DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS} from '../../../../utils/constants';
 import Overview from '../Overview/Overview';
 import {Healthcheck} from '../OldHealthcheck';
 import {TenantOverview} from '../TenantOverview/TenantOverview';
@@ -32,7 +32,7 @@ function DetailedOverview(props: DetailedOverviewProps) {
 
     const {currentSchemaPath} = useSelector((state: any) => state.schema);
 
-    const [newTenantDiagnostics] = useSetting(ENABLE_NEW_TENANT_DIAGNOSTICS_DESIGN);
+    const [displayMetricsCards] = useSetting(DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS);
 
     const openModalHandler = () => {
         setIsModalVisible(true);
@@ -59,7 +59,7 @@ function DetailedOverview(props: DetailedOverviewProps) {
     };
 
     const renderTenantOverview = () => {
-        if (newTenantDiagnostics) {
+        if (displayMetricsCards) {
             return (
                 <div className={b('section')}>
                     <TenantOverview

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/prepareTableInfo.ts

@@ -8,7 +8,7 @@ import type {
 import type {KeyValueRow} from '../../../../../types/api/query';
 import {EPathType} from '../../../../../types/api/schema';
 import {isNumeric} from '../../../../../utils/utils';
-import {formatBytes, formatNumber} from '../../../../../utils';
+import {formatBytes, formatNumber} from '../../../../../utils/dataFormatters/dataFormatters';
 import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
 import {formatObject, InfoViewerItem} from '../../../../../components/InfoViewer';
 import {

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.tsx

@@ -11,7 +11,7 @@ import {ResponseError} from '../../../../../components/Errors/ResponseError';
 
 import {useTypedSelector} from '../../../../../utils/hooks';
 import {formatDurationToShortTimeFormat} from '../../../../../utils/timeParsers';
-import {formatBps, formatBytes} from '../../../../../utils';
+import {formatBps, formatBytes} from '../../../../../utils/dataFormatters/dataFormatters';
 
 import {selectPreparedTopicStats} from '../../../../../store/reducers/topic';
 

package/dist/containers/Tenant/Diagnostics/Partitions/columns/columns.tsx

@@ -4,7 +4,7 @@ import block from 'bem-cn-lite';
 import {SpeedMultiMeter} from '../../../../../components/SpeedMultiMeter';
 import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
 import {getDefaultNodePath} from '../../../../Node/NodePages';
-import {formatBytes, formatMsToUptime} from '../../../../../utils';
+import {formatBytes, formatMsToUptime} from '../../../../../utils/dataFormatters/dataFormatters';
 import {isNumeric} from '../../../../../utils/utils';
 
 import {