ydb-embedded-ui 5.5.0 → 6.0.1

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.d.ts

@@ -1,14 +1,12 @@
-import type { ReactNode } from 'react';
+import React from 'react';
 import type { DataTableProps } from '@gravity-ui/react-data-table';
-import type { IResponseError } from '../../../../types/api/error';
 interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
-    title: ReactNode;
+    title: React.ReactNode;
     loading?: boolean;
-    wasLoaded?: boolean;
-    error?: IResponseError;
+    error?: unknown;
     tableClassNameModifiers?: {
         [name: string]: string | boolean | undefined;
     };
 }
-export declare function TenantOverviewTableLayout<T>({ title, error, loading, wasLoaded, tableClassNameModifiers, ...props }: TenantOverviewTableLayoutProps<T>): JSX.Element;
+export declare function TenantOverviewTableLayout<T>({ title, error, loading, tableClassNameModifiers, ...props }: TenantOverviewTableLayoutProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.js

@@ -1,20 +1,21 @@
 import { __rest } from "tslib";
-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 DataTable from '@gravity-ui/react-data-table';
-import { TENANT_OVERVIEW_TABLES_LIMIT, TENANT_OVERVIEW_TABLES_SETTINGS, } from '../../../../utils/constants';
-import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
+import { TENANT_OVERVIEW_TABLES_LIMIT, TENANT_OVERVIEW_TABLES_SETTINGS, } from '../../../../utils/constants';
 import { b } from './utils';
 export function TenantOverviewTableLayout(_a) {
-    var { title, error, loading, wasLoaded, tableClassNameModifiers = {} } = _a, props = __rest(_a, ["title", "error", "loading", "wasLoaded", "tableClassNameModifiers"]);
+    var { title, error, loading, tableClassNameModifiers = {} } = _a, props = __rest(_a, ["title", "error", "loading", "tableClassNameModifiers"]);
     const renderContent = () => {
         if (error) {
             return _jsx(ResponseError, { error: error });
         }
-        if (loading && !wasLoaded) {
+        if (loading) {
             return _jsx(TableSkeleton, { rows: TENANT_OVERVIEW_TABLES_LIMIT });
         }
         return (_jsx(DataTable, Object.assign({ theme: "yandex-cloud", settings: TENANT_OVERVIEW_TABLES_SETTINGS }, props)));
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: title })), _jsx("div", Object.assign({ className: b('table', tableClassNameModifiers) }, { children: renderContent() }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('title'), children: title }), _jsx("div", { className: b('table', tableClassNameModifiers), children: renderContent() })] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import '../TenantOverview.scss';
 export interface TenantStorageMetrics {
     blobStorageUsed?: number;
@@ -10,5 +9,5 @@ interface TenantStorageProps {
     tenantName: string;
     metrics: TenantStorageMetrics;
 }
-export declare function TenantStorage({ tenantName, metrics }: TenantStorageProps): JSX.Element;
+export declare function TenantStorage({ tenantName, metrics }: TenantStorageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.js

@@ -1,15 +1,16 @@
-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 InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
-import { ProgressViewer } from '../../../../../components/ProgressViewer/ProgressViewer';
 import { LabelWithPopover } from '../../../../../components/LabelWithPopover';
+import { ProgressViewer } from '../../../../../components/ProgressViewer/ProgressViewer';
 import { formatStorageValues } from '../../../../../utils/dataFormatters/dataFormatters';
 import { TenantDashboard } from '../TenantDashboard/TenantDashboard';
-import '../TenantOverview.scss';
-import { storageDashboardConfig } from './storageDashboardConfig';
-import { TopTables } from './TopTables';
-import { TopGroups } from './TopGroups';
-import { b } from '../utils';
 import i18n from '../i18n';
+import { b } from '../utils';
+import { TopGroups } from './TopGroups';
+import { TopTables } from './TopTables';
+import { storageDashboardConfig } from './storageDashboardConfig';
+import '../TenantOverview.scss';
 export function TenantStorage({ tenantName, metrics }) {
     const { blobStorageUsed, tabletStorageUsed, blobStorageLimit, tabletStorageLimit } = metrics;
     const info = [
@@ -22,5 +23,5 @@ export function TenantStorage({ tenantName, metrics }) {
             value: (_jsx(ProgressViewer, { value: blobStorageUsed, capacity: blobStorageLimit, formatValues: formatStorageValues, colorizeProgress: true, warningThreshold: 75, dangerThreshold: 85 })),
         },
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(TenantDashboard, { database: tenantName, charts: storageDashboardConfig }), _jsx(InfoViewer, { className: b('storage-info'), title: "Storage details", info: info }), _jsx(TopTables, { path: tenantName }), _jsx(TopGroups, { tenant: tenantName })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(TenantDashboard, { database: tenantName, charts: storageDashboardConfig }), _jsx(InfoViewer, { className: b('storage-info'), title: "Storage details", info: info }), _jsx(TopTables, { path: tenantName }), _jsx(TopGroups, { tenant: tenantName })] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 interface TopGroupsProps {
     tenant?: string;
 }
-export declare function TopGroups({ tenant }: TopGroupsProps): JSX.Element;
+export declare function TopGroups({ tenant }: TopGroupsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.js

@@ -1,31 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { useAutofetcher, useSearchQuery, useTypedDispatch, useTypedSelector, } from '../../../../../utils/hooks';
-import { setDataWasNotLoaded, getTopStorageGroups, selectTopStorageGroups, } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topStorageGroupsApi } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
+import { useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
 import { getStorageTopGroupsColumns } from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
 export function TopGroups({ tenant }) {
-    const dispatch = useTypedDispatch();
     const query = useSearchQuery();
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error } = useTypedSelector((state) => state.topStorageGroups);
-    const topGroups = useTypedSelector(selectTopStorageGroups);
     const columns = getStorageTopGroupsColumns();
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(getTopStorageGroups({ tenant }));
-    }, [dispatch, tenant]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
+    const { currentData, isFetching, error } = topStorageGroupsApi.useGetTopStorageGroupsQuery({ tenant }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const topGroups = currentData;
     const title = getSectionTitle({
         entity: i18n('groups'),
         postfix: i18n('by-usage'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.storage })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: topGroups || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error }));
+    return (_jsx(TenantOverviewTableLayout, { data: topGroups || [], columns: columns, title: title, loading: loading, error: error }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import '../TenantOverview.scss';
 interface TopTablesProps {
     path: string;
 }
-export declare function TopTables({ path }: TopTablesProps): JSX.Element;
+export declare function TopTables({ path }: TopTablesProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.js

@@ -1,26 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLocation } from 'react-router';
 import DataTable from '@gravity-ui/react-data-table';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../../../../utils/hooks';
-import { fetchTopTables, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
-import { formatBytes, getSizeWithSignificantDigits } from '../../../../../utils/bytesParsers';
-import { LinkToSchemaObject } from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import { useLocation } from 'react-router';
 import { CellWithPopover } from '../../../../../components/CellWithPopover/CellWithPopover';
+import { LinkToSchemaObject } from '../../../../../components/LinkToSchemaObject/LinkToSchemaObject';
+import { topTablesApi } from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
+import { formatBytes, getSizeWithSignificantDigits } from '../../../../../utils/bytesParsers';
+import { useTypedSelector } from '../../../../../utils/hooks';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
 import '../TenantOverview.scss';
 export function TopTables({ path }) {
-    const dispatch = useTypedDispatch();
     const location = useLocation();
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error, data: { result: data = undefined } = {}, } = useTypedSelector((state) => state.executeTopTables);
-    useAutofetcher((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(fetchTopTables(path));
-    }, [dispatch, path], autorefresh);
+    const { currentData, error, isFetching } = topTablesApi.useGetTopTablesQuery({ path }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
     const formatSize = (value) => {
         const size = getSizeWithSignificantDigits((data === null || data === void 0 ? void 0 : data.length) ? Number(data[0].Size) : 0, 0);
         return formatBytes({ value, size, precision: 1 });
@@ -36,12 +31,12 @@ export function TopTables({ path }) {
         {
             name: 'Path',
             sortable: false,
-            render: ({ row }) => row.Path ? (_jsx(CellWithPopover, Object.assign({ content: row.Path }, { children: _jsx(LinkToSchemaObject, Object.assign({ path: String(row.Path), location: location }, { children: row.Path })) }))) : null,
+            render: ({ row }) => row.Path ? (_jsx(CellWithPopover, { content: row.Path, children: _jsx(LinkToSchemaObject, { path: String(row.Path), location: location, children: row.Path }) })) : null,
         },
     ];
     const title = getSectionTitle({
         entity: i18n('tables'),
         postfix: i18n('by-size'),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error }));
+    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, title: title, loading: loading, error: error }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/getSectionTitle.d.ts

@@ -4,5 +4,5 @@ interface GetSectionTitleParams {
     prefix?: string;
     link?: string;
 }
-export declare const getSectionTitle: ({ prefix, entity, postfix, link, }: GetSectionTitleParams) => string | JSX.Element;
+export declare const getSectionTitle: ({ prefix, entity, postfix, link, }: GetSectionTitleParams) => string | import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/getSectionTitle.js

@@ -1,10 +1,11 @@
-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 { InternalLink } from '../../../../components/InternalLink/InternalLink';
 import i18n from './i18n';
 // Titles are formed by the principle "Top entities by parameter"
 export const getSectionTitle = ({ prefix = i18n('top'), entity, postfix, link, }) => {
     if (link) {
-        return (_jsxs(_Fragment, { children: [prefix, " ", _jsx(InternalLink, Object.assign({ to: link }, { children: entity })), " ", postfix] }));
+        return (_jsxs(React.Fragment, { children: [prefix, " ", _jsx(InternalLink, { to: link, children: entity }), " ", postfix] }));
     }
     return `${prefix} ${entity} ${postfix}`;
 };

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

@@ -16,6 +16,9 @@
     "by-memory": "by memory",
     "by-usage": "by usage",
     "by-size": "by size",
+    "cards.cpu-label": "CPU",
+    "cards.storage-label": "Storage",
+    "cards.memory-label": "Memory",
     "charts.queries-per-second": "Queries per second",
     "charts.transaction-latency": "Transactions latencies {{percentile}}",
     "charts.cpu-usage": "CPU usage by pool",

package/dist/containers/Tenant/Diagnostics/TenantOverview/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: "nodes" | "queries" | "groups" | "tables" | "top" | "shards" | "no-data" | "no-pools-data" | "top-nodes.empty-data" | "top-groups.empty-data" | "by-pools-usage" | "by-cpu-time" | "by-cpu-usage" | "by-load" | "by-memory" | "by-usage" | "by-size" | "cards.cpu-label" | "cards.storage-label" | "cards.memory-label" | "charts.queries-per-second" | "charts.transaction-latency" | "charts.cpu-usage" | "charts.storage-usage" | "charts.memory-usage" | "storage.tablet-storage-title" | "storage.tablet-storage-description" | "storage.db-storage-title" | "storage.db-storage-description", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

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

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

package/dist/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.d.ts

@@ -1,14 +1,15 @@
 import type { IssuesTree } from '../../../../store/reducers/healthcheckInfo/types';
-import { type StatusFlag, SelfCheckResult } from '../../../../types/api/healthcheck';
-import type { IResponseError } from '../../../../types/api/error';
+import { SelfCheckResult } from '../../../../types/api/healthcheck';
+import type { StatusFlag } from '../../../../types/api/healthcheck';
 interface HealthcheckParams {
     issueTrees: IssuesTree[];
     issuesStatistics: [StatusFlag, number][];
-    fetchHealthcheck: (isBackground?: boolean) => void;
     loading: boolean;
-    wasLoaded: boolean;
-    error?: IResponseError;
+    error?: unknown;
+    refetch: () => void;
     selfCheckResult: SelfCheckResult;
 }
-export declare const useHealthcheck: (tenantName: string) => HealthcheckParams;
+export declare const useHealthcheck: (tenantName: string, { autorefresh }?: {
+    autorefresh?: number | undefined;
+}) => HealthcheckParams;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/useHealthcheck.js

@@ -1,26 +1,19 @@
-import { useCallback } from 'react';
-import { getHealthcheckInfo, selectIssuesStatistics, selectIssuesTrees, setDataWasNotLoaded, } from '../../../../store/reducers/healthcheckInfo/healthcheckInfo';
+import { healthcheckApi, selectIssuesStatistics, selectIssuesTrees, } from '../../../../store/reducers/healthcheckInfo/healthcheckInfo';
 import { SelfCheckResult } from '../../../../types/api/healthcheck';
-import { useTypedSelector, useTypedDispatch } from '../../../../utils/hooks';
-export const useHealthcheck = (tenantName) => {
-    const dispatch = useTypedDispatch();
-    const { data, loading, wasLoaded, error } = useTypedSelector((state) => state.healthcheckInfo);
+import { useTypedSelector } from '../../../../utils/hooks';
+export const useHealthcheck = (tenantName, { autorefresh } = {}) => {
+    const { currentData: data, isFetching, error, refetch, } = healthcheckApi.useGetHealthcheckInfoQuery(tenantName, {
+        pollingInterval: autorefresh,
+    });
     const selfCheckResult = (data === null || data === void 0 ? void 0 : data.self_check_result) || SelfCheckResult.UNSPECIFIED;
-    const issuesStatistics = useTypedSelector(selectIssuesStatistics);
-    const issueTrees = useTypedSelector(selectIssuesTrees);
-    const fetchHealthcheck = useCallback((isBackground = true) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(getHealthcheckInfo(tenantName));
-    }, [dispatch, tenantName]);
+    const issuesStatistics = useTypedSelector((state) => selectIssuesStatistics(state, tenantName));
+    const issueTrees = useTypedSelector((state) => selectIssuesTrees(state, tenantName));
     return {
         issueTrees,
         issuesStatistics,
-        fetchHealthcheck,
-        loading,
-        wasLoaded,
+        loading: data === undefined && isFetching,
         error,
+        refetch,
         selfCheckResult,
     };
 };

package/dist/containers/Tenant/Diagnostics/TenantOverview/utils.d.ts

@@ -1,10 +1 @@
-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;

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

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

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

@@ -1,22 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useHistory, useLocation } from 'react-router';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { Loader } from '@gravity-ui/uikit';
+import { useHistory, useLocation } from 'react-router';
 import { DateRange } from '../../../../components/DateRange';
 import { Search } from '../../../../components/Search';
+import { parseQuery } from '../../../../routes';
 import { changeUserInput } from '../../../../store/reducers/executeQuery';
+import { setTopQueriesFilters, topQueriesApi, } from '../../../../store/reducers/executeTopQueries/executeTopQueries';
 import { TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, } from '../../../../store/reducers/tenant/constants';
-import { setTopQueriesFilters, setTopQueriesState, fetchTopQueries, } from '../../../../store/reducers/executeTopQueries/executeTopQueries';
-import { HOUR_IN_SECONDS } from '../../../../utils/constants';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
+import { cn } from '../../../../utils/cn';
+import { isSortableTopQueriesProperty } from '../../../../utils/diagnostics';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { prepareQueryError } from '../../../../utils/query';
-import { parseQuery } from '../../../../routes';
+import { TenantTabsGroups, getTenantPath } from '../../TenantPages';
 import { QUERY_TABLE_SETTINGS } from '../../utils/constants';
-import { isSortableTopQueriesProperty } from '../../../../utils/diagnostics';
 import { isColumnEntityType } from '../../utils/schema';
-import { TenantTabsGroups, getTenantPath } from '../../TenantPages';
 import { getTopQueriesColumns } from './getTopQueriesColumns';
 import i18n from './i18n';
 import './TopQueries.scss';
@@ -26,50 +25,16 @@ export const TopQueries = ({ path, type }) => {
     const location = useLocation();
     const history = useHistory();
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error, data: { result: data = undefined } = {}, filters: storeFilters, } = useTypedSelector((state) => state.executeTopQueries);
+    const filters = useTypedSelector((state) => state.executeTopQueries);
+    const { currentData, isFetching, error } = topQueriesApi.useGetTopQueriesQuery({
+        database: path,
+        filters,
+    }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
     const rawColumns = getTopQueriesColumns();
-    const preventFetch = useRef(false);
-    // some filters sync between redux state and URL
-    // component state is for default values,
-    // default values are determined from the query response, and should not propagate to URL
-    const [filters, setFilters] = useState(storeFilters);
-    useEffect(() => {
-        dispatch(setTopQueriesFilters(filters));
-    }, [dispatch, filters]);
     const columns = rawColumns.map((column) => (Object.assign(Object.assign({}, column), { sortable: isSortableTopQueriesProperty(column.name) })));
-    const setDefaultFiltersFromResponse = (responseData) => {
-        var _a, _b;
-        const intervalEnd = (_b = (_a = responseData === null || responseData === void 0 ? void 0 : responseData.result) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.IntervalEnd;
-        if (intervalEnd) {
-            const to = new Date(intervalEnd).getTime();
-            const from = new Date(to - HOUR_IN_SECONDS * 1000).getTime();
-            setFilters((currentFilters) => {
-                // request without filters returns the latest interval with data
-                // only in this case should update filters in ui
-                // also don't update if user already interacted with controls
-                const shouldUpdateFilters = !currentFilters.from && !currentFilters.to;
-                if (!shouldUpdateFilters) {
-                    return currentFilters;
-                }
-                preventFetch.current = true;
-                return Object.assign(Object.assign({}, currentFilters), { from, to });
-            });
-        }
-    };
-    useAutofetcher((isBackground) => {
-        if (preventFetch.current) {
-            preventFetch.current = false;
-            return;
-        }
-        if (!isBackground) {
-            dispatch(setTopQueriesState({
-                wasLoaded: false,
-                data: undefined,
-            }));
-        }
-        dispatch(fetchTopQueries({ database: path, filters })).then(setDefaultFiltersFromResponse);
-    }, [dispatch, filters, path], autorefresh);
-    const handleRowClick = useCallback((row) => {
+    const handleRowClick = React.useCallback((row) => {
         const { QueryText: input } = row;
         dispatch(changeUserInput({ input }));
         const queryParams = parseQuery(location);
@@ -77,25 +42,25 @@ export const TopQueries = ({ path, type }) => {
         history.push(queryPath);
     }, [dispatch, history, location]);
     const handleTextSearchUpdate = (text) => {
-        setFilters((currentFilters) => (Object.assign(Object.assign({}, currentFilters), { text })));
+        dispatch(setTopQueriesFilters({ text }));
     };
     const handleDateRangeChange = (value) => {
-        setFilters((currentFilters) => (Object.assign(Object.assign({}, currentFilters), value)));
+        dispatch(setTopQueriesFilters(value));
     };
     const renderLoader = () => {
-        return (_jsx("div", Object.assign({ className: b('loader') }, { children: _jsx(Loader, { size: "m" }) })));
+        return (_jsx("div", { className: b('loader'), children: _jsx(Loader, { size: "m" }) }));
     };
     const renderContent = () => {
-        if (loading && !wasLoaded) {
+        if (loading) {
             return renderLoader();
         }
-        if (error && !error.isCancelled) {
-            return _jsx("div", Object.assign({ className: "error" }, { children: prepareQueryError(error) }));
+        if (error && typeof error === 'object' && !error.isCancelled) {
+            return _jsx("div", { className: "error", children: prepareQueryError(error) });
         }
         if (!data || isColumnEntityType(type)) {
             return i18n('no-data');
         }
-        return (_jsx("div", Object.assign({ className: b('table') }, { children: _jsx(DataTable, { columns: columns, data: data, settings: QUERY_TABLE_SETTINGS, onRowClick: handleRowClick, theme: "yandex-cloud" }) })));
+        return (_jsx("div", { className: b('table'), children: _jsx(DataTable, { columns: columns, data: data, settings: QUERY_TABLE_SETTINGS, onRowClick: handleRowClick, theme: "yandex-cloud" }) }));
     };
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(Search, { value: filters.text, onChange: handleTextSearchUpdate, placeholder: i18n('filter.text.placeholder'), className: b('search') }), _jsx(DateRange, { from: filters.from, to: filters.to, onChange: handleDateRangeChange })] })), renderContent()] })));
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('controls'), children: [_jsx(Search, { value: filters.text, onChange: handleTextSearchUpdate, placeholder: i18n('filter.text.placeholder'), className: b('search') }), _jsx(DateRange, { from: filters.from, to: filters.to, onChange: handleDateRangeChange })] }), renderContent()] }));
 };

package/dist/containers/Tenant/Diagnostics/TopQueries/getTopQueriesColumns.d.ts

@@ -1,4 +1,4 @@
-import { type Column } from '@gravity-ui/react-data-table';
+import type { Column } from '@gravity-ui/react-data-table';
 import type { KeyValueRow } from '../../../../types/api/query';
 import './TopQueries.scss';
 export declare const getTopQueriesColumns: () => Column<KeyValueRow>[];

package/dist/containers/Tenant/Diagnostics/TopQueries/getTopQueriesColumns.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import DataTable from '@gravity-ui/react-data-table';
+import { OneLineQueryWithPopover, TruncatedQuery, } from '../../../../components/TruncatedQuery/TruncatedQuery';
+import { cn } from '../../../../utils/cn';
 import { formatDateTime, formatNumber } from '../../../../utils/dataFormatters/dataFormatters';
 import { generateHash } from '../../../../utils/generateHash';
-import { TruncatedQuery, OneLineQueryWithPopover, } from '../../../../components/TruncatedQuery/TruncatedQuery';
 import { parseUsToMs } from '../../../../utils/timeParsers';
 import { MAX_QUERY_HEIGHT } from '../../utils/constants';
 import './TopQueries.scss';
@@ -31,7 +31,7 @@ const queryTextColumn = {
     sortAccessor: (row) => Number(row.CPUTimeUs),
     render: ({ row }) => {
         var _a;
-        return (_jsx("div", Object.assign({ className: b('query') }, { children: _jsx(TruncatedQuery, { value: (_a = row.QueryText) === null || _a === void 0 ? void 0 : _a.toString(), maxQueryHeight: MAX_QUERY_HEIGHT }) })));
+        return (_jsx("div", { className: b('query'), children: _jsx(TruncatedQuery, { value: (_a = row.QueryText) === null || _a === void 0 ? void 0 : _a.toString(), maxQueryHeight: MAX_QUERY_HEIGHT }) }));
     },
     sortable: false,
 };
@@ -54,7 +54,7 @@ const readBytesColumn = {
 };
 const userSIDColumn = {
     name: TOP_QUERIES_COLUMNS_IDS.UserSID,
-    render: ({ row }) => _jsx("div", Object.assign({ className: b('user-sid') }, { children: row.UserSID || '–' })),
+    render: ({ row }) => _jsx("div", { className: b('user-sid'), children: row.UserSID || '–' }),
     sortAccessor: (row) => String(row.UserSID),
     align: DataTable.LEFT,
 };

package/dist/containers/Tenant/Diagnostics/TopQueries/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: "no-data" | "filter.text.placeholder", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tenant/Diagnostics/TopQueries/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-top-queries';
-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/TopShards/Filters/Filters.d.ts

@@ -1,9 +1,9 @@
-import { type IShardsWorkloadFilters } from '../../../../../store/reducers/shardsWorkload/types';
+import type { ShardsWorkloadFilters } from '../../../../../store/reducers/shardsWorkload/types';
 import './Filters.scss';
 interface FiltersProps {
-    value: IShardsWorkloadFilters;
-    onChange: (value: Partial<IShardsWorkloadFilters>) => void;
+    value: ShardsWorkloadFilters;
+    onChange: (value: Partial<ShardsWorkloadFilters>) => void;
     className?: string;
 }
-export declare const Filters: ({ value, onChange, className }: FiltersProps) => JSX.Element;
+export declare const Filters: ({ value, onChange, className }: FiltersProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TopShards/Filters/Filters.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RadioButton } from '@gravity-ui/uikit';
 import { DateRange } from '../../../../../components/DateRange';
-import { EShardsWorkloadMode, } from '../../../../../store/reducers/shardsWorkload/types';
+import { EShardsWorkloadMode } from '../../../../../store/reducers/shardsWorkload/types';
 import { isEnumMember } from '../../../../../utils/typecheckers';
-import i18n from '../i18n';
 import { b } from '../TopShards';
+import i18n from '../i18n';
 import './Filters.scss';
 export const Filters = ({ value, onChange, className }) => {
     const handleModeChange = (mode) => {
@@ -19,5 +19,5 @@ export const Filters = ({ value, onChange, className }) => {
     };
     const from = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.from;
     const to = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.to;
-    return (_jsxs("div", Object.assign({ className: b('filters', className) }, { children: [_jsxs(RadioButton, Object.assign({ value: value.mode, onUpdate: handleModeChange }, { children: [_jsx(RadioButton.Option, Object.assign({ value: EShardsWorkloadMode.Immediate }, { children: i18n('filters.mode.immediate') })), _jsx(RadioButton.Option, Object.assign({ value: EShardsWorkloadMode.History }, { children: i18n('filters.mode.history') }))] })), _jsx(DateRange, { from: from, to: to, onChange: handleDateRangeChange })] })));
+    return (_jsxs("div", { className: b('filters', className), children: [_jsxs(RadioButton, { value: value.mode, onUpdate: handleModeChange, children: [_jsx(RadioButton.Option, { value: EShardsWorkloadMode.Immediate, children: i18n('filters.mode.immediate') }), _jsx(RadioButton.Option, { value: EShardsWorkloadMode.History, children: i18n('filters.mode.history') })] }), _jsx(DateRange, { from: from, to: to, onChange: handleDateRangeChange })] }));
 };

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

@@ -1,18 +1,9 @@
 import type { EPathType } from '../../../../types/api/schema';
 import './TopShards.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 TopShardsProps {
     tenantPath: string;
     type?: EPathType;
 }
-export declare const TopShards: ({ tenantPath, type }: TopShardsProps) => JSX.Element;
+export declare const TopShards: ({ tenantPath, type }: TopShardsProps) => import("react/jsx-runtime").JSX.Element;
 export {};