windmill-components 1.408.1 → 1.430.2

package/package/components/ServiceLogsInner.svelte

@@ -1,13 +1,21 @@
-<script>import { ServiceLogsService } from '../gen';
+<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';
 import Toggle from './Toggle.svelte';
 import { sendUserToast } from '../toast';
-import { onDestroy } from 'svelte';
+import { onDestroy, tick } from 'svelte';
 import { Loader2 } from 'lucide-svelte';
-import { truncateRev } from '../utils';
+import { copyToClipboard, truncateRev } from '../utils';
+import LogSnippetViewer from './LogSnippetViewer.svelte';
+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';
+export let searchTerm;
+export let queryParseErrors = [];
 let minTs = undefined;
 let maxTs = undefined;
 let minTsManual = undefined;
@@ -97,8 +105,10 @@ function getAllLogs(queryMinTs, queryMaxTs) {
         if (upToIsLatest && selected) {
             upTo = getLatestUpTo(selected);
         }
-        if (autoRefresh && !maxTsManual) {
+        if (autoRefresh && searchTerm === '' && !maxTsManual) {
             timeout = setTimeout(() => {
+                if (searchTerm !== '')
+                    return;
                 let minMax = manualPicker?.computeMinMax();
                 if (minMax) {
                     maxTsManual = minMax?.maxTs;
@@ -222,11 +232,102 @@ function processLogWithJsonFmt(log, jsonFmt) {
         return log;
     }
 }
+let logs;
+let debounceTimeout = undefined;
+const debouncePeriod = 400;
+let loadingLogs = false;
+let loadingLogCounts = false;
+let countsPerHost;
+async function searchLogs(searchTerm, selected, minTs, maxTs, allLogs) {
+    if (searchTerm.trim() === '') {
+        debounceTimeout && clearTimeout(debounceTimeout);
+        logs = undefined;
+        countsPerHost = undefined;
+        loadingLogs = false;
+        loadingLogCounts = false;
+        return;
+    }
+    timeout && clearTimeout(timeout);
+    loadingLogCounts = true;
+    loadingLogs = true;
+    debounceTimeout && clearTimeout(debounceTimeout);
+    debounceTimeout = setTimeout(async () => {
+        if (allLogs) {
+            const countLogsResponse = await IndexSearchService.countSearchLogsIndex({
+                searchQuery: searchTerm,
+                minTs,
+                maxTs
+            });
+            const buckets = countLogsResponse.count_per_host['count_per_host']['buckets'];
+            countsPerHost = new Map(buckets.map(({ key, doc_count }) => [key, doc_count]));
+            countsPerHost = buckets.reduce((acc, { key, doc_count }) => {
+                acc[key] = { doc_count };
+                return acc;
+            }, {});
+            queryParseErrors = countLogsResponse.query_parse_errors ?? [];
+            loadingLogCounts = false;
+        }
+        if (selected) {
+            logs = await IndexSearchService.searchLogsIndex({
+                searchQuery: searchTerm,
+                mode: selected[0],
+                workerGroup: selected[1] != '' ? selected[1] : undefined,
+                hostname: selected[2],
+                minTs,
+                maxTs
+            });
+        }
+        loadingLogs = false;
+    }, debouncePeriod);
+}
+const ansi_up = new AnsiUp();
+ansi_up.use_classes = true;
+let logDrawer;
+let logDrawerOpen;
+let content = '';
+let hitLineNumber = undefined;
+async function seeLogContext(lineNumber, path, hostname, jsonFmt) {
+    const res = await ServiceLogsService.getLogFile({ path: `${hostname}/${path}` });
+    content = processLogWithJsonFmt(ansi_up.ansi_to_html(res), jsonFmt);
+    hitLineNumber = lineNumber;
+    logDrawerOpen = true;
+    await tick();
+    let el = document.getElementById(`log-line-${lineNumber}`);
+    if (el)
+        scroll_into_view_if_needed_polyfill(el, false);
+}
+$: searchLogs(searchTerm, selected, minTsManual, maxTsManual, allLogs);
 </script>
 
-<div class="w-full h-[70vh]" on:scroll|preventDefault>
+<Drawer bind:this={logDrawer} bind:open={logDrawerOpen} size="1400px">
+	<DrawerContent title="See context" on:close={logDrawer.closeDrawer}>
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={() => copyToClipboard(content)}
+				color="light"
+				size="xs"
+				startIcon={{
+					icon: ClipboardCopy
+				}}
+			>
+				Copy to clipboard
+			</Button>
+		</svelte:fragment>
+		<div class="w-fit">
+			<pre
+				class="bg-surface-secondary text-secondary text-xs w-full p-2 whitespace-pre border rounded-md"
+				>...<br />{#each content.split('\n') as line, index}<div
+						id={`log-line-${index}`}
+						class={index === hitLineNumber ? 'bg-yellow-200 bg-opacity-20' : ''}>{@html line}</div
+					>{/each}...</pre
+			>
+		</div>
+	</DrawerContent>
+</Drawer>
+
+<SplitPanesWrapper class="hidden md:block">
 	<Splitpanes>
-		<Pane size={40} minSize={20}>
+		<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"
@@ -245,7 +346,17 @@ function processLogWithJsonFmt(log, jsonFmt) {
 								: 'min datetime'}
 							disabled
 						/>
-						<CalendarPicker label="min datetime" date={minTs} />
+						<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}
@@ -259,7 +370,7 @@ function processLogWithJsonFmt(log, jsonFmt) {
 							getAllLogs(minTsManual, maxTsManual)
 						}}
 						serviceLogsChoices
-						loadText="Last 1000 logfiles"
+						loadText={searchTerm === '' ? 'Last 1000 logfiles' : 'All time'}
 					/>
 					<div class="flex relative">
 						<input
@@ -274,7 +385,17 @@ function processLogWithJsonFmt(log, jsonFmt) {
 								: 'max datetime'}
 							disabled
 						/>
-						<CalendarPicker label="max datetime" date={maxTs} />
+						<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"
@@ -290,6 +411,7 @@ function processLogWithJsonFmt(log, jsonFmt) {
 					<Toggle
 						size="xs"
 						bind:checked={autoRefresh}
+						disabled={searchTerm != ''}
 						on:change={(e) => {
 							if (e.detail) {
 								getAllLogs(maxTs, undefined)
@@ -308,27 +430,29 @@ function processLogWithJsonFmt(log, jsonFmt) {
 					{@const minTsN = new Date(minTs).getTime()}
 					{@const maxTsN = new Date(maxTs).getTime()}
 					{@const diff = maxTsN - minTsN}
-					<div class="flex w-full text-2xs text-tertiary pb-6">
-						<div style="width: 60px;" />
+					{#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>
+							<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>
@@ -338,11 +462,21 @@ function processLogWithJsonFmt(log, jsonFmt) {
 										<h4 class="pt-4">{wg}</h4>
 									{/if}
 									<div class="divide-y flex flex-col">
-										{#each Object.entries(o2) as [hn, files]}
+										{#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
+											}
+											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 rounded px-1 hover:bg-surface-hover cursor-pointer {selected &&
+												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
@@ -360,22 +494,31 @@ function processLogWithJsonFmt(log, jsonFmt) {
 													title={hn}
 													style="width: 90px;">{truncateRev(hn, 8)}</div
 												>
-												<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 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>
@@ -386,126 +529,162 @@ function processLogWithJsonFmt(log, jsonFmt) {
 				{/if}
 			</div>
 		</Pane>
-		<Pane size={60} minSize={20}
+		<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">
-						{#each getLogs(selected, upTo) as file}
-							<div
-								style="min-height: {logsContent[file.file_path]
-									? 10
-									: (file.ok_lines + file.err_lines) / 20}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
-								>
-								{#if logsContent[file.file_path] == undefined}
-									<div
-										class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms] h-full w-full"
+						{#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>
+							</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)
+										}}
 									/>
-								{: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
+								{/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" />
+							</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 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
 											>
 										{:else}
-											<div class="text-xs text-red-400 pb-4"
-												>{logsContent[file.file_path].error}</div
-											>
+											<div>No logs</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
-											><LogViewer
-												noAutoScroll
-												noMaxH
-												isLoading={false}
-												tag={undefined}
-												content={processLogWithJsonFmt(
-													logsContent[file.file_path].content,
-													file.json_fmt
-												)}
-											/></div
-										>
-									{:else}
-										<div>No logs</div>
 									{/if}
-								{/if}
-							</div>
-						{/each}
+								</div>
+							{/each}
+						{/if}
 					</div>
-					<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}
+					{#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}
+								<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>
 								<button
+									class="text-xs"
 									on:click={() => {
-										if (upTo) {
-											upToIsLatest = false
-											upTo = new Date(new Date(upTo).getTime() + 5 * 60 * 1000).toISOString()
-										}
-									}}>5m {'>'}</button
+										upTo = new Date().toISOString()
+										upToIsLatest = true
+									}}>now</button
 								>
-							{:else}
-								<div />
-							{/if}
-						</div>
-						<div>
-							<button
-								class="text-xs"
-								on:click={() => {
-									upTo = new Date().toISOString()
-									upToIsLatest = true
-								}}>now</button
-							>
+							</div>
 						</div>
-					</div>
+					{/if}
 				{:else}
 					<div class="flex justify-center items-center pt-8">Select a host to see its logs</div>
 				{/if}</div
 			></Pane
 		>
 	</Splitpanes>
-</div>
+</SplitPanesWrapper>

package/package/components/ServiceLogsInner.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        searchTerm: string;
+        queryParseErrors?: string[] | undefined;
         getLogFile?: ((hostname: string, path: string) => Promise<void>) | undefined;
     };
     events: {
-        scroll: Event;
         click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/ShareModal.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        openDrawer?: ((newPath: string, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger") => Promise<void>) | undefined;
+        openDrawer?: ((newPath: string, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger") => Promise<void>) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -14,6 +14,6 @@ export type ShareModalProps = typeof __propDef.props;
 export type ShareModalEvents = typeof __propDef.events;
 export type ShareModalSlots = typeof __propDef.slots;
 export default class ShareModal extends SvelteComponent<ShareModalProps, ShareModalEvents, ShareModalSlots> {
-    get openDrawer(): (newPath: string, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger") => Promise<void>;
+    get openDrawer(): (newPath: string, kind_l: "script" | "flow" | "resource" | "schedule" | "app" | "variable" | "group_" | "raw_app" | "http_trigger" | "websocket_trigger" | "kafka_trigger") => Promise<void>;
 }
 export {};

package/package/components/SimpleEditor.svelte

@@ -201,6 +201,7 @@ async function loadMonaco() {
     });
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
+        loadExtraLib();
         editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
             code = getCode();
             shouldBindKey && format && format();
@@ -344,6 +345,14 @@ onDestroy(() => {
     }
     catch (err) { }
 });
+export function setCursorToEnd() {
+    if (editor) {
+        const lastLine = editor.getModel()?.getLineCount() ?? 1;
+        const lastColumn = editor.getModel()?.getLineMaxColumn(lastLine) ?? 1;
+        editor.setPosition({ lineNumber: lastLine, column: lastColumn });
+        editor.focus();
+    }
+}
 </script>
 
 <EditorTheme />

package/package/components/SimpleEditor.svelte.d.ts

@@ -36,6 +36,7 @@ declare const __propDef: {
         show?: (() => void) | undefined;
         hide?: (() => void) | undefined;
         setSuggestion?: ((value: string) => void) | undefined;
+        setCursorToEnd?: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -60,5 +61,6 @@ export default class SimpleEditor extends SvelteComponent<SimpleEditorProps, Sim
     get show(): () => void;
     get hide(): () => void;
     get setSuggestion(): (value: string) => void;
+    get setCursorToEnd(): () => void;
 }
 export {};