ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/containers/VDiskPage/VDiskPage.js

@@ -1,50 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
-import { StringParam, useQueryParams } from 'use-query-params';
-import { Helmet } from 'react-helmet-async';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Icon } from '@gravity-ui/uikit';
-import ArrowsOppositeToDotsIcon from '@gravity-ui/icons/svgs/arrows-opposite-to-dots.svg';
-import { cn } from '../../utils/cn';
-import { getSeverityColor } from '../../utils/disks/helpers';
-import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
-import { valueIsDefined } from '../../utils';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
-import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { getVDiskData, setVDiskDataWasNotLoaded } from '../../store/reducers/vdisk/vdisk';
-import { selectNodesMap } from '../../store/reducers/nodesList';
-import { PageMeta } from '../../components/PageMeta/PageMeta';
+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 { GroupInfo } from '../../components/GroupInfo/GroupInfo';
-import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
 import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
-import { VDiskInfo } from '../../components/VDiskInfo/VDiskInfo';
+import { PageMeta } from '../../components/PageMeta/PageMeta';
 import { VDiskWithDonorsStack } from '../../components/VDisk/VDiskWithDonorsStack';
+import { VDiskInfo } from '../../components/VDiskInfo/VDiskInfo';
+import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
+import { selectNodesMap } from '../../store/reducers/nodesList';
+import { vDiskApi } from '../../store/reducers/vdisk/vdisk';
+import { valueIsDefined } from '../../utils';
+import { cn } from '../../utils/cn';
+import { DEFAULT_POLLING_INTERVAL } from '../../utils/constants';
+import { stringifyVdiskId } from '../../utils/dataFormatters/dataFormatters';
+import { getSeverityColor } from '../../utils/disks/helpers';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { vDiskPageKeyset } from './i18n';
+import ArrowsOppositeToDotsIcon from '@gravity-ui/icons/svgs/arrows-opposite-to-dots.svg';
 import './VDiskPage.scss';
 const vDiskPageCn = cn('ydb-vdisk-page');
 export function VDiskPage() {
     const dispatch = useTypedDispatch();
     const nodesMap = useTypedSelector(selectNodesMap);
-    const { vDiskData, groupData, loading, wasLoaded } = useTypedSelector((state) => state.vDisk);
-    const { NodeHost, NodeId, NodeType, NodeDC, PDiskId, PDiskType, Severity, VDiskId } = vDiskData;
     const [{ nodeId, pDiskId, vDiskSlotId }] = useQueryParams({
         nodeId: StringParam,
         pDiskId: StringParam,
         vDiskSlotId: StringParam,
     });
-    useEffect(() => {
+    React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('vDisk', { nodeId, pDiskId, vDiskSlotId }));
     }, [dispatch, nodeId, pDiskId, vDiskSlotId]);
-    const fetchData = useCallback(async (isBackground) => {
-        if (!isBackground) {
-            dispatch(setVDiskDataWasNotLoaded());
-        }
-        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId) && valueIsDefined(vDiskSlotId)) {
-            return dispatch(getVDiskData({ nodeId, pDiskId, vDiskSlotId }));
-        }
-        return undefined;
-    }, [dispatch, nodeId, pDiskId, vDiskSlotId]);
-    useAutofetcher(fetchData, [fetchData], true);
+    const params = valueIsDefined(nodeId) && valueIsDefined(pDiskId) && valueIsDefined(vDiskSlotId)
+        ? { nodeId, pDiskId, vDiskSlotId }
+        : skipToken;
+    const { currentData, isFetching, refetch } = vDiskApi.useGetVDiskDataQuery(params, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
+    const loading = isFetching && currentData === undefined;
+    const { vDiskData = {}, groupData } = currentData || {};
+    const { NodeHost, NodeId, NodeType, NodeDC, PDiskId, PDiskType, Severity, VDiskId } = vDiskData;
     const handleEvictVDisk = async () => {
         const { GroupID, GroupGeneration, Ring, Domain, VDisk } = VDiskId || {};
         if (valueIsDefined(GroupID) &&
@@ -63,7 +62,7 @@ export function VDiskPage() {
         return undefined;
     };
     const handleAfterEvictVDisk = async () => {
-        return fetchData(true);
+        return refetch();
     };
     const renderHelmet = () => {
         const vDiskPagePart = vDiskSlotId
@@ -79,13 +78,13 @@ export function VDiskPage() {
         const hostItem = NodeHost ? `${vDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
         const nodeIdItem = NodeId ? `${vDiskPageKeyset('node')}: ${NodeId}` : undefined;
         const pDiskIdItem = NodeId ? `${vDiskPageKeyset('pdisk')}: ${PDiskId}` : undefined;
-        return (_jsx(PageMeta, { loading: loading && !wasLoaded, items: [hostItem, nodeIdItem, NodeType, NodeDC, pDiskIdItem, PDiskType] }));
+        return (_jsx(PageMeta, { loading: loading, items: [hostItem, nodeIdItem, NodeType, NodeDC, pDiskIdItem, PDiskType] }));
     };
     const renderPageTitle = () => {
         return (_jsx(DiskPageTitle, { entityName: vDiskPageKeyset('vdisk'), status: getSeverityColor(Severity), id: stringifyVdiskId(vDiskData === null || vDiskData === void 0 ? void 0 : vDiskData.VDiskId) }));
     };
     const renderControls = () => {
-        return (_jsx("div", { children: _jsxs(ButtonWithConfirmDialog, Object.assign({ onConfirmAction: handleEvictVDisk, onConfirmActionSuccess: handleAfterEvictVDisk, buttonDisabled: !VDiskId, buttonView: "normal", dialogContent: vDiskPageKeyset('evict-vdisk-dialog') }, { children: [_jsx(Icon, { data: ArrowsOppositeToDotsIcon }), vDiskPageKeyset('evict-vdisk-button')] })) }));
+        return (_jsx("div", { children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleEvictVDisk, onConfirmActionSuccess: handleAfterEvictVDisk, buttonDisabled: !VDiskId, buttonView: "normal", dialogContent: vDiskPageKeyset('evict-vdisk-dialog'), children: [_jsx(Icon, { data: ArrowsOppositeToDotsIcon }), vDiskPageKeyset('evict-vdisk-button')] }) }));
     };
     const renderInfo = () => {
         return _jsx(VDiskInfo, { data: vDiskData, isVDiskPage: true });
@@ -93,17 +92,17 @@ export function VDiskPage() {
     const renderGroupInfo = () => {
         var _a;
         if (groupData) {
-            return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: vDiskPageCn('group-title') }, { children: vDiskPageKeyset('group') })), _jsx(GroupInfo, { data: groupData }), _jsx("div", Object.assign({ className: vDiskPageCn('group-disks') }, { children: (_a = groupData.VDisks) === null || _a === void 0 ? void 0 : _a.map((vDisk) => {
+            return (_jsxs(React.Fragment, { children: [_jsx("div", { className: vDiskPageCn('group-title'), children: vDiskPageKeyset('group') }), _jsx(GroupInfo, { data: groupData }), _jsx("div", { className: vDiskPageCn('group-disks'), children: (_a = groupData.VDisks) === null || _a === void 0 ? void 0 : _a.map((vDisk) => {
                             return (_jsx(VDiskWithDonorsStack, { data: vDisk, nodes: nodesMap, className: vDiskPageCn('group-disk') }, stringifyVdiskId(vDisk.VDiskId)));
-                        }) }))] }));
+                        }) })] }));
         }
         return null;
     };
     const renderContent = () => {
-        if (loading && !wasLoaded) {
+        if (loading) {
             return _jsx(InfoViewerSkeleton, { rows: 20 });
         }
-        return (_jsxs(_Fragment, { children: [renderInfo(), renderGroupInfo()] }));
+        return (_jsxs(React.Fragment, { children: [renderInfo(), renderGroupInfo()] }));
     };
-    return (_jsxs("div", Object.assign({ className: vDiskPageCn(null) }, { children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderContent()] })));
+    return (_jsxs("div", { className: vDiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderContent()] }));
 }

package/dist/containers/VDiskPage/VDiskPage.scss

@@ -6,13 +6,12 @@
     display: flex;
     overflow: auto;
     flex-direction: column;
+    gap: 20px;
 
     height: 100%;
     padding-top: 20px;
     padding-left: 20px;
 
-    gap: 20px;
-
     &__group-title {
         @include header-1-typography();
     }
@@ -21,9 +20,9 @@
         display: flex;
         flex-grow: 1;
         flex-flow: row wrap;
+        gap: 10px;
 
         margin-top: 20px;
-        gap: 10px;
     }
 
     &__group-disk {

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

@@ -1 +1 @@
-export declare const vDiskPageKeyset: (key: "node" | "pdisk" | "vdisk" | "group" | "fqdn" | "evict-vdisk-button" | "evict-vdisk-dialog", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const vDiskPageKeyset: (key: "node" | "group" | "pdisk" | "vdisk" | "fqdn" | "evict-vdisk-button" | "evict-vdisk-dialog", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.d.ts

@@ -1,17 +1,8 @@
-import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/types';
+import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/clusterNodes';
 import type { VersionValue } from '../../../types/versions';
 import type { GroupedNodesItem } from '../types';
 import './GroupedNodesTree.scss';
-export declare const b: {
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string, mixin?: string | string[] | undefined): string;
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
-    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string): string;
-    (mods: import("bem-cn-lite").Modifications | null): string;
-    (): string;
-    builder(): import("bem-cn").Block;
-};
+export declare const b: import("@bem-react/classname").ClassNameFormatter;
 interface GroupedNodesTreeProps {
     title?: string;
     nodes?: PreparedClusterNode[];
@@ -21,5 +12,5 @@ interface GroupedNodesTreeProps {
     versionsValues?: VersionValue[];
     level?: number;
 }
-export declare const GroupedNodesTree: ({ title, nodes, items, expanded, versionColor, versionsValues, level, }: GroupedNodesTreeProps) => JSX.Element;
+export declare const GroupedNodesTree: ({ title, nodes, items, expanded, versionColor, versionsValues, level, }: GroupedNodesTreeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import cn from 'bem-cn-lite';
+import React from 'react';
 import { TreeView } from 'ydb-ui-components';
-import { NodesTreeTitle } from '../NodesTreeTitle/NodesTreeTitle';
+import { cn } from '../../../utils/cn';
 import { NodesTable } from '../NodesTable/NodesTable';
+import { NodesTreeTitle } from '../NodesTreeTitle/NodesTreeTitle';
 import './GroupedNodesTree.scss';
 export const b = cn('ydb-versions-grouped-node-tree');
 export const GroupedNodesTree = ({ title, nodes, items, expanded = false, versionColor, versionsValues, level = 0, }) => {
-    const [isOpened, toggleBlock] = useState(false);
-    useEffect(() => {
+    const [isOpened, toggleBlock] = React.useState(false);
+    React.useEffect(() => {
         toggleBlock(expanded);
     }, [expanded]);
     const groupTitle = (_jsx(NodesTreeTitle, { title: title, nodes: nodes, items: items, versionColor: versionColor, versionsValues: versionsValues }));
@@ -16,7 +16,7 @@ export const GroupedNodesTree = ({ title, nodes, items, expanded = false, versio
         toggleBlock((value) => !value);
     };
     if (items) {
-        return (_jsx("div", Object.assign({ className: b({ 'first-level': level === 0 }) }, { children: _jsx(TreeView, Object.assign({ name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed }, { children: items.map((item, index) => (_jsx(GroupedNodesTree, { title: item.title, nodes: item.nodes, expanded: expanded, versionColor: item.versionColor, level: level + 1 }, index))) }), title) })));
+        return (_jsx("div", { className: b({ 'first-level': level === 0 }), children: _jsx(TreeView, { name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed, children: items.map((item, index) => (_jsx(GroupedNodesTree, { title: item.title, nodes: item.nodes, expanded: expanded, versionColor: item.versionColor, level: level + 1 }, index))) }, title) }));
     }
-    return (_jsx("div", Object.assign({ className: b({ 'first-level': level === 0 }) }, { children: _jsx(TreeView, Object.assign({ name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed }, { children: _jsx("div", Object.assign({ className: b('dt-wrapper') }, { children: _jsx(NodesTable, { nodes: nodes || [] }) })) }), title) })));
+    return (_jsx("div", { className: b({ 'first-level': level === 0 }), children: _jsx(TreeView, { name: groupTitle, collapsed: !isOpened, hasArrow: true, onClick: toggleCollapsed, onArrowClick: toggleCollapsed, children: _jsx("div", { className: b('dt-wrapper'), children: _jsx(NodesTable, { nodes: nodes || [] }) }) }, title) }));
 };

package/dist/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss

@@ -16,8 +16,7 @@
         position: relative;
         z-index: 0;
 
-        overflow-x: auto;
-        overflow-y: hidden;
+        overflow: auto hidden;
 
         margin-right: $margin-size;
         margin-left: $margin-size;
@@ -53,7 +52,7 @@
         width: $item-width;
     }
 
-    & .yc-progress__stack {
+    & .g-progress__stack {
         cursor: pointer;
     }
 }

package/dist/containers/Versions/NodesTable/NodesTable.d.ts

@@ -1,6 +1,6 @@
-import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/types';
+import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/clusterNodes';
 interface NodesTableProps {
     nodes: PreparedClusterNode[];
 }
-export declare const NodesTable: ({ nodes }: NodesTableProps) => JSX.Element;
+export declare const NodesTable: ({ nodes }: NodesTableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Versions/NodesTable/NodesTable.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
-import { isUnavailableNode } from '../../../utils/nodes';
+import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
+import { PoolsGraph } from '../../../components/PoolsGraph/PoolsGraph';
+import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
 import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
 import { formatBytes } from '../../../utils/dataFormatters/dataFormatters';
+import { isUnavailableNode } from '../../../utils/nodes';
 import { getDefaultNodePath } from '../../Node/NodePages';
-import { ProgressViewer } from '../../../components/ProgressViewer/ProgressViewer';
-import { PoolsGraph } from '../../../components/PoolsGraph/PoolsGraph';
-import { EntityStatus } from '../../../components/EntityStatus/EntityStatus';
 const columns = [
     {
         name: 'NodeId',

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.d.ts

@@ -1,4 +1,4 @@
-import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/types';
+import type { PreparedClusterNode } from '../../../store/reducers/clusterNodes/clusterNodes';
 import type { VersionValue } from '../../../types/versions';
 import type { GroupedNodesItem } from '../types';
 import './NodesTreeTitle.scss';
@@ -9,5 +9,5 @@ interface NodesTreeTitleProps {
     versionColor?: string;
     versionsValues?: VersionValue[];
 }
-export declare const NodesTreeTitle: ({ title, nodes, items, versionColor, versionsValues, }: NodesTreeTitleProps) => JSX.Element;
+export declare const NodesTreeTitle: ({ title, nodes, items, versionColor, versionsValues, }: NodesTreeTitleProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Progress } from '@gravity-ui/uikit';
-import block from 'bem-cn-lite';
 import { ClipboardButton } from '../../../components/ClipboardButton';
+import { cn } from '../../../utils/cn';
 import './NodesTreeTitle.scss';
-const b = block('ydb-versions-nodes-tree-title');
+const b = cn('ydb-versions-nodes-tree-title');
 export const NodesTreeTitle = ({ title, nodes, items, versionColor, versionsValues, }) => {
     let nodesAmount;
     if (items) {
@@ -17,5 +17,5 @@ export const NodesTreeTitle = ({ title, nodes, items, versionColor, versionsValu
     else {
         nodesAmount = nodes ? nodes.length : 0;
     }
-    return (_jsxs("div", Object.assign({ className: b('overview') }, { children: [_jsxs("div", Object.assign({ className: b('overview-container') }, { children: [versionColor ? (_jsx("div", { className: b('version-color'), style: { background: versionColor } })) : null, title ? (_jsxs("span", Object.assign({ className: b('overview-title') }, { children: [title, _jsx(ClipboardButton, { text: title, size: "s", className: b('clipboard-button') })] }))) : null] })), _jsxs("div", Object.assign({ className: b('overview-info') }, { children: [_jsxs("div", { children: [_jsx("span", Object.assign({ className: b('info-value') }, { children: nodesAmount })), _jsx("span", Object.assign({ className: b('info-label', { margin: 'left' }) }, { children: "Nodes" }))] }), versionsValues ? (_jsxs("div", Object.assign({ className: b('version-progress') }, { children: [_jsx("span", Object.assign({ className: b('info-label', { margin: 'right' }) }, { children: "Versions" })), _jsx(Progress, { size: "s", value: 100, stack: versionsValues })] }))) : null] }))] })));
+    return (_jsxs("div", { className: b('overview'), children: [_jsxs("div", { className: b('overview-container'), children: [versionColor ? (_jsx("div", { className: b('version-color'), style: { background: versionColor } })) : null, title ? (_jsxs("span", { className: b('overview-title'), children: [title, _jsx(ClipboardButton, { text: title, size: "s", className: b('clipboard-button') })] })) : null] }), _jsxs("div", { className: b('overview-info'), children: [_jsxs("div", { children: [_jsx("span", { className: b('info-value'), children: nodesAmount }), _jsx("span", { className: b('info-label', { margin: 'left' }), children: "Nodes" })] }), versionsValues ? (_jsxs("div", { className: b('version-progress'), children: [_jsx("span", { className: b('info-label', { margin: 'right' }), children: "Versions" }), _jsx(Progress, { size: "s", value: 100, stack: versionsValues })] })) : null] })] }));
 };

package/dist/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss

@@ -50,7 +50,7 @@
 
         width: 250px;
 
-        & .yc-progress {
+        & .g-progress {
             width: 200px;
         }
     }

package/dist/containers/Versions/Versions.d.ts

@@ -3,5 +3,5 @@ import './Versions.scss';
 interface VersionsProps {
     versionToColor?: VersionToColorMap;
 }
-export declare const Versions: ({ versionToColor }: VersionsProps) => JSX.Element;
+export declare const Versions: ({ versionToColor }: VersionsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Versions/Versions.js

@@ -1,38 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import block from 'bem-cn-lite';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Checkbox, RadioButton } from '@gravity-ui/uikit';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
-import { getClusterNodes } from '../../store/reducers/clusterNodes/clusterNodes';
 import { Loader } from '../../components/Loader';
-import { getGroupedStorageNodes, getGroupedTenantNodes, getOtherNodes } from './groupNodes';
+import { clusterNodesApi } from '../../store/reducers/clusterNodes/clusterNodes';
+import { cn } from '../../utils/cn';
+import { DEFAULT_POLLING_INTERVAL } from '../../utils/constants';
 import { GroupedNodesTree } from './GroupedNodesTree/GroupedNodesTree';
+import { getGroupedStorageNodes, getGroupedTenantNodes, getOtherNodes } from './groupNodes';
 import { GroupByValue } from './types';
 import './Versions.scss';
-const b = block('ydb-versions');
+const b = cn('ydb-versions');
 export const Versions = ({ versionToColor }) => {
-    const dispatch = useTypedDispatch();
-    const { nodes = [], loading, wasLoaded } = useTypedSelector((state) => state.clusterNodes);
-    useAutofetcher(() => dispatch(getClusterNodes()), [dispatch], true);
-    const [groupByValue, setGroupByValue] = useState(GroupByValue.VERSION);
-    const [expanded, setExpanded] = useState(false);
+    const { data: nodes = [], isLoading: isNodesLoading } = clusterNodesApi.useGetClusterNodesQuery(undefined, { pollingInterval: DEFAULT_POLLING_INTERVAL });
+    const [groupByValue, setGroupByValue] = React.useState(GroupByValue.VERSION);
+    const [expanded, setExpanded] = React.useState(false);
     const handleGroupByValueChange = (value) => {
         setGroupByValue(value);
     };
     const renderGroupControl = () => {
-        return (_jsxs("div", Object.assign({ className: b('group') }, { children: [_jsx("span", Object.assign({ className: b('label') }, { children: "Group by:" })), _jsxs(RadioButton, Object.assign({ value: groupByValue, onUpdate: handleGroupByValueChange }, { children: [_jsx(RadioButton.Option, Object.assign({ value: GroupByValue.TENANT }, { children: GroupByValue.TENANT })), _jsx(RadioButton.Option, Object.assign({ value: GroupByValue.VERSION }, { children: GroupByValue.VERSION }))] }))] })));
+        return (_jsxs("div", { className: b('group'), children: [_jsx("span", { className: b('label'), children: "Group by:" }), _jsxs(RadioButton, { value: groupByValue, onUpdate: handleGroupByValueChange, children: [_jsx(RadioButton.Option, { value: GroupByValue.TENANT, children: GroupByValue.TENANT }), _jsx(RadioButton.Option, { value: GroupByValue.VERSION, children: GroupByValue.VERSION })] })] }));
     };
     const renderControls = () => {
-        return (_jsxs("div", Object.assign({ className: b('controls') }, { children: [renderGroupControl(), _jsx(Checkbox, Object.assign({ className: b('checkbox'), onChange: () => setExpanded((value) => !value), checked: expanded }, { children: "All expanded" }))] })));
+        return (_jsxs("div", { className: b('controls'), children: [renderGroupControl(), _jsx(Checkbox, { className: b('checkbox'), onChange: () => setExpanded((value) => !value), checked: expanded, children: "All expanded" })] }));
     };
-    if (loading && !wasLoaded) {
+    if (isNodesLoading) {
         return _jsx(Loader, {});
     }
     const tenantNodes = getGroupedTenantNodes(nodes, versionToColor, groupByValue);
     const storageNodes = getGroupedStorageNodes(nodes, versionToColor);
     const otherNodes = getOtherNodes(nodes, versionToColor);
-    const storageNodesContent = (storageNodes === null || storageNodes === void 0 ? void 0 : storageNodes.length) ? (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Storage nodes" }), storageNodes.map(({ title, nodes: itemNodes, items, versionColor }) => (_jsx(GroupedNodesTree, { title: title, nodes: itemNodes, items: items, versionColor: versionColor }, `storage-nodes-${title}`)))] })) : null;
-    const tenantNodesContent = (tenantNodes === null || tenantNodes === void 0 ? void 0 : tenantNodes.length) ? (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Database nodes" }), renderControls(), tenantNodes.map(({ title, nodes: itemNodes, items, versionColor, versionsValues }) => (_jsx(GroupedNodesTree, { title: title, nodes: itemNodes, items: items, expanded: expanded, versionColor: versionColor, versionsValues: versionsValues }, `tenant-nodes-${title}`)))] })) : null;
-    const otherNodesContent = (otherNodes === null || otherNodes === void 0 ? void 0 : otherNodes.length) ? (_jsxs(_Fragment, { children: [_jsx("h3", { children: "Other nodes" }), otherNodes.map(({ title, nodes: itemNodes, items, versionColor, versionsValues }) => (_jsx(GroupedNodesTree, { title: title, nodes: itemNodes, items: items, versionColor: versionColor, versionsValues: versionsValues }, `other-nodes-${title}`)))] })) : null;
-    return (_jsxs("div", Object.assign({ className: b('versions') }, { children: [storageNodesContent, tenantNodesContent, otherNodesContent] })));
+    const storageNodesContent = (storageNodes === null || storageNodes === void 0 ? void 0 : storageNodes.length) ? (_jsxs(React.Fragment, { children: [_jsx("h3", { children: "Storage nodes" }), storageNodes.map(({ title, nodes: itemNodes, items, versionColor }) => (_jsx(GroupedNodesTree, { title: title, nodes: itemNodes, items: items, versionColor: versionColor }, `storage-nodes-${title}`)))] })) : null;
+    const tenantNodesContent = (tenantNodes === null || tenantNodes === void 0 ? void 0 : tenantNodes.length) ? (_jsxs(React.Fragment, { children: [_jsx("h3", { children: "Database nodes" }), renderControls(), tenantNodes.map(({ title, nodes: itemNodes, items, versionColor, versionsValues }) => (_jsx(GroupedNodesTree, { title: title, nodes: itemNodes, items: items, expanded: expanded, versionColor: versionColor, versionsValues: versionsValues }, `tenant-nodes-${title}`)))] })) : null;
+    const otherNodesContent = (otherNodes === null || otherNodes === void 0 ? void 0 : otherNodes.length) ? (_jsxs(React.Fragment, { children: [_jsx("h3", { children: "Other nodes" }), otherNodes.map(({ title, nodes: itemNodes, items, versionColor, versionsValues }) => (_jsx(GroupedNodesTree, { title: title, nodes: itemNodes, items: items, versionColor: versionColor, versionsValues: versionsValues }, `other-nodes-${title}`)))] })) : null;
+    return (_jsxs("div", { className: b('versions'), children: [storageNodesContent, tenantNodesContent, otherNodesContent] }));
 };

package/dist/containers/Versions/groupNodes.d.ts

@@ -1,6 +1,7 @@
+import type { PreparedClusterNode } from '../../store/reducers/clusterNodes/clusterNodes';
 import type { VersionToColorMap } from '../../types/versions';
-import type { PreparedClusterNode } from '../../store/reducers/clusterNodes/types';
-import { GroupByValue, GroupedNodesItem } from './types';
+import type { GroupedNodesItem } from './types';
+import { GroupByValue } from './types';
 export declare const getGroupedTenantNodes: (nodes: PreparedClusterNode[] | undefined, versionToColor: VersionToColorMap | undefined, groupByValue: GroupByValue) => GroupedNodesItem[] | undefined;
 export declare const getGroupedStorageNodes: (nodes: PreparedClusterNode[] | undefined, versionToColor: VersionToColorMap | undefined) => GroupedNodesItem[] | undefined;
 export declare const getOtherNodes: (nodes: PreparedClusterNode[] | undefined, versionToColor: VersionToColorMap | undefined) => GroupedNodesItem[] | undefined;

package/dist/containers/Versions/types.d.ts

@@ -1,5 +1,5 @@
+import type { PreparedClusterNode } from '../../store/reducers/clusterNodes/clusterNodes';
 import type { VersionValue } from '../../types/versions';
-import type { PreparedClusterNode } from '../../store/reducers/clusterNodes/types';
 export interface GroupedNodesItem {
     title?: string;
     nodes?: PreparedClusterNode[];

package/dist/routes.js

@@ -1,6 +1,6 @@
-import qs from 'qs';
-import { compile } from 'path-to-regexp';
 import isEmpty from 'lodash/isEmpty';
+import { compile } from 'path-to-regexp';
+import qs from 'qs';
 import { backend, clusterName, webVersion } from './store';
 export const CLUSTERS = 'clusters';
 export const CLUSTER = 'cluster';

package/dist/services/api.d.ts

@@ -1,86 +1,90 @@
 import AxiosWrapper from '@gravity-ui/axios-wrapper';
-import type { Actions, ExplainActions, ExplainResponse, QueryAPIResponse, Schemas } from '../types/api/query';
-import type { TDomainKey, TEvTabletStateResponse, UnmergedTEvTabletStateResponse } from '../types/api/tablet';
+import type { ComputeApiRequestParams, NodesApiRequestParams } from '../store/reducers/nodes/types';
+import type { StorageApiRequestParams } from '../store/reducers/storage/types';
 import type { TMetaInfo } from '../types/api/acl';
 import type { TClusterInfo } from '../types/api/cluster';
 import type { TComputeInfo } from '../types/api/compute';
 import type { DescribeConsumerResult } from '../types/api/consumer';
 import type { HealthCheckAPIResponse } from '../types/api/healthcheck';
+import type { JsonHotKeysResponse } from '../types/api/hotkeys';
+import type { MetaClusters } from '../types/api/meta';
 import type { TNetInfo } from '../types/api/netInfo';
 import type { TNodesInfo } from '../types/api/nodes';
 import type { TEvNodesInfo } from '../types/api/nodesList';
+import type { TEvPDiskStateResponse } from '../types/api/pdisk';
+import type { Actions, ExplainActions, ExplainResponse, QueryAPIResponse, Schemas } from '../types/api/query';
+import type { JsonRenderRequestParams, JsonRenderResponse } from '../types/api/render';
 import type { TEvDescribeSchemeResult } from '../types/api/schema';
 import type { TStorageInfo } from '../types/api/storage';
 import type { TEvSystemStateResponse } from '../types/api/systemState';
+import type { TDomainKey, TEvTabletStateResponse, UnmergedTEvTabletStateResponse } from '../types/api/tablet';
 import type { TTenantInfo, TTenants } from '../types/api/tenant';
 import type { DescribeTopicResult } from '../types/api/topic';
-import type { TEvPDiskStateResponse } from '../types/api/pdisk';
 import type { TEvVDiskStateResponse } from '../types/api/vdisk';
 import type { TUserToken } from '../types/api/whoami';
-import type { JsonRenderRequestParams, JsonRenderResponse } from '../types/api/render';
 import type { QuerySyntax } from '../types/store/query';
-import type { ComputeApiRequestParams, NodesApiRequestParams } from '../store/reducers/nodes/types';
-import type { StorageApiRequestParams } from '../store/reducers/storage/types';
-import type { MetaClusters } from '../types/api/meta';
-import type { JsonHotKeysResponse } from '../types/api/hotkeys';
-import { Nullable } from '../utils/typecheckers';
+import type { Nullable } from '../utils/typecheckers';
 type AxiosOptions = {
     concurrentId?: string;
+    signal?: AbortSignal;
 };
 export declare class YdbEmbeddedAPI extends AxiosWrapper {
     getPath(path: string): string;
-    getClusterInfo(clusterName?: string, { concurrentId }?: AxiosOptions): Promise<TClusterInfo>;
-    getClusterNodes({ concurrentId }?: AxiosOptions): Promise<TEvSystemStateResponse>;
-    getNodeInfo(id?: string | number): Promise<TEvSystemStateResponse>;
-    getTenants(clusterName?: string): Promise<TTenantInfo>;
+    getClusterInfo(clusterName?: string, { concurrentId, signal }?: AxiosOptions): Promise<TClusterInfo>;
+    getClusterNodes({ concurrentId, signal }?: AxiosOptions): Promise<TEvSystemStateResponse>;
+    getNodeInfo(id?: string | number, { concurrentId, signal }?: AxiosOptions): Promise<TEvSystemStateResponse>;
+    getTenants(clusterName?: string, { concurrentId, signal }?: AxiosOptions): Promise<TTenantInfo>;
     getTenantInfo({ path }: {
         path: string;
-    }, { concurrentId }?: AxiosOptions): Promise<TTenantInfo>;
-    getNodes({ visibleEntities, type, tablets, sortOrder, sortValue, ...params }: NodesApiRequestParams, { concurrentId }?: AxiosOptions): Promise<TNodesInfo>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<TTenantInfo>;
+    getNodes({ visibleEntities, type, tablets, sortOrder, sortValue, ...params }: NodesApiRequestParams, { concurrentId, signal }?: AxiosOptions): Promise<TNodesInfo>;
     /** @deprecated use getNodes instead */
-    getCompute({ sortOrder, sortValue, ...params }: ComputeApiRequestParams, { concurrentId }?: AxiosOptions): Promise<TComputeInfo>;
-    getStorageInfo({ tenant, visibleEntities, nodeId, poolName, groupId, sortOrder, sortValue, ...params }: StorageApiRequestParams, { concurrentId }?: AxiosOptions): Promise<TStorageInfo>;
-    getPdiskInfo(nodeId: string | number, pdiskId: string | number): Promise<TEvPDiskStateResponse>;
-    getVdiskInfo({ vDiskSlotId, pDiskId, nodeId, }: {
+    getCompute({ sortOrder, sortValue, ...params }: ComputeApiRequestParams, { concurrentId, signal }?: AxiosOptions): Promise<TComputeInfo>;
+    getStorageInfo({ tenant, visibleEntities, nodeId, poolName, groupId, sortOrder, sortValue, ...params }: StorageApiRequestParams, { concurrentId, signal }?: AxiosOptions): Promise<TStorageInfo>;
+    getPDiskInfo({ nodeId, pDiskId }: {
+        nodeId: string | number;
+        pDiskId: string | number;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<TEvPDiskStateResponse>;
+    getVDiskInfo({ vDiskSlotId, pDiskId, nodeId, }: {
         vDiskSlotId: string | number;
         pDiskId: string | number;
         nodeId: string | number;
-    }): Promise<TEvVDiskStateResponse>;
-    getGroupInfo(groupId: string | number): Promise<TStorageInfo>;
-    getHostInfo(): Promise<TEvSystemStateResponse>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<TEvVDiskStateResponse>;
+    getGroupInfo(groupId: string | number, { concurrentId, signal }?: AxiosOptions): Promise<TStorageInfo>;
+    getHostInfo({ concurrentId, signal }?: AxiosOptions): Promise<TEvSystemStateResponse>;
     getTabletsInfo({ nodes, path }: {
         nodes?: string[];
         path?: string;
-    }): Promise<TEvTabletStateResponse>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<TEvTabletStateResponse>;
     getSchema({ path }: {
         path: string;
-    }, { concurrentId }?: AxiosOptions): Promise<Nullable<TEvDescribeSchemeResult>>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<Nullable<TEvDescribeSchemeResult>>;
     getDescribe({ path }: {
         path: string;
-    }, { concurrentId }?: AxiosOptions): Promise<Nullable<TEvDescribeSchemeResult>>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<Nullable<TEvDescribeSchemeResult>>;
     getSchemaAcl({ path }: {
         path: string;
-    }): Promise<TMetaInfo>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<TMetaInfo>;
     getHeatmapData({ path }: {
         path: string;
-    }): Promise<Nullable<TEvDescribeSchemeResult>>;
-    getNetwork(path: string): Promise<TNetInfo>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<Nullable<TEvDescribeSchemeResult>>;
+    getNetwork(path: string, { concurrentId, signal }?: AxiosOptions): Promise<TNetInfo>;
     getTopic({ path }: {
         path?: string;
-    }, { concurrentId }?: AxiosOptions): Promise<DescribeTopicResult>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<DescribeTopicResult>;
     getConsumer({ path, consumer }: {
         path: string;
         consumer: string;
-    }, { concurrentId }?: AxiosOptions): Promise<DescribeConsumerResult>;
-    getPoolInfo(poolName: string): Promise<TStorageInfo>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<DescribeConsumerResult>;
+    getPoolInfo(poolName: string, { concurrentId, signal }?: AxiosOptions): Promise<TStorageInfo>;
     getTablet({ id }: {
         id?: string;
-    }): Promise<TEvTabletStateResponse>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<TEvTabletStateResponse>;
     getTabletHistory({ id }: {
         id?: string;
-    }): Promise<UnmergedTEvTabletStateResponse>;
-    getNodesList(): Promise<TEvNodesInfo>;
-    getTenantsList(): Promise<TTenants>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<UnmergedTEvTabletStateResponse>;
+    getNodesList({ concurrentId, signal }?: AxiosOptions): Promise<TEvNodesInfo>;
+    getTenantsList({ concurrentId, signal }?: AxiosOptions): Promise<TTenants>;
     sendQuery<Action extends Actions, Schema extends Schemas = undefined>({ schema, ...params }: {
         query?: string;
         database?: string;
@@ -88,11 +92,11 @@ export declare class YdbEmbeddedAPI extends AxiosWrapper {
         stats?: string;
         schema?: Schema;
         syntax?: QuerySyntax;
-    }, { concurrentId }?: AxiosOptions): Promise<QueryAPIResponse<Action, Schema>>;
+    }, { concurrentId, signal }?: AxiosOptions): Promise<QueryAPIResponse<Action, Schema>>;
     getExplainQuery<Action extends ExplainActions>(query: string, database: string, action: Action, syntax?: QuerySyntax): Promise<ExplainResponse<Action>>;
     getExplainQueryAst(query: string, database: string): Promise<import("../types/api/query").ExplainQueryResponse>;
-    getHotKeys(path: string, enableSampling: boolean, { concurrentId }?: AxiosOptions): Promise<JsonHotKeysResponse>;
-    getHealthcheckInfo(database: string, { concurrentId }?: AxiosOptions): Promise<HealthCheckAPIResponse>;
+    getHotKeys(path: string, enableSampling: boolean, { concurrentId, signal }?: AxiosOptions): Promise<JsonHotKeysResponse>;
+    getHealthcheckInfo(database: string, { concurrentId, signal }?: AxiosOptions): Promise<HealthCheckAPIResponse>;
     evictVDisk({ groupId, groupGeneration, failRealmIdx, failDomainIdx, vDiskIdx, }: {
         groupId: string | number;
         groupGeneration: string | number;
@@ -104,18 +108,20 @@ export declare class YdbEmbeddedAPI extends AxiosWrapper {
     killTablet(id?: string): Promise<string>;
     stopTablet(id?: string, hiveId?: string): Promise<string>;
     resumeTablet(id?: string, hiveId?: string): Promise<string>;
-    getTabletDescribe(tenantId: TDomainKey): Promise<Nullable<TEvDescribeSchemeResult>>;
-    getChartData({ target, from, until, maxDataPoints, database }: JsonRenderRequestParams, { concurrentId }?: AxiosOptions): Promise<JsonRenderResponse>;
+    getTabletDescribe(tenantId: TDomainKey, { concurrentId, signal }?: AxiosOptions): Promise<Nullable<TEvDescribeSchemeResult>>;
+    getChartData({ target, from, until, maxDataPoints, database }: JsonRenderRequestParams, { concurrentId, signal }?: AxiosOptions): Promise<JsonRenderResponse>;
     /** @deprecated use localStorage instead */
     postSetting(settingsApi: string, name: string, value: string): Promise<any>;
     authenticate(user: string, password: string): Promise<any>;
     logout(): Promise<any>;
     whoami(): Promise<TUserToken>;
-    getClustersList(): Promise<MetaClusters>;
+    getClustersList(_?: never, { signal }?: {
+        signal?: AbortSignal;
+    }): Promise<MetaClusters>;
 }
 export declare class YdbWebVersionAPI extends YdbEmbeddedAPI {
-    getClusterInfo(clusterName: string): Promise<TClusterInfo>;
-    getTenants(clusterName: string): Promise<TTenantInfo>;
+    getClusterInfo(clusterName: string, { signal }?: AxiosOptions): Promise<TClusterInfo>;
+    getTenants(clusterName: string, { concurrentId, signal }?: AxiosOptions): Promise<TTenantInfo>;
 }
 export declare function createApi({ webVersion, withCredentials }?: {
     webVersion?: boolean | undefined;