refactor(General): ♻️ Create hooks for data queries

skupperproject · Sep 14, 2024 · 99aca42 · 99aca42
1 parent 5bdede1
commit 99aca42
Show file tree

Hide file tree

Showing 64 changed files with 803 additions and 742 deletions.
diff --git a/...__/pages/Components/ProcessGroup.spec.tsx → ...sts__/pages/Components/Component.spec.tsx b/...__/pages/Components/ProcessGroup.spec.tsx → ...sts__/pages/Components/Component.spec.tsx
@@ -10,8 +10,8 @@ import { loadMockServer } from '../../../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../../../src/config/config';
 import { getTestsIds } from '../../../src/config/testIds';
 import { Wrapper } from '../../../src/core/components/Wrapper';
-import { ComponentLabels } from '../../../src/pages/ProcessGroups/ProcessGroups.enum';
-import ProcessGroup from '../../../src/pages/ProcessGroups/views/ProcessGroup';
+import { ComponentLabels } from '../../../src/pages/ProcessGroups/Components.enum';
+import Component from '../../../src/pages/ProcessGroups/views/Component';
 import LoadingPage from '../../../src/pages/shared/Loading';
 import { MetricsLabels } from '../../../src/pages/shared/Metrics/Metrics.enum';
 import { ProcessResponse, ComponentResponse } from '../../../src/types/REST.interfaces';
@@ -32,7 +32,7 @@ describe('Component component', () => {
     render(
       <Wrapper>
         <Suspense fallback={<LoadingPage />}>
-          <ProcessGroup />
+          <Component />
         </Suspense>
       </Wrapper>
     );

diff --git a/__tests__/pages/Components/ProcessGroups.spec.tsx b/__tests__/pages/Components/ProcessGroups.spec.tsx
@@ -8,7 +8,7 @@ import { loadMockServer } from '../../../mocks/server';
 import { waitForElementToBeRemovedTimeout } from '../../../src/config/config';
 import { getTestsIds } from '../../../src/config/testIds';
 import { Wrapper } from '../../../src/core/components/Wrapper';
-import Components from '../../../src/pages/ProcessGroups/views/ProcessGroups';
+import Components from '../../../src/pages/ProcessGroups/views/Components';
 import LoadingPage from '../../../src/pages/shared/Loading';
 
 const componentResults = componentsData.results;

diff --git a/__tests__/pages/Processes/ProcessPairs.spec.tsx b/__tests__/pages/Processes/ProcessPairs.spec.tsx
@@ -6,7 +6,6 @@ import * as router from 'react-router';
 
 import processPairsData from '../../../mocks/data/PROCESS_PAIRS.json';
 import { loadMockServer } from '../../../mocks/server';
-import { AvailableProtocols } from '../../../src/API/REST.enum';
 import { waitForElementToBeRemovedTimeout } from '../../../src/config/config';
 import { getTestsIds } from '../../../src/config/testIds';
 import { Wrapper } from '../../../src/core/components/Wrapper';
@@ -24,9 +23,7 @@ describe('Begin testing the Processes component', () => {
   beforeEach(() => {
     server = loadMockServer() as Server;
     server.logging = false;
-    jest
-      .spyOn(router, 'useParams')
-      .mockReturnValue({ processPair: `${'test'}@${processPairsResultOpToCart.identity}` });
+    jest.spyOn(router, 'useParams').mockReturnValue({ id: `${'test'}@${processPairsResultOpToCart.identity}` });
   });
 
   afterEach(() => {
@@ -55,10 +52,7 @@ describe('Begin testing the Processes component', () => {
     render(
       <Wrapper>
         <Suspense fallback={<LoadingPage />}>
-          <ProcessPairsContent
-            processPairId={processPairsResultOpToCart.identity}
-            protocol={AvailableProtocols.Http2}
-          />
+          <ProcessPairsContent id={processPairsResultOpToCart.identity} />
         </Suspense>
       </Wrapper>
     );
@@ -74,10 +68,7 @@ describe('Begin testing the Processes component', () => {
     const { queryByTestId, getByTestId } = render(
       <Wrapper>
         <Suspense fallback={<LoadingPage />}>
-          <ProcessPairsContent
-            processPairId={processPairsResultDatabaseToPayment.identity}
-            protocol={AvailableProtocols.Tcp}
-          />
+          <ProcessPairsContent id={processPairsResultDatabaseToPayment.identity} />
         </Suspense>
       </Wrapper>
     );
@@ -93,10 +84,7 @@ describe('Begin testing the Processes component', () => {
     const { queryByTestId, getByText, getByTestId } = render(
       <Wrapper>
         <Suspense fallback={<LoadingPage />}>
-          <ProcessPairsContent
-            processPairId={processPairsResultPayment2ToOp.identity}
-            protocol={AvailableProtocols.Tcp}
-          />
+          <ProcessPairsContent id={processPairsResultPayment2ToOp.identity} />
         </Suspense>
       </Wrapper>
     );

diff --git a/__tests__/pages/Processes/ProcessPairsList.spec.tsx b/__tests__/pages/Processes/ProcessPairsList.spec.tsx
@@ -47,7 +47,7 @@ describe('Processes Pairs component', () => {
 
     expect(screen.getAllByRole('link', { name: 'view pairs' })[1]).toHaveAttribute(
       'href',
-      `#${ProcessesRoutesPaths.Processes}/${processPairsResult.sourceName}@${processPairsResult.sourceId}/${ProcessesLabels.ProcessPairs}@${processPairsResult.identity}@${processPairsResult.protocol}?type=${ProcessesLabels.ProcessPairs}`
+      `#${ProcessesRoutesPaths.Processes}/${processPairsResult.sourceName}@${processPairsResult.sourceId}/${ProcessesLabels.ProcessPairs}@${processPairsResult.identity}?type=${ProcessesLabels.ProcessPairs}`
     );
   });
 });
diff --git a/__tests__/pages/Services/Service.spec.tsx b/__tests__/pages/Services/Service.spec.tsx
@@ -6,7 +6,6 @@ import * as router from 'react-router';
 
 import servicesData from '../../../mocks/data/SERVICES.json';
 import { loadMockServer } from '../../../mocks/server';
-import { AvailableProtocols } from '../../../src/API/REST.enum';
 import { waitForElementToBeRemovedTimeout } from '../../../src/config/config';
 import { getTestsIds } from '../../../src/config/testIds';
 import { Wrapper } from '../../../src/core/components/Wrapper';
@@ -16,15 +15,15 @@ import LoadingPage from '../../../src/pages/shared/Loading';
 
 const servicesResults = servicesData.results;
 
-describe('Begin testing the FlowPairs component', () => {
+describe('Begin testing the Service component', () => {
   let server: Server;
 
   beforeEach(() => {
     server = loadMockServer() as Server;
     server.logging = false;
 
     jest.spyOn(router, 'useParams').mockReturnValue({
-      service: `${servicesResults[2].name}@${servicesResults[2].identity}@${AvailableProtocols.Tcp}`
+      id: `${servicesResults[0].name}@${servicesResults[0].identity}`
     });
 
     render(
@@ -54,7 +53,7 @@ describe('Begin testing the FlowPairs component', () => {
 
   it('should render the HTTP/2 Service view after the data loading is complete', async () => {
     jest.spyOn(router, 'useParams').mockReturnValue({
-      service: `${servicesResults[0].name}@${servicesResults[0].identity}@${AvailableProtocols.Http2}`
+      id: `${servicesResults[2].name}@${servicesResults[2].identity}`
     });
 
     await waitForElementToBeRemoved(() => screen.queryByTestId(getTestsIds.loadingView()), {

diff --git a/__tests__/pages/Services/Services.spec.tsx b/__tests__/pages/Services/Services.spec.tsx
@@ -59,7 +59,7 @@ describe('Begin testing the Service component', () => {
 
     expect(screen.getByRole('link', { name: service.name })).toHaveAttribute(
       'href',
-      `#/services/${service.name}@${service.identity}@${service.protocol}`
+      `#/services/${service.name}@${service.identity}`
     );
   });
 });
diff --git a/__tests__/pages/Topology/TopologyProcesses.spec.tsx b/__tests__/pages/Topology/TopologyProcesses.spec.tsx
@@ -130,7 +130,7 @@ describe('Topology Process', () => {
     await eventUser.click(mockClick);
 
     expect(mockNavigate).toHaveBeenCalledWith(
-      `${ProcessesRoutesPaths.Processes}/${pair.sourceName}@${pair.sourceId}/${ProcessesLabels.ProcessPairs}@${pair.identity}@${pair.protocol}`
+      `${ProcessesRoutesPaths.Processes}/${pair.sourceName}@${pair.sourceId}/${ProcessesLabels.ProcessPairs}@${pair.identity}`
     );
   });
 

diff --git a/__tests__/pages/Topology/useTopologySiteData.spec.ts b/__tests__/pages/Topology/useTopologySiteData.spec.ts
@@ -18,7 +18,7 @@ describe('useTopologySiteData', () => {
     const mockMetrics = { bytes: 1000 };
 
     (useSuspenseQueries as jest.Mock).mockReturnValue([
-      { data: mockSites },
+      { data: { results: mockSites } },
       { data: null },
       { data: mockSitesPairs },
       { data: mockMetrics }
@@ -53,7 +53,7 @@ describe('useTopologySiteData', () => {
     ];
 
     (useSuspenseQueries as jest.Mock).mockReturnValue([
-      { data: mockSites },
+      { data: { results: mockSites } },
       { data: mockRouterLinks },
       { data: null },
       { data: null }
@@ -81,7 +81,7 @@ describe('useTopologySiteData', () => {
     const mockSitesPairs = [{ sourceId: 'site1', destinationId: 'site2' }];
 
     (useSuspenseQueries as jest.Mock).mockReturnValue([
-      { data: mockSites },
+      { data: { results: mockSites } },
       { data: null },
       { data: mockSitesPairs },
       { data: null }

diff --git a/mocks/data/SERVICES.json b/mocks/data/SERVICES.json
@@ -5,7 +5,7 @@
       "startTime": 1674048767157175,
       "endTime": 0,
       "name": "cart:3000",
-      "protocol": "http2",
+      "protocol": "tcp",
       "connectorCount": 2,
       "listenerCount": 2
     },

diff --git a/mocks/server.ts b/mocks/server.ts
@@ -216,6 +216,7 @@ export const MockApi = {
 
     return { results };
   },
+
   getProcesses: (_: unknown, { queryParams, url }: ApiProps) => {
     const processesForPerfTests = ITEM_COUNT ? mockProcessesForPerf : [];
     const results = [...processes.results, ...processesForPerfTests];
@@ -247,11 +248,32 @@ export const MockApi = {
       ...processes,
       results: paginatedResults,
       count: filteredResults.length,
-      totalCount: filteredResults.length,
       timeRangeCount: filteredResults.length
     };
   },
 
+  getServices: (_: unknown, { queryParams }: ApiProps) => {
+    let results = services.results;
+
+    if (queryParams.name || queryParams.protocol) {
+      results = results.filter(
+        ({ name, protocol }: ServiceResponse) =>
+          name.startsWith(queryParams.name as string) || protocol.startsWith(queryParams.protocol as string)
+      );
+    }
+
+    const paginatedResults = results.slice(
+      Number(queryParams.offset || 0),
+      Number(queryParams.offset || 0) + Number(queryParams.limit || results.length - 1)
+    );
+
+    return {
+      results: paginatedResults,
+      count: results.length,
+      timeRangeCount: results.length
+    };
+  },
+
   getSitePairs: (_: unknown, { queryParams }: ApiProps) => {
     const sitesForPerfTests = ITEM_COUNT ? mockSitePairsForPerf : [];
     const results = [...sitePairs.results, ...sitesForPerfTests];
@@ -288,6 +310,12 @@ export const MockApi = {
     results: processPairs.results.find(({ identity }) => identity === id) || []
   }),
 
+  getService: (_: unknown, { params: { id } }: ApiProps) => {
+    const results = services.results.find(({ identity }: ServiceResponse) => identity === id);
+
+    return { results };
+  },
+
   getPrometheusQuery: (_: unknown, { queryParams }: ApiProps) => {
     if (
       (queryParams.query as string)?.includes(
@@ -363,6 +391,8 @@ export const MockApiPaths = {
   SitePairs: `${prefix}/sitepairs`,
   Components: `${prefix}/processgroups`,
   Component: `${prefix}/processgroups/:id`,
+  Services: `${prefix}/addresses`,
+  Service: `${prefix}/addresses/:id`,
   Processes: `${prefix}/processes`,
   ProcessPairs: `${prefix}/processpairs`,
   ProcessPair: `${prefix}/processpairs/:id`,
@@ -393,6 +423,8 @@ export function loadMockServer() {
       this.get(MockApiPaths.Links, MockApi.getLinks);
       this.get(MockApiPaths.Components, MockApi.getComponents);
       this.get(MockApiPaths.Component, MockApi.getComponent);
+      this.get(MockApiPaths.Services, MockApi.getServices);
+      this.get(MockApiPaths.Service, MockApi.getService);
       this.get(MockApiPaths.Processes, MockApi.getProcesses);
       this.get(MockApiPaths.SitePairs, MockApi.getSitePairs);
       this.get(MockApiPaths.ProcessPairs, MockApi.getProcessPairs);
@@ -448,7 +480,6 @@ export function loadMockServer() {
         results: flowPairs.results.find(({ identity }: ServiceResponse) => identity === id)
       }));
 
-      this.get(`${prefix}/addresses`, () => services);
       this.get(`${prefix}/addresses/:id/processpairs`, () => processPairs);
     }
   });

diff --git a/src/API/REST.api.ts b/src/API/REST.api.ts
@@ -17,7 +17,7 @@ import { axiosFetch } from './apiMiddleware';
 import {
   getSitePATH,
   getLinksBySitePATH,
-  getProcessGroupPATH,
+  getComponentPATH,
   geProcessPATH,
   getLinkPATH,
   getFlowPairPATH,
@@ -27,15 +27,16 @@ import {
   geProcessesPATH,
   getSitesPATH,
   getLinksPATH,
-  getServicesPath,
+  getServicesPATH,
   getSitePairsPATH,
   getProcessGroupPairsPATH,
   getProcessPairsPATH,
   getProcessPairPairPATH,
-  getProcessGroupsPATH,
+  getComponentsPATH,
   getProcessPairsByServicePATH,
   logout,
-  getUser
+  getUser,
+  getServicePATH
 } from './REST.paths';
 import { mapOptionsToQueryParams, getApiResults } from './REST.utils';
 
@@ -46,12 +47,12 @@ export const RESTApi = {
   fetchUser: async (): Promise<UserResponse> => axiosFetch<UserResponse>(getUser()),
 
   // SITES APIs
-  fetchSites: async (options?: RemoteFilterOptions): Promise<SiteResponse[]> => {
+  fetchSites: async (options?: RemoteFilterOptions): Promise<ResponseWrapper<SiteResponse[]>> => {
     const data = await axiosFetch<ResponseWrapper<SiteResponse[]>>(getSitesPATH(), {
       params: options ? mapOptionsToQueryParams(options) : null
     });
 
-    return getApiResults(data);
+    return data;
   },
 
   fetchSite: async (id: string, options?: RemoteFilterOptions): Promise<SiteResponse> => {
@@ -62,12 +63,12 @@ export const RESTApi = {
     return getApiResults(data);
   },
 
-  fetchLinksBySite: async (id: string, options?: RemoteFilterOptions): Promise<LinkResponse[]> => {
+  fetchLinksBySite: async (id: string, options?: RemoteFilterOptions): Promise<ResponseWrapper<LinkResponse[]>> => {
     const data = await axiosFetch<ResponseWrapper<LinkResponse[]>>(getLinksBySitePATH(id), {
       params: options ? mapOptionsToQueryParams(options) : null
     });
 
-    return getApiResults(data);
+    return data;
   },
 
   // PROCESS APIs
@@ -110,16 +111,16 @@ export const RESTApi = {
   },
 
   // PROCESS GROUPS APIs
-  fetchProcessGroups: async (options?: RemoteFilterOptions): Promise<ResponseWrapper<ComponentResponse[]>> => {
-    const data = await axiosFetch<ResponseWrapper<ComponentResponse[]>>(getProcessGroupsPATH(), {
+  fetchComponents: async (options?: RemoteFilterOptions): Promise<ResponseWrapper<ComponentResponse[]>> => {
+    const data = await axiosFetch<ResponseWrapper<ComponentResponse[]>>(getComponentsPATH(), {
       params: options ? mapOptionsToQueryParams(options) : null
     });
 
     return data;
   },
 
-  fetchProcessGroup: async (id: string, options?: RemoteFilterOptions): Promise<ComponentResponse> => {
-    const data = await axiosFetch<ResponseWrapper<ComponentResponse>>(getProcessGroupPATH(id), {
+  fetchComponent: async (id: string, options?: RemoteFilterOptions): Promise<ComponentResponse> => {
+    const data = await axiosFetch<ResponseWrapper<ComponentResponse>>(getComponentPATH(id), {
       params: options ? mapOptionsToQueryParams(options) : null
     });
 
@@ -145,13 +146,21 @@ export const RESTApi = {
 
   // SERVICES APIs
   fetchServices: async (options?: RemoteFilterOptions): Promise<ResponseWrapper<ServiceResponse[]>> => {
-    const data = await axiosFetch<ResponseWrapper<ServiceResponse[]>>(getServicesPath(), {
+    const data = await axiosFetch<ResponseWrapper<ServiceResponse[]>>(getServicesPATH(), {
       params: options ? mapOptionsToQueryParams(options) : null
     });
 
     return data;
   },
 
+  fetchService: async (id: string, options?: RemoteFilterOptions): Promise<ServiceResponse> => {
+    const data = await axiosFetch<ResponseWrapper<ServiceResponse>>(getServicePATH(id), {
+      params: options ? mapOptionsToQueryParams(options) : null
+    });
+
+    return getApiResults(data);
+  },
+
   fetchProcessPairsByService: async (
     id: string,
     options?: RemoteFilterOptions