ydb-embedded-ui 5.5.0 → 6.0.0

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

@@ -1,64 +1,46 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
+import { skipToken } from '@reduxjs/toolkit/query';
 import { shallowEqual } from 'react-redux';
-import { Loader } from '../../../../components/Loader';
-import { TableIndexInfo } from '../../../../components/InfoViewer/schemaInfo';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { EPathType } from '../../../../types/api/schema';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../../../utils/hooks';
+import { TableIndexInfo } from '../../../../components/InfoViewer/schemaInfo';
+import { Loader } from '../../../../components/Loader';
+import { olapApi } from '../../../../store/reducers/olapStats';
+import { overviewApi } from '../../../../store/reducers/overview/overview';
 import { selectSchemaMergedChildrenPaths } from '../../../../store/reducers/schema/schema';
-import { getTopic } from '../../../../store/reducers/topic';
-import { getOlapStats, resetLoadingState as resetOlapLoadingState, } from '../../../../store/reducers/olapStats';
-import { getOverview, getOverviewBatched, setCurrentOverviewPath, setDataWasNotLoaded, } from '../../../../store/reducers/overview/overview';
-import { isEntityWithMergedImplementation, isColumnEntityType, isTableType, isPathTypeWithTopic, } from '../../utils/schema';
-import { ExternalTableInfo } from '../../Info/ExternalTable/ExternalTable';
+import { EPathType } from '../../../../types/api/schema';
+import { useTypedSelector } from '../../../../utils/hooks';
 import { ExternalDataSourceInfo } from '../../Info/ExternalDataSource/ExternalDataSource';
-import { TopicInfo } from './TopicInfo';
+import { ExternalTableInfo } from '../../Info/ExternalTable/ExternalTable';
+import { isColumnEntityType, isEntityWithMergedImplementation, isTableType, } from '../../utils/schema';
 import { ChangefeedInfo } from './ChangefeedInfo';
 import { TableInfo } from './TableInfo';
+import { TopicInfo } from './TopicInfo';
 function Overview({ type, tenantName }) {
-    const dispatch = useTypedDispatch();
     const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
-    const { data: rawData, additionalData, loading: overviewLoading, wasLoaded: overviewWasLoaded, error: overviewError, } = useTypedSelector((state) => state.overview);
-    const { data: { result: olapStats } = { result: undefined }, loading: olapStatsLoading, wasLoaded: olapStatsWasLoaded, } = useTypedSelector((state) => state.olapStats);
+    const schemaPath = currentSchemaPath || tenantName;
+    const olapParams = isTableType(type) && isColumnEntityType(type) ? { path: schemaPath } : skipToken;
+    const { currentData: olapData, isFetching: olapIsFetching } = olapApi.useGetOlapStatsQuery(olapParams, { pollingInterval: autorefresh });
+    const olapStatsLoading = olapIsFetching && olapData === undefined;
+    const { result: olapStats } = olapData || { result: undefined };
     const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
     // shalloEqual prevents rerenders when new schema data is loaded
     const mergedChildrenPaths = useTypedSelector((state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type), shallowEqual);
-    const entityLoading = (overviewLoading && !overviewWasLoaded) || (olapStatsLoading && !olapStatsWasLoaded);
-    const entityNotReady = isEntityWithMergedImpl && !mergedChildrenPaths;
-    const fetchData = useCallback((isBackground) => {
-        const schemaPath = currentSchemaPath || tenantName;
-        if (!schemaPath) {
-            return;
-        }
-        dispatch(setCurrentOverviewPath(schemaPath));
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
+    let paths = skipToken;
+    if (schemaPath) {
         if (!isEntityWithMergedImpl) {
-            dispatch(getOverview({ path: schemaPath }));
+            paths = [schemaPath];
         }
         else if (mergedChildrenPaths) {
-            dispatch(getOverviewBatched([schemaPath, ...mergedChildrenPaths]));
+            paths = [schemaPath, ...mergedChildrenPaths];
         }
-        if (isTableType(type) && isColumnEntityType(type)) {
-            if (!isBackground) {
-                dispatch(resetOlapLoadingState());
-            }
-            dispatch(getOlapStats({ path: schemaPath }));
-        }
-        if (isPathTypeWithTopic(type)) {
-            dispatch(getTopic(currentSchemaPath));
-        }
-    }, [
-        tenantName,
-        currentSchemaPath,
-        type,
-        isEntityWithMergedImpl,
-        mergedChildrenPaths,
-        dispatch,
-    ]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
+    }
+    const { currentData, isFetching, error: overviewError, } = overviewApi.useGetOverviewQuery(paths, {
+        pollingInterval: autorefresh,
+    });
+    const overviewLoading = isFetching && currentData === undefined;
+    const { data: rawData, additionalData } = currentData || {};
+    const entityLoading = overviewLoading || olapStatsLoading;
+    const entityNotReady = isEntityWithMergedImpl && !mergedChildrenPaths;
     const renderContent = () => {
         var _a;
         const data = rawData !== null && rawData !== void 0 ? rawData : undefined;

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

@@ -1,10 +1,10 @@
-import type { EPathType, TEvDescribeSchemeResult } from '../../../../../types/api/schema';
 import type { KeyValueRow } from '../../../../../types/api/query';
+import type { EPathType, TEvDescribeSchemeResult } from '../../../../../types/api/schema';
 import './TableInfo.scss';
 interface TableInfoProps {
     data?: TEvDescribeSchemeResult;
     type?: EPathType;
     olapStats?: KeyValueRow[];
 }
-export declare const TableInfo: ({ data, type, olapStats }: TableInfoProps) => JSX.Element;
+export declare const TableInfo: ({ data, type, olapStats }: TableInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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,62 +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 { 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(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) => {
@@ -65,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) {
@@ -78,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/escapeRegExp';
+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>[];