feat(vlans): Include subnet_ids on VLAN type and use where valid lp#1…

…959648 (#5149)

src/app/store/vlan/types/base.ts

@@ -4,6 +4,7 @@ import type { APIError } from "app/base/types";
 import type { Controller, ControllerMeta } from "app/store/controller/types";
 import type { Fabric, FabricMeta } from "app/store/fabric/types";
 import type { Space, SpaceMeta } from "app/store/space/types";
+import type { Subnet } from "app/store/subnet/types";
 import type { TimestampedModel } from "app/store/types/model";
 import type { Node } from "app/store/types/node";
 import type { EventError, GenericState } from "app/store/types/state";
@@ -20,6 +21,7 @@ export type BaseVLAN = TimestampedModel & {
   relay_vlan: VLAN[VLANMeta.PK] | null;
   secondary_rack: Controller[ControllerMeta.PK] | null;
   space: Space[SpaceMeta.PK] | null;
+  subnet_ids: Subnet["id"][];
   vid: VlanVid.UNTAGGED | number;
 };
 

src/app/subnets/views/SubnetsList/SubnetsTable/utils.test.tsx

@@ -14,7 +14,7 @@ import {
 
 test("getTableData generates correct sortData for fabric", () => {
   const fabrics = [fabricFactory({ id: 1, vlan_ids: [1] })];
-  const vlans = [vlanFactory({ id: 1, fabric: 1 })];
+  const vlans = [vlanFactory({ id: 1, fabric: 1, subnet_ids: [1] })];
   const subnets = [subnetFactory({ vlan: 1, cidr: "172.16.1.0/24" })];
   const spaces = [spaceFactory({ vlan_ids: [1] })];
   expect(
@@ -131,9 +131,15 @@ test("filterSubnetsBySearchText matches a correct number of results with each va
     fabricFactory({ id: 3, name: "test-fabric-3" }),
   ];
   const vlans = [
-    vlanFactory({ id: 1, fabric: 1, space: 1, name: "test-vlan" }),
+    vlanFactory({
+      id: 1,
+      fabric: 1,
+      space: 1,
+      name: "test-vlan",
+      subnet_ids: [1],
+    }),
   ];
-  const subnets = [subnetFactory({ cidr: "172.16.1.0/24", vlan: 1 })];
+  const subnets = [subnetFactory({ cidr: "172.16.1.0/24", vlan: 1, id: 1 })];
   const spaces = [spaceFactory({ id: 1, name: "space-1" })];
   const tableRows = getTableData({ fabrics, vlans, subnets, spaces }, "fabric");
 

src/app/subnets/views/SubnetsList/SubnetsTable/utils.tsx

@@ -177,12 +177,12 @@ const getByFabric = (data: SubnetsTableData): SubnetsTableRow[] => {
         simpleSortByKey("vid")
       );
       vlansInFabric.forEach((vlan) => {
-        const subnetsInVLAN = getSubnetsInVLAN(data.subnets, vlan.id);
-        const vlanHasSubnets = subnetsInVLAN.length > 0;
+        const vlanHasSubnets = vlan.subnet_ids.length > 0;
         if (!vlanHasSubnets) {
           const space = getSpaceById(data.spaces, vlan.space);
           rows.push(getRowData({ fabric, vlan, space, data }));
         } else {
+          const subnetsInVLAN = getSubnetsInVLAN(data.subnets, vlan.id);
           subnetsInVLAN.forEach((subnet) => {
             const space = getSpaceById(data.spaces, subnet.space);
             rows.push(getRowData({ fabric, vlan, subnet, space, data }));

src/app/subnets/views/VLANDetails/DHCPStatus/DHCPStatus.test.tsx

@@ -70,8 +70,9 @@ it(`shows a warning and disables Configure DHCP button if there are no subnets
 });
 
 it("does not show a warning if there are subnets attached to the VLAN", () => {
-  const vlan = vlanFactory();
-  const subnet = subnetFactory({ vlan: vlan.id });
+  const subnetId = 1;
+  const vlan = vlanFactory({ subnet_ids: [subnetId] });
+  const subnet = subnetFactory({ id: subnetId, vlan: vlan.id });
   const state = rootStateFactory({
     subnet: subnetStateFactory({ items: [subnet] }),
     vlan: vlanStateFactory({ items: [vlan] }),

src/app/subnets/views/VLANDetails/DHCPStatus/DHCPStatus.tsx

@@ -62,7 +62,7 @@ const DHCPStatus = ({ id, openForm }: Props): JSX.Element | null => {
     vlanSelectors.getById(state, id)
   );
   const vlanSubnets = useSelector((state: RootState) =>
-    subnetSelectors.getByVLAN(state, id)
+    subnetSelectors.getByIds(state, vlan?.subnet_ids || [])
   );
   const subnetsLoading = useSelector(subnetSelectors.loading);
 

src/app/subnets/views/VLANDetails/VLANDetails.tsx

@@ -34,7 +34,7 @@ const VLANDetails = (): JSX.Element => {
   );
   const vlansLoading = useSelector(vlanSelectors.loading);
   const subnets = useSelector((state: RootState) =>
-    subnetSelectors.getByVLAN(state, id)
+    subnetSelectors.getByIds(state, vlan?.subnet_ids || [])
   );
   const [showDHCPForm, setShowDHCPForm] = useState(false);
   useWindowTitle(`${vlan?.name || "VLAN"} details`);
@@ -94,10 +94,7 @@ const VLANDetails = (): JSX.Element => {
           <VLANSubnets id={id} />
         </>
       )}
-      <DHCPSnippets
-        modelName={VLANMeta.MODEL}
-        subnetIds={subnets.map(({ id }) => id)}
-      />
+      <DHCPSnippets modelName={VLANMeta.MODEL} subnetIds={vlan.subnet_ids} />
     </PageContent>
   );
 };

src/app/subnets/views/VLANDetails/VLANSubnets/VLANSubnets.test.tsx

@@ -19,13 +19,14 @@ import { render, screen, within } from "testing/utils";
 const mockStore = configureStore();
 
 it("renders correct details", () => {
-  const vlan = vlanFactory({ id: 5005 });
+  const vlan = vlanFactory({ id: 5005, subnet_ids: [1] });
   const subnet = subnetFactory({
     allow_dns: true,
     allow_proxy: false,
     managed: true,
     statistics: subnetStatisticsFactory({ usage_string: "25%" }),
     vlan: vlan.id,
+    id: 1,
   });
   const state = rootStateFactory({
     subnet: subnetStateFactory({ items: [subnet] }),

src/testing/factories/vlan.ts

@@ -17,6 +17,7 @@ export const vlan = extend<TimestampedModel, BaseVLAN>(timestampedModel, {
   relay_vlan: null,
   secondary_rack: null,
   space: random,
+  subnet_ids: () => [],
   vid: random,
 });