feat: restricted permissions for storage pool [WD-19339]

src/api/networks.tsx

@@ -22,10 +22,10 @@ export const fetchNetworks = (
   target?: string,
 ): Promise<LxdNetwork[]> => {
   const targetParam = target ? `&target=${target}` : "";
-  const entitlements = `&${withEntitlementsQuery(
+  const entitlements = withEntitlementsQuery(
     isFineGrained,
     networkEntitlements,
-  )}`;
+  );
   return new Promise((resolve, reject) => {
     fetch(
       `/1.0/networks?project=${project}&recursion=1${targetParam}${entitlements}`,
@@ -81,10 +81,10 @@ export const fetchNetwork = (
   target?: string,
 ): Promise<LxdNetwork> => {
   const targetParam = target ? `&target=${target}` : "";
-  const entitlements = `&${withEntitlementsQuery(
+  const entitlements = withEntitlementsQuery(
     isFineGrained,
     networkEntitlements,
-  )}`;
+  );
   return new Promise((resolve, reject) => {
     fetch(
       `/1.0/networks/${name}?project=${project}${targetParam}${entitlements}`,

src/api/storage-pools.tsx

@@ -17,23 +17,38 @@ import type { LxdOperationResponse } from "types/operation";
 import axios, { AxiosResponse } from "axios";
 import type { LxdClusterMember } from "types/cluster";
 import { ClusterSpecificValues } from "components/ClusterSpecificSelect";
+import { withEntitlementsQuery } from "util/entitlements/api";
+
+export const storagePoolEntitlements = ["can_edit", "can_delete"];
+export const storageVolumeEntitlements = ["can_delete"];
 
 export const fetchStoragePool = (
   pool: string,
+  isFineGrained: boolean | null,
   target?: string,
 ): Promise<LxdStoragePool> => {
+  const entitlements = withEntitlementsQuery(
+    isFineGrained,
+    storagePoolEntitlements,
+  );
   return new Promise((resolve, reject) => {
     const targetParam = target ? `&target=${target}` : "";
-    fetch(`/1.0/storage-pools/${pool}?recursion=1${targetParam}`)
+    fetch(`/1.0/storage-pools/${pool}?recursion=1${targetParam}${entitlements}`)
       .then(handleResponse)
       .then((data: LxdApiResponse<LxdStoragePool>) => resolve(data.metadata))
       .catch(reject);
   });
 };
 
-export const fetchStoragePools = (): Promise<LxdStoragePool[]> => {
+export const fetchStoragePools = (
+  isFineGrained: boolean | null,
+): Promise<LxdStoragePool[]> => {
+  const entitlements = withEntitlementsQuery(
+    isFineGrained,
+    storagePoolEntitlements,
+  );
   return new Promise((resolve, reject) => {
-    fetch(`/1.0/storage-pools?recursion=1`)
+    fetch(`/1.0/storage-pools?recursion=1${entitlements}`)
       .then(handleResponse)
       .then((data: LxdApiResponse<LxdStoragePool[]>) => resolve(data.metadata))
       .catch(reject);
@@ -204,11 +219,12 @@ export const deleteStoragePool = (pool: string): Promise<void> => {
 export const fetchPoolFromClusterMembers = (
   poolName: string,
   clusterMembers: LxdClusterMember[],
+  isFineGrained: boolean | null,
 ): Promise<LXDStoragePoolOnClusterMember[]> => {
   return new Promise((resolve, reject) => {
     Promise.allSettled(
       clusterMembers.map((member) => {
-        return fetchStoragePool(poolName, member.server_name);
+        return fetchStoragePool(poolName, isFineGrained, member.server_name);
       }),
     )
       .then((results) => {
@@ -235,9 +251,16 @@ export const fetchPoolFromClusterMembers = (
 export const fetchStorageVolumes = (
   pool: string,
   project: string,
+  isFineGrained: boolean | null,
 ): Promise<LxdStorageVolume[]> => {
+  const entitlements = withEntitlementsQuery(
+    isFineGrained,
+    storageVolumeEntitlements,
+  );
   return new Promise((resolve, reject) => {
-    fetch(`/1.0/storage-pools/${pool}/volumes?project=${project}&recursion=1`)
+    fetch(
+      `/1.0/storage-pools/${pool}/volumes?project=${project}&recursion=1${entitlements}`,
+    )
       .then(handleResponse)
       .then((data: LxdApiResponse<LxdStorageVolume[]>) =>
         resolve(data.metadata.map((volume) => ({ ...volume, pool }))),
@@ -248,9 +271,14 @@ export const fetchStorageVolumes = (
 
 export const fetchAllStorageVolumes = (
   project: string,
+  isFineGrained: boolean | null,
 ): Promise<LxdStorageVolume[]> => {
+  const entitlements = withEntitlementsQuery(
+    isFineGrained,
+    storageVolumeEntitlements,
+  );
   return new Promise((resolve, reject) => {
-    fetch(`/1.0/storage-volumes?recursion=1&project=${project}`)
+    fetch(`/1.0/storage-volumes?recursion=1&project=${project}${entitlements}`)
       .then(handleResponse)
       .then((data: LxdApiResponse<LxdStorageVolume[]>) =>
         resolve(data.metadata),
@@ -264,10 +292,15 @@ export const fetchStorageVolume = (
   project: string,
   type: string,
   volume: string,
+  isFineGrained: boolean | null,
 ): Promise<LxdStorageVolume> => {
+  const entitlements = withEntitlementsQuery(
+    isFineGrained,
+    storageVolumeEntitlements,
+  );
   return new Promise((resolve, reject) => {
     fetch(
-      `/1.0/storage-pools/${pool}/volumes/${type}/${volume}?project=${project}&recursion=1`,
+      `/1.0/storage-pools/${pool}/volumes/${type}/${volume}?project=${project}&recursion=1${entitlements}`,
     )
       .then(handleEtagResponse)
       .then((data) => resolve({ ...data, pool } as LxdStorageVolume))

src/components/forms/ClusterSpecificInput.tsx

@@ -19,6 +19,7 @@ interface Props {
   helpText?: string | ReactNode;
   placeholder?: string;
   classname?: string;
+  disabledReason?: string;
 }
 
 const ClusterSpecificInput: FC<Props> = ({
@@ -36,6 +37,7 @@ const ClusterSpecificInput: FC<Props> = ({
   helpText,
   placeholder,
   classname = "u-sv3",
+  disabledReason,
 }) => {
   const [isSpecific, setIsSpecific] = useState<boolean | null>(
     isDefaultSpecific,
@@ -80,6 +82,8 @@ const ClusterSpecificInput: FC<Props> = ({
             }
             setIsSpecific((val) => !val);
           }}
+          disabled={!!disabledReason}
+          title={disabledReason}
         />
       )}
       {isSpecific && (
@@ -118,8 +122,9 @@ const ClusterSpecificInput: FC<Props> = ({
                       className="u-no-margin--bottom"
                       value={activeValue}
                       onChange={(e) => setValueForMember(e.target.value, item)}
-                      disabled={disabled}
+                      disabled={!!disabledReason || disabled}
                       placeholder={placeholder}
+                      title={disabledReason}
                     />
                   )}
                 </div>
@@ -151,9 +156,10 @@ const ClusterSpecificInput: FC<Props> = ({
               type="text"
               value={firstValue}
               onChange={(e) => setValueForAllMembers(e.target.value)}
-              disabled={disabled}
+              disabled={!!disabledReason || disabled}
               help={helpText}
               placeholder={placeholder}
+              title={disabledReason}
             />
           )}
         </div>

src/components/forms/ClusteredDiskSizeSelector.tsx

@@ -10,13 +10,15 @@ interface Props {
   setValue: (value: ClusterSpecificValues) => void;
   values?: ClusterSpecificValues;
   helpText?: string;
+  disabledReason?: string;
 }
 
 const ClusteredDiskSizeSelector: FC<Props> = ({
   id,
   setValue,
   values,
   helpText,
+  disabledReason,
 }) => {
   const { data: clusterMembers = [] } = useClusterMembers();
   const memberNames = clusterMembers.map((member) => member.server_name);
@@ -59,6 +61,8 @@ const ClusteredDiskSizeSelector: FC<Props> = ({
             setValueForAllMembers(firstValue);
             setIsSpecific((val) => !val);
           }}
+          disabled={!!disabledReason}
+          title={disabledReason}
         />
       }
       {isSpecific && (
@@ -81,7 +85,7 @@ const ClusteredDiskSizeSelector: FC<Props> = ({
                     id={memberNames.indexOf(item) === 0 ? id : `${id}-${item}`}
                     value={activeValue}
                     setMemoryLimit={(value) => setValueForMember(value, item)}
-                    disabled={false}
+                    disabled={!!disabledReason}
                     classname="u-no-margin--bottom"
                   />
                 </div>
@@ -103,7 +107,7 @@ const ClusteredDiskSizeSelector: FC<Props> = ({
               id={id}
               value={firstValue}
               setMemoryLimit={(value) => setValueForAllMembers(value)}
-              disabled={false}
+              disabled={!!disabledReason}
               help={helpText}
             />
           }

src/components/forms/DiskDeviceForm.tsx

@@ -1,8 +1,5 @@
 import { FC } from "react";
 import { Input, useNotify } from "@canonical/react-components";
-import { useQuery } from "@tanstack/react-query";
-import { queryKeys } from "util/queryKeys";
-import { fetchStoragePools } from "api/storage-pools";
 import { InstanceAndProfileFormikProps } from "./instanceAndProfileFormValues";
 import Loader from "components/Loader";
 import { getInheritedDiskDevices } from "util/configInheritance";
@@ -12,6 +9,7 @@ import DiskDeviceFormCustom from "./DiskDeviceFormCustom";
 import classnames from "classnames";
 import ScrollableForm from "components/ScrollableForm";
 import { useProfiles } from "context/useProfiles";
+import { useStoragePools } from "context/useStoragePools";
 
 interface Props {
   formik: InstanceAndProfileFormikProps;
@@ -35,10 +33,7 @@ const DiskDeviceForm: FC<Props> = ({ formik, project }) => {
     data: pools = [],
     isLoading: isStorageLoading,
     error: storageError,
-  } = useQuery({
-    queryKey: [queryKeys.storage],
-    queryFn: () => fetchStoragePools(),
-  });
+  } = useStoragePools();
 
   if (storageError) {
     notify.failure("Loading storage pools failed", storageError);

src/components/forms/DiskSizeSelector.tsx

@@ -12,6 +12,7 @@ interface Props {
   setMemoryLimit: (val: string) => void;
   disabled?: boolean;
   classname?: string;
+  disabledReason?: string;
 }
 
 const DiskSizeSelector: FC<Props> = ({
@@ -23,6 +24,7 @@ const DiskSizeSelector: FC<Props> = ({
   setMemoryLimit,
   disabled,
   classname,
+  disabledReason,
 }) => {
   const limit = parseMemoryLimit(value) ?? {
     value: 1,
@@ -55,6 +57,7 @@ const DiskSizeSelector: FC<Props> = ({
           value={value?.match(/^\d/) ? limit.value : ""}
           disabled={disabled}
           className={classname}
+          title={disabledReason}
         />
         <Select
           id={`memUnitSelect-${id}`}
@@ -68,6 +71,7 @@ const DiskSizeSelector: FC<Props> = ({
           value={limit.unit}
           disabled={disabled}
           className={classname}
+          title={disabledReason}
         />
       </div>
       {(help || helpTotal) && (

src/context/loadCustomVolumes.tsx

@@ -5,10 +5,15 @@ import { loadVolumes } from "context/loadIsoVolumes";
 export const loadCustomVolumes = async (
   project: string,
   hasStorageVolumesAll: boolean,
+  isFineGrained: boolean | null,
 ): Promise<LxdStorageVolume[]> => {
   const result: LxdStorageVolume[] = [];
 
-  const volumes = await loadVolumes(project, hasStorageVolumesAll);
+  const volumes = await loadVolumes(
+    project,
+    hasStorageVolumesAll,
+    isFineGrained,
+  );
   volumes.forEach((volume) => {
     const contentTypes = ["filesystem", "block"];
     const isFilesystemOrBlock = contentTypes.includes(volume.content_type);

src/context/loadIsoVolumes.tsx

@@ -10,9 +10,14 @@ import type { LxdStorageVolume } from "types/storage";
 export const loadIsoVolumes = async (
   project: string,
   hasStorageVolumesAll: boolean,
+  isFineGrained: boolean | null,
 ): Promise<RemoteImage[]> => {
   const remoteImages: RemoteImage[] = [];
-  const allVolumes = await loadVolumes(project, hasStorageVolumesAll);
+  const allVolumes = await loadVolumes(
+    project,
+    hasStorageVolumesAll,
+    isFineGrained,
+  );
   allVolumes.forEach((volume) => {
     if (volume.content_type === "iso") {
       const image = isoToRemoteImage(volume);
@@ -26,20 +31,24 @@ export const loadIsoVolumes = async (
 export const loadVolumes = async (
   project: string,
   hasStorageVolumesAll: boolean,
+  isFineGrained: boolean | null,
 ): Promise<LxdStorageVolume[]> => {
   return hasStorageVolumesAll
-    ? fetchAllStorageVolumes(project)
-    : collectAllStorageVolumes(project);
+    ? fetchAllStorageVolumes(project, isFineGrained)
+    : collectAllStorageVolumes(project, isFineGrained);
 };
 
 export const collectAllStorageVolumes = async (
   project: string,
+  isFineGrained: boolean | null,
 ): Promise<LxdStorageVolume[]> => {
   const allVolumes: LxdStorageVolume[] = [];
-  const pools = await fetchStoragePools();
+  const pools = await fetchStoragePools(isFineGrained);
 
   const poolVolumes = await Promise.allSettled(
-    pools.map(async (pool) => fetchStorageVolumes(pool.name, project)),
+    pools.map(async (pool) =>
+      fetchStorageVolumes(pool.name, project, isFineGrained),
+    ),
   );
 
   poolVolumes.forEach((result, index) => {

src/context/useStoragePools.tsx

@@ -0,0 +1,48 @@
+import { useQuery } from "@tanstack/react-query";
+import { queryKeys } from "util/queryKeys";
+import { UseQueryResult } from "@tanstack/react-query";
+import { useAuth } from "./auth";
+import { LxdStoragePool, LXDStoragePoolOnClusterMember } from "types/storage";
+import {
+  fetchPoolFromClusterMembers,
+  fetchStoragePool,
+  fetchStoragePools,
+} from "api/storage-pools";
+import { useClusterMembers } from "./useClusterMembers";
+
+export const useStoragePool = (
+  pool: string,
+  target?: string,
+  enabled?: boolean,
+): UseQueryResult<LxdStoragePool> => {
+  const { isFineGrained } = useAuth();
+  return useQuery({
+    queryKey: [queryKeys.storage, pool, target],
+    queryFn: () => fetchStoragePool(pool, isFineGrained, target),
+    enabled: (enabled ?? true) && isFineGrained !== null,
+  });
+};
+
+export const useStoragePools = (
+  enabled?: boolean,
+): UseQueryResult<LxdStoragePool[]> => {
+  const { isFineGrained } = useAuth();
+  return useQuery({
+    queryKey: [queryKeys.storage],
+    queryFn: () => fetchStoragePools(isFineGrained),
+    enabled: (enabled ?? true) && isFineGrained !== null,
+  });
+};
+
+export const usePoolFromClusterMembers = (
+  pool: string,
+): UseQueryResult<LXDStoragePoolOnClusterMember[]> => {
+  const { isFineGrained } = useAuth();
+  const { data: clusterMembers = [] } = useClusterMembers();
+  return useQuery({
+    queryKey: [queryKeys.storage, pool, queryKeys.cluster],
+    queryFn: () =>
+      fetchPoolFromClusterMembers(pool, clusterMembers, isFineGrained),
+    enabled: isFineGrained !== null && clusterMembers.length > 0,
+  });
+};