feat(connections): connections table now supports grouping

src/pages/Connections.tsx

@@ -8,14 +8,19 @@ import {
   IconSettings,
   IconSortAscending,
   IconSortDescending,
+  IconZoomInFilled,
+  IconZoomOutFilled,
 } from '@tabler/icons-solidjs'
 import {
   ColumnDef,
+  GroupingState,
   SortingState,
   createSolidTable,
   flexRender,
   getCoreRowModel,
+  getExpandedRowModel,
   getFilteredRowModel,
+  getGroupedRowModel,
   getSortedRowModel,
 } from '@tanstack/solid-table'
 import byteSize from 'byte-size'
@@ -44,22 +49,8 @@ type ColumnOrder = CONNECTIONS_TABLE_ACCESSOR_KEY[]
 
 export default () => {
   const [t] = useI18n()
-  const [columnVisibility, setColumnVisibility] = makePersisted(
-    createSignal<ColumnVisibility>(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY),
-    {
-      name: 'columnVisibility',
-      storage: localStorage,
-    },
-  )
-  const [columnOrder, setColumnOrder] = makePersisted(
-    createSignal<ColumnOrder>(CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER),
-    {
-      name: 'columnOrder',
-      storage: localStorage,
-    },
-  )
-
   const request = useRequest()
+
   const [search, setSearch] = createSignal('')
 
   const ws = createReconnectingWS(
@@ -111,11 +102,27 @@ export default () => {
 
   const onCloseConnection = (id: string) => request.delete(`connections/${id}`)
 
+  const [columnVisibility, setColumnVisibility] = makePersisted(
+    createSignal<ColumnVisibility>(CONNECTIONS_TABLE_INITIAL_COLUMN_VISIBILITY),
+    {
+      name: 'columnVisibility',
+      storage: localStorage,
+    },
+  )
+  const [columnOrder, setColumnOrder] = makePersisted(
+    createSignal<ColumnOrder>(CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER),
+    {
+      name: 'columnOrder',
+      storage: localStorage,
+    },
+  )
+
   const columns: ColumnDef<ConnectionWithSpeed>[] = [
     {
-      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Close,
+      header: () => t('close'),
+      enableGrouping: false,
       enableSorting: false,
-      header: () => <span>{t('close')}</span>,
+      accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Close,
       cell: ({ row }) => (
         <div class="flex h-4 items-center">
           <Button
@@ -128,14 +135,18 @@ export default () => {
       ),
     },
     {
+      header: () => t('ID'),
+      enableGrouping: false,
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.ID,
       accessorFn: (row) => row.id,
     },
     {
+      header: () => t('type'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Type,
       accessorFn: (row) => `${row.metadata.type}(${row.metadata.network})`,
     },
     {
+      header: () => t('process'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Process,
       accessorFn: (row) =>
         row.metadata.process ||
@@ -143,6 +154,7 @@ export default () => {
         '-',
     },
     {
+      header: () => t('host'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Host,
       accessorFn: (row) =>
         `${
@@ -150,15 +162,18 @@ export default () => {
         }:${row.metadata.destinationPort}`,
     },
     {
+      header: () => t('rules'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Rule,
       accessorFn: (row) =>
         !row.rulePayload ? row.rule : `${row.rule} :: ${row.rulePayload}`,
     },
     {
+      header: () => t('chains'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Chains,
       accessorFn: (row) => row.chains.slice().reverse().join(' :: '),
     },
     {
+      header: () => t('connectTime'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.ConnectTime,
       accessorFn: (row) => formatTimeFromNow(row.start),
       sortingFn: (prev, next) =>
@@ -166,29 +181,34 @@ export default () => {
         dayjs(next.original.start).valueOf(),
     },
     {
+      header: () => t('dlSpeed'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.DlSpeed,
       accessorFn: (row) => `${byteSize(row.downloadSpeed)}/s`,
       sortingFn: (prev, next) =>
         prev.original.downloadSpeed - next.original.downloadSpeed,
     },
     {
+      header: () => t('ulSpeed'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.ULSpeed,
       accessorFn: (row) => `${byteSize(row.uploadSpeed)}/s`,
       sortingFn: (prev, next) =>
         prev.original.uploadSpeed - next.original.uploadSpeed,
     },
     {
+      header: () => t('dl'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Download,
       accessorFn: (row) => byteSize(row.download),
       sortingFn: (prev, next) =>
         prev.original.download - next.original.download,
     },
     {
+      header: () => t('ul'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Upload,
       accessorFn: (row) => byteSize(row.upload),
       sortingFn: (prev, next) => prev.original.upload - next.original.upload,
     },
     {
+      header: () => t('source'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Source,
       accessorFn: (row) =>
         isIPv6(row.metadata.sourceIP)
@@ -196,6 +216,7 @@ export default () => {
           : `${row.metadata.sourceIP}:${row.metadata.sourcePort}`,
     },
     {
+      header: () => t('destination'),
       accessorKey: CONNECTIONS_TABLE_ACCESSOR_KEY.Destination,
       accessorFn: (row) =>
         row.metadata.remoteDestination ||
@@ -204,8 +225,9 @@ export default () => {
     },
   ]
 
+  const [grouping, setGrouping] = createSignal<GroupingState>([])
   const [sorting, setSorting] = createSignal<SortingState>([
-    { id: 'ID', desc: true },
+    { id: CONNECTIONS_TABLE_ACCESSOR_KEY.ConnectTime, desc: true },
   ])
 
   const table = createSolidTable({
@@ -213,6 +235,9 @@ export default () => {
       get columnOrder() {
         return columnOrder()
       },
+      get grouping() {
+        return grouping()
+      },
       get sorting() {
         return sorting()
       },
@@ -226,12 +251,16 @@ export default () => {
     get data() {
       return connectionsWithSpeed()
     },
+    sortDescFirst: true,
     enableHiding: true,
     columns,
     onGlobalFilterChange: setSearch,
-    getFilteredRowModel: getFilteredRowModel(),
+    onGroupingChange: setGrouping,
     onSortingChange: setSorting,
+    getFilteredRowModel: getFilteredRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getGroupedRowModel: getGroupedRowModel(),
     getCoreRowModel: getCoreRowModel(),
   })
 
@@ -259,6 +288,12 @@ export default () => {
 
   return (
     <div class="flex h-full flex-col gap-4 overflow-y-auto p-1">
+      <div class="tabs-boxed tabs">
+        <a class="tab tab-active">
+          {t('activeConnections')} ({connectionsWithSpeed().length})
+        </a>
+      </div>
+
       <div class="flex w-full items-center gap-2">
         <input
           class="input input-primary flex-1"
@@ -303,23 +338,34 @@ export default () => {
                   <For each={headerGroup.headers}>
                     {(header) => (
                       <th class="bg-base-200">
+                        <div class={twMerge('flex items-center gap-2')}>
+                          {header.column.getCanGroup() ? (
+                            <button
+                              class="cursor-pointer"
+                              onClick={header.column.getToggleGroupingHandler()}
+                            >
+                              {header.column.getIsGrouped() ? (
+                                <IconZoomOutFilled size={18} />
+                              ) : (
+                                <IconZoomInFilled size={18} />
+                              )}
+                            </button>
+                          ) : null}
+
                           <div
                             class={twMerge(
-                            'flex items-center justify-between gap-2',
                               header.column.getCanSort() &&
                                 'cursor-pointer select-none',
+                              'flex-1',
                             )}
                             onClick={header.column.getToggleSortingHandler()}
                           >
-                          {header.column.id ===
+                            {flexRender(
-                          CONNECTIONS_TABLE_ACCESSOR_KEY.Close ? (
-                            flexRender(
                               header.column.columnDef.header,
                               header.getContext(),
-                            )
-                          ) : (
-                            <span>{t(header.column.id)}</span>
                             )}
+                          </div>
+
                           {{
                             asc: <IconSortAscending />,
                             desc: <IconSortDescending />,
@@ -346,10 +392,44 @@ export default () => {
                             void writeClipboard(cell.renderValue() as string)
                         }}
                       >
+                        {cell.getIsGrouped() ? (
+                          <button
+                            class={twMerge(
+                              row.getCanExpand()
+                                ? 'cursor-pointer'
+                                : 'cursor-normal',
+                              'flex items-center gap-2',
+                            )}
+                            onClick={row.getToggleExpandedHandler()}
+                          >
+                            <div>
+                              {row.getIsExpanded() ? (
+                                <IconZoomOutFilled size={18} />
+                              ) : (
+                                <IconZoomInFilled size={18} />
+                              )}
+                            </div>
+                            <div>
                               {flexRender(
                                 cell.column.columnDef.cell,
                                 cell.getContext(),
                               )}
+                            </div>
+
+                            <div>({row.subRows.length})</div>
+                          </button>
+                        ) : cell.getIsAggregated() ? (
+                          flexRender(
+                            cell.column.columnDef.aggregatedCell ??
+                              cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )
+                        ) : cell.getIsPlaceholder() ? null : (
+                          flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext(),
+                          )
+                        )}
                       </td>
                     )}
                   </For>