Skip to content

Commit

Permalink
refactor(Topology): ♻️ Tune maxIteration for more than 1k nodes
Browse files Browse the repository at this point in the history
  • Loading branch information
@bartoval
bartoval committed Nov 28, 2023
1 parent 12e301d commit 9262561
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 96 deletions.
10 changes: 7 additions & 3 deletions src/core/components/Graph/ReactAdaptor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const GraphReactAdaptor: FC<GraphReactAdaptorProps> = memo(

useImperativeHandle(ref, () => ({
saveNodePositions() {
savePositions();
Promise.resolve(savePositions());
},

fitView() {
Expand Down Expand Up @@ -348,7 +348,7 @@ const GraphReactAdaptor: FC<GraphReactAdaptorProps> = memo(
}, [handleMouseEnter]);

const handleBeforeDestroy = useCallback(() => {
savePositions();
Promise.resolve(savePositions());
}, [savePositions]);

const bindEvents = useCallback(() => {
Expand Down Expand Up @@ -440,7 +440,11 @@ const GraphReactAdaptor: FC<GraphReactAdaptorProps> = memo(
container: $node,
fitView: true,
fitViewPadding: 20,
layout: { ...DEFAULT_LAYOUT_FORCE_CONFIG, center: [0, 0] },
layout: {
...DEFAULT_LAYOUT_FORCE_CONFIG,
center: [0, 0],
maxIteration: GraphController.calculateMaxIteration(nodes)
},
...DEFAULT_GRAPH_CONFIG
};

Expand Down
15 changes: 14 additions & 1 deletion src/core/components/Graph/services/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,5 +102,18 @@ export const GraphController = {
),
edges: JSON.parse(JSON.stringify(GraphController.sanitizeEdges(nodes, edges))),
combos: combos ? JSON.parse(JSON.stringify(combos)) : undefined
})
}),
calculateMaxIteration: (nodes: GraphNode[]) => {
const nodesLength = nodes.length;

if (nodesLength > 800) {
return 200;
}

if (nodesLength > 500) {
return 700;
}

return 1000;
}
};
44 changes: 25 additions & 19 deletions src/pages/Topology/components/TopologyProcessGroups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { GraphNode, GraphReactAdaptorExposedMethods } from '@core/components/Gra
import GraphReactAdaptor from '@core/components/Graph/ReactAdaptor';
import NavigationViewLink from '@core/components/NavigationViewLink';
import { ProcessGroupsRoutesPaths, QueriesProcessGroups } from '@pages/ProcessGroups/ProcessGroups.enum';
import LoadingPage from '@pages/shared/Loading';

import DisplayResource from './DisplayResources';
import { TopologyController } from '../services';
Expand All @@ -32,25 +33,26 @@ const TopologyProcessGroups: FC<{ id?: string }> = function ({ id: componentId }
const [componentIdSelected, setComponentIdSelected] = useState<string | undefined>(componentId);
const graphRef = useRef<GraphReactAdaptorExposedMethods>();

const [{ data: processGroups }, { data: remoteProcessGroups }, { data: processGroupsPairs }] = useQueries({
queries: [
{
queryKey: [QueriesProcessGroups.GetProcessGroups, processGroupsQueryParams],
queryFn: () => RESTApi.fetchProcessGroups(processGroupsQueryParams),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesProcessGroups.GetRemoteProcessGroup, remoteProcessesQueryParams],
queryFn: () => RESTApi.fetchProcessGroups(remoteProcessesQueryParams),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesTopology.GetProcessGroupsPairs],
queryFn: () => RESTApi.fetchProcessGroupsPairs(),
refetchInterval: UPDATE_INTERVAL
}
]
});
const [{ data: processGroups }, { data: remoteProcessGroups }, { data: processGroupsPairs, isFetchedAfterMount }] =
useQueries({
queries: [
{
queryKey: [QueriesProcessGroups.GetProcessGroups, processGroupsQueryParams],
queryFn: () => RESTApi.fetchProcessGroups(processGroupsQueryParams),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesProcessGroups.GetRemoteProcessGroup, remoteProcessesQueryParams],
queryFn: () => RESTApi.fetchProcessGroups(remoteProcessesQueryParams),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesTopology.GetProcessGroupsPairs],
queryFn: () => RESTApi.fetchProcessGroupsPairs(),
refetchInterval: UPDATE_INTERVAL
}
]
});

const handleComponentSelected = useCallback((id?: string) => {
setComponentIdSelected(id);
Expand Down Expand Up @@ -78,6 +80,10 @@ const TopologyProcessGroups: FC<{ id?: string }> = function ({ id: componentId }
]);
const links = TopologyController.convertPairsToEdges(processGroupsPairs);

if (!nodes?.length && !isFetchedAfterMount) {
return <LoadingPage />;
}

return (
<Stack>
<StackItem>
Expand Down
59 changes: 34 additions & 25 deletions src/pages/Topology/components/TopologyProcesses.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
import GraphReactAdaptor from '@core/components/Graph/ReactAdaptor';
import NavigationViewLink from '@core/components/NavigationViewLink';
import { ProcessesRoutesPaths, QueriesProcesses } from '@pages/Processes/Processes.enum';
import LoadingPage from '@pages/shared/Loading';
import { SitesRoutesPaths, QueriesSites } from '@pages/Sites/Sites.enum';

import DisplayOptions from './DisplayOptions';
Expand Down Expand Up @@ -96,31 +97,35 @@ const TopologyProcesses: FC<{

const graphRef = useRef<GraphReactAdaptorExposedMethods>();

const [{ data: sites }, { data: externalProcesses }, { data: remoteProcesses }, { data: processesPairs }] =
useQueries({
queries: [
{
queryKey: [QueriesSites.GetSites],
queryFn: () => RESTApi.fetchSites(),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesProcesses.GetProcessResult, externalProcessesQueryParams],
queryFn: () => RESTApi.fetchProcessesResult(externalProcessesQueryParams),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesProcesses.GetProcessResult, remoteProcessesQueryParams],
queryFn: () => RESTApi.fetchProcessesResult(remoteProcessesQueryParams),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesTopology.GetProcessesPairs],
queryFn: () => RESTApi.fetchProcessesPairsResult(),
refetchInterval: UPDATE_INTERVAL
}
]
});
const [
{ data: sites },
{ data: externalProcesses },
{ data: remoteProcesses },
{ data: processesPairs, isFetchedAfterMount }
] = useQueries({
queries: [
{
queryKey: [QueriesSites.GetSites],
queryFn: () => RESTApi.fetchSites(),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesProcesses.GetProcessResult, externalProcessesQueryParams],
queryFn: () => RESTApi.fetchProcessesResult(externalProcessesQueryParams),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesProcesses.GetProcessResult, remoteProcessesQueryParams],
queryFn: () => RESTApi.fetchProcessesResult(remoteProcessesQueryParams),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesTopology.GetProcessesPairs],
queryFn: () => RESTApi.fetchProcessesPairsResult(),
refetchInterval: UPDATE_INTERVAL
}
]
});

const isDisplayOptionActive = useCallback(
(option: string) => displayOptionsSelected.includes(option),
Expand Down Expand Up @@ -403,6 +408,10 @@ const TopologyProcesses: FC<{
</Toolbar>
);

if (!nodes?.length && !isFetchedAfterMount) {
return <LoadingPage />;
}

return (
<>
<Stack data-testid="sk-topology-processes">
Expand Down
106 changes: 58 additions & 48 deletions src/pages/Topology/components/TopologySite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
} from '@core/components/Graph/Graph.interfaces';
import GraphReactAdaptor from '@core/components/Graph/ReactAdaptor';
import NavigationViewLink from '@core/components/NavigationViewLink';
import LoadingPage from '@pages/shared/Loading';
import { QueriesSites, SitesRoutesPaths } from '@pages/Sites/Sites.enum';

import DisplayOptions from './DisplayOptions';
Expand Down Expand Up @@ -56,54 +57,59 @@ const TopologySite: FC<{ id?: string | null; GraphComponent?: ComponentType<Grap
[displayOptionsSelected]
);

const [{ data: sites }, { data: routers }, { data: routerLinks }, { data: sitesPairs }, { data: metrics }] =
useQueries({
queries: [
{
queryKey: [QueriesSites.GetSites],
queryFn: () => RESTApi.fetchSites(),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesSites.GetRouters],
queryFn: () => RESTApi.fetchRouters(),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesSites.GetLinks],
queryFn: () => RESTApi.fetchLinks(),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesTopology.GetSitesPairs, isDisplayOptionActive(SHOW_DATA_LINKS)],
queryFn: () => (isDisplayOptionActive(SHOW_DATA_LINKS) ? RESTApi.fetchSitesPairs() : null),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [
QueriesTopology.GetBytesByProcessPairs,
isDisplayOptionActive(SHOW_LINK_BYTES),
isDisplayOptionActive(SHOW_LINK_BYTERATE),
isDisplayOptionActive(SHOW_LINK_LATENCY),
isDisplayOptionActive(SHOW_DATA_LINKS)
],
queryFn: () =>
isDisplayOptionActive(SHOW_DATA_LINKS)
? TopologyController.getMetrics({
showBytes: isDisplayOptionActive(SHOW_LINK_BYTES),
showByteRate: isDisplayOptionActive(SHOW_LINK_BYTERATE),
showLatency: isDisplayOptionActive(SHOW_LINK_LATENCY),
params: {
fetchBytes: { groupBy: 'destSite, sourceSite,direction' },
fetchByteRate: { groupBy: 'destSite, sourceSite,direction' },
fetchLatency: { groupBy: 'sourceSite, destSite' }
}
})
: null,
refetchInterval: UPDATE_INTERVAL
}
]
});
const [
{ data: sites, isFetchedAfterMount },
{ data: routers },
{ data: routerLinks },
{ data: sitesPairs },
{ data: metrics }
] = useQueries({
queries: [
{
queryKey: [QueriesSites.GetSites],
queryFn: () => RESTApi.fetchSites(),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesSites.GetRouters],
queryFn: () => RESTApi.fetchRouters(),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesSites.GetLinks],
queryFn: () => RESTApi.fetchLinks(),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [QueriesTopology.GetSitesPairs, isDisplayOptionActive(SHOW_DATA_LINKS)],
queryFn: () => (isDisplayOptionActive(SHOW_DATA_LINKS) ? RESTApi.fetchSitesPairs() : null),
refetchInterval: UPDATE_INTERVAL
},
{
queryKey: [
QueriesTopology.GetBytesByProcessPairs,
isDisplayOptionActive(SHOW_LINK_BYTES),
isDisplayOptionActive(SHOW_LINK_BYTERATE),
isDisplayOptionActive(SHOW_LINK_LATENCY),
isDisplayOptionActive(SHOW_DATA_LINKS)
],
queryFn: () =>
isDisplayOptionActive(SHOW_DATA_LINKS)
? TopologyController.getMetrics({
showBytes: isDisplayOptionActive(SHOW_LINK_BYTES),
showByteRate: isDisplayOptionActive(SHOW_LINK_BYTERATE),
showLatency: isDisplayOptionActive(SHOW_LINK_LATENCY),
params: {
fetchBytes: { groupBy: 'destSite, sourceSite,direction' },
fetchByteRate: { groupBy: 'destSite, sourceSite,direction' },
fetchLatency: { groupBy: 'sourceSite, destSite' }
}
})
: null,
refetchInterval: UPDATE_INTERVAL
}
]
});

const handleGetSelectedNode = useCallback(
({ id: idSelected }: GraphNode) => {
Expand Down Expand Up @@ -249,6 +255,10 @@ const TopologySite: FC<{ id?: string | null; GraphComponent?: ComponentType<Grap
</Toolbar>
);

if (!nodes?.length && !isFetchedAfterMount) {
return <LoadingPage />;
}

return (
<Stack>
<StackItem>
Expand Down

0 comments on commit 9262561

Please sign in to comment.