feat(pci-block-storage): rework get snapshot api and add delete snapshots

ref: #TAPC-4569

Signed-off-by: Adrien Turmo <[email protected]>

Author: aTurmo

packages/manager/apps/pci-block-storage/src/api/data/snapshot.spec.ts

@@ -0,0 +1,24 @@
+import { v6 } from '@ovh-ux/manager-core-api';
+import { describe, it, vi } from 'vitest';
+import { getSnapshotsByRegion } from '@/api/data/snapshot';
+
+vi.mock('@ovh-ux/manager-core-api');
+
+describe('getSnapshotsByRegion', () => {
+  it('should fetche volume snapshots for given projectId and region', async () => {
+    const mockVolumeSnapshots = [
+      { id: '1', name: 'Snapshot 1' },
+      { id: '2', name: 'Snapshot 2' },
+    ];
+    vi.mocked(v6.get).mockResolvedValue({ data: mockVolumeSnapshots });
+
+    const volumeSnapshots = await getSnapshotsByRegion('123', 'paris-a');
+
+    expect(v6.get).toHaveBeenCalledWith('/cloud/project/123/volume/snapshot', {
+      params: {
+        region: 'paris-a',
+      },
+    });
+    expect(volumeSnapshots).toEqual(mockVolumeSnapshots);
+  });
+});

packages/manager/apps/pci-block-storage/src/api/data/snapshot.ts

@@ -0,0 +1,37 @@
+import { v6 } from '@ovh-ux/manager-core-api';
+
+export type TVolumeSnapshot = {
+  id: string;
+  creationDate: string;
+  description: string;
+  name: string;
+  planCode: string;
+  region: string;
+  size: number;
+  status: string;
+  volumeId: string;
+};
+
+export const getSnapshotsByRegion = async (
+  projectId: string,
+  region: string,
+): Promise<TVolumeSnapshot[]> => {
+  const { data } = await v6.get(`/cloud/project/${projectId}/volume/snapshot`, {
+    params: { region },
+  });
+  return data;
+};
+
+export const deleteSnapshots = async (
+  projectId: string,
+  volumeId: string,
+  snapshotsIds: string[],
+) => {
+  const { data } = await v6.post(
+    `/cloud/project/${projectId}/volume/${volumeId}/bulkDeleteSnapshots`,
+    {
+      snapshotsIds,
+    },
+  );
+  return data;
+};

packages/manager/apps/pci-block-storage/src/api/data/volume.spec.ts

@@ -6,7 +6,6 @@ import {
   detachVolume,
   getAllVolumes,
   getVolume,
-  getVolumeSnapshot,
 } from './volume';
 
 vi.mock('@ovh-ux/manager-core-api');
@@ -23,21 +22,6 @@ describe('getVolume', () => {
   });
 });
 
-describe('getVolumeSnapshot', () => {
-  it('fetches volume snapshots for given projectId', async () => {
-    const mockVolumeSnapshots = [
-      { id: '1', name: 'Snapshot 1' },
-      { id: '2', name: 'Snapshot 2' },
-    ];
-    vi.mocked(v6.get).mockResolvedValue({ data: mockVolumeSnapshots });
-
-    const volumeSnapshots = await getVolumeSnapshot('123');
-
-    expect(v6.get).toHaveBeenCalledWith('/cloud/project/123/volume/snapshot');
-    expect(volumeSnapshots).toEqual(mockVolumeSnapshots);
-  });
-});
-
 describe('getAllVolumes', () => {
   it('fetches all volumes for given projectId', async () => {
     const mockVolumes = [

packages/manager/apps/pci-block-storage/src/api/data/volume.ts

@@ -15,18 +15,6 @@ export type TAPIVolume = {
   availabilityZone: 'any' | string;
 };
 
-export type TVolumeSnapshot = {
-  id: string;
-  creationDate: string;
-  description: string;
-  name: string;
-  planCode: string;
-  region: string;
-  size: number;
-  status: string;
-  volumeId: string;
-};
-
 export const getVolume = async (
   projectId: string,
   volumeId: string,
@@ -37,15 +25,6 @@ export const getVolume = async (
   return data;
 };
 
-export const getVolumeSnapshot = async (
-  projectId: string,
-): Promise<TVolumeSnapshot[]> => {
-  const { data } = await v6.get<TVolumeSnapshot[]>(
-    `/cloud/project/${projectId}/volume/snapshot`,
-  );
-  return data;
-};
-
 export const getAllVolumes = async (
   projectId: string,
 ): Promise<TAPIVolume[]> => {

packages/manager/apps/pci-block-storage/src/api/hooks/useSnapshot.ts

@@ -0,0 +1,52 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useVolume } from '@/api/hooks/useVolume';
+import { deleteSnapshots, getSnapshotsByRegion } from '@/api/data/snapshot';
+import { selectSnapshotForVolume } from '@/api/select/snapshot';
+import queryClient from '@/queryClient';
+
+export const getVolumeSnapshotsQueryKey = (
+  projectId: string,
+  volumeId: string,
+) => ['volume-snapshot', projectId, volumeId];
+
+export const useVolumeSnapshots = (projectId: string, volumeId: string) => {
+  const { data: volume } = useVolume(projectId, volumeId);
+
+  const select = useMemo(
+    () => (volume ? selectSnapshotForVolume(volumeId) : undefined),
+    [volume],
+  );
+
+  return useQuery({
+    queryKey: getVolumeSnapshotsQueryKey(projectId, volume?.region),
+    queryFn: () => getSnapshotsByRegion(projectId, volume?.region),
+    enabled: !!volume,
+    select,
+  });
+};
+
+interface DeleteVolumeSnapshotsProps {
+  projectId: string;
+  volumeId: string;
+  snapshotsIds: string[];
+}
+
+export const useDeleteVolumeSnapshots = ({
+  projectId,
+  volumeId,
+  snapshotsIds,
+}: DeleteVolumeSnapshotsProps) => {
+  const mutation = useMutation({
+    mutationFn: async () => deleteSnapshots(projectId, volumeId, snapshotsIds),
+    onSettled: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: getVolumeSnapshotsQueryKey(projectId, volumeId),
+      });
+    },
+  });
+  return {
+    deleteVolumeSnapshots: () => mutation.mutate(),
+    ...mutation,
+  };
+};

packages/manager/apps/pci-block-storage/src/api/hooks/useVolume.tsx

@@ -16,9 +16,7 @@ import {
   detachVolume,
   getAllVolumes,
   getVolume,
-  getVolumeSnapshot,
   TAPIVolume,
-  TVolumeSnapshot,
   updateVolume,
 } from '@/api/data/volume';
 import { UCENTS_FACTOR } from '@/hooks/currency-constants';
@@ -176,17 +174,6 @@ export const useVolume = (
   };
 };
 
-export const getVolumeSnapshotQueryKey = (projectId: string) => [
-  'volume-snapshot',
-  projectId,
-];
-
-export const useVolumeSnapshot = (projectId: string) =>
-  useQuery({
-    queryKey: ['volume-snapshot', projectId],
-    queryFn: (): Promise<TVolumeSnapshot[]> => getVolumeSnapshot(projectId),
-  });
-
 interface DeleteVolumeProps {
   projectId: string;
   volumeId: string;

packages/manager/apps/pci-block-storage/src/api/select/snapshot.ts

@@ -0,0 +1,5 @@
+import { TVolumeSnapshot } from '@/api/data/snapshot';
+
+export const selectSnapshotForVolume = (volumeId: string) => (
+  snapshots: TVolumeSnapshot[],
+) => snapshots.filter((snapshot) => snapshot.volumeId === volumeId);

packages/manager/apps/pci-block-storage/src/api/select/snapshots.spec.ts

@@ -0,0 +1,27 @@
+import { selectSnapshotForVolume } from '@/api/select/snapshot';
+import { TVolumeSnapshot } from '@/api/data/snapshot';
+
+describe('snapshots', () => {
+  describe('selectSnapshotForVolume', () => {
+    it('should keep only shnapshot which have the same volumeId as the input', () => {
+      const selectedVolumeId = '1';
+      const snapshots = [
+        { id: '1', volumeId: 'wrong' },
+        { id: '2', volumeId: 'wrong' },
+        { id: '3', volumeId: selectedVolumeId },
+        { id: '4', volumeId: selectedVolumeId },
+        { id: '5', volumeId: 'wrong' },
+        { id: '6', volumeId: selectedVolumeId },
+        { id: '7', volumeId: 'wrong' },
+      ] as TVolumeSnapshot[];
+
+      const result = selectSnapshotForVolume(selectedVolumeId)(snapshots);
+
+      expect(result).toEqual([
+        { id: '3', volumeId: selectedVolumeId },
+        { id: '4', volumeId: selectedVolumeId },
+        { id: '6', volumeId: selectedVolumeId },
+      ]);
+    });
+  });
+});

packages/manager/apps/pci-block-storage/src/pages/delete/DeleteStorage.page.spec.tsx

@@ -2,11 +2,8 @@ import { act, fireEvent } from '@testing-library/react';
 import { describe, it, vi } from 'vitest';
 import { useParams } from 'react-router-dom';
 import DeleteStorage from './DeleteStorage.page';
-import {
-  useDeleteVolume,
-  useVolume,
-  useVolumeSnapshot,
-} from '@/api/hooks/useVolume';
+import { useDeleteVolume, useVolume } from '@/api/hooks/useVolume';
+import { useVolumeSnapshots } from '@/api/hooks/useSnapshot';
 import { renderWithMockedWrappers } from '@/__tests__/renderWithMockedWrappers';
 
 const deleteVolume = vi.fn();
@@ -15,6 +12,7 @@ vi.mock('react-router-dom');
 vi.mocked(useParams).mockReturnValue({ volumeId: 'testVolume' });
 
 vi.mock('@/api/hooks/useVolume');
+vi.mock('@/api/hooks/useSnapshot');
 
 const mockedVolume = {
   data: {
@@ -37,33 +35,33 @@ vi.mocked(useDeleteVolume).mockReturnValue({
 const mockedSnapshots = {
   data: [{ id: 'snapshot1', volumeId: 'testVolume' }],
   isPending: false,
-} as ReturnType<typeof useVolumeSnapshot>;
+} as ReturnType<typeof useVolumeSnapshots>;
 
 const mockedSnapshotsEmpty = {
   data: [],
   isPending: false,
-} as ReturnType<typeof useVolumeSnapshot>;
+} as ReturnType<typeof useVolumeSnapshots>;
 
 describe('DeleteStorage', () => {
   it('renders without crashing', () => {
     vi.mocked(useVolume).mockReturnValue(mockedVolume);
-    vi.mocked(useVolumeSnapshot).mockReturnValue(mockedSnapshots);
+    vi.mocked(useVolumeSnapshots).mockReturnValue(mockedSnapshots);
 
     const { container } = renderWithMockedWrappers(<DeleteStorage />);
     expect(container).toBeTruthy();
   });
 
   it('renders spinner when isPending is true', () => {
     vi.mocked(useVolume).mockReturnValue(mockedVolumePending);
-    vi.mocked(useVolumeSnapshot).mockReturnValue(mockedSnapshots);
+    vi.mocked(useVolumeSnapshots).mockReturnValue(mockedSnapshots);
 
     const { getByTestId } = renderWithMockedWrappers(<DeleteStorage />);
     expect(getByTestId('deleteStorage-spinner')).toBeInTheDocument();
   });
 
   it('renders DeleteConstraintWarningMessage when hasSnapshot or isAttached is true', () => {
     vi.mocked(useVolume).mockReturnValue(mockedVolume);
-    vi.mocked(useVolumeSnapshot).mockReturnValue(mockedSnapshots);
+    vi.mocked(useVolumeSnapshots).mockReturnValue(mockedSnapshots);
 
     const { getByTestId } = renderWithMockedWrappers(<DeleteStorage />);
     expect(
@@ -73,7 +71,7 @@ describe('DeleteStorage', () => {
 
   it('renders DeleteWarningMessage when canDelete is true', () => {
     vi.mocked(useVolume).mockReturnValue(mockedVolume);
-    vi.mocked(useVolumeSnapshot).mockReturnValue(mockedSnapshotsEmpty);
+    vi.mocked(useVolumeSnapshots).mockReturnValue(mockedSnapshotsEmpty);
 
     const { getByText } = renderWithMockedWrappers(<DeleteStorage />);
     expect(
@@ -85,7 +83,7 @@ describe('DeleteStorage', () => {
     vi.mocked(useVolume).mockReturnValue(
       mockedVolume as ReturnType<typeof useVolume>,
     );
-    vi.mocked(useVolumeSnapshot).mockReturnValue(mockedSnapshotsEmpty);
+    vi.mocked(useVolumeSnapshots).mockReturnValue(mockedSnapshotsEmpty);
 
     const { getByText } = renderWithMockedWrappers(<DeleteStorage />);
     act(() => {

packages/manager/apps/pci-block-storage/src/pages/delete/DeleteStorage.page.tsx

@@ -4,16 +4,13 @@ import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
 import { Translation, useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useNotifications } from '@ovh-ux/manager-react-components';
-import {
-  useDeleteVolume,
-  useVolume,
-  useVolumeSnapshot,
-} from '@/api/hooks/useVolume';
+import { useDeleteVolume, useVolume } from '@/api/hooks/useVolume';
 import DeleteWarningMessage from './DeleteWarningMessage';
 import DeleteConstraintWarningMessage from './DeleteConstraintWarningMessage';
 import { ButtonLink } from '@/components/button-link/ButtonLink';
 import { useTrackBanner } from '@/hooks/useTrackBanner';
 import { Button } from '@/components/button/Button';
+import { useVolumeSnapshots } from '@/api/hooks/useSnapshot';
 
 export default function DeleteStorage() {
   const { projectId, volumeId } = useParams();
@@ -26,8 +23,9 @@ export default function DeleteStorage() {
     projectId,
     volumeId,
   );
-  const { data: snapshots, isPending: isSnapshotPending } = useVolumeSnapshot(
+  const { data: snapshots, isPending: isSnapshotPending } = useVolumeSnapshots(
     projectId,
+    volumeId,
   );
 
   const onTrackingBannerError = useTrackBanner(
@@ -76,8 +74,7 @@ export default function DeleteStorage() {
   });
 
   const isPending = isVolumePending || isSnapshotPending || isDeletePending;
-  const hasSnapshot =
-    !isPending && snapshots?.some((s) => s.volumeId === volumeId);
+  const hasSnapshot = !isPending && snapshots?.length > 0;
   const isAttached = !isPending && volume?.attachedTo.length > 0;
   const canDelete = !isPending && !isAttached && !hasSnapshot;