mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-14 18:35:34 +08:00
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
|
import { createEventSignal } from '@solid-primitives/event-listener'
|
||
|
import { createReconnectingWS } from '@solid-primitives/websocket'
|
||
|
import { For, createEffect, createSignal } from 'solid-js'
|
||
|
import { wsEndpointURL } from '~/signals'
|
||
|
|
||
|
export const Logs = () => {
|
||
|
const [search, setSearch] = createSignal('')
|
||
|
const [logs, setLogs] = createSignal<string[]>([])
|
||
|
|
||
|
const ws = createReconnectingWS(`${wsEndpointURL()}/logs`)
|
||
|
|
||
|
const messageEvent = createEventSignal<{
|
||
|
message: WebSocketEventMap['message']
|
||
|
}>(ws, 'message')
|
||
|
|
||
|
createEffect(() => {
|
||
|
const data = messageEvent()?.data
|
||
|
|
||
|
if (!data) {
|
||
|
return
|
||
|
}
|
||
|
|
||
|
setLogs((logs) =>
|
||
|
[
|
||
|
...logs,
|
||
|
(JSON.parse(data) as { type: string; payload: string }).payload,
|
||
|
].slice(-100),
|
||
|
)
|
||
|
})
|
||
|
|
||
|
return (
|
||
|
<div class="flex flex-col gap-4">
|
||
|
<input
|
||
|
class="input input-primary"
|
||
|
placeholder="Search"
|
||
|
onInput={(e) => setSearch(e.target.value)}
|
||
|
/>
|
||
|
|
||
|
<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>
|
||
|
</div>
|
||
|
</div>
|
||
|
)
|
||
|
}
|