ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/containers/Tenant/Schema/SchemaViewer/helpers.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DataTable from '@gravity-ui/react-data-table';
+import { Icon } from '../../../../components/Icon';
+import { EColumnCodec } from '../../../../types/api/schema';
+import { isColumnEntityType, isExternalTable, isRowTable, isTableType } from '../../utils/schema';
+export const SchemaViewerColumns = {
+    id: 'Id',
+    name: 'Name',
+    key: 'Key',
+    type: 'Type',
+    notNull: 'NotNull',
+    familyName: 'Family',
+    preferredPoolKind: 'Media',
+    columnCodec: 'Compression',
+};
+function prepareOlapTableSchema(tableSchema = {}) {
+    const { Name, Schema } = tableSchema;
+    if (Schema) {
+        const { Columns, KeyColumnNames } = Schema;
+        const KeyColumnIds = KeyColumnNames === null || KeyColumnNames === void 0 ? void 0 : KeyColumnNames.map((name) => {
+            const column = Columns === null || Columns === void 0 ? void 0 : Columns.find((el) => el.Name === name);
+            return column === null || column === void 0 ? void 0 : column.Id;
+        }).filter((id) => id !== undefined);
+        return {
+            Columns,
+            KeyColumnNames,
+            Name,
+            KeyColumnIds,
+        };
+    }
+    return {
+        Name,
+    };
+}
+function formatColumnCodec(codec) {
+    if (!codec) {
+        return null;
+    }
+    if (codec === EColumnCodec.ColumnCodecPlain) {
+        return 'None';
+    }
+    return codec.replace('ColumnCodec', '').toLocaleLowerCase();
+}
+export function prepareColumnDescriptions(type, scheme) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    let keyColumnIds = [];
+    let columns = [];
+    if (isTableType(type) && isColumnEntityType(type)) {
+        const description = (_a = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _a === void 0 ? void 0 : _a.ColumnTableDescription;
+        const columnTableSchema = prepareOlapTableSchema(description);
+        keyColumnIds = (_b = columnTableSchema.KeyColumnIds) !== null && _b !== void 0 ? _b : [];
+        columns = (_c = columnTableSchema.Columns) !== null && _c !== void 0 ? _c : [];
+    }
+    else if (isExternalTable(type)) {
+        columns = (_f = (_e = (_d = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _d === void 0 ? void 0 : _d.ExternalTableDescription) === null || _e === void 0 ? void 0 : _e.Columns) !== null && _f !== void 0 ? _f : [];
+    }
+    else {
+        keyColumnIds = (_j = (_h = (_g = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _g === void 0 ? void 0 : _g.Table) === null || _h === void 0 ? void 0 : _h.KeyColumnIds) !== null && _j !== void 0 ? _j : [];
+        columns = (_m = (_l = (_k = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _k === void 0 ? void 0 : _k.Table) === null || _l === void 0 ? void 0 : _l.Columns) !== null && _m !== void 0 ? _m : [];
+    }
+    return { columns, keyColumnIds };
+}
+export function prepareFamilies(scheme) {
+    var _a, _b, _c, _d, _e;
+    return ((_e = (_d = (_c = (_b = (_a = scheme === null || scheme === void 0 ? void 0 : scheme.PathDescription) === null || _a === void 0 ? void 0 : _a.Table) === null || _b === void 0 ? void 0 : _b.PartitionConfig) === null || _c === void 0 ? void 0 : _c.ColumnFamilies) === null || _d === void 0 ? void 0 : _d.reduce((acc, family) => {
+        if (family.Id) {
+            acc[family.Id] = family;
+        }
+        return acc;
+    }, {})) !== null && _e !== void 0 ? _e : {});
+}
+export function prepareSchemaTableColumns(options) {
+    const keyColumnsOrderValues = options.keyColumnIds.reduce((result, keyColumnId, index) => {
+        // Put columns with negative values, so they will be the first with ascending sort
+        // Minus keyColumnIds.length for the first key, -1 for the last
+        result[keyColumnId] = index - options.keyColumnIds.length;
+        return result;
+    }, {});
+    const columns = [
+        {
+            name: SchemaViewerColumns.id,
+            width: 40,
+        },
+    ];
+    if (!isExternalTable(options.type)) {
+        // External tables don't have key columns
+        columns.push({
+            name: SchemaViewerColumns.key,
+            width: 40,
+            // Table should start with key columns on sort click
+            defaultOrder: DataTable.ASCENDING,
+            // Values in keyColumnsOrderValues are always negative, so it will be 1 for not key columns
+            sortAccessor: (row) => (row.Id && keyColumnsOrderValues[row.Id]) || 1,
+            render: ({ row }) => {
+                return row.Id && options.keyColumnIds.includes(row.Id) ? (_jsx("div", { className: options.b('key-icon'), children: _jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }) })) : null;
+            },
+        });
+    }
+    columns.push({
+        name: SchemaViewerColumns.name,
+        width: 100,
+    }, {
+        name: SchemaViewerColumns.type,
+        width: 100,
+    }, {
+        name: SchemaViewerColumns.notNull,
+        width: 100,
+        // Table should start with notNull columns on sort click
+        defaultOrder: DataTable.DESCENDING,
+        render: ({ row }) => {
+            if (row.NotNull) {
+                return '\u2713';
+            }
+            return undefined;
+        },
+    });
+    if (options.withFamilies && isRowTable(options.type)) {
+        columns.push({
+            name: SchemaViewerColumns.familyName,
+            width: 100,
+            render: ({ row }) => (row.Family ? options.families[row.Family].Name : undefined),
+            sortAccessor: (row) => (row.Family ? options.families[row.Family].Name : undefined),
+        }, {
+            name: SchemaViewerColumns.preferredPoolKind,
+            width: 100,
+            render: ({ row }) => {
+                var _a, _b;
+                return row.Family
+                    ? (_b = (_a = options.families[row.Family].StorageConfig) === null || _a === void 0 ? void 0 : _a.Data) === null || _b === void 0 ? void 0 : _b.PreferredPoolKind
+                    : undefined;
+            },
+            sortAccessor: (row) => {
+                var _a, _b;
+                return row.Family
+                    ? (_b = (_a = options.families[row.Family].StorageConfig) === null || _a === void 0 ? void 0 : _a.Data) === null || _b === void 0 ? void 0 : _b.PreferredPoolKind
+                    : undefined;
+            },
+        }, {
+            name: SchemaViewerColumns.columnCodec,
+            width: 100,
+            render: ({ row }) => row.Family
+                ? formatColumnCodec(options.families[row.Family].ColumnCodec)
+                : undefined,
+            sortAccessor: (row) => row.Family ? options.families[row.Family].ColumnCodec : undefined,
+        });
+    }
+    return columns;
+}

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import type { AdditionalTenantsProps, AdditionalNodesProps } from '../../types/additionalProps';
+import type { AdditionalNodesProps, AdditionalTenantsProps } from '../../types/additionalProps';
 import './Tenant.scss';
 interface TenantProps {
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
-declare function Tenant(props: TenantProps): JSX.Element;
+declare function Tenant(props: TenantProps): import("react/jsx-runtime").JSX.Element;
 export default Tenant;

package/dist/containers/Tenant/Tenant.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useReducer, useRef } from 'react';
-import cn from 'bem-cn-lite';
-import { useLocation } from 'react-router';
+import React from 'react';
 import qs from 'qs';
 import { Helmet } from 'react-helmet-async';
-import { DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY } from '../../utils/constants';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
-import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { disableAutorefresh, getSchema } from '../../store/reducers/schema/schema';
-import SplitPane from '../../components/SplitPane';
+import { useLocation } from 'react-router';
 import { AccessDenied } from '../../components/Errors/403';
-import { ObjectSummary } from './ObjectSummary/ObjectSummary';
+import SplitPane from '../../components/SplitPane';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { getSchema } from '../../store/reducers/schema/schema';
+import { cn } from '../../utils/cn';
+import { DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY } from '../../utils/constants';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
-import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from './utils/paneVisibilityToggleHelpers';
+import { ObjectSummary } from './ObjectSummary/ObjectSummary';
 import i18n from './i18n';
+import { PaneVisibilityActionTypes, paneVisibilityToggleReducerCreator, } from './utils/paneVisibilityToggleHelpers';
 import './Tenant.scss';
 const b = cn('tenant-page');
 const getTenantSummaryState = () => {
@@ -26,15 +26,15 @@ const getTenantSummaryState = () => {
 };
 function Tenant(props) {
     var _a;
-    const [summaryVisibilityState, dispatchSummaryVisibilityAction] = useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED), undefined, getTenantSummaryState);
-    const previousTenant = useRef();
+    const [summaryVisibilityState, dispatchSummaryVisibilityAction] = React.useReducer(paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED), undefined, getTenantSummaryState);
+    const previousTenant = React.useRef();
     const { currentSchemaPath, currentSchema: currentItem = {} } = useTypedSelector((state) => state.schema);
     const { PathType: preloadedPathType, PathSubType: preloadedPathSubType } = useTypedSelector((state) => {
         var _a, _b;
         return currentSchemaPath
-            ? ((_b = (_a = state.schema.data[currentSchemaPath]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self) || {}
-            : {};
-    });
+            ? (_b = (_a = state.schema.data[currentSchemaPath]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Self
+            : undefined;
+    }) || {};
     const { PathType: currentPathType, PathSubType: currentPathSubType } = ((_a = currentItem.PathDescription) === null || _a === void 0 ? void 0 : _a.Self) || {};
     const { error: { status: schemaStatus = 200 } = {} } = useTypedSelector((state) => state.schema);
     const dispatch = useTypedDispatch();
@@ -44,7 +44,7 @@ function Tenant(props) {
     });
     const { name } = queryParams;
     const tenantName = name;
-    useEffect(() => {
+    React.useEffect(() => {
         if (tenantName && typeof tenantName === 'string' && previousTenant.current !== tenantName) {
             const register = async () => {
                 const { registerYQLCompletionItemProvider } = await import('../../utils/monaco/yqlSuggestions/registerCompletionItemProvider');
@@ -54,18 +54,15 @@ function Tenant(props) {
             previousTenant.current = tenantName;
         }
     }, [tenantName]);
-    useEffect(() => {
+    React.useEffect(() => {
         dispatch(getSchema({ path: tenantName }));
     }, [tenantName, dispatch]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (currentSchemaPath) {
             dispatch(getSchema({ path: currentSchemaPath }));
         }
     }, [currentSchemaPath, dispatch]);
-    useEffect(() => {
-        dispatch(disableAutorefresh());
-    }, [currentSchemaPath, tenantName, dispatch]);
-    useEffect(() => {
+    React.useEffect(() => {
         if (tenantName) {
             dispatch(setHeaderBreadcrumbs('tenant', { tenantName }));
         }
@@ -81,10 +78,6 @@ function Tenant(props) {
     };
     const showBlockingError = schemaStatus === 403;
     const title = currentSchemaPath || tenantName || i18n('page.title');
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Helmet, { defaultTitle: `${title} — YDB Monitoring`, titleTemplate: `%s — ${title} — YDB Monitoring` }), showBlockingError ? (_jsx(AccessDenied, {})) : (_jsxs(SplitPane, Object.assign({ defaultSizePaneKey: DEFAULT_SIZE_TENANT_KEY, defaultSizes: [25, 75], triggerCollapse: summaryVisibilityState.triggerCollapse, triggerExpand: summaryVisibilityState.triggerExpand, minSize: [36, 200], onSplitStartDragAdditional: onSplitStartDragAdditional }, { children: [_jsx(ObjectSummary, { type: preloadedPathType || currentPathType, subType: preloadedPathSubType || currentPathSubType, onCollapseSummary: onCollapseSummaryHandler, onExpandSummary: onExpandSummaryHandler, isCollapsed: summaryVisibilityState.collapsed }), _jsx(ObjectGeneral
-                    // @ts-expect-error
-                    , { 
-                        // @ts-expect-error
-                        type: preloadedPathType || currentPathType, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps, tenantName: tenantName })] })))] })));
+    return (_jsxs("div", { className: b(), children: [_jsx(Helmet, { defaultTitle: `${title} — YDB Monitoring`, titleTemplate: `%s — ${title} — YDB Monitoring` }), showBlockingError ? (_jsx(AccessDenied, {})) : (_jsxs(SplitPane, { defaultSizePaneKey: DEFAULT_SIZE_TENANT_KEY, defaultSizes: [25, 75], triggerCollapse: summaryVisibilityState.triggerCollapse, triggerExpand: summaryVisibilityState.triggerExpand, minSize: [36, 200], onSplitStartDragAdditional: onSplitStartDragAdditional, children: [_jsx(ObjectSummary, { type: preloadedPathType || currentPathType, subType: preloadedPathSubType || currentPathSubType, onCollapseSummary: onCollapseSummaryHandler, onExpandSummary: onExpandSummaryHandler, isCollapsed: summaryVisibilityState.collapsed }), _jsx(ObjectGeneral, { type: preloadedPathType || currentPathType, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps, tenantName: tenantName })] }))] }));
 }
 export default Tenant;

package/dist/containers/Tenant/utils/index.d.ts

@@ -1,2 +1,2 @@
-import { TPathDescription } from '../../../types/api/schema';
+import type { TPathDescription } from '../../../types/api/schema';
 export declare const getEntityName: (pathDescription?: TPathDescription) => string | undefined;

package/dist/containers/Tenant/utils/paneVisibilityToggleHelpers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './ToggleButton.scss';
 export interface InitialPaneState {
     triggerExpand: boolean;
@@ -18,5 +17,5 @@ interface ToggleButtonProps {
     initialDirection?: 'right' | 'left' | 'top' | 'bottom';
     className?: string;
 }
-export declare function PaneVisibilityToggleButtons({ onCollapse, onExpand, isCollapsed, initialDirection, className, }: ToggleButtonProps): JSX.Element;
+export declare function PaneVisibilityToggleButtons({ onCollapse, onExpand, isCollapsed, initialDirection, className, }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/utils/paneVisibilityToggleHelpers.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Button } from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
 import { Icon } from '../../../components/Icon';
+import { cn } from '../../../utils/cn';
 import './ToggleButton.scss';
 export var PaneVisibilityActionTypes;
 (function (PaneVisibilityActionTypes) {
@@ -42,9 +42,9 @@ export function paneVisibilityToggleReducerCreator(isPaneCollapsedKey) {
 }
 const b = cn('kv-pane-visibility-button');
 export function PaneVisibilityToggleButtons({ onCollapse, onExpand, isCollapsed, initialDirection = 'top', className, }) {
-    return (_jsxs(React.Fragment, { children: [_jsx(Button, Object.assign({ view: "flat-secondary", onClick: onCollapse, className: b({
+    return (_jsxs(React.Fragment, { children: [_jsx(Button, { view: "flat-secondary", onClick: onCollapse, className: b({
                     hidden: isCollapsed,
-                }, className), title: "Collapse" }, { children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }) }) })), _jsx(Button, Object.assign({ view: "flat-secondary", onClick: onExpand, className: b({
+                }, className), title: "Collapse", children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }) }) }), _jsx(Button, { view: "flat-secondary", onClick: onExpand, className: b({
                     hidden: !isCollapsed,
-                }, className), title: "Expand" }, { children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }, 'rotate') }) }))] }));
+                }, className), title: "Expand", children: _jsx(Icon, { name: "collapse", viewBox: "0 0 384 512", width: 14, height: 14, className: b({ [initialDirection]: true }, 'rotate') }) })] }));
 }

package/dist/containers/Tenant/utils/schema.d.ts

@@ -13,3 +13,4 @@ export declare const isEntityWithMergedImplementation: (type?: EPathType) => boo
 export declare const isChildlessPathType: (type?: EPathType, subType?: EPathSubType) => boolean;
 export declare const isPathTypeWithTopic: (type?: EPathType) => boolean;
 export declare const isExternalTable: (type?: EPathType) => boolean;
+export declare const isRowTable: (type?: EPathType) => boolean;

package/dist/containers/Tenant/utils/schema.js

@@ -169,3 +169,4 @@ const mapPathTypeToIsWithTopic = {
 export const isPathTypeWithTopic = (type) => { var _a; return (_a = (type && mapPathTypeToIsWithTopic[type])) !== null && _a !== void 0 ? _a : false; };
 // ====================
 export const isExternalTable = (type) => type === EPathType.EPathTypeExternalTable;
+export const isRowTable = (type) => type === EPathType.EPathTypeTable;

package/dist/containers/Tenant/utils/schemaActions.d.ts

@@ -1,9 +1,8 @@
-import { Dispatch } from 'react';
 import type { NavigationTreeNodeType } from 'ydb-ui-components';
 import type { QueryMode } from '../../../types/store/query';
 interface ActionsAdditionalEffects {
     setQueryMode: (mode: QueryMode) => void;
     setActivePath: (path: string) => void;
 }
-export declare const getActions: (dispatch: Dispatch<any>, additionalEffects: ActionsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => import("@gravity-ui/uikit").DropdownMenuItemMixed<any>[];
+export declare const getActions: (dispatch: React.Dispatch<any>, additionalEffects: ActionsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => import("@gravity-ui/uikit").DropdownMenuItemMixed<any>[];
 export {};

package/dist/containers/Tenant/utils/schemaActions.js

@@ -1,7 +1,7 @@
 import copy from 'copy-to-clipboard';
 import { changeUserInput } from '../../../store/reducers/executeQuery';
+import { TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
 import { setQueryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
-import { TENANT_QUERY_TABS_ID, TENANT_PAGES_IDS } from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
 import i18n from '../i18n';
 import { alterTableTemplate, alterTopicTemplate, createExternalTableTemplate, createTableTemplate, createTopicTemplate, dropExternalTableTemplate, dropTopicTemplate, selectQueryTemplate, upsertQueryTemplate, } from './queryTemplates';

package/dist/containers/Tenant/utils/schemaControls.d.ts

@@ -1,7 +1,6 @@
-import { Dispatch } from 'react';
-import { NavigationTreeNodeType } from 'ydb-ui-components';
+import type { NavigationTreeNodeType } from 'ydb-ui-components';
 interface ControlsAdditionalEffects {
     setActivePath: (path: string) => void;
 }
-export declare const getControls: (dispatch: Dispatch<any>, additionalEffects: ControlsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => JSX.Element | undefined;
+export declare const getControls: (dispatch: React.Dispatch<any>, additionalEffects: ControlsAdditionalEffects) => (path: string, type: NavigationTreeNodeType) => JSX.Element | undefined;
 export {};

package/dist/containers/Tenant/utils/schemaControls.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@gravity-ui/uikit';
+import { Icon } from '../../../components/Icon';
 import { setShowPreview } from '../../../store/reducers/schema/schema';
-import { setQueryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
 import { TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
-import { Icon } from '../../../components/Icon';
+import { setQueryTab, setTenantPage } from '../../../store/reducers/tenant/tenant';
 import i18n from '../i18n';
 const bindActions = (path, dispatch, additionalEffects) => {
     const { setActivePath } = additionalEffects;
@@ -18,7 +18,7 @@ const bindActions = (path, dispatch, additionalEffects) => {
 };
 export const getControls = (dispatch, additionalEffects) => (path, type) => {
     const options = bindActions(path, dispatch, additionalEffects);
-    const openPreview = (_jsx(Button, Object.assign({ view: "flat-secondary", onClick: options.openPreview, title: i18n('actions.openPreview'), size: "s" }, { children: _jsx(Icon, { name: "tablePreview" }) })));
+    const openPreview = (_jsx(Button, { view: "flat-secondary", onClick: options.openPreview, title: i18n('actions.openPreview'), size: "s", children: _jsx(Icon, { name: "tablePreview" }) }));
     const nodeTypeToControls = {
         database: undefined,
         directory: undefined,

package/dist/containers/Tenants/Tenants.d.ts

@@ -3,5 +3,5 @@ import './Tenants.scss';
 interface TenantsProps {
     additionalTenantsProps?: AdditionalTenantsProps;
 }
-export declare const Tenants: ({ additionalTenantsProps }: TenantsProps) => JSX.Element;
+export declare const Tenants: ({ additionalTenantsProps }: TenantsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenants/Tenants.js

@@ -1,35 +1,35 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { Button } from '@gravity-ui/uikit';
+import { EntitiesCount } from '../../components/EntitiesCount';
 import { EntityStatus } from '../../components/EntityStatus/EntityStatus';
+import { ResponseError } from '../../components/Errors/ResponseError';
+import { Illustration } from '../../components/Illustration';
 import { PoolsGraph } from '../../components/PoolsGraph/PoolsGraph';
-import { TabletsStatistic } from '../../components/TabletsStatistic';
 import { ProblemFilter } from '../../components/ProblemFilter';
-import { Illustration } from '../../components/Illustration';
-import { EntitiesCount } from '../../components/EntitiesCount';
 import { Search } from '../../components/Search';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
-import { ResponseError } from '../../components/Errors/ResponseError';
-import { getTenantsInfo, setSearchValue } from '../../store/reducers/tenants/tenants';
+import { TabletsStatistic } from '../../components/TabletsStatistic';
+import { clusterName } from '../../store';
+import { ProblemFilterValues, changeFilter, selectProblemFilter, } from '../../store/reducers/settings/settings';
 import { selectFilteredTenants, selectTenantsSearchValue, } from '../../store/reducers/tenants/selectors';
-import { changeFilter, ProblemFilterValues, selectProblemFilter, } from '../../store/reducers/settings/settings';
+import { setSearchValue, tenantsApi } from '../../store/reducers/tenants/tenants';
+import { cn } from '../../utils/cn';
+import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { formatBytesToGigabyte, formatCPU, formatNumber, } from '../../utils/dataFormatters/dataFormatters';
-import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
-import { clusterName } from '../../store';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { getTenantPath } from '../Tenant/TenantPages';
 import './Tenants.scss';
 const b = cn('tenants');
 export const Tenants = ({ additionalTenantsProps }) => {
     const dispatch = useTypedDispatch();
-    const { error, loading, wasLoaded, tenants } = useTypedSelector((state) => state.tenants);
+    const { currentData, isFetching, error } = tenantsApi.useGetTenantsInfoQuery({ clusterName }, { pollingInterval: DEFAULT_POLLING_INTERVAL });
+    const loading = isFetching && currentData === undefined;
+    const tenants = currentData !== null && currentData !== void 0 ? currentData : [];
     const searchValue = useTypedSelector(selectTenantsSearchValue);
-    const filteredTenants = useTypedSelector(selectFilteredTenants);
+    const filteredTenants = useTypedSelector((state) => selectFilteredTenants(state, clusterName));
     const problemFilter = useTypedSelector(selectProblemFilter);
-    useAutofetcher(() => {
-        dispatch(getTenantsInfo(clusterName));
-    }, [dispatch], true);
     const handleProblemFilterChange = (value) => {
         dispatch(changeFilter(value));
     };
@@ -37,7 +37,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
         dispatch(setSearchValue(value));
     };
     const renderControls = () => {
-        return (_jsxs(_Fragment, { children: [_jsx(Search, { value: searchValue, onChange: handleSearchChange, placeholder: "Database name", className: b('search') }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(EntitiesCount, { total: tenants.length, current: (filteredTenants === null || filteredTenants === void 0 ? void 0 : filteredTenants.length) || 0, label: 'Databases', loading: loading && !wasLoaded })] }));
+        return (_jsxs(React.Fragment, { children: [_jsx(Search, { value: searchValue, onChange: handleSearchChange, placeholder: "Database name", className: b('search') }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(EntitiesCount, { total: tenants.length, current: (filteredTenants === null || filteredTenants === void 0 ? void 0 : filteredTenants.length) || 0, label: 'Databases', loading: loading })] }));
     };
     const renderTable = () => {
         const getTenantBackend = (tenant) => {
@@ -53,10 +53,10 @@ export const Tenants = ({ additionalTenantsProps }) => {
                     var _a;
                     const backend = getTenantBackend(row);
                     const isExternalLink = Boolean(backend);
-                    return (_jsxs("div", Object.assign({ className: b('name-wrapper') }, { children: [_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
+                    return (_jsxs("div", { className: b('name-wrapper'), children: [_jsx(EntityStatus, { externalLink: isExternalLink, className: b('name'), name: row.Name || 'unknown database', withLeftTrim: true, status: row.Overall, hasClipboardButton: true, path: getTenantPath({
                                     name: row.Name,
                                     backend,
-                                }) }), (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type)] })));
+                                }) }), (_a = additionalTenantsProps === null || additionalTenantsProps === void 0 ? void 0 : additionalTenantsProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantsProps, row.Name, row.Type)] }));
                 },
                 width: 440,
                 sortable: true,
@@ -79,7 +79,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
                     if (row.Type !== 'Serverless') {
                         return row.Type;
                     }
-                    return (_jsxs("div", Object.assign({ className: b('type') }, { children: [_jsx("span", Object.assign({ className: b('type-value') }, { children: row.Type })), _jsx(Button, Object.assign({ className: b('type-button'), onClick: () => handleSearchChange(row.sharedTenantName || '') }, { children: "Show shared" }))] })));
+                    return (_jsxs("div", { className: b('type'), children: [_jsx("span", { className: b('type-value'), children: row.Type }), _jsx(Button, { className: b('type-button'), onClick: () => handleSearchChange(row.sharedTenantName || ''), children: "Show shared" })] }));
                 },
             },
             {
@@ -94,7 +94,7 @@ export const Tenants = ({ additionalTenantsProps }) => {
                 width: 80,
                 render: ({ row }) => {
                     // Don't show values below 0.01 when formatted
-                    if (row.cpu > 10000) {
+                    if (row.cpu && row.cpu > 10000) {
                         return formatCPU(row.cpu);
                     }
                     return '—';
@@ -162,5 +162,5 @@ export const Tenants = ({ additionalTenantsProps }) => {
     if (error) {
         return _jsx(ResponseError, { error: error });
     }
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, Object.assign({ loading: loading && !wasLoaded, className: b('table') }, { children: renderTable() }))] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: loading, className: b('table'), children: renderTable() })] }));
 };

package/dist/containers/UserSettings/Setting.d.ts

@@ -1,11 +1,11 @@
-import type { ReactNode } from 'react';
+/// <reference types="react" />
 export type SettingsElementType = 'switch' | 'radio';
 export interface SettingProps {
     type?: SettingsElementType;
     title: string;
-    description?: ReactNode;
+    description?: React.ReactNode;
     settingKey: string;
-    helpPopoverContent?: ReactNode;
+    helpPopoverContent?: React.ReactNode;
     options?: {
         value: string;
         content: string;
@@ -13,4 +13,4 @@ export interface SettingProps {
     defaultValue?: unknown;
     onValueUpdate?: VoidFunction;
 }
-export declare const Setting: ({ type, settingKey, title, description, helpPopoverContent, options, defaultValue, onValueUpdate, }: SettingProps) => JSX.Element;
+export declare const Setting: ({ type, settingKey, title, description, helpPopoverContent, options, defaultValue, onValueUpdate, }: SettingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/containers/UserSettings/Setting.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RadioButton, Switch } from '@gravity-ui/uikit';
 import { Settings } from '@gravity-ui/navigation';
+import { RadioButton, Switch } from '@gravity-ui/uikit';
 import { LabelWithPopover } from '../../components/LabelWithPopover/LabelWithPopover';
 import { useSetting } from '../../utils/hooks';
 import { b } from './UserSettings';
@@ -25,13 +25,13 @@ export const Setting = ({ type = 'switch', settingKey, title, description, helpP
                 if (!options) {
                     return null;
                 }
-                return (_jsx(RadioButton, Object.assign({ value: String(settingValue), onUpdate: onUpdate }, { children: options.map(({ value, content }) => {
-                        return (_jsx(RadioButton.Option, Object.assign({ value: value }, { children: content }), value));
-                    }) })));
+                return (_jsx(RadioButton, { value: String(settingValue), onUpdate: onUpdate, children: options.map(({ value, content }) => {
+                        return (_jsx(RadioButton.Option, { value: value, children: content }, value));
+                    }) }));
             }
             default:
                 return null;
         }
     };
-    return (_jsx(Settings.Item, Object.assign({ title: title, highlightedTitle: title, description: description, renderTitleComponent: renderTitleComponent }, { children: getSettingsElement(type) })));
+    return (_jsx(Settings.Item, { title: title, highlightedTitle: title, description: description, renderTitleComponent: renderTitleComponent, children: getSettingsElement(type) }));
 };

package/dist/containers/UserSettings/UserSettings.d.ts

@@ -1,17 +1,8 @@
-import { YDBEmbeddedUISettings } from './settings';
+import type { YDBEmbeddedUISettings } from './settings';
 import './UserSettings.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 UserSettingsProps {
     settings?: YDBEmbeddedUISettings;
 }
-export declare const UserSettings: ({ settings: userSettings }: UserSettingsProps) => JSX.Element;
+export declare const UserSettings: ({ settings: userSettings }: UserSettingsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/UserSettings/UserSettings.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
 import { Settings } from '@gravity-ui/navigation';
-import { settings } from './settings';
+import { cn } from '../../utils/cn';
 import { Setting } from './Setting';
+import { settings } from './settings';
 import './UserSettings.scss';
 export const b = cn('ydb-user-settings');
 export const UserSettings = ({ settings: userSettings = settings }) => {
     return (_jsx(Settings, { children: userSettings.map((page) => {
             const { id, title, icon, sections = [] } = page;
-            return (_jsx(Settings.Page, Object.assign({ id: id, title: title, icon: icon }, { children: sections.map((section) => {
+            return (_jsx(Settings.Page, { id: id, title: title, icon: icon, children: sections.map((section) => {
                     const { title: sectionTitle, settings: sectionSettings = [] } = section;
-                    return (_jsx(Settings.Section, Object.assign({ title: sectionTitle }, { children: sectionSettings.map((setting) => {
+                    return (_jsx(Settings.Section, { title: sectionTitle, children: sectionSettings.map((setting) => {
                             return _jsx(Setting, Object.assign({}, setting), setting.settingKey);
-                        }) }), id));
-                }) }), id));
+                        }) }, id));
+                }) }, id));
         }) }));
 };

package/dist/containers/UserSettings/settings.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PencilToSquare, Flask, StarFill } from '@gravity-ui/icons';
-import { INVERTED_DISKS_KEY, LANGUAGE_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, QUERY_USE_MULTI_SCHEMA_KEY, BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, } from '../../utils/constants';
+import { Flask, PencilToSquare, StarFill } from '@gravity-ui/icons';
+import { BINARY_DATA_IN_PLAIN_TEXT_DISPLAY, ENABLE_AUTOCOMPLETE, INVERTED_DISKS_KEY, LANGUAGE_KEY, QUERY_USE_MULTI_SCHEMA_KEY, THEME_KEY, USE_BACKEND_PARAMS_FOR_TABLES_KEY, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, } from '../../utils/constants';
 import { Lang, defaultLang } from '../../utils/i18n';
-import i18n from './i18n';
 import { ClusterModeGuard } from '../ClusterModeGuard';
+import i18n from './i18n';
 const themeOptions = [
     {
         value: 'system',
@@ -47,7 +47,7 @@ export const languageSetting = {
 export const binaryDataInPlainTextDisplay = {
     settingKey: BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
     title: i18n('settings.binaryDataInPlainTextDisplay.title'),
-    description: (_jsx(ClusterModeGuard, Object.assign({ mode: "multi" }, { children: i18n('settings.binaryDataInPlainTextDisplay.description') }))),
+    description: (_jsx(ClusterModeGuard, { mode: "multi", children: i18n('settings.binaryDataInPlainTextDisplay.description') })),
 };
 export const invertedDisksSetting = {
     settingKey: INVERTED_DISKS_KEY,

package/dist/containers/VDiskPage/VDiskPage.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import './VDiskPage.scss';
-export declare function VDiskPage(): JSX.Element;
+export declare function VDiskPage(): import("react/jsx-runtime").JSX.Element;