fix(k8s-services): avoid rerendering services table [r8s-387] (#832)

app/react/kubernetes/volumes/ListView/VolumesDatatable.tsx

@@ -16,12 +16,17 @@ import {
 } from '../../datatables/DefaultDatatableSettings';
 import { SystemResourceDescription } from '../../datatables/SystemResourceDescription';
 import { useNamespacesQuery } from '../../namespaces/queries/useNamespacesQuery';
-import { useAllVolumesQuery } from '../queries/useVolumesQuery';
+import {
+  convertToVolumeViewModels,
+  useAllVolumesQuery,
+} from '../queries/useVolumesQuery';
 import { isSystemNamespace } from '../../namespaces/queries/useIsSystemNamespace';
 import { useDeleteVolumes } from '../queries/useDeleteVolumes';
 import { isVolumeUsed } from '../utils';
+import { K8sVolumeInfo } from '../types';
 
 import { columns } from './columns';
+import { VolumeViewModel } from './types';
 
 export function VolumesDatatable() {
   const tableState = useTableStateWithStorage<TableSettings>(
@@ -45,21 +50,15 @@ export function VolumesDatatable() {
   const namespaces = namespaceListQuery.data ?? [];
   const volumesQuery = useAllVolumesQuery(envId, {
     refetchInterval: tableState.autoRefreshRate * 1000,
+    select: transformAndFilterVolumes,
   });
   const volumes = volumesQuery.data ?? [];
 
-  const filteredVolumes = tableState.showSystemResources
-    ? volumes
-    : volumes.filter(
-        (volume) =>
-          !isSystemNamespace(volume.ResourcePool.Namespace.Name, namespaces)
-      );
-
   return (
     <Datatable
       data-cy="k8s-volumes-datatable"
       isLoading={volumesQuery.isLoading || namespaceListQuery.isLoading}
-      dataset={filteredVolumes}
+      dataset={volumes}
       columns={columns}
       settingsManager={tableState}
       title="Volumes"
@@ -96,4 +95,15 @@ export function VolumesDatatable() {
       }
     />
   );
+
+  function transformAndFilterVolumes(
+    volumes: K8sVolumeInfo[]
+  ): VolumeViewModel[] {
+    const transformedVolumes = convertToVolumeViewModels(volumes);
+    return transformedVolumes.filter(
+      (volume) =>
+        tableState.showSystemResources ||
+        !isSystemNamespace(volume.ResourcePool.Namespace.Name, namespaces)
+    );
+  }
 }

app/react/kubernetes/volumes/queries/useDeleteVolumes.ts

@@ -36,7 +36,7 @@ export function useDeleteVolumes(environmentId: EnvironmentId) {
         );
       }
       queryClient.invalidateQueries(queryKeys.storages(environmentId));
-      queryClient.invalidateQueries(queryKeys.volumes(environmentId));
+      return queryClient.invalidateQueries(queryKeys.volumes(environmentId));
     },
     ...withGlobalError('Unable to remove volumes'),
   });

app/react/kubernetes/volumes/queries/useNamespaceVolumes.ts

@@ -1,51 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { EnvironmentId } from '@/react/portainer/environments/types';
-import { withGlobalError } from '@/react-tools/react-query';
-import axios, { parseAxiosError } from '@/portainer/services/axios';
-
-import { K8sVolumeInfo } from '../types';
-
-import { queryKeys } from './query-keys';
-import { convertToVolumeViewModels } from './useVolumesQuery';
-
-// useQuery to get a list of all volumes in a cluster
-export function useNamespaceVolumes(
-  environmentId: EnvironmentId,
-  namespace: string,
-  queryOptions?: {
-    refetchInterval?: number;
-    withApplications?: boolean;
-  }
-) {
-  return useQuery(
-    queryKeys.volumes(environmentId),
-    () =>
-      getNamespaceVolumes(environmentId, namespace, {
-        withApplications: queryOptions?.withApplications ?? false,
-      }),
-    {
-      enabled: !!namespace,
-      refetchInterval: queryOptions?.refetchInterval,
-      select: convertToVolumeViewModels,
-      ...withGlobalError('Unable to retrieve volumes'),
-    }
-  );
-}
-
-// get all volumes in a cluster
-async function getNamespaceVolumes(
-  environmentId: EnvironmentId,
-  namespace: string,
-  params?: { withApplications: boolean }
-) {
-  try {
-    const { data } = await axios.get<K8sVolumeInfo[]>(
-      `/kubernetes/${environmentId}/namespaces/${namespace}/volumes`,
-      { params }
-    );
-    return data;
-  } catch (e) {
-    throw parseAxiosError(e, 'Unable to retrieve volumes');
-  }
-}

app/react/kubernetes/volumes/queries/useVolumesQuery.ts

@@ -14,10 +14,11 @@ import { appOwnerLabel } from '../../applications/constants';
 import { queryKeys } from './query-keys';
 
 // useQuery to get a list of all volumes in a cluster
-export function useAllVolumesQuery(
+export function useAllVolumesQuery<T = K8sVolumeInfo>(
   environmentId: EnvironmentId,
   queryOptions?: {
     refetchInterval?: number;
+    select?: (volumes: K8sVolumeInfo[]) => T[];
   }
 ) {
   return useQuery(
@@ -25,7 +26,7 @@ export function useAllVolumesQuery(
     () => getAllVolumes(environmentId, { withApplications: true }),
     {
       refetchInterval: queryOptions?.refetchInterval,
-      select: convertToVolumeViewModels,
+      select: queryOptions?.select,
       ...withGlobalError('Unable to retrieve volumes'),
     }
   );