ydb-embedded-ui 0.1.0

package/dist/containers/Tenant/Healthcheck/IssuesViewer/IssuesViewer.js

@@ -0,0 +1,185 @@
+import {useCallback, useEffect, useState} from 'react';
+import cn from 'bem-cn-lite';
+import JSONTree from 'react-json-inspector';
+import _ from 'lodash';
+import _flow from 'lodash/fp/flow';
+import _filter from 'lodash/fp/filter';
+import _sortBy from 'lodash/fp/sortBy';
+import _uniqBy from 'lodash/fp/uniqBy';
+
+import TreeView from '../../../../components/TreeView/TreeView';
+import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
+
+import './IssueViewer.scss';
+
+// const indicatorBlock = cn('indicator');
+
+// const IssueStatus = ({status, name}) => {
+//     const modifier = status && status.toLowerCase();
+
+//     return (
+//         <React.Fragment>
+//             <div className={indicatorBlock({[modifier]: true})} />
+//             {name}
+//         </React.Fragment>
+//     );
+// };
+
+const issueBlock = cn('issue');
+
+const IssueRow = ({data, treeLevel, active, setInfoForActive, onClick}) => {
+    // eslint-disable-next-line no-unused-vars
+    const {id, status, message, type, ...rest} = data;
+
+    useEffect(() => {
+        if (active) {
+            setInfoForActive(rest);
+        }
+    }, [active, setInfoForActive]);
+
+    return (
+        <div className={issueBlock({active})} onClick={onClick}>
+            <div className={issueBlock('field', {status: true})}>
+                <EntityStatus status={status} name={id} />
+                {/* <IssueStatus status={status} name={id} /> */}
+            </div>
+            <div
+                className={issueBlock('field', {message: true})}
+                style={{marginLeft: -treeLevel * 25 + 'px'}}
+            >
+                {message}
+            </div>
+            <div className={issueBlock('field', {type: true})}>{type}</div>
+        </div>
+    );
+};
+
+const issueViewerBlock = cn('issue-viewer');
+
+const IssuesViewer = ({issues}) => {
+    const [data, setData] = useState([]);
+    const [collapsedIssues, setCollapsedIssues] = useState({});
+    const [activeItem, setActiveItem] = useState();
+    const [infoData, setInfoData] = useState();
+
+    useEffect(() => {
+        if (!activeItem && data.length) {
+            const {id} = data[0];
+            setActiveItem(id);
+        }
+    }, [data]);
+
+    useEffect(() => {
+        const newData = getInvertedConsequencesTree({data: issues});
+
+        setData(newData);
+    }, [issues]);
+
+    const renderTree = useCallback(
+        (data, childrenKey, treeLevel = 0) => {
+            return _.map(data, (item) => {
+                const {id} = item;
+                const isActive = activeItem === item.id;
+                const hasArrow = item[childrenKey].length;
+
+                return (
+                    <TreeView
+                        key={id}
+                        nodeLabel={
+                            <IssueRow
+                                data={item}
+                                treeLevel={treeLevel}
+                                active={isActive}
+                                setInfoForActive={setInfoData}
+                                onClick={() => setActiveItem(id)}
+                            />
+                        }
+                        className={issueBlock('wpapper', {active: isActive})}
+                        collapsed={
+                            typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id]
+                        }
+                        hasArrow={hasArrow}
+                        onClick={() => {
+                            const newValue =
+                                typeof collapsedIssues[id] === 'undefined'
+                                    ? false
+                                    : !collapsedIssues[id];
+                            const newCollapsedIssues = {...collapsedIssues, [id]: newValue};
+                            setCollapsedIssues(newCollapsedIssues);
+                        }}
+                    >
+                        {renderTree(item[childrenKey], childrenKey, treeLevel + 1)}
+                    </TreeView>
+                );
+            });
+        },
+        [data, collapsedIssues, activeItem],
+    );
+
+    const renderInfoPanel = useCallback(() => {
+        if (!infoData) {
+            return null;
+        }
+
+        return (
+            <div className={issueViewerBlock('info-panel')}>
+                <h3>Additional info for {activeItem}</h3>
+                <JSONTree
+                    data={infoData}
+                    search={false}
+                    isExpanded={() => true}
+                    className={issueViewerBlock('inspector')}
+                />
+            </div>
+        );
+    }, [data, infoData, activeItem]);
+
+    return (
+        <div className={issueViewerBlock()}>
+            <div className={issueViewerBlock('tree')}>{renderTree(data, 'reasonsItems')}</div>
+            {renderInfoPanel()}
+        </div>
+    );
+};
+
+function getReasonsForIssue({issue, data}) {
+    return _.filter(data, (item) => issue.reason && issue.reason.indexOf(item.id) !== -1);
+}
+
+const mapStatusToPriority = {
+    RED: 0,
+    ORANGE: 1,
+    YELLOW: 2,
+    BLUE: 3,
+    GREEN: 4,
+};
+
+function getInvertedConsequencesTree({data, roots: receivedRoots}) {
+    let roots = receivedRoots;
+    if (!roots && data) {
+        roots = _flow([
+            _filter((item) => {
+                return !_.find(
+                    data,
+                    (issue) => issue.reason && issue.reason.indexOf(item.id) !== -1,
+                );
+            }),
+            _uniqBy((item) => item.id),
+            _sortBy(({status}) => mapStatusToPriority[status]),
+        ])(data);
+    }
+
+    return _.map(roots, (issue) => {
+        const reasonsItems = getInvertedConsequencesTree({
+            roots: getReasonsForIssue({issue, data}),
+            data,
+        });
+
+        return {
+            ...issue,
+            reasonsItems,
+        };
+    });
+}
+
+export default IssuesViewer;

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

@@ -0,0 +1,341 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import _ from 'lodash';
+
+import {Link} from 'react-router-dom';
+import {Loader, Checkbox} from '@yandex-cloud/uikit';
+
+import NodeNetwork from './NodeNetwork/NodeNetwork';
+import Icon from '../../../components/Icon/Icon';
+import ProblemFilter, {problemFilterType} from '../../../components/ProblemFilter/ProblemFilter';
+
+import {getNetworkInfo} from '../../../store/reducers/network';
+import {hideTooltip, showTooltip} from '../../../store/reducers/tooltip';
+import {ALL, PROBLEMS} from '../../../utils/constants';
+import routes, {createHref} from '../../../routes';
+import {changeFilter} from '../../../store/reducers/settings';
+
+import './Network.scss';
+
+const b = cn('network');
+
+class Network extends React.Component {
+    static propTypes = {
+        getNetworkInfo: PropTypes.func,
+        netWorkInfo: PropTypes.object,
+        hideTooltip: PropTypes.func,
+        showTooltip: PropTypes.func,
+        error: PropTypes.object,
+        wasLoaded: PropTypes.bool,
+        loading: PropTypes.bool,
+        path: PropTypes.string,
+        filter: problemFilterType,
+        changeFilter: PropTypes.func,
+    };
+
+    static defaultProps = {};
+
+    static renderLoader() {
+        return (
+            <div className="loader">
+                <Loader size="l" />
+            </div>
+        );
+    }
+
+    state = {
+        howNodeSeeOtherNodesSortType: '',
+        howOthersSeeNodeSortType: '',
+        howNodeSeeOtherSearch: '',
+        howOtherSeeNodeSearch: '',
+        hoveredNode: undefined,
+        clickedNode: undefined,
+        highlightedNodes: [],
+        showId: false,
+        showRacks: false,
+    };
+
+    componentDidMount() {
+        const {path} = this.props;
+        this.props.getNetworkInfo(path);
+    }
+
+    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;
+            },
+            {},
+        );
+    };
+
+    getConnectedNodesCount = (peers) => {
+        const res = peers?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
+        return res;
+    };
+
+    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 = this.getConnectedNodesCount(
+                                                  nodeInfo?.Peers,
+                                              );
+                                          }
+
+                                          if (
+                                              (filter === PROBLEMS && capacity !== connected) ||
+                                              filter === 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 = this.getConnectedNodesCount(nodeInfo?.Peers);
+                                  }
+
+                                  if (
+                                      (filter === PROBLEMS && capacity !== connected) ||
+                                      filter === 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 &&
+                                                  this.getConnectedNodesCount(nodeInfo?.Peers)
+                                              }
+                                              onMouseEnter={showTooltip}
+                                              onMouseLeave={hideTooltip}
+                                              onClick={
+                                                  !isRight && this.handleNodeClickWrap(nodeInfo)
+                                              }
+                                              isBlurred={
+                                                  !isRight &&
+                                                  clickedNode &&
+                                                  clickedNode.NodeId !== nodeInfo.NodeId
+                                              }
+                                          />
+                                      );
+                                  }
+                              })}
+                    </div>
+                </div>
+            );
+        });
+
+        if (filter === PROBLEMS && problemNodesCount === 0) {
+            return <div className="no-problem" />;
+        } 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={createHref(routes.node, {
+                                                id: clickedNode.NodeId,
+                                                activeTab: 'storage',
+                                            })}
+                                        >
+                                            {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;
+        if (loading && !wasLoaded) {
+            return Network.renderLoader();
+        } else if (error) {
+            return <div>{error.statusText}</div>;
+        } else {
+            return this.renderContent();
+        }
+    }
+}
+
+const mapStateToProps = (state) => {
+    const {wasLoaded, loading, data: netWorkInfo} = state.network;
+    return {
+        netWorkInfo,
+        wasLoaded,
+        loading,
+        filter: state.settings.problemFilter,
+    };
+};
+
+const mapDispatchToProps = {
+    getNetworkInfo,
+    hideTooltip,
+    showTooltip,
+    changeFilter,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Network);

package/dist/containers/Tenant/Network/Network.scss

@@ -0,0 +1,145 @@
+@import '../../../styles/mixins.scss';
+
+.network {
+    @include container-fluid();
+    font-size: var(--yc-text-body2-font-size);
+    line-height: var(--yc-text-body2-line-height);
+    max-width: 1305px;
+    display: flex;
+    @include flex-container();
+    overflow: auto;
+    justify-content: space-between;
+
+    &__problem-filter {
+        margin-right: 15px;
+    }
+
+    &__nodes-row {
+        display: flex;
+        @include flex-container();
+        overflow: auto;
+        flex-direction: row;
+        height: 100%;
+        align-items: flex-start;
+    }
+
+    &__inner {
+        @include flex-container();
+        overflow: auto;
+    }
+
+    &__right {
+        width: 100%;
+        height: 100%;
+        padding-left: 55px;
+    }
+
+    &__left {
+        padding-right: 55px;
+        border-right: 1px solid var(--yc-color-base-generic-accent);
+        height: 100%;
+    }
+
+    &__placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        flex-grow: 1;
+        height: 100%;
+    }
+
+    &__placeholder-text {
+        margin-top: 15px;
+    }
+
+    &__placeholder-img {
+        color: transparent;
+    }
+
+    &__nodes {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    &__nodes-container {
+        min-width: 325px;
+
+        &_right {
+            margin-right: 60px;
+        }
+    }
+
+    &__nodes-title {
+        color: var(--yc-color-text-secondary);
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        border-bottom: 1px solid var(--yc-color-base-generic-accent);
+        margin: 0 0 15px 0;
+    }
+
+    &__link {
+        color: var(--yc-color-base-special);
+        text-decoration: none;
+    }
+
+    &__title {
+        font-size: var(--yc-text-body-font-size);
+        font-weight: 500;
+        line-height: var(--yc-text-body-line-height);
+        margin: 20px 0;
+    }
+
+    &__checkbox-wrapper {
+        display: flex;
+        align-items: center;
+        margin-right: 10px;
+        label {
+            white-space: nowrap;
+        }
+    }
+
+    &__label {
+        margin: 25px 0 16px 0;
+    }
+
+    &__controls {
+        display: flex;
+        align-items: center;
+        margin-bottom: 13px;
+        margin-top: 15px;
+        margin-right: 144px;
+
+        & .radiobox {
+            margin-right: 15px;
+        }
+    }
+
+    &__controls-wrapper {
+        display: flex;
+        align-items: center;
+        @include flex-container();
+        flex-direction: row;
+    }
+
+    &__select {
+        max-width: 115px;
+        margin: 0 15px;
+    }
+
+    &__rack-column {
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.07);
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        padding: 2px;
+        margin-right: 5px;
+        margin-bottom: 5px;
+
+        .node-network {
+            margin-right: 0;
+        }
+    }
+}