✨ Stop fetching data every X seconds and do it only when requested (#374)

Signed-off-by: Carlos Feria <2582866+carlosthe19916@users.noreply.github.com>

Author: carlosthe19916

client/src/app/Constants.ts

@@ -6,6 +6,8 @@ export const RENDER_DATE_FORMAT = "MMM DD, YYYY";
 export const RENDER_DATETIME_FORMAT = "MMM DD, YYYY | HH:mm:ss";
 export const FILTER_DATE_FORMAT = "YYYY-MM-DD";
 
+export const DEFAULT_REFETCH_INTERVAL = 5000;
+
 export const TablePersistenceKeyPrefixes = {
   products: "pd",
   advisories: "ad",

client/src/app/pages/importer-list/importer-list.tsx

@@ -92,23 +92,7 @@ export const ImporterList: React.FC = () => {
     setSelectedRow(row);
   };
 
-  const [refetchInterval, setRefetchInterval] = React.useState(10000);
-  const { importers, isFetching, fetchError } = useFetchImporters(
-    false,
-    refetchInterval
-  );
-
-  // Fetch importers with more frecuency in case any is "running"
-  React.useEffect(() => {
-    const isSomeTaskRunning = importers.some(
-      (item) => item.state === "running"
-    );
-    if (isSomeTaskRunning) {
-      setRefetchInterval(5000);
-    } else if (refetchInterval !== 10000) {
-      setRefetchInterval(10000);
-    }
-  }, [importers]);
+  const { importers, isFetching, fetchError } = useFetchImporters();
 
   // Enable/Disable Importer
 

client/src/app/pages/search/components/SearchMenu.tsx

@@ -65,22 +65,22 @@ function useAllEntities(filterText: string, disableSearch: boolean) {
   const {
     isFetching: isFetchingAdvisories,
     result: { data: advisories },
-  } = useFetchAdvisories({ ...params }, true, disableSearch);
+  } = useFetchAdvisories({ ...params }, disableSearch);
 
   const {
     isFetching: isFetchingPackages,
     result: { data: packages },
-  } = useFetchPackages({ ...params }, true, disableSearch);
+  } = useFetchPackages({ ...params }, disableSearch);
 
   const {
     isFetching: isFetchingSBOMs,
     result: { data: sboms },
-  } = useFetchSBOMs({ ...params }, true, disableSearch);
+  } = useFetchSBOMs({ ...params }, disableSearch);
 
   const {
     isFetching: isFetchingVulnerabilities,
     result: { data: vulnerabilities },
-  } = useFetchVulnerabilities({ ...params }, true, disableSearch);
+  } = useFetchVulnerabilities({ ...params }, disableSearch);
 
   const transformedAdvisories: IEntity[] = advisories.map((item) => ({
     id: `advisory-${item.uuid}`,

client/src/app/queries/advisories.ts

@@ -28,7 +28,6 @@ export const AdvisoriesQueryKey = "advisories";
 
 export const useFetchAdvisories = (
   params: HubRequestParams = {},
-  refetchDisabled: boolean = false,
   disableQuery: boolean = false
 ) => {
   const { data, isLoading, error, refetch } = useQuery({
@@ -39,7 +38,6 @@ export const useFetchAdvisories = (
         query: { ...requestParamsQuery(params) },
       });
     },
-    refetchInterval: !refetchDisabled ? 5000 : false,
     enabled: !disableQuery,
   });
   return {

client/src/app/queries/importers.ts

@@ -11,17 +11,15 @@ import {
   listImporters,
   updateImporter,
 } from "@app/client";
+import { DEFAULT_REFETCH_INTERVAL } from "@app/Constants";
 
 export const ImportersQueryKey = "importers";
 
-export const useFetchImporters = (
-  refetchDisabled: boolean = false,
-  interval = 5000
-) => {
+export const useFetchImporters = (refetchDisabled: boolean = false) => {
   const { isLoading, error, refetch, data } = useQuery({
     queryKey: [ImportersQueryKey],
     queryFn: () => listImporters({ client }),
-    refetchInterval: !refetchDisabled ? interval : false,
+    refetchInterval: !refetchDisabled ? DEFAULT_REFETCH_INTERVAL : false,
   });
 
   return {
@@ -136,7 +134,7 @@ export const useFetchImporterReports = (
   const { data, isLoading, refetch, error } = useQuery({
     queryKey: [ImportersQueryKey, id, "reports"],
     queryFn: () => listImporterReports({ client, path: { name: id } }),
-    refetchInterval: !refetchDisabled ? 5000 : false,
+    refetchInterval: !refetchDisabled ? DEFAULT_REFETCH_INTERVAL : false,
   });
 
   return {

client/src/app/queries/packages.ts

@@ -11,7 +11,6 @@ export const PackagesQueryKey = "packages";
 
 export const useFetchPackages = (
   params: HubRequestParams = {},
-  refetchDisabled: boolean = false,
   disableQuery: boolean = false
 ) => {
   const { data, isLoading, error, refetch } = useQuery({
@@ -22,7 +21,6 @@ export const useFetchPackages = (
         query: { ...requestParamsQuery(params) },
       });
     },
-    refetchInterval: !refetchDisabled ? 5000 : false,
     enabled: !disableQuery,
   });
 

client/src/app/queries/sboms.ts

@@ -28,7 +28,6 @@ export const SBOMsQueryKey = "sboms";
 
 export const useFetchSBOMs = (
   params: HubRequestParams = {},
-  refetchDisabled: boolean = false,
   disableQuery: boolean = false
 ) => {
   const { data, isLoading, error, refetch } = useQuery({
@@ -38,7 +37,6 @@ export const useFetchSBOMs = (
         client,
         query: { ...requestParamsQuery(params) },
       }),
-    refetchInterval: !refetchDisabled ? 5000 : false,
     enabled: !disableQuery,
   });
   return {

client/src/app/queries/vulnerabilities.ts

@@ -15,7 +15,6 @@ export const VulnerabilitiesQueryKey = "vulnerabilities";
 
 export const useFetchVulnerabilities = (
   params: HubRequestParams = {},
-  refetchDisabled: boolean = false,
   disableQuery: boolean = false
 ) => {
   const { data, isLoading, error, refetch } = useQuery({
@@ -26,7 +25,6 @@ export const useFetchVulnerabilities = (
         query: { ...requestParamsQuery(params) },
       });
     },
-    refetchInterval: !refetchDisabled ? 5000 : false,
     enabled: !disableQuery,
   });
   return {