fix: missing namespaces polling (#1044)

percona · Jan 23, 2025 · 1deb43a · 1deb43a
1 parent 7993908
commit 1deb43a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 44 deletions.
diff --git a/ui/apps/everest/src/hooks/api/backup-storages/useBackupStorages.ts b/ui/apps/everest/src/hooks/api/backup-storages/useBackupStorages.ts
@@ -18,8 +18,6 @@ import {
   UseMutationOptions,
   useQueries,
   useQuery,
-  UseQueryOptions,
-  UseQueryResult,
 } from '@tanstack/react-query';
 import {
   createBackupStorageFn,
@@ -32,46 +30,31 @@ import {
   GetBackupStoragesPayload,
 } from 'shared-types/backupStorages.types';
 import { PerconaQueryOptions } from 'shared-types/query.types';
+import { useNamespaces } from '../namespaces';
 
 export const BACKUP_STORAGES_QUERY_KEY = 'backupStorages';
 
-export interface BackupStoragesForNamespaceResult {
-  namespace: string;
-  queryResult: UseQueryResult<BackupStorage[], unknown>;
-}
+export type BackupStoragesForNamespaceResult =
+  PerconaQueryOptions<GetBackupStoragesPayload>;
 
-export const useBackupStorages = (
-  queriesParams: Array<{
-    namespace: string;
-    options?: PerconaQueryOptions<
-      GetBackupStoragesPayload,
-      unknown,
-      BackupStorage[]
-    >;
-  }>
-) => {
-  const queries = queriesParams.map<
-    UseQueryOptions<GetBackupStoragesPayload, unknown, BackupStorage[]>
-  >(({ namespace, options }) => {
+export const useBackupStorages = () => {
+  const { data: namespaces = [] } = useNamespaces({
+    refetchInterval: 5 * 1000,
+  });
+  const queries = namespaces.map((namespace) => {
     return {
       queryKey: [BACKUP_STORAGES_QUERY_KEY, namespace],
       retry: false,
       queryFn: () => getBackupStoragesFn(namespace),
       refetchInterval: 5 * 1000,
-      ...options,
     };
   });
 
-  const queryResults = useQueries({ queries });
-
-  const results: BackupStoragesForNamespaceResult[] = queryResults.map(
-    (item, i) => ({
-      namespace: queriesParams[i].namespace,
-      queryResult: item,
-    })
-  );
+  const queryResults = useQueries({
+    queries,
+  });
 
-  return results;
+  return queryResults;
 };
 
 export const useBackupStoragesByNamespace = (

diff --git a/ui/apps/everest/src/pages/settings/storage-locations/storage-locations.tsx b/ui/apps/everest/src/pages/settings/storage-locations/storage-locations.tsx
@@ -29,23 +29,17 @@ import {
   convertBackupStoragesPayloadToTableFormat,
   convertStoragesType,
 } from './storage-locations.utils';
-import { useNamespaces } from 'hooks/api/namespaces';
 import { useNamespacePermissionsForResource } from 'hooks/rbac';
 import TableActionsMenu from '../../../components/table-actions-menu';
 import { StorageLocationsActionButtons } from './storage-locations-menu-actions';
 
 export const StorageLocations = () => {
   const queryClient = useQueryClient();
   const { canCreate } = useNamespacePermissionsForResource('backup-storages');
-  const { data: namespaces = [] } = useNamespaces();
-  const backupStorages = useBackupStorages(
-    namespaces.map((namespace) => ({
-      namespace: namespace,
-    }))
-  );
+  const backupStorages = useBackupStorages();
 
   const backupStoragesLoading = backupStorages.some(
-    (result) => result.queryResult.isLoading
+    (result) => result.isLoading
   );
 
   const tableData = useMemo(

diff --git a/ui/apps/everest/src/pages/settings/storage-locations/storage-locations.utils.ts b/ui/apps/everest/src/pages/settings/storage-locations/storage-locations.utils.ts
@@ -1,6 +1,9 @@
-import { StorageType } from 'shared-types/backupStorages.types';
+import { UseQueryResult } from '@tanstack/react-query';
+import {
+  GetBackupStoragesPayload,
+  StorageType,
+} from 'shared-types/backupStorages.types';
 import { Messages } from './storage-locations.messages';
-import { BackupStoragesForNamespaceResult } from 'hooks/api/backup-storages/useBackupStorages';
 import { BackupStorageTableElement } from './storage-locations.types';
 
 export const convertStoragesType = (value: StorageType) =>
@@ -11,14 +14,13 @@ export const convertStoragesType = (value: StorageType) =>
   })[value];
 
 export const convertBackupStoragesPayloadToTableFormat = (
-  data: BackupStoragesForNamespaceResult[]
+  data: UseQueryResult<GetBackupStoragesPayload, Error>[]
 ): BackupStorageTableElement[] => {
   const result: BackupStorageTableElement[] = [];
   data.forEach((item) => {
-    const tableDataForNamespace: BackupStorageTableElement[] = item?.queryResult
-      ?.isSuccess
-      ? item.queryResult?.data.map((storage) => ({
-          namespace: item.namespace,
+    const tableDataForNamespace: BackupStorageTableElement[] = item.isSuccess
+      ? item.data.map((storage) => ({
+          namespace: storage.namespace,
           name: storage.name,
           type: storage.type,
           bucketName: storage.bucketName,