feat: restricted permissions for networks [WD-18903] (canonical#1114)

src/api/networks.tsx

@@ -12,14 +12,24 @@ import type { LxdApiResponse } from "types/apiResponse";
 import { areNetworksEqual } from "util/networks";
 import type { ClusterSpecificValues } from "components/ClusterSpecificSelect";
 import type { LxdClusterMember } from "types/cluster";
+import { withEntitlementsQuery } from "util/entitlements/api";
+
+const networkEntitlements = ["can_edit", "can_delete"];
 
 export const fetchNetworks = (
   project: string,
+  isFineGrained: boolean | null,
   target?: string,
 ): Promise<LxdNetwork[]> => {
   const targetParam = target ? `&target=${target}` : "";
+  const entitlements = `&${withEntitlementsQuery(
+    isFineGrained,
+    networkEntitlements,
+  )}`;
   return new Promise((resolve, reject) => {
-    fetch(`/1.0/networks?project=${project}&recursion=1${targetParam}`)
+    fetch(
+      `/1.0/networks?project=${project}&recursion=1${targetParam}${entitlements}`,
+    )
       .then(handleResponse)
       .then((data: LxdApiResponse<LxdNetwork[]>) => {
         const filteredNetworks = data.metadata.filter(
@@ -36,11 +46,12 @@ export const fetchNetworks = (
 export const fetchNetworksFromClusterMembers = (
   project: string,
   clusterMembers: LxdClusterMember[],
+  isFineGrained: boolean | null,
 ): Promise<LXDNetworkOnClusterMember[]> => {
   return new Promise((resolve, reject) => {
     Promise.allSettled(
       clusterMembers.map((member) => {
-        return fetchNetworks(project, member.server_name);
+        return fetchNetworks(project, isFineGrained, member.server_name);
       }),
     )
       .then((results) => {
@@ -66,11 +77,18 @@ export const fetchNetworksFromClusterMembers = (
 export const fetchNetwork = (
   name: string,
   project: string,
+  isFineGrained: boolean | null,
   target?: string,
 ): Promise<LxdNetwork> => {
   const targetParam = target ? `&target=${target}` : "";
+  const entitlements = `&${withEntitlementsQuery(
+    isFineGrained,
+    networkEntitlements,
+  )}`;
   return new Promise((resolve, reject) => {
-    fetch(`/1.0/networks/${name}?project=${project}${targetParam}`)
+    fetch(
+      `/1.0/networks/${name}?project=${project}${targetParam}${entitlements}`,
+    )
       .then(handleEtagResponse)
       .then((data) => resolve(data as LxdNetwork))
       .catch(reject);
@@ -81,11 +99,12 @@ export const fetchNetworkFromClusterMembers = (
   name: string,
   project: string,
   clusterMembers: LxdClusterMember[],
+  isFineGrained: boolean | null,
 ): Promise<LXDNetworkOnClusterMember[]> => {
   return new Promise((resolve, reject) => {
     Promise.allSettled(
       clusterMembers.map((member) => {
-        return fetchNetwork(name, project, member.server_name);
+        return fetchNetwork(name, project, isFineGrained, member.server_name);
       }),
     )
       .then((results) => {
@@ -174,7 +193,12 @@ export const createNetwork = (
         // when creating a network on localhost the request will get cancelled
         // check manually if creation was successful
         if (e.message === "Failed to fetch") {
-          const newNetwork = await fetchNetwork(network.name ?? "", project);
+          const newNetwork = await fetchNetwork(
+            network.name ?? "",
+            project,
+            false,
+            target,
+          );
           if (newNetwork) {
             resolve();
           }
@@ -207,7 +231,12 @@ export const updateNetwork = (
         // when updating a network on localhost the request will get cancelled
         // check manually if the edit was successful
         if (e.message === "Failed to fetch") {
-          const newNetwork = await fetchNetwork(network.name ?? "", project);
+          const newNetwork = await fetchNetwork(
+            network.name ?? "",
+            project,
+            false,
+            target,
+          );
           if (areNetworksEqual(network, newNetwork)) {
             resolve();
           }
@@ -269,7 +298,7 @@ export const renameNetwork = (
         // when renaming a network on localhost the request will get cancelled
         // check manually if renaming was successful
         if (e.message === "Failed to fetch") {
-          const renamedNetwork = await fetchNetwork(newName, project);
+          const renamedNetwork = await fetchNetwork(newName, project, false);
           if (renamedNetwork) {
             resolve();
           }

src/api/projects.tsx

@@ -9,6 +9,7 @@ const projectEntitlements = [
   "can_create_image_aliases",
   "can_create_instances",
   "can_create_storage_volumes",
+  "can_create_networks",
 ];
 
 export const fetchProjects = (

src/components/ClusterSpecificSelect.tsx

@@ -28,6 +28,7 @@ interface Props {
   canToggleSpecific?: boolean;
   isDefaultSpecific?: boolean;
   clusterMemberLinkTarget?: (member: string) => string;
+  disableReason?: string;
 }
 
 const ClusterSpecificSelect: FC<Props> = ({
@@ -40,6 +41,7 @@ const ClusterSpecificSelect: FC<Props> = ({
   canToggleSpecific = true,
   isDefaultSpecific = false,
   clusterMemberLinkTarget = () => "/ui/cluster",
+  disableReason,
 }) => {
   const [isSpecific, setIsSpecific] = useState(isDefaultSpecific);
 
@@ -131,7 +133,10 @@ const ClusterSpecificSelect: FC<Props> = ({
                   {isReadOnly ? (
                     <>
                       {activeValue}
-                      <FormEditButton toggleReadOnly={toggleReadOnly} />
+                      <FormEditButton
+                        toggleReadOnly={toggleReadOnly}
+                        disableReason={disableReason}
+                      />
                     </>
                   ) : (
                     <Select
@@ -159,7 +164,10 @@ const ClusterSpecificSelect: FC<Props> = ({
           {isReadOnly ? (
             <>
               {firstValue}
-              <FormEditButton toggleReadOnly={toggleReadOnly} />
+              <FormEditButton
+                toggleReadOnly={toggleReadOnly}
+                disableReason={disableReason}
+              />
             </>
           ) : (
             <Select

src/components/FormEditButton.tsx

@@ -3,17 +3,19 @@ import { Button, Icon } from "@canonical/react-components";
 
 interface Props {
   toggleReadOnly: () => void;
+  disableReason?: string;
 }
 
-const FormEditButton: FC<Props> = ({ toggleReadOnly }) => {
+const FormEditButton: FC<Props> = ({ toggleReadOnly, disableReason }) => {
   return (
     <Button
       onClick={toggleReadOnly}
       className="u-no-margin--bottom"
       type="button"
       appearance="base"
-      title="Edit"
+      title={disableReason ?? "Edit"}
       hasIcon
+      disabled={!!disableReason}
     >
       <Icon name="edit" />
     </Button>

src/components/NetworkListTable.tsx

@@ -1,13 +1,11 @@
 import { FC } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { queryKeys } from "util/queryKeys";
 import { MainTable, Notification } from "@canonical/react-components";
 import Loader from "components/Loader";
-import { fetchNetworks } from "api/networks";
 import { isNicDevice } from "util/devices";
 import ResourceLink from "components/ResourceLink";
 import { useParams } from "react-router-dom";
 import type { LxdDevices } from "types/device";
+import { useNetworks } from "context/useNetworks";
 
 interface Props {
   onFailure: (title: string, e: unknown) => void;
@@ -21,10 +19,7 @@ const NetworkListTable: FC<Props> = ({ onFailure, devices }) => {
     data: networks = [],
     error,
     isLoading,
-  } = useQuery({
-    queryKey: [queryKeys.projects, project, queryKeys.networks],
-    queryFn: () => fetchNetworks(project as string),
-  });
+  } = useNetworks(project as string);
 
   if (error) {
     onFailure("Loading networks failed", error);

src/components/forms/NetworkDevicesForm.tsx

@@ -9,7 +9,6 @@ import {
 } from "@canonical/react-components";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
-import { fetchNetworks } from "api/networks";
 import type { LxdNicDevice } from "types/device";
 import { InstanceAndProfileFormikProps } from "./instanceAndProfileFormValues";
 import ScrollableConfigurationTable from "components/forms/ScrollableConfigurationTable";
@@ -23,6 +22,7 @@ import { isNicDeviceNameMissing } from "util/instanceValidation";
 import { ensureEditMode } from "util/instanceEdit";
 import { getExistingDeviceNames } from "util/devices";
 import { focusField } from "util/formFields";
+import { useNetworks } from "context/useNetworks";
 
 interface Props {
   formik: InstanceAndProfileFormikProps;
@@ -49,10 +49,7 @@ const NetworkDevicesForm: FC<Props> = ({ formik, project }) => {
     data: networks = [],
     isLoading: isNetworkLoading,
     error: networkError,
-  } = useQuery({
-    queryKey: [queryKeys.projects, project, queryKeys.networks],
-    queryFn: () => fetchNetworks(project),
-  });
+  } = useNetworks(project);
 
   useEffect(() => {
     if (networkError) {

src/components/forms/YamlForm.tsx

@@ -2,10 +2,7 @@ import { FC, ReactNode, useEffect, useRef, useState } from "react";
 import { Editor, loader } from "@monaco-editor/react";
 import { updateMaxHeight } from "util/updateMaxHeight";
 import useEventListener from "util/useEventListener";
-import {
-  editor,
-  IMarkdownString,
-} from "monaco-editor/esm/vs/editor/editor.api";
+import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
 import classnames from "classnames";
 
@@ -19,7 +16,7 @@ interface Props {
   children?: ReactNode;
   autoResize?: boolean;
   readOnly?: boolean;
-  readOnlyMessage?: IMarkdownString;
+  readOnlyMessage?: string;
 }
 
 const YamlForm: FC<Props> = ({
@@ -75,7 +72,7 @@ const YamlForm: FC<Props> = ({
             },
             overviewRulerLanes: 0,
             readOnly: readOnly,
-            readOnlyMessage: readOnlyMessage,
+            readOnlyMessage: { value: readOnlyMessage ?? "" },
           }}
           onMount={(editor: IStandaloneCodeEditor) => {
             setEditor(editor);

src/context/useNetworks.tsx

@@ -0,0 +1,95 @@
+import { useQuery } from "@tanstack/react-query";
+import { queryKeys } from "util/queryKeys";
+import { UseQueryResult } from "@tanstack/react-query";
+import { useAuth } from "./auth";
+import {
+  fetchNetwork,
+  fetchNetworkFromClusterMembers,
+  fetchNetworks,
+  fetchNetworksFromClusterMembers,
+} from "api/networks";
+import { LxdNetwork, LXDNetworkOnClusterMember } from "types/network";
+import { useClusterMembers } from "./useClusterMembers";
+
+export const useNetworks = (
+  project: string,
+  target?: string,
+  enabled?: boolean,
+): UseQueryResult<LxdNetwork[]> => {
+  const { isFineGrained } = useAuth();
+
+  const queryKey = [queryKeys.projects, project, queryKeys.networks];
+  if (target) {
+    queryKey.push(queryKeys.members);
+    queryKey.push(target);
+  }
+
+  return useQuery({
+    queryKey,
+    queryFn: () => fetchNetworks(project, isFineGrained, target),
+    enabled: (enabled ?? true) && isFineGrained !== null,
+  });
+};
+
+export const useNetwork = (
+  network: string,
+  project: string,
+  target?: string,
+  enabled?: boolean,
+): UseQueryResult<LxdNetwork> => {
+  const { isFineGrained } = useAuth();
+
+  const queryKey = [queryKeys.projects, project, queryKeys.networks, network];
+  if (target) {
+    queryKey.push(queryKeys.members);
+    queryKey.push(target);
+  }
+
+  return useQuery({
+    queryKey,
+    queryFn: () => fetchNetwork(network, project, isFineGrained, target),
+    enabled: (enabled ?? true) && isFineGrained !== null,
+  });
+};
+
+export const useNetworksFromClusterMembers = (
+  project: string,
+): UseQueryResult<LXDNetworkOnClusterMember[]> => {
+  const { isFineGrained } = useAuth();
+  const { data: clusterMembers = [] } = useClusterMembers();
+
+  return useQuery({
+    queryKey: [queryKeys.networks, project, queryKeys.cluster],
+    queryFn: () =>
+      fetchNetworksFromClusterMembers(project, clusterMembers, isFineGrained),
+    enabled: isFineGrained !== null && clusterMembers.length > 0,
+  });
+};
+
+export const useNetworkFromClusterMembers = (
+  network: string,
+  project: string,
+  enabled?: boolean,
+): UseQueryResult<LXDNetworkOnClusterMember[]> => {
+  const { isFineGrained } = useAuth();
+  const { data: clusterMembers = [] } = useClusterMembers();
+
+  return useQuery({
+    queryKey: [
+      queryKeys.projects,
+      project,
+      queryKeys.networks,
+      network,
+      queryKeys.cluster,
+    ],
+    queryFn: () =>
+      fetchNetworkFromClusterMembers(
+        network,
+        project,
+        clusterMembers,
+        isFineGrained,
+      ),
+    enabled:
+      (enabled ?? true) && isFineGrained !== null && clusterMembers.length > 0,
+  });
+};

src/pages/instances/EditInstance.tsx

@@ -276,7 +276,7 @@ const EditInstance: FC<Props> = ({ instance }) => {
                   void formik.setFieldValue("yaml", yaml);
                 }}
                 readOnly={!!formik.values.editRestriction}
-                readOnlyMessage={{ value: formik.values.editRestriction ?? "" }}
+                readOnlyMessage={formik.values.editRestriction}
               >
                 <YamlNotification
                   entity="instance"