ydb-embedded-ui 4.33.0 → 5.0.0

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

@@ -1,90 +1,157 @@
+import { jsxs as _jsxs, jsx as _jsx } 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 { connect } from 'react-redux';
 import _ from 'lodash';
-
-import {Link} from 'react-router-dom';
-import {Loader, Checkbox} from '@gravity-ui/uikit';
-
+import { Link } from 'react-router-dom';
+import { Loader, Checkbox } from '@gravity-ui/uikit';
 import NodeNetwork from './NodeNetwork/NodeNetwork';
-import {Icon} from '../../../../components/Icon';
-import {ProblemFilter} from '../../../../components/ProblemFilter';
-import {Illustration} from '../../../../components/Illustration';
-
-import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network/network';
-import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
-import {changeFilter, ProblemFilterValues} from '../../../../store/reducers/settings/settings';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-import {getDefaultNodePath} from '../../../Node/NodePages';
-
-import {getConnectedNodesCount} from './utils';
-
+import { Icon } from '../../../../components/Icon';
+import { ProblemFilter } from '../../../../components/ProblemFilter';
+import { Illustration } from '../../../../components/Illustration';
+import { getNetworkInfo, setDataWasNotLoaded } from '../../../../store/reducers/network/network';
+import { hideTooltip, showTooltip } from '../../../../store/reducers/tooltip';
+import { changeFilter, ProblemFilterValues } from '../../../../store/reducers/settings/settings';
+import { AutoFetcher } from '../../../../utils/autofetcher';
+import { getDefaultNodePath } from '../../../Node/NodePages';
+import { getConnectedNodesCount } from './utils';
 import './Network.scss';
-
 const b = cn('network');
-
 class Network extends React.Component {
-    static 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,
-    };
-
-    static defaultProps = {};
-
+    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" }))] }))) }))] })) })) })));
+        };
+    }
     static renderLoader() {
-        return (
-            <div className="loader">
-                <Loader size="l" />
-            </div>
-        );
+        return (_jsx("div", Object.assign({ className: "loader" }, { children: _jsx(Loader, { size: "l" }) })));
     }
-
-    state = {
-        howNodeSeeOtherNodesSortType: '',
-        howOthersSeeNodeSortType: '',
-        howNodeSeeOtherSearch: '',
-        howOtherSeeNodeSearch: '',
-        hoveredNode: undefined,
-        clickedNode: undefined,
-        highlightedNodes: [],
-        showId: false,
-        showRacks: false,
-    };
-
-    autofetcher;
-
     componentDidMount() {
-        const {path, autorefresh, getNetworkInfo} = this.props;
+        const { path, autorefresh, getNetworkInfo } = this.props;
         this.autofetcher = new AutoFetcher();
-
         if (autorefresh) {
             this.autofetcher.start();
             this.autofetcher.fetch(() => getNetworkInfo(path));
         }
-
         getNetworkInfo(path);
     }
-
     componentDidUpdate(prevProps) {
-        const {autorefresh, path, setDataWasNotLoaded, getNetworkInfo} = this.props;
-
+        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();
@@ -92,272 +159,46 @@ class Network extends React.Component {
         if (!autorefresh && prevProps.autorefresh) {
             this.autofetcher.stop();
         }
-
         if (path !== prevProps.path) {
             setDataWasNotLoaded();
             getNetworkInfo(path);
             restartAutorefresh();
         }
     }
-
     componentWillUnmount() {
         this.autofetcher.stop();
     }
-
-    onChange = (field, num) => {
-        this.setState({[field]: num});
-    };
-
-    handleSortChange = (sortItem) => {
-        this.setState({sort: sortItem});
-    };
-
-    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'),
-                });
-            }
-        };
-    };
-
-    groupNodesByField = (nodes, field) => {
-        return _.reduce(
-            nodes,
-            (acc, node) => {
-                if (!acc[node[field]]) {
-                    acc[node[field]] = [node];
-                } else {
-                    acc[node[field]].push(node);
-                }
-                return acc;
-            },
-            {},
-        );
-    };
-
-    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 (
-                <div key={j} className={b('nodes-container', {right: isRight})}>
-                    <div className={b('nodes-title')}>{key} nodes</div>
-                    <div className={b('nodes')}>
-                        {showRacks
-                            ? Object.keys(nodesGroupedByRack).map((key, i) => (
-                                  <div key={i} className={b('rack-column')}>
-                                      <div className={b('rack-index')}>
-                                          {key === 'undefined' ? '?' : key}
-                                      </div>
-                                      {/* eslint-disable-next-line array-callback-return */}
-                                      {nodesGroupedByRack[key].map((nodeInfo, index) => {
-                                          let capacity, connected;
-                                          if (!isRight && nodeInfo?.Peers) {
-                                              capacity = Object.keys(nodeInfo?.Peers).length;
-                                              connected = getConnectedNodesCount(nodeInfo?.Peers);
-                                          }
-
-                                          if (
-                                              (filter === ProblemFilterValues.PROBLEMS &&
-                                                  capacity !== connected) ||
-                                              filter === ProblemFilterValues.ALL ||
-                                              isRight
-                                          ) {
-                                              problemNodesCount++;
-                                              return (
-                                                  <NodeNetwork
-                                                      key={index}
-                                                      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
-                                                      }
-                                                  />
-                                              );
-                                          }
-                                      })}
-                                  </div>
-                              ))
-                            : // eslint-disable-next-line array-callback-return
-                              nodes[key].map((nodeInfo, index) => {
-                                  let capacity, connected;
-                                  if (!isRight) {
-                                      capacity = nodeInfo?.Peers?.length;
-                                      connected = getConnectedNodesCount(nodeInfo?.Peers);
-                                  }
-
-                                  if (
-                                      (filter === ProblemFilterValues.PROBLEMS &&
-                                          capacity !== connected) ||
-                                      filter === ProblemFilterValues.ALL ||
-                                      isRight
-                                  ) {
-                                      problemNodesCount++;
-                                      return (
-                                          <NodeNetwork
-                                              key={index}
-                                              nodeId={nodeInfo.NodeId}
-                                              showID={showId}
-                                              rack={nodeInfo.Rack}
-                                              status={nodeInfo.ConnectStatus}
-                                              capacity={nodeInfo?.Peers && nodeInfo?.Peers.length}
-                                              connected={
-                                                  nodeInfo?.Peers &&
-                                                  getConnectedNodesCount(nodeInfo?.Peers)
-                                              }
-                                              onMouseEnter={showTooltip}
-                                              onMouseLeave={hideTooltip}
-                                              onClick={
-                                                  !isRight && this.handleNodeClickWrap(nodeInfo)
-                                              }
-                                              isBlurred={
-                                                  !isRight &&
-                                                  clickedNode &&
-                                                  clickedNode.NodeId !== nodeInfo.NodeId
-                                              }
-                                          />
-                                      );
-                                  }
-                              })}
-                    </div>
-                </div>
-            );
-        });
-
-        if (filter === ProblemFilterValues.PROBLEMS && problemNodesCount === 0) {
-            return <Illustration name="thumbsUp" width="200" />;
-        } else {
-            return result;
-        }
-    };
-
-    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?.length) {
-            return <div className="error">no nodes data</div>;
-        }
-
-        return (
-            <div className={b()}>
-                <div className={b('inner')}>
-                    <div className={b('nodes-row')}>
-                        <div className={b('left')}>
-                            <div className={b('controls-wrapper')}>
-                                <div className={b('controls')}>
-                                    <ProblemFilter
-                                        value={filter}
-                                        onChange={changeFilter}
-                                        className={b('problem-filter')}
-                                    />
-                                    <div className={b('checkbox-wrapper')}>
-                                        <Checkbox
-                                            onUpdate={() => this.onChange('showId', !showId)}
-                                            checked={showId}
-                                        >
-                                            ID
-                                        </Checkbox>
-                                    </div>
-                                    <div className={b('checkbox-wrapper')}>
-                                        <Checkbox
-                                            onUpdate={() => this.onChange('showRacks', !showRacks)}
-                                            checked={showRacks}
-                                        >
-                                            Racks
-                                        </Checkbox>
-                                    </div>
-                                </div>
-                            </div>
-                            {this.renderNodes(nodesGroupedByType)}
-                        </div>
-
-                        <div className={b('right')}>
-                            {clickedNode ? (
-                                <div>
-                                    <div className={b('label')}>
-                                        Connectivity of node{' '}
-                                        <Link
-                                            className={b('link')}
-                                            to={getDefaultNodePath(clickedNode.NodeId)}
-                                        >
-                                            {clickedNode.NodeId}
-                                        </Link>{' '}
-                                        to other nodes
-                                    </div>
-                                    <div className={b('nodes-row')}>
-                                        {this.renderNodes(rightNodes, true)}
-                                    </div>
-                                </div>
-                            ) : (
-                                <div className={b('placeholder')}>
-                                    <div className={b('placeholder-img')}>
-                                        <Icon
-                                            name="network-placeholder"
-                                            viewBox="0 0 221 204"
-                                            width={221}
-                                            height={204}
-                                        />
-                                    </div>
-
-                                    <div className={b('placeholder-text')}>
-                                        Select node to see its connectivity to other nodes
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
     render() {
-        const {loading, wasLoaded, error} = this.props;
+        const { loading, wasLoaded, error } = this.props;
         if (loading && !wasLoaded) {
             return Network.renderLoader();
-        } else if (error) {
-            return <div>{error.statusText}</div>;
-        } else {
+        }
+        else if (error) {
+            return _jsx("div", { children: error.statusText });
+        }
+        else {
             return this.renderContent();
         }
     }
 }
-
+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;
+    const { wasLoaded, loading, data: netWorkInfo = {} } = state.network;
+    const { autorefresh } = state.schema;
     return {
         netWorkInfo,
         wasLoaded,
@@ -366,7 +207,6 @@ const mapStateToProps = (state) => {
         autorefresh,
     };
 };
-
 const mapDispatchToProps = {
     getNetworkInfo,
     hideTooltip,
@@ -374,5 +214,4 @@ const mapDispatchToProps = {
     changeFilter,
     setDataWasNotLoaded,
 };
-
 export default connect(mapStateToProps, mapDispatchToProps)(Network);

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

@@ -0,0 +1,27 @@
+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<string | number>;
+        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;
+}
+export default NodeNetwork;
+import React from "react";

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

@@ -1,71 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
 import './NodeNetwork.scss';
 const b = cn('node-network');
-
 const getNodeModifier = (connected, capacity) => {
     const percents = Math.floor((connected / capacity) * 100);
     if (percents === 100) {
         return 'green';
-    } else if (percents >= 70) {
+    }
+    else if (percents >= 70) {
         return 'yellow';
-    } else if (percents >= 1) {
+    }
+    else if (percents >= 1) {
         return 'red';
-    } else {
+    }
+    else {
         return 'gray';
     }
 };
-
 export class NodeNetwork extends React.Component {
-    static 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,
-    };
-
-    static defaultProps = {
-        onMouseEnter: () => {},
-        onMouseLeave: () => {},
-        onClick: () => {},
-    };
-
-    node = React.createRef();
-
-    _onNodeHover = () => {
-        const {onMouseEnter, nodeId, connected, capacity, rack} = this.props;
-        const popupData = {nodeId, connected, capacity, rack};
-        onMouseEnter(this.node.current, popupData, 'node');
-    };
-    _onNodeLeave = () => {
-        this.props.onMouseLeave();
-    };
-
+    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;
-        return (
-            <div
-                ref={this.node}
-                className={b({
-                    [status?.toLowerCase() || getNodeModifier(connected, capacity)]: true,
-                    id: showID,
-                    blur: isBlurred,
-                })}
-                onMouseEnter={this._onNodeHover}
-                onMouseLeave={this._onNodeLeave}
-                onClick={() => onClick(nodeId)}
-            >
-                {showID && nodeId}
-            </div>
-        );
+        const { nodeId, connected, capacity, status, onClick, showID, isBlurred } = this.props;
+        return (_jsx("div", Object.assign({ ref: this.node, className: b({
+                [(status === null || status === void 0 ? void 0 : status.toLowerCase()) || getNodeModifier(connected, capacity)]: 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;