feat(network) add downstream networks to topology view

Signed-off-by: David Edler <[email protected]>
canonical · Dec 18, 2024 · de65ecf · de65ecf
1 parent dfd0ba2
commit de65ecf
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 19 deletions.
diff --git a/src/pages/networks/EditNetwork.tsx b/src/pages/networks/EditNetwork.tsx
@@ -143,6 +143,7 @@ const EditNetwork: FC<Props> = ({ network, project }) => {
   return (
     <>
       <NetworkForm
+        key={network.name}
         formik={formik}
         getYaml={getYaml}
         project={project}

diff --git a/src/pages/networks/NetworkTopology.tsx b/src/pages/networks/NetworkTopology.tsx
@@ -7,19 +7,34 @@ import ResourceLink from "components/ResourceLink";
 import { filterUsedByType } from "util/usedBy";
 import { Button, Icon } from "@canonical/react-components";
 import classNames from "classnames";
+import { useQuery } from "@tanstack/react-query";
+import { queryKeys } from "util/queryKeys";
+import { fetchNetworks } from "api/networks";
 
 interface Props {
   formik: FormikProps<NetworkFormValues>;
+  project: string;
 }
 
-const NetworkTopology: FC<Props> = ({ formik }) => {
+const NetworkTopology: FC<Props> = ({ formik, project }) => {
   const [isCollapsed, setCollapsed] = useState(true);
   const network = formik.values.bareNetwork;
 
   if (!network) {
     return;
   }
 
+  const { data: networks = [] } = useQuery({
+    queryKey: [queryKeys.projects, project, queryKeys.networks],
+    queryFn: () => fetchNetworks(project),
+  });
+
+  const downstreamNetworks = networks.filter(
+    (network) =>
+      network.config.network === formik.values.name ||
+      network.config.parent === formik.values.name,
+  );
+
   const instances = filterUsedByType("instance", network.used_by);
   const uplink = formik.values.parent ?? formik.values.network;
 
@@ -40,7 +55,8 @@ const NetworkTopology: FC<Props> = ({ formik }) => {
         )}
         <div
           className={classNames("current-network", {
-            "has-descendents": instances.length > 0,
+            "has-descendents":
+              instances.length > 0 || downstreamNetworks.length > 0,
             "has-parent": !!uplink,
           })}
         >
@@ -54,13 +70,41 @@ const NetworkTopology: FC<Props> = ({ formik }) => {
             </span>
           </div>
         </div>
-        <div className="instances">
+        <div className="downstream">
+          {downstreamNetworks
+            .slice(0, isCollapsed ? 5 : downstreamNetworks.length)
+            .map((item) => {
+              const networkUrl = `/ui/project/default/network/${item.name}`;
+              return (
+                <div
+                  key={networkUrl}
+                  className="downstream-item downstream-network"
+                >
+                  <ResourceLink
+                    type="network"
+                    value={item.name}
+                    to={networkUrl}
+                  />
+                </div>
+              );
+            })}
+          {downstreamNetworks.length > 5 && isCollapsed && (
+            <div className="downstream-item">
+              <Button
+                appearance="link"
+                onClick={() => setCollapsed(false)}
+                small
+              >
+                Show all
+              </Button>
+            </div>
+          )}
           {instances
             .slice(0, isCollapsed ? 5 : instances.length)
             .map((item) => {
               const instanceUrl = `/ui/project/${item.project}/instance/${item.name}`;
               return (
-                <div key={instanceUrl} className="instance">
+                <div key={instanceUrl} className="downstream-item">
                   <ResourceLink
                     type="instance"
                     value={item.name}
@@ -70,7 +114,7 @@ const NetworkTopology: FC<Props> = ({ formik }) => {
               );
             })}
           {instances.length > 5 && isCollapsed && (
-            <div className="instance">
+            <div className="downstream-item">
               <Button
                 appearance="link"
                 onClick={() => setCollapsed(false)}

diff --git a/src/pages/networks/forms/NetworkForm.tsx b/src/pages/networks/forms/NetworkForm.tsx
@@ -226,7 +226,9 @@ const NetworkForm: FC<Props> = ({
         dependencies={[notify.notification]}
         belowIds={["form-footer", "status-bar"]}
       >
-        {!formik.values.isCreating && <NetworkTopology formik={formik} />}
+        {!formik.values.isCreating && (
+          <NetworkTopology formik={formik} project={project} />
+        )}
         <Form className="sections" onSubmit={formik.handleSubmit}>
           {section !== slugify(YAML_CONFIGURATION) && (
             <>
@@ -237,20 +239,41 @@ const NetworkForm: FC<Props> = ({
                   formik={formik}
                   project={project}
                   isClustered={isClustered}
+                  key={`main-${formik.values.bareNetwork?.name}`}
                 />
               )}
               {availableSections.includes(BRIDGE) && (
-                <NetworkFormBridge formik={formik} filterRows={filterRows} />
+                <NetworkFormBridge
+                  formik={formik}
+                  filterRows={filterRows}
+                  key={`bridge-${formik.values.bareNetwork?.name}`}
+                />
               )}
               {availableSections.includes(IPV4) && (
-                <NetworkFormIpv4 formik={formik} filterRows={filterRows} />
+                <NetworkFormIpv4
+                  formik={formik}
+                  filterRows={filterRows}
+                  key={`ipv4-${formik.values.bareNetwork?.name}`}
+                />
               )}
               {availableSections.includes(IPV6) && (
-                <NetworkFormIpv6 formik={formik} filterRows={filterRows} />
+                <NetworkFormIpv6
+                  formik={formik}
+                  filterRows={filterRows}
+                  key={`ipv6-${formik.values.bareNetwork?.name}`}
+                />
               )}
-              <NetworkFormDns formik={formik} filterRows={filterRows} />
+              <NetworkFormDns
+                formik={formik}
+                filterRows={filterRows}
+                key={`dns-${formik.values.bareNetwork?.name}`}
+              />
               {availableSections.includes(OVN) && (
-                <NetworkFormOvn formik={formik} filterRows={filterRows} />
+                <NetworkFormOvn
+                  formik={formik}
+                  filterRows={filterRows}
+                  key={`ovn-${formik.values.bareNetwork?.name}`}
+                />
               )}
             </>
           )}

diff --git a/src/pages/networks/forms/NetworkStatistics.tsx b/src/pages/networks/forms/NetworkStatistics.tsx
@@ -42,6 +42,12 @@ const NetworkStatistics: FC<Props> = ({ formik, project }) => {
           {networkState?.counters.packets_sent ?? 0} packets)
         </div>
       </div>
+      <div className="general-field">
+        <div className="general-field-label">Status</div>
+        <div className="general-field-content">
+          {formik.values.bareNetwork?.status ?? "-"}
+        </div>
+      </div>
     </>
   );
 };

diff --git a/src/sass/_network_topology.scss b/src/sass/_network_topology.scss
@@ -16,7 +16,8 @@
   .uplink::after,
   .has-parent::before,
   .has-descendents::after,
-  .instance::before {
+  .downstream-item::before,
+  .downstream-network::after {
     background-color: #6e7681;
     content: "";
     display: inline-block;
@@ -28,11 +29,12 @@
 
   .uplink::after,
   .has-parent::before,
-  .has-descendents::after {
+  .has-descendents::after,
+  .downstream-network::after {
     clip-path: polygon(100% 80%, 0 80%, 0 85%, 100% 85%);
   }
 
-  .instance::before {
+  .downstream-item::before {
     clip-path: polygon(
       100% 80%,
       5% 80%,
@@ -45,23 +47,23 @@
     );
   }
 
-  .instance:first-child::before {
+  .downstream-item:first-child::before {
     clip-path: polygon(100% 80%, 0 80%, 0 100%, 5% 100%, 5% 85%, 100% 85%);
   }
 
-  .instance:last-child::before {
+  .downstream-item:last-child::before {
     clip-path: polygon(100% 80%, 5% 80%, 5% 0, 0 0, 0 85%, 100% 85%);
   }
 
-  .instance:only-child::before {
+  .downstream-item:only-child::before {
     clip-path: polygon(100% 80%, 0 80%, 0 85%, 100% 85%);
   }
 
-  .instances {
+  .downstream {
     display: flex;
     flex-direction: column;
 
-    .instance {
+    .downstream-item {
       height: 30px;
     }
   }