Display serial number on peer information and on peers table (#444)

* 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

* Update os icon to match existing one and hide serial if it does not exist

---------

Co-authored-by: Eduard Gert <[email protected]>

Author: EdouardVanbelle

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

@@ -30,6 +30,7 @@ import useFetchApi from "@utils/api";
 import dayjs from "dayjs";
 import { isEmpty, trim } from "lodash";
 import {
+  Barcode,
   Cpu,
   FlagIcon,
   Globe,
@@ -429,6 +430,19 @@ function PeerInformationCard({ peer }: { peer: Peer }) {
           }
           value={peer.os}
         />
+
+        {peer.serial_number && peer.serial_number !== "" && (
+          <Card.ListItem
+            label={
+              <>
+                <Barcode size={16} />
+                Serial Number
+              </>
+            }
+            value={peer.serial_number}
+          />
+        )}
+
         <Card.ListItem
           label={
             <>

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, CpuIcon } from "lucide-react";
 import Image from "next/image";
 import React, { useMemo } from "react";
 import { FaWindows } from "react-icons/fa6";
@@ -14,7 +15,11 @@ import FreeBSDLogo from "@/assets/os-icons/FreeBSD.png";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 
-export function PeerOSCell({ os }: { os: string }) {
+type Props = {
+  os: string;
+  serial?: string;
+};
+export function PeerOSCell({ os, serial }: Readonly<Props>) {
   return (
     <TooltipProvider>
       <Tooltip delayDuration={1}>
@@ -33,14 +38,47 @@ export function PeerOSCell({ os }: { os: string }) {
             </div>
           </div>
         </TooltipTrigger>
-        <TooltipContent>
-          <div className={"text-neutral-300 flex flex-col gap-1"}>{os}</div>
+        <TooltipContent className={"!p-0"}>
+          <div>
+            <ListItem icon={<CpuIcon size={14} />} label={"OS"} value={os} />
+            {serial && serial !== "" && (
+              <ListItem
+                icon={<Barcode size={14} />}
+                label={"Serial Number"}
+                value={serial}
+              />
+            )}
+          </div>
         </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,