From 7260607940b31beca2c90630b8173480703fdfa1 Mon Sep 17 00:00:00 2001 From: mufazalov Date: Mon, 29 Jan 2024 14:27:47 +0300 Subject: [PATCH] feat: use VirtualTable in Nodes and Diagnostics --- .../VirtualTable/useIntersectionObserver.ts | 1 + src/containers/Node/Node.tsx | 16 +++++++++------- src/containers/Nodes/NodesWrapper.tsx | 1 + src/containers/Nodes/VirtualNodes.tsx | 10 ++++++---- .../Tenant/Diagnostics/Diagnostics.scss | 3 ++- .../Tenant/Diagnostics/Diagnostics.tsx | 17 +++++++++++------ src/containers/UserSettings/i18n/en.json | 2 +- src/containers/UserSettings/i18n/ru.json | 2 +- 8 files changed, 32 insertions(+), 20 deletions(-) diff --git a/src/components/VirtualTable/useIntersectionObserver.ts b/src/components/VirtualTable/useIntersectionObserver.ts index 24dbe116d7..2913f282d1 100644 --- a/src/components/VirtualTable/useIntersectionObserver.ts +++ b/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; } diff --git a/src/containers/Node/Node.tsx b/src/containers/Node/Node.tsx index a884c46735..9d735e0e19 100644 --- a/src/containers/Node/Node.tsx +++ b/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(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 (
- +
); } @@ -146,7 +148,7 @@ function Node(props: NodeProps) { } else { if (node) { return ( -
+
{ +export const VirtualNodes = ({path, parentContainer, additionalNodesProps}: NodesProps) => { const [searchValue, setSearchValue] = useState(''); const [problemFilter, setProblemFilter] = useState(ProblemFilterValues.ALL); const [uptimeFilter, setUptimeFilter] = useState( @@ -50,14 +51,15 @@ export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps ); const filters = useMemo(() => { - return [searchValue, problemFilter, uptimeFilter]; - }, [searchValue, problemFilter, uptimeFilter]); + return [path, searchValue, problemFilter, uptimeFilter]; + }, [path, searchValue, problemFilter, uptimeFilter]); const fetchData = useCallback>( async (limit, offset, {sortOrder, columnId} = {}) => { return await getNodes({ limit, offset, + path, filter: searchValue, problems_only: getProblemParamValue(problemFilter), uptime: getUptimeParamValue(uptimeFilter), @@ -65,7 +67,7 @@ export const VirtualNodes = ({parentContainer, additionalNodesProps}: NodesProps sortValue: columnId as NodesSortValue, }); }, - [problemFilter, searchValue, uptimeFilter], + [path, problemFilter, searchValue, uptimeFilter], ); const getRowClassName: GetRowClassName = (row) => { diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.scss b/src/containers/Tenant/Diagnostics/Diagnostics.scss index 035bd28acc..64bbdcaf71 100644 --- a/src/containers/Tenant/Diagnostics/Diagnostics.scss +++ b/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; } } diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx index b4e1d7fdd7..9b5107cc60 100644 --- a/src/containers/Tenant/Diagnostics/Diagnostics.tsx +++ b/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(null); + const dispatch = useDispatch(); const {currentSchemaPath, autorefresh, wasLoaded} = useSelector((state: any) => state.schema); const {diagnosticsTab = TENANT_DIAGNOSTICS_TABS_IDS.overview} = useTypedSelector( @@ -121,9 +123,10 @@ function Diagnostics(props: DiagnosticsProps) { } case TENANT_DIAGNOSTICS_TABS_IDS.nodes: { return ( - ); } @@ -131,7 +134,9 @@ function Diagnostics(props: DiagnosticsProps) { return ; } case TENANT_DIAGNOSTICS_TABS_IDS.storage: { - return ; + return ( + + ); } case TENANT_DIAGNOSTICS_TABS_IDS.network: { return ; @@ -196,7 +201,7 @@ function Diagnostics(props: DiagnosticsProps) { } return ( -
+
{renderTabs()}
{renderTabContent()}
diff --git a/src/containers/UserSettings/i18n/en.json b/src/containers/UserSettings/i18n/en.json index 1db384c378..a0e2e7ea81 100644 --- a/src/containers/UserSettings/i18n/en.json +++ b/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", diff --git a/src/containers/UserSettings/i18n/ru.json b/src/containers/UserSettings/i18n/ru.json index fd9f094977..4caa9e43d3 100644 --- a/src/containers/UserSettings/i18n/ru.json +++ b/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": "Разрешить запросы с несколькими результатами",