From d674d4af6cb95fccd412649bb43abbdda9ed861f Mon Sep 17 00:00:00 2001
From: tueytoma <tueytobi@gmail.com>
Date: Thu, 27 Feb 2025 23:09:37 +0700
Subject: [PATCH 1/2] feat: add log page

# Conflicts:
#	bun.lockb
---
 package.json                                  |   5 +-
 src/lib/api/index.js                          |  22 ++
 src/lib/format/index.js                       |  11 +
 src/lib/use-action/clickAway.js               |  15 +
 src/routes/(auth)/(project)/log/+page.js      |  17 +
 src/routes/(auth)/(project)/log/+page.svelte  | 354 ++++++++++++++++++
 .../(project)/log/_components/Fields.svelte   |  32 ++
 .../(project)/log/_components/Input.svelte    |  79 ++++
 .../log/_components/Pagination.svelte         |  40 ++
 .../log/_components/TimeFilter.svelte         | 301 +++++++++++++++
 src/routes/(auth)/+layout.svelte              |   4 +-
 src/routes/+layout.svelte                     |  13 +-
 src/routes/api/log/[fn]/+server.js            |  17 +
 src/style/main.scss                           | 116 ++++++
 src/types/api.d.ts                            |   8 +
 svelte.config.js                              |   3 +-
 16 files changed, 1032 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/use-action/clickAway.js
 create mode 100644 src/routes/(auth)/(project)/log/+page.js
 create mode 100644 src/routes/(auth)/(project)/log/+page.svelte
 create mode 100644 src/routes/(auth)/(project)/log/_components/Fields.svelte
 create mode 100644 src/routes/(auth)/(project)/log/_components/Input.svelte
 create mode 100644 src/routes/(auth)/(project)/log/_components/Pagination.svelte
 create mode 100644 src/routes/(auth)/(project)/log/_components/TimeFilter.svelte
 create mode 100644 src/routes/api/log/[fn]/+server.js

diff --git a/package.json b/package.json
index ee42e4b..5bb2a67 100644
--- a/package.json
+++ b/package.json
@@ -35,5 +35,8 @@
     "typescript": "~5.7.3",
     "valid-url": "^1.0.9"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "prismjs": "^1.29.0"
+  }
 }
diff --git a/src/lib/api/index.js b/src/lib/api/index.js
index af09ed2..de6035f 100644
--- a/src/lib/api/index.js
+++ b/src/lib/api/index.js
@@ -48,6 +48,27 @@ async function invoke (fn, args, fetch) {
 	return body
 }
 
+/**
+ * @template T
+ * @param {string} indexId
+ * @param {string} fn
+ * @param {Object} args
+ * @param {fetch} fetch
+ * @returns {Promise<Api.ResponseLog<T>>}
+ */
+async function invokeLog (indexId, fn, args, fetch) {
+	const url = `${indexId}${fn ? ('/' + fn) : ''}${args ? ('?' + args) : ''}`
+	const resp = await fetch(`${endpoint}/log/${encodeURIComponent(url)}`, {
+		method: 'POST',
+		headers: {
+			'content-type': 'application/json'
+		}
+	})
+
+	const body = await resp.json()
+	return body
+}
+
 /**
  * @param {Function} callback
  */
@@ -90,6 +111,7 @@ function intervalInvalidate (callback, interval) {
 
 export default {
 	invoke,
+	invokeLog,
 	setOnUnauth,
 	invalidate: wrapInvalidate,
 	intervalInvalidate
diff --git a/src/lib/format/index.js b/src/lib/format/index.js
index 60ea0cc..ae151fc 100644
--- a/src/lib/format/index.js
+++ b/src/lib/format/index.js
@@ -56,6 +56,17 @@ export function datetime (v) {
 	return dayjs(v).format('YYYY-MM-DD HH:mm:ss')
 }
 
+/**
+ * @param {string} v
+ * @returns {number}
+ */
+export function unixDatetime (v) {
+	if (!v) {
+		return 0
+	}
+	return dayjs(v).unix()
+}
+
 /**
  * @param {string} project
  * @param {string} name
diff --git a/src/lib/use-action/clickAway.js b/src/lib/use-action/clickAway.js
new file mode 100644
index 0000000..eea6017
--- /dev/null
+++ b/src/lib/use-action/clickAway.js
@@ -0,0 +1,15 @@
+export default function clickAway (node) {
+	const handleClick = (event) => {
+		if (node && !node.contains(event.target) && !event.defaultPrevented) {
+			node.dispatchEvent(new CustomEvent('clickAway'))
+		}
+	}
+
+	document.addEventListener('click', handleClick, true)
+
+	return {
+		destroy () {
+			document.removeEventListener('click', handleClick, true)
+		}
+	}
+}
diff --git a/src/routes/(auth)/(project)/log/+page.js b/src/routes/(auth)/(project)/log/+page.js
new file mode 100644
index 0000000..0fb0d15
--- /dev/null
+++ b/src/routes/(auth)/(project)/log/+page.js
@@ -0,0 +1,17 @@
+export async function load ({ url }) {
+	const duration = url.searchParams.get('duration') || ''
+	const startDate = url.searchParams.get('startDate') || ''
+	const endDate = url.searchParams.get('endDate') || ''
+	const query = url.searchParams.get('query') || ''
+	const indexId = url.searchParams.get('indexId') || ''
+	const endpoint = url.searchParams.get('endpoint') || ''
+
+	return {
+		duration,
+		startDate,
+		endDate,
+		query,
+		indexId,
+		endpoint
+	}
+}
diff --git a/src/routes/(auth)/(project)/log/+page.svelte b/src/routes/(auth)/(project)/log/+page.svelte
new file mode 100644
index 0000000..a0adf9c
--- /dev/null
+++ b/src/routes/(auth)/(project)/log/+page.svelte
@@ -0,0 +1,354 @@
+<svelte:head>
+	<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
+	<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
+</svelte:head>
+
+<script>
+	import Prism from 'prismjs'
+	import 'prismjs/themes/prism.css'
+	import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
+	import 'prismjs/plugins/line-numbers/prism-line-numbers.js'
+
+	import { onMount } from 'svelte'
+	import { slide } from 'svelte/transition'
+	import { sineInOut } from 'svelte/easing'
+	import { page } from '$app/state'
+	import { goto } from '$app/navigation'
+	import * as format from '$lib/format'
+	import api from '$lib/api/index.js'
+	import * as modal from '$lib/modal/index.js'
+
+	import TimeFilter from './_components/TimeFilter.svelte'
+	import Fields from './_components/Fields.svelte'
+	import Input from './_components/Input.svelte'
+	import Pagination from './_components/Pagination.svelte'
+
+	const { data } = $props()
+	let endpoint = $state(data.endpoint)
+	let indexId = $state(data.indexId)
+
+	let timeFilter = $state(null)
+	const show = $state({
+		query: true,
+		fields: true,
+		result: [],
+		customFilter: false,
+		input: true
+	})
+	let filter = $state({
+		query: '*',
+		startDate: '',
+		endDate: '',
+		duration: '',
+		offset: 0,
+		perPage: 20
+	})
+	let perPageValue = $state(20)
+
+	let result = $state({
+		list: [],
+		total: 0,
+		elapsedTime: ''
+	})
+	let fields = $state([])
+
+	let copyActive = $state(false)
+	let initLoading = $state(true)
+	let loading = $state(false)
+
+	const currentPage = $derived((filter.offset / filter.perPage) + 1)
+	const nextPage = $derived(currentPage * filter.perPage < result.total)
+
+	$effect(() => {
+		filter.startDate = data.startDate
+		filter.endDate = data.endDate
+		filter.duration = data.duration
+		filter.query = data.query || '*'
+	})
+
+	$effect(() => {
+		show.input
+		show.result.length
+		show.result.length === 0
+		result.list
+		Prism.highlightAll()
+	})
+
+	onMount(async () => {
+		if (!indexId || !endpoint) {
+			const currentUrl = page.url
+			const urlSearchParams = new URLSearchParams(currentUrl.search)
+
+			urlSearchParams.delete('endpoint')
+			urlSearchParams.delete('indexId')
+			urlSearchParams.delete('duration')
+			urlSearchParams.delete('startDate')
+			urlSearchParams.delete('endDate')
+			const newUrl = `${currentUrl.origin}${currentUrl.pathname}?${urlSearchParams.toString()}`
+			await goto(newUrl, { replaceState: true })
+			initLoading = false
+		} else {
+			show.input = false
+			await getLog()
+			await getIndex()
+			Prism.highlightAll()
+		}
+	})
+
+	async function getIndex () {
+		const resp = await api.invokeLog(`${endpoint}/api/v1`, 'indexes', `index_id_patterns=${indexId}`, fetch)
+		if (resp.message) {
+			modal.error({ error: resp.message })
+			loading = false
+			return
+		}
+		fields = [...resp[0].index_config.doc_mapping.field_mappings]
+		initLoading = false
+	}
+
+	async function getLog () {
+		loading = true
+		const resp = await api.invokeLog(`${endpoint}/api/v1/${indexId}/`, 'search', createQueryString(), fetch)
+		if (resp.message) {
+			modal.error({ error: resp.message })
+			loading = false
+			result = {
+				list: [],
+				total: 0,
+				elapsedTime: '0'
+			}
+			return
+		}
+		result = {
+			list: resp?.hits || [],
+			total: resp?.num_hits || 0,
+			elapsedTime: ((resp?.elapsed_time_micros || 0) / 1_000_000).toFixed(2)
+		}
+		loading = false
+	}
+
+	/** @param { number } pageNumber */
+	async function gotoPage (pageNumber) {
+		filter.offset = (pageNumber - 1) * filter.perPage
+		await getLog()
+	}
+
+	/**
+	 * @param { string } text
+	 * */
+	function copy (text) {
+		navigator.clipboard.writeText(text)
+		copyActive = true
+		setTimeout(() => {
+			copyActive = false
+		}, 500)
+	}
+
+	function createQueryString () {
+		const queryString = {
+			query: filter.query,
+			max_hits: String(filter.perPage),
+			start_timestamp: filter.startDate || '',
+			end_timestamp: filter.endDate || '',
+			format: 'json',
+			sort_by: '+timestamp_nanos',
+			start_offset: String(filter.offset)
+		}
+
+		return new URLSearchParams(queryString).toString()
+	}
+
+	async function runQuery () {
+		if (!timeFilter) {
+			return
+		}
+		filter.perPage = perPageValue
+		timeFilter?.setFilter(filter.duration)
+		filter.offset = 0
+	}
+</script>
+
+<div class="_dp-f _fdrt-cl _g-6 _w-100pct">
+	<h6>Log</h6>
+	{#if initLoading}
+		<button class="_mgt-4 nm-button is-variant-ghost is-loading">Button</button>
+	{:else}
+		<div class="_dp-g container _w-100pct _h-100pct">
+			<div class="_pdr-6:sm _bdrw-1:sm _bdcl-base-400">
+				<div
+					class="_pst-stk:sm _dp-f _fdrt-cl _g-6"
+					style="top: 80px; z-index: 1;"
+				>
+					<Input
+						{ getIndex } { runQuery }
+						bind:show={ show.input }
+						bind:valueIndexId={ indexId }
+						bind:valueEndpoint={ endpoint }
+
+					/>
+					{#if indexId && endpoint}
+						<div class="_dp-f _fdrt-cl _g-6">
+							<div class="_dp-f _fdrt-r _alit-bl _g-6">
+								<i
+									class="fa-solid fa-angle-down _cs-pt _ussl-n transition-3"
+									class:_tsf-rt-90={ !show.fields }
+									onclick={ () => { show.fields = !show.fields } }
+									aria-hidden="true"
+								></i>
+								<Fields
+									bind:show={ show.fields }
+									list={ fields }
+								/>
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
+			<div class="_dp-f _fdrt-cl _g-4 _pst-rlt">
+				<div
+					class="_dp-f _fdrt-cl _g-4 _pst-stk _bgcl-base-200"
+					style="top: 80px; z-index: 1;"
+				>
+					{#if filter.startDate && indexId && endpoint}
+						<div
+							transition:slide={{ duration: 200, easing: sineInOut, axis: 'y' }}
+							class="_w-100pct _h-16 _pst-f _bt-0 _l-0 _zid-2 _bgcl-tpr _dp-f _jtfct-fe"
+						>
+							<span class="_pdr-6 _pdl-6 _bgcl-base-200 _tal-r _cl-primary _fs-1 _fs-2:sm"><i class="_mgr-4 fa-solid fa-timer"></i>{ format.datetime(filter.startDate * 1000) } to { format.datetime(filter.endDate * 1000) }</span>
+						</div>
+					{/if}
+					<div class="_dp-f _fdrt-r _jtfct-spbtw _alit-fst _alit-ct:sm">
+						<div class="_dp-f _fdrt-cl _fdrt-r:sm _alit-fst _alit-ct:sm _g-4">
+							<button
+								class="nm-button"
+								disabled={ !(indexId && endpoint && filter.perPage) }
+								onclick={ runQuery }
+								class:is-loading={ loading }
+							>
+								<i class="_mgr-4 fa-solid fa-play"></i>
+								Run
+							</button>
+							<div class="_dp-f _fdrt-r _alit-ct _g-4">
+								<div class="nm-field">
+									<div class="nm-input _h-9">
+										<input
+											placeholder="limit"
+											type="number"
+											bind:value={ perPageValue }
+											class="_w-12"
+										/>
+									</div>
+								</div>
+								<span class="_tal-r _cl-content _fs-1 _fs-2:sm">per Page</span>
+							</div>
+						</div>
+						{#if indexId && endpoint }
+							<TimeFilter
+								{ getLog } { perPageValue }
+								bind:this={ timeFilter }
+								bind:filter={ filter }
+								bind:show={ show.customFilter }
+							/>
+						{/if}
+					</div>
+					<div class="nm-field">
+						<div class="nm-textarea">
+						<textarea
+							rows="5"
+							bind:value={ filter.query }
+							disabled={ !(indexId && endpoint) }
+						></textarea>
+						</div>
+					</div>
+				</div>
+				{#if indexId && endpoint}
+					<div class="_mgt-6 _dp-f _fdrt-cl _g-4">
+						<div
+							class="_pd-2 _pdr-4 _pdl-4 _ffml-primary _cl-content _fs-2 _dp-f _fdrt-r _alit-bl _w-fct _g-4 _bdrd-3 transition-3"
+							class:_bgcl-base-100={ !copyActive }
+							class:_bgcl-base-300={ copyActive }
+						>
+							<span class="_ffml-primary _fw-600">API URL:</span>
+							<div style="max-width: 40vw;" class="_wsp-nw _ovf-hd _tovf-els">{ endpoint }/api/v1/{ indexId }/search?{createQueryString()}</div>
+							<i
+								class="fa-regular fa-copy _cs-pt _opct-75-hover"
+								onclick={ () => copy(`${endpoint}/api/v1/${indexId}/search?${createQueryString()}`) }
+								aria-hidden="true"
+							></i>
+						</div>
+						<span class="_ffml-primary _cl-content _opct-60 _fs-2">{ result.total.toLocaleString() } hits found in { result.elapsedTime } seconds</span>
+					</div>
+					{#if loading}
+						<button class="_mgt-4 nm-button is-variant-ghost is-loading" aria-label="loading"></button>
+					{:else}
+						{#if result.list.length}
+							<Pagination
+								{ currentPage } { nextPage } { gotoPage }
+							/>
+						{/if}
+						<div class="_dp-f _fdrt-cl _g-4">
+							{#each result.list as item, idx}
+								{@const identity = `${item['logger.name']}-${item.timestamp}`}
+								{@const open = show.result.includes(identity)}
+								<div
+									class="_pdt-4 _dp-f _fdrt-r _alit-bl _g-4 _bdcl-base-400"
+									class:_bdtw-1={ idx !== 0 }
+								>
+									<i
+										class="fa-solid fa-angle-down _cs-pt _ussl-n transition-3"
+										class:_tsf-rt-90={ !open }
+										onclick={ () => { show.result = open ? show.result.filter(r => r !== identity) : [...show.result, identity] } }
+										aria-hidden="true"
+									></i>
+									<div class="_dp-f _fdrt-cl _w-100pct">
+										<div class="_dp-f _fdrt-cl _fdrt-r:sm _alit-bl _g-4 _w-100pct">
+											<span
+												class="_cl-content _cs-pt _ussl-n _wsp-nw _fs-1 _opct-75-hover"
+												style="min-width: 132px; max-width: 132px;"
+												onclick={ () => { show.result = open ? show.result.filter(r => r !== identity) : [...show.result, identity] } }
+												aria-hidden="true"
+											>
+												<i class="_mgr-2 fa-regular fa-clock"></i>
+												{ format.datetime(item.timestamp) }
+											</span>
+											{#if open}
+												<pre
+													class="line-numbers _fs-1 _w-100pct"
+												><code class="language-js">{ JSON.stringify(item, null, 2) }</code></pre>
+											{:else}
+												<pre
+													class="normal _fs-1 _w-100pct"
+												><code class="language-js">{ JSON.stringify(item) }</code></pre>
+											{/if}
+										</div>
+									</div>
+								</div>
+							{:else}
+								<span class="_mgt-6 _mgbt-6px _ffml-primary _cl-content _opct-30 _fs-4 _tal-ct">No Data</span>
+							{/each}
+						</div>
+						{#if result.list.length}
+							<Pagination
+								{ currentPage } { nextPage } { gotoPage }
+							/>
+						{/if}
+					{/if}
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.container {
+		grid-template-columns: 1fr;
+		gap: 1.5rem;
+
+		@media (min-width: 48rem) {
+			grid-template-columns: 2fr 5fr;
+			gap: 1rem;
+		}
+	}
+</style>
diff --git a/src/routes/(auth)/(project)/log/_components/Fields.svelte b/src/routes/(auth)/(project)/log/_components/Fields.svelte
new file mode 100644
index 0000000..6ab0883
--- /dev/null
+++ b/src/routes/(auth)/(project)/log/_components/Fields.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { slide } from 'svelte/transition'
+	import { sineInOut } from 'svelte/easing'
+
+	let { show = $bindable(), list } = $props()
+</script>
+
+<div class="_dp-f _fdrt-cl _g-6">
+	<span
+		class="_cl-dark _cs-pt _ussl-n _fw-600"
+		onclick={ () => { show = !show } }
+		aria-hidden="true"
+	>
+		Fields
+	</span>
+	{#if show}
+		<div
+			transition:slide={{ duration: 400, easing: sineInOut, axis: 'y' }}
+			class="_dp-f _fdrt-cl _g-4"
+		>
+			{#each list as item}
+				<div
+					class="_dp-g"
+					style="grid-template-columns: 100px 1fr;"
+				>
+					<div class="nm-badge _w-fct">{ item.type }</div>
+					<span class="_wb-ba">{ item.name }</span>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/src/routes/(auth)/(project)/log/_components/Input.svelte b/src/routes/(auth)/(project)/log/_components/Input.svelte
new file mode 100644
index 0000000..986cd51
--- /dev/null
+++ b/src/routes/(auth)/(project)/log/_components/Input.svelte
@@ -0,0 +1,79 @@
+<script>
+	import { page } from '$app/state'
+	import { goto } from '$app/navigation'
+
+	let { valueIndexId = $bindable(), valueEndpoint = $bindable(), show = $bindable(), getIndex, runQuery } = $props()
+
+	const form = $state({
+		endpoint: valueEndpoint,
+		indexId: valueIndexId
+	})
+
+	async function submit () {
+		valueEndpoint = form.endpoint
+		valueIndexId = form.indexId
+		const currentUrl = page.url
+		const urlSearchParams = new URLSearchParams(currentUrl.search)
+
+		urlSearchParams.set('endpoint', valueEndpoint)
+		urlSearchParams.set('indexId', valueIndexId)
+		const newUrl = `${currentUrl.origin}${currentUrl.pathname}?${urlSearchParams.toString()}`
+		await goto(newUrl, { replaceState: true })
+		show = false
+		getIndex()
+		runQuery()
+	}
+</script>
+
+<div class="_dp-f _fdrt-cl _g-4">
+	<div class="_pd-6 nm-panel is-level-300 _dp-f _jtfct-spbtw _alit-fst _w-100pct _g-6">
+		{#if !show}
+			<div class="_dp-f _fdrt-cl">
+				<span class="_fw-600 _wb-ba _fs-2 _cl-primary">Endpoint URL:</span>
+				<span class="_wb-ba _fs-2">{ valueEndpoint }</span>
+				<span class="_mgt-4 _fw-600 _wb-ba _fs-2 _cl-primary">Index ID:</span>
+				<span class="_wb-ba _fs-2">{ valueIndexId }</span>
+			</div>
+			<button
+				class="nm-button is-icon-button is-size-small is-variant-tertiary _ovf-hd _mnw-9 _mxw-9"
+				onclick={ () => { show = true } }
+				aria-label="clear"
+			>
+				<i class="fa-solid fa-xmark _fs-3"></i>
+			</button>
+		{:else}
+			<div class="nm-field _w-100pct">
+				<div class="nm-input _h-40">
+					<input
+						id="input-url"
+						type="text"
+						bind:value={ form.endpoint }
+						required
+						class="_bgcl-white"
+						placeholder="Endpoint URL"
+					/>
+				</div>
+				<div class="nm-input _h-40">
+					<input
+						id="input-url"
+						type="text"
+						bind:value={ form.indexId }
+						required
+						class="_bgcl-white"
+						placeholder="Index ID"
+					/>
+				</div>
+				<button
+					disabled={ !form.indexId || !form.endpoint }
+					type="button"
+					class="nm-button is-size-small _mgl-at"
+					class:is-loading={ false }
+					onclick={ submit }
+					aria-hidden="true"
+				>
+					Submit
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/routes/(auth)/(project)/log/_components/Pagination.svelte b/src/routes/(auth)/(project)/log/_components/Pagination.svelte
new file mode 100644
index 0000000..ee9788b
--- /dev/null
+++ b/src/routes/(auth)/(project)/log/_components/Pagination.svelte
@@ -0,0 +1,40 @@
+<script>
+	const { currentPage, nextPage, gotoPage } = $props()
+</script>
+
+<div class="_mgt-6 _mgbt-6 _dp-f _fdrt-cl _jtfct-spbtw _alit-ct">
+	<div></div>
+	<div class="_mgt-16px _dp-f _jtfct-ct _g-16px ">
+		<div class="_dp-f _fdrt-r _g-4">
+			<button
+				class="_w-24px _h-24px _dp-f _jtfct-ct _alit-ct"
+				class:_opct-20={ currentPage <= 1 }
+				class:_cs-nal={ currentPage <= 1 }
+				class:_cs-pt={ currentPage > 1 }
+				class:is-variant-ghost={ currentPage <= 1 }
+				disabled={ currentPage <= 1 }
+				onclick={ () => gotoPage(currentPage - 1) }
+				aria-label="previus page"
+			>
+				<i class="far fa-arrow-left"></i>
+			</button>
+			<button
+				class="_w-7 _h-7 _bdrd-50pct _dp-f _jtfct-ct _alit-ct _ffml-bold _tal-ct _bgcl-primary _cl-white"
+				disabled
+			>
+				{ currentPage }
+			</button>
+			<button
+				class="_w-24px _h-24px _dp-f _jtfct-ct _alit-ct"
+				class:_opct-20={ !nextPage }
+				class:_cs-nal={ !nextPage }
+				class:_cs-pt={ nextPage }
+				onclick={ () => gotoPage(currentPage + 1) }
+				disabled={ !nextPage }
+				aria-label="next page"
+			>
+				<i class="far fa-arrow-right"></i>
+			</button>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/(auth)/(project)/log/_components/TimeFilter.svelte b/src/routes/(auth)/(project)/log/_components/TimeFilter.svelte
new file mode 100644
index 0000000..d8a609a
--- /dev/null
+++ b/src/routes/(auth)/(project)/log/_components/TimeFilter.svelte
@@ -0,0 +1,301 @@
+<script>
+	import { page } from '$app/state'
+	import dayjs from 'dayjs'
+	import * as format from '$lib/format'
+	import clickAway from '$lib/use-action/clickAway'
+	import { goto } from '$app/navigation'
+
+	let { filter = $bindable(), show = $bindable(), perPageValue, getLog } = $props()
+	let showCustom = $state(false)
+	const form = $state({
+		startDate: null,
+		endDate: null
+	})
+	const durationList = {
+		PT15MIN: {
+			number: 15,
+			type: 'minute',
+			label: 'Last 15 min'
+		},
+		PT30MIN: {
+			number: 30,
+			type: 'minute',
+			label: 'Last 30 min'
+		},
+		PT1D: {
+			number: 1,
+			type: 'day',
+			label: 'Last 1 days'
+		},
+		PT7D: {
+			number: 7,
+			type: 'day',
+			label: 'Last 7 days'
+		},
+		PT30D: {
+			number: 30,
+			type: 'day',
+			label: 'Last 30 days'
+		},
+		PT3MO: {
+			number: 3,
+			type: 'month',
+			label: 'Last 3 months'
+		},
+		PT1Y: {
+			number: 1,
+			type: 'year',
+			label: 'Last year'
+		}
+	}
+
+	/**
+	 * @param { string } d
+	 * */
+	export function setFilter (d) {
+		filter.duration = d
+		filter.offset = 0
+		filter.perPage = perPageValue
+
+		if (filter.duration) {
+			filter.startDate = format.unixDatetime(
+				dayjs().subtract(durationList[filter.duration].number, durationList[filter.duration].type).format('YYYY-MM-DD HH:mm:ss')
+			)
+			filter.endDate = format.unixDatetime(
+				dayjs().format('YYYY-MM-DD HH:mm:ss')
+			)
+			form.startDate = dayjs().subtract(durationList[filter.duration].number, durationList[filter.duration].type).format('YYYY-MM-DDTHH:mm:ss')
+			form.endDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
+		}
+
+		updateTimeFilterParam()
+		getLog()
+		show = false
+		showCustom = false
+	}
+
+	function customFilter () {
+		if (!(form.startDate && form.endDate)) {
+			return
+		}
+
+		filter.perPage = perPageValue
+		filter.offset = 0
+		filter.startDate = format.unixDatetime(
+			dayjs(form.startDate).format('YYYY-MM-DD HH:mm:ss')
+		)
+		filter.endDate = format.unixDatetime(
+			dayjs(form.endDate).format('YYYY-MM-DD HH:mm:ss')
+		)
+		filter.duration = ''
+		updateTimeFilterParam()
+		getLog()
+	}
+
+	async function reset () {
+		filter.duration = ''
+		filter.startDate = null
+		filter.endDate = null
+		filter.offset = 0
+		filter.perPage = perPageValue
+		show = false
+
+		const currentUrl = page.url
+		const urlSearchParams = new URLSearchParams(currentUrl.search)
+		urlSearchParams.delete('duration')
+		urlSearchParams.delete('startDate')
+		urlSearchParams.delete('endDate')
+		urlSearchParams.set('query', filter.query)
+		const newUrl = `${currentUrl.origin}${currentUrl.pathname}?${urlSearchParams.toString()}`
+		await goto(newUrl, { replaceState: true })
+		getLog()
+	}
+
+	async function updateTimeFilterParam () {
+		const currentUrl = page.url
+		const urlSearchParams = new URLSearchParams(currentUrl.search)
+
+		urlSearchParams.set('duration', filter.duration)
+		urlSearchParams.set('startDate', filter.startDate)
+		urlSearchParams.set('endDate', filter.endDate)
+		urlSearchParams.set('query', filter.query)
+		const newUrl = `${currentUrl.origin}${currentUrl.pathname}?${urlSearchParams.toString()}`
+		await goto(newUrl, { replaceState: true })
+	}
+</script>
+
+<label class="nm-button is-variant-tertiary" for="time-filter">
+	<i class="_mgr-4 fa-regular fa-clock"></i>
+	{#if filter.duration.length}
+		{ durationList[filter.duration].label || '-' }
+	{:else if filter.startDate && filter.endDate}
+		{ format.datetime(filter.startDate * 1000) } to <br class="_dp-f _dp-n:sm">{ format.datetime(filter.endDate * 1000) }
+	{:else}
+		No date range
+	{/if}
+</label>
+<input
+	class="nm-modal-state"
+	id="time-filter"
+	type="checkbox"
+/>
+<div
+	class="nm-modal _pd-6"
+	onclick={ () => { show = false } }
+	aria-hidden="true"
+>
+	<div
+		class="nm-modal-panel _ovf-at"
+		use:clickAway
+		onclickAway={ () => { show = false } }
+	>
+		<label class="nm-modal-close" for="time-filter">✕</label>
+		<h3 class="_mgbt-8">Select a period</h3>
+		<div
+			class="time-filter-container _dp-g"
+			class:show={ showCustom }
+		>
+			<div
+				class="_fdrt-cl _g-4 _dp-f:sm"
+				class:_dp-f={ !show }
+				class:_dp-n={ show }
+			>
+				<label
+					for="time-filter"
+					class="nm-button is-variant-tertiary"
+					onclick={ () => { setFilter('PT15MIN') }}
+					aria-hidden="true"
+				>
+					Last 15 min
+				</label>
+				<label
+					for="time-filter"
+					class="nm-button is-variant-tertiary"
+					onclick={ () => { setFilter('PT30MIN') }}
+					aria-hidden="true"
+				>
+					Last 30 min
+				</label>
+				<label
+					for="time-filter"
+					class="nm-button is-variant-tertiary"
+					onclick={ () => { setFilter('PT1D') }}
+					aria-hidden="true"
+				>
+					Last 1 days
+				</label>
+				<label
+					for="time-filter"
+					class="nm-button is-variant-tertiary"
+					onclick={ () => { setFilter('PT7D') }}
+					aria-hidden="true"
+				>
+					Last 7 days
+				</label>
+				<label
+					for="time-filter"
+					class="nm-button is-variant-tertiary"
+					onclick={ () => { setFilter('PT30D') }}
+					aria-hidden="true"
+				>
+					Last 30 days
+				</label>
+				<label
+					for="time-filter"
+					class="nm-button is-variant-tertiary"
+					onclick={ () => { setFilter('PT3MO') }}
+					aria-hidden="true"
+				>
+					Last 3 months
+				</label>
+				<label
+					for="time-filter"
+					class="nm-button is-variant-tertiary"
+					onclick={ () => { setFilter('PT1Y') }}
+					aria-hidden="true"
+				>
+					Last year
+				</label>
+				<label
+					for="time-filter"
+					class="nm-button is-variant-tertiary"
+					onclick={ reset }
+					aria-hidden="true"
+				>
+					Reset
+				</label>
+				<button
+					type="button"
+					class="nm-button"
+					class:is-variant-tertiary={ !showCustom }
+					class:is-variant-accent={ showCustom }
+					onclick={ () => { showCustom = true } }
+				>
+					<i class="_mgr-4 fa-regular fa-calendar"></i> Custom
+				</button>
+			</div>
+			{#if showCustom}
+				<div class="_dp-f _fdrt-cl _g-6 _jtfct-spbtw">
+					<div class="_dp-f _fdrt-cl _g-4">
+						<div class="nm-field">
+							<label for="input-start-date">Start Date</label>
+							<div class="nm-input">
+								<input
+									id="input-start-date"
+									type="datetime-local"
+									bind:value={ form.startDate }
+								/>
+							</div>
+						</div>
+						<div class="nm-field">
+							<label for="input-end-date">End Date</label>
+							<div class="nm-input">
+								<input
+									id="input-end-date"
+									type="datetime-local"
+									bind:value={ form.endDate }
+								/>
+							</div>
+						</div>
+					</div>
+					<div class="_dp-f _fdrt-cl _g-4">
+						<label
+							for="time-filter"
+							class="nm-button is-variant-tertiary"
+							onclick={ reset }
+							aria-hidden="true"
+						>
+							Reset
+						</label>
+						<label
+							class="nm-button"
+							class:_opct-50={ !(form.startDate && form.endDate) }
+							class:_cs-nal={ !(form.startDate && form.endDate) }
+							for="time-filter"
+							onclick={ customFilter }
+							aria-hidden="true"
+						>
+							Apply
+						</label>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	.time-filter-container {
+		grid-template-columns: 1fr;
+		gap: 3rem;
+
+		@media (min-width: 48rem) {
+			grid-template-columns: 1fr;
+			gap: 1rem;
+
+			&.show {
+				grid-template-columns: 1fr 2fr;
+			}
+		}
+	}
+</style>
diff --git a/src/routes/(auth)/+layout.svelte b/src/routes/(auth)/+layout.svelte
index c1fdc8a..8cf990c 100644
--- a/src/routes/(auth)/+layout.svelte
+++ b/src/routes/(auth)/+layout.svelte
@@ -88,7 +88,9 @@
 		padding-left: calc(var(--width-sidebar) + var(--content-sidegap));
 		padding-right: 2rem;
 		padding-bottom: 2rem;
-
+		min-height: 100dvh;
+		display: flex;
+		flex-direction: column;
 	}
 
 	@media screen and (max-width: 1023px) {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 60b4f05..fc9ceed 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,8 @@
 <script>
+	import { onMount, tick } from 'svelte'
 	import { browser } from '$app/environment'
 	import { beforeNavigate } from '$app/navigation'
-	import { updated } from '$app/stores'
+	import { updated } from '$app/state'
 	/**
 	 * @typedef {Object} Props
 	 * @property {import('svelte').Snippet} [children]
@@ -10,9 +11,17 @@
 	/** @type {Props} */
 	const { children } = $props()
 
+	onMount(async () => {
+		document.documentElement.style.setProperty(
+			'--dvh',
+			`${window.innerHeight}px`
+		)
+		await tick()
+	})
+
 	if (browser) {
 		beforeNavigate(({ willUnload, to }) => {
-			if ($updated && !willUnload && to?.url) {
+			if (updated.current && !willUnload && to?.url) {
 				location.href = to.url.href
 			}
 		})
diff --git a/src/routes/api/log/[fn]/+server.js b/src/routes/api/log/[fn]/+server.js
new file mode 100644
index 0000000..f35e4a4
--- /dev/null
+++ b/src/routes/api/log/[fn]/+server.js
@@ -0,0 +1,17 @@
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export async function POST ({ params }) {
+	const resp = await fetch(params.fn, {
+		method: 'GET',
+		duplex: 'half',
+		headers: {
+			'content-type': 'application/json'
+		}
+	})
+
+	return new Response(resp.body, {
+		status: resp.status,
+		headers: {
+			'content-type': resp.headers.get('content-type') ?? ''
+		}
+	})
+}
diff --git a/src/style/main.scss b/src/style/main.scss
index 83cc032..b9a4e4a 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -42,6 +42,10 @@ select:-webkit-autofill:focus {
 	transition: background-color 5000s ease-in-out 0s;
 }
 
+textarea {
+	resize: none;
+}
+
 .nm-panel {
 	padding: 1.75rem 1.5rem;
 
@@ -269,3 +273,115 @@ pre {
 		overflow-y: auto;
 	}
 }
+
+.transition-3 {
+	transition-duration: .3s;
+}
+
+._tsf-rt-90 {
+	transform: rotate(-90deg);
+}
+
+._w-fct {
+	width: fit-content !important;
+}
+
+.line-numbers {
+	&.language-js {
+		background-color: hsl(var(--hsl-base-100) / 1);
+		border-radius: 0.25em;
+		
+		.token {
+			&.string-property {
+				&.property {
+					color: hsl(var(--hsl-primary));
+				}
+			}
+			
+			&.operator {
+				color: hsl(var(--hsl-content));
+				background: transparent !important;
+			}
+			
+			&.number {
+				color: hsl(var(--hsl-accent));
+			}
+			
+			&.string {
+				color: hsl(var(--hsl-positive));
+			}
+		}
+	}
+	
+	code[class*=language-] {
+		max-width: 40vw;
+		margin: 0;
+		text-shadow: none !important;
+	}
+}
+
+.normal {
+	&.language-js {
+		background-color: hsl(var(--hsl-base-100) / 1);
+		border-radius: 0.25em;
+		
+		.token {
+			&.string-property {
+				&.property {
+					color: hsl(var(--hsl-primary));
+					background-color: hsl(var(--hsl-base-300) / 1);
+					padding: 2px;
+					border-radius: 4px;
+				}
+			}
+			
+			&.operator {
+				color: hsl(var(--hsl-content));
+				background: transparent !important;
+			}
+			
+			&.number {
+				color: hsl(var(--hsl-accent));
+			}
+			
+			&.string {
+				color: hsl(var(--hsl-positive));
+			}
+		}
+	}
+	
+	code[class*=language-] {
+		max-width: 70vw;
+		text-overflow: ellipsis !important;
+		overflow: hidden;
+		text-shadow: none !important;
+		
+		@media (min-width: 48rem) {
+			max-width: 40vw;
+		}
+	}
+}
+
+pre[class*=language-] {
+	padding: 0.8em !important;
+
+	&.line-numbers {
+		margin: 0;
+		padding-left: 3.5em !important;
+		text-shadow: none !important;
+	}
+
+	&.normal {
+		margin: 0;
+		overflow: hidden !important;
+	}
+}
+
+._opct-75-hover {
+	opacity: 1;
+	transition-duration: .3s;
+	
+	&:hover {
+		opacity: 0.75;
+	}
+}
diff --git a/src/types/api.d.ts b/src/types/api.d.ts
index 33c1676..e468468 100644
--- a/src/types/api.d.ts
+++ b/src/types/api.d.ts
@@ -16,6 +16,14 @@ declare namespace Api {
         | { ok: true; result: T; error?: never }
         | { ok: false; error: Error; result?: never }
 
+    export type ResponseLog<T> = {
+        message?: string
+        hits?: never
+        num_hits?: number
+        elapsed_time_micros?: number
+    }
+
+
     export type Profile = {
         email: string
     }
diff --git a/svelte.config.js b/svelte.config.js
index 37a469e..86b9161 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -11,7 +11,8 @@ const config = {
 		adapter: process.env.ADAPTER === 'node' ? adapterNode() : adapterCloudflare(),
 		alias: {
 			$style: './src/style',
-			$types: './src/types'
+			$types: './src/types',
+			'monaco-editor': 'monaco-editor/esm/vs/editor/editor.main.js'
 		},
 		version: {
 			pollInterval: 60 * 1000 // 1 min

From 9de31a05344df54270e05cd1c81f2fce8821114b Mon Sep 17 00:00:00 2001
From: tueytoma <tueytobi@gmail.com>
Date: Sun, 23 Mar 2025 23:31:24 +0700
Subject: [PATCH 2/2] fix(log): lint / check

---
 src/routes/(auth)/(project)/log/+page.svelte           | 10 ++++++----
 .../(auth)/(project)/log/_components/TimeFilter.svelte |  6 +++---
 src/routes/api/log/[fn]/+server.js                     |  5 ++++-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/routes/(auth)/(project)/log/+page.svelte b/src/routes/(auth)/(project)/log/+page.svelte
index a0adf9c..86ad53d 100644
--- a/src/routes/(auth)/(project)/log/+page.svelte
+++ b/src/routes/(auth)/(project)/log/+page.svelte
@@ -29,11 +29,13 @@
 	let endpoint = $state(data.endpoint)
 	let indexId = $state(data.indexId)
 
-	let timeFilter = $state(null)
+	/** @type {import('svelte').SvelteComponent | undefined} */
+	let timeFilter = $state(undefined)
+
 	const show = $state({
 		query: true,
 		fields: true,
-		result: [],
+		result: /** @type {string[]} */ ([]),
 		customFilter: false,
 		input: true
 	})
@@ -48,7 +50,7 @@
 	let perPageValue = $state(20)
 
 	let result = $state({
-		list: [],
+		list: /** @type {{ timestamp: string }[]} */ ([]),
 		total: 0,
 		elapsedTime: ''
 	})
@@ -216,7 +218,7 @@
 							transition:slide={{ duration: 200, easing: sineInOut, axis: 'y' }}
 							class="_w-100pct _h-16 _pst-f _bt-0 _l-0 _zid-2 _bgcl-tpr _dp-f _jtfct-fe"
 						>
-							<span class="_pdr-6 _pdl-6 _bgcl-base-200 _tal-r _cl-primary _fs-1 _fs-2:sm"><i class="_mgr-4 fa-solid fa-timer"></i>{ format.datetime(filter.startDate * 1000) } to { format.datetime(filter.endDate * 1000) }</span>
+							<span class="_pdr-6 _pdl-6 _bgcl-base-200 _tal-r _cl-primary _fs-1 _fs-2:sm"><i class="_mgr-4 fa-solid fa-timer"></i>{ format.datetime(String(Number(filter.startDate) * 1000)) } to { format.datetime(String(Number(filter.endDate) * 1000)) }</span>
 						</div>
 					{/if}
 					<div class="_dp-f _fdrt-r _jtfct-spbtw _alit-fst _alit-ct:sm">
diff --git a/src/routes/(auth)/(project)/log/_components/TimeFilter.svelte b/src/routes/(auth)/(project)/log/_components/TimeFilter.svelte
index d8a609a..3d2acfa 100644
--- a/src/routes/(auth)/(project)/log/_components/TimeFilter.svelte
+++ b/src/routes/(auth)/(project)/log/_components/TimeFilter.svelte
@@ -8,8 +8,8 @@
 	let { filter = $bindable(), show = $bindable(), perPageValue, getLog } = $props()
 	let showCustom = $state(false)
 	const form = $state({
-		startDate: null,
-		endDate: null
+		startDate: '',
+		endDate: ''
 	})
 	const durationList = {
 		PT15MIN: {
@@ -129,7 +129,7 @@
 	{#if filter.duration.length}
 		{ durationList[filter.duration].label || '-' }
 	{:else if filter.startDate && filter.endDate}
-		{ format.datetime(filter.startDate * 1000) } to <br class="_dp-f _dp-n:sm">{ format.datetime(filter.endDate * 1000) }
+		{ format.datetime(String(Number(filter.startDate) * 1000)) } to <br class="_dp-f _dp-n:sm">{ format.datetime(String(Number(filter.endDate) * 1000)) }
 	{:else}
 		No date range
 	{/if}
diff --git a/src/routes/api/log/[fn]/+server.js b/src/routes/api/log/[fn]/+server.js
index f35e4a4..0bc6290 100644
--- a/src/routes/api/log/[fn]/+server.js
+++ b/src/routes/api/log/[fn]/+server.js
@@ -1,8 +1,11 @@
 /** @type {import('@sveltejs/kit').RequestHandler} */
 export async function POST ({ params }) {
+	if (!params.fn) {
+		throw new Error('Missing URL parameter: fn')
+	}
+
 	const resp = await fetch(params.fn, {
 		method: 'GET',
-		duplex: 'half',
 		headers: {
 			'content-type': 'application/json'
 		}