ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/TableInfo.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { InfoViewer } from '../../../../../components/InfoViewer';
+import { cn } from '../../../../../utils/cn';
 import { getEntityName } from '../../../utils';
-import { prepareTableInfo } from './prepareTableInfo';
 import i18n from './i18n';
+import { prepareTableInfo } from './prepareTableInfo';
 import './TableInfo.scss';
 const b = cn('ydb-diagnostics-table-info');
 export const TableInfo = ({ data, type, olapStats }) => {
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
-    const { generalInfo = [], tableStatsInfo = [], tabletMetricsInfo = [], partitionConfigInfo = [], } = useMemo(() => prepareTableInfo(data, type, olapStats), [data, type, olapStats]);
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(InfoViewer, { info: generalInfo, title: entityName, className: b('info-block'), renderEmptyState: () => _jsx("div", Object.assign({ className: b('title') }, { children: entityName })) }), _jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx("div", Object.assign({ className: b('col') }, { children: tableStatsInfo.map((info, index) => (_jsx(InfoViewer, { info: info, title: index === 0 ? i18n('tableStats') : undefined, className: b('info-block'), renderEmptyState: () => null }, index))) })), tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (_jsxs("div", Object.assign({ className: b('col') }, { children: [_jsx(InfoViewer, { info: tabletMetricsInfo, title: i18n('tabletMetrics'), className: b('info-block'), renderEmptyState: () => null }), _jsx(InfoViewer, { info: partitionConfigInfo, title: i18n('partitionConfig'), className: b('info-block'), renderEmptyState: () => null })] }))) : null] }))] })));
+    const { generalInfo = [], tableStatsInfo = [], tabletMetricsInfo = [], partitionConfigInfo = [], } = React.useMemo(() => prepareTableInfo(data, type, olapStats), [data, type, olapStats]);
+    return (_jsxs("div", { className: b(), children: [_jsx(InfoViewer, { info: generalInfo, title: entityName, className: b('info-block'), renderEmptyState: () => _jsx("div", { className: b('title'), children: entityName }) }), _jsxs("div", { className: b('row'), children: [_jsx("div", { className: b('col'), children: tableStatsInfo.map((info, index) => (_jsx(InfoViewer, { info: info, title: index === 0 ? i18n('tableStats') : undefined, className: b('info-block'), renderEmptyState: () => null }, index))) }), tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (_jsxs("div", { className: b('col'), children: [_jsx(InfoViewer, { info: tabletMetricsInfo, title: i18n('tabletMetrics'), className: b('info-block'), renderEmptyState: () => null }), _jsx(InfoViewer, { info: partitionConfigInfo, title: i18n('partitionConfig'), className: b('info-block'), renderEmptyState: () => null })] })) : null] })] }));
 };

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "tableStats" | "tabletMetrics" | "partitionConfig", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tenant/Diagnostics/Overview/TableInfo/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../../../../utils/i18n';
+import { registerKeysets } from '../../../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-diagnostics-overview-table-info';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

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

@@ -1,7 +1,7 @@
-import type { TEvDescribeSchemeResult } from '../../../../../types/api/schema';
+import type { InfoViewerItem } from '../../../../../components/InfoViewer';
 import type { KeyValueRow } from '../../../../../types/api/query';
+import type { TEvDescribeSchemeResult } from '../../../../../types/api/schema';
 import { EPathType } from '../../../../../types/api/schema';
-import { InfoViewerItem } from '../../../../../components/InfoViewer';
 /** Prepares data for Table, ColumnTable and ColumnStore */
 export declare const prepareTableInfo: (data?: TEvDescribeSchemeResult, type?: EPathType, olapStats?: KeyValueRow[]) => {
     generalInfo?: undefined;

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

@@ -1,9 +1,9 @@
+import { formatObject } from '../../../../../components/InfoViewer';
+import { formatFollowerGroupItem, formatPartitionConfigItem, formatTableStatsItem, formatTabletMetricsItem, } from '../../../../../components/InfoViewer/formatters';
 import { EPathType } from '../../../../../types/api/schema';
-import { isNumeric } from '../../../../../utils/utils';
 import { formatBytes, formatNumber } from '../../../../../utils/dataFormatters/dataFormatters';
 import { formatDurationToShortTimeFormat } from '../../../../../utils/timeParsers';
-import { formatObject } from '../../../../../components/InfoViewer';
-import { formatFollowerGroupItem, formatPartitionConfigItem, formatTableStatsItem, formatTabletMetricsItem, } from '../../../../../components/InfoViewer/formatters';
+import { isNumeric } from '../../../../../utils/utils';
 const isInStoreColumnTable = (table) => {
     // SchemaPresetId could be 0
     return table.SchemaPresetName && table.SchemaPresetId !== undefined;
@@ -151,6 +151,7 @@ export const prepareTableInfo = (data, type, olapStats) => {
             }),
         ];
     }
+    //@ts-expect-error
     const tabletMetricsInfo = formatObject(formatTabletMetricsItem, TabletMetrics);
     let partitionConfigInfo = [];
     if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {

package/dist/containers/Tenant/Diagnostics/Overview/TopicInfo/TopicInfo.d.ts

@@ -3,5 +3,5 @@ interface TopicInfoProps {
     data?: TEvDescribeSchemeResult;
 }
 /** Displays overview for PersQueueGroup EPathType */
-export declare const TopicInfo: ({ data }: TopicInfoProps) => JSX.Element;
+export declare const TopicInfo: ({ data }: TopicInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/Overview/TopicInfo/TopicInfo.js

@@ -2,17 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InfoViewer } from '../../../../../components/InfoViewer';
 import { useTypedSelector } from '../../../../../utils/hooks';
 import { getEntityName } from '../../../utils';
-import { prepareTopicSchemaInfo } from '../utils';
 import { TopicStats } from '../TopicStats';
+import { prepareTopicSchemaInfo } from '../utils';
 /** Displays overview for PersQueueGroup EPathType */
 export const TopicInfo = ({ data }) => {
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
     const { error: schemaError } = useTypedSelector((state) => state.schema);
     if (schemaError) {
-        return _jsx("div", Object.assign({ className: "error" }, { children: schemaError.statusText }));
+        return _jsx("div", { className: "error", children: schemaError.statusText });
     }
     if (!data) {
-        return _jsxs("div", Object.assign({ className: "error" }, { children: ["No ", entityName, " data"] }));
+        return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }
     return (_jsxs("div", { children: [_jsx(InfoViewer, { title: entityName, info: prepareTopicSchemaInfo(data) }), _jsx(TopicStats, {})] }));
 };

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.d.ts

@@ -1,2 +1,2 @@
 import './TopicStats.scss';
-export declare const TopicStats: () => JSX.Element;
+export declare const TopicStats: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
-import { Loader } from '../../../../../components/Loader';
+import { ResponseError } from '../../../../../components/Errors/ResponseError';
 import { InfoViewer } from '../../../../../components/InfoViewer';
-import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
 import { LabelWithPopover } from '../../../../../components/LabelWithPopover';
 import { LagPopoverContent } from '../../../../../components/LagPopoverContent';
-import { ResponseError } from '../../../../../components/Errors/ResponseError';
+import { Loader } from '../../../../../components/Loader';
+import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
+import { selectPreparedTopicStats, topicApi } from '../../../../../store/reducers/topic';
+import { cn } from '../../../../../utils/cn';
+import { formatBps, formatBytes } from '../../../../../utils/dataFormatters/dataFormatters';
 import { useTypedSelector } from '../../../../../utils/hooks';
 import { formatDurationToShortTimeFormat } from '../../../../../utils/timeParsers';
-import { formatBps, formatBytes } from '../../../../../utils/dataFormatters/dataFormatters';
-import { selectPreparedTopicStats } from '../../../../../store/reducers/topic';
 import i18n from './i18n';
 import './TopicStats.scss';
 const b = cn('ydb-overview-topic-stats');
@@ -48,16 +48,18 @@ const prepareBytesWrittenInfo = (data) => {
     ];
 };
 export const TopicStats = () => {
-    const { error, loading, wasLoaded } = useTypedSelector((state) => state.topic);
-    const data = useTypedSelector(selectPreparedTopicStats);
-    if (loading && !wasLoaded) {
-        return (_jsx("div", Object.assign({ className: b() }, { children: _jsx(Loader, { size: "s" }) })));
+    const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
+    const { currentData, isFetching, error } = topicApi.useGetTopicQuery({ path: currentSchemaPath }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const data = useTypedSelector((state) => selectPreparedTopicStats(state, currentSchemaPath));
+    if (loading) {
+        return (_jsx("div", { className: b(), children: _jsx(Loader, { size: "s" }) }));
     }
     // If there is at least some empty data object
     // we initialize its fields with zero values
     // so no data at all is considered to be error as well
     if (error || !data) {
-        return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: "Stats" })), _jsx(ResponseError, { error: error })] })));
+        return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('title'), children: "Stats" }), _jsx(ResponseError, { error: error })] }));
     }
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: "Stats" })), _jsx("div", Object.assign({ className: b('info') }, { children: _jsx(InfoViewer, { info: prepareTopicInfo(data), multilineLabels: true }) })), _jsx("div", Object.assign({ className: b('bytes-written') }, { children: _jsx(InfoViewer, { info: prepareBytesWrittenInfo(data) }) }))] })));
+    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('title'), children: "Stats" }), _jsx("div", { className: b('info'), children: _jsx(InfoViewer, { info: prepareTopicInfo(data), multilineLabels: true }) }), _jsx("div", { className: b('bytes-written'), children: _jsx(InfoViewer, { info: prepareBytesWrittenInfo(data) }) })] }));
 };

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "writeLagPopover" | "writeIdleTimePopover", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../../../../utils/i18n';
+import { registerKeysets } from '../../../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-diagnostics-overview-topic-stats';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

package/dist/containers/Tenant/Diagnostics/Overview/utils/prepareTopicSchemaInfo.d.ts

@@ -1,3 +1,3 @@
+import type { InfoViewerItem } from '../../../../../components/InfoViewer';
 import type { TEvDescribeSchemeResult } from '../../../../../types/api/schema';
-import { InfoViewerItem } from '../../../../../components/InfoViewer';
 export declare const prepareTopicSchemaInfo: (data?: TEvDescribeSchemeResult) => Array<InfoViewerItem>;

package/dist/containers/Tenant/Diagnostics/Overview/utils/prepareTopicSchemaInfo.js

@@ -9,14 +9,17 @@ export const prepareTopicSchemaInfo = (data) => {
     const { Partitions = [], PQTabletConfig = { PartitionConfig: { LifetimeSeconds: 0 } } } = pqGroupData;
     const { Codecs, MeteringMode } = PQTabletConfig;
     const { WriteSpeedInBytesPerSecond, StorageLimitBytes } = PQTabletConfig.PartitionConfig;
+    //@ts-expect-error
     const pqGeneralInfo = formatObject(formatPQGroupItem, {
         Partitions,
         PQTabletConfig,
     });
+    //@ts-expect-error
     const pqPartitionInfo = formatObject(formatPQPartitionConfig, {
         StorageLimitBytes,
         WriteSpeedInBytesPerSecond,
     });
+    //@ts-expect-error
     const pqTabletInfo = formatObject(formatPQTabletConfig, {
         Codecs,
         MeteringMode,

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/Headers.d.ts

@@ -2,10 +2,10 @@ import './Headers.scss';
 interface MultilineHeaderProps {
     title: string;
 }
-export declare const MultilineHeader: ({ title }: MultilineHeaderProps) => JSX.Element;
-export declare const ReadSessionHeader: () => JSX.Element;
-export declare const WriteLagsHeader: () => JSX.Element;
-export declare const ReadLagsHeader: () => JSX.Element;
-export declare const UnreadMessagesHeader: () => JSX.Element;
-export declare const UncommitedMessagesHeader: () => JSX.Element;
+export declare const MultilineHeader: ({ title }: MultilineHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReadSessionHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const WriteLagsHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReadLagsHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const UnreadMessagesHeader: () => import("react/jsx-runtime").JSX.Element;
+export declare const UncommitedMessagesHeader: () => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/Partitions/Headers/Headers.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
 import { LabelWithPopover } from '../../../../../components/LabelWithPopover';
 import { LagPopoverContent } from '../../../../../components/LagPopoverContent';
-import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES } from '../utils/constants';
+import { cn } from '../../../../../utils/cn';
 import i18n from '../i18n';
+import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITLES } from '../utils/constants';
 import './Headers.scss';
-const b = block('ydb-diagnostics-partitions-columns-header');
-export const MultilineHeader = ({ title }) => (_jsx("div", Object.assign({ className: b('multiline') }, { children: title })));
-export const ReadSessionHeader = () => (_jsx("div", Object.assign({ className: b('read-session') }, { children: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_SESSION_ID] })));
-export const WriteLagsHeader = () => (_jsx(LabelWithPopover, { className: b('lags'), text: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS], popoverContent: _jsx(LagPopoverContent, { text: i18n('lagsPopover.writeLags'), type: "write" }) }));
-export const ReadLagsHeader = () => (_jsx(LabelWithPopover, { className: b('lags'), text: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_LAGS], popoverContent: _jsx(LagPopoverContent, { text: i18n('lagsPopover.readLags'), type: "read" }) }));
-export const UnreadMessagesHeader = () => (_jsx(LabelWithPopover, { className: b('messages'), text: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES], popoverContent: _jsx("div", Object.assign({ className: b('messages-popover-content') }, { children: i18n('headers.unread') })) }));
-export const UncommitedMessagesHeader = () => (_jsx(LabelWithPopover, { className: b('messages'), text: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES], popoverContent: _jsx("div", Object.assign({ className: b('messages-popover-content') }, { children: i18n('headers.uncommited') })) }));
+const b = cn('ydb-diagnostics-partitions-columns-header');
+export const MultilineHeader = ({ title }) => (_jsx("div", { className: b('multiline'), children: title }));
+export const ReadSessionHeader = () => (_jsx("div", { className: b('read-session'), children: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.READ_SESSION_ID] }));
+export const WriteLagsHeader = () => (_jsx(LabelWithPopover, { className: b('lags'), text: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.WRITE_LAGS], popoverContent: _jsx(LagPopoverContent, { text: i18n('lagsPopover.writeLags'), type: "write" }) }));
+export const ReadLagsHeader = () => (_jsx(LabelWithPopover, { className: b('lags'), text: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.READ_LAGS], popoverContent: _jsx(LagPopoverContent, { text: i18n('lagsPopover.readLags'), type: "read" }) }));
+export const UnreadMessagesHeader = () => (_jsx(LabelWithPopover, { className: b('messages'), text: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.UNREAD_MESSAGES], popoverContent: _jsx("div", { className: b('messages-popover-content'), children: i18n('headers.unread') }) }));
+export const UncommitedMessagesHeader = () => (_jsx(LabelWithPopover, { className: b('messages'), text: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.UNCOMMITED_MESSAGES], popoverContent: _jsx("div", { className: b('messages-popover-content'), children: i18n('headers.uncommited') }) }));

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.d.ts

@@ -1,16 +1,7 @@
 import './Partitions.scss';
-export declare const b: {
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string, mixin?: string | string[] | undefined): string;
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
-    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string): string;
-    (mods: import("bem-cn-lite").Modifications | null): string;
-    (): string;
-    builder(): import("bem-cn").Block;
-};
+export declare const b: import("@bem-react/classname").ClassNameFormatter;
 interface PartitionsProps {
     path?: string;
 }
-export declare const Partitions: ({ path }: PartitionsProps) => JSX.Element;
+export declare const Partitions: ({ path }: PartitionsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/Partitions/Partitions.js

@@ -1,63 +1,59 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
-import { useAutofetcher, useTypedSelector, useTypedDispatch, useSetting, } from '../../../../utils/hooks';
-import { DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY } from '../../../../utils/constants';
-import { getNodesList, selectNodesMap } from '../../../../store/reducers/nodesList';
-import { cleanTopicData, getTopic, selectConsumersNames, setDataWasNotLoaded as setTopicDataWasNotLoaded, } from '../../../../store/reducers/topic';
-import { getPartitions, setDataWasNotLoaded as setPartitionsDataWasNotLoaded, setSelectedConsumer, } from '../../../../store/reducers/partitions/partitions';
-import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
+import { skipToken } from '@reduxjs/toolkit/query';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { addHostToPartitions } from './utils';
+import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
+import { nodesListApi, selectNodesMap } from '../../../../store/reducers/nodesList';
+import { partitionsApi, setSelectedConsumer } from '../../../../store/reducers/partitions/partitions';
+import { selectConsumersNames, topicApi } from '../../../../store/reducers/topic';
+import { cn } from '../../../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS, PARTITIONS_HIDDEN_COLUMNS_KEY } from '../../../../utils/constants';
+import { useSetting, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { PartitionsControls } from './PartitionsControls/PartitionsControls';
-import { useGetPartitionsColumns } from './utils/useGetPartitionsColumns';
 import i18n from './i18n';
+import { addHostToPartitions } from './utils';
+import { useGetPartitionsColumns } from './utils/useGetPartitionsColumns';
 import './Partitions.scss';
-export const b = block('ydb-diagnostics-partitions');
+export const b = cn('ydb-diagnostics-partitions');
 export const Partitions = ({ path }) => {
     const dispatch = useTypedDispatch();
     // Manual path control to ensure that topic state will be reset before data fetch
     // so no request with wrong params will be sent
-    const [componentCurrentPath, setComponentCurrentPath] = useState(path);
-    const [partitionsToRender, setPartitionsToRender] = useState([]);
-    const consumers = useTypedSelector(selectConsumersNames);
-    const nodesMap = useTypedSelector(selectNodesMap);
+    const [componentCurrentPath, setComponentCurrentPath] = React.useState(path);
+    const [partitionsToRender, setPartitionsToRender] = React.useState([]);
+    const consumers = useTypedSelector((state) => selectConsumersNames(state, path));
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading: partitionsLoading, wasLoaded: partitionsWasLoaded, error: partitionsError, partitions: rawPartitions, selectedConsumer, } = useTypedSelector((state) => state.partitions);
-    const { loading: topicLoading, wasLoaded: topicWasLoaded, error: topicError, } = useTypedSelector((state) => state.topic);
-    const { loading: nodesLoading, wasLoaded: nodesWasLoaded, error: nodesError, } = useTypedSelector((state) => state.nodesList);
+    const { selectedConsumer } = useTypedSelector((state) => state.partitions);
+    const { currentData: topicData, isFetching: topicIsFetching, error: topicError, } = topicApi.useGetTopicQuery({ path });
+    const topicLoading = topicIsFetching && topicData === undefined;
+    const { currentData: nodesData, isFetching: nodesIsFetching, error: nodesError, } = nodesListApi.useGetNodesListQuery(undefined);
+    const nodesLoading = nodesIsFetching && nodesData === undefined;
+    const nodesMap = useTypedSelector(selectNodesMap);
     const [hiddenColumns, setHiddenColumns] = useSetting(PARTITIONS_HIDDEN_COLUMNS_KEY);
     const [columns, columnsIdsForSelector] = useGetPartitionsColumns(selectedConsumer);
-    useEffect(() => {
-        dispatch(cleanTopicData());
-        dispatch(setTopicDataWasNotLoaded());
-        dispatch(getNodesList());
-        dispatch(getTopic(path));
+    React.useEffect(() => {
         setComponentCurrentPath(path);
     }, [dispatch, path]);
-    const partitionsWithHosts = useMemo(() => {
+    const params = !topicLoading && componentCurrentPath
+        ? { path: componentCurrentPath, consumerName: selectedConsumer }
+        : skipToken;
+    const { currentData: partitionsData, isFetching: partitionsIsFetching, error: partitionsError, } = partitionsApi.useGetPartitionsQuery(params, { pollingInterval: autorefresh });
+    const partitionsLoading = partitionsIsFetching && partitionsData === undefined;
+    const rawPartitions = partitionsData;
+    const partitionsWithHosts = React.useMemo(() => {
         return addHostToPartitions(rawPartitions, nodesMap);
     }, [rawPartitions, nodesMap]);
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setPartitionsDataWasNotLoaded());
-        }
-        if (topicWasLoaded && componentCurrentPath) {
-            dispatch(getPartitions(componentCurrentPath, selectedConsumer));
-        }
-    }, [dispatch, selectedConsumer, componentCurrentPath, topicWasLoaded]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
     // Wrong consumer could be passed in search query
     // Reset consumer if it doesn't exist for current topic
-    useEffect(() => {
-        const isTopicWithoutConsumers = topicWasLoaded && !consumers;
+    React.useEffect(() => {
+        const isTopicWithoutConsumers = !topicLoading && !consumers;
         const wrongSelectedConsumer = selectedConsumer && consumers && !consumers.includes(selectedConsumer);
         if (isTopicWithoutConsumers || wrongSelectedConsumer) {
             dispatch(setSelectedConsumer(''));
         }
-    }, [dispatch, topicWasLoaded, selectedConsumer, consumers]);
-    const columnsToShow = useMemo(() => {
+    }, [dispatch, topicLoading, selectedConsumer, consumers]);
+    const columnsToShow = React.useMemo(() => {
         return columns.filter((column) => !hiddenColumns.includes(column.name));
     }, [columns, hiddenColumns]);
     const hadleTableColumnsSetupChange = (newHiddenColumns) => {
@@ -66,9 +62,7 @@ export const Partitions = ({ path }) => {
     const handleSelectedConsumerChange = (value) => {
         dispatch(setSelectedConsumer(value));
     };
-    const loading = (topicLoading && !topicWasLoaded) ||
-        (nodesLoading && !nodesWasLoaded) ||
-        (partitionsLoading && !partitionsWasLoaded);
+    const loading = topicLoading || nodesLoading || partitionsLoading;
     const error = nodesError || topicError || partitionsError;
     const getContent = () => {
         if (loading) {
@@ -79,5 +73,5 @@ export const Partitions = ({ path }) => {
         }
         return (_jsx(DataTable, { theme: "yandex-cloud", data: partitionsToRender, columns: columnsToShow, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }));
     };
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(PartitionsControls, { consumers: consumers, selectedConsumer: selectedConsumer, onSelectedConsumerChange: handleSelectedConsumerChange, selectDisabled: Boolean(error) || loading, partitions: partitionsWithHosts, onSearchChange: setPartitionsToRender, hiddenColumns: hiddenColumns, onHiddenColumnsChange: hadleTableColumnsSetupChange, initialColumnsIds: columnsIdsForSelector }), _jsx("div", Object.assign({ className: b('table-wrapper') }, { children: _jsx("div", Object.assign({ className: b('table-content') }, { children: getContent() })) }))] })));
+    return (_jsxs("div", { className: b(), children: [_jsx(PartitionsControls, { consumers: consumers, selectedConsumer: selectedConsumer, onSelectedConsumerChange: handleSelectedConsumerChange, selectDisabled: Boolean(error) || loading, partitions: partitionsWithHosts, onSearchChange: setPartitionsToRender, hiddenColumns: hiddenColumns, onHiddenColumnsChange: hadleTableColumnsSetupChange, initialColumnsIds: columnsIdsForSelector }), _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: getContent() }) })] }));
 };

package/dist/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.d.ts

@@ -10,5 +10,5 @@ interface PartitionsControlsProps {
     onHiddenColumnsChange: (newHiddenColumns: string[]) => void;
     initialColumnsIds: string[];
 }
-export declare const PartitionsControls: ({ consumers, selectedConsumer, onSelectedConsumerChange, selectDisabled, partitions, onSearchChange, hiddenColumns, onHiddenColumnsChange, initialColumnsIds, }: PartitionsControlsProps) => JSX.Element;
+export declare const PartitionsControls: ({ consumers, selectedConsumer, onSelectedConsumerChange, selectDisabled, partitions, onSearchChange, hiddenColumns, onHiddenColumnsChange, initialColumnsIds, }: PartitionsControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/Partitions/PartitionsControls/PartitionsControls.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { escapeRegExp } from 'lodash/fp';
+import React from 'react';
 import { Select, TableColumnSetup } from '@gravity-ui/uikit';
+import escapeRegExp from 'lodash/escapeRegExp';
 import { Search } from '../../../../../components/Search/Search';
-import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES } from '../utils/constants';
-import i18n from '../i18n';
 import { b } from '../Partitions';
+import i18n from '../i18n';
+import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITLES } from '../utils/constants';
 export const PartitionsControls = ({ consumers, selectedConsumer, onSelectedConsumerChange, selectDisabled, partitions, onSearchChange, hiddenColumns, onHiddenColumnsChange, initialColumnsIds, }) => {
-    const [generalSearchValue, setGeneralSearchValue] = useState('');
-    const [partitionIdSearchValue, setPartitionIdSearchValue] = useState('');
-    useEffect(() => {
+    const [generalSearchValue, setGeneralSearchValue] = React.useState('');
+    const [partitionIdSearchValue, setPartitionIdSearchValue] = React.useState('');
+    React.useEffect(() => {
         if (!partitions) {
             return;
         }
@@ -33,7 +33,7 @@ export const PartitionsControls = ({ consumers, selectedConsumer, onSelectedCons
         });
         onSearchChange(filteredPartitions);
     }, [partitionIdSearchValue, generalSearchValue, partitions, onSearchChange]);
-    const consumersToSelect = useMemo(() => {
+    const consumersToSelect = React.useMemo(() => {
         const options = consumers && consumers.length
             ? consumers.map((consumer) => ({
                 value: consumer,
@@ -42,15 +42,25 @@ export const PartitionsControls = ({ consumers, selectedConsumer, onSelectedCons
             : [];
         return [{ value: '', content: i18n('controls.consumerSelector.emptyOption') }, ...options];
     }, [consumers]);
-    const columnsToSelect = useMemo(() => {
-        return initialColumnsIds.map((id) => {
-            return {
-                title: PARTITIONS_COLUMNS_TITILES[id],
+    const columnsToSelect = React.useMemo(() => {
+        const columns = [];
+        for (const id of initialColumnsIds) {
+            const isId = id === PARTITIONS_COLUMNS_IDS.PARTITION_ID;
+            const column = {
+                title: PARTITIONS_COLUMNS_TITLES[id],
                 selected: Boolean(!hiddenColumns.includes(id)),
                 id: id,
-                required: id === PARTITIONS_COLUMNS_IDS.PARTITION_ID,
+                required: isId,
+                sticky: isId ? 'start' : undefined,
             };
-        });
+            if (isId) {
+                columns.unshift(column);
+            }
+            else {
+                columns.push(column);
+            }
+        }
+        return columns;
     }, [initialColumnsIds, hiddenColumns]);
     const handleConsumerSelectChange = (value) => {
         onSelectedConsumerChange(value[0]);
@@ -61,7 +71,7 @@ export const PartitionsControls = ({ consumers, selectedConsumer, onSelectedCons
     const handleGeneralSearchChange = (value) => {
         setGeneralSearchValue(value);
     };
-    const hadleTableColumnsSetupChange = (value) => {
+    const handleTableColumnsSetupChange = (value) => {
         const result = [...hiddenColumns];
         // Process current set of columns
         // This way we do not remove from hidden these columns, that are not displayed currently
@@ -77,7 +87,7 @@ export const PartitionsControls = ({ consumers, selectedConsumer, onSelectedCons
         onHiddenColumnsChange(result);
     };
     const renderOption = (option) => {
-        return (_jsx("div", Object.assign({ className: b('select-option', { empty: option.value === '' }) }, { children: option.content })));
+        return (_jsx("div", { className: b('select-option', { empty: option.value === '' }), children: option.content }));
     };
-    return (_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(Select, { className: b('consumer-select'), label: i18n('controls.consumerSelector'), options: consumersToSelect, value: [selectedConsumer], onUpdate: handleConsumerSelectChange, filterable: consumers && consumers.length > 5, disabled: selectDisabled || !consumers || !consumers.length, renderOption: renderOption, renderSelectedOption: renderOption }), _jsx(Search, { onChange: handlePartitionIdSearchChange, placeholder: i18n('controls.partitionSearch'), className: b('search', { partition: true }), value: partitionIdSearchValue }), _jsx(Search, { onChange: handleGeneralSearchChange, placeholder: i18n('controls.generalSearch'), className: b('search', { general: true }), value: generalSearchValue }), _jsx(TableColumnSetup, { popupWidth: "242px", items: columnsToSelect, showStatus: true, onUpdate: hadleTableColumnsSetupChange }, "TableColumnSetup")] })));
+    return (_jsxs("div", { className: b('controls'), children: [_jsx(Select, { className: b('consumer-select'), label: i18n('controls.consumerSelector'), options: consumersToSelect, value: [selectedConsumer], onUpdate: handleConsumerSelectChange, filterable: consumers && consumers.length > 5, disabled: selectDisabled || !consumers || !consumers.length, renderOption: renderOption, renderSelectedOption: renderOption }), _jsx(Search, { onChange: handlePartitionIdSearchChange, placeholder: i18n('controls.partitionSearch'), className: b('search', { partition: true }), value: partitionIdSearchValue }), _jsx(Search, { onChange: handleGeneralSearchChange, placeholder: i18n('controls.generalSearch'), className: b('search', { general: true }), value: generalSearchValue }), _jsx(TableColumnSetup, { popupWidth: 242, items: columnsToSelect, showStatus: true, onUpdate: handleTableColumnsSetupChange, sortable: false }, "TableColumnSetup")] }));
 };

package/dist/containers/Tenant/Diagnostics/Partitions/columns/columns.d.ts

@@ -1,4 +1,4 @@
-import { Column } from '@gravity-ui/react-data-table';
+import type { Column } from '@gravity-ui/react-data-table';
 import type { PreparedPartitionDataWithHosts } from '../utils/types';
 import './Columns.scss';
 export declare const allColumns: Column<PreparedPartitionDataWithHosts>[];

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

@@ -1,39 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
-import block from 'bem-cn-lite';
-import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
 import { EntityStatus } from '../../../../../components/EntityStatus/EntityStatus';
-import { getDefaultNodePath } from '../../../../Node/NodePages';
+import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
+import { cn } from '../../../../../utils/cn';
 import { formatBytes, formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
 import { isNumeric } from '../../../../../utils/utils';
-import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITILES, PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS, PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES, PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS, PARTITIONS_WRITE_LAGS_SUB_COLUMNS_TITLES, generalPartitionColumnsIds, } from '../utils/constants';
+import { getDefaultNodePath } from '../../../../Node/NodePages';
 import { MultilineHeader, ReadLagsHeader, ReadSessionHeader, UncommitedMessagesHeader, UnreadMessagesHeader, WriteLagsHeader, } from '../Headers';
+import { PARTITIONS_COLUMNS_IDS, PARTITIONS_COLUMNS_TITLES, PARTITIONS_READ_LAGS_SUB_COLUMNS_IDS, PARTITIONS_READ_LAGS_SUB_COLUMNS_TITLES, PARTITIONS_WRITE_LAGS_SUB_COLUMNS_IDS, PARTITIONS_WRITE_LAGS_SUB_COLUMNS_TITLES, generalPartitionColumnsIds, } from '../utils/constants';
 import './Columns.scss';
-const b = block('ydb-diagnostics-partitions-columns');
+const b = cn('ydb-diagnostics-partitions-columns');
 export const allColumns = [
     {
         name: PARTITIONS_COLUMNS_IDS.PARTITION_ID,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.PARTITION_ID] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.PARTITION_ID] })),
         sortAccessor: (row) => isNumeric(row.partitionId) && Number(row.partitionId),
         align: DataTable.LEFT,
         render: ({ row }) => row.partitionId,
     },
     {
         name: PARTITIONS_COLUMNS_IDS.STORE_SIZE,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.STORE_SIZE] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.STORE_SIZE] })),
         align: DataTable.RIGHT,
         render: ({ row }) => formatBytes(row.storeSize),
     },
     {
         name: PARTITIONS_COLUMNS_IDS.WRITE_SPEED,
-        header: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.WRITE_SPEED],
+        header: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.WRITE_SPEED],
         align: DataTable.LEFT,
         sortAccessor: (row) => row.writeSpeed.perMinute,
         render: ({ row }) => _jsx(SpeedMultiMeter, { data: row.writeSpeed }),
     },
     {
         name: PARTITIONS_COLUMNS_IDS.READ_SPEED,
-        header: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READ_SPEED],
+        header: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.READ_SPEED],
         align: DataTable.LEFT,
         sortAccessor: (row) => { var _a; return (_a = row.readSpeed) === null || _a === void 0 ? void 0 : _a.perMinute; },
         render: ({ row }) => _jsx(SpeedMultiMeter, { data: row.readSpeed }),
@@ -96,21 +96,21 @@ export const allColumns = [
     },
     {
         name: PARTITIONS_COLUMNS_IDS.START_OFFSET,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.START_OFFSET] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.START_OFFSET] })),
         sortAccessor: (row) => isNumeric(row.startOffset) && Number(row.startOffset),
         align: DataTable.RIGHT,
         render: ({ row }) => row.startOffset,
     },
     {
         name: PARTITIONS_COLUMNS_IDS.END_OFFSET,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.END_OFFSET] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.END_OFFSET] })),
         sortAccessor: (row) => isNumeric(row.endOffset) && Number(row.endOffset),
         align: DataTable.RIGHT,
         render: ({ row }) => row.endOffset,
     },
     {
         name: PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.COMMITED_OFFSET] })),
         sortAccessor: (row) => isNumeric(row.commitedOffset) && Number(row.commitedOffset),
         align: DataTable.RIGHT,
         render: ({ row }) => row.commitedOffset,
@@ -123,19 +123,19 @@ export const allColumns = [
     },
     {
         name: PARTITIONS_COLUMNS_IDS.READER_NAME,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.READER_NAME] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.READER_NAME] })),
         align: DataTable.LEFT,
         render: ({ row }) => row.readerName ? (_jsx(EntityStatus, { name: row.readerName, showStatus: false, hasClipboardButton: true, className: b('string-with-copy') })) : ('–'),
     },
     {
         name: PARTITIONS_COLUMNS_IDS.PARTITION_HOST,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.PARTITION_HOST] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.PARTITION_HOST] })),
         align: DataTable.LEFT,
         render: ({ row }) => row.partitionNodeId && row.partitionHost ? (_jsx(EntityStatus, { name: row.partitionHost, path: getDefaultNodePath(row.partitionNodeId), showStatus: false, hasClipboardButton: true, className: b('string-with-copy') })) : ('–'),
     },
     {
         name: PARTITIONS_COLUMNS_IDS.CONNECTION_HOST,
-        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITILES[PARTITIONS_COLUMNS_IDS.CONNECTION_HOST] })),
+        header: (_jsx(MultilineHeader, { title: PARTITIONS_COLUMNS_TITLES[PARTITIONS_COLUMNS_IDS.CONNECTION_HOST] })),
         align: DataTable.LEFT,
         render: ({ row }) => row.connectionNodeId && row.connectionHost ? (_jsx(EntityStatus, { name: row.connectionHost, path: getDefaultNodePath(row.connectionNodeId), showStatus: false, hasClipboardButton: true, className: b('string-with-copy') })) : ('–'),
     },

package/dist/containers/Tenant/Diagnostics/Partitions/i18n/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+declare const _default: (key: "noConsumersMessage.topic" | "noConsumersMessage.stream" | "lagsPopover.readLags" | "table.emptyDataMessage" | "lagsPopover.writeLags" | "headers.unread" | "headers.uncommited" | "controls.consumerSelector" | "controls.consumerSelector.emptyOption" | "controls.partitionSearch" | "controls.generalSearch", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tenant/Diagnostics/Partitions/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../../../utils/i18n';
+import { registerKeysets } from '../../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-diagnostics-partitions';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });