windmill-components 1.430.5 → 1.433.0

package/package/components/ServiceLogsInner.svelte

@@ -1,5 +1,4 @@
 <script>import { IndexSearchService, ServiceLogsService } from '../gen';
-import { Pane, Splitpanes } from 'svelte-splitpanes';
 import ManuelDatePicker from './runs/ManuelDatePicker.svelte';
 import CalendarPicker from './common/calendarPicker/CalendarPicker.svelte';
 import LogViewer from './LogViewer.svelte';
@@ -13,7 +12,7 @@ import { Button, Drawer, DrawerContent } from './common';
 import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy';
 import AnsiUp from 'ansi_up';
 import { scroll_into_view_if_needed_polyfill } from './multiselect/utils';
-import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte';
+import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte';
 export let searchTerm;
 export let queryParseErrors = [];
 let minTs = undefined;
@@ -238,11 +237,13 @@ const debouncePeriod = 400;
 let loadingLogs = false;
 let loadingLogCounts = false;
 let countsPerHost;
+let sumOtherDocCount = 0;
 async function searchLogs(searchTerm, selected, minTs, maxTs, allLogs) {
     if (searchTerm.trim() === '') {
         debounceTimeout && clearTimeout(debounceTimeout);
         logs = undefined;
         countsPerHost = undefined;
+        sumOtherDocCount = 0;
         loadingLogs = false;
         loadingLogCounts = false;
         return;
@@ -258,7 +259,9 @@ async function searchLogs(searchTerm, selected, minTs, maxTs, allLogs) {
                 minTs,
                 maxTs
             });
-            const buckets = countLogsResponse.count_per_host['count_per_host']['buckets'];
+            const res = countLogsResponse.count_per_host['count_per_host'];
+            const buckets = res['buckets'];
+            sumOtherDocCount = res['sum_other_doc_count'];
             countsPerHost = new Map(buckets.map(({ key, doc_count }) => [key, doc_count]));
             countsPerHost = buckets.reduce((acc, { key, doc_count }) => {
                 acc[key] = { doc_count };
@@ -297,6 +300,26 @@ async function seeLogContext(lineNumber, path, hostname, jsonFmt) {
         scroll_into_view_if_needed_polyfill(el, false);
 }
 $: searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs);
+function allLogsOrQueryResults(allLogs, countsPerHost) {
+    if (countsPerHost == undefined) {
+        return allLogs;
+    }
+    let ret = {};
+    for (const hk of Object.keys(countsPerHost)) {
+        let u = hk.split(",");
+        let [mode, wg, hn] = [u[0], u[1], u[2]];
+        if (!ret[mode]) {
+            ret[mode] = {};
+        }
+        if (!ret[mode][wg]) {
+            ret[mode][wg] = {};
+        }
+        if (!ret[mode][wg][hn]) {
+            ret[mode][wg][hn] = [];
+        }
+    }
+    return ret;
+}
 </script>
 
 <Drawer bind:this={logDrawer} bind:open={logDrawerOpen} size="1400px">
@@ -325,366 +348,371 @@ $: searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs);
 	</DrawerContent>
 </Drawer>
 
-<SplitPanesWrapper class="hidden md:block">
-	<Splitpanes>
-		<Pane size={30} minSize={25}>
-			<div class="p-1">
-				<div
-					class="flex flex-col lg:flex-row gap-y-1 justify-between w-full relative pb-4 gap-x-0.5"
-					id="service-logs-date-pickers"
-				>
-					<div class="flex relative">
-						<input
-							type="text"
-							value={minTsManual
-								? new Date(minTsManual).toLocaleTimeString([], {
-										day: '2-digit',
-										month: '2-digit',
-										hour: '2-digit',
-										minute: '2-digit'
-								  })
-								: 'min datetime'}
-							disabled
-						/>
-						<CalendarPicker
-							label="min datetime"
-							date={minTsManual}
-							on:change={({ detail }) => {
-								minTs = undefined
-								maxTs = undefined
-								allLogs = undefined
-								minTsManual = detail
-								getAllLogs(minTsManual, maxTsManual)
-							}}
-						/>
-					</div>
-					<ManuelDatePicker
-						bind:minTs={minTsManual}
-						bind:maxTs={maxTsManual}
-						bind:this={manualPicker}
-						{loading}
-						on:loadJobs={() => {
+<SplitPanesOrColumnOnMobile>
+	<svelte:fragment slot="left-pane">
+		<div class="p-1">
+			<div
+				class="flex flex-col lg:flex-row gap-y-1 justify-between w-full relative pb-4 gap-x-0.5"
+				id="service-logs-date-pickers"
+			>
+				<div class="flex relative">
+					<input
+						type="text"
+						value={minTsManual
+							? new Date(minTsManual).toLocaleTimeString([], {
+									day: '2-digit',
+									month: '2-digit',
+									hour: '2-digit',
+									minute: '2-digit'
+							  })
+							: 'min datetime'}
+						disabled
+					/>
+					<CalendarPicker
+						label="min datetime"
+						date={minTsManual}
+						on:change={({ detail }) => {
 							minTs = undefined
 							maxTs = undefined
 							allLogs = undefined
+							minTsManual = detail
 							getAllLogs(minTsManual, maxTsManual)
 						}}
-						serviceLogsChoices
-						loadText={searchTerm === '' ? 'Last 1000 logfiles' : 'All time'}
+						placement="top-start"
 					/>
-					<div class="flex relative">
-						<input
-							type="text"
-							value={maxTsManual
-								? new Date(maxTsManual).toLocaleTimeString([], {
-										day: '2-digit',
-										month: '2-digit',
-										hour: '2-digit',
-										minute: '2-digit'
-								  })
-								: 'max datetime'}
-							disabled
-						/>
-						<CalendarPicker
-							label="max datetime"
-							date={maxTsManual}
-							on:change={({ detail }) => {
-								minTs = undefined
-								maxTs = undefined
-								allLogs = undefined
-								maxTsManual = detail
-								getAllLogs(minTsManual, maxTsManual)
-							}}
-						/>
-					</div>
 				</div>
-				<div class="flex w-full flex-row-reverse pb-4 -mt-2 gap-2"
-					><Toggle
-						size="xs"
-						bind:checked={withError}
-						options={{ right: 'errors > 0' }}
-						on:change={() => {
+				<ManuelDatePicker
+					bind:minTs={minTsManual}
+					bind:maxTs={maxTsManual}
+					bind:this={manualPicker}
+					{loading}
+					on:loadJobs={() => {
+						minTs = undefined
+						maxTs = undefined
+						allLogs = undefined
+						getAllLogs(minTsManual, maxTsManual)
+					}}
+					serviceLogsChoices
+					loadText={searchTerm === '' ? 'Last 1000 logfiles' : 'All time'}
+				/>
+				<div class="flex relative">
+					<input
+						type="text"
+						value={maxTsManual
+							? new Date(maxTsManual).toLocaleTimeString([], {
+									day: '2-digit',
+									month: '2-digit',
+									hour: '2-digit',
+									minute: '2-digit'
+							  })
+							: 'max datetime'}
+						disabled
+					/>
+					<CalendarPicker
+						label="max datetime"
+						date={maxTsManual}
+						on:change={({ detail }) => {
+							minTs = undefined
+							maxTs = undefined
 							allLogs = undefined
-							getAllLogs(minTs, maxTs)
+							maxTsManual = detail
+							getAllLogs(minTsManual, maxTsManual)
 						}}
 					/>
-					<Toggle
-						size="xs"
-						bind:checked={autoRefresh}
-						disabled={searchTerm != ''}
-						on:change={(e) => {
-							if (e.detail) {
-								getAllLogs(maxTs, undefined)
-							} else {
-								timeout && clearTimeout(timeout)
-							}
-						}}
-						options={{ right: 'auto-refresh' }}
-					/></div
-				>
-				{#if allLogs == undefined}
-					<div class="text-center pb-2"><Loader2 class="animate-spin" /></div>
-				{:else if Object.keys(allLogs).length == 0}
-					<div class="flex justify-center items-center h-full">No logs</div>
-				{:else if minTs && maxTs}
-					{@const minTsN = new Date(minTs).getTime()}
-					{@const maxTsN = new Date(maxTs).getTime()}
-					{@const diff = maxTsN - minTsN}
-					{#if searchTerm === ''}
-						<div class="flex w-full text-2xs text-tertiary pb-6">
-							<div style="width: 60px;" />
+				</div>
+			</div>
+			<div class="flex w-full flex-row-reverse pb-4 -mt-2 gap-2"
+				><Toggle
+					size="xs"
+					bind:checked={withError}
+					options={{ right: 'errors > 0' }}
+					on:change={() => {
+						allLogs = undefined
+						getAllLogs(minTs, maxTs)
+					}}
+				/>
+				<Toggle
+					size="xs"
+					bind:checked={autoRefresh}
+					disabled={searchTerm != ''}
+					on:change={(e) => {
+						if (e.detail) {
+							getAllLogs(maxTs, undefined)
+						} else {
+							timeout && clearTimeout(timeout)
+						}
+					}}
+					options={{ right: 'auto-refresh' }}
+				/></div
+			>
+			{#if allLogs == undefined}
+				<div class="text-center pb-2"><Loader2 class="animate-spin" /></div>
+			{:else if Object.keys(allLogs).length == 0}
+				<div class="flex justify-center items-center h-full">No logs</div>
+			{:else if minTs && maxTs}
+				{@const minTsN = new Date(minTs).getTime()}
+				{@const maxTsN = new Date(maxTs).getTime()}
+				{@const diff = maxTsN - minTsN}
+				{#if searchTerm === ''}
+					<div class="flex w-full text-2xs text-tertiary pb-6">
+						<div style="width: 60px;" />
 
-							<div class="flex justify-between w-full"
-								><div
-									>{new Date(minTs).toLocaleTimeString([], {
-										day: '2-digit',
-										month: '2-digit',
-										hour: '2-digit',
-										minute: '2-digit'
-									})}</div
-								><div
-									>{new Date(maxTs).toLocaleTimeString([], {
-										day: '2-digit',
-										month: '2-digit',
-										hour: '2-digit',
-										minute: '2-digit'
-									})}</div
-								></div
-							>
-						</div>
-					{/if}
-					{#each Object.entries(allLogs) as [mode, o1]}
-						<div class="w-full pb-8">
-							<h2 class="pb-2 text-2xl">{mode}s</h2>
-							{#each Object.entries(o1) as [wg, o2]}
-								<div class="w-full px-1">
-									{#if wg && wg != ''}
-										<h4 class="pt-4">{wg}</h4>
-									{/if}
-									<div class="divide-y flex flex-col">
-										{#each Object.entries(o2).filter(([hn, files]) => {
-											if (selected && selected[0] === mode && selected[1] === wg && selected[2] === hn) {
-												return true
-											}
-											const hostKey = `${mode},${wg},${hn}`
-											if (countsPerHost && (countsPerHost[hostKey] == undefined || countsPerHost[hostKey].doc_count === 0)) {
-												return false
-											}
+						<div class="flex justify-between w-full"
+							><div
+								>{new Date(minTs).toLocaleTimeString([], {
+									day: '2-digit',
+									month: '2-digit',
+									hour: '2-digit',
+									minute: '2-digit'
+								})}</div
+							><div
+								>{new Date(maxTs).toLocaleTimeString([], {
+									day: '2-digit',
+									month: '2-digit',
+									hour: '2-digit',
+									minute: '2-digit'
+								})}</div
+							></div
+						>
+					</div>
+				{/if}
+				{#each Object.entries(allLogsOrQueryResults(allLogs, countsPerHost)) as [mode, o1]}
+					<div class="w-full pb-8">
+						<h2 class="pb-2 text-2xl">{mode}s</h2>
+						{#each Object.entries(o1) as [wg, o2]}
+							<div class="w-full px-1">
+								{#if wg && wg != ''}
+									<h4 class="pt-4">{wg}</h4>
+								{/if}
+								<div class="divide-y flex flex-col">
+									{#each Object.entries(o2).filter(([hn, files]) => {
+										if (selected && selected[0] === mode && selected[1] === wg && selected[2] === hn) {
 											return true
-										}) as [hn, files]}
-											{@const hostKey = `${mode},${wg},${hn}`}
-											<!-- svelte-ignore a11y-click-events-have-key-events -->
-											<!-- svelte-ignore a11y-no-static-element-interactions -->
+										}
+										const hostKey = `${mode},${wg},${hn}`
+										if (countsPerHost && (countsPerHost[hostKey] == undefined || countsPerHost[hostKey].doc_count === 0)) {
+											return false
+										}
+										return true
+									}) as [hn, files]}
+										{@const hostKey = `${mode},${wg},${hn}`}
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<!-- svelte-ignore a11y-no-static-element-interactions -->
+										<div
+											class="w-full flex items-baseline justify-between rounded px-1 hover:bg-surface-hover cursor-pointer {selected &&
+											selected[0] == mode &&
+											selected[1] == wg &&
+											selected[2] == hn
+												? 'bg-surface-secondary'
+												: ''}"
+											on:click={() => {
+												selected = [mode, wg, hn]
+												upToIsLatest = true
+												upTo = getLatestUpTo(selected)
+												scrollToBottom()
+											}}
+										>
 											<div
-												class="w-full flex items-baseline justify-between rounded px-1 hover:bg-surface-hover cursor-pointer {selected &&
-												selected[0] == mode &&
-												selected[1] == wg &&
-												selected[2] == hn
-													? 'bg-surface-secondary'
-													: ''}"
-												on:click={() => {
-													selected = [mode, wg, hn]
-													upToIsLatest = true
-													upTo = getLatestUpTo(selected)
-													scrollToBottom()
-												}}
+												class="text-sm pt-2 pl-0.5 whitespace-nowrap"
+												title={hn}
+												style="width: 90px;">{truncateRev(hn, 8)}</div
 											>
-												<div
-													class="text-sm pt-2 pl-0.5 whitespace-nowrap"
-													title={hn}
-													style="width: 90px;">{truncateRev(hn, 8)}</div
-												>
-												{#if loadingLogCounts}
-													<Loader2 size={15} class="animate-spin" />
-												{:else if countsPerHost}
-													<div class="text-tertiary text-xs">
-														{countsPerHost[hostKey]?.doc_count ?? 0} matches
-													</div>
-												{:else}
-													<div class="relative grow h-8 mr-2">
-														{#each files as file}
-															{@const okHeight = 100.0 * ((file.ok_lines * 1.0) / (max_lines ?? 1))}
-															{@const errHeight =
-																100.0 * ((file.err_lines * 1.0) / (max_lines ?? 1))}
-															<div
-																class=" w-2 bg-red-400 absolute"
-																style="left: {((file.ts - minTsN) / diff) *
-																	100}%; height: {errHeight}%; bottom: {okHeight}%;"
-															/>
-															<div
-																class="w-2 bg-surface-secondary-inverse absolute bottom-0"
-																style="left: {((file.ts - minTsN) / diff) *
-																	100}%; height: {okHeight}%"
-															/>
-														{/each}
-													</div>
-												{/if}
-											</div>
-										{/each}
-									</div>
-								</div>
-							{/each}
-						</div>
-					{/each}
-				{/if}
-			</div>
-		</Pane>
-		<Pane size={70} minSize={25}
-			><div class="relative h-full flex flex-col gap-1"
-				><div class="w-full bg-surface-primary-inverse text-tertiary text-xs text-center"
-					>1 min delay: logs are compacted before being available</div
-				>
-				{#if selected}
-					<div class="grow overflow-auto" id="logviewer">
-						{#if loadingLogs}
-							<div class="flex w-full justify-center items-center h-48">
-								<div class="text-tertiary text-center">
-									<Loader2 size={34} class="animate-spin" />
+											{#if loadingLogCounts}
+												<Loader2 size={15} class="animate-spin" />
+											{:else if countsPerHost}
+												<div class="text-tertiary text-xs">
+													{countsPerHost[hostKey]?.doc_count ?? 0} matches
+												</div>
+											{:else}
+												<div class="relative grow h-8 mr-2">
+													{#each files as file}
+														{@const okHeight = 100.0 * ((file.ok_lines * 1.0) / (max_lines ?? 1))}
+														{@const errHeight = 100.0 * ((file.err_lines * 1.0) / (max_lines ?? 1))}
+														<div
+															class=" w-2 bg-red-400 absolute"
+															style="left: {((file.ts - minTsN) / diff) *
+																100}%; height: {errHeight}%; bottom: {okHeight}%;"
+														/>
+														<div
+															class="w-2 bg-surface-secondary-inverse absolute bottom-0"
+															style="left: {((file.ts - minTsN) / diff) *
+																100}%; height: {okHeight}%"
+														/>
+													{/each}
+												</div>
+											{/if}
+										</div>
+									{/each}
 								</div>
 							</div>
-						{:else if logs != undefined}
-							<div class="flex flex-col min-w-full w-fit">
-								{#each logs.hits as { snippet_fragment, snippet_highlighted, document }}
-									<LogSnippetViewer
-										content={snippet_fragment || document.logs[0]}
-										highlighted={snippet_highlighted}
-										on:click={() => {
-											let logLineNumber = document.line_number[0]
-											let logFile = document.file_name[0]
-											let host = document.host[0]
-											let jsonFmt = document.json_fmt[0]
-											seeLogContext(logLineNumber, logFile, host, jsonFmt)
-										}}
-									/>
-								{/each}
-								{#if logs.hits.length === 0}
-									<div class="text-center py-20 text-bold text-xl text-tertiary"> No logs </div>
-								{/if}
-								{#if logs.hits.length === 30}
-									<div class="pl-6 py-6 text-sm text-secondary">
-										Older matches were truncated from this search, try refining your filters to get
-										more precise results.
-									</div>
-								{/if}
-								<div class="py-20" />
+						{/each}
+					</div>
+				{/each}
+				{#if !loadingLogCounts && sumOtherDocCount != 0}
+					<div class="text-tertiary italic text-sm">
+						Note: {sumOtherDocCount} additional matches weren't grouped into any of the above hosts.
+					</div>
+				{/if}
+			{/if}
+		</div>
+	</svelte:fragment>
+	<svelte:fragment slot="right-pane">
+		<div class="relative h-full flex flex-col gap-1 pb-2">
+			{#if selected}
+				{#if !loadingLogs && logs == undefined}
+					<div class="w-full bg-surface-primary-inverse text-tertiary text-xs text-center">
+						1 min delay: logs are compacted before being available
+					</div>
+				{/if}
+				<div class="grow overflow-auto" id="logviewer">
+					{#if loadingLogs}
+						<div class="flex w-full justify-center items-center h-48">
+							<div class="text-tertiary text-center">
+								<Loader2 size={34} class="animate-spin" />
 							</div>
-						{:else}
-							{#each getLogs(selected, upTo) as file}
-								<div
-									style="min-height: {logsContent[file.file_path]
-										? 10
-										: (file.ok_lines + file.err_lines) / 20}px;"
+						</div>
+					{:else if logs != undefined}
+						<div class="flex flex-col min-w-full w-fit">
+							{#each logs.hits as { snippet_fragment, snippet_highlighted, document }}
+								<LogSnippetViewer
+									content={snippet_fragment || document.logs[0]}
+									highlighted={snippet_highlighted}
+									on:click={() => {
+										let logLineNumber = document.line_number[0]
+										let logFile = document.file_name[0]
+										let host = document.host[0]
+										let jsonFmt = document.json_fmt[0]
+										seeLogContext(logLineNumber, logFile, host, jsonFmt)
+									}}
+								/>
+							{/each}
+							{#if logs.hits.length === 0}
+								<div class="text-center py-20 text-bold text-xl text-tertiary"> No logs </div>
+							{/if}
+							{#if logs.hits.length === 1000}
+								<div class="pl-6 py-6 text-sm text-secondary">
+									Older matches were truncated from this search, try refining your filters to get
+									more precise results.
+								</div>
+							{/if}
+							<div class="py-20" />
+						</div>
+					{:else}
+						{#each getLogs(selected, upTo) as file}
+							<div
+								style="min-height: {logsContent[file.file_path]
+									? 10
+									: Math.min(file.ok_lines + file.err_lines, 30) * 16}px;"
+							>
+								<div class="bg-surface-primary-inverse text-sm font-semibold px-1"
+									>{new Date(file.ts).toLocaleTimeString([], {
+										day: '2-digit',
+										month: '2-digit',
+										hour: '2-digit',
+										minute: '2-digit'
+									})}</div
 								>
-									<div class="bg-surface-primary-inverse text-sm font-semibold px-1"
-										>{new Date(file.ts).toLocaleTimeString([], {
-											day: '2-digit',
-											month: '2-digit',
-											hour: '2-digit',
-											minute: '2-digit'
-										})}</div
-									>
-									{#if logsContent[file.file_path] == undefined}
-										<div
-											class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms] h-full w-full"
-										/>
-									{:else if logsContent[file.file_path]}
-										{#if logsContent[file.file_path].error}
-											{#if logsContent[file.file_path].error?.startsWith('Not Found')}
-												<div class="text-xs pb-4 pt-2 text-secondary"
-													>Log file is missing. Log files require a shared log volume to be mounted
-													across servers and workers or to use the EE S3/object storage integration
-													for logs. To avoid mounting a shared volume, set the EE object store logs
-													in the instance settings</div
-												>
-											{:else}
-												<div class="text-xs text-red-400 pb-4"
-													>{logsContent[file.file_path].error}</div
-												>
-											{/if}
-										{:else if logsContent[file.file_path].content}
-											<!-- svelte-ignore a11y-click-events-have-key-events -->
-											<!-- svelte-ignore a11y-no-static-element-interactions -->
-											<div on:click|preventDefault class="pr-2"
-												><LogViewer
-													noAutoScroll
-													noMaxH
-													isLoading={false}
-													tag={undefined}
-													content={processLogWithJsonFmt(
-														logsContent[file.file_path].content,
-														file.json_fmt
-													)}
-												/></div
+								{#if logsContent[file.file_path] == undefined}
+									<div
+										class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms] h-full w-full"
+									/>
+								{:else if logsContent[file.file_path]}
+									{#if logsContent[file.file_path].error}
+										{#if logsContent[file.file_path].error?.startsWith('Not Found')}
+											<div class="text-xs pb-4 pt-2 text-secondary"
+												>Log file is missing. Log files require a shared log volume to be mounted
+												across servers and workers or to use the EE S3/object storage integration
+												for logs. To avoid mounting a shared volume, set the EE object store logs in
+												the instance settings</div
 											>
 										{:else}
-											<div>No logs</div>
+											<div class="text-xs text-red-400 pb-4"
+												>{logsContent[file.file_path].error}</div
+											>
 										{/if}
+									{:else if logsContent[file.file_path].content}
+										<!-- svelte-ignore a11y-click-events-have-key-events -->
+										<!-- svelte-ignore a11y-no-static-element-interactions -->
+										<div on:click|preventDefault class="pr-2"
+											><LogViewer
+												noAutoScroll
+												noMaxH
+												isLoading={false}
+												tag={undefined}
+												content={processLogWithJsonFmt(
+													logsContent[file.file_path].content,
+													file.json_fmt
+												)}
+											/></div
+										>
+									{:else}
+										<div>No logs</div>
 									{/if}
-								</div>
-							{/each}
-						{/if}
-					</div>
-					{#if searchTerm == ''}
-						<div class="flex w-full items-center gap-4">
-							<div class="text-tertiary px-1 text-2xs">Last 5 log files up to:</div>
-							<div class="flex grow text-xs justify-center px-2 items-center gap-2">
-								{#if upTo}
-									<button
-										on:click={() => {
-											if (upTo) {
-												upToIsLatest = false
-												upTo = new Date(new Date(upTo).getTime() - 5 * 60 * 1000).toISOString()
-											}
-										}}>{'<'} 5m</button
-									>
-								{:else}
-									<div />
-								{/if}
-
-								<div class="flex gap-1 relative items-center"
-									><div class="flex gap-1 relative">
-										<input
-											type="text"
-											value={upTo
-												? new Date(upTo).toLocaleTimeString([], {
-														day: '2-digit',
-														month: '2-digit',
-														hour: '2-digit',
-														minute: '2-digit'
-												  })
-												: ''}
-											disabled
-										/><CalendarPicker bind:date={upTo} label="Logs up to" /></div
-									></div
-								>
-								{#if upTo}
-									<button
-										on:click={() => {
-											if (upTo) {
-												upToIsLatest = false
-												upTo = new Date(new Date(upTo).getTime() + 5 * 60 * 1000).toISOString()
-											}
-										}}>5m {'>'}</button
-									>
-								{:else}
-									<div />
 								{/if}
 							</div>
-							<div>
+						{/each}
+					{/if}
+				</div>
+				{#if searchTerm == ''}
+					<div class="flex w-full items-center gap-4">
+						<div class="text-tertiary px-1 text-2xs">Last 5 log files up to:</div>
+						<div class="flex grow text-xs justify-center px-2 items-center gap-2">
+							{#if upTo}
 								<button
-									class="text-xs"
 									on:click={() => {
-										upTo = new Date().toISOString()
-										upToIsLatest = true
-									}}>now</button
+										if (upTo) {
+											upToIsLatest = false
+											upTo = new Date(new Date(upTo).getTime() - 5 * 60 * 1000).toISOString()
+										}
+									}}>{'<'} 5m</button
 								>
-							</div>
+							{:else}
+								<div />
+							{/if}
+
+							<div class="flex gap-1 relative items-center"
+								><div class="flex gap-1 relative">
+									<input
+										type="text"
+										value={upTo
+											? new Date(upTo).toLocaleTimeString([], {
+													day: '2-digit',
+													month: '2-digit',
+													hour: '2-digit',
+													minute: '2-digit'
+											  })
+											: ''}
+										disabled
+									/><CalendarPicker bind:date={upTo} label="Logs up to" /></div
+								></div
+							>
+							{#if upTo}
+								<button
+									on:click={() => {
+										if (upTo) {
+											upToIsLatest = false
+											upTo = new Date(new Date(upTo).getTime() + 5 * 60 * 1000).toISOString()
+										}
+									}}>5m {'>'}</button
+								>
+							{:else}
+								<div />
+							{/if}
 						</div>
-					{/if}
-				{:else}
-					<div class="flex justify-center items-center pt-8">Select a host to see its logs</div>
-				{/if}</div
-			></Pane
+						<div>
+							<button
+								class="text-xs"
+								on:click={() => {
+									upTo = new Date().toISOString()
+									upToIsLatest = true
+								}}>now</button
+							>
+						</div>
+					</div>
+				{/if}
+			{:else}
+				<div class="flex justify-center items-center pt-8">Select a host to see its logs</div>
+			{/if}</div
 		>
-	</Splitpanes>
-</SplitPanesWrapper>
+	</svelte:fragment>
+</SplitPanesOrColumnOnMobile>