feat: new Node Structure view

Author: Raubzeug

src/assets/icons/question.svg

@@ -3,13 +3,12 @@
 .full-node-viewer {
     font-size: var(--yc-text-body2-font-size);
     line-height: var(--yc-text-body2-line-height);
-    @include container-fluid();
 
     &__title {
         margin: 0 20px 0 0;
 
         font-size: var(--yc-text-body2-font-size);
-        font-weight: 500;
+        font-weight: 600;
         line-height: var(--yc-text-body2-line-height);
         text-transform: uppercase;
     }
@@ -27,23 +26,19 @@
 
     &__common-info {
         display: flex;
+        flex-direction: column;
         justify-content: flex-start;
         align-items: stretch;
     }
 
     &__section {
-        margin-right: 20px;
-        padding: 15px;
-
         border-radius: 10px;
 
         &_pools {
             display: grid;
             grid-gap: 7px 20px;
 
             grid-template-columns: 110px 110px;
-
-            padding: 15px 15px 15px 0;
         }
     }
 
@@ -72,10 +67,10 @@
     }
 
     &__section-title {
-        margin: 15px 0 0;
+        margin: 15px 0 10px;
 
         font-size: var(--yc-text-body2-font-size);
-        font-weight: 500;
+        font-weight: 600;
         line-height: var(--yc-text-body2-line-height);
     }
 

src/components/FullNodeViewer/FullNodeViewer.scss

@@ -2,10 +2,10 @@
     font-size: var(--yc-text-body2-font-size);
     line-height: var(--yc-text-body2-line-height);
     &__title {
-        margin: 0 0 16px;
+        margin: 15px 0 10px;
 
         font-size: var(--yc-text-body2-font-size);
-        font-weight: 500;
+        font-weight: 600;
         line-height: var(--yc-text-body2-line-height);
     }
 

src/components/InfoViewer/InfoViewer.scss

@@ -171,3 +171,7 @@ body,
 .app_embedded {
     font-family: 'Rubik', sans-serif;
 }
+
+.yc-popup {
+    max-width: 500px;
+}

src/containers/App/App.scss

@@ -35,7 +35,6 @@ class Heatmap extends React.Component {
         hideTooltip: PropTypes.func,
         getTabletsInfo: PropTypes.func,
         nodeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        timeoutForRequest: PropTypes.number,
         path: PropTypes.string,
         clearWasLoadingFlag: PropTypes.func,
         metrics: PropTypes.array,

src/containers/AppIcons/AppIcons.js

@@ -7,22 +7,28 @@ import _ from 'lodash';
 import {Loader, Tabs} from '@yandex-cloud/uikit';
 import {withRouter, Link} from 'react-router-dom';
 
-import FullNodeViewer from '../../components/FullNodeViewer/FullNodeViewer';
-import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW} from './NodePages';
+import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE} from './NodePages';
 import Tablets from '../Tablets/Tablets';
 import Storage from '../Storage/Storage';
+import NodeOverview from './NodeOverview/NodeOverview';
+import NodeStructure from './NodeStructure/NodeStructure';
 
-import {getNodeInfo} from '../../store/reducers/node';
-import {NODE_AUTO_RELOAD_INTERVAL} from '../../utils/constants';
-import routes, {createHref} from '../../routes';
-import {backend} from '../../store';
+import {getNodeInfo, resetNode} from '../../store/reducers/node';
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+import {setHeader} from '../../store/reducers/header';
+import {AutoFetcher} from '../../utils/autofetcher';
 
 import './Node.scss';
 
 const b = cn('node');
 
 export const STORAGE_ROLE = 'Storage';
 
+const headerNodes = {
+    text: CLUSTER_PAGES.nodes.title,
+    link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
+};
+
 class Node extends React.Component {
     static renderLoader() {
         return (
@@ -54,17 +60,26 @@ class Node extends React.Component {
     };
 
     componentDidMount() {
-        const {id} = this.props.match.params;
+        const {setHeader} = this.props;
         this.setState({activeTab: this.props.activeTab});
-        this.props.getNodeInfo(id);
-        this.reloadDescriptor = setInterval(
-            () => this.props.getNodeInfo(id),
-            NODE_AUTO_RELOAD_INTERVAL,
-        );
+        this.fetchData();
+        this.autofetcher = new AutoFetcher();
+        this.autofetcher.fetch(() => this.fetchData());
+        setHeader([headerNodes]);
     }
 
-    componentDidUpdate() {
-        const {node} = this.props;
+    componentDidUpdate(prevProps) {
+        const prevId = prevProps.match.params.id;
+        const {id} = this.props.match.params;
+        const {resetNode} = this.props;
+        if (prevId !== id) {
+            resetNode();
+            this.fetchData();
+            this.autofetcher.stop();
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => this.fetchData());
+        }
+        const {node, setHeader} = this.props;
         let {activeTab} = this.props;
         if (node) {
             const hasStorage = _.find(node.Roles, (el) => el === STORAGE_ROLE);
@@ -76,13 +91,25 @@ class Node extends React.Component {
                     return {activeTab};
                 }
             });
+            setHeader([
+                headerNodes,
+                {
+                    text: node.Host,
+                },
+            ]);
         }
     }
 
     componentWillUnmount() {
-        clearInterval(this.reloadDescriptor);
+        this.autofetcher.stop();
     }
 
+    fetchData = () => {
+        const {id} = this.props.match.params;
+        const {getNodeInfo} = this.props;
+        getNodeInfo(id);
+    };
+
     renderTabs() {
         const {node} = this.props;
         const {id} = this.props.match.params;
@@ -116,6 +143,7 @@ class Node extends React.Component {
     renderTabContent() {
         const {activeTab} = this.state;
         const {id} = this.props.match.params;
+        const {additionalNodesInfo, node} = this.props;
 
         switch (activeTab) {
             case STORAGE: {
@@ -126,15 +154,35 @@ class Node extends React.Component {
                 );
             }
             case TABLETS: {
-                return <Tablets nodeId={id} />;
+                return <Tablets nodeId={id} className={b('node-page-wrapper')} />;
+            }
+
+            case OVERVIEW: {
+                return (
+                    <NodeOverview
+                        additionalNodesInfo={additionalNodesInfo}
+                        node={node}
+                        className={b('overview-wrapper')}
+                    />
+                );
+            }
+
+            case STRUCTURE: {
+                return (
+                    <NodeStructure
+                        className={b('node-page-wrapper')}
+                        nodeId={id}
+                        additionalNodesInfo={additionalNodesInfo}
+                    />
+                );
             }
             default:
                 return false;
         }
     }
 
     render() {
-        const {className, loading, wasLoaded, error, node, additionalNodesInfo} = this.props;
+        const {className, loading, wasLoaded, error, node} = this.props;
 
         if (loading && !wasLoaded) {
             return Node.renderLoader();
@@ -144,11 +192,6 @@ class Node extends React.Component {
             if (node) {
                 return (
                     <div className={`${b()} ${className}`}>
-                        <FullNodeViewer
-                            node={node}
-                            backend={backend}
-                            additionalNodesInfo={additionalNodesInfo}
-                        />
                         {this.renderTabs()}
 
                         <div className={b('content')}>{this.renderTabContent()}</div>
@@ -179,6 +222,8 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = {
     getNodeInfo,
+    setHeader,
+    resetNode,
 };
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Node));

src/containers/Heatmap/Heatmap.js

@@ -5,6 +5,8 @@
     @include flex-container();
 
     &__content {
+        position: relative;
+
         overflow: auto;
         @include flex-container();
     }
@@ -17,7 +19,8 @@
     }
 
     &__tabs {
-        padding: 0 15px;
+        padding: 16px 20px 0;
+        @include body2-typography();
     }
 
     &__tab {
@@ -33,4 +36,12 @@
             text-transform: uppercase;
         }
     }
+
+    &__overview-wrapper {
+        padding: 0 20px;
+    }
+
+    &__node-page-wrapper {
+        padding: 20px;
+    }
 }

src/containers/Node/Node.js

@@ -0,0 +1,23 @@
+
+//@ts-ignore
+import FullNodeViewer from '../../../components/FullNodeViewer/FullNodeViewer';
+import {backend} from '../../../store';
+
+interface NodeOverviewProps {
+    node: any;
+    additionalNodesInfo: any;
+    className?: string;
+}
+
+function NodeOverview({node, additionalNodesInfo, className}: NodeOverviewProps) {
+    return (
+        <FullNodeViewer
+            node={node}
+            backend={backend}
+            additionalNodesInfo={additionalNodesInfo}
+            className={className}
+        />
+    );
+}
+
+export default NodeOverview;