ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Nodes/Nodes.js

@@ -1,53 +1,44 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
-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 { ASCENDING } from '@gravity-ui/react-data-table/build/esm/lib/constants';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { EntitiesCount } from '../../components/EntitiesCount';
 import { AccessDenied } from '../../components/Errors/403';
+import { ResponseError } from '../../components/Errors/ResponseError';
 import { Illustration } from '../../components/Illustration';
-import { Search } from '../../components/Search';
 import { ProblemFilter } from '../../components/ProblemFilter';
-import { UptimeFilter } from '../../components/UptimeFIlter';
-import { EntitiesCount } from '../../components/EntitiesCount';
+import { Search } from '../../components/Search';
 import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
-import { ResponseError } from '../../components/Errors/ResponseError';
-import { DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY } from '../../utils/constants';
-import { useAutofetcher, useSetting, useTypedSelector, useTableSort, useTypedDispatch, } from '../../utils/hooks';
-import { isSortableNodesProperty, isUnavailableNode, NodesUptimeFilterValues, } from '../../utils/nodes';
-import { getNodes, setNodesUptimeFilter, setSearchValue, resetNodesState, getComputeNodes, setDataWasNotLoaded, setSort, } from '../../store/reducers/nodes/nodes';
-import { selectFilteredNodes } from '../../store/reducers/nodes/selectors';
-import { changeFilter, ProblemFilterValues } from '../../store/reducers/settings/settings';
+import { UptimeFilter } from '../../components/UptimeFIlter';
+import { nodesApi, setInitialState, setSearchValue, setSort, setUptimeFilter, } from '../../store/reducers/nodes/nodes';
+import { filterNodes } from '../../store/reducers/nodes/selectors';
+import { ProblemFilterValues, changeFilter } from '../../store/reducers/settings/settings';
+import { cn } from '../../utils/cn';
+import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, } from '../../utils/constants';
+import { useSetting, useTableSort, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { NodesUptimeFilterValues, isSortableNodesProperty, isUnavailableNode, } from '../../utils/nodes';
 import { getNodesColumns } from './getNodesColumns';
-import './Nodes.scss';
 import i18n from './i18n';
+import './Nodes.scss';
 const b = cn('ydb-nodes');
 export const Nodes = ({ path, additionalNodesProps = {} }) => {
     const dispatch = useTypedDispatch();
     const isClusterNodes = !path;
-    // Since Nodes component is used in several places,
-    // we need to reset filters, searchValue and loading state
-    // in nodes reducer when path changes
-    useEffect(() => {
-        dispatch(resetNodesState());
-    }, [dispatch, path]);
-    const { wasLoaded, loading, error, nodesUptimeFilter, searchValue, sortOrder = ASCENDING, sortValue = 'NodeId', totalNodes, } = useTypedSelector((state) => state.nodes);
+    const { uptimeFilter, searchValue, sortOrder = ASCENDING, sortValue = 'NodeId', } = useTypedSelector((state) => state.nodes);
     const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const nodes = useTypedSelector(selectFilteredNodes);
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
-    const fetchNodes = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        // If there is no path, it's cluster Nodes tab
-        if (path && !useNodesEndpoint) {
-            dispatch(getComputeNodes({ path }));
-        }
-        else {
-            dispatch(getNodes({ path }));
-        }
-    }, [dispatch, path, useNodesEndpoint]);
-    useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
+    const autoRefreshInterval = isClusterNodes ? DEFAULT_POLLING_INTERVAL : autorefresh;
+    // If there is no path, it's cluster Nodes tab
+    const useGetComputeNodes = path && !useNodesEndpoint;
+    const nodesQuery = nodesApi.useGetNodesQuery(useGetComputeNodes ? skipToken : { path }, {
+        pollingInterval: autoRefreshInterval,
+    });
+    const computeQuery = nodesApi.useGetComputeNodesQuery(useGetComputeNodes ? { path } : skipToken, {
+        pollingInterval: autoRefreshInterval,
+    });
+    const { currentData: data, isLoading, error } = useGetComputeNodes ? computeQuery : nodesQuery;
     const [sort, handleSort] = useTableSort({ sortValue, sortOrder }, (sortParams) => dispatch(setSort(sortParams)));
     const handleSearchQueryChange = (value) => {
         dispatch(setSearchValue(value));
@@ -56,10 +47,23 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
         dispatch(changeFilter(value));
     };
     const handleUptimeFilterChange = (value) => {
-        dispatch(setNodesUptimeFilter(value));
+        dispatch(setUptimeFilter(value));
     };
+    // Since Nodes component is used in several places,
+    // we need to reset filters, searchValue
+    // in nodes reducer when path changes
+    React.useEffect(() => {
+        return () => {
+            // Clean data on component unmount
+            dispatch(setInitialState());
+        };
+    }, [dispatch, path]);
+    const nodes = React.useMemo(() => {
+        return filterNodes(data === null || data === void 0 ? void 0 : data.Nodes, { searchValue, uptimeFilter, problemFilter });
+    }, [data, searchValue, uptimeFilter, problemFilter]);
+    const totalNodes = (data === null || data === void 0 ? void 0 : data.TotalNodes) || 0;
     const renderControls = () => {
-        return (_jsxs(_Fragment, { children: [_jsx(Search, { onChange: handleSearchQueryChange, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(UptimeFilter, { value: nodesUptimeFilter, onChange: handleUptimeFilterChange }), _jsx(EntitiesCount, { total: totalNodes, current: (nodes === null || nodes === void 0 ? void 0 : nodes.length) || 0, label: 'Nodes', loading: loading && !wasLoaded })] }));
+        return (_jsxs(React.Fragment, { children: [_jsx(Search, { onChange: handleSearchQueryChange, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: handleProblemFilterChange }), _jsx(UptimeFilter, { value: uptimeFilter, onChange: handleUptimeFilterChange }), _jsx(EntitiesCount, { total: totalNodes, current: (nodes === null || nodes === void 0 ? void 0 : nodes.length) || 0, label: 'Nodes', loading: isLoading })] }));
     };
     const renderTable = () => {
         const rawColumns = getNodesColumns({
@@ -70,7 +74,7 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
         });
         if (nodes && nodes.length === 0) {
             if (problemFilter !== ProblemFilterValues.ALL ||
-                nodesUptimeFilter !== NodesUptimeFilterValues.All) {
+                uptimeFilter !== NodesUptimeFilterValues.All) {
                 return _jsx(Illustration, { name: "thumbsUp", width: "200" });
             }
         }
@@ -82,5 +86,5 @@ export const Nodes = ({ path, additionalNodesProps = {} }) => {
         }
         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: isLoading, className: b('table'), children: renderTable() })] }));
 };

package/dist/containers/Nodes/NodesWrapper.d.ts

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

package/dist/containers/Nodes/NodesWrapper.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 { VirtualNodes } from './VirtualNodes';
 import { Nodes } from './Nodes';
+import { VirtualNodes } from './VirtualNodes';
 export const NodesWrapper = (_a) => {
     var { parentContainer } = _a, props = __rest(_a, ["parentContainer"]);
     const [useVirtualTable] = useSetting(USE_BACKEND_PARAMS_FOR_TABLES_KEY);

package/dist/containers/Nodes/VirtualNodes.d.ts

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

package/dist/containers/Nodes/VirtualNodes.js

@@ -1,31 +1,31 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from 'react';
-import cn from 'bem-cn-lite';
-import { ProblemFilterValues } from '../../store/reducers/settings/settings';
-import { NodesUptimeFilterValues, getProblemParamValue, getUptimeParamValue, isSortableNodesProperty, isUnavailableNode, } from '../../utils/nodes';
-import { updateColumnsWidth, useTableResize } from '../../utils/hooks/useTableResize';
-import { Search } from '../../components/Search';
-import { ProblemFilter } from '../../components/ProblemFilter';
-import { UptimeFilter } from '../../components/UptimeFIlter';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { EntitiesCount } from '../../components/EntitiesCount';
 import { AccessDenied } from '../../components/Errors/403';
 import { ResponseError } from '../../components/Errors/ResponseError';
 import { Illustration } from '../../components/Illustration';
-import { VirtualTable, } from '../../components/VirtualTable';
-import { getNodesColumns } from './getNodesColumns';
+import { ProblemFilter } from '../../components/ProblemFilter';
+import { Search } from '../../components/Search';
+import { UptimeFilter } from '../../components/UptimeFIlter';
+import { VirtualTable } from '../../components/VirtualTable';
+import { ProblemFilterValues } from '../../store/reducers/settings/settings';
+import { cn } from '../../utils/cn';
+import { updateColumnsWidth, useTableResize } from '../../utils/hooks/useTableResize';
+import { NodesUptimeFilterValues, getProblemParamValue, getUptimeParamValue, isSortableNodesProperty, isUnavailableNode, } from '../../utils/nodes';
 import { getNodes } from './getNodes';
+import { getNodesColumns } from './getNodesColumns';
 import i18n from './i18n';
 import './Nodes.scss';
 const b = cn('ydb-nodes');
 export const VirtualNodes = ({ path, parentContainer, additionalNodesProps }) => {
-    const [searchValue, setSearchValue] = useState('');
-    const [problemFilter, setProblemFilter] = useState(ProblemFilterValues.ALL);
-    const [uptimeFilter, setUptimeFilter] = useState(NodesUptimeFilterValues.All);
+    const [searchValue, setSearchValue] = React.useState('');
+    const [problemFilter, setProblemFilter] = React.useState(ProblemFilterValues.ALL);
+    const [uptimeFilter, setUptimeFilter] = React.useState(NodesUptimeFilterValues.All);
     const [tableColumnsWidthSetup, setTableColumnsWidth] = useTableResize('nodesTableColumnsWidth');
-    const filters = useMemo(() => {
+    const filters = React.useMemo(() => {
         return [path, searchValue, problemFilter, uptimeFilter];
     }, [path, searchValue, problemFilter, uptimeFilter]);
-    const fetchData = useCallback(async (limit, offset, { sortOrder, columnId } = {}) => {
+    const fetchData = React.useCallback(async (limit, offset, { sortOrder, columnId } = {}) => {
         return await getNodes({
             limit,
             offset,
@@ -41,7 +41,7 @@ export const VirtualNodes = ({ path, parentContainer, additionalNodesProps }) =>
         return b('node', { unavailable: isUnavailableNode(row) });
     };
     const renderControls = ({ totalEntities, foundEntities, inited }) => {
-        return (_jsxs(_Fragment, { children: [_jsx(Search, { onChange: setSearchValue, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: setProblemFilter }), _jsx(UptimeFilter, { value: uptimeFilter, onChange: setUptimeFilter }), _jsx(EntitiesCount, { total: totalEntities, current: foundEntities, label: 'Nodes', loading: !inited })] }));
+        return (_jsxs(React.Fragment, { children: [_jsx(Search, { onChange: setSearchValue, placeholder: "Host name", className: b('search'), value: searchValue }), _jsx(ProblemFilter, { value: problemFilter, onChange: setProblemFilter }), _jsx(UptimeFilter, { value: uptimeFilter, onChange: setUptimeFilter }), _jsx(EntitiesCount, { total: totalEntities, current: foundEntities, label: 'Nodes', loading: !inited })] }));
     };
     const renderEmptyDataMessage = () => {
         if (problemFilter !== ProblemFilterValues.ALL ||

package/dist/containers/Nodes/getNodesColumns.d.ts

@@ -1,4 +1,4 @@
-import { type Column as DataTableColumn } from '@gravity-ui/react-data-table';
+import type { Column as DataTableColumn } from '@gravity-ui/react-data-table';
 import type { Column as VirtualTableColumn } from '../../components/VirtualTable';
 import type { NodesPreparedEntity } from '../../store/reducers/nodes/types';
 import type { GetNodeRefFunc } from '../../types/additionalProps';

package/dist/containers/Nodes/getNodesColumns.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
+import { CellWithPopover } from '../../components/CellWithPopover/CellWithPopover';
+import { NodeHostWrapper } from '../../components/NodeHostWrapper/NodeHostWrapper';
 import { PoolsGraph } from '../../components/PoolsGraph/PoolsGraph';
 import { ProgressViewer } from '../../components/ProgressViewer/ProgressViewer';
 import { TabletsStatistic } from '../../components/TabletsStatistic';
-import { NodeHostWrapper } from '../../components/NodeHostWrapper/NodeHostWrapper';
-import { formatBytesToGigabyte, formatStorageValuesToGb, } from '../../utils/dataFormatters/dataFormatters';
-import { getLoadSeverityForNode } from '../../store/reducers/nodes/utils';
 import { UsageLabel } from '../../components/UsageLabel/UsageLabel';
-import { CellWithPopover } from '../../components/CellWithPopover/CellWithPopover';
+import { getLoadSeverityForNode } from '../../store/reducers/nodes/utils';
 import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
+import { formatBytesToGigabyte, formatStorageValuesToGb, } from '../../utils/dataFormatters/dataFormatters';
 const NODES_COLUMNS_IDS = {
     NodeId: 'NodeId',
     Host: 'Host',
@@ -65,10 +65,9 @@ const versionColumn = {
     width: 200,
     align: DataTable.LEFT,
     render: ({ row }) => {
-        return _jsx(CellWithPopover, Object.assign({ content: row.Version }, { children: row.Version }));
+        return _jsx(CellWithPopover, { content: row.Version, children: row.Version });
     },
     sortable: false,
-    resizeable: true,
 };
 const uptimeColumn = {
     name: NODES_COLUMNS_IDS.Uptime,

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

package/dist/containers/Nodes/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-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/{PDisk → PDiskPage}/PDiskGroups.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PreparedStorageGroup } from '../../store/reducers/storage/types';
 import type { NodesMap } from '../../types/store/nodesList';
 interface PDiskGroupsProps {
@@ -6,5 +5,5 @@ interface PDiskGroupsProps {
     nodesMap?: NodesMap;
     loading?: boolean;
 }
-export declare function PDiskGroups({ data, nodesMap, loading }: PDiskGroupsProps): JSX.Element;
+export declare function PDiskGroups({ data, nodesMap, loading }: PDiskGroupsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/{PDisk → PDiskPage}/PDiskGroups.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { TableSkeleton } from '../../components/TableSkeleton/TableSkeleton';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { getPDiskStorageColumns } from '../Storage/StorageGroups/getStorageGroupsColumns';
-import { pdiskPageCn } from './shared';
 import { pDiskPageKeyset } from './i18n';
+import { pdiskPageCn } from './shared';
 export function PDiskGroups({ data, nodesMap, loading }) {
-    const pDiskStorageColumns = useMemo(() => {
+    const pDiskStorageColumns = React.useMemo(() => {
         return getPDiskStorageColumns(nodesMap);
     }, [nodesMap]);
     const renderContent = () => {
@@ -16,5 +16,5 @@ export function PDiskGroups({ data, nodesMap, loading }) {
         }
         return (_jsx(DataTable, { theme: "yandex-cloud", data: data, columns: pDiskStorageColumns, settings: DEFAULT_TABLE_SETTINGS }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: pdiskPageCn('groups-title') }, { children: pDiskPageKeyset('groups') })), _jsx("div", { children: renderContent() })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: pdiskPageCn('groups-title'), children: pDiskPageKeyset('groups') }), _jsx("div", { children: renderContent() })] }));
 }

package/dist/containers/PDiskPage/PDiskPage.d.ts

@@ -0,0 +1,2 @@
+import './PDiskPage.scss';
+export declare function PDiskPage(): import("react/jsx-runtime").JSX.Element;

package/dist/containers/{PDisk/PDisk.js → PDiskPage/PDiskPage.js}

@@ -1,59 +1,57 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
-import { StringParam, useQueryParams } from 'use-query-params';
-import { Helmet } from 'react-helmet-async';
+import React from 'react';
 import { Icon } from '@gravity-ui/uikit';
-import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
-import { getPDiskData, getPDiskStorage, setPDiskDataWasNotLoaded, } from '../../store/reducers/pdisk/pdisk';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { Helmet } from 'react-helmet-async';
+import { StringParam, useQueryParams } from 'use-query-params';
+import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { DiskPageTitle } from '../../components/DiskPageTitle/DiskPageTitle';
+import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import { PDiskInfo } from '../../components/PDiskInfo/PDiskInfo';
+import { PageMeta } from '../../components/PageMeta/PageMeta';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { getNodesList, selectNodesMap } from '../../store/reducers/nodesList';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { selectNodesMap } from '../../store/reducers/nodesList';
+import { pDiskApi } from '../../store/reducers/pdisk/pdisk';
+import { valueIsDefined } from '../../utils';
+import { DEFAULT_POLLING_INTERVAL } from '../../utils/constants';
 import { getSeverityColor } from '../../utils/disks/helpers';
-import { PageMeta } from '../../components/PageMeta/PageMeta';
-import { StatusIcon } from '../../components/StatusIcon/StatusIcon';
-import { PDiskInfo } from '../../components/PDiskInfo/PDiskInfo';
-import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
-import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { PDiskGroups } from './PDiskGroups';
-import { pdiskPageCn } from './shared';
 import { pDiskPageKeyset } from './i18n';
-import './PDisk.scss';
-export function PDisk() {
+import { pdiskPageCn } from './shared';
+import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
+import './PDiskPage.scss';
+export function PDiskPage() {
+    var _a;
     const dispatch = useTypedDispatch();
     const nodesMap = useTypedSelector(selectNodesMap);
-    const { pDiskData, groupsData, pDiskLoading, pDiskWasLoaded, groupsLoading, groupsWasLoaded } = useTypedSelector((state) => state.pDisk);
-    const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData;
     const [{ nodeId, pDiskId }] = useQueryParams({
         nodeId: StringParam,
         pDiskId: StringParam,
     });
-    useEffect(() => {
+    React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('pDisk', { nodeId, pDiskId }));
     }, [dispatch, nodeId, pDiskId]);
-    useEffect(() => {
-        dispatch(getNodesList());
-    }, [dispatch]);
-    const fetchData = useCallback(async (isBackground) => {
-        if (!isBackground) {
-            dispatch(setPDiskDataWasNotLoaded());
-        }
-        if (nodeId && pDiskId) {
-            return Promise.all([
-                dispatch(getPDiskData({ nodeId, pDiskId })),
-                dispatch(getPDiskStorage({ nodeId, pDiskId })),
-            ]);
-        }
-        return undefined;
-    }, [dispatch, nodeId, pDiskId]);
-    useAutofetcher(fetchData, [fetchData], true);
+    const params = valueIsDefined(nodeId) && valueIsDefined(pDiskId) ? { nodeId, pDiskId } : skipToken;
+    const pdiskDataQuery = pDiskApi.useGetPdiskInfoQuery(params, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
+    const pDiskLoading = pdiskDataQuery.isFetching && pdiskDataQuery.currentData === undefined;
+    const pDiskData = pdiskDataQuery.currentData || {};
+    const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData;
+    const pDiskStorageQuery = pDiskApi.useGetStorageInfoQuery(params, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
+    const groupsLoading = pDiskStorageQuery.isFetching && pDiskStorageQuery.currentData === undefined;
+    const groupsData = (_a = pDiskStorageQuery.currentData) !== null && _a !== void 0 ? _a : [];
     const handleRestart = async () => {
-        if (nodeId && pDiskId) {
+        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId)) {
             return window.api.restartPDisk(nodeId, pDiskId);
         }
         return undefined;
     };
     const handleAfterRestart = async () => {
-        return fetchData(true);
+        return Promise.all([pdiskDataQuery.refetch(), pDiskStorageQuery.refetch()]);
     };
     const renderHelmet = () => {
         const pDiskPagePart = pDiskId
@@ -65,22 +63,22 @@ export function PDisk() {
     const renderPageMeta = () => {
         const hostItem = NodeHost ? `${pDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
         const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
-        return (_jsx(PageMeta, { className: pdiskPageCn('meta'), items: [hostItem, nodeIdItem, NodeType, NodeDC] }));
+        return (_jsx(PageMeta, { className: pdiskPageCn('meta'), loading: pDiskLoading, items: [hostItem, nodeIdItem, NodeType, NodeDC] }));
     };
     const renderPageTitle = () => {
-        return (_jsxs("div", Object.assign({ className: pdiskPageCn('title') }, { children: [_jsx("span", Object.assign({ className: pdiskPageCn('title__prefix') }, { children: pDiskPageKeyset('pdisk') })), _jsx(StatusIcon, { status: getSeverityColor(Severity), size: "s" }), pDiskId] })));
+        return (_jsx(DiskPageTitle, { entityName: pDiskPageKeyset('pdisk'), status: getSeverityColor(Severity), id: pDiskId, className: pdiskPageCn('title') }));
     };
     const renderControls = () => {
-        return (_jsx("div", Object.assign({ className: pdiskPageCn('controls') }, { children: _jsxs(ButtonWithConfirmDialog, Object.assign({ onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog') }, { children: [_jsx(Icon, { data: ArrowRotateLeftIcon }), pDiskPageKeyset('restart-pdisk-button')] })) })));
+        return (_jsx("div", { className: pdiskPageCn('controls'), children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog'), children: [_jsx(Icon, { data: ArrowRotateLeftIcon }), pDiskPageKeyset('restart-pdisk-button')] }) }));
     };
     const renderInfo = () => {
-        if (pDiskLoading && !pDiskWasLoaded) {
+        if (pDiskLoading) {
             return _jsx(InfoViewerSkeleton, { className: pdiskPageCn('info'), rows: 10 });
         }
         return (_jsx(PDiskInfo, { pDisk: pDiskData, nodeId: nodeId, className: pdiskPageCn('info'), isPDiskPage: true }));
     };
     const renderGroupsTable = () => {
-        return (_jsx(PDiskGroups, { data: groupsData, nodesMap: nodesMap, loading: groupsLoading && !groupsWasLoaded }));
+        return _jsx(PDiskGroups, { data: groupsData, nodesMap: nodesMap, loading: groupsLoading });
     };
-    return (_jsxs("div", Object.assign({ className: pdiskPageCn(null) }, { children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderGroupsTable()] })));
+    return (_jsxs("div", { className: pdiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderGroupsTable()] }));
 }

package/dist/containers/{PDisk/PDisk.scss → PDiskPage/PDiskPage.scss}

@@ -6,13 +6,12 @@
     display: flex;
     overflow: auto;
     flex-direction: column;
+    gap: 20px;
 
     height: 100%;
     padding-top: 20px;
     padding-left: 20px;
 
-    gap: 20px;
-
     &__meta,
     &__title,
     &__info,
@@ -22,20 +21,6 @@
         left: 0;
     }
 
-    &__title {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: baseline;
-
-        @include header-2-typography();
-
-        &__prefix {
-            margin-right: 6px;
-
-            color: var(--g-color-text-secondary);
-        }
-    }
-
     &__groups-title {
         @include header-1-typography();
     }

package/dist/containers/PDiskPage/shared.d.ts

@@ -0,0 +1 @@
+export declare const pdiskPageCn: import("@bem-react/classname").ClassNameFormatter;

package/dist/containers/ReduxTooltip/ReduxTooltip.d.ts

@@ -1,22 +1,23 @@
-declare const _default: import("react-redux").ConnectedComponent<typeof ReduxTooltip, import("react-redux").Omit<PropTypes.InferProps<{
-    className: PropTypes.Requireable<string>;
-    toolTipVisible: PropTypes.Requireable<boolean>;
-    currentHoveredRef: PropTypes.Requireable<object>;
-    data: PropTypes.Requireable<any>;
-    template: PropTypes.Requireable<(...args: any[]) => any>;
-    hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-}>, "data" | "template" | "hideTooltip" | "toolTipVisible" | "currentHoveredRef">>;
+declare const _default: import("react-redux").ConnectedComponent<typeof ReduxTooltip, {
+    className?: string | 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;
+} | {
+    className?: string | null | undefined;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
+}>;
 export default _default;
-declare function ReduxTooltip(props: any): JSX.Element;
+declare function ReduxTooltip(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace ReduxTooltip {
     export { propTypes };
 }
-import PropTypes from "prop-types";
+import React from 'react';
 declare namespace propTypes {
-    const className: PropTypes.Requireable<string>;
-    const toolTipVisible: PropTypes.Requireable<boolean>;
-    const currentHoveredRef: PropTypes.Requireable<object>;
-    const data: PropTypes.Requireable<any>;
-    const template: PropTypes.Requireable<(...args: any[]) => any>;
-    const hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+    let className: PropTypes.Requireable<string>;
+    let toolTipVisible: PropTypes.Requireable<boolean>;
+    let currentHoveredRef: PropTypes.Requireable<object>;
+    let data: PropTypes.Requireable<any>;
+    let template: PropTypes.Requireable<(...args: any[]) => any>;
+    let hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
 }
+import PropTypes from 'prop-types';

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React from 'react';
+import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import { hideTooltip } from '../../store/reducers/tooltip';
 import { tooltipTemplates } from '../../utils/tooltip';
 import './ReduxTooltip.scss';
@@ -19,7 +19,7 @@ function ReduxTooltip(props) {
     const fakeAnchor = useVirtualElementRef({
         rect: { top: (_a = props.positions) === null || _a === void 0 ? void 0 : _a.top, left: (_b = props.positions) === null || _b === void 0 ? void 0 : _b.left },
     });
-    useEffect(() => {
+    React.useEffect(() => {
         window.addEventListener('scroll', handleScroll, true);
         return () => {
             window.removeEventListener('scroll', handleScroll);
@@ -33,16 +33,16 @@ function ReduxTooltip(props) {
     };
     const renderPositionPopup = (visible, positions, data, additionalData) => {
         const { template, popupClassName, hideTooltip } = props;
-        return (_jsx(React.Fragment, { children: _jsx(Popup, Object.assign({ open: visible, placement: ['top', 'bottom', 'left', 'right'], contentClassName: popupClassName, anchorRef: fakeAnchor, onOutsideClick: hideTooltip }, { children: data && template(data, additionalData) })) }));
+        return (_jsx(React.Fragment, { children: _jsx(Popup, { open: visible, placement: ['top', 'bottom', 'left', 'right'], contentClassName: popupClassName, anchorRef: fakeAnchor, onOutsideClick: hideTooltip, children: data && template(data, additionalData) }) }));
     };
     const renderAnchorPopup = (visible, anchor, data, additionalData) => {
         const { template, popupClassName, hideTooltip } = props;
-        return (_jsx(Popup, Object.assign({ open: visible, anchorRef: { current: anchor }, hasArrow: true, placement: ['top', 'bottom', 'left', 'right'], className: popupClassName, onOutsideClick: hideTooltip }, { children: data && template(data, additionalData) })));
+        return (_jsx(Popup, { open: visible, anchorRef: { current: anchor }, hasArrow: true, placement: ['top', 'bottom', 'left', 'right'], className: popupClassName, onOutsideClick: hideTooltip, children: data && template(data, additionalData) }));
     };
     const { className = '', toolTipVisible, currentHoveredRef, data, additionalData, positions, } = props;
-    return (_jsx("div", Object.assign({ className: `redux-tooltip ${className}` }, { children: positions
+    return (_jsx("div", { className: `redux-tooltip ${className}`, children: positions
             ? renderPositionPopup(toolTipVisible, positions, data, additionalData)
-            : renderAnchorPopup(toolTipVisible, currentHoveredRef, data, additionalData) })));
+            : renderAnchorPopup(toolTipVisible, currentHoveredRef, data, additionalData) }));
 }
 const mapStateToProps = (state) => {
     const { toolTipVisible, currentHoveredRef, data, templateType, additionalData, positions } = state.tooltip;

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

@@ -4,5 +4,5 @@ interface EmptyFilterProps {
     showAll?: string;
     onShowAll?: VoidFunction;
 }
-export declare const EmptyFilter: ({ title, message, showAll, onShowAll, }: EmptyFilterProps) => JSX.Element;
+export declare const EmptyFilter: ({ title, message, showAll, onShowAll, }: EmptyFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/EmptyFilter/EmptyFilter.js

@@ -4,5 +4,5 @@ import { EmptyState } from '../../../components/EmptyState';
 import { Illustration } from '../../../components/Illustration';
 import i18n from './i18n';
 export const EmptyFilter = ({ title, message = i18n('default_message'), showAll = i18n('default_button_label'), onShowAll, }) => (_jsx(EmptyState, { image: _jsx(Illustration, { name: "thumbsUp" }), position: "left", title: title, description: message, actions: onShowAll && [
-        _jsx(Button, Object.assign({ onClick: onShowAll }, { children: showAll }), "show-all"),
+        _jsx(Button, { onClick: onShowAll, children: showAll }, "show-all"),
     ] }));

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

package/dist/containers/Storage/EmptyFilter/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-empty-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/PDisk/PDisk.d.ts

@@ -6,5 +6,5 @@ interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: TVDiskStateInfo[];
 }
-export declare const PDisk: ({ nodeId, data, vDisks }: PDiskProps) => JSX.Element;
+export declare const PDisk: ({ nodeId, data, vDisks }: PDiskProps) => import("react/jsx-runtime").JSX.Element;
 export {};