feat: use VirtualTable in Nodes and Diagnostics (#678)

Author: artemmufazalov

src/components/VirtualTable/useIntersectionObserver.ts

@@ -6,6 +6,7 @@ import {DEFAULT_INTERSECTION_OBSERVER_MARGIN} from './constants';
 interface UseIntersectionObserverProps {
     onEntry: OnEntry;
     onLeave: OnLeave;
+    /** Intersection observer calculate margins based on container element properties */
     parentContainer?: Element | null;
 }
 

src/containers/Node/Node.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import {useEffect, useMemo, useRef} from 'react';
 import {useLocation, useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
 import {useDispatch} from 'react-redux';
@@ -8,7 +8,7 @@ import {Link} from 'react-router-dom';
 
 import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE} from './NodePages';
 import {Tablets} from '../Tablets';
-import {Storage} from '../Storage/Storage';
+import {StorageWrapper} from '../Storage/StorageWrapper';
 import NodeStructure from './NodeStructure/NodeStructure';
 import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
@@ -38,6 +38,8 @@ interface NodeProps {
 }
 
 function Node(props: NodeProps) {
+    const container = useRef<HTMLDivElement>(null);
+
     const dispatch = useDispatch();
     const location = useLocation();
 
@@ -50,7 +52,7 @@ function Node(props: NodeProps) {
     const {id: nodeId, activeTab} = match.params;
     const {tenantName: tenantNameFromQuery} = parseQuery(location);
 
-    const {activeTabVerified, nodeTabs} = React.useMemo(() => {
+    const {activeTabVerified, nodeTabs} = useMemo(() => {
         const hasStorage = node?.Roles?.find((el) => el === STORAGE_ROLE);
 
         let actualActiveTab = activeTab;
@@ -69,7 +71,7 @@ function Node(props: NodeProps) {
         return {activeTabVerified: actualActiveTab, nodeTabs: actualNodeTabs};
     }, [activeTab, node]);
 
-    React.useEffect(() => {
+    useEffect(() => {
         const tenantName = node?.Tenants?.[0] || tenantNameFromQuery?.toString();
 
         dispatch(
@@ -81,7 +83,7 @@ function Node(props: NodeProps) {
         );
     }, [dispatch, node, nodeId, tenantNameFromQuery]);
 
-    React.useEffect(() => {
+    useEffect(() => {
         const fetchData = () => dispatch(getNodeInfo(nodeId));
         fetchData();
         autofetcher.start();
@@ -119,7 +121,7 @@ function Node(props: NodeProps) {
             case STORAGE: {
                 return (
                     <div className={b('storage')}>
-                        <Storage nodeId={nodeId} />
+                        <StorageWrapper nodeId={nodeId} parentContainer={container.current} />
                     </div>
                 );
             }
@@ -146,7 +148,7 @@ function Node(props: NodeProps) {
     } else {
         if (node) {
             return (
-                <div className={b(null, props.className)}>
+                <div className={b(null, props.className)} ref={container}>
                     <BasicNodeViewer
                         node={node}
                         additionalNodesProps={props.additionalNodesProps}

src/containers/Nodes/NodesWrapper.tsx

@@ -6,6 +6,7 @@ import {VirtualNodes} from './VirtualNodes';
 import {Nodes} from './Nodes';
 
 interface NodesWrapperProps {
+    path?: string;
     parentContainer?: Element | null;
     additionalNodesProps?: AdditionalNodesProps;
 }

src/containers/Nodes/VirtualNodes.tsx

@@ -38,34 +38,36 @@ import './Nodes.scss';
 const b = cn('ydb-nodes');
 
 interface NodesProps {
+    path?: string;
     parentContainer?: Element | null;
     additionalNodesProps?: AdditionalNodesProps;
 }
 
-export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps) => {
+export const VirtualNodes = ({path, parentContainer, additionalNodesProps}: NodesProps) => {
     const [searchValue, setSearchValue] = useState('');
     const [problemFilter, setProblemFilter] = useState<ProblemFilterValue>(ProblemFilterValues.ALL);
     const [uptimeFilter, setUptimeFilter] = useState<NodesUptimeFilterValues>(
         NodesUptimeFilterValues.All,
     );
 
     const filters = useMemo(() => {
-        return [searchValue, problemFilter, uptimeFilter];
-    }, [searchValue, problemFilter, uptimeFilter]);
+        return [path, searchValue, problemFilter, uptimeFilter];
+    }, [path, searchValue, problemFilter, uptimeFilter]);
 
     const fetchData = useCallback<FetchData<NodesPreparedEntity>>(
         async (limit, offset, {sortOrder, columnId} = {}) => {
             return await getNodes({
                 limit,
                 offset,
+                path,
                 filter: searchValue,
                 problems_only: getProblemParamValue(problemFilter),
                 uptime: getUptimeParamValue(uptimeFilter),
                 sortOrder,
                 sortValue: columnId as NodesSortValue,
             });
         },
-        [problemFilter, searchValue, uptimeFilter],
+        [path, problemFilter, searchValue, uptimeFilter],
     );
 
     const getRowClassName: GetRowClassName<NodesPreparedEntity> = (row) => {

src/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -45,7 +45,8 @@
                 padding-top: 0;
             }
 
-            .data-table__sticky_moving {
+            .data-table__sticky_moving,
+            .ydb-virtual-table__head {
                 top: 46px !important;
             }
         }

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -1,4 +1,4 @@
-import {useMemo} from 'react';
+import {useMemo, useRef} from 'react';
 import qs from 'qs';
 import cn from 'bem-cn-lite';
 import {Link} from 'react-router-dom';
@@ -20,8 +20,8 @@ import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/consta
 import {Loader} from '../../../components/Loader';
 
 import {Heatmap} from '../../Heatmap';
-import {Nodes} from '../../Nodes';
-import {Storage} from '../../Storage/Storage';
+import {NodesWrapper} from '../../Nodes/NodesWrapper';
+import {StorageWrapper} from '../../Storage/StorageWrapper';
 import {Tablets} from '../../Tablets';
 
 import Describe from './Describe/Describe';
@@ -49,6 +49,8 @@ interface DiagnosticsProps {
 const b = cn('kv-tenant-diagnostics');
 
 function Diagnostics(props: DiagnosticsProps) {
+    const container = useRef<HTMLDivElement>(null);
+
     const dispatch = useDispatch();
     const {currentSchemaPath, autorefresh, wasLoaded} = useSelector((state: any) => state.schema);
     const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector(
@@ -121,17 +123,20 @@ function Diagnostics(props: DiagnosticsProps) {
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.nodes: {
                 return (
-                    <Nodes
+                    <NodesWrapper
                         path={currentSchemaPath}
                         additionalNodesProps={props.additionalNodesProps}
+                        parentContainer={container.current}
                     />
                 );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.tablets: {
                 return <Tablets path={currentSchemaPath} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
-                return <Storage tenant={tenantNameString} />;
+                return (
+                    <StorageWrapper tenant={tenantNameString} parentContainer={container.current} />
+                );
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.network: {
                 return <Network path={tenantNameString} />;
@@ -196,7 +201,7 @@ function Diagnostics(props: DiagnosticsProps) {
     }
 
     return (
-        <div className={b()}>
+        <div className={b()} ref={container}>
             {renderTabs()}
             <div className={b('page-wrapper')}>{renderTabContent()}</div>
         </div>

src/containers/UserSettings/i18n/en.json

@@ -19,7 +19,7 @@
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
   "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It could return incorrect data on some versions",
 
-  "settings.useVirtualTables.title": "Use table with data load on scroll for Nodes and Storage cluster tabs",
+  "settings.useVirtualTables.title": "Use table with data load on scroll for Nodes and Storage tabs",
   "settings.useVirtualTables.popover": "It will increase performance, but could work unstable",
 
   "settings.queryUseMultiSchema.title": "Allow queries with multiple result sets",

src/containers/UserSettings/i18n/ru.json

@@ -19,7 +19,7 @@
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
   "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на некоторых версиях",
 
-  "settings.useVirtualTables.title": "Использовать таблицу с загрузкой данных по скроллу для вкладок Nodes и Storage кластера",
+  "settings.useVirtualTables.title": "Использовать таблицу с загрузкой данных по скроллу для вкладок Nodes и Storage",
   "settings.useVirtualTables.popover": "Это улучшит производительность, но может работать нестабильно",
 
   "settings.queryUseMultiSchema.title": "Разрешить запросы с несколькими результатами",