display serial number on peer information and on peers table

  * add serial on peers list (included in OS information to minimize informations)
  * permit a lookup via serial number
  * add serial on peer information

Author: EdouardVanbelle

src/app/(dashboard)/peer/page.tsx

@@ -31,6 +31,7 @@ import dayjs from "dayjs";
 import { isEmpty, trim } from "lodash";
 import {
   Cpu,
+  Barcode,
   FlagIcon,
   Globe,
   History,
@@ -429,6 +430,17 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
           value={peer.os}
         />
+
+        <Card.ListItem
+          label={
+            <>
+              <Barcode size={16} />
+              Serial Number
+            </>
+          }
+          value={peer.serial_number}
+        />
+
         <Card.ListItem
           label={
             <>
@@ -465,6 +477,7 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
           value={peer.ui_version?.replace("netbird-desktop-ui/", "")}
         />
+
       </Card.List>
     </Card>
   );

src/interfaces/Peer.ts

@@ -23,4 +23,5 @@ export interface Peer {
   city_name: string;
   country_code: string;
   connection_ip: string;
+  serial_number: string;
 }

src/modules/groups/AssignPeerToGroupModal.tsx

@@ -370,6 +370,6 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     header: ({ column }) => {
       return <DataTableHeader column={column}>OS</DataTableHeader>;
     },
-    cell: ({ row }) => <PeerOSCell os={row.original.os} />,
+    cell: ({ row }) => <PeerOSCell os={row.original.os} serial={row.original.serial_number} />,
   },
 ];

src/modules/peers/PeerOSCell.tsx

@@ -4,6 +4,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@components/Tooltip";
+import { Barcode, Laptop } from "lucide-react";
 import Image from "next/image";
 import React, { useMemo } from "react";
 import { FaWindows } from "react-icons/fa6";
@@ -14,7 +15,7 @@ import FreeBSDLogo from "@/assets/os-icons/FreeBSD.png";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 
-export function PeerOSCell({ os }: { os: string }) {
+export function PeerOSCell({ os, serial }: { os: string, serial?: string }) {
   return (
     <TooltipProvider>
       <Tooltip delayDuration={1}>
@@ -34,13 +35,50 @@ export function PeerOSCell({ os }: { os: string }) {
           </div>
         </TooltipTrigger>
         <TooltipContent>
-          <div className={"text-neutral-300 flex flex-col gap-1"}>{os}</div>
+          <ListItem
+            icon={<Laptop size={14} />}
+            label={"OS"}
+            value={os}
+          />
+          { (serial !== undefined) &&
+          <ListItem
+
+            icon={<Barcode size={14} />}
+            label={"Serial"}
+            value={serial}
+          />
+          }
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
 }
 
+const ListItem = ({
+  icon,
+  label,
+  value,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string | React.ReactNode;
+}) => {
+  return (
+    <div
+      className={
+        "flex justify-between gap-5 border-b border-nb-gray-920 py-2 px-4 last:border-b-0 text-xs"
+      }
+    >
+      <div className={"flex items-center gap-2 text-nb-gray-100 font-medium"}>
+        {icon}
+        {label}
+      </div>
+      <div className={"text-nb-gray-400"}>{value}</div>
+    </div>
+  );
+};
+
+
 export function OSLogo({ os }: { os: string }) {
   const icon = useMemo(() => {
     return getOperatingSystem(os);

src/modules/peers/PeersTable.tsx

@@ -134,11 +134,20 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     cell: ({ row }) => <PeerLastSeenCell peer={row.original} />,
   },
   {
+    id: "os",
     accessorKey: "os",
     header: ({ column }) => {
       return <DataTableHeader column={column}>OS</DataTableHeader>;
     },
-    cell: ({ row }) => <PeerOSCell os={row.original.os} />,
+    cell: ({ row }) => <PeerOSCell os={row.original.os} serial={row.original.serial_number} />,
+  },
+  {
+    id: "serial",
+    header: ({ column }) => {
+      return <DataTableHeader column={column}>Serial number</DataTableHeader>;
+    },
+    accessorFn: (peer) => peer.serial_number,
+    sortingFn: "text",
   },
   {
     accessorKey: "version",
@@ -241,14 +250,15 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
         setSorting={setSorting}
         columns={PeersTableColumns}
         data={peers}
-        searchPlaceholder={"Search by name, IP, owner or group..."}
+        searchPlaceholder={"Search by name, IP, Serial, owner or group..."}
         columnVisibility={{
           select: !isUser,
           connected: false,
           approval_required: false,
           group_name_strings: false,
           group_names: false,
           ip: false,
+          serial: false,
           user_name: false,
           user_email: false,
           actions: !isUser,