feat(network) fix review notes for network overhaul

 - use new view for managed networks, remove old network overview
 - topology should be calculated for managed networks
 - search placeholder: "Search for key"
 - search over the description and field name
 - hide topology on yaml config
 - on creation: asterisk for name and uplink/parent
 - on creation: disable submit until a parent is selected
 - left align topology

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

src/components/ConfigurationRow.tsx

@@ -213,7 +213,7 @@ export const getConfigurationRow = ({
       </div>
     ),
     override: renderOverride(),
-    name: label as string,
+    name: `${label as string}-${name ?? ""}-${metadata.value}-${metadata.configField?.shortdesc}`,
   });
 };
 

src/pages/networks/CreateNetwork.tsx

@@ -177,7 +177,8 @@ const CreateNetwork: FC = () => {
           disabled={
             !formik.isValid ||
             !formik.values.name ||
-            (formik.values.networkType === "ovn" && !formik.values.network)
+            (formik.values.networkType === "ovn" && !formik.values.network) ||
+            (formik.values.networkType === "physical" && !formik.values.parent)
           }
           onClick={() => void formik.submitForm()}
         >

src/pages/networks/EditNetwork.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { Button, Notification, useNotify } from "@canonical/react-components";
+import { Button, useNotify } from "@canonical/react-components";
 import { useFormik } from "formik";
 import * as Yup from "yup";
 import { useQueryClient } from "@tanstack/react-query";
@@ -45,15 +45,6 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
   const controllerState = useState<AbortController | null>(null);
   const [version, setVersion] = useState(0);
 
-  if (!network?.managed) {
-    return (
-      <Notification severity="negative">
-        Configuration is only available for managed networks. This network is
-        not managed.
-      </Notification>
-    );
-  }
-
   const NetworkSchema = Yup.object().shape({
     name: Yup.string()
       .test(

src/pages/networks/NetworkDetail.tsx

@@ -8,7 +8,6 @@ import EditNetwork from "pages/networks/EditNetwork";
 import NetworkDetailHeader from "pages/networks/NetworkDetailHeader";
 import Loader from "components/Loader";
 import { Row } from "@canonical/react-components";
-import NetworkDetailOverview from "pages/networks/NetworkDetailOverview";
 import CustomLayout from "components/CustomLayout";
 import TabLinks from "components/TabLinks";
 import NetworkForwards from "pages/networks/NetworkForwards";
@@ -40,12 +39,8 @@ const NetworkDetail: FC = () => {
   const isManagedNetwork = network?.managed;
 
   const getTabs = () => {
-    if (!isManagedNetwork) {
-      return ["Overview"];
-    }
-
     const type = network?.type ?? "";
-    if (type === "physical") {
+    if (type === "physical" || !isManagedNetwork) {
       return ["Configuration"];
     }
 
@@ -66,12 +61,7 @@ const NetworkDetail: FC = () => {
           tabUrl={`/ui/project/${project}/network/${name}`}
         />
         <NotificationRow />
-        {!activeTab && !isManagedNetwork && (
-          <div role="tabpanel" aria-labelledby="overview">
-            {network && <NetworkDetailOverview network={network} />}
-          </div>
-        )}
-        {!activeTab && isManagedNetwork && (
+        {!activeTab && (
           <div role="tabpanel" aria-labelledby="configuration">
             {network && <EditNetwork network={network} project={project} />}
           </div>

src/pages/networks/NetworkList.tsx

@@ -18,6 +18,7 @@ import HelpLink from "components/HelpLink";
 import { useDocs } from "context/useDocs";
 import NetworkForwardCount from "pages/networks/NetworkForwardCount";
 import { useSmallScreen } from "context/useSmallScreen";
+import { capitalizeFirstLetter } from "util/helpers";
 
 const NetworkList: FC = () => {
   const docBaseLink = useDocs();
@@ -70,7 +71,7 @@ const NetworkList: FC = () => {
           "aria-label": "Name",
         },
         {
-          content: network.type,
+          content: capitalizeFirstLetter(network.type),
           role: "rowheader",
           "aria-label": "Type",
         },

src/pages/networks/NetworkTopology.tsx

@@ -10,6 +10,7 @@ import classNames from "classnames";
 import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { fetchNetworks } from "api/networks";
+import classnames from "classnames";
 
 interface Props {
   formik: FormikProps<NetworkFormValues>;
@@ -78,7 +79,9 @@ const NetworkTopology: FC<Props> = ({ formik, project }) => {
               return (
                 <div
                   key={networkUrl}
-                  className="downstream-item downstream-network"
+                  className={classnames("downstream-item", {
+                    "has-descendents": instances.length > 0,
+                  })}
                 >
                   <ResourceLink
                     type="network"

src/pages/networks/forms/NetworkAddresses.tsx

@@ -0,0 +1,81 @@
+import { FC } 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";
+
+interface Props {
+  formik: FormikProps<NetworkFormValues>;
+  project: string;
+}
+
+const NetworkAddresses: FC<Props> = ({ formik, project }) => {
+  const { data: networkState } = useQuery({
+    queryKey: [
+      queryKeys.projects,
+      project,
+      queryKeys.networks,
+      formik.values.bareNetwork?.name,
+      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,
+  });
+
+  return (
+    <>
+      <h2 className="p-heading--4">Addresses</h2>
+      {(networkState?.addresses ?? []).length > 0 ? (
+        <MainTable
+          sortable
+          headers={[
+            { content: "IP", sortKey: "ip" },
+            { content: "Netmask", sortKey: "netmask" },
+            { content: "Scope", sortKey: "scope" },
+            { content: "Family", sortKey: "family" },
+          ]}
+          rows={networkState?.addresses.map((item) => {
+            return {
+              columns: [
+                {
+                  content: item.address,
+                  role: "cell",
+                  "aria-label": "Address",
+                },
+                {
+                  content: item.netmask,
+                  role: "cell",
+                  "aria-label": "Netmask",
+                },
+                {
+                  content: item.scope,
+                  role: "cell",
+                  "aria-label": "Scope",
+                },
+                {
+                  content: item.family,
+                  role: "cell",
+                  "aria-label": "family",
+                },
+              ],
+              sortData: {
+                ip: item.address,
+                netmask: item.netmask,
+                scope: item.scope,
+                family: item.family,
+              },
+            };
+          })}
+        />
+      ) : (
+        "None"
+      )}
+    </>
+  );
+};
+
+export default NetworkAddresses;