diff --git a/src/API/REST.interfaces.ts b/src/API/REST.interfaces.ts index f90f3286..c3cf232a 100644 --- a/src/API/REST.interfaces.ts +++ b/src/API/REST.interfaces.ts @@ -5,7 +5,7 @@ import { AvailableProtocols, FlowDirection, SortDirection } from './REST.enum'; export type FetchWithOptions = AxiosRequestConfig; export type FlowDirections = FlowDirection.Outgoing | FlowDirection.Incoming; -export interface RequestOptions extends Record { +export interface RequestOptions extends Record { filter?: string; offset?: number; limit?: number; diff --git a/src/pages/ProcessGroups/views/ProcessGroups.tsx b/src/pages/ProcessGroups/views/ProcessGroups.tsx index 7f45bb0d..cf76d401 100644 --- a/src/pages/ProcessGroups/views/ProcessGroups.tsx +++ b/src/pages/ProcessGroups/views/ProcessGroups.tsx @@ -14,7 +14,9 @@ import { CustomComponentCells, processGroupsColumns } from '../ProcessGroups.con import { ProcessGroupsLabels, QueriesProcessGroups } from '../ProcessGroups.enum'; const initComponentsQueryParams = { - limit: BIG_PAGINATION_SIZE + limit: BIG_PAGINATION_SIZE, + processGroupRole: ['remote', 'external'], + endTime: 0 }; const ProcessGroups = function () { @@ -31,11 +33,8 @@ const ProcessGroups = function () { }); }, []); - const componentsNoFiltered = - componentsData?.results.filter(({ processGroupRole }) => processGroupRole !== 'internal') || []; - const processGroupsCount = componentsData?.timeRangeCount; - - const components = componentsNoFiltered.filter(({ processGroupRole }) => processGroupRole !== 'internal'); + const components = componentsData?.results; + const componentsCount = componentsData?.timeRangeCount; return ( diff --git a/src/pages/Processes/views/Processes.tsx b/src/pages/Processes/views/Processes.tsx index 6ed2aeb0..ae2b17d0 100644 --- a/src/pages/Processes/views/Processes.tsx +++ b/src/pages/Processes/views/Processes.tsx @@ -1,6 +1,6 @@ import { startTransition, useCallback, useState } from 'react'; -import { useSuspenseQueries } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { RESTApi } from '@API/REST.api'; import { BIG_PAGINATION_SIZE } from '@config/config'; @@ -17,13 +17,7 @@ import { ProcessesLabels, QueriesProcesses } from '../Processes.enum'; //TODO: currently we can't query filter for a multivalue and we need to call separate queries, merge and sort them locally const initExternalProcessesQueryParams = { limit: BIG_PAGINATION_SIZE, - processRole: 'external', - endTime: 0 -}; - -const initRemoteProcessesQueryParams = { - limit: BIG_PAGINATION_SIZE, - processRole: 'remote', + processRole: ['remote', 'external'], endTime: 0 }; @@ -31,36 +25,20 @@ const Processes = function () { const [externalProcessesQueryParams, setExternalProcessesQueryParams] = useState( initExternalProcessesQueryParams ); - const [remoteProcessesQueryParams, setRemoteProcessesQueryParams] = - useState(initRemoteProcessesQueryParams); - const [{ data: externalProcessData }, { data: remoteProcessData }] = useSuspenseQueries({ - queries: [ - { - queryKey: [QueriesProcesses.GetProcessesPaginated, externalProcessesQueryParams], - queryFn: () => RESTApi.fetchProcesses(externalProcessesQueryParams) - }, - { - queryKey: [QueriesProcesses.GetRemoteProcessesPaginated, remoteProcessesQueryParams], - queryFn: () => RESTApi.fetchProcesses(remoteProcessesQueryParams) - } - ] + const { data: externalProcessData } = useSuspenseQuery({ + queryKey: [QueriesProcesses.GetProcessesPaginated, externalProcessesQueryParams], + queryFn: () => RESTApi.fetchProcesses(externalProcessesQueryParams) }); const handleGetFilters = useCallback((params: RequestOptions) => { startTransition(() => { setExternalProcessesQueryParams((previousQueryParams) => ({ ...previousQueryParams, ...params })); - setRemoteProcessesQueryParams((previousQueryParams) => ({ ...previousQueryParams, ...params })); }); }, []); - const externalProcesses = externalProcessData?.results || []; - const externalProcessesCount = externalProcessData?.timeRangeCount || 0; - const remotelProcesses = remoteProcessData?.results || []; - const remoteProcessesCount = remoteProcessData?.timeRangeCount || 0; - - const processes = [...externalProcesses, ...remotelProcesses]; - const processesCount = externalProcessesCount + remoteProcessesCount; + const processes = externalProcessData?.results || []; + const processesCount = externalProcessData?.timeRangeCount || 0; return ( (); - const [{ data: processGroups }, { data: remoteProcessGroups }, { data: processGroupsPairs }] = useSuspenseQueries({ + const [{ data: processGroups }, { data: processGroupsPairs }] = useSuspenseQueries({ queries: [ { - queryKey: [QueriesProcessGroups.GetProcessGroups, externalProcessGroupsQueryParams], - queryFn: () => RESTApi.fetchProcessGroups(externalProcessGroupsQueryParams), - refetchInterval: UPDATE_INTERVAL - }, - { - queryKey: [QueriesProcessGroups.GetRemoteProcessGroup, remoteProcessGroupsQueryParams], - queryFn: () => RESTApi.fetchProcessGroups(remoteProcessGroupsQueryParams), + queryKey: [QueriesProcessGroups.GetProcessGroups, processGroupsQueryParams], + queryFn: () => RESTApi.fetchProcessGroups(processGroupsQueryParams), refetchInterval: UPDATE_INTERVAL }, + { queryKey: [QueriesTopology.GetProcessGroupsPairs], queryFn: () => RESTApi.fetchProcessGroupsPairs(), @@ -125,14 +115,7 @@ const TopologyProcessGroups: FC<{ id?: string; GraphComponent?: ComponentType; - } - - const nodes = TopologyController.convertProcessGroupsToNodes([ - ...processGroups.results, - ...remoteProcessGroups.results - ]); + const nodes = TopologyController.convertProcessGroupsToNodes([...processGroups.results]); const links = TopologyController.convertPairsToEdges(processGroupsPairs); let filteredLinks = links; diff --git a/src/pages/Topology/components/TopologyProcesses.tsx b/src/pages/Topology/components/TopologyProcesses.tsx index bb2b6b56..61ee1c1d 100644 --- a/src/pages/Topology/components/TopologyProcesses.tsx +++ b/src/pages/Topology/components/TopologyProcesses.tsx @@ -69,13 +69,8 @@ const DISPLAY_OPTIONS = 'display-options'; const SERVICE_OPTIONS = 'service-options'; const DEFAULT_DISPLAY_OPTIONS_ENABLED = [SHOW_SITE_KEY]; -const externalProcessesQueryParams = { - processRole: 'external', - endTime: 0 -}; - -const remoteProcessesQueryParams = { - processRole: 'remote', +const processesQueryParams = { + processRole: ['remote', 'external'], endTime: 0 }; @@ -117,42 +112,37 @@ const TopologyProcesses: FC<{ [displayOptionsSelected] ); - const [{ data: externalProcesses }, { data: remoteProcesses }, { data: processesPairs }, { data: metrics }] = - useSuspenseQueries({ - queries: [ - { - 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 - }, - { - queryKey: [ - QueriesTopology.GetBytesByProcessPairs, - isDisplayOptionActive(SHOW_LINK_BYTES), - isDisplayOptionActive(SHOW_LINK_BYTERATE), - isDisplayOptionActive(SHOW_LINK_LATENCY) - ], - queryFn: () => - TopologyController.getMetrics({ - showBytes: isDisplayOptionActive(SHOW_LINK_BYTES), - showByteRate: isDisplayOptionActive(SHOW_LINK_BYTERATE), - showLatency: isDisplayOptionActive(SHOW_LINK_LATENCY), - params: metricQueryParams - }), - refetchInterval: UPDATE_INTERVAL - } - ] - }); + const [{ data: processes }, { data: processesPairs }, { data: metrics }] = useSuspenseQueries({ + queries: [ + { + queryKey: [QueriesProcesses.GetProcessResult, processesQueryParams], + queryFn: () => RESTApi.fetchProcessesResult(processesQueryParams), + refetchInterval: UPDATE_INTERVAL + }, + + { + queryKey: [QueriesTopology.GetProcessesPairs], + queryFn: () => RESTApi.fetchProcessesPairsResult(), + refetchInterval: UPDATE_INTERVAL + }, + { + queryKey: [ + QueriesTopology.GetBytesByProcessPairs, + isDisplayOptionActive(SHOW_LINK_BYTES), + isDisplayOptionActive(SHOW_LINK_BYTERATE), + isDisplayOptionActive(SHOW_LINK_LATENCY) + ], + queryFn: () => + TopologyController.getMetrics({ + showBytes: isDisplayOptionActive(SHOW_LINK_BYTES), + showByteRate: isDisplayOptionActive(SHOW_LINK_BYTERATE), + showLatency: isDisplayOptionActive(SHOW_LINK_LATENCY), + params: metricQueryParams + }), + refetchInterval: UPDATE_INTERVAL + } + ] + }); const addAlert = (title: string, variant: AlertProps['variant'], key: Key) => { setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]); @@ -302,10 +292,10 @@ const TopologyProcesses: FC<{ } let pPairs = processesPairs; - let processes = [...externalProcesses, ...remoteProcesses]; + let p = processes; if (serviceIdsSelected) { - const serverIds = processes + const serverIds = p // the format of one address is serviceName@seviceId@protocol .filter(({ addresses }) => addresses?.map((address) => address.split('@')[1]).some((address) => serviceIdsSelected.includes(address)) @@ -315,9 +305,9 @@ const TopologyProcesses: FC<{ pPairs = pPairs.filter((pair) => serverIds.includes(pair.destinationId)); const processIdsFromService = pPairs?.flatMap(({ sourceId, destinationId }) => [sourceId, destinationId]); - processes = processes.filter(({ identity }) => processIdsFromService.includes(identity)); + p = p.filter(({ identity }) => processIdsFromService.includes(identity)); } - let processNodes = TopologyController.convertProcessesToNodes(processes); + let processNodes = TopologyController.convertProcessesToNodes(p); let processPairEdges = addMetricsToEdges(TopologyController.convertPairsToEdges(pPairs)); if (processNodes.length > MAX_NODE_COUNT_WITHOUT_AGGREGATION) { @@ -343,9 +333,8 @@ const TopologyProcesses: FC<{ ); setGroups(nodeGroups); }, [ - externalProcesses, + processes, processesPairs, - remoteProcesses, isDisplayOptionActive, serviceIdsSelected, metrics?.bytesByProcessPairs, @@ -503,11 +492,7 @@ const TopologyProcesses: FC<{ {modalType?.type && ( )}