ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Tablets/Tablets.js

@@ -1,35 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import cn from 'bem-cn-lite';
-import ReactList from 'react-list';
+import React from 'react';
 import { Select } from '@gravity-ui/uikit';
+import { skipToken } from '@reduxjs/toolkit/query';
+import ReactList from 'react-list';
+import { ResponseError } from '../../components/Errors/ResponseError';
+import { Loader } from '../../components/Loader';
 import { Tablet } from '../../components/Tablet';
 import TabletsOverall from '../../components/TabletsOverall/TabletsOverall';
-import { Loader } from '../../components/Loader';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../utils/hooks';
-import { getTabletsInfo, clearWasLoadingFlag, setStateFilter, setTypeFilter, } from '../../store/reducers/tablets';
-import './Tablets.scss';
+import { setStateFilter, setTypeFilter, tabletsApi } from '../../store/reducers/tablets';
+import { cn } from '../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import i18n from './i18n';
+import './Tablets.scss';
 const b = cn('tablets');
 export const Tablets = ({ path, nodeId, className }) => {
     const dispatch = useTypedDispatch();
-    const { data, wasLoaded, loading, error, stateFilter, typeFilter } = useTypedSelector((state) => state.tablets);
+    const { stateFilter, typeFilter } = useTypedSelector((state) => state.tablets);
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const tablets = useMemo(() => (data === null || data === void 0 ? void 0 : data.TabletStateInfo) || [], [data]);
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(clearWasLoadingFlag());
-        }
-        if (nodeId) {
-            dispatch(getTabletsInfo({ nodes: [String(nodeId)] }));
-        }
-        else if (path) {
-            dispatch(getTabletsInfo({ path }));
-        }
-    }, [path, nodeId, dispatch]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
-    const [tabletsToRender, setTabletsToRender] = useState([]);
-    useEffect(() => {
+    let params = skipToken;
+    if (nodeId) {
+        params = { nodes: [String(nodeId)] };
+    }
+    else if (path) {
+        params = { path };
+    }
+    const { currentData, isFetching, error } = tabletsApi.useGetTabletsInfoQuery(params, {
+        pollingInterval: autorefresh,
+    });
+    const loading = isFetching && currentData === undefined;
+    const tablets = React.useMemo(() => (currentData === null || currentData === void 0 ? void 0 : currentData.TabletStateInfo) || [], [currentData]);
+    const tabletsToRender = React.useMemo(() => {
         let filteredTablets = tablets;
         if (typeFilter.length > 0) {
             filteredTablets = filteredTablets.filter((tablet) => typeFilter.some((filter) => tablet.Type === filter));
@@ -37,7 +37,7 @@ export const Tablets = ({ path, nodeId, className }) => {
         if (stateFilter.length > 0) {
             filteredTablets = filteredTablets.filter((tablet) => stateFilter.some((filter) => tablet.State === filter));
         }
-        setTabletsToRender(filteredTablets);
+        return filteredTablets;
     }, [tablets, stateFilter, typeFilter]);
     const handleStateFilterChange = (value) => {
         dispatch(setStateFilter(value));
@@ -61,15 +61,15 @@ export const Tablets = ({ path, nodeId, className }) => {
             value: item,
             content: item,
         }));
-        return (_jsxs("div", Object.assign({ className: b(null, className) }, { children: [_jsxs("div", Object.assign({ className: b('header') }, { children: [_jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.state')}:`, options: states, value: stateFilter, onUpdate: handleStateFilterChange }), _jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.type')}:`, options: types, value: typeFilter, onUpdate: handleTypeFilterChange }), _jsx(TabletsOverall, { tablets: tablets })] })), _jsx("div", Object.assign({ className: b('items') }, { children: _jsx(ReactList, { itemRenderer: renderTablet, length: tabletsToRender.length, type: "uniform" }) }))] })));
+        return (_jsxs("div", { className: b(null, className), children: [_jsxs("div", { className: b('header'), children: [_jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.state')}:`, options: states, value: stateFilter, onUpdate: handleStateFilterChange }), _jsx(Select, { className: b('filter-control'), multiple: true, placeholder: i18n('controls.allItems'), label: `${i18n('controls.type')}:`, options: types, value: typeFilter, onUpdate: handleTypeFilterChange }), _jsx(TabletsOverall, { tablets: tablets })] }), _jsx("div", { className: b('items'), children: _jsx(ReactList, { itemRenderer: renderTablet, length: tabletsToRender.length, type: "uniform" }) })] }));
     };
-    if (loading && !wasLoaded) {
+    if (loading) {
         return _jsx(Loader, {});
     }
     else if (error) {
-        return _jsx("div", Object.assign({ className: "error" }, { children: error.statusText }));
+        return _jsx(ResponseError, { error: error });
     }
     else {
-        return tablets.length > 0 ? (renderContent()) : (_jsx("div", Object.assign({ className: "error" }, { children: i18n('noTabletsData') })));
+        return tablets.length > 0 ? (renderContent()) : (_jsx("div", { className: "error", children: i18n('noTabletsData') }));
     }
 };

package/dist/containers/Tablets/Tablets.scss

@@ -5,9 +5,8 @@
 
     &__header {
         display: flex;
-        gap: 12px;
-
         align-items: center;
+        gap: 12px;
 
         margin-bottom: 16px;
     }

package/dist/containers/Tablets/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: "controls.type" | "controls.state" | "controls.allItems" | "noTabletsData", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tablets/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-tablets';
-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/TabletsFilters/TabletsFilters.d.ts

@@ -16,7 +16,7 @@ export class TabletsFilters extends React.Component<any, any, any> {
         error: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<object>>;
         setHeader: PropTypes.Requireable<(...args: any[]) => any>;
     };
-    static renderLoader(): JSX.Element;
+    static renderLoader(): import("react/jsx-runtime").JSX.Element;
     static parseNodes: (nodes: any) => number[] | undefined;
     static getStateFiltersFromColor: (color: any) => any;
     static CONTROL_WIDTH: number;
@@ -37,28 +37,21 @@ export class TabletsFilters extends React.Component<any, any, any> {
     handleNodeFilterChange: (nodeFilter: any) => void;
     handleStateFilterChange: (stateFilter: any) => void;
     handleTypeFilterChange: (typeFilter: any) => void;
-    renderTablet: (index: any, key: any) => JSX.Element;
-    renderContent: () => JSX.Element;
-    renderView: () => JSX.Element;
-    render(): JSX.Element;
+    renderTablet: (index: any, key: any) => import("react/jsx-runtime").JSX.Element;
+    renderContent: () => import("react/jsx-runtime").JSX.Element;
+    renderView: () => import("react/jsx-runtime").JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
-declare const _default: import("react-redux").ConnectedComponent<typeof TabletsFilters, import("react-redux").Omit<PropTypes.InferProps<{
-    wasLoaded: PropTypes.Requireable<boolean>;
-    loading: PropTypes.Requireable<boolean>;
-    getTabletsInfo: PropTypes.Requireable<(...args: any[]) => any>;
-    timeoutForRequest: PropTypes.Requireable<number>;
-    path: PropTypes.Requireable<string>;
-    clearWasLoadingFlag: PropTypes.Requireable<(...args: any[]) => any>;
-    nodes: PropTypes.Requireable<any[]>;
-    tablets: PropTypes.Requireable<any[]>;
-    filteredTablets: PropTypes.Requireable<any[]>;
-    setStateFilter: PropTypes.Requireable<(...args: any[]) => any>;
-    setTypeFilter: PropTypes.Requireable<(...args: any[]) => any>;
-    stateFilter: PropTypes.Requireable<any[]>;
-    typeFilter: PropTypes.Requireable<any[]>;
-    error: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<object>>;
-    setHeader: PropTypes.Requireable<(...args: any[]) => any>;
-}>, "nodes" | "tablets" | "loading" | "wasLoaded" | "error" | "stateFilter" | "typeFilter" | "setStateFilter" | "setTypeFilter" | "clearWasLoadingFlag" | "getTabletsInfo" | "filteredTablets" | "timeoutForRequest">>;
+declare const _default: import("react-redux").ConnectedComponent<typeof TabletsFilters, {
+    path?: string | null | undefined;
+    setHeader?: ((...args: any[]) => any) | null | undefined;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
+} | {
+    path?: string | null | undefined;
+    setHeader?: ((...args: any[]) => any) | null | undefined;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
+}>;
 export default _default;
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -1,19 +1,20 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { Loader, Select } from '@gravity-ui/uikit';
+import isEqual from 'lodash/isEqual';
+import map from 'lodash/map';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import cn from 'bem-cn-lite';
-import _ from 'lodash';
 import { Helmet } from 'react-helmet-async';
-import { Loader, Select } from '@gravity-ui/uikit';
 import ReactList from 'react-list';
-import { Tablet } from '../../components/Tablet';
+import { connect } from 'react-redux';
 import { AccessDenied } from '../../components/Errors/403';
-import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { tabletColorToTabletState, tabletStates } from '../../utils/tablet';
-import { getTabletsInfo, clearWasLoadingFlag, setStateFilter, setTypeFilter, getFilteredTablets, getTablets, } from '../../store/reducers/tabletsFilters';
+import { Tablet } from '../../components/Tablet';
 import { parseQuery } from '../../routes';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { clearWasLoadingFlag, getFilteredTablets, getTablets, getTabletsInfo, setStateFilter, setTypeFilter, } from '../../store/reducers/tabletsFilters';
+import { cn } from '../../utils/cn';
 import { CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
+import { tabletColorToTabletState, tabletStates } from '../../utils/tablet';
 import i18n from './i18n';
 import './TabletsFilters.scss';
 const b = cn('tablets-filters');
@@ -60,16 +61,16 @@ export class TabletsFilters extends React.Component {
             const { nodeFilter, tenantPath } = this.state;
             const { tablets, filteredTablets, nodes, stateFilter, typeFilter, error } = this.props;
             const states = tabletStates.map((item) => ({ value: item, content: item }));
-            const types = Array.from(new Set(...[_.map(tablets, (tblt) => tblt.Type)])).map((item) => ({
+            const types = Array.from(new Set(...[map(tablets, (tblt) => tblt.Type)])).map((item) => ({
                 value: item,
                 content: item,
             }));
-            const nodesForSelect = _.map(nodes, (node) => ({
+            const nodesForSelect = map(nodes, (node) => ({
                 content: node.Id,
                 value: node.Id,
                 meta: node.Host,
             }));
-            return (_jsxs("div", Object.assign({ className: b() }, { children: [tenantPath ? (_jsx("div", Object.assign({ className: b('tenant') }, { children: _jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: b('label') }, { children: "Database: " })), " ", tenantPath] }) }))) : null, _jsx(MemoizedFilters, { nodesForSelect: nodesForSelect, nodeFilter: nodeFilter, onChangeNodes: this.handleNodeFilterChange, states: states, stateFilter: stateFilter, onChangeStates: this.handleStateFilterChange, types: types, typeFilter: typeFilter, onChangeTypes: this.handleTypeFilterChange }), error && _jsx("div", Object.assign({ className: "error" }, { children: error })), filteredTablets.length > 0 ? (_jsx("div", Object.assign({ className: b('items') }, { children: _jsx(ReactList, { itemRenderer: this.renderTablet, length: filteredTablets.length, type: "uniform" }) }))) : (!error && _jsx("div", Object.assign({ className: b('empty-message') }, { children: "no tablets" })))] })));
+            return (_jsxs("div", { className: b(), children: [tenantPath ? (_jsx("div", { className: b('tenant'), children: _jsxs(React.Fragment, { children: [_jsx("span", { className: b('label'), children: "Database: " }), " ", tenantPath] }) })) : null, _jsx(MemoizedFilters, { nodesForSelect: nodesForSelect, nodeFilter: nodeFilter, onChangeNodes: this.handleNodeFilterChange, states: states, stateFilter: stateFilter, onChangeStates: this.handleStateFilterChange, types: types, typeFilter: typeFilter, onChangeTypes: this.handleTypeFilterChange }), error && _jsx("div", { className: "error", children: error }), filteredTablets.length > 0 ? (_jsx("div", { className: b('items'), children: _jsx(ReactList, { itemRenderer: this.renderTablet, length: filteredTablets.length, type: "uniform" }) })) : (!error && _jsx("div", { className: b('empty-message'), children: "no tablets" }))] }));
         };
         this.renderView = () => {
             const { loading, wasLoaded, error } = this.props;
@@ -88,7 +89,7 @@ export class TabletsFilters extends React.Component {
         };
     }
     static renderLoader() {
-        return (_jsx("div", Object.assign({ className: 'loader' }, { children: _jsx(Loader, { size: "l" }) })));
+        return (_jsx("div", { className: 'loader', children: _jsx(Loader, { size: "l" }) }));
     }
     componentDidMount() {
         const { setStateFilter, setTypeFilter, setHeaderBreadcrumbs } = this.props;
@@ -124,7 +125,7 @@ export class TabletsFilters extends React.Component {
     }
     render() {
         const { tenantPath, clusterName } = this.state;
-        return (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${i18n('page.title')} — ${tenantPath || clusterName || CLUSTER_DEFAULT_TITLE}` }) }), this.renderView()] }));
+        return (_jsxs(React.Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${i18n('page.title')} — ${tenantPath || clusterName || CLUSTER_DEFAULT_TITLE}` }) }), this.renderView()] }));
     }
 }
 TabletsFilters.propTypes = {
@@ -155,9 +156,9 @@ TabletsFilters.getStateFiltersFromColor = (color) => {
 TabletsFilters.CONTROL_WIDTH = 220;
 TabletsFilters.POPUP_WIDTH = 300;
 const Filters = ({ nodesForSelect, nodeFilter, onChangeNodes, states, stateFilter, onChangeStates, types, typeFilter, onChangeTypes, }) => {
-    return (_jsxs("div", Object.assign({ className: b('filters') }, { children: [_jsx("div", Object.assign({ className: b('filter-wrapper') }, { children: _jsx(Select, { multiple: true, label: "Node ID", width: TabletsFilters.CONTROL_WIDTH, popupWidth: TabletsFilters.POPUP_WIDTH, placeholder: "All", options: nodesForSelect, value: nodeFilter, onUpdate: onChangeNodes, renderOption: (option) => {
-                        return (_jsxs("div", Object.assign({ className: b('node') }, { children: [_jsx("div", { children: option.content }), _jsx("div", Object.assign({ className: b('node-meta'), title: option.meta }, { children: option.meta }))] })));
-                    }, getOptionHeight: () => 40 }) })), _jsx("div", Object.assign({ className: b('filter-wrapper') }, { children: _jsx(Select, { multiple: true, label: "multiple", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: states, value: stateFilter, onUpdate: onChangeStates }) })), _jsx("div", Object.assign({ className: b('filter-wrapper') }, { children: _jsx(Select, { multiple: true, label: "Types", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: types, value: typeFilter, onUpdate: onChangeTypes }) }))] })));
+    return (_jsxs("div", { className: b('filters'), children: [_jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Node ID", width: TabletsFilters.CONTROL_WIDTH, popupWidth: TabletsFilters.POPUP_WIDTH, placeholder: "All", options: nodesForSelect, value: nodeFilter, onUpdate: onChangeNodes, renderOption: (option) => {
+                        return (_jsxs("div", { className: b('node'), children: [_jsx("div", { children: option.content }), _jsx("div", { className: b('node-meta'), title: option.meta, children: option.meta })] }));
+                    }, getOptionHeight: () => 40 }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "multiple", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: states, value: stateFilter, onUpdate: onChangeStates }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Types", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: types, value: typeFilter, onUpdate: onChangeTypes }) })] }));
 };
 Filters.propTypes = {
     nodesForSelect: PropTypes.array,
@@ -171,9 +172,9 @@ Filters.propTypes = {
     onChangeTypes: PropTypes.func,
 };
 const MemoizedFilters = React.memo(Filters, (prevProps, nextProps) => {
-    return (_.isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
-        _.isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
-        _.isEqual(prevProps.typeFilter, nextProps.typeFilter));
+    return (isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
+        isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
+        isEqual(prevProps.typeFilter, nextProps.typeFilter));
 });
 const mapStateToProps = (state) => {
     const { nodes, wasLoaded, loading, timeoutForRequest, stateFilter, typeFilter, error } = state.tabletsFilters;

package/dist/containers/Tenant/Acl/Acl.d.ts

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

package/dist/containers/Tenant/Acl/Acl.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
-import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
-import { useTypedSelector, useTypedDispatch } from '../../../utils/hooks';
-import { getSchemaAcl, setAclWasNotLoaded } from '../../../store/reducers/schemaAcl/schemaAcl';
 import { ResponseError } from '../../../components/Errors/ResponseError';
 import { Loader } from '../../../components/Loader';
-import './Acl.scss';
+import { getSchemaAcl, setAclWasNotLoaded } from '../../../store/reducers/schemaAcl/schemaAcl';
+import { cn } from '../../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
+import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import i18n from '../i18n';
+import './Acl.scss';
 const b = cn('ydb-acl');
 const TABLE_SETTINGS = Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false, stickyTop: 36 });
 const prepareLogin = (value) => {
@@ -60,7 +60,7 @@ export const Acl = () => {
     const dispatch = useTypedDispatch();
     const { currentSchemaPath } = useTypedSelector((state) => state.schema);
     const { loading, error, acl, owner, wasLoaded } = useTypedSelector((state) => state.schemaAcl);
-    useEffect(() => {
+    React.useEffect(() => {
         if (currentSchemaPath) {
             dispatch(getSchemaAcl({ path: currentSchemaPath }));
         }
@@ -79,16 +79,16 @@ export const Acl = () => {
         if (!owner) {
             return null;
         }
-        return (_jsxs("div", Object.assign({ className: b('owner-container') }, { children: [_jsx("span", Object.assign({ className: b('owner-label') }, { children: `${i18n('acl.owner')}: ` })), prepareLogin(owner)] })));
+        return (_jsxs("div", { className: b('owner-container'), children: [_jsx("span", { className: b('owner-label'), children: `${i18n('acl.owner')}: ` }), prepareLogin(owner)] }));
     };
     if (loading && !wasLoaded) {
         return _jsx(Loader, {});
     }
     if (error) {
-        return _jsx(ResponseError, { error: error, className: b('message-container') });
+        return _jsx(ResponseError, { error: error });
     }
     if (!loading && !acl && !owner) {
-        return _jsx("div", Object.assign({ className: b('message-container') }, { children: i18n('acl.empty') }));
+        return _jsx(React.Fragment, { children: i18n('acl.empty') });
     }
-    return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('result') }, { children: [renderOwner(), renderTable()] })) })));
+    return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('result'), children: [renderOwner(), renderTable()] }) }));
 };

package/dist/containers/Tenant/Acl/Acl.scss

@@ -5,17 +5,12 @@
     overflow: auto;
     flex-grow: 1;
 
-    padding: 0 12px 16px;
     @include query-data-table;
 
     &__result {
         align-self: flex-start;
     }
 
-    &__message-container {
-        padding: 0 12px 16px;
-    }
-
     &__owner-container {
         position: sticky;
         z-index: 2;

package/dist/containers/Tenant/Diagnostics/Autorefresh/AutorefreshControl.d.ts

@@ -0,0 +1,6 @@
+import './AutorefreshControl.scss';
+interface AutorefreshControlProps {
+    className?: string;
+}
+export declare function AutorefreshControl({ className }: AutorefreshControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/Autorefresh/AutorefreshControl.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowsRotateLeft } from '@gravity-ui/icons';
+import { Button, Select } from '@gravity-ui/uikit';
+import { api } from '../../../../store/reducers/api';
+import { setAutorefreshInterval } from '../../../../store/reducers/schema/schema';
+import { cn } from '../../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import i18n from './i18n';
+import './AutorefreshControl.scss';
+const b = cn('autorefresh-control');
+export function AutorefreshControl({ className }) {
+    const dispatch = useTypedDispatch();
+    const autorefresh = useTypedSelector((state) => state.schema.autorefresh);
+    return (_jsxs("div", { className: b(null, className), children: [_jsx(Button, { view: "flat", onClick: () => {
+                    dispatch(api.util.invalidateTags(['All']));
+                }, extraProps: { 'aria-label': i18n('Refresh') }, children: _jsx(Button.Icon, { children: _jsx(ArrowsRotateLeft, {}) }) }), _jsxs(Select, { value: [String(autorefresh)], onUpdate: (v) => {
+                    dispatch(setAutorefreshInterval(Number(v)));
+                }, width: 85, children: [_jsx(Select.Option, { value: "0", children: i18n('None') }), _jsx(Select.Option, { value: "15000", children: i18n('15 sec') }), _jsx(Select.Option, { value: "60000", children: i18n('1 min') }), _jsx(Select.Option, { value: "120000", children: i18n('2 min') }), _jsx(Select.Option, { value: "300000", children: i18n('5 min') })] })] }));
+}

package/dist/containers/Tenant/Diagnostics/Autorefresh/AutorefreshControl.scss

@@ -0,0 +1,5 @@
+.autorefresh-control {
+    display: flex;
+    align-items: center;
+    gap: var(--g-spacing-1);
+}

package/dist/containers/Tenant/Diagnostics/Autorefresh/i18n/en.json

@@ -0,0 +1,8 @@
+{
+    "None": "None",
+    "15 sec": "15 sec",
+    "1 min": "1 min",
+    "2 min": "2 min",
+    "5 min": "5 min",
+    "Refresh": "Refresh"
+}

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

@@ -0,0 +1,2 @@
+declare const _default: (key: "1 min" | "5 min" | "None" | "15 sec" | "2 min" | "Refresh", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

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

@@ -0,0 +1,4 @@
+import { registerKeysets } from '../../../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-diagnostics-autorefresh-control';
+export default registerKeysets(COMPONENT, { en });

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

@@ -4,5 +4,5 @@ interface ConsumersProps {
     path: string;
     type?: EPathType;
 }
-export declare const Consumers: ({ path, type }: ConsumersProps) => JSX.Element;
+export declare const Consumers: ({ path, type }: ConsumersProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,36 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
-import block from 'bem-cn-lite';
-import { escapeRegExp } from 'lodash/fp';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
+import escapeRegExp from 'lodash/escapeRegExp';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { Loader } from '../../../../components/Loader';
 import { Search } from '../../../../components/Search';
-import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../../../utils/hooks';
+import { selectPreparedConsumersData, selectPreparedTopicStats, topicApi, } from '../../../../store/reducers/topic';
+import { cn } from '../../../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
-import { selectPreparedConsumersData, selectPreparedTopicStats, getTopic, setDataWasNotLoaded, } from '../../../../store/reducers/topic';
+import { useTypedSelector } from '../../../../utils/hooks';
 import { isCdcStreamEntityType } from '../../utils/schema';
 import { ConsumersTopicStats } from './TopicStats';
 import { columns } from './columns';
 import i18n from './i18n';
 import './Consumers.scss';
-const b = block('ydb-diagnostics-consumers');
+const b = cn('ydb-diagnostics-consumers');
 export const Consumers = ({ path, type }) => {
     const isCdcStream = isCdcStreamEntityType(type);
-    const dispatch = useTypedDispatch();
-    const [searchValue, setSearchValue] = useState('');
+    const [searchValue, setSearchValue] = React.useState('');
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error } = useTypedSelector((state) => state.topic);
-    const consumers = useTypedSelector((state) => selectPreparedConsumersData(state));
-    const topic = useTypedSelector((state) => selectPreparedTopicStats(state));
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded);
-        }
-        dispatch(getTopic(path));
-    }, [dispatch, path]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
-    const dataToRender = useMemo(() => {
+    const { currentData, isFetching, error } = topicApi.useGetTopicQuery({ path }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const consumers = useTypedSelector((state) => selectPreparedConsumersData(state, path));
+    const topic = useTypedSelector((state) => selectPreparedTopicStats(state, path));
+    const dataToRender = React.useMemo(() => {
         if (!consumers) {
             return [];
         }
@@ -42,7 +35,7 @@ export const Consumers = ({ path, type }) => {
     const handleSearchChange = (value) => {
         setSearchValue(value);
     };
-    if (loading && !wasLoaded) {
+    if (loading) {
         return _jsx(Loader, { size: "m" });
     }
     if (error) {
@@ -51,5 +44,5 @@ export const Consumers = ({ path, type }) => {
     if (!consumers || !consumers.length) {
         return _jsx("div", { children: i18n(`noConsumersMessage.${isCdcStream ? 'stream' : 'topic'}`) });
     }
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(Search, { onChange: handleSearchChange, placeholder: i18n('controls.search'), className: b('search'), value: searchValue }), topic && _jsx(ConsumersTopicStats, { data: topic })] })), _jsx("div", Object.assign({ className: b('table-wrapper') }, { children: _jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { theme: "yandex-cloud", data: dataToRender, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }) })) }))] })));
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('controls'), children: [_jsx(Search, { onChange: handleSearchChange, placeholder: i18n('controls.search'), className: b('search'), value: searchValue }), topic && _jsx(ConsumersTopicStats, { data: topic })] }), _jsx("div", { className: b('table-wrapper'), children: _jsx("div", { className: b('table-content'), children: _jsx(DataTable, { theme: "yandex-cloud", data: dataToRender, columns: columns, settings: DEFAULT_TABLE_SETTINGS, emptyDataMessage: i18n('table.emptyDataMessage') }) }) })] }));
 };

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

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

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

@@ -1,9 +1,9 @@
 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 { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES } from '../utils/constants';
+import { cn } from '../../../../../utils/cn';
 import i18n from '../i18n';
+import { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES } from '../utils/constants';
 import './Headers.scss';
-const b = block('ydb-diagnostics-consumers-columns-header');
+const b = cn('ydb-diagnostics-consumers-columns-header');
 export const ReadLagsHeader = () => (_jsx(LabelWithPopover, { className: b('lags'), text: CONSUMERS_COLUMNS_TITILES[CONSUMERS_COLUMNS_IDS.READ_LAGS], popoverContent: _jsx(LagPopoverContent, { text: i18n('lagsPopover.readLags'), type: "read" }) }));

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.d.ts

@@ -3,5 +3,5 @@ import './ConsumersTopicStats.scss';
 interface ConsumersTopicStatsProps {
     data?: IPreparedTopicStats;
 }
-export declare const ConsumersTopicStats: ({ data }: ConsumersTopicStatsProps) => JSX.Element;
+export declare const ConsumersTopicStats: ({ data }: ConsumersTopicStatsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import block from 'bem-cn-lite';
-import { formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
 import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
+import { cn } from '../../../../../utils/cn';
+import { formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
 import './ConsumersTopicStats.scss';
-const b = block('ydb-diagnostics-consumers-topic-stats');
+const b = cn('ydb-diagnostics-consumers-topic-stats');
 export const ConsumersTopicStats = ({ data }) => {
     const { writeSpeed, partitionsWriteLag, partitionsIdleTime } = data || {};
     const values = [
@@ -20,5 +20,5 @@ export const ConsumersTopicStats = ({ data }) => {
             value: formatMsToUptime(partitionsIdleTime || 0),
         },
     ];
-    return (_jsx("div", Object.assign({ className: b('wrapper') }, { children: values.map((value, index) => (_jsxs("div", Object.assign({ className: b('item') }, { children: [_jsx("div", Object.assign({ className: b('label') }, { children: value.label })), _jsx("div", Object.assign({ className: b('value') }, { children: value.value }))] }), index))) })));
+    return (_jsx("div", { className: b('wrapper'), children: values.map((value, index) => (_jsxs("div", { className: b('item'), children: [_jsx("div", { className: b('label'), children: value.label }), _jsx("div", { className: b('value'), children: value.value })] }, index))) }));
 };

package/dist/containers/Tenant/Diagnostics/Consumers/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 { IPreparedConsumerData } from '../../../../../types/store/topic';
 import './Columns.scss';
 export declare const columns: Column<IPreparedConsumerData>[];

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

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
-import block from 'bem-cn-lite';
 import qs from 'qs';
-import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
-import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
 import { InternalLink } from '../../../../../components/InternalLink';
-import { formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
+import { SpeedMultiMeter } from '../../../../../components/SpeedMultiMeter';
 import routes, { createHref } from '../../../../../routes';
+import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { cn } from '../../../../../utils/cn';
+import { formatMsToUptime } from '../../../../../utils/dataFormatters/dataFormatters';
 import { TenantTabsGroups } from '../../../TenantPages';
-import { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES, CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS, CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES, } from '../utils/constants';
 import { ReadLagsHeader } from '../Headers';
+import { CONSUMERS_COLUMNS_IDS, CONSUMERS_COLUMNS_TITILES, CONSUMERS_READ_LAGS_SUB_COLUMNS_IDS, CONSUMERS_READ_LAGS_SUB_COLUMNS_TITLES, } from '../utils/constants';
 import './Columns.scss';
-const b = block('ydb-diagnostics-consumers-columns');
+const b = cn('ydb-diagnostics-consumers-columns');
 export const columns = [
     {
         name: CONSUMERS_COLUMNS_IDS.CONSUMER,
@@ -24,7 +24,7 @@ export const columns = [
             const queryParams = qs.parse(location.search, {
                 ignoreQueryPrefix: true,
             });
-            return (_jsx(InternalLink, Object.assign({ to: createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions, selectedConsumer: row.name })) }, { children: row.name })));
+            return (_jsx(InternalLink, { to: createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions, selectedConsumer: row.name })), children: row.name }));
         },
     },
     {

package/dist/containers/Tenant/Diagnostics/Consumers/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" | "controls.search", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tenant/Diagnostics/Consumers/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-consumers';
-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/Describe/Describe.d.ts

@@ -1,9 +1,9 @@
-import 'react-json-inspector/json-inspector.css';
 import type { EPathType } from '../../../../types/api/schema';
 import './Describe.scss';
+import 'react-json-inspector/json-inspector.css';
 interface IDescribeProps {
     tenant: string;
     type?: EPathType;
 }
-declare const Describe: ({ tenant, type }: IDescribeProps) => JSX.Element;
+declare const Describe: ({ tenant, type }: IDescribeProps) => import("react/jsx-runtime").JSX.Element;
 export default Describe;