Merge pull request #374 from bartoval/refactor_queries

refactor(General): ♻️ Support api queries with multivalues

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<string, string | number | SortDirection | undefined> {
+export interface RequestOptions extends Record<string, string | string[] | number | SortDirection | undefined> {
   filter?: string;
   offset?: number;
   limit?: number;

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 (
     <MainContainer
@@ -49,7 +48,7 @@ const ProcessGroups = function () {
           rows={components}
           pagination={true}
           paginationPageSize={BIG_PAGINATION_SIZE}
-          paginationTotalRows={processGroupsCount}
+          paginationTotalRows={componentsCount}
           onGetFilters={handleGetFilters}
           customCells={CustomComponentCells}
         />

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,50 +17,28 @@ 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
 };
 
 const Processes = function () {
   const [externalProcessesQueryParams, setExternalProcessesQueryParams] = useState<RequestOptions>(
     initExternalProcessesQueryParams
   );
-  const [remoteProcessesQueryParams, setRemoteProcessesQueryParams] =
-    useState<RequestOptions>(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 (
     <MainContainer

src/pages/Topology/components/TopologyProcessGroups.tsx

@@ -31,19 +31,13 @@ import {
 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 DisplayResources from './DisplayResources';
 import { TopologyController } from '../services';
 import { TopologyLabels, QueriesTopology } from '../Topology.enum';
 
-const externalProcessGroupsQueryParams = {
-  processGroupRole: 'external',
-  endTime: 0
-};
-
-const remoteProcessGroupsQueryParams = {
-  processGroupRole: 'remote',
+const processGroupsQueryParams = {
+  processGroupRole: ['remote', 'external'],
   endTime: 0
 };
 
@@ -61,18 +55,14 @@ const TopologyProcessGroups: FC<{ id?: string; GraphComponent?: ComponentType<Gr
 
   const graphRef = useRef<GraphReactAdaptorExposedMethods>();
 
-  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<Gr
     setMoveToNodeSelected(checked);
   }, []);
 
-  if (!processGroups || !processGroupsPairs || !remoteProcessGroups) {
-    return <LoadingPage />;
-  }
-
-  const nodes = TopologyController.convertProcessGroupsToNodes([
-    ...processGroups.results,
-    ...remoteProcessGroups.results
-  ]);
+  const nodes = TopologyController.convertProcessGroupsToNodes([...processGroups.results]);
   const links = TopologyController.convertPairsToEdges(processGroupsPairs);
 
   let filteredLinks = links;

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 && (
           <ModalComponent
             ids={modalType?.id}
-            items={
-              modalType?.type === 'process'
-                ? [...(remoteProcesses || []), ...(externalProcesses || [])]
-                : processesPairs || []
-            }
+            items={modalType?.type === 'process' ? processes : processesPairs}
             modalType={modalType.type}
           />
         )}