ydb-embedded-ui 5.5.0 → 6.0.1

package/dist/containers/Node/Node.js

@@ -1,36 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from 'react';
-import { useLocation, useRouteMatch } from 'react-router';
-import cn from 'bem-cn-lite';
-import { Helmet } from 'react-helmet-async';
+import React from 'react';
 import { Tabs } from '@gravity-ui/uikit';
+import { Helmet } from 'react-helmet-async';
+import { useLocation, useRouteMatch } from 'react-router';
 import { Link } from 'react-router-dom';
-import { TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE } from './NodePages';
-import { Tablets } from '../Tablets';
-import { StorageWrapper } from '../Storage/StorageWrapper';
-import NodeStructure from './NodeStructure/NodeStructure';
-import { Loader } from '../../components/Loader';
 import { BasicNodeViewer } from '../../components/BasicNodeViewer';
+import { ResponseError } from '../../components/Errors/ResponseError';
 import { FullNodeViewer } from '../../components/FullNodeViewer/FullNodeViewer';
-import { getNodeInfo, resetNode } from '../../store/reducers/node/node';
+import { Loader } from '../../components/Loader';
 import routes, { createHref, parseQuery } from '../../routes';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { AutoFetcher } from '../../utils/autofetcher';
-import { useTypedSelector, useTypedDispatch } from '../../utils/hooks';
+import { nodeApi } from '../../store/reducers/node/node';
+import { cn } from '../../utils/cn';
+import { DEFAULT_POLLING_INTERVAL } from '../../utils/constants';
+import { useTypedDispatch } from '../../utils/hooks';
+import { StorageWrapper } from '../Storage/StorageWrapper';
+import { Tablets } from '../Tablets';
+import { NODE_PAGES, OVERVIEW, STORAGE, STRUCTURE, TABLETS } from './NodePages';
+import NodeStructure from './NodeStructure/NodeStructure';
 import './Node.scss';
 const b = cn('node');
 export const STORAGE_ROLE = 'Storage';
-const autofetcher = new AutoFetcher();
 function Node(props) {
     var _a;
-    const container = useRef(null);
+    const container = React.useRef(null);
     const dispatch = useTypedDispatch();
     const location = useLocation();
-    const { loading, wasLoaded, error, data: node } = useTypedSelector((state) => state.node);
     const match = (_a = useRouteMatch(routes.node)) !== null && _a !== void 0 ? _a : Object.create(null);
     const { id: nodeId, activeTab } = match.params;
     const { tenantName: tenantNameFromQuery } = parseQuery(location);
-    const { activeTabVerified, nodeTabs } = useMemo(() => {
+    const { currentData, isFetching, error } = nodeApi.useGetNodeInfoQuery({ nodeId }, { pollingInterval: DEFAULT_POLLING_INTERVAL });
+    const loading = isFetching && currentData === undefined;
+    const node = currentData;
+    const { activeTabVerified, nodeTabs } = React.useMemo(() => {
         var _a;
         const hasStorage = (_a = node === null || node === void 0 ? void 0 : node.Roles) === null || _a === void 0 ? void 0 : _a.find((el) => el === STORAGE_ROLE);
         const nodePages = hasStorage ? NODE_PAGES : NODE_PAGES.filter((el) => el.id !== STORAGE);
@@ -43,7 +45,7 @@ function Node(props) {
         }
         return { activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs };
     }, [activeTab, node]);
-    useEffect(() => {
+    React.useEffect(() => {
         var _a;
         const tenantName = ((_a = node === null || node === void 0 ? void 0 : node.Tenants) === null || _a === void 0 ? void 0 : _a[0]) || (tenantNameFromQuery === null || tenantNameFromQuery === void 0 ? void 0 : tenantNameFromQuery.toString());
         dispatch(setHeaderBreadcrumbs('node', {
@@ -51,23 +53,13 @@ function Node(props) {
             nodeId,
         }));
     }, [dispatch, node, nodeId, tenantNameFromQuery]);
-    useEffect(() => {
-        const fetchData = () => dispatch(getNodeInfo(nodeId));
-        fetchData();
-        autofetcher.start();
-        autofetcher.fetch(() => fetchData());
-        return () => {
-            autofetcher.stop();
-            dispatch(resetNode());
-        };
-    }, [dispatch, nodeId]);
     const renderTabs = () => {
-        return (_jsx("div", Object.assign({ className: b('tabs') }, { children: _jsx(Tabs, { size: "l", items: nodeTabs, activeTab: activeTabVerified.id, wrapTo: ({ id }, tabNode) => (_jsx(Link, Object.assign({ to: createHref(routes.node, { id: nodeId, activeTab: id }), className: b('tab') }, { children: tabNode }), id)), allowNotSelected: true }) })));
+        return (_jsx("div", { className: b('tabs'), children: _jsx(Tabs, { size: "l", items: nodeTabs, activeTab: activeTabVerified.id, wrapTo: ({ id }, tabNode) => (_jsx(Link, { to: createHref(routes.node, { id: nodeId, activeTab: id }), className: b('tab'), children: tabNode }, id)), allowNotSelected: true }) }));
     };
     const renderTabContent = () => {
         switch (activeTabVerified.id) {
             case STORAGE: {
-                return (_jsx("div", Object.assign({ className: b('storage') }, { children: _jsx(StorageWrapper, { nodeId: nodeId, parentContainer: container.current }) })));
+                return (_jsx("div", { className: b('storage'), children: _jsx(StorageWrapper, { nodeId: nodeId, parentContainer: container.current }) }));
             }
             case TABLETS: {
                 return _jsx(Tablets, { nodeId: nodeId, className: b('node-page-wrapper') });
@@ -82,17 +74,17 @@ function Node(props) {
                 return false;
         }
     };
-    if (loading && !wasLoaded) {
+    if (loading) {
         return _jsx(Loader, { size: "l" });
     }
     else if (error) {
-        return _jsx("div", { children: error.statusText });
+        return _jsx(ResponseError, { error: error });
     }
     else {
         if (node) {
-            return (_jsxs("div", Object.assign({ className: b(null, props.className), ref: container }, { children: [_jsx(Helmet, Object.assign({ titleTemplate: `%s — ${node.Host} — YDB Monitoring`, defaultTitle: `${node.Host} — YDB Monitoring` }, { children: _jsx("title", { children: activeTabVerified.title }) })), _jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), renderTabs(), _jsx("div", Object.assign({ className: b('content') }, { children: renderTabContent() }))] })));
+            return (_jsxs("div", { className: b(null, props.className), ref: container, children: [_jsx(Helmet, { titleTemplate: `%s — ${node.Host} — YDB Monitoring`, defaultTitle: `${node.Host} — YDB Monitoring`, children: _jsx("title", { children: activeTabVerified.title }) }), _jsx(BasicNodeViewer, { node: node, additionalNodesProps: props.additionalNodesProps, className: b('header') }), renderTabs(), _jsx("div", { className: b('content'), children: renderTabContent() })] }));
         }
-        return _jsx("div", Object.assign({ className: "error" }, { children: "no node data" }));
+        return _jsx("div", { className: "error", children: "no node data" });
     }
 }
 export default Node;

package/dist/containers/Node/NodePages.d.ts

@@ -1,4 +1,4 @@
-import { Query } from '../../routes';
+import type { Query } from '../../routes';
 export declare const STORAGE = "storage";
 export declare const TABLETS = "tablets";
 export declare const OVERVIEW = "overview";

package/dist/containers/Node/NodeStructure/NodeStructure.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import './NodeStructure.scss';
 interface NodeStructureProps {
     nodeId: string;
     className?: string;
 }
-declare function NodeStructure({ nodeId, className }: NodeStructureProps): JSX.Element;
+declare function NodeStructure({ nodeId, className }: NodeStructureProps): import("react/jsx-runtime").JSX.Element;
 export default NodeStructure;

package/dist/containers/Node/NodeStructure/NodeStructure.js

@@ -1,46 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
 import url from 'url';
+import React from 'react';
 import isEmpty from 'lodash/isEmpty';
-import cn from 'bem-cn-lite';
 import { Loader } from '../.././../components/Loader';
-import { getNodeStructure } from '../../../store/reducers/node/node';
+import { ResponseError } from '../../../components/Errors/ResponseError';
+import { nodeApi } from '../../../store/reducers/node/node';
 import { selectNodeStructure } from '../../../store/reducers/node/selectors';
-import { AutoFetcher } from '../../../utils/autofetcher';
-import { useTypedSelector, useTypedDispatch } from '../../../utils/hooks';
+import { cn } from '../../../utils/cn';
+import { DEFAULT_POLLING_INTERVAL } from '../../../utils/constants';
+import { useTypedSelector } from '../../../utils/hooks';
 import { PDisk } from './Pdisk';
 import './NodeStructure.scss';
 const b = cn('kv-node-structure');
 function generateId({ type, id }) {
     return `${type}-${id}`;
 }
-const autofetcher = new AutoFetcher();
 function NodeStructure({ nodeId, className }) {
-    const dispatch = useTypedDispatch();
-    const nodeStructure = useTypedSelector(selectNodeStructure);
-    const { loadingStructure, wasLoadedStructure } = useTypedSelector((state) => state.node);
+    const nodeStructure = useTypedSelector((state) => selectNodeStructure(state, nodeId));
+    const { currentData, isFetching, error } = nodeApi.useGetNodeStructureQuery({ nodeId }, { pollingInterval: DEFAULT_POLLING_INTERVAL });
+    const loadingStructure = isFetching && currentData === undefined;
     const { pdiskId: pdiskIdFromUrl, vdiskId: vdiskIdFromUrl } = url.parse(window.location.href, true).query;
-    const scrollContainerRef = useRef(null);
-    const isReady = useRef(false);
-    const scrolled = useRef(false);
-    useEffect(() => {
-        dispatch(getNodeStructure(nodeId));
-        autofetcher.start();
-        autofetcher.fetch(() => dispatch(getNodeStructure(nodeId)));
-        return () => {
-            scrolled.current = false;
-            isReady.current = false;
-            autofetcher.stop();
-        };
-    }, [nodeId, dispatch]);
-    useEffect(() => {
-        if (!isEmpty(nodeStructure) && scrollContainerRef.current) {
-            isReady.current = true;
-        }
-    }, [nodeStructure]);
-    useEffect(() => {
+    const scrollContainerRef = React.useRef(null);
+    const scrolled = React.useRef(false);
+    React.useEffect(() => {
         var _a;
-        if (isReady.current && !scrolled.current && scrollContainerRef.current) {
+        if (!isEmpty(nodeStructure) && !scrolled.current && scrollContainerRef.current) {
             const element = document.getElementById(generateId({ type: 'pdisk', id: pdiskIdFromUrl }));
             let scrollToVdisk = 0;
             if (vdiskIdFromUrl) {
@@ -72,11 +56,14 @@ function NodeStructure({ nodeId, className }) {
             : renderStub();
     };
     const renderContent = () => {
-        if (loadingStructure && !wasLoadedStructure) {
+        if (loadingStructure) {
             return _jsx(Loader, { size: "m" });
         }
+        if (error) {
+            return _jsx(ResponseError, { error: error });
+        }
         return renderStructure();
     };
-    return (_jsx("div", Object.assign({ className: b(), ref: scrollContainerRef }, { children: _jsx("div", Object.assign({ className: className }, { children: renderContent() })) })));
+    return (_jsx("div", { className: b(), ref: scrollContainerRef, children: _jsx("div", { className: className, children: renderContent() }) }));
 }
 export default NodeStructure;

package/dist/containers/Node/NodeStructure/PDiskTitleBadge.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 interface PDiskTitleBadgeProps {
     label?: string;
-    value: ReactNode;
+    value: React.ReactNode;
     className?: string;
 }
-export declare function PDiskTitleBadge({ label, value, className }: PDiskTitleBadgeProps): JSX.Element;
+export declare function PDiskTitleBadge({ label, value, className }: PDiskTitleBadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Node/NodeStructure/PDiskTitleBadge.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import cn from 'bem-cn-lite';
+import { cn } from '../../../utils/cn';
 const b = cn('kv-node-structure');
 export function PDiskTitleBadge({ label, value, className }) {
-    return (_jsxs("span", Object.assign({ className: b('pdisk-title-item', className) }, { children: [label && _jsxs("span", Object.assign({ className: b('pdisk-title-item-label') }, { children: [label, ":"] })), _jsx("span", Object.assign({ className: b('pdisk-title-item-value') }, { children: value }))] })));
+    return (_jsxs("span", { className: b('pdisk-title-item', className), children: [label && _jsxs("span", { className: b('pdisk-title-item-label'), children: [label, ":"] }), _jsx("span", { className: b('pdisk-title-item-value'), children: value })] }));
 }

package/dist/containers/Node/NodeStructure/Pdisk.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PreparedStructurePDisk } from '../../../store/reducers/node/types';
 interface PDiskProps {
     data: PreparedStructurePDisk;
@@ -7,5 +6,5 @@ interface PDiskProps {
     selectedVdiskId?: string;
     nodeId: string | number;
 }
-export declare function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFromProps, }: PDiskProps): JSX.Element;
+export declare function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFromProps, }: PDiskProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Node/NodeStructure/Pdisk.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import cn from 'bem-cn-lite';
-import isEmpty from 'lodash/isEmpty';
-import { ArrowToggle, Button, Popover } from '@gravity-ui/uikit';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
+import { ArrowToggle, Button, Popover } from '@gravity-ui/uikit';
+import isEmpty from 'lodash/isEmpty';
+import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
+import { Icon } from '../../../components/Icon';
+import { PDiskInfo } from '../../../components/PDiskInfo/PDiskInfo';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
 import { EFlag } from '../../../types/api/enums';
 import { EVDiskState } from '../../../types/api/vdisk';
-import { formatStorageValuesToGb } from '../../../utils/dataFormatters/dataFormatters';
-import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
 import { valueIsDefined } from '../../../utils';
+import { cn } from '../../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
+import { formatStorageValuesToGb } from '../../../utils/dataFormatters/dataFormatters';
 import { createVDiskDeveloperUILink } from '../../../utils/developerUI/developerUI';
-import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
-import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
-import { Icon } from '../../../components/Icon';
-import { PDiskInfo } from '../../../components/PDiskInfo/PDiskInfo';
 import i18n from '../i18n';
-import { Vdisk } from './Vdisk';
 import { PDiskTitleBadge } from './PDiskTitleBadge';
+import { Vdisk } from './Vdisk';
 const b = cn('kv-node-structure');
 var VDiskTableColumnsIds;
 (function (VDiskTableColumnsIds) {
@@ -49,7 +49,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
                         vDiskSlotId,
                     });
                 }
-                return (_jsxs("div", Object.assign({ className: b('vdisk-id', { selected: row.id === selectedVdiskId }) }, { children: [_jsx("span", { children: vDiskSlotId }), vdiskInternalViewerLink && (_jsx(Button, Object.assign({ size: "s", className: b('external-button', { hidden: true }), href: vdiskInternalViewerLink, target: "_blank", title: i18n('vdisk.developer-ui-button-title') }, { children: _jsx(Icon, { name: "external" }) })))] })));
+                return (_jsxs("div", { className: b('vdisk-id', { selected: row.id === selectedVdiskId }), children: [_jsx("span", { children: vDiskSlotId }), vdiskInternalViewerLink && (_jsx(Button, { size: "s", className: b('external-button', { hidden: true }), href: vdiskInternalViewerLink, target: "_blank", title: i18n('vdisk.developer-ui-button-title'), children: _jsx(Icon, { name: "external" }) }))] }));
             },
             align: DataTable.LEFT,
         },
@@ -78,9 +78,9 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.Info],
             width: 70,
             render: ({ row }) => {
-                return (_jsx(Popover, Object.assign({ placement: ['right'], content: _jsx(Vdisk, { data: row }), tooltipContentClassName: b('vdisk-details') }, { children: _jsx(Button, Object.assign({ view: "flat-secondary", className: b('vdisk-details-button', {
+                return (_jsx(Popover, { placement: ['right'], content: _jsx(Vdisk, { data: row }), tooltipContentClassName: b('vdisk-details'), children: _jsx(Button, { view: "flat-secondary", className: b('vdisk-details-button', {
                             selected: row.id === selectedVdiskId,
-                        }) }, { children: _jsx(Icon, { name: "information", viewBox: "0 0 512 512", height: 16, width: 16 }) })) })));
+                        }), children: _jsx(Icon, { name: "information", viewBox: "0 0 512 512", height: 16, width: 16 }) }) }));
             },
             sortable: false,
         },
@@ -88,7 +88,7 @@ function getColumns({ pDiskId, selectedVdiskId, nodeId, }) {
     return columns;
 }
 export function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFromProps, }) {
-    const [unfolded, setUnfolded] = useState(unfoldedFromProps !== null && unfoldedFromProps !== void 0 ? unfoldedFromProps : false);
+    const [unfolded, setUnfolded] = React.useState(unfoldedFromProps !== null && unfoldedFromProps !== void 0 ? unfoldedFromProps : false);
     const { TotalSize = 0, AvailableSize = 0, Device, PDiskId, Type, vDisks } = data;
     const total = Number(TotalSize);
     const available = Number(AvailableSize);
@@ -107,7 +107,7 @@ export function PDisk({ id, data, selectedVdiskId, nodeId, unfolded: unfoldedFro
         if (isEmpty(data)) {
             return _jsx("div", { children: "No information about PDisk" });
         }
-        return (_jsxs("div", { children: [_jsx(PDiskInfo, { pDisk: data, nodeId: nodeId, className: b('pdisk-details') }), _jsxs("div", Object.assign({ className: b('vdisks-container') }, { children: [_jsx("div", Object.assign({ className: b('vdisks-header') }, { children: "VDisks" })), renderVDisks()] }))] }));
+        return (_jsxs("div", { children: [_jsx(PDiskInfo, { pDisk: data, nodeId: nodeId, className: b('pdisk-details') }), _jsxs("div", { className: b('vdisks-container'), children: [_jsx("div", { className: b('vdisks-header'), children: "VDisks" }), renderVDisks()] })] }));
     };
-    return (_jsxs("div", Object.assign({ className: b('pdisk'), id: id }, { children: [_jsxs("div", Object.assign({ className: b('pdisk-header') }, { children: [_jsxs("div", Object.assign({ className: b('pdisk-title-wrapper') }, { children: [_jsx(EntityStatus, { status: Device }), _jsx(PDiskTitleBadge, { label: "PDiskID", value: PDiskId, className: b('pdisk-title-id') }), _jsx(PDiskTitleBadge, { value: Type, className: b('pdisk-title-type') }), _jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true, className: b('pdisk-title-size') }), _jsx(PDiskTitleBadge, { label: "VDisks", value: vDisks.length })] })), _jsx(Button, Object.assign({ onClick: unfolded ? onClosePDiskDetails : onOpenPDiskDetails, view: "flat-secondary" }, { children: _jsx(ArrowToggle, { direction: unfolded ? 'top' : 'bottom' }) }))] })), unfolded && renderPDiskDetails()] })));
+    return (_jsxs("div", { className: b('pdisk'), id: id, children: [_jsxs("div", { className: b('pdisk-header'), children: [_jsxs("div", { className: b('pdisk-title-wrapper'), children: [_jsx(EntityStatus, { status: Device }), _jsx(PDiskTitleBadge, { label: "PDiskID", value: PDiskId, className: b('pdisk-title-id') }), _jsx(PDiskTitleBadge, { value: Type, className: b('pdisk-title-type') }), _jsx(ProgressViewer, { value: total - available, capacity: total, formatValues: formatStorageValuesToGb, colorizeProgress: true, className: b('pdisk-title-size') }), _jsx(PDiskTitleBadge, { label: "VDisks", value: vDisks.length })] }), _jsx(Button, { onClick: unfolded ? onClosePDiskDetails : onOpenPDiskDetails, view: "flat-secondary", children: _jsx(ArrowToggle, { direction: unfolded ? 'top' : 'bottom' }) })] }), unfolded && renderPDiskDetails()] }));
 }

package/dist/containers/Node/NodeStructure/Vdisk.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import type { PreparedStructureVDisk } from '../../../store/reducers/node/types';
 interface VDiskProps {
     data: PreparedStructureVDisk;
 }
-export declare function Vdisk({ data }: VDiskProps): JSX.Element;
+export declare function Vdisk({ data }: VDiskProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Node/NodeStructure/Vdisk.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import cn from 'bem-cn-lite';
-import { EVDiskState } from '../../../types/api/vdisk';
-import { EFlag } from '../../../types/api/enums';
-import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
 import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 import { VDiskInfo } from '../../../components/VDiskInfo/VDiskInfo';
+import { EFlag } from '../../../types/api/enums';
+import { EVDiskState } from '../../../types/api/vdisk';
+import { cn } from '../../../utils/cn';
+import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
 const b = cn('kv-node-structure');
 export function Vdisk({ data }) {
     const { VDiskState, VDiskId } = data;
-    return (_jsxs(React.Fragment, { children: [_jsxs("div", Object.assign({ className: b('row') }, { children: [_jsx("span", Object.assign({ className: b('title') }, { children: "VDisk " })), _jsx(EntityStatus, { status: VDiskState === EVDiskState.OK ? EFlag.Green : EFlag.Red, name: stringifyVdiskId(VDiskId) })] })), _jsx("div", Object.assign({ className: b('column') }, { children: _jsx(VDiskInfo, { className: b('section'), data: data }) }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: b('row'), children: [_jsx("span", { className: b('title'), children: "VDisk " }), _jsx(EntityStatus, { status: VDiskState === EVDiskState.OK ? EFlag.Green : EFlag.Red, name: stringifyVdiskId(VDiskId) })] }), _jsx("div", { className: b('column'), children: _jsx(VDiskInfo, { className: b('section'), data: data }) })] }));
 }

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

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

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,7 +65,7 @@ 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,
 };

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;