From 960200fb5968dc6c154ba08d668eb799c0fbcf93 Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <edouard.vanbelle@shadow.tech>
Date: Wed, 27 Nov 2024 01:04:49 +0100
Subject: [PATCH] [WIP] serial number lookup + filter to only "All" group

Signed-off-by: Edouard Vanbelle <edouard.vanbelle@shadow.tech>
---
 src/modules/groups/AssignPeerToGroupModal.tsx |   2 +-
 src/modules/groups/GroupSelector.tsx          |  79 ++++++-
 src/modules/peers/PeerOSCell.tsx              |  42 +++-
 src/modules/peers/PeersTable.tsx              | 213 ++++++++++--------
 4 files changed, 235 insertions(+), 101 deletions(-)

diff --git a/src/modules/groups/AssignPeerToGroupModal.tsx b/src/modules/groups/AssignPeerToGroupModal.tsx
index 9e15305b..493dbb51 100644
--- a/src/modules/groups/AssignPeerToGroupModal.tsx
+++ b/src/modules/groups/AssignPeerToGroupModal.tsx
@@ -367,6 +367,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} />,
   },
 ];
diff --git a/src/modules/groups/GroupSelector.tsx b/src/modules/groups/GroupSelector.tsx
index c3b77d80..ea0bd178 100644
--- a/src/modules/groups/GroupSelector.tsx
+++ b/src/modules/groups/GroupSelector.tsx
@@ -21,17 +21,23 @@ import { Group } from "@/interfaces/Group";
 
 interface MultiSelectProps {
   values: string[];
-  onChange: (items: string[]) => void;
+  exactValue?: string;
+  onChange: (items: string[], exactItem?: string) => void;
   disabled?: boolean;
   popoverWidth?: "auto" | number;
   groups: Group[] | undefined;
+  unassignedCount?: number;
+  defaultGroupName?: string;
 }
 export function GroupSelector({
   onChange,
   values,
+  exactValue: exactValues,
   disabled = false,
   popoverWidth = 400,
   groups,
+  unassignedCount,
+  defaultGroupName = "All", //defined as a property, no clue if this value may change in the future
 }: MultiSelectProps) {
   const searchRef = React.useRef<HTMLInputElement>(null);
   const [inputRef, { width }] = useElementSize<HTMLButtonElement>();
@@ -40,9 +46,20 @@ export function GroupSelector({
   const toggle = (code: string) => {
     const isSelected = values.find((c) => c == code) != undefined;
     if (isSelected) {
-      onChange && onChange(values.filter((c) => c != code));
+      onChange && onChange(values.filter((c) => c != code), undefined);
     } else {
-      onChange && onChange([...values, code]);
+      onChange && onChange([...values, code], undefined);
+      setSearch("");
+    }
+  };
+
+  const toggleExactGroup = (code: string) => {
+    const isSelected = exactValues == code;
+    if (isSelected) {
+      onChange && onChange([], undefined);
+      setSearch("");
+    } else {
+      onChange && onChange([], code);
       setSearch("");
     }
   };
@@ -65,11 +82,13 @@ export function GroupSelector({
         <Button variant={"secondary"} disabled={disabled} ref={inputRef}>
           <FolderGit2 size={16} className={"shrink-0"} />
           <div className={"w-full flex justify-between"}>
-            {values.length > 0 ? (
-              <div>{values.length} Group(s)</div>
-            ) : (
-              "All Groups"
-            )}
+            {
+              exactValues != undefined
+                ? ("Unassigned peers")
+                : values.length > 0
+                  ? (`${values.length} Group(s)`)
+                  : ("All Groups")
+            }
             <div className={"pl-2"}>
               <ChevronsUpDown size={18} className={"shrink-0"} />
             </div>
@@ -132,7 +151,6 @@ export function GroupSelector({
                 </div>
               </div>
             </div>
-
             <ScrollArea
               className={
                 "max-h-[380px] overflow-y-auto flex flex-col gap-1 pl-2 py-2 pr-3"
@@ -141,7 +159,48 @@ export function GroupSelector({
               <CommandGroup>
                 <div className={""}>
                   <div className={"grid grid-cols-1 gap-1"}>
-                    {orderBy(groups, "name")?.map((item) => {
+                    <CommandItem
+                      className={"p-1"}
+                      onSelect={() => {
+                        toggleExactGroup( defaultGroupName);
+                        searchRef.current?.focus();
+                      }}
+                      onClick={(e) => e.preventDefault()}
+                      >
+                      <div
+                        className={
+                          "text-neutral-500 dark:text-nb-gray-300 font-medium flex items-center gap-3 py-1 px-1 w-full"
+                        }
+                      >
+                        <Checkbox checked={exactValues == defaultGroupName}/>
+                        <div
+                          className={
+                            "flex justify-between items-center w-full"
+                          }
+                        >
+                          <div
+                            className={
+                              "flex items-center gap-2 whitespace-nowrap text-sm"
+                            }
+                          >
+                            <FolderGit2 size={13} className={"shrink-0"} />
+                            <TextWithTooltip text={"Unassigned peers"} />
+                          </div>
+                          <div
+                                className={
+                                  "flex items-center gap-2 text-xs text-nb-gray-200/60"
+                                }
+                              >
+                                <MonitorSmartphoneIcon size={13} />
+                                {unassignedCount} Peer(s)
+                              </div>
+                        </div>
+                      </div>
+                    </CommandItem>
+                    <hr />
+                    {orderBy(groups, "name")
+                        ?.filter((group) => group.name != defaultGroupName) // Ignore default group
+                        ?.map((item) => {
                       const value = item?.name || "";
                       if (value === "") return null;
                       const isSelected =
diff --git a/src/modules/peers/PeerOSCell.tsx b/src/modules/peers/PeerOSCell.tsx
index 85df9933..9daf2cb5 100644
--- a/src/modules/peers/PeerOSCell.tsx
+++ b/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);
diff --git a/src/modules/peers/PeersTable.tsx b/src/modules/peers/PeersTable.tsx
index 3f98c381..7c9b569e 100644
--- a/src/modules/peers/PeersTable.tsx
+++ b/src/modules/peers/PeersTable.tsx
@@ -12,8 +12,11 @@ import GetStartedTest from "@components/ui/GetStartedTest";
 import { NotificationCountBadge } from "@components/ui/NotificationCountBadge";
 import {
   ColumnDef,
+  ColumnFiltersState,
   RowSelectionState,
   SortingState,
+  Table,
+  VisibilityState,
 } from "@tanstack/react-table";
 import { uniqBy } from "lodash";
 import { ExternalLinkIcon } from "lucide-react";
@@ -40,6 +43,7 @@ import PeerVersionCell from "@/modules/peers/PeerVersionCell";
 const PeersTableColumns: ColumnDef<Peer>[] = [
   {
     id: "select",
+    enableHiding: false,
     header: ({ table }) => (
       <div className={"min-w-[20px] max-w-[20px]"}>
         <Checkbox
@@ -60,10 +64,10 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
       </div>
     ),
     enableSorting: false,
-    enableHiding: false,
   },
   {
     accessorKey: "name",
+    enableHiding: false,
     header: ({ column }) => {
       return <DataTableHeader column={column}>Name</DataTableHeader>;
     },
@@ -82,6 +86,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     accessorFn: (peer) => peer.connected,
   },
   {
+    id: "ip",
     accessorKey: "ip",
     sortingFn: "text",
   },
@@ -94,6 +99,8 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     accessorFn: (peer) => (peer.user ? peer.user?.email : "Unknown"),
   },
   {
+    id: "dns_label",
+    enableHiding: false,
     accessorKey: "dns_label",
     header: ({ column }) => {
       return <DataTableHeader column={column}>Address</DataTableHeader>;
@@ -101,11 +108,21 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     cell: ({ row }) => <PeerAddressCell peer={row.original} />,
   },
   {
+    id: "group_name_strings",
     accessorKey: "group_name_strings",
     accessorFn: (peer) => peer.groups?.map((g) => g?.name || "").join(", "),
     sortingFn: "text",
   },
   {
+    // used for exact group matching
+    id: "exact_group_name_strings",
+    accessorKey: "exact_group_name_strings",
+    accessorFn: (peer) => peer.groups?.map((g) => g?.name || "").join("|"),
+    sortingFn: "text",
+    filterFn: "equals"
+  },
+  {
+    id: "group_names",
     accessorKey: "group_names",
     accessorFn: (peer) => peer.groups?.map((g) => g?.name || ""),
     sortingFn: "text",
@@ -124,6 +141,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
     ),
   },
   {
+    id: "last_seen",
     accessorKey: "last_seen",
     header: ({ column }) => {
       return <DataTableHeader column={column}>Last seen</DataTableHeader>;
@@ -132,13 +150,23 @@ 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",
   },
   {
+    id: "version",
     accessorKey: "version",
     header: ({ column }) => {
       return <DataTableHeader column={column}>Version</DataTableHeader>;
@@ -165,8 +193,10 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
   },
   {
     id: "actions",
+    enableHiding: false,
     accessorKey: "id",
     header: "",
+
     cell: ({ row }) => (
       <PeerProvider peer={row.original}>
         <PeerActionCell />
@@ -200,9 +230,19 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
     ],
   );
 
+  // Caveat: no clue if this name may change in the future
+  // By default server assign every peers to `All` group
+  const DEFAULT_GROUP_NAME = "All";
+
   const pendingApprovalCount =
     peers?.filter((p) => p.approval_required).length || 0;
 
+  // Count peers that are not assigned to other group than the default group
+  const unassignedCount = peers?.reduce(
+    (acc, p) => acc + ((p.groups?.length == 1 && p.groups.at(0)?.name == DEFAULT_GROUP_NAME) ? 1: 0),
+    0
+  );
+
   const tableGroups =
     (uniqBy(
       peers?.map((p) => p.groups?.map((g) => g)).flatMap((g) => g),
@@ -213,12 +253,60 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
 
   const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
 
+  const colVisibility: VisibilityState = {
+    select: !isUser,
+    actions: !isUser,
+    groups: !isUser,
+    connected: false,
+    approval_required: false,
+
+    // hidden, but usefull for lookup
+    serial: false,
+    group_name_strings: false,
+    exact_group_name_strings: false,
+    group_names: false,
+    ip: false,
+    user_name: false,
+    user_email: false,
+  }
+
+  const [resultingColumnVisibility, setColumnVisibility] = useState(colVisibility);
+
   const resetSelectedRows = () => {
     if (Object.keys(selectedRows).length > 0) {
       setSelectedRows({});
     }
   };
 
+  /**
+   *  This function overrides the given column filters and reuses the previous filters
+   *
+   *  Table index and selection is also cleared
+   */
+  const overrideTableFilter = (table: Table<Peer>, change: ColumnFiltersState) => {
+    let filters = [] as ColumnFiltersState;
+
+    // List of all used column filters
+    [
+      "connected",
+      "approval_required",
+      "exact_group_name_strings",
+      "group_names",
+    ].forEach((columnId) => {
+      let columnFilter = change.find((entry) => entry.id == columnId);
+      if (columnFilter === undefined) {
+        columnFilter = {
+          id: columnId,
+          value: table.getColumn(columnId)?.getFilterValue()
+        }
+      }
+      filters.push(columnFilter);
+    })
+    table.setPageIndex(0);
+    table.setColumnFilters( filters);
+    resetSelectedRows();
+  };
+
   return (
     <>
       <PeerMultiSelect
@@ -226,6 +314,7 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
         onCanceled={() => setSelectedRows({})}
       />
       <DataTable
+        keepStateInLocalStorage={true}
         headingTarget={headingTarget}
         rowSelection={selectedRows}
         setRowSelection={setSelectedRows}
@@ -233,21 +322,11 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
         text={"Peers"}
         sorting={sorting}
         setSorting={setSorting}
+        setColumnVisibility={setColumnVisibility}
         columns={PeersTableColumns}
         data={peers}
-        searchPlaceholder={"Search by name, IP, owner or group..."}
-        columnVisibility={{
-          select: !isUser,
-          connected: false,
-          approval_required: false,
-          group_name_strings: false,
-          group_names: false,
-          ip: false,
-          user_name: false,
-          user_email: false,
-          actions: !isUser,
-          groups: !isUser,
-        }}
+        searchPlaceholder={"Search by name, IP, Serial, owner or group..."}
+        columnVisibility={resultingColumnVisibility}
         isLoading={isLoading}
         getStartedCard={
           <GetStartedTest
@@ -286,29 +365,12 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
               <ButtonGroup.Button
                 disabled={peers?.length == 0}
                 onClick={() => {
-                  table.setPageIndex(0);
-                  let groupFilters = table
-                    .getColumn("group_names")
-                    ?.getFilterValue();
-                  table.setColumnFilters([
+                  overrideTableFilter( table, [
                     {
                       id: "connected",
                       value: undefined,
                     },
-                    {
-                      id: "approval_required",
-                      value: undefined,
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
                   ]);
-                  resetSelectedRows();
                 }}
                 variant={
                   table.getColumn("connected")?.getFilterValue() == undefined
@@ -320,29 +382,12 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
               </ButtonGroup.Button>
               <ButtonGroup.Button
                 onClick={() => {
-                  table.setPageIndex(0);
-                  let groupFilters = table
-                    .getColumn("group_names")
-                    ?.getFilterValue();
-                  table.setColumnFilters([
+                  overrideTableFilter( table, [
                     {
                       id: "connected",
                       value: true,
                     },
-                    {
-                      id: "approval_required",
-                      value: undefined,
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
                   ]);
-                  resetSelectedRows();
                 }}
                 disabled={peers?.length == 0}
                 variant={
@@ -355,25 +400,12 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
               </ButtonGroup.Button>
               <ButtonGroup.Button
                 onClick={() => {
-                  table.setPageIndex(0);
-                  let groupFilters = table
-                    .getColumn("group_names")
-                    ?.getFilterValue();
-                  table.setColumnFilters([
+                  overrideTableFilter( table, [
                     {
                       id: "connected",
                       value: false,
                     },
-                    {
-                      id: "approval_required",
-                      value: undefined,
-                    },
-                    {
-                      id: "group_names",
-                      value: groupFilters ?? [],
-                    },
                   ]);
-                  resetSelectedRows();
                 }}
                 disabled={peers?.length == 0}
                 variant={
@@ -390,29 +422,21 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
               <Button
                 disabled={peers?.length == 0}
                 onClick={() => {
-                  table.setPageIndex(0);
                   let current =
                     table.getColumn("approval_required")?.getFilterValue() ===
-                    undefined
+                      undefined
                       ? true
                       : undefined;
-
-                  table.setColumnFilters([
-                    {
-                      id: "connected",
-                      value: undefined,
-                    },
+                   overrideTableFilter( table, [
                     {
                       id: "approval_required",
                       value: current,
                     },
                   ]);
-
-                  resetSelectedRows();
                 }}
                 variant={
                   table.getColumn("approval_required")?.getFilterValue() ===
-                  true
+                    true
                     ? "tertiary"
                     : "secondary"
                 }
@@ -422,9 +446,10 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
               </Button>
             )}
 
-            <DataTableRowsPerPage table={table} disabled={peers?.length == 0} />
-
-            {!isUser && (
+            {
+              !isUser
+              && tableGroups.length > 1 // if length == 1, it means only "All" group exists, case not relevant
+              && (
               <GroupSelector
                 disabled={peers?.length == 0}
                 values={
@@ -432,20 +457,32 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
                     .getColumn("group_names")
                     ?.getFilterValue() as string[]) || []
                 }
-                onChange={(groups) => {
-                  table.setPageIndex(0);
-                  if (groups.length == 0) {
-                    table.getColumn("group_names")?.setFilterValue(undefined);
-                    return;
-                  } else {
-                    table.getColumn("group_names")?.setFilterValue(groups);
-                  }
-                  resetSelectedRows();
+                exactValue={
+                  (table
+                    .getColumn("exact_group_name_strings")
+                    ?.getFilterValue() as string) || undefined
+                }
+                onChange={(groups, exactItem) => {
+                  const group_filter = groups.length == 0 ? undefined : groups;
+                  overrideTableFilter( table, [
+                    {
+                      id: "group_names",
+                      value: group_filter
+                    },
+                    {
+                      id: "exact_group_name_strings",
+                      value: exactItem
+                    }
+                  ]);
                 }}
                 groups={tableGroups}
+                unassignedCount={unassignedCount}
+                defaultGroupName={DEFAULT_GROUP_NAME}
               />
             )}
 
+            <DataTableRowsPerPage table={table} disabled={peers?.length == 0} />
+
             <DataTableRefreshButton
               isDisabled={peers?.length == 0}
               onClick={() => {