From 54c1afa948546c4f9326c6f24b20fea9d4fee523 Mon Sep 17 00:00:00 2001
From: David Edler <david.edler@canonical.com>
Date: Fri, 10 Jan 2025 18:01:22 +0100
Subject: [PATCH] wip

Signed-off-by: David Edler <david.edler@canonical.com>
---
 src/App.tsx                                   |   8 +
 src/api/networks.tsx                          | 178 +++++++--
 src/components/ClusterSpecificSelect.tsx      |  97 +++++
 src/components/RenameHeader.tsx               |  10 +-
 src/pages/networks/CreateNetwork.tsx          |  20 +-
 src/pages/networks/EditNetwork.tsx            |  42 +-
 src/pages/networks/NetworkDetail.tsx          |  14 +-
 src/pages/networks/NetworkDetailHeader.tsx    |  28 +-
 src/pages/networks/NetworkForwardCount.tsx    |   2 +-
 src/pages/networks/NetworkList.tsx            | 372 ++++++++++++------
 src/pages/networks/NetworkSearchFilter.tsx    | 108 +++++
 src/pages/networks/NetworkTopology.tsx        |  86 +++-
 src/pages/networks/forms/NetworkAddresses.tsx |  17 +-
 src/pages/networks/forms/NetworkForm.tsx      |   8 +-
 src/pages/networks/forms/NetworkFormMain.tsx  |  15 +-
 .../networks/forms/NetworkParentSelector.tsx  |  66 +++-
 .../networks/forms/NetworkStatistics.tsx      |   9 +-
 src/sass/_network_topology.scss               |  24 +-
 src/util/networkForm.tsx                      |  15 +-
 19 files changed, 904 insertions(+), 215 deletions(-)
 create mode 100644 src/components/ClusterSpecificSelect.tsx
 create mode 100644 src/pages/networks/NetworkSearchFilter.tsx

diff --git a/src/App.tsx b/src/App.tsx
index aef94e5db3..07ed53530a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -218,6 +218,14 @@ const App: FC = () => {
             />
           }
         />
+        <Route
+          path="/ui/project/:project/member/:member/network/:name"
+          element={
+            <ProtectedRoute
+              outlet={<ProjectLoader outlet={<NetworkDetail />} />}
+            />
+          }
+        />
         <Route
           path="/ui/project/:project/network/:name/:activeTab"
           element={
diff --git a/src/api/networks.tsx b/src/api/networks.tsx
index 9180cee0ec..e59cd9ec4b 100644
--- a/src/api/networks.tsx
+++ b/src/api/networks.tsx
@@ -1,12 +1,17 @@
 import { handleEtagResponse, handleResponse } from "util/helpers";
 import { LxdNetwork, LxdNetworkState } from "types/network";
 import { LxdApiResponse } from "types/apiResponse";
-import { LxdClusterMember } from "types/cluster";
 import { areNetworksEqual } from "util/networks";
+import { ClusterSpecificSelectField } from "components/ClusterSpecificSelect";
+import { LxdClusterMember } from "types/cluster";
 
-export const fetchNetworks = (project: string): Promise<LxdNetwork[]> => {
+export const fetchNetworks = (
+  project: string,
+  target?: string,
+): Promise<LxdNetwork[]> => {
+  const targetParam = target ? `&target=${target}` : "";
   return new Promise((resolve, reject) => {
-    fetch(`/1.0/networks?project=${project}&recursion=1`)
+    fetch(`/1.0/networks?project=${project}&recursion=1${targetParam}`)
       .then(handleResponse)
       .then((data: LxdApiResponse<LxdNetwork[]>) => {
         const filteredNetworks = data.metadata.filter(
@@ -20,24 +25,105 @@ export const fetchNetworks = (project: string): Promise<LxdNetwork[]> => {
   });
 };
 
+export type LXDClusterMemberNetworks = {
+  memberName: string;
+  memberNetworks: LxdNetwork[];
+}[];
+
+export const fetchClusterMemberNetworks = async (
+  project: string,
+  clusterMembers: LxdClusterMember[],
+): Promise<LXDClusterMemberNetworks> => {
+  return new Promise((resolve, reject) => {
+    void Promise.allSettled(
+      clusterMembers.map(async (member) => {
+        return await fetchNetworks(project, member.server_name);
+      }),
+    )
+      .then((results) => {
+        const error = results.find((res) => res.status === "rejected")
+          ?.reason as Error | undefined;
+
+        if (error) {
+          reject(error);
+          return;
+        }
+
+        const result: LXDClusterMemberNetworks = [];
+
+        for (let i = 0; i < clusterMembers.length; i++) {
+          const memberName = clusterMembers[i].server_name;
+          const networks = results[i] as PromiseFulfilledResult<LxdNetwork[]>;
+          result.push({ memberName, memberNetworks: networks.value });
+        }
+
+        resolve(result);
+      })
+      .catch(reject);
+  });
+};
+
 export const fetchNetwork = (
   name: string,
   project: string,
+  target?: string,
 ): Promise<LxdNetwork> => {
+  const targetParam = target ? `&target=${target}` : "";
   return new Promise((resolve, reject) => {
-    fetch(`/1.0/networks/${name}?project=${project}`)
+    fetch(`/1.0/networks/${name}?project=${project}${targetParam}`)
       .then(handleEtagResponse)
       .then((data) => resolve(data as LxdNetwork))
       .catch(reject);
   });
 };
 
+export type LXDClusterMemberNetwork = {
+  memberName: string;
+  network: LxdNetwork;
+}[];
+
+export const fetchClusterMemberNetwork = async (
+  name: string,
+  project: string,
+  clusterMembers: LxdClusterMember[],
+): Promise<LXDClusterMemberNetwork> => {
+  return new Promise((resolve, reject) => {
+    void Promise.allSettled(
+      clusterMembers.map(async (member) => {
+        return await fetchNetwork(name, project, member.server_name);
+      }),
+    )
+      .then((results) => {
+        const error = results.find((res) => res.status === "rejected")
+          ?.reason as Error | undefined;
+
+        if (error) {
+          reject(error);
+          return;
+        }
+
+        const result: LXDClusterMemberNetwork = [];
+
+        for (let i = 0; i < clusterMembers.length; i++) {
+          const name = clusterMembers[i].server_name;
+          const promise = results[i] as PromiseFulfilledResult<LxdNetwork>;
+          result.push({ memberName: name, network: promise.value });
+        }
+
+        resolve(result);
+      })
+      .catch(reject);
+  });
+};
+
 export const fetchNetworkState = (
   name: string,
   project: string,
+  target?: string,
 ): Promise<LxdNetworkState> => {
+  const targetParam = target ? `&target=${target}` : "";
   return new Promise((resolve, reject) => {
-    fetch(`/1.0/networks/${name}/state?project=${project}`)
+    fetch(`/1.0/networks/${name}/state?project=${project}${targetParam}`)
       .then(handleResponse)
       .then((data: LxdApiResponse<LxdNetworkState>) => resolve(data.metadata))
       .catch(reject);
@@ -47,21 +133,23 @@ export const fetchNetworkState = (
 export const createClusterNetwork = (
   network: Partial<LxdNetwork>,
   project: string,
-  clusterMembers: LxdClusterMember[],
+  parentsPerClusterMember?: ClusterSpecificSelectField,
 ): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    const memberNetwork = {
-      name: network.name,
-      description: network.description,
-      type: network.type,
-      config: {
-        parent: network.config?.parent,
-      },
-    };
+  if (!parentsPerClusterMember) {
+    return createNetwork(network, project);
+  }
 
+  return new Promise((resolve, reject) => {
     void Promise.allSettled(
-      clusterMembers.map(async (member) => {
-        await createNetwork(memberNetwork, project, member.server_name);
+      Object.keys(parentsPerClusterMember).map(async (memberName) => {
+        const memberNetwork = {
+          name: network.name,
+          type: network.type,
+          config: {
+            parent: parentsPerClusterMember[memberName],
+          },
+        };
+        await createNetwork(memberNetwork, project, memberName);
       }),
     )
       .then((results) => {
@@ -110,15 +198,20 @@ export const createNetwork = (
 export const updateNetwork = (
   network: Partial<LxdNetwork> & Required<Pick<LxdNetwork, "config">>,
   project: string,
+  target?: string,
 ): Promise<void> => {
   return new Promise((resolve, reject) => {
-    fetch(`/1.0/networks/${network.name ?? ""}?project=${project}`, {
-      method: "PUT",
-      body: JSON.stringify(network),
-      headers: {
-        "If-Match": network.etag ?? "invalid-etag",
+    const targetParam = target ? `&target=${target}` : "";
+    fetch(
+      `/1.0/networks/${network.name ?? ""}?project=${project}${targetParam}`,
+      {
+        method: "PUT",
+        body: JSON.stringify(network),
+        headers: {
+          "If-Match": network.etag ?? "invalid-etag",
+        },
       },
-    })
+    )
       .then(handleResponse)
       .then(resolve)
       .catch(async (e: Error) => {
@@ -135,6 +228,45 @@ export const updateNetwork = (
   });
 };
 
+export const updateClusterNetwork = (
+  network: Partial<LxdNetwork> & Required<Pick<LxdNetwork, "config">>,
+  project: string,
+  parentsPerClusterMember?: ClusterSpecificSelectField,
+  networkByMembers?: LXDClusterMemberNetwork,
+): Promise<void> => {
+  if (!parentsPerClusterMember) {
+    return updateNetwork(network, project);
+  }
+
+  return new Promise((resolve, reject) => {
+    void Promise.allSettled(
+      Object.keys(parentsPerClusterMember).map(async (memberName) => {
+        const memberNetwork = {
+          name: network.name,
+          type: network.type,
+          config: {
+            parent: parentsPerClusterMember[memberName],
+          },
+          etag: networkByMembers?.find((item) => item.memberName === memberName)
+            ?.network.etag,
+        };
+        await updateNetwork(memberNetwork, project, memberName);
+      }),
+    )
+      .then((results) => {
+        const error = results.find((res) => res.status === "rejected")
+          ?.reason as Error | undefined;
+
+        if (error) {
+          reject(error);
+          return;
+        }
+        updateNetwork(network, project).then(resolve).catch(reject);
+      })
+      .catch(reject);
+  });
+};
+
 export const renameNetwork = (
   oldName: string,
   newName: string,
diff --git a/src/components/ClusterSpecificSelect.tsx b/src/components/ClusterSpecificSelect.tsx
new file mode 100644
index 0000000000..0c475e034c
--- /dev/null
+++ b/src/components/ClusterSpecificSelect.tsx
@@ -0,0 +1,97 @@
+import { FC, ReactNode, useState } from "react";
+import { Button, Icon, MainTable, Select } from "@canonical/react-components";
+import ResourceLabel from "components/ResourceLabel";
+
+export type ClusterSpecificSelectField = Record<string, string>;
+
+interface Props {
+  readOnly: boolean;
+  options: {
+    memberName: string;
+    values: string[];
+  }[];
+  valueSuffix?: ReactNode;
+  values?: ClusterSpecificSelectField;
+  onChange: (value: ClusterSpecificSelectField) => void;
+}
+
+const ClusterSpecificSelect: FC<Props> = ({
+  readOnly,
+  options,
+  valueSuffix,
+  values,
+  onChange,
+}) => {
+  const [isExpanded, setExpanded] = useState(false);
+
+  return isExpanded ? (
+    <>
+      <Button onClick={() => setExpanded(false)} hasIcon appearance="base">
+        <Icon name="collapse" />
+      </Button>{" "}
+      <MainTable
+        style={{ width: "auto", display: "inline" }}
+        headers={[{ content: "Cluster member" }, { content: "Value" }]}
+        rows={options.map((item) => {
+          const activeValue = values?.[item.memberName];
+          const options = item.values.map((value) => {
+            return {
+              label: value,
+              value: value,
+            };
+          });
+          options.unshift({
+            label: options.length === 0 ? "None available" : "Select option",
+            value: "",
+          });
+
+          return {
+            columns: [
+              {
+                content: (
+                  <ResourceLabel
+                    type="cluster-member"
+                    value={item.memberName}
+                  />
+                ),
+                role: "cell",
+                "aria-label": "Cluster member",
+              },
+              {
+                content: readOnly ? (
+                  <>
+                    {activeValue}
+                    {valueSuffix}
+                  </>
+                ) : (
+                  <Select
+                    className="u-no-margin--bottom"
+                    options={options}
+                    onChange={(e) => {
+                      onChange({
+                        ...values,
+                        [item.memberName]: e.target.value,
+                      });
+                    }}
+                    value={activeValue}
+                  />
+                ),
+                role: "cell",
+                "aria-label": "Value",
+              },
+            ],
+          };
+        })}
+      />
+    </>
+  ) : (
+    <div>
+      <Button onClick={() => setExpanded(true)} hasIcon appearance="base">
+        <Icon name="expand" />
+        <span>specific values per cluster member</span>
+      </Button>
+    </div>
+  );
+};
+
+export default ClusterSpecificSelect;
diff --git a/src/components/RenameHeader.tsx b/src/components/RenameHeader.tsx
index 036c7048df..3c1bf4c783 100644
--- a/src/components/RenameHeader.tsx
+++ b/src/components/RenameHeader.tsx
@@ -15,6 +15,7 @@ export interface RenameHeaderValues {
 
 interface Props {
   name: string;
+  relatedChip?: ReactNode;
   titleClassName?: string;
   parentItems: ReactNode[];
   centerControls?: ReactNode;
@@ -26,6 +27,7 @@ interface Props {
 
 const RenameHeader: FC<Props> = ({
   name,
+  relatedChip,
   titleClassName,
   parentItems,
   centerControls,
@@ -56,7 +58,10 @@ const RenameHeader: FC<Props> = ({
           className="p-breadcrumbs p-breadcrumbs--large"
           aria-label="Breadcrumbs"
         >
-          <ol className="p-breadcrumbs__items">
+          <ol
+            className="p-breadcrumbs__items"
+            style={{ display: "inline-block" }}
+          >
             {parentItems.map((item, key) => (
               <li
                 className="p-heading--4 u-no-margin--bottom continuous-breadcrumb"
@@ -112,6 +117,9 @@ const RenameHeader: FC<Props> = ({
               </li>
             )}
           </ol>
+          {relatedChip && (
+            <span style={{ marginLeft: "-1rem" }}>{relatedChip}</span>
+          )}
         </nav>
         {!formik?.values.isRenaming && centerControls}
       </div>
diff --git a/src/pages/networks/CreateNetwork.tsx b/src/pages/networks/CreateNetwork.tsx
index d3fe583481..5d90ea7ce3 100644
--- a/src/pages/networks/CreateNetwork.tsx
+++ b/src/pages/networks/CreateNetwork.tsx
@@ -7,7 +7,7 @@ import {
 } 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 { useNavigate, useParams } from "react-router-dom";
 import { checkDuplicateName } from "util/helpers";
@@ -22,7 +22,6 @@ import Loader from "components/Loader";
 import { yamlToObject } from "util/yaml";
 import { dump as dumpYaml } from "js-yaml";
 import { isClusteredServer, supportsOvnNetwork } from "util/settings";
-import { fetchClusterMembers } from "api/cluster";
 import BaseLayout from "components/BaseLayout";
 import {
   GENERAL,
@@ -47,12 +46,6 @@ const CreateNetwork: FC = () => {
   const isClustered = isClusteredServer(settings);
   const hasOvn = supportsOvnNetwork(settings);
 
-  const { data: clusterMembers = [] } = useQuery({
-    queryKey: [queryKeys.cluster, queryKeys.members],
-    queryFn: fetchClusterMembers,
-    enabled: isClustered,
-  });
-
   if (!project) {
     return <>Missing project</>;
   }
@@ -94,7 +87,12 @@ const CreateNetwork: FC = () => {
 
       const mutation =
         isClustered && values.networkType !== "ovn"
-          ? () => createClusterNetwork(network, project, clusterMembers)
+          ? () =>
+              createClusterNetwork(
+                network,
+                project,
+                values.parentPerClusterMember,
+              )
           : () => createNetwork(network, project);
 
       mutation()
@@ -180,7 +178,9 @@ const CreateNetwork: FC = () => {
             !formik.isValid ||
             !formik.values.name ||
             (formik.values.networkType === "ovn" && !formik.values.network) ||
-            (formik.values.networkType === "physical" && !formik.values.parent)
+            (formik.values.networkType === "physical" &&
+              !formik.values.parent &&
+              !formik.values.parentPerClusterMember)
           }
           onClick={() => void formik.submitForm()}
         >
diff --git a/src/pages/networks/EditNetwork.tsx b/src/pages/networks/EditNetwork.tsx
index f1c0b97419..a3fc343cd6 100644
--- a/src/pages/networks/EditNetwork.tsx
+++ b/src/pages/networks/EditNetwork.tsx
@@ -2,10 +2,14 @@ import { FC, useEffect, useState } from "react";
 import { Button, useNotify } from "@canonical/react-components";
 import { useFormik } from "formik";
 import * as Yup from "yup";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { checkDuplicateName } from "util/helpers";
-import { updateNetwork } from "api/networks";
+import {
+  fetchClusterMemberNetwork,
+  updateNetwork,
+  updateClusterNetwork,
+} from "api/networks";
 import NetworkForm, {
   NetworkFormValues,
   toNetwork,
@@ -27,6 +31,7 @@ import YamlSwitch from "components/forms/YamlSwitch";
 import FormSubmitBtn from "components/forms/FormSubmitBtn";
 import ResourceLink from "components/ResourceLink";
 import { scrollToElement } from "util/scroll";
+import { useClusterMembers } from "context/useClusterMembers";
 
 interface Props {
   network: LxdNetwork;
@@ -44,6 +49,15 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
   const queryClient = useQueryClient();
   const controllerState = useState<AbortController | null>(null);
   const [version, setVersion] = useState(0);
+  const { data: clusterMembers = [] } = useClusterMembers();
+  const isClustered = clusterMembers.length > 0;
+
+  const { data: networkByMembers = [] } = useQuery({
+    queryKey: [queryKeys.networks, network.name, project, queryKeys.cluster],
+    queryFn: () =>
+      fetchClusterMemberNetwork(network.name, project, clusterMembers),
+    enabled: isClustered && network.managed && network.type === "physical",
+  });
 
   const NetworkSchema = Yup.object().shape({
     name: Yup.string()
@@ -65,16 +79,28 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
   });
 
   const formik = useFormik<NetworkFormValues>({
-    initialValues: toNetworkFormValues(network),
+    initialValues: toNetworkFormValues(network, networkByMembers),
     validationSchema: NetworkSchema,
     enableReinitialize: true,
     onSubmit: (values) => {
       const yaml = values.yaml ? values.yaml : getYaml();
-      const saveNetwork = yamlToObject(yaml) as LxdNetwork;
-      updateNetwork({ ...saveNetwork, etag: network.etag }, project)
+      const yamlNetwork = yamlToObject(yaml) as LxdNetwork;
+      const saveNetwork = { ...yamlNetwork, etag: network.etag };
+
+      const mutation = isClustered
+        ? () =>
+            updateClusterNetwork(
+              saveNetwork,
+              project,
+              values.parentPerClusterMember,
+              networkByMembers,
+            )
+        : () => updateNetwork(saveNetwork, project);
+
+      mutation()
         .then(() => {
           formik.resetForm({
-            values: toNetworkFormValues(saveNetwork),
+            values: toNetworkFormValues(yamlNetwork, networkByMembers),
           });
 
           void queryClient.invalidateQueries({
@@ -166,7 +192,9 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
               appearance="base"
               onClick={() => {
                 setVersion((old) => old + 1);
-                void formik.setValues(toNetworkFormValues(network));
+                void formik.setValues(
+                  toNetworkFormValues(network, networkByMembers),
+                );
               }}
             >
               Cancel
diff --git a/src/pages/networks/NetworkDetail.tsx b/src/pages/networks/NetworkDetail.tsx
index 1ac834327f..85503e2a67 100644
--- a/src/pages/networks/NetworkDetail.tsx
+++ b/src/pages/networks/NetworkDetail.tsx
@@ -13,9 +13,10 @@ import TabLinks from "components/TabLinks";
 import NetworkForwards from "pages/networks/NetworkForwards";
 
 const NetworkDetail: FC = () => {
-  const { name, project, activeTab } = useParams<{
+  const { name, project, member, activeTab } = useParams<{
     name: string;
     project: string;
+    member: string;
     activeTab?: string;
   }>();
 
@@ -28,8 +29,15 @@ const NetworkDetail: FC = () => {
   }
 
   const { data: network, isLoading } = useQuery({
-    queryKey: [queryKeys.projects, project, queryKeys.networks, name],
-    queryFn: () => fetchNetwork(name, project),
+    queryKey: [
+      queryKeys.projects,
+      project,
+      queryKeys.networks,
+      name,
+      queryKeys.members,
+      member,
+    ],
+    queryFn: () => fetchNetwork(name, project, member),
   });
 
   if (isLoading) {
diff --git a/src/pages/networks/NetworkDetailHeader.tsx b/src/pages/networks/NetworkDetailHeader.tsx
index 2609f14c9d..b4e391070a 100644
--- a/src/pages/networks/NetworkDetailHeader.tsx
+++ b/src/pages/networks/NetworkDetailHeader.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import RenameHeader, { RenameHeaderValues } from "components/RenameHeader";
 import { useFormik } from "formik";
 import * as Yup from "yup";
@@ -18,6 +18,10 @@ interface Props {
 }
 
 const NetworkDetailHeader: FC<Props> = ({ name, network, project }) => {
+  const { member } = useParams<{
+    member: string;
+  }>();
+
   const navigate = useNavigate();
   const notify = useNotify();
   const toastNotify = useToastNotification();
@@ -69,14 +73,26 @@ const NetworkDetailHeader: FC<Props> = ({ name, network, project }) => {
   const isUsed = (network?.used_by?.length ?? 0) > 0;
   const isManaged = network?.managed;
 
+  const parentItems = [];
+  parentItems.push(
+    <Link to={`/ui/project/${project}/networks`} key={1}>
+      Networks
+    </Link>,
+  );
+
   return (
     <RenameHeader
       name={name}
-      parentItems={[
-        <Link to={`/ui/project/${project}/networks`} key={1}>
-          Networks
-        </Link>,
-      ]}
+      relatedChip={
+        member && (
+          <ResourceLink
+            type="cluster-member"
+            value={member}
+            to={`/ui/project/${project}/networks?scope=${member}`}
+          />
+        )
+      }
+      parentItems={parentItems}
       renameDisabledReason={
         !isManaged
           ? "Can not rename, network is not managed"
diff --git a/src/pages/networks/NetworkForwardCount.tsx b/src/pages/networks/NetworkForwardCount.tsx
index 77a438b0a5..3910c98e79 100644
--- a/src/pages/networks/NetworkForwardCount.tsx
+++ b/src/pages/networks/NetworkForwardCount.tsx
@@ -10,7 +10,7 @@ interface Props {
 }
 
 const NetworkForwardCount: FC<Props> = ({ network, project }) => {
-  if (network.managed === false) {
+  if (network.managed === false || network.type === "physical") {
     return <>-</>;
   }
 
diff --git a/src/pages/networks/NetworkList.tsx b/src/pages/networks/NetworkList.tsx
index 71256ed32f..d38d8f9f16 100644
--- a/src/pages/networks/NetworkList.tsx
+++ b/src/pages/networks/NetworkList.tsx
@@ -7,18 +7,33 @@ import {
   Row,
   useNotify,
 } from "@canonical/react-components";
-import { fetchNetworks } from "api/networks";
-import BaseLayout from "components/BaseLayout";
+import { fetchClusterMemberNetworks, fetchNetworks } from "api/networks";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import Loader from "components/Loader";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import {
+  Link,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router-dom";
 import NotificationRow from "components/NotificationRow";
 import HelpLink from "components/HelpLink";
 import { useDocs } from "context/useDocs";
 import NetworkForwardCount from "pages/networks/NetworkForwardCount";
 import { useSmallScreen } from "context/useSmallScreen";
 import { renderNetworkType } from "util/networks";
+import ResourceLink from "components/ResourceLink";
+import { useClusterMembers } from "context/useClusterMembers";
+import PageHeader from "components/PageHeader";
+import CustomLayout from "components/CustomLayout";
+import NetworkSearchFilter, {
+  MANAGED,
+  NetworkFilters,
+  SCOPE,
+  STATE,
+  TYPE,
+} from "pages/networks/NetworkSearchFilter";
 
 const NetworkList: FC = () => {
   const docBaseLink = useDocs();
@@ -26,6 +41,19 @@ const NetworkList: FC = () => {
   const notify = useNotify();
   const { project } = useParams<{ project: string }>();
   const isSmallScreen = useSmallScreen();
+  const { data: clusterMembers = [] } = useClusterMembers();
+  const isClustered = clusterMembers.length > 0;
+  const [searchParams] = useSearchParams();
+
+  const filters: NetworkFilters = {
+    queries: searchParams.getAll("query"),
+    type: searchParams.getAll(TYPE).map((value) => value.toLowerCase()),
+    managed: searchParams.getAll(MANAGED).map((value) => value.toLowerCase()),
+    scope: searchParams.getAll(SCOPE).map((value) => value.toLowerCase()),
+    state: searchParams.getAll(STATE),
+  };
+
+  console.log(filters.scope);
 
   if (!project) {
     return <>Missing project</>;
@@ -40,16 +68,45 @@ const NetworkList: FC = () => {
     queryFn: () => fetchNetworks(project),
   });
 
+  const {
+    data: clusterMemberNetworks = [],
+    isLoading: isClusterNetworksLoading,
+  } = useQuery({
+    queryKey: [queryKeys.networks, "default", queryKeys.cluster],
+    queryFn: () => fetchClusterMemberNetworks("default", clusterMembers),
+    enabled: isClustered,
+  });
+
   if (error) {
     notify.failure("Loading networks failed", error);
   }
 
-  const hasNetworks = networks.length > 0;
+  const renderNetworks = networks
+    .filter((item) => !isClustered || item.managed)
+    .map((item) => {
+      return {
+        scope: "cluster",
+        network: item,
+      };
+    });
+  clusterMemberNetworks.map((item) => {
+    item.memberNetworks.map((network) => {
+      if (!network.managed) {
+        renderNetworks.push({
+          scope: item.memberName,
+          network: network,
+        });
+      }
+    });
+  });
+
+  const hasNetworks = renderNetworks.length > 0;
 
   const headers = [
     { content: "Name", sortKey: "name" },
     { content: "Type", sortKey: "type" },
     { content: "Managed", sortKey: "managed" },
+    ...(isClustered ? [{ content: "Scope", sortKey: "scope" }] : []),
     { content: "IPV4", className: "u-align--right" },
     { content: "IPV6" },
     { content: "Description", sortKey: "description" },
@@ -58,94 +115,161 @@ const NetworkList: FC = () => {
     { content: "State", sortKey: "state" },
   ];
 
-  const rows = networks.map((network) => {
-    return {
-      columns: [
-        {
-          content: (
-            <Link to={`/ui/project/${project}/network/${network.name}`}>
-              {network.name}
-            </Link>
-          ),
-          role: "rowheader",
-          "aria-label": "Name",
-        },
-        {
-          content: renderNetworkType(network.type),
-          role: "rowheader",
-          "aria-label": "Type",
-        },
-        {
-          content: network.managed ? "Yes" : "No",
-          role: "rowheader",
-          "aria-label": "Managed",
-        },
-        {
-          content: network.config["ipv4.address"],
-          className: "u-align--right",
-          role: "rowheader",
-          "aria-label": "IPV4",
-        },
-        {
-          content: network.config["ipv6.address"],
-          role: "rowheader",
-          "aria-label": "IPV6",
-        },
-        {
-          content: (
-            <div className="table-description" title={network.description}>
-              {network.description}
-            </div>
-          ),
-          role: "rowheader",
-          "aria-label": "Description",
-        },
-        {
-          content: <NetworkForwardCount network={network} project={project} />,
-          role: "rowheader",
-          className: "u-align--right",
-          "aria-label": "Forwards",
-        },
-        {
-          content: network.used_by?.length ?? "0",
-          role: "rowheader",
-          className: "u-align--right",
-          "aria-label": "Used by",
-        },
-        {
-          content: network.status,
-          role: "rowheader",
-          "aria-label": "State",
+  const rows = renderNetworks
+    .filter((item) => {
+      if (
+        !filters.queries.every(
+          (q) =>
+            item.network.name.toLowerCase().includes(q) ||
+            item.network.description?.toLowerCase().includes(q),
+        )
+      ) {
+        return false;
+      }
+      if (
+        filters.type.length > 0 &&
+        !filters.type.includes(item.network.type)
+      ) {
+        return false;
+      }
+      if (
+        filters.managed.length > 0 &&
+        !filters.managed.includes(item.network.managed ? "yes" : "no")
+      ) {
+        return false;
+      }
+      if (filters.scope.length > 0 && !filters.scope.includes(item.scope)) {
+        return false;
+      }
+      if (
+        filters.state.length > 0 &&
+        !filters.state.includes(item.network.status ?? "")
+      ) {
+        return false;
+      }
+      return true;
+    })
+    .map((item) => {
+      const scope = item.scope;
+      const network = item.network;
+
+      const href =
+        scope === "cluster"
+          ? `/ui/project/${project}/network/${network.name}`
+          : `/ui/project/${project}/member/${scope}/network/${network.name}`;
+
+      return {
+        columns: [
+          {
+            content: <Link to={href}>{network.name}</Link>,
+            role: "rowheader",
+            "aria-label": "Name",
+          },
+          {
+            content: renderNetworkType(network.type),
+            role: "rowheader",
+            "aria-label": "Type",
+          },
+          {
+            content: network.managed ? "Yes" : "No",
+            role: "rowheader",
+            "aria-label": "Managed",
+          },
+          ...(isClustered
+            ? [
+                {
+                  content:
+                    scope === "cluster" ? (
+                      <ResourceLink
+                        type="cluster-group"
+                        value="Cluster"
+                        to={`/ui/project/${project}/networks?scope=Cluster&search=${Number(searchParams.get("search")) + 1}`}
+                      />
+                    ) : (
+                      <ResourceLink
+                        type="cluster-member"
+                        value={scope}
+                        to={`/ui/project/${project}/networks?scope=${scope}&search=${Number(searchParams.get("search")) + 1}`}
+                      />
+                    ),
+                  role: "rowheader",
+                  "aria-label": "Scope",
+                },
+              ]
+            : []),
+          {
+            content: network.config["ipv4.address"],
+            className: "u-align--right",
+            role: "rowheader",
+            "aria-label": "IPV4",
+          },
+          {
+            content: network.config["ipv6.address"],
+            role: "rowheader",
+            "aria-label": "IPV6",
+          },
+          {
+            content: (
+              <div className="table-description" title={network.description}>
+                {network.description}
+              </div>
+            ),
+            role: "rowheader",
+            "aria-label": "Description",
+          },
+          {
+            content: (
+              <NetworkForwardCount network={network} project={project} />
+            ),
+            role: "rowheader",
+            className: "u-align--right",
+            "aria-label": "Forwards",
+          },
+          {
+            content: network.used_by?.length ?? "0",
+            role: "rowheader",
+            className: "u-align--right",
+            "aria-label": "Used by",
+          },
+          {
+            content: network.status,
+            role: "rowheader",
+            "aria-label": "State",
+          },
+        ],
+        sortData: {
+          name: network.name.toLowerCase(),
+          type: network.type,
+          managed: network.managed,
+          description: network.description?.toLowerCase(),
+          state: network.status,
+          usedBy: network.used_by?.length ?? 0,
         },
-      ],
-      sortData: {
-        name: network.name.toLowerCase(),
-        type: network.type,
-        managed: network.managed,
-        description: network.description?.toLowerCase(),
-        state: network.status,
-        usedBy: network.used_by?.length ?? 0,
-      },
-    };
-  });
+      };
+    });
 
-  if (isLoading) {
+  if (isLoading || isClusterNetworksLoading) {
     return <Loader />;
   }
 
   return (
-    <>
-      <BaseLayout
-        title={
-          <HelpLink
-            href={`${docBaseLink}/explanation/networks/`}
-            title="Learn more about networking"
-          >
-            Networks
-          </HelpLink>
-        }
-        controls={
-          <>
+    <CustomLayout
+      header={
+        <PageHeader>
+          <PageHeader.Left>
+            <PageHeader.Title>
+              <HelpLink
+                href={`${docBaseLink}/explanation/networks/`}
+                title="Learn more about networking"
+              >
+                Networks
+              </HelpLink>
+            </PageHeader.Title>
+            <PageHeader.Search>
+              <NetworkSearchFilter key={searchParams.get("search")} />
+            </PageHeader.Search>
+          </PageHeader.Left>
+          <PageHeader.BaseActions>
             {hasNetworks && (
               <Button
                 className="u-no-margin--bottom"
@@ -169,44 +293,44 @@ const NetworkList: FC = () => {
               {!isSmallScreen && <Icon name="plus" light />}
               <span>Create network</span>
             </Button>
-          </>
-        }
-      >
-        <NotificationRow />
-        <Row>
-          {hasNetworks && (
-            <MainTable
-              headers={headers}
-              rows={rows}
-              paginate={30}
-              responsive
-              sortable
-              className="u-table-layout--auto"
-              emptyStateMsg="No data to display"
-            />
-          )}
-          {!isLoading && !hasNetworks && (
-            <EmptyState
-              className="empty-state"
-              image={<Icon className="empty-state-icon" name="exposed" />}
-              title="No networks found"
-            >
-              <p>There are no networks in this project.</p>
-              <p>
-                <a
-                  href={`${docBaseLink}/explanation/networks/`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Learn more about networks
-                  <Icon className="external-link-icon" name="external-link" />
-                </a>
-              </p>
-            </EmptyState>
-          )}
-        </Row>
-      </BaseLayout>
-    </>
+          </PageHeader.BaseActions>
+        </PageHeader>
+      }
+    >
+      <NotificationRow />
+      <Row>
+        {hasNetworks && (
+          <MainTable
+            headers={headers}
+            rows={rows}
+            paginate={30}
+            responsive
+            sortable
+            className="u-table-layout--auto"
+            emptyStateMsg="No data to display"
+          />
+        )}
+        {!isLoading && !hasNetworks && (
+          <EmptyState
+            className="empty-state"
+            image={<Icon className="empty-state-icon" name="exposed" />}
+            title="No networks found"
+          >
+            <p>There are no networks in this project.</p>
+            <p>
+              <a
+                href={`${docBaseLink}/explanation/networks/`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Learn more about networks
+                <Icon className="external-link-icon" name="external-link" />
+              </a>
+            </p>
+          </EmptyState>
+        )}
+      </Row>
+    </CustomLayout>
   );
 };
 
diff --git a/src/pages/networks/NetworkSearchFilter.tsx b/src/pages/networks/NetworkSearchFilter.tsx
new file mode 100644
index 0000000000..dabe1f7db4
--- /dev/null
+++ b/src/pages/networks/NetworkSearchFilter.tsx
@@ -0,0 +1,108 @@
+import { FC, memo } from "react";
+import { SearchAndFilter } from "@canonical/react-components";
+import {
+  SearchAndFilterChip,
+  SearchAndFilterData,
+} from "@canonical/react-components/dist/components/SearchAndFilter/types";
+import { useSearchParams } from "react-router-dom";
+import {
+  paramsFromSearchData,
+  searchParamsToChips,
+} from "util/searchAndFilter";
+import { useClusterMembers } from "context/useClusterMembers";
+
+export const QUERY = "query";
+export const TYPE = "type";
+export const MANAGED = "managed";
+export const SCOPE = "scope";
+export const STATE = "state";
+
+const QUERY_PARAMS = [QUERY, TYPE, MANAGED, SCOPE, STATE];
+
+export interface NetworkFilters {
+  queries: string[];
+  type: string[];
+  managed: string[];
+  scope: string[];
+  state: string[];
+}
+
+const NetworkSearchFilter: FC = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { data: clusterMembers = [] } = useClusterMembers();
+
+  const locationSet = [
+    ...new Set(clusterMembers.map((member) => member.server_name)),
+  ];
+
+  const searchAndFilterData: SearchAndFilterData[] = [
+    {
+      id: 1,
+      heading: "Type",
+      chips: ["OVN", "Bridge", "Physical"].map((type) => {
+        return { lead: TYPE, value: type };
+      }),
+    },
+    {
+      id: 2,
+      heading: "Managed",
+      chips: ["Yes", "No"].map((managed) => {
+        return { lead: MANAGED, value: managed };
+      }),
+    },
+    {
+      id: 3,
+      heading: "State",
+      chips: ["Created", "Pending", "Unknown", "Unavailable", "Errored"].map(
+        (state) => {
+          return { lead: STATE, value: state };
+        },
+      ),
+    },
+    ...(clusterMembers.length > 0
+      ? [
+          {
+            id: 4,
+            heading: "Scope",
+            chips: ["Cluster"].concat(locationSet).map((location) => {
+              return { lead: SCOPE, value: location };
+            }),
+          },
+        ]
+      : []),
+  ];
+
+  const onSearchDataChange = (searchData: SearchAndFilterChip[]) => {
+    const newParams = paramsFromSearchData(
+      searchData,
+      searchParams,
+      QUERY_PARAMS,
+    );
+
+    if (newParams.toString() !== searchParams.toString()) {
+      setSearchParams(newParams);
+    }
+    console.log("new", newParams, searchParams, searchData);
+  };
+
+  return (
+    <>
+      <h2 className="u-off-screen">Search and filter</h2>
+      <SearchAndFilter
+        existingSearchData={searchParamsToChips(searchParams, QUERY_PARAMS)}
+        filterPanelData={searchAndFilterData}
+        returnSearchData={onSearchDataChange}
+        onExpandChange={() => {
+          window.dispatchEvent(
+            new CustomEvent("resize", { detail: "search-and-filter" }),
+          );
+        }}
+        onPanelToggle={() => {
+          window.dispatchEvent(new CustomEvent("sfp-toggle"));
+        }}
+      />
+    </>
+  );
+};
+
+export default memo(NetworkSearchFilter);
diff --git a/src/pages/networks/NetworkTopology.tsx b/src/pages/networks/NetworkTopology.tsx
index c22f06e1d6..3c4cf6ad2b 100644
--- a/src/pages/networks/NetworkTopology.tsx
+++ b/src/pages/networks/NetworkTopology.tsx
@@ -11,13 +11,19 @@ import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { fetchNetworks } from "api/networks";
 import classnames from "classnames";
+import { useParams } from "react-router-dom";
 
 interface Props {
   formik: FormikProps<NetworkFormValues>;
   project: string;
+  isServerClustered: boolean;
 }
 
-const NetworkTopology: FC<Props> = ({ formik, project }) => {
+const NetworkTopology: FC<Props> = ({ formik, project, isServerClustered }) => {
+  const { member } = useParams<{
+    member: string;
+  }>();
+
   const [isNetworksCollapsed, setNetworksCollapsed] = useState(true);
   const [isInstancesCollapsed, setInstancesCollapsed] = useState(true);
   const network = formik.values.bareNetwork;
@@ -26,44 +32,94 @@ const NetworkTopology: FC<Props> = ({ formik, project }) => {
     return;
   }
 
+  const hasClusteredUplinks =
+    isServerClustered && ["physical", "bridge"].includes(network.type);
+
   const { data: networks = [] } = useQuery({
-    queryKey: [queryKeys.projects, project, queryKeys.networks],
+    queryKey: [queryKeys.networks, project],
     queryFn: () => fetchNetworks(project),
   });
 
-  const downstreamNetworks = networks.filter(
-    (network) =>
-      network.config.network === formik.values.name ||
-      network.config.parent === formik.values.name,
-  );
+  const downstreamNetworks = networks.filter((downStreamCandidate) => {
+    return (
+      downStreamCandidate.config.network === formik.values.name ||
+      downStreamCandidate.config.parent === formik.values.name ||
+      network.used_by?.includes(`/1.0/networks/${downStreamCandidate.name}`)
+    );
+  });
 
   const instances = filterUsedByType("instance", network.used_by);
   const uplink = formik.values.parent ?? formik.values.network;
 
+  const clusterUplinks = Object.keys(
+    formik.values.parentPerClusterMember ?? {},
+  ).map((clusterMember) => {
+    const memberUplink = formik.values.parentPerClusterMember?.[clusterMember];
+
+    if (!memberUplink) {
+      return null;
+    }
+
+    return (
+      <div className="uplink-item" key={clusterMember}>
+        <ResourceLink
+          type="cluster-member"
+          value={clusterMember}
+          to={`/ui/project/${project}/networks?scope=${clusterMember}`}
+        />
+        ——
+        <ResourceLink
+          type="network"
+          value={memberUplink}
+          to={`/ui/project/${project}/member/${clusterMember}/network/${memberUplink}`}
+        />
+      </div>
+    );
+  });
+
+  const hasUplink =
+    uplink ?? clusterUplinks.filter((item) => item !== null).length > 0;
+
   return (
     <>
       <h2 className="p-heading--4" id={slugify(CONNECTIONS)}>
         Connections
       </h2>
       <div className="u-sv3 network-topology">
-        {uplink && (
+        {hasUplink && (
           <div className="uplink">
-            <ResourceLink
-              type="network"
-              value={uplink}
-              to={`/ui/project/default/network/${uplink}`}
-            />
+            {hasClusteredUplinks
+              ? clusterUplinks
+              : uplink && (
+                  <div className="uplink-item">
+                    <ResourceLink
+                      type="network"
+                      value={uplink}
+                      to={`/ui/project/default/network/${uplink}`}
+                    />
+                  </div>
+                )}
           </div>
         )}
         <div
           className={classNames("current-network", {
             "has-descendents":
               instances.length > 0 || downstreamNetworks.length > 0,
-            "has-parent": !!uplink,
+            "has-parent": hasUplink,
           })}
         >
+          {member && (
+            <>
+              <ResourceLink
+                type="cluster-member"
+                value={member}
+                to={`/ui/project/${project}/networks?scope=${member}`}
+              />
+              ——
+            </>
+          )}
           <div
-            className="p-chip is-inline is-dense resource-link"
+            className="p-chip is-inline is-dense resource-link active-chip"
             title={network.name}
           >
             <span className="p-chip__value">
diff --git a/src/pages/networks/forms/NetworkAddresses.tsx b/src/pages/networks/forms/NetworkAddresses.tsx
index ce1f14af46..162ef983e4 100644
--- a/src/pages/networks/forms/NetworkAddresses.tsx
+++ b/src/pages/networks/forms/NetworkAddresses.tsx
@@ -1,10 +1,11 @@
-import { FC } from "react";
+import { FC, Fragment } from "react";
 import { FormikProps } from "formik/dist/types";
 import { NetworkFormValues } from "pages/networks/forms/NetworkForm";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { fetchNetworkState } from "api/networks";
 import { MainTable } from "@canonical/react-components";
+import { useParams } from "react-router-dom";
 
 interface Props {
   formik: FormikProps<NetworkFormValues>;
@@ -12,18 +13,24 @@ interface Props {
 }
 
 const NetworkAddresses: FC<Props> = ({ formik, project }) => {
+  const { member } = useParams<{
+    member: string;
+  }>();
+
+  const networkName = formik.values.bareNetwork?.name ?? "";
+
   const { data: networkState } = useQuery({
     queryKey: [
       queryKeys.projects,
       project,
       queryKeys.networks,
-      formik.values.bareNetwork?.name,
+      networkName,
+      queryKeys.members,
+      member,
       queryKeys.state,
     ],
     retry: 0, // physical managed networks can sometimes 404, show error right away and don't retry
-    queryFn: () =>
-      fetchNetworkState(formik.values.bareNetwork?.name ?? "", project),
-    enabled: !formik.values.isCreating,
+    queryFn: () => fetchNetworkState(networkName, project, member),
   });
 
   return (
diff --git a/src/pages/networks/forms/NetworkForm.tsx b/src/pages/networks/forms/NetworkForm.tsx
index 94715065e7..1cb6f4b942 100644
--- a/src/pages/networks/forms/NetworkForm.tsx
+++ b/src/pages/networks/forms/NetworkForm.tsx
@@ -35,6 +35,7 @@ import ScrollableContainer from "components/ScrollableContainer";
 import NetworkTopology from "pages/networks/NetworkTopology";
 import { debounce } from "util/debounce";
 import { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable";
+import { ClusterSpecificSelectField } from "components/ClusterSpecificSelect";
 
 export interface NetworkFormValues {
   readOnly: boolean;
@@ -75,6 +76,7 @@ export interface NetworkFormValues {
   network?: string;
   ovn_ingress_mode?: string;
   parent?: string;
+  parentPerClusterMember?: ClusterSpecificSelectField;
   yaml?: string;
   entityType: "network";
   bareNetwork?: LxdNetwork;
@@ -237,7 +239,11 @@ const NetworkForm: FC<Props> = ({
         {!formik.values.isCreating &&
           query.length < 1 &&
           section !== slugify(YAML_CONFIGURATION) && (
-            <NetworkTopology formik={formik} project={project} />
+            <NetworkTopology
+              formik={formik}
+              project={project}
+              isServerClustered={isClustered}
+            />
           )}
         <Form className="sections" onSubmit={formik.handleSubmit}>
           {section !== slugify(YAML_CONFIGURATION) && (
diff --git a/src/pages/networks/forms/NetworkFormMain.tsx b/src/pages/networks/forms/NetworkFormMain.tsx
index 592c7c741d..f72409975a 100644
--- a/src/pages/networks/forms/NetworkFormMain.tsx
+++ b/src/pages/networks/forms/NetworkFormMain.tsx
@@ -94,14 +94,13 @@ const NetworkFormMain: FC<Props> = ({ formik, project, isClustered }) => {
             formik={formik}
           />
         )}
-        {formik.values.networkType === "physical" &&
-          isManagedNetwork &&
-          (formik.values.isCreating || !isClustered) && (
-            <NetworkParentSelector
-              props={getFormProps("parent")}
-              formik={formik}
-            />
-          )}
+        {formik.values.networkType === "physical" && isManagedNetwork && (
+          <NetworkParentSelector
+            props={getFormProps("parent")}
+            formik={formik}
+            isClustered={isClustered}
+          />
+        )}
         {formik.values.networkType !== "physical" && isManagedNetwork && (
           <>
             <IpAddress
diff --git a/src/pages/networks/forms/NetworkParentSelector.tsx b/src/pages/networks/forms/NetworkParentSelector.tsx
index 6080158029..23ed2b9623 100644
--- a/src/pages/networks/forms/NetworkParentSelector.tsx
+++ b/src/pages/networks/forms/NetworkParentSelector.tsx
@@ -3,20 +3,24 @@ import { Button, Icon, Label, Select } from "@canonical/react-components";
 import Loader from "components/Loader";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
-import { fetchNetworks } from "api/networks";
+import { fetchClusterMemberNetworks, fetchNetworks } from "api/networks";
 import { useParams } from "react-router-dom";
 import { FormikProps } from "formik/dist/types";
 import { NetworkFormValues } from "pages/networks/forms/NetworkForm";
 import { ensureEditMode } from "util/instanceEdit";
 import { focusField } from "util/formFields";
+import ClusterSpecificSelect from "components/ClusterSpecificSelect";
+import { useClusterMembers } from "context/useClusterMembers";
 
 interface Props {
   props?: Record<string, unknown>;
   formik: FormikProps<NetworkFormValues>;
+  isClustered: boolean;
 }
 
-const NetworkParentSelector: FC<Props> = ({ props, formik }) => {
+const NetworkParentSelector: FC<Props> = ({ props, formik, isClustered }) => {
   const { project } = useParams<{ project: string }>();
+  const { data: clusterMembers = [] } = useClusterMembers();
 
   if (!project) {
     return <>Missing project</>;
@@ -25,6 +29,16 @@ const NetworkParentSelector: FC<Props> = ({ props, formik }) => {
   const { data: networks = [], isLoading: isNetworkLoading } = useQuery({
     queryKey: [queryKeys.networks, project],
     queryFn: () => fetchNetworks(project),
+    enabled: !isClustered,
+  });
+
+  const {
+    data: clusterMemberNetworks = [],
+    isLoading: isClusterNetworksLoading,
+  } = useQuery({
+    queryKey: [queryKeys.networks, "default", queryKeys.cluster],
+    queryFn: () => fetchClusterMemberNetworks("default", clusterMembers),
+    enabled: isClustered,
   });
 
   const options = networks
@@ -40,10 +54,56 @@ const NetworkParentSelector: FC<Props> = ({ props, formik }) => {
     value: "",
   });
 
-  if (isNetworkLoading) {
+  if (isNetworkLoading || isClusterNetworksLoading) {
     return <Loader />;
   }
 
+  if (isClustered) {
+    return (
+      <div className="general-field">
+        <div className="general-field-label can-edit">
+          <Label forId="parent" required={formik.values.isCreating}>
+            Parent
+          </Label>
+        </div>
+        <div className="general-field-content">
+          <ClusterSpecificSelect
+            options={clusterMemberNetworks.map((item) => {
+              const memberOptions = item.memberNetworks
+                .filter((network) => network.managed === false)
+                .map((network) => network.name);
+
+              return {
+                memberName: item.memberName,
+                values: memberOptions,
+              };
+            })}
+            values={formik.values.parentPerClusterMember}
+            onChange={(value) => {
+              void formik.setFieldValue("parentPerClusterMember", value);
+            }}
+            readOnly={formik.values.readOnly}
+            valueSuffix={
+              <Button
+                onClick={() => {
+                  ensureEditMode(formik);
+                  focusField("parent");
+                }}
+                className="u-no-margin--bottom"
+                type="button"
+                appearance="base"
+                title="Edit"
+                hasIcon
+              >
+                <Icon name="edit" />
+              </Button>
+            }
+          />
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="general-field">
       <div className="general-field-label can-edit">
diff --git a/src/pages/networks/forms/NetworkStatistics.tsx b/src/pages/networks/forms/NetworkStatistics.tsx
index fcc9baba93..96aa9f958b 100644
--- a/src/pages/networks/forms/NetworkStatistics.tsx
+++ b/src/pages/networks/forms/NetworkStatistics.tsx
@@ -5,6 +5,7 @@ import { humanFileSize } from "util/helpers";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { fetchNetworkState } from "api/networks";
+import { useParams } from "react-router-dom";
 
 interface Props {
   formik: FormikProps<NetworkFormValues>;
@@ -12,17 +13,23 @@ interface Props {
 }
 
 const NetworkStatistics: FC<Props> = ({ formik, project }) => {
+  const { member } = useParams<{
+    member: string;
+  }>();
+
   const { data: networkState } = useQuery({
     queryKey: [
       queryKeys.projects,
       project,
       queryKeys.networks,
       formik.values.bareNetwork?.name,
+      queryKeys.members,
+      member,
       queryKeys.state,
     ],
     retry: 0, // physical managed networks can sometimes 404, show error right away and don't retry
     queryFn: () =>
-      fetchNetworkState(formik.values.bareNetwork?.name ?? "", project),
+      fetchNetworkState(formik.values.bareNetwork?.name ?? "", project, member),
     enabled: !formik.values.isCreating,
   });
 
diff --git a/src/sass/_network_topology.scss b/src/sass/_network_topology.scss
index 6e63d67424..98c85e9bd2 100644
--- a/src/sass/_network_topology.scss
+++ b/src/sass/_network_topology.scss
@@ -3,7 +3,7 @@
   margin-bottom: $spv--x-large;
 
   .current-network {
-    .p-chip {
+    .active-chip {
       background-color: $colors--dark-theme--background-active !important;
 
       * {
@@ -16,7 +16,11 @@
     max-width: 13vw !important;
   }
 
-  .uplink::after,
+  .uplink {
+    text-align: right;
+  }
+
+  .uplink-item::after,
   .has-parent::before,
   .has-descendents::after,
   .downstream-item::before {
@@ -29,12 +33,12 @@
     width: 2rem;
   }
 
-  .uplink::after,
   .has-parent::before,
   .has-descendents::after {
     clip-path: polygon(100% 80%, 0 80%, 0 83%, 100% 83%);
   }
 
+  .uplink-item::after,
   .downstream-item::before {
     clip-path: polygon(
       100% 80%,
@@ -54,14 +58,21 @@
     display: contents;
   }
 
+  .uplink-item::after {
+    transform: scale(-1, 1);
+  }
+
+  .uplink-item:first-child::after,
   .downstream-item:first-child::before {
     clip-path: polygon(100% 80%, 0 80%, 0 100%, 4% 100%, 4% 83%, 100% 83%);
   }
 
+  .uplink-item:last-child::after,
   .downstream-item:last-child::before {
     clip-path: polygon(100% 80%, 4% 80%, 4% 0, 0 0, 0 83%, 100% 83%);
   }
 
+  .uplink-item:only-child::after,
   .downstream-item:only-child::before {
     clip-path: polygon(100% 80%, 0 80%, 0 83%, 100% 83%);
   }
@@ -69,9 +80,10 @@
   .downstream {
     display: flex;
     flex-direction: column;
+  }
 
-    .downstream-item {
-      height: 2rem;
-    }
+  .uplink-item,
+  .downstream-item {
+    height: 2rem;
   }
 }
diff --git a/src/util/networkForm.tsx b/src/util/networkForm.tsx
index ab718fdc98..73ff6702e3 100644
--- a/src/util/networkForm.tsx
+++ b/src/util/networkForm.tsx
@@ -5,8 +5,20 @@ import {
 } from "types/network";
 import { NetworkFormValues } from "pages/networks/forms/NetworkForm";
 import { getNetworkKey } from "util/networks";
+import { LXDClusterMemberNetwork } from "api/networks";
+import { ClusterSpecificSelectField } from "components/ClusterSpecificSelect";
+
+export const toNetworkFormValues = (
+  network: LxdNetwork,
+  networkByMembers?: LXDClusterMemberNetwork,
+): NetworkFormValues => {
+  const parentPerClusterMember: ClusterSpecificSelectField = {};
+  networkByMembers?.map(
+    (item) =>
+      (parentPerClusterMember[item.memberName] =
+        item.network.config.parent ?? ""),
+  );
 
-export const toNetworkFormValues = (network: LxdNetwork): NetworkFormValues => {
   return {
     readOnly: true,
     isCreating: false,
@@ -48,6 +60,7 @@ export const toNetworkFormValues = (network: LxdNetwork): NetworkFormValues => {
     ovn_ingress_mode: network.config[getNetworkKey("ovn_ingress_mode")],
     network: network.config.network,
     parent: network.config.parent,
+    parentPerClusterMember,
     entityType: "network",
     bareNetwork: network,
   };