From 5360f7f1446b5974a76ab5e1ffa4487c7e94ebb8 Mon Sep 17 00:00:00 2001
From: Peter Makowski <peter.makowski@canonical.com>
Date: Wed, 10 Apr 2024 13:00:39 +0200
Subject: [PATCH] fix: device details subnet on load MAASENG-3036 (#5394)

---
 .../NodeSummaryNetworkCard.test.tsx                  |  2 ++
 .../NodeSummaryNetworkCard.tsx                       | 12 ++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.test.tsx b/src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.test.tsx
index bf6fbc0eb9..53a763488d 100644
--- a/src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.test.tsx
+++ b/src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.test.tsx
@@ -16,6 +16,7 @@ describe("NodeSummaryNetworkCard", () => {
       device: factory.deviceState({ loaded: true }),
       fabric: factory.fabricState({ loaded: true }),
       vlan: factory.vlanState({ loaded: true }),
+      subnet: factory.subnetState({ loaded: true }),
     });
   });
 
@@ -33,6 +34,7 @@ describe("NodeSummaryNetworkCard", () => {
 
     expect(actions.some((action) => action.type === "fabric/fetch"));
     expect(actions.some((action) => action.type === "vlan/fetch"));
+    expect(actions.some((action) => action.type === "subnet/fetch"));
   });
 
   it("shows a spinner while network data is loading", () => {
diff --git a/src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.tsx b/src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.tsx
index ddd5885ea6..a2a6e2ddf5 100644
--- a/src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.tsx
+++ b/src/app/base/components/NodeSummaryNetworkCard/NodeSummaryNetworkCard.tsx
@@ -12,6 +12,8 @@ import type { Device } from "@/app/store/device/types";
 import { fabricActions } from "@/app/store/fabric";
 import fabricSelectors from "@/app/store/fabric/selectors";
 import type { MachineDetails } from "@/app/store/machine/types";
+import { subnetActions } from "@/app/store/subnet";
+import subnetSelectors from "@/app/store/subnet/selectors";
 import type { NetworkInterface } from "@/app/store/types/node";
 import { vlanActions } from "@/app/store/vlan";
 import vlanSelectors from "@/app/store/vlan/selectors";
@@ -107,15 +109,21 @@ const NodeSummaryNetworkCard = ({
 }: Props): JSX.Element => {
   const fabricsLoaded = useSelector(fabricSelectors.loaded);
   const vlansLoaded = useSelector(vlanSelectors.loaded);
+  const subnetsLoaded = useSelector(subnetSelectors.loaded);
+  const allNetworkingLoaded = fabricsLoaded && vlansLoaded && subnetsLoaded;
 
-  useFetchActions([fabricActions.fetch, vlanActions.fetch]);
+  useFetchActions([
+    fabricActions.fetch,
+    vlanActions.fetch,
+    subnetActions.fetch,
+  ]);
 
   let content: JSX.Element;
 
   // Confirm that the full machine details have been fetched. This also allows
   // TypeScript know we're using the right union type (otherwise it will
   // complain that interfaces doesn't exist on the base machine type).
-  if (interfaces && fabricsLoaded && vlansLoaded) {
+  if (interfaces && allNetworkingLoaded) {
     const groupedInterfaces = groupInterfaces(interfaces);
     content = (
       <>