ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Storage/StorageNodes/VirtualStorageNodes.d.ts

@@ -1,7 +1,7 @@
+import type { RenderControls, RenderErrorMessage } from '../../../components/VirtualTable';
+import type { VisibleEntities } from '../../../store/reducers/storage/types';
 import type { AdditionalNodesProps } from '../../../types/additionalProps';
 import { NodesUptimeFilterValues } from '../../../utils/nodes';
-import { type RenderControls, type RenderErrorMessage } from '../../../components/VirtualTable';
-import type { VisibleEntities } from '../../../store/reducers/storage/types';
 interface VirtualStorageNodesProps {
     searchValue: string;
     visibleEntities: VisibleEntities;
@@ -13,5 +13,5 @@ interface VirtualStorageNodesProps {
     renderControls: RenderControls;
     renderErrorMessage: RenderErrorMessage;
 }
-export declare const VirtualStorageNodes: ({ searchValue, visibleEntities, nodesUptimeFilter, tenant, additionalNodesProps, onShowAll, parentContainer, renderControls, renderErrorMessage, }: VirtualStorageNodesProps) => JSX.Element;
+export declare const VirtualStorageNodes: ({ searchValue, visibleEntities, nodesUptimeFilter, tenant, additionalNodesProps, onShowAll, parentContainer, renderControls, renderErrorMessage, }: VirtualStorageNodesProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/StorageNodes/VirtualStorageNodes.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { getUptimeParamValue, NodesUptimeFilterValues, } from '../../../utils/nodes';
-import { VirtualTable, } from '../../../components/VirtualTable';
+import React from 'react';
+import { VirtualTable } from '../../../components/VirtualTable';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
+import { NodesUptimeFilterValues, getUptimeParamValue } from '../../../utils/nodes';
 import { StorageNodesEmptyDataMessage } from './StorageNodesEmptyDataMessage';
-import { getPreparedStorageNodesColumns } from './getStorageNodesColumns';
 import { getStorageNodes } from './getNodes';
-import { getRowUnavailableClassName } from './shared';
+import { getPreparedStorageNodesColumns } from './getStorageNodesColumns';
 import i18n from './i18n';
+import { getRowUnavailableClassName } from './shared';
 export const VirtualStorageNodes = ({ searchValue, visibleEntities, nodesUptimeFilter, tenant, additionalNodesProps, onShowAll, parentContainer, renderControls, renderErrorMessage, }) => {
-    const filters = useMemo(() => {
+    const filters = React.useMemo(() => {
         return [searchValue, visibleEntities, nodesUptimeFilter, tenant];
     }, [searchValue, visibleEntities, nodesUptimeFilter, tenant]);
-    const fetchData = useCallback(async (limit, offset, { sortOrder, columnId } = {}) => {
+    const fetchData = React.useCallback(async (limit, offset, { sortOrder, columnId } = {}) => {
         return await getStorageNodes({
             limit,
             offset,
@@ -24,7 +24,7 @@ export const VirtualStorageNodes = ({ searchValue, visibleEntities, nodesUptimeF
             sortValue: columnId,
         });
     }, [nodesUptimeFilter, searchValue, tenant, visibleEntities]);
-    const columns = useMemo(() => {
+    const columns = React.useMemo(() => {
         return getPreparedStorageNodesColumns(additionalNodesProps, visibleEntities);
     }, [additionalNodesProps, visibleEntities]);
     const renderEmptyDataMessage = () => {

package/dist/containers/Storage/StorageNodes/getStorageNodesColumns.d.ts

@@ -1,4 +1,5 @@
-import { type Column as DataTableColumn } from '@gravity-ui/react-data-table';
+/// <reference types="react" />
+import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
 import type { PreparedStorageNode, VisibleEntities } from '../../../store/reducers/storage/types';
 import type { AdditionalNodesProps } from '../../../types/additionalProps';
 export declare const STORAGE_NODES_COLUMNS_IDS: {
@@ -27,7 +28,7 @@ export declare const getPreparedStorageNodesColumns: (additionalNodesProps: Addi
         headerData?: boolean | undefined;
     }) => import("react").ReactNode);
     width: number;
-    align: "left" | "right" | "center";
+    align: "center" | "left" | "right";
     headerTitle?: string | undefined;
     accessor?: string | ((row: PreparedStorageNode) => any) | undefined;
     title?: string | ((row: PreparedStorageNode) => string) | undefined;

package/dist/containers/Storage/StorageNodes/getStorageNodesColumns.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
-import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { NodeHostWrapper } from '../../../components/NodeHostWrapper/NodeHostWrapper';
-import { isSortableNodesProperty } from '../../../utils/nodes';
+import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
 import { EMPTY_DATA_PLACEHOLDER } from '../../../utils/constants';
+import { isSortableNodesProperty } from '../../../utils/nodes';
 import { PDisk } from '../PDisk/PDisk';
 import { b } from './shared';
 export const STORAGE_NODES_COLUMNS_IDS = {
@@ -70,11 +70,11 @@ const getStorageNodesColumns = (additionalNodesProps) => {
             header: 'PDisks',
             render: ({ row }) => {
                 var _a;
-                return (_jsx("div", Object.assign({ className: b('pdisks-wrapper') }, { children: (_a = row.PDisks) === null || _a === void 0 ? void 0 : _a.map((pDisk) => {
+                return (_jsx("div", { className: b('pdisks-wrapper'), children: (_a = row.PDisks) === null || _a === void 0 ? void 0 : _a.map((pDisk) => {
                         var _a;
                         const vDisks = (_a = row.VDisks) === null || _a === void 0 ? void 0 : _a.filter((vdisk) => vdisk.PDiskId === pDisk.PDiskId);
-                        return (_jsx("div", Object.assign({ className: b('pdisks-item') }, { children: _jsx(PDisk, { data: pDisk, nodeId: row.NodeId, vDisks: vDisks }) }), pDisk.PDiskId));
-                    }) })));
+                        return (_jsx("div", { className: b('pdisks-item'), children: _jsx(PDisk, { data: pDisk, nodeId: row.NodeId, vDisks: vDisks }) }, pDisk.PDiskId));
+                    }) }));
             },
             align: DataTable.CENTER,
             sortable: false,

package/dist/containers/Storage/StorageNodes/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: "empty.default" | "empty.out_of_space" | "empty.degraded" | "show_all" | "empty.small_uptime" | "empty.several_filters", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Storage/StorageNodes/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-storage-nodes';
-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/Storage/StorageNodes/shared.d.ts

@@ -1,12 +1,3 @@
 import type { PreparedStorageNode } from '../../../store/reducers/storage/types';
-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;
 export declare const getRowUnavailableClassName: (row: PreparedStorageNode) => string;

package/dist/containers/Storage/StorageNodes/shared.js

@@ -1,4 +1,4 @@
-import cn from 'bem-cn-lite';
+import { cn } from '../../../utils/cn';
 import { isUnavailableNode } from '../../../utils/nodes';
 export const b = cn('global-storage-nodes');
 export const getRowUnavailableClassName = (row) => b('node', { unavailable: isUnavailableNode(row) });

package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.d.ts

@@ -3,5 +3,5 @@ interface StorageTypeFilterProps {
     value: StorageType;
     onChange: (value: StorageType) => void;
 }
-export declare const StorageTypeFilter: ({ value, onChange }: StorageTypeFilterProps) => JSX.Element;
+export declare const StorageTypeFilter: ({ value, onChange }: StorageTypeFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.js

@@ -7,5 +7,5 @@ const StorageTypesTitles = {
 };
 const storageTypeFilterQa = 'storage-type-filter';
 export const StorageTypeFilter = ({ value, onChange }) => {
-    return (_jsxs(RadioButton, Object.assign({ value: value, onUpdate: onChange, qa: storageTypeFilterQa }, { children: [_jsx(RadioButton.Option, Object.assign({ value: STORAGE_TYPES.groups }, { children: StorageTypesTitles[STORAGE_TYPES.groups] })), _jsx(RadioButton.Option, Object.assign({ value: STORAGE_TYPES.nodes }, { children: StorageTypesTitles[STORAGE_TYPES.nodes] }))] })));
+    return (_jsxs(RadioButton, { value: value, onUpdate: onChange, qa: storageTypeFilterQa, children: [_jsx(RadioButton.Option, { value: STORAGE_TYPES.groups, children: StorageTypesTitles[STORAGE_TYPES.groups] }), _jsx(RadioButton.Option, { value: STORAGE_TYPES.nodes, children: StorageTypesTitles[STORAGE_TYPES.nodes] })] }));
 };

package/dist/containers/Storage/StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter.d.ts

@@ -8,5 +8,5 @@ interface StorageProblemFilterProps {
     value: VisibleEntities;
     onChange: (value: VisibleEntities) => void;
 }
-export declare const StorageVisibleEntitiesFilter: ({ value, onChange }: StorageProblemFilterProps) => JSX.Element;
+export declare const StorageVisibleEntitiesFilter: ({ value, onChange }: StorageProblemFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter.js

@@ -8,5 +8,5 @@ export const VisibleEntitiesTitles = {
 };
 const storageVisibleEntitiesFilterQa = 'storage-visible-entities-filter';
 export const StorageVisibleEntitiesFilter = ({ value, onChange }) => {
-    return (_jsxs(RadioButton, Object.assign({ value: value, onUpdate: onChange, qa: storageVisibleEntitiesFilterQa }, { children: [_jsx(RadioButton.Option, Object.assign({ value: VISIBLE_ENTITIES.missing }, { children: VisibleEntitiesTitles[VISIBLE_ENTITIES.missing] })), _jsx(RadioButton.Option, Object.assign({ value: VISIBLE_ENTITIES.space }, { children: VisibleEntitiesTitles[VISIBLE_ENTITIES.space] })), _jsx(RadioButton.Option, Object.assign({ value: VISIBLE_ENTITIES.all }, { children: VisibleEntitiesTitles[VISIBLE_ENTITIES.all] }))] })));
+    return (_jsxs(RadioButton, { value: value, onUpdate: onChange, qa: storageVisibleEntitiesFilterQa, children: [_jsx(RadioButton.Option, { value: VISIBLE_ENTITIES.missing, children: VisibleEntitiesTitles[VISIBLE_ENTITIES.missing] }), _jsx(RadioButton.Option, { value: VISIBLE_ENTITIES.space, children: VisibleEntitiesTitles[VISIBLE_ENTITIES.space] }), _jsx(RadioButton.Option, { value: VISIBLE_ENTITIES.all, children: VisibleEntitiesTitles[VISIBLE_ENTITIES.all] })] }));
 };

package/dist/containers/Storage/StorageWrapper.d.ts

@@ -5,5 +5,5 @@ interface StorageWrapperProps {
     parentContainer?: Element | null;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare const StorageWrapper: ({ parentContainer, ...props }: StorageWrapperProps) => JSX.Element;
+export declare const StorageWrapper: ({ parentContainer, ...props }: StorageWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/StorageWrapper.js

@@ -2,8 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { USE_BACKEND_PARAMS_FOR_TABLES_KEY } from '../../utils/constants';
 import { useSetting } from '../../utils/hooks';
-import { VirtualStorage } from './VirtualStorage';
 import { Storage } from './Storage';
+import { VirtualStorage } from './VirtualStorage';
 export const StorageWrapper = (_a) => {
     var { parentContainer } = _a, props = __rest(_a, ["parentContainer"]);
     const [useVirtualTable] = useSetting(USE_BACKEND_PARAMS_FOR_TABLES_KEY);

package/dist/containers/Storage/UsageFilter/UsageFilter.d.ts

@@ -10,5 +10,5 @@ interface UsageFilterProps {
     onChange?: (value: string[]) => void;
     debounce?: number;
 }
-export declare const UsageFilter: (props: UsageFilterProps) => JSX.Element;
+export declare const UsageFilter: (props: UsageFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/UsageFilter/UsageFilter.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { Select } from '@gravity-ui/uikit';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
+import { cn } from '../../../utils/cn';
 import { getUsageSeverityForEntityStatus } from '../utils';
 import i18n from './i18n';
 import './UsageFilter.scss';
 const b = cn('usage-filter');
 export const UsageFilter = (props) => {
     const { className, value = [], groups = [], onChange, debounce = 200 } = props;
-    const [filterValue, setFilterValue] = useState(value);
-    const timer = useRef();
-    useEffect(() => {
+    const [filterValue, setFilterValue] = React.useState(value);
+    const timer = React.useRef();
+    React.useEffect(() => {
         // sync inner state with external value
         setFilterValue((prevValue) => {
             if (prevValue.join(',') !== value.join(',')) {
@@ -20,7 +20,7 @@ export const UsageFilter = (props) => {
             return prevValue;
         });
     }, [value]);
-    const options = useMemo(() => groups.map(({ threshold, count }) => ({
+    const options = React.useMemo(() => groups.map(({ threshold, count }) => ({
         value: String(threshold),
         text: `${threshold}%`,
         data: { count },
@@ -33,6 +33,6 @@ export const UsageFilter = (props) => {
         }, debounce);
     };
     const maxWidth = Math.max(...groups.map(({ count }) => count));
-    const renderOption = ({ value: optionValue, data, text }) => (_jsxs("div", Object.assign({ className: b('option') }, { children: [_jsx(EntityStatus, { className: b('option-title'), status: getUsageSeverityForEntityStatus(Number(optionValue)), name: text, size: "xs" }), _jsxs("div", Object.assign({ className: b('option-meta') }, { children: [i18n('groups_count', { count: data.count }), _jsx("div", { className: b('option-bar'), style: { width: `${(data.count / maxWidth) * 100}%` } })] }))] })));
+    const renderOption = ({ value: optionValue, data, text }) => (_jsxs("div", { className: b('option'), children: [_jsx(EntityStatus, { className: b('option-title'), status: getUsageSeverityForEntityStatus(Number(optionValue)), name: text, size: "xs" }), _jsxs("div", { className: b('option-meta'), children: [i18n('groups_count', { count: data.count }), _jsx("div", { className: b('option-bar'), style: { width: `${(data.count / maxWidth) * 100}%` } })] })] }));
     return (_jsx(Select, { className: b(null, className), label: i18n('label'), value: filterValue, placeholder: i18n('default_value'), options: options, multiple: true, onUpdate: handleUpdate, renderOption: renderOption, getOptionHeight: () => 50, popupWidth: 280, disabled: groups.length === 0 }));
 };

package/dist/containers/Storage/UsageFilter/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: "label" | "default_value" | "groups_count", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Storage/UsageFilter/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-usage-filter';
-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/Storage/VirtualStorage.d.ts

@@ -5,5 +5,5 @@ interface VirtualStorageProps {
     parentContainer?: Element | null;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare const VirtualStorage: ({ tenant, nodeId, parentContainer, additionalNodesProps, }: VirtualStorageProps) => JSX.Element;
+export declare const VirtualStorage: ({ tenant, nodeId, parentContainer, additionalNodesProps, }: VirtualStorageProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/VirtualStorage.js

@@ -1,24 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { STORAGE_TYPES, VISIBLE_ENTITIES } from '../../store/reducers/storage/constants';
-import { NodesUptimeFilterValues } from '../../utils/nodes';
+import React from 'react';
 import { AccessDenied } from '../../components/Errors/403/AccessDenied';
 import { ResponseError } from '../../components/Errors/ResponseError/ResponseError';
-import { getNodesList, selectNodesMap } from '../../store/reducers/nodesList';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
+import { selectNodesMap } from '../../store/reducers/nodesList';
+import { STORAGE_TYPES, VISIBLE_ENTITIES } from '../../store/reducers/storage/constants';
+import { useTypedSelector } from '../../utils/hooks';
+import { NodesUptimeFilterValues } from '../../utils/nodes';
 import { StorageControls } from './StorageControls/StorageControls';
 import { VirtualStorageGroups } from './StorageGroups/VirtualStorageGroups';
 import { VirtualStorageNodes } from './StorageNodes/VirtualStorageNodes';
 export const VirtualStorage = ({ tenant, nodeId, parentContainer, additionalNodesProps, }) => {
-    const dispatch = useTypedDispatch();
-    const [searchValue, setSearchValue] = useState('');
-    const [storageType, setStorageType] = useState(STORAGE_TYPES.groups);
-    const [visibleEntities, setVisibleEntities] = useState(VISIBLE_ENTITIES.all);
-    const [nodesUptimeFilter, setNodesUptimeFilter] = useState(NodesUptimeFilterValues.All);
+    const [searchValue, setSearchValue] = React.useState('');
+    const [storageType, setStorageType] = React.useState(STORAGE_TYPES.groups);
+    const [visibleEntities, setVisibleEntities] = React.useState(VISIBLE_ENTITIES.all);
+    const [nodesUptimeFilter, setNodesUptimeFilter] = React.useState(NodesUptimeFilterValues.All);
     const nodesMap = useTypedSelector(selectNodesMap);
-    useEffect(() => {
-        dispatch(getNodesList());
-    }, [dispatch]);
     const handleShowAllGroups = () => {
         setVisibleEntities(VISIBLE_ENTITIES.all);
     };

package/dist/containers/Storage/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" | "groups" | "controls_groups-search-placeholder" | "controls_nodes-search-placeholder", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Storage/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-storage';
-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/Storage/shared.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/Storage/shared.js

@@ -1,2 +1,2 @@
-import cn from 'bem-cn-lite';
+import { cn } from '../../utils/cn';
 export const b = cn('global-storage');

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

@@ -1,5 +1,5 @@
 import type { PreparedStorageGroup } from '../../../store/reducers/storage/types';
 import { EFlag } from '../../../types/api/enums';
-export declare const getDegradedSeverity: (group: PreparedStorageGroup) => "success" | "warning" | "danger" | undefined;
-export declare const getUsageSeverityForStorageGroup: (value: number) => "success" | "warning" | "danger" | undefined;
+export declare const getDegradedSeverity: (group: PreparedStorageGroup) => "success" | "danger" | "warning" | undefined;
+export declare const getUsageSeverityForStorageGroup: (value: number) => "success" | "danger" | "warning" | undefined;
 export declare const getUsageSeverityForEntityStatus: (value: number) => EFlag.Green | EFlag.Yellow | EFlag.Red | undefined;

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

@@ -1,12 +1,3 @@
 import './Tablet.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 Tablet: () => JSX.Element;
+export declare const b: import("@bem-react/classname").ClassNameFormatter;
+export declare const Tablet: () => import("react/jsx-runtime").JSX.Element;

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 = () => {
@@ -17,7 +18,8 @@ export const TabletControls = ({ tablet, fetchData }) => {
     const hasHiveId = () => {
         return HiveId && HiveId !== '0';
     };
+    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') }, { 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 {};