From 7eee024cdc2c831a75710d62e842ae648818dec8 Mon Sep 17 00:00:00 2001 From: kunish Date: Fri, 1 Sep 2023 22:07:02 +0800 Subject: [PATCH] feat(logs): render logs in table --- docs/config.yaml | 1 - src/pages/Logs.tsx | 104 +++++++++++++++++++++++++++++++++-------- src/pages/Overview.tsx | 2 +- src/types.d.ts | 5 ++ 4 files changed, 90 insertions(+), 22 deletions(-) diff --git a/docs/config.yaml b/docs/config.yaml index 956c931..69d65ce 100644 --- a/docs/config.yaml +++ b/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: diff --git a/src/pages/Logs.tsx b/src/pages/Logs.tsx index 1afd832..8fe6ccb 100644 --- a/src/pages/Logs.tsx +++ b/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([]) + const [logs, setLogs] = createSignal([]) 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[] = [ + { + 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 () => { />
- - log.toLowerCase().includes(search().toLowerCase()), - ) - : logs() - } - > - {(log) => ( -
-
{log}
-
- )} -
+ + + + {(headerGroup) => ( + + + {(header) => ( + + )} + + + )} + + + + + + {(row) => ( + + + {(cell) => ( + + )} + + + )} + + +
+
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} +
+
+ {flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} +
) diff --git a/src/pages/Overview.tsx b/src/pages/Overview.tsx index ace9dc2..f32cbbd 100644 --- a/src/pages/Overview.tsx +++ b/src/pages/Overview.tsx @@ -195,7 +195,7 @@ export default () => { -
+