feat(volumes) use fetch all volumes endpoint

Signed-off-by: David Edler <[email protected]>

src/api/storage-pools.tsx

@@ -203,6 +203,19 @@ export const fetchStorageVolumes = (
   });
 };
 
+export const fetchAllStorageVolumes = (
+  project: string,
+): Promise<LxdStorageVolume[]> => {
+  return new Promise((resolve, reject) => {
+    fetch(`/1.0/storage-volumes?recursion=1&project=${project}`)
+      .then(handleResponse)
+      .then((data: LxdApiResponse<LxdStorageVolume[]>) =>
+        resolve(data.metadata),
+      )
+      .catch(reject);
+  });
+};
+
 export const fetchStorageVolume = (
   pool: string,
   project: string,

src/context/loadIsoVolumes.tsx

@@ -1,13 +1,18 @@
-import { fetchStoragePools, fetchStorageVolumes } from "api/storage-pools";
+import {
+  fetchAllStorageVolumes,
+  fetchStoragePools,
+  fetchStorageVolumes,
+} from "api/storage-pools";
 import { isoToRemoteImage } from "util/images";
 import { RemoteImage } from "types/image";
 import { LxdStorageVolume } from "types/storage";
 
 export const loadIsoVolumes = async (
   project: string,
+  hasStorageVolumesAll: boolean,
 ): Promise<RemoteImage[]> => {
   const remoteImages: RemoteImage[] = [];
-  const allVolumes = await loadVolumes(project);
+  const allVolumes = await loadVolumes(project, hasStorageVolumesAll);
   allVolumes.forEach((volume) => {
     if (volume.content_type === "iso") {
       const image = isoToRemoteImage(volume);
@@ -20,6 +25,15 @@ export const loadIsoVolumes = async (
 
 export const loadVolumes = async (
   project: string,
+  hasStorageVolumesAll: boolean,
+): Promise<LxdStorageVolume[]> => {
+  return hasStorageVolumesAll
+    ? fetchAllStorageVolumes(project)
+    : collectAllStorageVolumes(project);
+};
+
+export const collectAllStorageVolumes = async (
+  project: string,
 ): Promise<LxdStorageVolume[]> => {
   const allVolumes: LxdStorageVolume[] = [];
   const pools = await fetchStoragePools(project);

src/context/useSupportedFeatures.tsx

@@ -16,6 +16,7 @@ export const useSupportedFeatures = () => {
     hasProjectsNetworksZones: apiExtensions.has("projects_networks_zones"),
     hasStorageBuckets: apiExtensions.has("storage_buckets"),
     hasMetadataConfiguration: apiExtensions.has("metadata_configuration"),
+    hasStorageVolumesAll: apiExtensions.has("storage_volumes_all"),
     hasLocalDocumentation:
       !!serverVersion && serverMajor >= 5 && serverMinor >= 19,
     hasDocumentationObject:

src/pages/images/CustomIsoSelector.tsx

@@ -8,6 +8,7 @@ import Loader from "components/Loader";
 import { useProject } from "context/project";
 import { LxdImageType, RemoteImage } from "types/image";
 import { IsoImage } from "types/iso";
+import { useSupportedFeatures } from "context/useSupportedFeatures";
 
 interface Props {
   primaryImage: IsoImage | null;
@@ -24,10 +25,11 @@ const CustomIsoSelector: FC<Props> = ({
 }) => {
   const { project } = useProject();
   const projectName = project?.name ?? "";
+  const { hasStorageVolumesAll } = useSupportedFeatures();
 
   const { data: images = [], isLoading } = useQuery({
     queryKey: [queryKeys.isoVolumes, project],
-    queryFn: () => loadIsoVolumes(projectName),
+    queryFn: () => loadIsoVolumes(projectName, hasStorageVolumesAll),
   });
 
   const headers = [

src/pages/storage/CustomIsoList.tsx

@@ -20,19 +20,21 @@ import { Link } from "react-router-dom";
 import { useDocs } from "context/useDocs";
 import useSortTableData from "util/useSortTableData";
 import { useToastNotification } from "context/toastNotificationProvider";
+import { useSupportedFeatures } from "context/useSupportedFeatures";
 
 interface Props {
   project: string;
 }
 
 const CustomIsoList: FC<Props> = ({ project }) => {
   const docBaseLink = useDocs();
+  const { hasStorageVolumesAll } = useSupportedFeatures();
   const toastNotify = useToastNotification();
   const [query, setQuery] = useState<string>("");
 
   const { data: images = [], isLoading } = useQuery({
     queryKey: [queryKeys.isoVolumes, project],
-    queryFn: () => loadIsoVolumes(project),
+    queryFn: () => loadIsoVolumes(project, hasStorageVolumesAll),
   });
 
   const headers = [

src/pages/storage/StorageVolumes.tsx

@@ -49,13 +49,15 @@ import useEventListener from "@use-it/event-listener";
 import { useProject } from "context/project";
 import { isSnapshotsDisabled } from "util/snapshots";
 import useSortTableData from "util/useSortTableData";
+import { useSupportedFeatures } from "context/useSupportedFeatures";
 
 const StorageVolumes: FC = () => {
   const docBaseLink = useDocs();
   const notify = useNotify();
   const { project } = useParams<{ project: string }>();
   const [searchParams] = useSearchParams();
   const [isSmallScreen, setSmallScreen] = useState(figureCollapsedScreen());
+  const { hasStorageVolumesAll } = useSupportedFeatures();
   const resize = () => {
     setSmallScreen(figureCollapsedScreen());
   };
@@ -84,7 +86,7 @@ const StorageVolumes: FC = () => {
     isLoading,
   } = useQuery({
     queryKey: [queryKeys.volumes, project],
-    queryFn: () => loadVolumes(project),
+    queryFn: () => loadVolumes(project, hasStorageVolumesAll),
   });
 
   if (error) {