review: review changes

Signed-off-by: Mason Hu <[email protected]>
canonical · Feb 19, 2025 · aa540ab · aa540ab
1 parent 82aac9b
commit aa540ab
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 171 deletions.
diff --git a/src/api/networks.tsx b/src/api/networks.tsx
@@ -16,18 +16,19 @@ import { withEntitlementsQuery } from "util/entitlements/api";
 
 const networkEntitlements = ["can_edit", "can_delete"];
 
-export const fetchNetworksOnMember = (
+export const fetchNetworks = (
   project: string,
-  target: 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&target=${target}${entitlements}`,
+      `/1.0/networks?project=${project}&recursion=1${targetParam}${entitlements}`,
     )
       .then(handleResponse)
       .then((data: LxdApiResponse<LxdNetwork[]>) => {
@@ -42,29 +43,6 @@ export const fetchNetworksOnMember = (
   });
 };
 
-export const fetchNetworks = (
-  project: string,
-  isFineGrained: boolean | null,
-): Promise<LxdNetwork[]> => {
-  const entitlements = `&${withEntitlementsQuery(
-    isFineGrained,
-    networkEntitlements,
-  )}`;
-  return new Promise((resolve, reject) => {
-    fetch(`/1.0/networks?project=${project}&recursion=1${entitlements}`)
-      .then(handleResponse)
-      .then((data: LxdApiResponse<LxdNetwork[]>) => {
-        const filteredNetworks = data.metadata.filter(
-          // Filter out loopback and unknown networks, both are not useful for the user.
-          // this is in line with the filtering done in the LXD CLI
-          (network) => !["loopback", "unknown"].includes(network.type),
-        );
-        resolve(filteredNetworks);
-      })
-      .catch(reject);
-  });
-};
-
 export const fetchNetworksFromClusterMembers = (
   project: string,
   clusterMembers: LxdClusterMember[],
@@ -73,11 +51,7 @@ export const fetchNetworksFromClusterMembers = (
   return new Promise((resolve, reject) => {
     Promise.allSettled(
       clusterMembers.map((member) => {
-        return fetchNetworksOnMember(
-          project,
-          member.server_name,
-          isFineGrained,
-        );
+        return fetchNetworks(project, isFineGrained, member.server_name);
       }),
     )
       .then((results) => {
@@ -100,43 +74,27 @@ export const fetchNetworksFromClusterMembers = (
   });
 };
 
-export const fetchNetworkOnMember = (
+export const fetchNetwork = (
   name: string,
   project: string,
-  target: 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}&target=${target}${entitlements}`,
+      `/1.0/networks/${name}?project=${project}${targetParam}${entitlements}`,
     )
       .then(handleEtagResponse)
       .then((data) => resolve(data as LxdNetwork))
       .catch(reject);
   });
 };
 
-export const fetchNetwork = (
-  name: string,
-  project: string,
-  isFineGrained: boolean | null,
-): Promise<LxdNetwork> => {
-  const entitlements = `&${withEntitlementsQuery(
-    isFineGrained,
-    networkEntitlements,
-  )}`;
-  return new Promise((resolve, reject) => {
-    fetch(`/1.0/networks/${name}?project=${project}${entitlements}`)
-      .then(handleEtagResponse)
-      .then((data) => resolve(data as LxdNetwork))
-      .catch(reject);
-  });
-};
-
 export const fetchNetworkFromClusterMembers = (
   name: string,
   project: string,
@@ -146,12 +104,7 @@ export const fetchNetworkFromClusterMembers = (
   return new Promise((resolve, reject) => {
     Promise.allSettled(
       clusterMembers.map((member) => {
-        return fetchNetworkOnMember(
-          name,
-          project,
-          member.server_name,
-          isFineGrained,
-        );
+        return fetchNetwork(name, project, isFineGrained, member.server_name);
       }),
     )
       .then((results) => {

diff --git a/src/components/forms/YamlForm.tsx b/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);

diff --git a/src/context/useNetworks.tsx b/src/context/useNetworks.tsx
@@ -4,21 +4,19 @@ import { UseQueryResult } from "@tanstack/react-query";
 import { useAuth } from "./auth";
 import {
   fetchNetwork,
-  fetchNetworkOnMember,
+  fetchNetworkFromClusterMembers,
   fetchNetworks,
-  fetchNetworksOnMember,
+  fetchNetworksFromClusterMembers,
 } from "api/networks";
-import { LxdNetwork } from "types/network";
+import { LxdNetwork, LXDNetworkOnClusterMember } from "types/network";
+import { LxdClusterMember } from "types/cluster";
 
 export const useNetworks = (
   project: string,
   target?: string,
   enabled?: boolean,
 ): UseQueryResult<LxdNetwork[]> => {
   const { isFineGrained } = useAuth();
-  const queryFn = target
-    ? () => fetchNetworksOnMember(project, target, isFineGrained)
-    : () => fetchNetworks(project, isFineGrained);
 
   const queryKey = [queryKeys.projects, project, queryKeys.networks];
   if (target) {
@@ -28,7 +26,7 @@ export const useNetworks = (
 
   return useQuery({
     queryKey,
-    queryFn: queryFn,
+    queryFn: () => fetchNetworks(project, isFineGrained, target),
     enabled: (enabled ?? true) && isFineGrained !== null,
   });
 };
@@ -40,9 +38,6 @@ export const useNetwork = (
   enabled?: boolean,
 ): UseQueryResult<LxdNetwork> => {
   const { isFineGrained } = useAuth();
-  const queryFn = target
-    ? () => fetchNetworkOnMember(network, project, target, isFineGrained)
-    : () => fetchNetwork(network, project, isFineGrained);
 
   const queryKey = [queryKeys.projects, project, queryKeys.networks, network];
   if (target) {
@@ -52,7 +47,49 @@ export const useNetwork = (
 
   return useQuery({
     queryKey,
-    queryFn,
+    queryFn: () => fetchNetwork(network, project, isFineGrained, target),
+    enabled: (enabled ?? true) && isFineGrained !== null,
+  });
+};
+
+export const useNetworksFromClusterMembers = (
+  project: string,
+  clusterMembers: LxdClusterMember[],
+  enabled?: boolean,
+): UseQueryResult<LXDNetworkOnClusterMember[]> => {
+  const { isFineGrained } = useAuth();
+
+  return useQuery({
+    queryKey: [queryKeys.networks, project, queryKeys.cluster],
+    queryFn: () =>
+      fetchNetworksFromClusterMembers(project, clusterMembers, isFineGrained),
+    enabled: (enabled ?? true) && isFineGrained !== null,
+  });
+};
+
+export const useNetworkFromClusterMembers = (
+  network: string,
+  project: string,
+  clusterMembers: LxdClusterMember[],
+  enabled?: boolean,
+): UseQueryResult<LXDNetworkOnClusterMember[]> => {
+  const { isFineGrained } = useAuth();
+
+  return useQuery({
+    queryKey: [
+      queryKeys.projects,
+      project,
+      queryKeys.networks,
+      network,
+      queryKeys.cluster,
+    ],
+    queryFn: () =>
+      fetchNetworkFromClusterMembers(
+        network,
+        project,
+        clusterMembers,
+        isFineGrained,
+      ),
     enabled: (enabled ?? true) && isFineGrained !== null,
   });
 };
diff --git a/src/pages/instances/EditInstance.tsx b/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"

diff --git a/src/pages/networks/EditNetwork.tsx b/src/pages/networks/EditNetwork.tsx
@@ -2,14 +2,10 @@ import { FC, useEffect, useState } from "react";
 import { Button, useNotify } from "@canonical/react-components";
 import { useFormik } from "formik";
 import * as Yup from "yup";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { checkDuplicateName } from "util/helpers";
-import {
-  fetchNetworkFromClusterMembers,
-  updateNetwork,
-  updateClusterNetwork,
-} from "api/networks";
+import { updateNetwork, updateClusterNetwork } from "api/networks";
 import NetworkForm, {
   isNetworkFormInvalid,
   NetworkFormValues,
@@ -33,8 +29,8 @@ import FormSubmitBtn from "components/forms/FormSubmitBtn";
 import ResourceLink from "components/ResourceLink";
 import { scrollToElement } from "util/scroll";
 import { useClusterMembers } from "context/useClusterMembers";
-import { useAuth } from "context/auth";
 import { useNetworkEntitlements } from "util/entitlements/networks";
+import { useNetworkFromClusterMembers } from "context/useNetworks";
 
 interface Props {
   network: LxdNetwork;
@@ -48,7 +44,6 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
   const { hash } = useLocation();
   const initialSection = hash ? hash.substring(1) : slugify(CONNECTIONS);
   const [section, updateSection] = useState(initialSection);
-  const { isFineGrained } = useAuth();
 
   const queryClient = useQueryClient();
   const controllerState = useState<AbortController | null>(null);
@@ -57,27 +52,14 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
   const isClustered = clusterMembers.length > 0;
   const { canEditNetwork } = useNetworkEntitlements();
 
-  const { data: networkOnMembers = [], error } = useQuery({
-    queryKey: [
-      queryKeys.projects,
-      project,
-      queryKeys.networks,
-      network.name,
-      queryKeys.cluster,
-    ],
-    queryFn: () =>
-      fetchNetworkFromClusterMembers(
-        network.name,
-        project,
-        clusterMembers,
-        isFineGrained,
-      ),
-    enabled:
-      isClustered &&
-      network.managed &&
-      network.type === "physical" &&
-      isFineGrained !== null,
-  });
+  const queryEnabled =
+    isClustered && network.managed && network.type === "physical";
+  const { data: networkOnMembers = [], error } = useNetworkFromClusterMembers(
+    network.name,
+    project,
+    clusterMembers,
+    queryEnabled,
+  );
 
   useEffect(() => {
     if (error) {