ydb-embedded-ui 5.5.0 → 6.0.0

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss

@@ -11,8 +11,7 @@
 
     &__primary-key-column {
         display: flex;
-        gap: 5px;
-
         align-items: center;
+        gap: 5px;
     }
 }

package/dist/containers/Tenant/Diagnostics/HotKeys/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: "no-data" | "hot-keys-collecting", params?: import("@gravity-ui/i18n").Params | undefined) => string;
 export default _default;

package/dist/containers/Tenant/Diagnostics/HotKeys/i18n/index.js

@@ -1,5 +1,4 @@
-import { i18n, Lang } from '../../../../../utils/i18n';
+import { registerKeysets } from '../../../../../utils/i18n';
 import en from './en.json';
 const COMPONENT = 'ydb-hot-keys';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { en });

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

@@ -1,72 +1,6 @@
-declare const _default: import("react-redux").ConnectedComponent<typeof Network, import("react-redux").Omit<Pick<PropTypes.InferProps<{
-    getNetworkInfo: PropTypes.Requireable<(...args: any[]) => any>;
-    setDataWasNotLoaded: PropTypes.Requireable<(...args: any[]) => any>;
-    netWorkInfo: PropTypes.Requireable<object>;
-    hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-    showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-    error: PropTypes.Requireable<object>;
-    wasLoaded: PropTypes.Requireable<boolean>;
-    loading: PropTypes.Requireable<boolean>;
-    autorefresh: PropTypes.Requireable<boolean>;
-    path: PropTypes.Requireable<string>;
-    filter: PropTypes.Requireable<string>;
-    changeFilter: PropTypes.Requireable<(...args: any[]) => any>;
-}>, "filter" | "loading" | "wasLoaded" | "error" | "path" | "autorefresh" | "showTooltip" | "hideTooltip" | "getNetworkInfo" | "setDataWasNotLoaded" | "changeFilter" | "netWorkInfo"> & Partial<Pick<PropTypes.InferProps<{
-    getNetworkInfo: PropTypes.Requireable<(...args: any[]) => any>;
-    setDataWasNotLoaded: PropTypes.Requireable<(...args: any[]) => any>;
-    netWorkInfo: PropTypes.Requireable<object>;
-    hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-    showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-    error: PropTypes.Requireable<object>;
-    wasLoaded: PropTypes.Requireable<boolean>;
-    loading: PropTypes.Requireable<boolean>;
-    autorefresh: PropTypes.Requireable<boolean>;
-    path: PropTypes.Requireable<string>;
-    filter: PropTypes.Requireable<string>;
-    changeFilter: PropTypes.Requireable<(...args: any[]) => any>;
-}>, never>> & Partial<Pick<{}, never>>, "filter" | "loading" | "wasLoaded" | "autorefresh" | "showTooltip" | "hideTooltip" | "getNetworkInfo" | "setDataWasNotLoaded" | "changeFilter" | "netWorkInfo">>;
-export default _default;
-declare class Network extends React.Component<any, any, any> {
-    static propTypes: {
-        getNetworkInfo: PropTypes.Requireable<(...args: any[]) => any>;
-        setDataWasNotLoaded: PropTypes.Requireable<(...args: any[]) => any>;
-        netWorkInfo: PropTypes.Requireable<object>;
-        hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-        showTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-        error: PropTypes.Requireable<object>;
-        wasLoaded: PropTypes.Requireable<boolean>;
-        loading: PropTypes.Requireable<boolean>;
-        autorefresh: PropTypes.Requireable<boolean>;
-        path: PropTypes.Requireable<string>;
-        filter: PropTypes.Requireable<string>;
-        changeFilter: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {};
-    static renderLoader(): JSX.Element;
-    constructor(props: any);
-    constructor(props: any, context: any);
-    state: {
-        howNodeSeeOtherNodesSortType: string;
-        howOthersSeeNodeSortType: string;
-        howNodeSeeOtherSearch: string;
-        howOtherSeeNodeSearch: string;
-        hoveredNode: undefined;
-        clickedNode: undefined;
-        highlightedNodes: never[];
-        showId: boolean;
-        showRacks: boolean;
-    };
-    autofetcher: any;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
-    componentWillUnmount(): void;
-    onChange: (field: any, num: any) => void;
-    handleSortChange: (sortItem: any) => void;
-    handleNodeClickWrap: (nodeInfo: any) => () => void;
-    groupNodesByField: (nodes: any, field: any) => {};
-    renderNodes: (nodes: any, isRight: any) => JSX.Element | JSX.Element[];
-    renderContent: () => JSX.Element;
-    render(): JSX.Element;
+import './Network.scss';
+interface NetworkProps {
+    path: string;
 }
-import PropTypes from "prop-types";
-import React from "react";
+export declare function Network({ path }: NetworkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -1,217 +1,140 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import reduce from 'lodash/reduce';
+import { Checkbox, Loader } from '@gravity-ui/uikit';
 import { Link } from 'react-router-dom';
-import { Loader, Checkbox } from '@gravity-ui/uikit';
-import NodeNetwork from './NodeNetwork/NodeNetwork';
+import { ResponseError } from '../../../../components/Errors/ResponseError';
 import { Icon } from '../../../../components/Icon';
-import { ProblemFilter } from '../../../../components/ProblemFilter';
 import { Illustration } from '../../../../components/Illustration';
-import { getNetworkInfo, setDataWasNotLoaded } from '../../../../store/reducers/network/network';
+import { ProblemFilter } from '../../../../components/ProblemFilter';
+import { networkApi } from '../../../../store/reducers/network/network';
+import { ProblemFilterValues, changeFilter, selectProblemFilter, } from '../../../../store/reducers/settings/settings';
 import { hideTooltip, showTooltip } from '../../../../store/reducers/tooltip';
-import { changeFilter, ProblemFilterValues } from '../../../../store/reducers/settings/settings';
-import { AutoFetcher } from '../../../../utils/autofetcher';
+import { cn } from '../../../../utils/cn';
+import { useTypedDispatch, useTypedSelector } from '../../../../utils/hooks';
 import { getDefaultNodePath } from '../../../Node/NodePages';
+import { NodeNetwork } from './NodeNetwork/NodeNetwork';
 import { getConnectedNodesCount } from './utils';
 import './Network.scss';
 const b = cn('network');
-class Network extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            howNodeSeeOtherNodesSortType: '',
-            howOthersSeeNodeSortType: '',
-            howNodeSeeOtherSearch: '',
-            howOtherSeeNodeSearch: '',
-            hoveredNode: undefined,
-            clickedNode: undefined,
-            highlightedNodes: [],
-            showId: false,
-            showRacks: false,
-        };
-        this.onChange = (field, num) => {
-            this.setState({ [field]: num });
-        };
-        this.handleSortChange = (sortItem) => {
-            this.setState({ sort: sortItem });
-        };
-        this.handleNodeClickWrap = (nodeInfo) => {
-            return () => {
-                const { clickedNode } = this.state;
-                const { NodeId } = nodeInfo;
-                if (!clickedNode) {
-                    this.setState({
-                        clickedNode: nodeInfo,
-                        rightNodes: this.groupNodesByField(nodeInfo.Peers, 'NodeType'),
-                    });
-                }
-                else if (NodeId === clickedNode.nodeId) {
-                    this.setState({ clickedNode: undefined });
-                }
-                else {
-                    this.setState({
-                        clickedNode: nodeInfo,
-                        rightNodes: this.groupNodesByField(nodeInfo.Peers, 'NodeType'),
-                    });
-                }
-            };
-        };
-        this.groupNodesByField = (nodes, field) => {
-            return reduce(nodes, (acc, node) => {
-                if (!acc[node[field]]) {
-                    acc[node[field]] = [node];
-                }
-                else {
-                    acc[node[field]].push(node);
-                }
-                return acc;
-            }, {});
-        };
-        this.renderNodes = (nodes, isRight) => {
-            const { showId, showRacks, clickedNode } = this.state;
-            let problemNodesCount = 0;
-            const { showTooltip, hideTooltip, filter } = this.props;
-            const result = Object.keys(nodes).map((key, j) => {
-                const nodesGroupedByRack = this.groupNodesByField(nodes[key], 'Rack');
-                return (_jsxs("div", Object.assign({ className: b('nodes-container', { right: isRight }) }, { children: [_jsxs("div", Object.assign({ className: b('nodes-title') }, { children: [key, " nodes"] })), _jsx("div", Object.assign({ className: b('nodes') }, { children: showRacks
-                                ? Object.keys(nodesGroupedByRack).map((key, i) => (_jsxs("div", Object.assign({ className: b('rack-column') }, { children: [_jsx("div", Object.assign({ className: b('rack-index') }, { children: key === 'undefined' ? '?' : key })), nodesGroupedByRack[key].map((nodeInfo, index) => {
-                                            let capacity, connected;
-                                            if (!isRight && (nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.Peers)) {
-                                                capacity = Object.keys(nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.Peers).length;
-                                                connected = getConnectedNodesCount(nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.Peers);
-                                            }
-                                            if ((filter === ProblemFilterValues.PROBLEMS &&
-                                                capacity !== connected) ||
-                                                filter === ProblemFilterValues.ALL ||
-                                                isRight) {
-                                                problemNodesCount++;
-                                                return (_jsx(NodeNetwork, { nodeId: nodeInfo.NodeId, showID: showId, rack: nodeInfo.Rack, status: nodeInfo.ConnectStatus, capacity: capacity, connected: connected, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onClick: !isRight &&
-                                                        this.handleNodeClickWrap(nodeInfo), isBlurred: !isRight &&
-                                                        clickedNode &&
-                                                        clickedNode.NodeId !== nodeInfo.NodeId }, index));
-                                            }
-                                        })] }), i)))
-                                : // eslint-disable-next-line array-callback-return
-                                    nodes[key].map((nodeInfo, index) => {
-                                        var _a;
-                                        let capacity, connected;
-                                        if (!isRight) {
-                                            capacity = (_a = nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.Peers) === null || _a === void 0 ? void 0 : _a.length;
-                                            connected = getConnectedNodesCount(nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.Peers);
-                                        }
-                                        if ((filter === ProblemFilterValues.PROBLEMS &&
-                                            capacity !== connected) ||
-                                            filter === ProblemFilterValues.ALL ||
-                                            isRight) {
-                                            problemNodesCount++;
-                                            return (_jsx(NodeNetwork, { nodeId: nodeInfo.NodeId, showID: showId, rack: nodeInfo.Rack, status: nodeInfo.ConnectStatus, capacity: (nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.Peers) && (nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.Peers.length), connected: (nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.Peers) &&
-                                                    getConnectedNodesCount(nodeInfo === null || nodeInfo === void 0 ? void 0 : nodeInfo.Peers), onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onClick: !isRight && this.handleNodeClickWrap(nodeInfo), isBlurred: !isRight &&
-                                                    clickedNode &&
-                                                    clickedNode.NodeId !== nodeInfo.NodeId }, index));
-                                        }
-                                    }) }))] }), j));
-            });
-            if (filter === ProblemFilterValues.PROBLEMS && problemNodesCount === 0) {
-                return _jsx(Illustration, { name: "thumbsUp", width: "200" });
-            }
-            else {
-                return result;
-            }
-        };
-        this.renderContent = () => {
-            const { netWorkInfo, filter, changeFilter } = this.props;
-            const { showId, showRacks, rightNodes } = this.state;
-            const { clickedNode } = this.state;
-            const nodes = netWorkInfo.Tenants && netWorkInfo.Tenants[0].Nodes;
-            const nodesGroupedByType = this.groupNodesByField(nodes, 'NodeType');
-            if (!(nodes === null || nodes === void 0 ? void 0 : nodes.length)) {
-                return _jsx("div", Object.assign({ className: "error" }, { children: "no nodes data" }));
-            }
-            return (_jsx("div", Object.assign({ className: b() }, { children: _jsx("div", Object.assign({ className: b('inner') }, { children: _jsxs("div", Object.assign({ className: b('nodes-row') }, { children: [_jsxs("div", Object.assign({ className: b('left') }, { children: [_jsx("div", Object.assign({ className: b('controls-wrapper') }, { children: _jsxs("div", Object.assign({ className: b('controls') }, { children: [_jsx(ProblemFilter, { value: filter, onChange: changeFilter, className: b('problem-filter') }), _jsx("div", Object.assign({ className: b('checkbox-wrapper') }, { children: _jsx(Checkbox, Object.assign({ onUpdate: () => this.onChange('showId', !showId), checked: showId }, { children: "ID" })) })), _jsx("div", Object.assign({ className: b('checkbox-wrapper') }, { children: _jsx(Checkbox, Object.assign({ onUpdate: () => this.onChange('showRacks', !showRacks), checked: showRacks }, { children: "Racks" })) }))] })) })), this.renderNodes(nodesGroupedByType)] })), _jsx("div", Object.assign({ className: b('right') }, { children: clickedNode ? (_jsxs("div", { children: [_jsxs("div", Object.assign({ className: b('label') }, { children: ["Connectivity of node", ' ', _jsx(Link, Object.assign({ className: b('link'), to: getDefaultNodePath(clickedNode.NodeId) }, { children: clickedNode.NodeId })), ' ', "to other nodes"] })), _jsx("div", Object.assign({ className: b('nodes-row') }, { children: this.renderNodes(rightNodes, true) }))] })) : (_jsxs("div", Object.assign({ className: b('placeholder') }, { children: [_jsx("div", Object.assign({ className: b('placeholder-img') }, { children: _jsx(Icon, { name: "network-placeholder", viewBox: "0 0 221 204", width: 221, height: 204 }) })), _jsx("div", Object.assign({ className: b('placeholder-text') }, { children: "Select node to see its connectivity to other nodes" }))] }))) }))] })) })) })));
-        };
+export function Network({ path }) {
+    var _a, _b;
+    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const filter = useTypedSelector(selectProblemFilter);
+    const dispatch = useTypedDispatch();
+    const [clickedNode, setClickedNode] = React.useState();
+    const [showId, setShowId] = React.useState(false);
+    const [showRacks, setShowRacks] = React.useState(false);
+    const { currentData, isFetching, error } = networkApi.useGetNetworkInfoQuery(path, {
+        pollingInterval: autorefresh,
+    });
+    const loading = isFetching && currentData === undefined;
+    if (loading) {
+        return (_jsx("div", { className: "loader", children: _jsx(Loader, { size: "l" }) }));
     }
-    static renderLoader() {
-        return (_jsx("div", Object.assign({ className: "loader" }, { children: _jsx(Loader, { size: "l" }) })));
+    if (error) {
+        return _jsx(ResponseError, { error: error });
     }
-    componentDidMount() {
-        const { path, autorefresh, getNetworkInfo } = this.props;
-        this.autofetcher = new AutoFetcher();
-        if (autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => getNetworkInfo(path));
-        }
-        getNetworkInfo(path);
+    const netWorkInfo = currentData;
+    const nodes = (_a = ((netWorkInfo === null || netWorkInfo === void 0 ? void 0 : netWorkInfo.Tenants) && netWorkInfo.Tenants[0].Nodes)) !== null && _a !== void 0 ? _a : [];
+    if (nodes.length === 0) {
+        return _jsx("div", { className: "error", children: "no nodes data" });
     }
-    componentDidUpdate(prevProps) {
-        const { autorefresh, path, setDataWasNotLoaded, getNetworkInfo } = this.props;
-        const restartAutorefresh = () => {
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => getNetworkInfo(path));
-        };
-        if (autorefresh && !prevProps.autorefresh) {
-            getNetworkInfo(path);
-            restartAutorefresh();
-        }
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-        if (path !== prevProps.path) {
-            setDataWasNotLoaded();
-            getNetworkInfo(path);
-            restartAutorefresh();
-        }
+    const nodesGroupedByType = groupNodesByField(nodes, 'NodeType');
+    const rightNodes = clickedNode ? groupNodesByField((_b = clickedNode.Peers) !== null && _b !== void 0 ? _b : [], 'NodeType') : {};
+    return (_jsx("div", { className: b(), children: _jsx("div", { className: b('inner'), children: _jsxs("div", { className: b('nodes-row'), children: [_jsxs("div", { className: b('left'), children: [_jsx("div", { className: b('controls-wrapper'), children: _jsxs("div", { className: b('controls'), children: [_jsx(ProblemFilter, { value: filter, onChange: (v) => {
+                                                dispatch(changeFilter(v));
+                                            }, className: b('problem-filter') }), _jsx("div", { className: b('checkbox-wrapper'), children: _jsx(Checkbox, { onUpdate: () => {
+                                                    setShowId(!showId);
+                                                }, checked: showId, children: "ID" }) }), _jsx("div", { className: b('checkbox-wrapper'), children: _jsx(Checkbox, { onUpdate: () => {
+                                                    setShowRacks(!showRacks);
+                                                }, checked: showRacks, children: "Racks" }) })] }) }), _jsx(Nodes, { nodes: nodesGroupedByType, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode })] }), _jsx("div", { className: b('right'), children: clickedNode ? (_jsxs("div", { children: [_jsxs("div", { className: b('label'), children: ["Connectivity of node", ' ', _jsx(Link, { className: b('link'), to: getDefaultNodePath(clickedNode.NodeId), children: clickedNode.NodeId }), ' ', "to other nodes"] }), _jsx("div", { className: b('nodes-row'), children: _jsx(Nodes, { nodes: rightNodes, isRight: true, showId: showId, showRacks: showRacks, clickedNode: clickedNode, onClickNode: setClickedNode }) })] })) : (_jsxs("div", { className: b('placeholder'), children: [_jsx("div", { className: b('placeholder-img'), children: _jsx(Icon, { name: "network-placeholder", viewBox: "0 0 221 204", width: 221, height: 204 }) }), _jsx("div", { className: b('placeholder-text'), children: "Select node to see its connectivity to other nodes" })] })) })] }) }) }));
+}
+function Nodes({ nodes, isRight, showId, showRacks, clickedNode, onClickNode }) {
+    const filter = useTypedSelector(selectProblemFilter);
+    const dispatch = useTypedDispatch();
+    let problemNodesCount = 0;
+    const result = Object.keys(nodes).map((key, j) => {
+        const nodesGroupedByRack = groupNodesByField(nodes[key], 'Rack');
+        return (_jsxs("div", { className: b('nodes-container', { right: isRight }), children: [_jsxs("div", { className: b('nodes-title'), children: [key, " nodes"] }), _jsx("div", { className: b('nodes'), children: showRacks
+                        ? Object.keys(nodesGroupedByRack).map((key, i) => (_jsxs("div", { className: b('rack-column'), children: [_jsx("div", { className: b('rack-index'), children: key === 'undefined' ? '?' : key }), nodesGroupedByRack[key].map((nodeInfo, index) => {
+                                    let capacity, connected;
+                                    if (!isRight && 'Peers' in nodeInfo && nodeInfo.Peers) {
+                                        capacity = Object.keys(nodeInfo.Peers).length;
+                                        connected = getConnectedNodesCount(nodeInfo.Peers);
+                                    }
+                                    if ((filter === ProblemFilterValues.PROBLEMS &&
+                                        capacity !== connected) ||
+                                        filter === ProblemFilterValues.ALL ||
+                                        isRight) {
+                                        problemNodesCount++;
+                                        return (_jsx(NodeNetwork, { nodeId: nodeInfo.NodeId, showID: showId, rack: nodeInfo.Rack, status: 'ConnectStatus' in nodeInfo
+                                                ? nodeInfo.ConnectStatus
+                                                : undefined, capacity: capacity, connected: connected, onMouseEnter: (...params) => {
+                                                dispatch(showTooltip(...params));
+                                            }, onMouseLeave: () => {
+                                                dispatch(hideTooltip());
+                                            }, onClick: isRight
+                                                ? undefined
+                                                : () => {
+                                                    onClickNode(clickedNode &&
+                                                        nodeInfo.NodeId ===
+                                                            clickedNode.NodeId
+                                                        ? undefined
+                                                        : nodeInfo);
+                                                }, isBlurred: !isRight &&
+                                                clickedNode &&
+                                                clickedNode.NodeId !== nodeInfo.NodeId }, index));
+                                    }
+                                    return null;
+                                })] }, i)))
+                        : nodes[key].map((nodeInfo, index) => {
+                            let capacity, connected;
+                            const peers = nodeInfo && 'Peers' in nodeInfo ? nodeInfo.Peers : undefined;
+                            if (!isRight && 'Peers' in nodeInfo && nodeInfo.Peers) {
+                                capacity = nodeInfo.Peers.length;
+                                connected = getConnectedNodesCount(peers);
+                            }
+                            if ((filter === ProblemFilterValues.PROBLEMS &&
+                                capacity !== connected) ||
+                                filter === ProblemFilterValues.ALL ||
+                                isRight) {
+                                problemNodesCount++;
+                                return (_jsx(NodeNetwork, { nodeId: nodeInfo.NodeId, showID: showId, rack: nodeInfo.Rack, status: 'ConnectStatus' in nodeInfo
+                                        ? nodeInfo.ConnectStatus
+                                        : undefined, capacity: peers === null || peers === void 0 ? void 0 : peers.length, connected: connected, onMouseEnter: (...params) => {
+                                        dispatch(showTooltip(...params));
+                                    }, onMouseLeave: () => {
+                                        dispatch(hideTooltip());
+                                    }, onClick: isRight
+                                        ? undefined
+                                        : () => {
+                                            onClickNode(clickedNode &&
+                                                nodeInfo.NodeId ===
+                                                    clickedNode.NodeId
+                                                ? undefined
+                                                : nodeInfo);
+                                        }, isBlurred: !isRight &&
+                                        clickedNode &&
+                                        clickedNode.NodeId !== nodeInfo.NodeId }, index));
+                            }
+                            return null;
+                        }) })] }, j));
+    });
+    if (filter === ProblemFilterValues.PROBLEMS && problemNodesCount === 0) {
+        return _jsx(Illustration, { name: "thumbsUp", width: "200" });
     }
-    componentWillUnmount() {
-        this.autofetcher.stop();
+    else {
+        return result;
     }
-    render() {
-        const { loading, wasLoaded, error } = this.props;
-        if (loading && !wasLoaded) {
-            return Network.renderLoader();
-        }
-        else if (error) {
-            return _jsx("div", { children: error.statusText });
+}
+function groupNodesByField(nodes, field) {
+    return nodes.reduce((acc, node) => {
+        if (acc[node[field]]) {
+            acc[node[field]].push(node);
         }
         else {
-            return this.renderContent();
+            acc[node[field]] = [node];
         }
-    }
+        return acc;
+    }, {});
 }
-Network.propTypes = {
-    getNetworkInfo: PropTypes.func,
-    setDataWasNotLoaded: PropTypes.func,
-    netWorkInfo: PropTypes.object,
-    hideTooltip: PropTypes.func,
-    showTooltip: PropTypes.func,
-    error: PropTypes.object,
-    wasLoaded: PropTypes.bool,
-    loading: PropTypes.bool,
-    autorefresh: PropTypes.bool,
-    path: PropTypes.string,
-    filter: PropTypes.string,
-    changeFilter: PropTypes.func,
-};
-Network.defaultProps = {};
-const mapStateToProps = (state) => {
-    const { wasLoaded, loading, data: netWorkInfo = {} } = state.network;
-    const { autorefresh } = state.schema;
-    return {
-        netWorkInfo,
-        wasLoaded,
-        loading,
-        filter: state.settings.problemFilter,
-        autorefresh,
-    };
-};
-const mapDispatchToProps = {
-    getNetworkInfo,
-    hideTooltip,
-    showTooltip,
-    changeFilter,
-    setDataWasNotLoaded,
-};
-export default connect(mapStateToProps, mapDispatchToProps)(Network);

package/dist/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.d.ts

@@ -1,27 +1,17 @@
-export class NodeNetwork extends React.Component<any, any, any> {
-    static propTypes: {
-        onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
-        onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
-        nodeId: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        connected: PropTypes.Requireable<number>;
-        capacity: PropTypes.Requireable<number>;
-        rack: PropTypes.Requireable<string>;
-        status: PropTypes.Requireable<string>;
-        onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        showID: PropTypes.Requireable<boolean>;
-        isBlurred: PropTypes.Requireable<boolean>;
-    };
-    static defaultProps: {
-        onMouseEnter: () => void;
-        onMouseLeave: () => void;
-        onClick: () => void;
-    };
-    constructor(props: any);
-    constructor(props: any, context: any);
-    node: React.RefObject<any>;
-    _onNodeHover: () => void;
-    _onNodeLeave: () => void;
-    render(): JSX.Element;
+import { EFlag } from '../../../../../types/api/enums';
+import type { ITooltipTemplateType } from '../../../../../types/store/tooltip';
+import './NodeNetwork.scss';
+interface NodeNetworkProps {
+    onMouseEnter?: (node: HTMLDivElement, data: any, type: ITooltipTemplateType) => void;
+    onMouseLeave?: () => void;
+    nodeId: number | string;
+    connected?: number;
+    capacity?: number;
+    rack: string;
+    status?: EFlag;
+    onClick?: (nodeId: number | string) => void;
+    showID?: boolean;
+    isBlurred?: boolean;
 }
-export default NodeNetwork;
-import React from "react";
+export declare function NodeNetwork({ nodeId, connected, capacity, rack, status, onClick, onMouseEnter, onMouseLeave, showID, isBlurred, }: NodeNetworkProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
 import { EFlag } from '../../../../../types/api/enums';
+import { cn } from '../../../../../utils/cn';
 import './NodeNetwork.scss';
 const b = cn('node-network');
-const getNodeModifier = (connected, capacity) => {
+function getNodeModifier(connected = 0, capacity = 0) {
     const percents = Math.floor((connected / capacity) * 100);
     if (percents === 100) {
         return EFlag.Green;
@@ -19,45 +18,18 @@ const getNodeModifier = (connected, capacity) => {
     else {
         return EFlag.Grey;
     }
-};
-export class NodeNetwork extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.node = React.createRef();
-        this._onNodeHover = () => {
-            const { onMouseEnter, nodeId, connected, capacity, rack } = this.props;
-            const popupData = { nodeId, connected, capacity, rack };
-            onMouseEnter(this.node.current, popupData, 'node');
-        };
-        this._onNodeLeave = () => {
-            this.props.onMouseLeave();
-        };
-    }
-    render() {
-        const { nodeId, connected, capacity, status, onClick, showID, isBlurred } = this.props;
-        const color = status || getNodeModifier(connected, capacity);
-        return (_jsx("div", Object.assign({ ref: this.node, className: b({
-                [color.toLowerCase()]: true,
-                id: showID,
-                blur: isBlurred,
-            }), onMouseEnter: this._onNodeHover, onMouseLeave: this._onNodeLeave, onClick: () => onClick(nodeId) }, { children: showID && nodeId })));
-    }
 }
-NodeNetwork.propTypes = {
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    nodeId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    connected: PropTypes.number,
-    capacity: PropTypes.number,
-    rack: PropTypes.string,
-    status: PropTypes.string,
-    onClick: PropTypes.func,
-    showID: PropTypes.bool,
-    isBlurred: PropTypes.bool,
-};
-NodeNetwork.defaultProps = {
-    onMouseEnter: () => { },
-    onMouseLeave: () => { },
-    onClick: () => { },
-};
-export default NodeNetwork;
+function noop() { }
+export function NodeNetwork({ nodeId, connected, capacity, rack, status, onClick = noop, onMouseEnter = noop, onMouseLeave = noop, showID, isBlurred, }) {
+    const ref = React.useRef(null);
+    const color = status || getNodeModifier(connected, capacity);
+    return (_jsx("div", { ref: ref, className: b({
+            [color.toLowerCase()]: true,
+            id: showID,
+            blur: isBlurred,
+        }), onMouseEnter: () => {
+            onMouseEnter(ref.current, { nodeId, connected, capacity, rack }, 'node');
+        }, onMouseLeave: () => {
+            onMouseLeave();
+        }, onClick: () => onClick(nodeId), children: showID ? nodeId : null }));
+}

package/dist/containers/Tenant/Diagnostics/Overview/ChangefeedInfo/ChangefeedInfo.d.ts

@@ -4,5 +4,5 @@ interface ChangefeedProps {
     topic?: TEvDescribeSchemeResult;
 }
 /** Displays overview for CDCStream EPathType */
-export declare const ChangefeedInfo: ({ data, topic }: ChangefeedProps) => JSX.Element;
+export declare const ChangefeedInfo: ({ data, topic }: ChangefeedProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/Overview/ChangefeedInfo/ChangefeedInfo.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatObject, InfoViewer } from '../../../../../components/InfoViewer';
+import { InfoViewer, formatObject } from '../../../../../components/InfoViewer';
 import { formatCdcStreamItem, formatCommonItem, } from '../../../../../components/InfoViewer/formatters';
 import { useTypedSelector } from '../../../../../utils/hooks';
 import { getEntityName } from '../../../utils';
@@ -25,10 +25,10 @@ export const ChangefeedInfo = ({ data, topic }) => {
     const entityName = getEntityName(data === null || data === void 0 ? void 0 : data.PathDescription);
     const { error: schemaError } = useTypedSelector((state) => state.schema);
     if (schemaError) {
-        return _jsx("div", Object.assign({ className: "error" }, { children: schemaError.statusText }));
+        return _jsx("div", { className: "error", children: schemaError.statusText });
     }
     if (!data || !topic) {
-        return _jsxs("div", Object.assign({ className: "error" }, { children: ["No ", entityName, " data"] }));
+        return _jsxs("div", { className: "error", children: ["No ", entityName, " data"] });
     }
     return (_jsxs("div", { children: [_jsx(InfoViewer, { title: entityName, info: prepareChangefeedInfo(data, topic) }), _jsx(TopicStats, {})] }));
 };

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { EPathType } from '../../../../types/api/schema';
 interface OverviewProps {
     type?: EPathType;
     tenantName?: string;
 }
-declare function Overview({ type, tenantName }: OverviewProps): JSX.Element;
+declare function Overview({ type, tenantName }: OverviewProps): import("react/jsx-runtime").JSX.Element;
 export default Overview;