feat: add MAC organization into discoveries view (#5917)

Author: MaikRe

src/app/networkDiscovery/components/DiscoveriesTable/DiscoveriesTable.test.tsx

@@ -64,6 +64,48 @@ describe("DiscoveriesTable", () => {
         ).toBeInTheDocument();
       });
     });
+
+    it("displays MAC address with organization", async () => {
+      const mockDiscovery = discovery({
+        id: 1,
+        mac_address: "aa:bb:cc:dd:ee:ff",
+        mac_organization: "Intel Corporate",
+      });
+      mockServer.use(
+        networkDiscoveryResolvers.listNetworkDiscoveries.handler({
+          items: [mockDiscovery],
+          total: 1,
+        })
+      );
+
+      renderWithProviders(<DiscoveriesTable />);
+
+      await waitFor(() => {
+        expect(screen.getByText("aa:bb:cc:dd:ee:ff")).toBeInTheDocument();
+        expect(screen.getByText("Intel Corporate")).toBeInTheDocument();
+      });
+    });
+
+    it("displays 'Unknown' when MAC organization is not available", async () => {
+      const mockDiscovery = discovery({
+        id: 1,
+        mac_address: "aa:bb:cc:dd:ee:ff",
+        mac_organization: undefined,
+      });
+      mockServer.use(
+        networkDiscoveryResolvers.listNetworkDiscoveries.handler({
+          items: [mockDiscovery],
+          total: 1,
+        })
+      );
+
+      renderWithProviders(<DiscoveriesTable />);
+
+      await waitFor(() => {
+        expect(screen.getByText("aa:bb:cc:dd:ee:ff")).toBeInTheDocument();
+        expect(screen.getByText("Unknown")).toBeInTheDocument();
+      });
+    });
   });
 
   describe("actions", () => {

src/app/networkDiscovery/components/DiscoveriesTable/useDiscoveriesTableColumns/useDiscoveriesTableColumns.tsx

@@ -4,6 +4,7 @@ import { ContextualMenu } from "@canonical/react-components";
 import type { ColumnDef } from "@tanstack/react-table";
 
 import type { DiscoveryResponse } from "@/app/apiclient";
+import DoubleRow from "@/app/base/components/DoubleRow/DoubleRow";
 import MacAddressDisplay from "@/app/base/components/MacAddressDisplay";
 import TooltipButton from "@/app/base/components/TooltipButton";
 import { useSidePanel } from "@/app/base/side-panel-context";
@@ -55,10 +56,15 @@ const useDiscoveriesTableColumns = (): DiscoveryColumnDef[] => {
         header: "Mac Address",
         cell: ({
           row: {
-            original: { mac_address },
+            original: { mac_address, mac_organization },
           },
         }) => {
-          return <MacAddressDisplay>{mac_address}</MacAddressDisplay>;
+          return (
+            <DoubleRow
+              primary={<MacAddressDisplay>{mac_address}</MacAddressDisplay>}
+              secondary={mac_organization || "Unknown"}
+            />
+          );
         },
       },
       {

src/testing/factories/discovery.ts

@@ -16,6 +16,7 @@ export const discovery = extend<Model, DiscoveryResponse>(model, {
   is_external_dhcp: false,
   last_seen: () => timestamp("Wed, 08 Jul. 2020 05:35:4"),
   mac_address: "00:00:00:00:00:00",
+  mac_organization: "Unknown Vendor",
   mdns_id: 2,
   neighbour_id: 3,
   observer_hostname: "observer-hostname",