Merge pull request #529 from bartoval/refactor_ui_fetches

Refactor UI fetches
skupperproject · Dec 16, 2024 · 321857a · 321857a
2 parents 1974378 + be7e173
commit 321857a
Show file tree

Hide file tree

Showing 79 changed files with 2,016 additions and 3,386 deletions.
diff --git a/__tests__/Filters.spec.tsx b/__tests__/Filters.spec.tsx
@@ -4,7 +4,6 @@ import { Server } from 'miragejs';
 import processesData from '../mocks/data/PROCESSES.json';
 import siteData from '../mocks/data/SITES.json';
 import { loadMockServer } from '../mocks/server';
-import { Protocols } from '../src/API/REST.enum';
 import { waitForElementToBeRemovedTimeout } from '../src/config/app';
 import MetricFilters from '../src/pages/shared/Metrics/components/Filters';
 import { Labels } from '../src/config/labels';
@@ -26,17 +25,22 @@ describe('Metrics component', () => {
 
     render(
       <MetricFilters
-        sourceSites={[{ destinationName: siteData.results[0].name }, { destinationName: siteData.results[1].name }]}
-        destSites={[{ destinationName: siteData.results[2].name }, { destinationName: siteData.results[1].name }]}
+        sourceSites={[
+          { id: siteData.results[0].identity, destinationName: siteData.results[0].name },
+          { id: siteData.results[1].identity, destinationName: siteData.results[1].name }
+        ]}
+        destSites={[
+          { id: siteData.results[2].identity, destinationName: siteData.results[2].name },
+          { id: siteData.results[1].identity, destinationName: siteData.results[1].name }
+        ]}
         sourceProcesses={[
-          { destinationName: processesData.results[0].name },
-          { destinationName: processesData.results[1].name }
+          { id: processesData.results[0].name, destinationName: processesData.results[0].name },
+          { id: processesData.results[1].name, destinationName: processesData.results[1].name }
         ]}
         destProcesses={[
-          { destinationName: processesData.results[2].name },
-          { destinationName: processesData.results[3].name }
+          { id: processesData.results[2].name, destinationName: processesData.results[2].name },
+          { id: processesData.results[3].name, destinationName: processesData.results[3].name }
         ]}
-        availableProtocols={[Protocols.Http, Protocols.Http2, Protocols.Tcp]}
         configFilters={{
           destinationProcesses: { disabled: false, placeholder: Labels.AllConnectedProcesses },
           sourceProcesses: { disabled: false, placeholder: Labels.AllSourceProcesses },
@@ -86,17 +90,22 @@ describe('Metrics component', () => {
 
     render(
       <MetricFilters
-        sourceSites={[{ destinationName: siteData.results[0].name }, { destinationName: siteData.results[1].name }]}
-        destSites={[{ destinationName: siteData.results[2].name }, { destinationName: siteData.results[1].name }]}
+        sourceSites={[
+          { id: siteData.results[0].identity, destinationName: siteData.results[0].name },
+          { id: siteData.results[1].identity, destinationName: siteData.results[1].name }
+        ]}
+        destSites={[
+          { id: siteData.results[2].identity, destinationName: siteData.results[2].name },
+          { id: siteData.results[1].identity, destinationName: siteData.results[1].name }
+        ]}
         sourceProcesses={[
-          { destinationName: processesData.results[0].name },
-          { destinationName: processesData.results[1].name }
+          { id: processesData.results[0].name, destinationName: processesData.results[0].name },
+          { id: processesData.results[1].name, destinationName: processesData.results[1].name }
         ]}
         destProcesses={[
-          { destinationName: processesData.results[2].name },
-          { destinationName: processesData.results[3].name }
+          { id: processesData.results[2].name, destinationName: processesData.results[2].name },
+          { id: processesData.results[3].name, destinationName: processesData.results[3].name }
         ]}
-        availableProtocols={[Protocols.Http, Protocols.Http2, Protocols.Tcp]}
         configFilters={{
           destinationProcesses: { disabled: false, placeholder: Labels.AllConnectedProcesses },
           sourceProcesses: { disabled: false, placeholder: Labels.AllSourceProcesses },

diff --git a/__tests__/Metric.spec.tsx b/__tests__/Metric.spec.tsx
@@ -11,15 +11,13 @@ import { configDefaultFilters } from '../src/pages/shared/Metrics/Metrics.consta
 
 describe('useMetrics', () => {
   const initialProps = {
-    defaultMetricFilterValues: { protocol: Protocols.Http },
-    defaultOpenSections: { byterate: true },
-    onGetMetricFiltersConfig: jest.fn(),
-    onGetExpandedSectionsConfig: jest.fn()
+    sessionKey: 'test-id',
+    defaultMetricFilterValues: { protocol: Protocols.Http }
   };
 
   it('initializes with the correct state from props', () => {
     const { result } = renderHook(() => useMetricsState(initialProps));
-    expect(result.current.queryParams).toEqual({ protocol: Protocols.Http });
+    expect(result.current.selectedFilters).toEqual({ protocol: Protocols.Http });
     expect(result.current.shouldUpdateData).toBe(0);
   });
 
@@ -37,20 +35,8 @@ describe('useMetrics', () => {
     act(() => {
       result.current.handleFilterChange(newFilters);
     });
-    expect(result.current.queryParams).toEqual(newFilters);
-    expect(initialProps.onGetMetricFiltersConfig).toHaveBeenCalledWith(newFilters);
-  });
 
-  it('updates expanded sections and calls onGetExpandedSectionsConfig when handleSectionToggle is invoked', () => {
-    const { result } = renderHook(() => useMetricsState(initialProps));
-    const newSections = { traffic: false };
-    act(() => {
-      result.current.handleSectionToggle(newSections);
-    });
-    expect(initialProps.onGetExpandedSectionsConfig).toHaveBeenCalledWith({
-      ...initialProps.defaultOpenSections,
-      ...newSections
-    });
+    expect(result.current.selectedFilters).toEqual(newFilters);
   });
 });
 

diff --git a/__tests__/__snapshots__/Metric.spec.tsx.snap b/__tests__/__snapshots__/Metric.spec.tsx.snap
@@ -380,10 +380,10 @@ exports[`Metrics Component renders correctly 1`] = `
         >
           <div
             class="pf-v6-c-card__body"
-            style="min-height: 450px;"
+            style="min-height: 450px; display: grid;"
           >
             <div
-              style="position: absolute; width: 100%; height: 100%; background-color: rgba(3, 3, 3, 0.1); left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1;"
+              style="position: absolute; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1;"
             >
               <div
                 class="pf-v6-l-bullseye"
@@ -394,7 +394,7 @@ exports[`Metrics Component renders correctly 1`] = `
                   aria-valuetext="Loading..."
                   class="pf-v6-c-spinner pf-m-xl"
                   role="progressbar"
-                  style="--pf-v6-c-spinner--diameter: 150px;"
+                  style="--pf-v6-c-spinner--diameter: 80px;"
                   viewBox="0 0 100 100"
                 >
                   <circle
@@ -480,7 +480,7 @@ exports[`Metrics Component renders correctly 1`] = `
     >
       <div
         aria-label="Tcp latency Out"
-        class="pf-v6-c-card"
+        class="pf-v6-c-card pf-m-full-height"
         data-ouia-component-id="OUIA-Generated-Card-3"
         data-ouia-component-type="PF6/Card"
         data-ouia-safe="true"
@@ -543,8 +543,8 @@ exports[`Metrics Component renders correctly 1`] = `
       class="pf-v6-l-stack__item"
     >
       <div
-        aria-label="Tcp latency Out"
-        class="pf-v6-c-card"
+        aria-label="Tcp latency In"
+        class="pf-v6-c-card pf-m-full-height"
         data-ouia-component-id="OUIA-Generated-Card-4"
         data-ouia-component-type="PF6/Card"
         data-ouia-safe="true"
@@ -596,7 +596,7 @@ exports[`Metrics Component renders correctly 1`] = `
               <div
                 class="pf-v6-c-card__title-text"
               >
-                Tcp latency Out
+                Tcp latency In
               </div>
             </div>
           </div>

diff --git a/__tests__/useMetricFiltersState.spec.ts b/__tests__/useMetricFiltersState.spec.ts
@@ -2,7 +2,6 @@ import { act } from 'react';
 
 import { renderHook } from '@testing-library/react';
 
-import { Protocols } from '../src/API/REST.enum';
 import useMetricFiltersState from '../src/pages/shared/Metrics/hooks/useMetricFiltersState';
 import { QueryMetricsParams } from '../src/types/Metrics.interfaces';
 
@@ -61,16 +60,6 @@ describe('useMetricFiltersState', () => {
     expect(result.current.selectedFilters.destProcess).toEqual('newDestProcess');
   });
 
-  it('should update protocol when handleSelectProtocol is called', () => {
-    const { result } = renderHook(() => useMetricFiltersState({ defaultMetricFilterValues }));
-
-    act(() => {
-      result.current.handleSelectProtocol(Protocols.Tcp);
-    });
-
-    expect(result.current.selectedFilters.protocol).toEqual(Protocols.Tcp);
-  });
-
   it('should update time interval when handleSelectTimeInterval is called', () => {
     const onSelectFiltersMock = jest.fn();
 

diff --git a/__tests__/useMetricsSessionHandler.spec.ts b/__tests__/useMetricsSessionHandler.spec.ts
@@ -6,6 +6,7 @@ import { Direction } from '../src/API/REST.enum';
 import { getDataFromSession, storeDataToSession } from '../src/core/utils/persistData';
 import { useMetricSessionHandlers } from '../src/pages/shared/Metrics/hooks/useMetricsSessionHandler';
 import { QueryMetricsParams, ExpandedMetricSections } from '../src/types/Metrics.interfaces';
+import { Labels } from '../src/config/labels';
 
 const mockQueryMetricsParams: QueryMetricsParams = {
   sourceSite: 'SiteA',
@@ -23,7 +24,8 @@ const mockQueryMetricsParams: QueryMetricsParams = {
 
 const mockExpandedMetricSections: ExpandedMetricSections = {
   byterate: true,
-  latency: false,
+  [Labels.LatencyIn]: false,
+  [Labels.LatencyOut]: false,
   request: true,
   response: true,
   connection: false
@@ -46,7 +48,7 @@ describe('useMetricSessionHandlers', () => {
     (getDataFromSession as jest.Mock).mockReturnValueOnce(undefined);
 
     const { result } = renderHook(() => useMetricSessionHandlers(id));
-    expect(result.current.visibleMetrics).toBeUndefined();
+    expect(result.current.openSections).toBeUndefined();
   });
 
   it('should retrieve selectedFilters and visibleMetrics from session', () => {
@@ -60,7 +62,7 @@ describe('useMetricSessionHandlers', () => {
     const { result } = renderHook(() => useMetricSessionHandlers(id));
 
     expect(result.current.selectedFilters).toEqual(mockFilters);
-    expect(result.current.visibleMetrics).toEqual(mockVisibleMetrics);
+    expect(result.current.openSections).toEqual(mockVisibleMetrics);
     expect(getDataFromSession).toHaveBeenCalledTimes(2);
   });
 
@@ -80,7 +82,7 @@ describe('useMetricSessionHandlers', () => {
     const { result } = renderHook(() => useMetricSessionHandlers(id));
 
     act(() => {
-      result.current.setVisibleMetrics(mockVisibleMetrics);
+      result.current.setOpenSections(mockVisibleMetrics);
     });
 
     expect(storeDataToSession).toHaveBeenCalledWith(`metric-sections-${id}`, mockVisibleMetrics);

diff --git a/__tests__/useTopologySiteData.spec.ts b/__tests__/useTopologySiteData.spec.ts
@@ -26,9 +26,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologySiteData({
-        showDataLink: true,
-        showBytes: true,
-        showByteRate: true
+        showDataLink: true
       })
     );
 
@@ -60,9 +58,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologySiteData({
-        showDataLink: false,
-        showBytes: false,
-        showByteRate: false
+        showDataLink: false
       })
     );
 
@@ -87,9 +83,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologySiteData({
-        showDataLink: true,
-        showBytes: false,
-        showByteRate: false
+        showDataLink: true
       })
     );
 

diff --git a/mocks/server.API.ts b/mocks/server.API.ts
@@ -7,7 +7,6 @@ import {
   RouterLinkResponse,
   ComponentResponse,
   ProcessResponse,
-  RouterResponse,
   SiteResponse,
   PairsResponse,
   ApplicationFlowResponse,
@@ -348,23 +347,6 @@ for (let i = 0; i < ITEM_COUNT; i++) {
   });
 }
 
-const mockRoutersForPerf: RouterResponse[] = [];
-mockSitesForPerf.forEach((site, index) => {
-  mockRoutersForPerf.push({
-    identity: `router${index}:0`,
-    parent: site.identity,
-    startTime: 1674048674810887,
-    endTime: 0,
-    name: `0/${site.name}-skupper-router-${`router${index}`}`,
-    namespace: `router-namespace-${`router${index}`}`,
-    imageName: 'skupper-router',
-    imageVersion: 'latest',
-    hostName: `skupper-router-${`router${index}`}`,
-    buildVersion: 'UNKNOWN',
-    mode: 'interior'
-  });
-});
-
 const mockProcessesForPerf: ProcessResponse[] = [];
 for (let i = 0; i < ITEM_COUNT; i++) {
   const process = processes.results[i % processes.results.length];

diff --git a/package.json b/package.json
@@ -39,28 +39,29 @@
     "commit": "git-cz"
   },
   "dependencies": {
-    "@antv/g6": "^5.0.35",
-    "@nivo/sankey": "^0.88.0",
-    "@patternfly/patternfly": "^6.1.0-prerelease.11",
-    "@patternfly/react-charts": "^8.1.0-prerelease.18",
-    "@patternfly/react-core": "^6.1.0-prerelease.15",
-    "@patternfly/react-icons": "^6.1.0-prerelease.6",
-    "@patternfly/react-table": "6.1.0-prerelease.15",
-    "@patternfly/react-tokens": "^6.0.0",
-    "@tanstack/react-query": "^5.62.7",
-    "axios": "^1.7.9",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-error-boundary": "^4.1.2",
-    "react-router-dom": "^7.0.2",
-    "victory": "^37.3.4"
+    "@antv/g6": "5.0.35",
+    "@nivo/sankey": "0.88.0",
+    "@patternfly/patternfly": "6.1.0-prerelease.11",
+    "@patternfly/react-charts": "8.1.0-prerelease.18",
+    "@patternfly/react-core": "6.1.0-prerelease.16",
+    "@patternfly/react-icons": "6.1.0-prerelease.6",
+    "@patternfly/react-table": "6.1.0-prerelease.16",
+    "@patternfly/react-tokens": "6.1.0-prerelease.5",
+    "@tanstack/react-query": "5.62.7",
+    "axios": "1.7.9",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-error-boundary": "4.1.2",
+    "react-router-dom": "7.0.2",
+    "victory": "37.3.2"
   },
+  "_comment": "Note: Victory 37.3.4 break legend in @patternfly/react-charts",
   "devDependencies": {
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/compat": "^1.2.4",
     "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "^9.17.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -76,7 +77,7 @@
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "cz-git": "^1.11.0",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-import": "^2.31.0",
@@ -93,7 +94,7 @@
     "miragejs": "^0.1.48",
     "prettier": "^3.4.2",
     "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.10",
+    "terser-webpack-plugin": "^5.3.11",
     "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",