feat(logs): render logs in table

docs/config.yaml

@@ -7,7 +7,6 @@ mode: rule
 log-level: info
 ipv6: true
 external-controller: 0.0.0.0:9090
-external-ui: ui
 global-client-fingerprint: random
 
 profile:

src/pages/Logs.tsx

@@ -1,11 +1,21 @@
 import { createEventSignal } from '@solid-primitives/event-listener'
 import { createReconnectingWS } from '@solid-primitives/websocket'
+import {
+  ColumnDef,
+  createSolidTable,
+  flexRender,
+  getCoreRowModel,
+} from '@tanstack/solid-table'
 import { For, createEffect, createSignal } from 'solid-js'
 import { secret, wsEndpointURL } from '~/signals'
+import { Log } from '~/types'
+
+type LogWithSeq = Log & { seq: number }
 
 export default () => {
+  let seq = 0
   const [search, setSearch] = createSignal('')
-  const [logs, setLogs] = createSignal<string[]>([])
+  const [logs, setLogs] = createSignal<LogWithSeq[]>([])
 
   const ws = createReconnectingWS(`${wsEndpointURL()}/logs?token=${secret()}`)
 
@@ -21,11 +31,37 @@ export default () => {
     }
 
     setLogs((logs) =>
-      [
-        ...logs,
-        (JSON.parse(data) as { type: string; payload: string }).payload,
-      ].slice(-100),
+      [{ ...(JSON.parse(data) as Log), seq }, ...logs].slice(0, 100),
     )
+
+    seq++
+  })
+
+  const columns: ColumnDef<LogWithSeq>[] = [
+    {
+      accessorKey: 'Sequence',
+      accessorFn: (row) => row.seq,
+    },
+    {
+      accessorKey: 'Type',
+      accessorFn: (row) => row.type,
+    },
+    {
+      accessorKey: 'Payload',
+      accessorFn: (row) => row.payload,
+    },
+  ]
+
+  const table = createSolidTable({
+    get data() {
+      return search()
+        ? logs().filter((log) =>
+            log.payload.toLowerCase().includes(search().toLowerCase()),
+          )
+        : logs()
+    },
+    columns,
+    getCoreRowModel: getCoreRowModel(),
   })
 
   return (
@@ -37,21 +73,49 @@ export default () => {
       />
 
       <div class="overflow-x-auto whitespace-nowrap">
-        <For
-          each={
-            search()
-              ? logs().filter((log) =>
-                  log.toLowerCase().includes(search().toLowerCase()),
-                )
-              : logs()
-          }
-        >
-          {(log) => (
-            <div class="flex gap-4">
-              <div class="flex-shrink-0">{log}</div>
-            </div>
-          )}
-        </For>
+        <table class="table table-zebra-zebra table-xs bg-base-200">
+          <thead>
+            <For each={table.getHeaderGroups()}>
+              {(headerGroup) => (
+                <tr>
+                  <For each={headerGroup.headers}>
+                    {(header) => (
+                      <th class="bg-base-300">
+                        <div>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                        </div>
+                      </th>
+                    )}
+                  </For>
+                </tr>
+              )}
+            </For>
+          </thead>
+
+          <tbody>
+            <For each={table.getRowModel().rows}>
+              {(row) => (
+                <tr>
+                  <For each={row.getVisibleCells()}>
+                    {(cell) => (
+                      <td>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </td>
+                    )}
+                  </For>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
       </div>
     </div>
   )

src/pages/Overview.tsx

@@ -195,7 +195,7 @@ export default () => {
         </TrafficWidget>
       </div>
 
-      <div class="mx-auto grid w-full max-w-screen-lg grid-cols-1 gap-4">
+      <div class="mx-auto grid h-full w-full max-w-screen-xl grid-cols-1 gap-4">
         <SolidApexCharts
           type="area"
           options={trafficChartOptions()}

src/types.d.ts

@@ -100,6 +100,11 @@ export type Connection = {
   }
 }
 
+export type Log = {
+  type: string
+  payload: string
+}
+
 export type Config = {
   port: number
   'socks-port': number