Merge pull request #382 from bartoval/refresh_lists

refactor(General): ♻️ Refetch interval for entry views
skupperproject · Feb 18, 2024 · 55ba736 · 55ba736
2 parents 15324ac + 0cdbb38
commit 55ba736
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/src/config/config.ts b/src/config/config.ts
@@ -18,7 +18,7 @@ export const SMALL_PAGINATION_SIZE = 10;
 export const brandLogo = process.env.BRAND_APP_LOGO ? require(process.env.BRAND_APP_LOGO) : Logo;
 
 /** General config: contains various global settings and constants */
-export const UPDATE_INTERVAL = 9 * 1000; // Time in milliseconds to request updated data from the backend
+export const UPDATE_INTERVAL = 10 * 1000; // Time in milliseconds to request updated data from the backend
 export const MSG_TIMEOUT_ERROR = 'The request to fetch the data has timed out.'; // Error message to display when request times out
 export const TOAST_VISIBILITY_TIMEOUT = 2000; // Time in milliseconds to display toast messages
 /** Tests */

diff --git a/src/pages/ProcessGroups/views/ProcessGroups.tsx b/src/pages/ProcessGroups/views/ProcessGroups.tsx
@@ -3,7 +3,7 @@ import { useCallback, useState, startTransition } from 'react';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { RESTApi } from '@API/REST.api';
-import { BIG_PAGINATION_SIZE } from '@config/config';
+import { BIG_PAGINATION_SIZE, UPDATE_INTERVAL } from '@config/config';
 import { getTestsIds } from '@config/testIds';
 import SkTable from '@core/components/SkTable';
 import MainContainer from '@layout/MainContainer';
@@ -24,7 +24,8 @@ const ProcessGroups = function () {
 
   const { data: componentsData } = useSuspenseQuery({
     queryKey: [QueriesProcessGroups.GetProcessGroups, componentsQueryParams],
-    queryFn: () => RESTApi.fetchProcessGroups(componentsQueryParams)
+    queryFn: () => RESTApi.fetchProcessGroups(componentsQueryParams),
+    refetchInterval: UPDATE_INTERVAL
   });
 
   const handleGetFilters = useCallback((params: RequestOptions) => {

diff --git a/src/pages/Processes/views/Processes.tsx b/src/pages/Processes/views/Processes.tsx
@@ -3,7 +3,7 @@ import { startTransition, useCallback, useState } from 'react';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { RESTApi } from '@API/REST.api';
-import { BIG_PAGINATION_SIZE } from '@config/config';
+import { BIG_PAGINATION_SIZE, UPDATE_INTERVAL } from '@config/config';
 import { getTestsIds } from '@config/testIds';
 import SkSearchFilter from '@core/components/SkSearchFilter';
 import SkTable from '@core/components/SkTable';
@@ -15,20 +15,20 @@ import { CustomProcessCells, processesSelectOptions, processesTableColumns } fro
 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 = {
+const initProcessesQueryParams = {
   limit: BIG_PAGINATION_SIZE,
   processRole: ['remote', 'external'],
   endTime: 0
 };
 
 const Processes = function () {
-  const [externalProcessesQueryParams, setExternalProcessesQueryParams] = useState<RequestOptions>(
-    initExternalProcessesQueryParams
-  );
+  const [externalProcessesQueryParams, setExternalProcessesQueryParams] =
+    useState<RequestOptions>(initProcessesQueryParams);
 
-  const { data: externalProcessData } = useSuspenseQuery({
+  const { data: processData } = useSuspenseQuery({
     queryKey: [QueriesProcesses.GetProcessesPaginated, externalProcessesQueryParams],
-    queryFn: () => RESTApi.fetchProcesses(externalProcessesQueryParams)
+    queryFn: () => RESTApi.fetchProcesses(externalProcessesQueryParams),
+    refetchInterval: UPDATE_INTERVAL
   });
 
   const handleGetFilters = useCallback((params: RequestOptions) => {
@@ -37,8 +37,8 @@ const Processes = function () {
     });
   }, []);
 
-  const processes = externalProcessData?.results || [];
-  const processesCount = externalProcessData?.timeRangeCount || 0;
+  const processes = processData?.results || [];
+  const processesCount = processData?.timeRangeCount || 0;
 
   return (
     <MainContainer

diff --git a/src/pages/Services/views/Services.tsx b/src/pages/Services/views/Services.tsx
@@ -5,7 +5,7 @@ import { useSuspenseQueries } from '@tanstack/react-query';
 import { PrometheusApi } from '@API/Prometheus.api';
 import { RESTApi } from '@API/REST.api';
 import { RequestOptions } from '@API/REST.interfaces';
-import { BIG_PAGINATION_SIZE } from '@config/config';
+import { BIG_PAGINATION_SIZE, UPDATE_INTERVAL } from '@config/config';
 import { getTestsIds } from '@config/testIds';
 import SkSearchFilter from '@core/components/SkSearchFilter';
 import SkTable from '@core/components/SkTable';
@@ -26,11 +26,13 @@ const Services = function () {
     queries: [
       {
         queryKey: [QueriesServices.GetServices, servicesQueryParams],
-        queryFn: () => RESTApi.fetchServices(servicesQueryParams)
+        queryFn: () => RESTApi.fetchServices(servicesQueryParams),
+        refetchInterval: UPDATE_INTERVAL
       },
       {
         queryKey: [QueriesServices.GetPrometheusActiveFlows],
-        queryFn: () => PrometheusApi.fetchTcpActiveFlowsByService()
+        queryFn: () => PrometheusApi.fetchTcpActiveFlowsByService(),
+        refetchInterval: UPDATE_INTERVAL
       }
     ]
   });

diff --git a/src/pages/Sites/views/Sites.tsx b/src/pages/Sites/views/Sites.tsx
@@ -1,7 +1,7 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { RESTApi } from '@API/REST.api';
-import { BIG_PAGINATION_SIZE } from '@config/config';
+import { BIG_PAGINATION_SIZE, UPDATE_INTERVAL } from '@config/config';
 import { getTestsIds } from '@config/testIds';
 import LinkCell from '@core/components/LinkCell';
 import { LinkCellProps } from '@core/components/LinkCell/LinkCell.interfaces';
@@ -16,7 +16,8 @@ import { SiteLabels, SitesRoutesPaths, QueriesSites } from '../Sites.enum';
 const Sites = function () {
   const { data: sites } = useSuspenseQuery({
     queryKey: [QueriesSites.GetSites],
-    queryFn: () => RESTApi.fetchSites()
+    queryFn: () => RESTApi.fetchSites(),
+    refetchInterval: UPDATE_INTERVAL
   });
 
   return (