noctbot/web/src/routes/logs.svelte

<script lang="typescript">
    import type { PollOptions, PollResult, LogEvent } from "src/routes/logs/poll";

    let logEvents: LogEvent[] = [];

    async function pollEvents() {
        const params: PollOptions = {
            limit: "50",
        };
        const query = Object.entries(params).reduce(
            (prev, [key, val]) =>
                `${prev}&${encodeURIComponent(key)}=${encodeURIComponent(val)}`,
            ""
        );
        const response = await fetch(`/logs/poll?${query}`, {
            method: "get",
            credentials: "include",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
            },
        });

        const result = (await response.json()) as PollResult;
        console.log(result);
        if (result.ok) {
            logEvents = result.events;
        }
    }
</script>

<style>
</style>

<div class="viewport text-white">
    <h1 class="text-3xl pb-4">Event logs</h1>
    <form class="py-2" on:submit|preventDefault={pollEvents}>
        <input
            class="bg-blue-600 py-2 px-3 text-white cursor-pointer rounded-sm"
            type="submit"
            value="Query" />
    </form>
    <table class="py-3">
        <thead>
            <tr>
                <th>Source</th>
                <th>Timestamp</th>
                <th>Level</th>
                <th>Message</th>
            </tr>
        </thead>
        <tbody>
            {#each logEvents as logEvent (logEvent._id)}
                <tr>
                    <td>{logEvent.label}</td>
                    <td>{logEvent.timestamp}</td>
                    <td>{logEvent.level}</td>
                    <td>{logEvent.message}</td>
                </tr>
            {/each}
        </tbody>
    </table>
</div>