ydb-embedded-ui 5.5.0 → 6.0.1

package/dist/containers/Tablet/Tablet.js

@@ -1,56 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
-import { useLocation, useParams } from 'react-router';
-import cn from 'bem-cn-lite';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Link as ExternalLink } from '@gravity-ui/uikit';
+import { skipToken } from '@reduxjs/toolkit/query';
 import { Helmet } from 'react-helmet-async';
-import { backend } from '../../store';
-import { getTablet, getTabletDescribe, clearTabletData } from '../../store/reducers/tablet';
-import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../utils/hooks';
-import { CLUSTER_DEFAULT_TITLE, DEVELOPER_UI_TITLE } from '../../utils/constants';
-import { parseQuery } from '../../routes';
+import { useLocation, useParams } from 'react-router';
+import { EmptyState } from '../../components/EmptyState';
 import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
 import { ResponseError } from '../../components/Errors/ResponseError';
-import { Tag } from '../../components/Tag';
 import { Icon } from '../../components/Icon';
-import { EmptyState } from '../../components/EmptyState';
 import { Loader } from '../../components/Loader';
-import { TabletTable } from './TabletTable';
-import { TabletInfo } from './TabletInfo';
+import { Tag } from '../../components/Tag';
+import { parseQuery } from '../../routes';
+import { backend } from '../../store';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { tabletApi } from '../../store/reducers/tablet';
+import { cn } from '../../utils/cn';
+import { CLUSTER_DEFAULT_TITLE, DEFAULT_POLLING_INTERVAL, DEVELOPER_UI_TITLE, } from '../../utils/constants';
+import { useTypedDispatch } from '../../utils/hooks';
 import { TabletControls } from './TabletControls';
+import { TabletInfo } from './TabletInfo';
+import { TabletTable } from './TabletTable';
 import i18n from './i18n';
 import './Tablet.scss';
 export const b = cn('tablet-page');
 export const Tablet = () => {
     var _a;
-    const isFirstDataFetchRef = useRef(true);
+    const isFirstDataFetchRef = React.useRef(true);
     const dispatch = useTypedDispatch();
     const location = useLocation();
     const params = useParams();
     const { id } = params;
-    const { data: tablet = {}, loading, id: tabletId, history = [], tenantPath, error, } = useTypedSelector((state) => state.tablet);
     const { nodeId: queryNodeId, tenantName: queryTenantName, type: queryTabletType, clusterName: queryClusterName, } = parseQuery(location);
+    const { currentData, isFetching, error, refetch } = tabletApi.useGetTabletQuery({ id }, { pollingInterval: DEFAULT_POLLING_INTERVAL });
+    const loading = isFetching && currentData === undefined;
+    const { id: tabletId, data: tablet = {}, history = [] } = currentData || {};
+    const { currentData: tenantPath } = tabletApi.useGetTabletDescribeQuery(tablet.TenantId ? { tenantId: tablet.TenantId } : skipToken);
     const nodeId = ((_a = tablet.NodeId) === null || _a === void 0 ? void 0 : _a.toString()) || (queryNodeId === null || queryNodeId === void 0 ? void 0 : queryNodeId.toString());
     const tenantName = tenantPath || (queryTenantName === null || queryTenantName === void 0 ? void 0 : queryTenantName.toString());
     const type = tablet.Type || (queryTabletType === null || queryTabletType === void 0 ? void 0 : queryTabletType.toString());
-    // NOTE: should be reviewed when migrating to React 18
-    useEffect(() => {
-        return () => {
-            dispatch(clearTabletData());
-        };
-    }, [dispatch]);
-    useEffect(() => {
-        if (isFirstDataFetchRef.current && tablet && tablet.TenantId) {
-            dispatch(getTabletDescribe(tablet.TenantId));
-            isFirstDataFetchRef.current = false;
-        }
-    }, [dispatch, tablet]);
-    const fetchData = useCallback(() => {
-        return dispatch(getTablet(id));
-    }, [dispatch, id]);
-    useAutofetcher(fetchData, [fetchData], true);
-    useEffect(() => {
+    React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('tablet', {
             nodeIds: nodeId ? [nodeId] : [],
             tenantName,
@@ -59,7 +47,7 @@ export const Tablet = () => {
         }));
     }, [dispatch, tenantName, id, nodeId, type]);
     const renderExternalLinks = (link, index) => {
-        return (_jsx("li", Object.assign({ className: b('link', { external: true }) }, { children: _jsx(ExternalLink, Object.assign({ href: `${backend}${link.path}`, target: "_blank" }, { children: link.name })) }), index));
+        return (_jsx("li", { className: b('link', { external: true }), children: _jsx(ExternalLink, { href: `${backend}${link.path}`, target: "_blank", children: link.name }) }, index));
     };
     const renderView = () => {
         if (loading && id !== tabletId && isFirstDataFetchRef.current) {
@@ -69,7 +57,7 @@ export const Tablet = () => {
             return _jsx(ResponseError, { error: error });
         }
         if (!tablet || !Object.keys(tablet).length) {
-            return (_jsx("div", Object.assign({ className: b('placeholder') }, { children: _jsx(EmptyState, { title: i18n('emptyState') }) })));
+            return (_jsx("div", { className: b('placeholder'), children: _jsx(EmptyState, { title: i18n('emptyState') }) }));
         }
         const { TabletId, Overall, Leader } = tablet;
         const externalLinks = [
@@ -78,7 +66,7 @@ export const Tablet = () => {
                 path: `/tablets?TabletID=${TabletId}`,
             },
         ];
-        return (_jsx("div", Object.assign({ className: b() }, { children: _jsxs("div", Object.assign({ className: b('pane-wrapper') }, { children: [_jsxs("div", Object.assign({ className: b('left-pane') }, { children: [_jsx("ul", Object.assign({ className: b('links') }, { children: externalLinks.map(renderExternalLinks) })), _jsxs("div", Object.assign({ className: b('row', { header: true }) }, { children: [_jsx("span", Object.assign({ className: b('title') }, { children: i18n('tablet.header') })), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", Object.assign({ rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank" }, { children: _jsx(Icon, { name: "external" }) })), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", Object.assign({ className: b('loader') }, { children: loading && _jsx(Loader, { size: "s" }) }))] })), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: fetchData })] })), _jsx("div", Object.assign({ className: b('rigth-pane') }, { children: _jsx(TabletTable, { history: history }) }))] })) })));
+        return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('pane-wrapper'), children: [_jsxs("div", { className: b('left-pane'), children: [_jsx("ul", { className: b('links'), children: externalLinks.map(renderExternalLinks) }), _jsxs("div", { className: b('row', { header: true }), children: [_jsx("span", { className: b('title'), children: i18n('tablet.header') }), _jsx(EntityStatus, { status: Overall, name: TabletId }), _jsx("a", { rel: "noopener noreferrer", className: b('link', { external: true }), href: `${backend}/tablets?TabletID=${TabletId}`, target: "_blank", children: _jsx(Icon, { name: "external" }) }), Leader && _jsx(Tag, { text: "Leader", type: "blue" }), _jsx("span", { className: b('loader'), children: loading && _jsx(Loader, { size: "s" }) })] }), _jsx(TabletInfo, { tablet: tablet, tenantPath: tenantName }), _jsx(TabletControls, { tablet: tablet, fetchData: refetch })] }), _jsx("div", { className: b('rigth-pane'), children: _jsx(TabletTable, { history: history }) })] }) }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${id} — ${i18n('tablet.header')} — ${tenantName || queryClusterName || CLUSTER_DEFAULT_TITLE}` }) }), renderView()] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${id} — ${i18n('tablet.header')} — ${tenantName || queryClusterName || CLUSTER_DEFAULT_TITLE}` }) }), renderView()] }));
 };

package/dist/containers/Tablet/TabletControls/TabletControls.d.ts

@@ -1,8 +1,7 @@
-import { type TTabletStateInfo } from '../../../types/api/tablet';
-import type { ITabletHandledResponse } from '../../../types/store/tablet';
+import type { TTabletStateInfo } from '../../../types/api/tablet';
 interface TabletControlsProps {
     tablet: TTabletStateInfo;
-    fetchData: () => Promise<ITabletHandledResponse | undefined>;
+    fetchData: () => Promise<unknown>;
 }
-export declare const TabletControls: ({ tablet, fetchData }: TabletControlsProps) => JSX.Element;
+export declare const TabletControls: ({ tablet, fetchData }: TabletControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tablet/TabletControls/TabletControls.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ETabletState } from '../../../types/api/tablet';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { ButtonWithConfirmDialog } from '../../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
-import i18n from '../i18n';
+import { ETabletState } from '../../../types/api/tablet';
 import { b } from '../Tablet';
+import i18n from '../i18n';
 export const TabletControls = ({ tablet, fetchData }) => {
     const { TabletId, HiveId } = tablet;
     const _onKillClick = () => {
@@ -20,5 +21,5 @@ export const TabletControls = ({ tablet, fetchData }) => {
     const isDisabledRestart = tablet.State === ETabletState.Stopped;
     const isDisabledResume = tablet.State !== ETabletState.Stopped && tablet.State !== ETabletState.Dead;
     const isDisabledStop = tablet.State === ETabletState.Stopped || tablet.State === ETabletState.Deleted;
-    return (_jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(ButtonWithConfirmDialog, Object.assign({ dialogContent: i18n('dialog.kill'), onConfirmAction: _onKillClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledRestart }, { children: i18n('controls.kill') })), hasHiveId() ? (_jsxs(_Fragment, { children: [_jsx(ButtonWithConfirmDialog, Object.assign({ dialogContent: i18n('dialog.stop'), onConfirmAction: _onStopClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledStop }, { children: i18n('controls.stop') })), _jsx(ButtonWithConfirmDialog, Object.assign({ dialogContent: i18n('dialog.resume'), onConfirmAction: _onResumeClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledResume }, { children: i18n('controls.resume') }))] })) : null] })));
+    return (_jsxs("div", { className: b('controls'), children: [_jsx(ButtonWithConfirmDialog, { dialogContent: i18n('dialog.kill'), onConfirmAction: _onKillClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledRestart, children: i18n('controls.kill') }), hasHiveId() ? (_jsxs(React.Fragment, { children: [_jsx(ButtonWithConfirmDialog, { dialogContent: i18n('dialog.stop'), onConfirmAction: _onStopClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledStop, children: i18n('controls.stop') }), _jsx(ButtonWithConfirmDialog, { dialogContent: i18n('dialog.resume'), onConfirmAction: _onResumeClick, onConfirmActionSuccess: fetchData, buttonClassName: b('control'), buttonDisabled: isDisabledResume, children: i18n('controls.resume') })] })) : null] }));
 };

package/dist/containers/Tablet/TabletInfo/TabletInfo.d.ts

@@ -1,7 +1,7 @@
-import { TTabletStateInfo } from '../../../types/api/tablet';
+import type { TTabletStateInfo } from '../../../types/api/tablet';
 interface TabletInfoProps {
     tablet: TTabletStateInfo;
     tenantPath?: string;
 }
-export declare const TabletInfo: ({ tablet, tenantPath }: TabletInfoProps) => JSX.Element;
+export declare const TabletInfo: ({ tablet, tenantPath }: TabletInfoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tablet/TabletInfo/TabletInfo.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Link } from 'react-router-dom';
 import { Link as UIKitLink } from '@gravity-ui/uikit';
-import { ETabletState } from '../../../types/api/tablet';
+import { Link } from 'react-router-dom';
 import { InfoViewer } from '../../../components/InfoViewer';
 import routes, { createHref } from '../../../routes';
+import { ETabletState } from '../../../types/api/tablet';
 import { calcUptime } from '../../../utils/dataFormatters/dataFormatters';
 import { getDefaultNodePath } from '../../Node/NodePages';
 import { b } from '../Tablet';
@@ -15,13 +15,13 @@ export const TabletInfo = ({ tablet, tenantPath }) => {
     if (hasHiveId) {
         tabletInfo.push({
             label: 'HiveId',
-            value: (_jsx(UIKitLink, Object.assign({ href: createHref(routes.tablet, { id: HiveId }), target: "_blank" }, { children: HiveId }))),
+            value: (_jsx(UIKitLink, { href: createHref(routes.tablet, { id: HiveId }), target: "_blank", children: HiveId })),
         });
     }
     if (SchemeShard) {
         tabletInfo.push({
             label: 'SchemeShard',
-            value: (_jsx(UIKitLink, Object.assign({ href: createHref(routes.tablet, { id: SchemeShard }), target: "_blank" }, { children: SchemeShard }))),
+            value: (_jsx(UIKitLink, { href: createHref(routes.tablet, { id: SchemeShard }), target: "_blank", children: SchemeShard })),
         });
     }
     tabletInfo.push({ label: 'Type', value: Type }, { label: 'State', value: State });
@@ -30,7 +30,7 @@ export const TabletInfo = ({ tablet, tenantPath }) => {
     }
     tabletInfo.push({ label: 'Generation', value: Generation }, {
         label: 'Node',
-        value: (_jsx(Link, Object.assign({ className: b('link'), to: getDefaultNodePath(String(NodeId)) }, { children: NodeId }))),
+        value: (_jsx(Link, { className: b('link'), to: getDefaultNodePath(String(NodeId)), children: NodeId })),
     });
     if (FollowerId) {
         tabletInfo.push({ label: 'Follower', value: FollowerId });

package/dist/containers/Tablet/TabletTable/TabletTable.d.ts

@@ -2,5 +2,5 @@ import type { ITabletPreparedHistoryItem } from '../../../types/store/tablet';
 interface TabletTableProps {
     history: ITabletPreparedHistoryItem[];
 }
-export declare const TabletTable: ({ history }: TabletTableProps) => JSX.Element;
+export declare const TabletTable: ({ history }: TabletTableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tablet/TabletTable/TabletTable.js

@@ -34,7 +34,7 @@ const columns = [
         align: DataTable.RIGHT,
         sortable: false,
         render: ({ row }) => {
-            return _jsx(InternalLink, Object.assign({ to: getDefaultNodePath(row.nodeId) }, { children: row.nodeId }));
+            return _jsx(InternalLink, { to: getDefaultNodePath(row.nodeId), children: row.nodeId });
         },
     },
     {
@@ -44,7 +44,7 @@ const columns = [
             if (!row.fqdn) {
                 return _jsx("span", { children: "\u2014" });
             }
-            return (_jsx("div", Object.assign({ className: b('host') }, { children: _jsx(EntityStatus, { name: row.fqdn, showStatus: false, hasClipboardButton: true }) })));
+            return (_jsx("div", { className: b('host'), children: _jsx(EntityStatus, { name: row.fqdn, showStatus: false, hasClipboardButton: true }) }));
         },
     },
 ];

package/dist/containers/Tablets/Tablets.d.ts

@@ -4,5 +4,5 @@ interface TabletsProps {
     nodeId?: string | number;
     className?: string;
 }
-export declare const Tablets: ({ path, nodeId, className }: TabletsProps) => JSX.Element;
+export declare const Tablets: ({ path, nodeId, className }: TabletsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,10 +13,10 @@ export class TabletsFilters extends React.Component<any, any, any> {
         setTypeFilter: PropTypes.Requireable<(...args: any[]) => any>;
         stateFilter: PropTypes.Requireable<any[]>;
         typeFilter: PropTypes.Requireable<any[]>;
-        error: PropTypes.Requireable<PropTypes.Requireable<object> | PropTypes.Requireable<string>>;
+        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<object> | PropTypes.Requireable<string>>;
-    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,20 +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 PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import cn from 'bem-cn-lite';
-import map from 'lodash/map';
+import { Loader, Select } from '@gravity-ui/uikit';
 import isEqual from 'lodash/isEqual';
+import map from 'lodash/map';
+import PropTypes from 'prop-types';
 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');
@@ -70,7 +70,7 @@ export class TabletsFilters extends React.Component {
                 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;
@@ -89,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;
@@ -125,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 = {
@@ -156,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,

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;