windmill-components 1.309.7 → 1.352.0

package/package/components/LightweightArgInput.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SchemaProperty } from '../common';
+import type { EnumType, SchemaProperty } from '../common';
 import type { ComponentCustomCSS } from './apps/types';
 declare const __propDef: {
     props: {
@@ -11,10 +11,11 @@ declare const __propDef: {
         format?: string | undefined;
         contentEncoding?: 'base64' | 'binary' | undefined;
         type?: string | undefined;
+        oneOf?: SchemaProperty[] | undefined;
         required?: boolean | undefined;
         pattern?: undefined | string;
         valid?: boolean | undefined;
-        enum_?: string[] | undefined;
+        enum_?: EnumType;
         itemsType?: {
             type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
@@ -29,6 +30,9 @@ declare const __propDef: {
         extra?: Record<string, any> | undefined;
         displayType?: boolean | undefined;
         customErrorMessage?: string | undefined;
+        render?: boolean | undefined;
+        title?: string | undefined;
+        placeholder?: string | undefined;
         error?: string | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;

package/package/components/LightweightResourcePicker.svelte

@@ -1,20 +1,23 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import Select from './apps/svelte-select/lib/index';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 import DarkModeObserver from './DarkModeObserver.svelte';
+import { Button, Drawer, DrawerContent } from './common';
+import { Plus } from 'lucide-svelte';
 const dispatch = createEventDispatcher();
 export let initialValue = undefined;
 export let value = initialValue;
 export let resourceType = undefined;
 export let disablePortal = false;
+const appViewerContext = getContext('AppViewerContext');
 let valueSelect = initialValue || value
     ? {
         value: value ?? initialValue,
         label: value ?? initialValue
     }
-    : undefined;
+    : '';
 let collection = [valueSelect];
 async function loadResources(resourceType) {
     const nc = (await ResourceService.listResource({
@@ -30,33 +33,78 @@ async function loadResources(resourceType) {
     }
     collection = nc;
 }
-$: {
-    if ($workspaceStore) {
-        loadResources(resourceType);
-    }
-}
+$: $workspaceStore && loadResources(resourceType);
 $: dispatch('change', value);
 let darkMode = false;
+let drawer = undefined;
+function processEvent(event) {
+    if (event.origin !== window.location.origin) {
+        return;
+    }
+    if (event.data.type === 'refresh') {
+        value = event.data.detail;
+        valueSelect = { value, label: value };
+        drawer?.closeDrawer?.();
+    }
+}
 </script>
 
 <DarkModeObserver bind:darkMode />
 
-<Select
-	portal={!disablePortal}
-	value={valueSelect}
-	on:change={(e) => {
-		value = e.detail.value
-		valueSelect = e.detail
-	}}
-	on:clear={() => {
-		value = undefined
-		valueSelect = undefined
-	}}
-	items={collection}
-	class="text-clip grow min-w-0"
-	placeholder="{resourceType ?? 'any'} resource"
-	inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-	containerStyles={darkMode
-		? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-		: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
-/>
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent
+		title="Add a Resource"
+		on:close={drawer.closeDrawer}
+		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
+		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
+	>
+		<iframe
+			title="App connection"
+			class="w-full h-full"
+			src="/embed_connect?resource_type={resourceType}&workspace={appViewerContext?.workspace ??
+				$workspaceStore}"
+		/>
+	</DrawerContent>
+</Drawer>
+
+<div class="flex flex-col w-full items-start">
+	<div class="flex flex-row gap-x-1 w-full">
+		<Select
+			portal={!disablePortal}
+			value={valueSelect}
+			on:change={(e) => {
+				value = e.detail.value
+				valueSelect = e.detail
+			}}
+			on:clear={() => {
+				value = undefined
+				valueSelect = ''
+			}}
+			items={collection}
+			class="text-clip grow min-w-0"
+			placeholder="{resourceType ?? 'any'} resource"
+			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+			containerStyles={darkMode
+				? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+				: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+		/>
+
+		{#if resourceType}
+			<Button
+				color="light"
+				variant="border"
+				size="xs"
+				on:click={() => {
+					window.removeEventListener('message', processEvent)
+					window.addEventListener('message', processEvent, {
+						once: true
+					})
+
+					drawer?.openDrawer?.()
+				}}
+				startIcon={{ icon: Plus }}
+				iconOnly
+			/>
+		{/if}
+	</div>
+</div>

package/package/components/LightweightSchemaForm.svelte

@@ -1,6 +1,7 @@
 <script>import { twMerge } from 'tailwind-merge';
 import LightweightArgInput from './LightweightArgInput.svelte';
 import { allTrue, computeShow } from '../utils';
+import { deepEqual } from 'fast-equals';
 export let css = undefined;
 export let schema;
 export let args = undefined;
@@ -15,7 +16,6 @@ $: isValid = allTrue(inputCheck) ?? false;
 $: if (args === undefined) {
     args = {};
 }
-reorder();
 export function invalidate(key, error) {
     inputCheck[key] = false;
     errors[key] = error;
@@ -28,52 +28,62 @@ export function validateAll() {
     inputCheck = Object.fromEntries(Object.entries(inputCheck).map((x) => [x[0], true]));
     errors = Object.fromEntries(Object.entries(errors).map((x) => [x[0], '']));
 }
+let keys = Array.isArray(schema?.order)
+    ? schema?.order
+    : Object.keys(schema?.properties ?? {});
+$: schema && reorder();
 function reorder() {
-    console.log('reorder');
-    if (schema?.order && Array.isArray(schema.order)) {
-        const n = {};
-        schema.order.forEach((x) => {
-            if (schema.properties && schema.properties[x] != undefined) {
+    let lkeys = Object.keys(schema?.properties ?? {});
+    if (!deepEqual(schema?.order, lkeys) || !deepEqual(keys, lkeys)) {
+        console.debug('reorder');
+        if (schema?.order && Array.isArray(schema.order)) {
+            const n = {};
+            schema.order.forEach((x) => {
+                if (schema.properties && schema.properties[x] != undefined) {
+                    n[x] = schema.properties[x];
+                }
+            });
+            Object.keys(schema.properties ?? {})
+                .filter((x) => !schema.order?.includes(x))
+                .forEach((x) => {
                 n[x] = schema.properties[x];
-            }
-        });
-        Object.keys(schema.properties ?? {})
-            .filter((x) => !schema.order?.includes(x))
-            .forEach((x) => {
-            n[x] = schema.properties[x];
-        });
-        schema.properties = n;
+            });
+            schema.properties = n;
+        }
+        keys = Object.keys(schema.properties ?? {});
     }
 }
 </script>
 
 <div class={twMerge('w-full flex flex-col px-0.5 pb-2', largeGap ? 'gap-8' : 'gap-2')}>
-	{#each Object.keys(schema.properties ?? {}) as argName (argName)}
+	{#each keys as argName (argName)}
 		{#if typeof args == 'object' && schema?.properties[argName] && args}
-			{#if computeShow(argName, schema?.properties[argName].showExpr, args)}
-				<LightweightArgInput
-					label={argName}
-					description={schema.properties[argName].description}
-					bind:value={args[argName]}
-					bind:valid={inputCheck[argName]}
-					bind:error={errors[argName]}
-					type={schema.properties[argName].type}
-					required={schema.required?.includes(argName) ?? false}
-					pattern={schema.properties[argName].pattern}
-					defaultValue={defaultValues?.[argName] ?? schema.properties[argName].default}
-					enum_={dynamicEnums?.[argName] ?? schema.properties[argName].enum}
-					format={schema.properties[argName].format}
-					contentEncoding={schema.properties[argName].contentEncoding}
-					customErrorMessage={schema.properties[argName].customErrorMessage}
-					properties={schema.properties[argName].properties}
-					nestedRequired={schema.properties[argName].required}
-					itemsType={schema.properties[argName].items}
-					extra={schema.properties[argName]}
-					on:inputClicked
-					{displayType}
-					{css}
-				/>
-			{/if}
+			<LightweightArgInput
+				render={computeShow(argName, schema?.properties[argName].showExpr, args)}
+				label={argName}
+				description={schema.properties[argName].description}
+				bind:value={args[argName]}
+				bind:valid={inputCheck[argName]}
+				bind:error={errors[argName]}
+				type={schema.properties[argName].type}
+				oneOf={schema.properties[argName].oneOf}
+				required={schema.required?.includes(argName) ?? false}
+				pattern={schema.properties[argName].pattern}
+				defaultValue={defaultValues?.[argName] ?? schema.properties[argName].default}
+				enum_={dynamicEnums?.[argName] ?? schema.properties[argName].enum}
+				format={schema.properties[argName].format}
+				contentEncoding={schema.properties[argName].contentEncoding}
+				customErrorMessage={schema.properties[argName].customErrorMessage}
+				properties={schema.properties[argName].properties}
+				nestedRequired={schema.properties[argName].required}
+				itemsType={schema.properties[argName].items}
+				extra={schema.properties[argName]}
+				title={schema.properties[argName].title}
+				placeholder={schema.properties[argName].placeholder}
+				on:inputClicked
+				{displayType}
+				{css}
+			/>
 		{/if}
 	{/each}
 </div>

package/package/components/LogViewer.svelte

@@ -1,5 +1,9 @@
 <script context="module">"use strict";
-const s3LogPrefix = '[windmill] Previous logs have been saved to object storage at logs/';
+const s3LogPrefixes = [
+    '\n[windmill] Previous logs have been saved to object storage at logs/',
+    '\n[windmill] Previous logs have been saved to disk at logs/',
+    '\n[windmill] No object storage set in instance settings. Previous logs have been saved to disk at '
+];
 </script>
 
 <script>import { ClipboardCopy, Download, Expand, Loader2 } from 'lucide-svelte';
@@ -9,6 +13,7 @@ import { workspaceStore } from '../stores';
 import AnsiUp from 'ansi_up';
 import NoWorkerWithTagWarning from './runs/NoWorkerWithTagWarning.svelte';
 import { JobService } from '../gen';
+import Tooltip from './Tooltip.svelte';
 export let content;
 export let isLoading;
 export let duration = undefined;
@@ -17,6 +22,7 @@ export let wrapperClass = '';
 export let jobId = undefined;
 export let tag;
 export let small = false;
+export let drawerOpen = false;
 // @ts-ignore
 const ansi_up = new AnsiUp();
 let scroll = true;
@@ -31,10 +37,39 @@ $: if (jobId !== lastJobId) {
     loadedFromObjectStore = '';
     LOG_LIMIT = LOG_INC;
 }
-$: downloadStartUrl = truncatedContent.startsWith(s3LogPrefix)
-    ? truncatedContent.substring(s3LogPrefix.length, truncatedContent.indexOf('\n'))
-    : undefined;
+function findPrefixIndex(truncateContent) {
+    let index = s3LogPrefixes.findIndex((x) => truncateContent.startsWith(x));
+    if (index == -1) {
+        return undefined;
+    }
+    return index;
+}
+function findStartUrl(truncateContent, prefixIndex = undefined) {
+    if (prefixIndex == undefined) {
+        return undefined;
+    }
+    const end = truncateContent.substring(1).indexOf('\n');
+    return prefixIndex != undefined && truncateContent
+        ? truncateContent.substring(s3LogPrefixes[prefixIndex]?.length, end == -1 ? undefined : end + 1)
+        : undefined;
+}
+function tooltipText(prefixIndex) {
+    if (prefixIndex == undefined) {
+        return 'No path/file detected to download from';
+    }
+    else if (prefixIndex == 0) {
+        return 'Download the previous logs from the instance configured object store';
+    }
+    else if (prefixIndex == 1) {
+        return 'Attempt to download the logs from disk. Assume there is a shared disk between the workers and the server at /tmp/windmill/logs. Upgrade to EE to use an object store such as S3 instead of a shared volume.';
+    }
+    else if (prefixIndex == 2) {
+        return 'Attempt to download the logs from disk. Assume there is a shared disk between the workers and the server at /tmp/windmill/logs. Since you are on EE, you can alternatively use an object store such as S3 configured in the instance settings instead of a shared volume..';
+    }
+}
 $: truncatedContent = truncateContent(content, loadedFromObjectStore, LOG_LIMIT);
+$: prefixIndex = findPrefixIndex(truncatedContent);
+$: downloadStartUrl = findStartUrl(truncatedContent, prefixIndex);
 function truncateContent(jobContent, loadedFromObjectStore, limit) {
     let content = loadedFromObjectStore + jobContent ?? '';
     if (content.length > limit) {
@@ -46,8 +81,8 @@ $: if (content != undefined && isLoading) {
     isLoading = false;
 }
 $: truncatedContent && scrollToBottom();
-$: html = ansi_up.ansi_to_html(downloadStartUrl
-    ? truncatedContent.substring(truncatedContent.indexOf('\n') + 2, truncatedContent.length)
+$: html = ansi_up.ansi_to_html(downloadStartUrl && prefixIndex != undefined
+    ? truncatedContent.substring(truncatedContent.substring(1).indexOf('\n') + 2, truncatedContent.length)
     : truncatedContent);
 export function scrollToBottom() {
     scroll && setTimeout(() => div?.scroll({ top: div?.scrollHeight, behavior: 'smooth' }), 100);
@@ -75,11 +110,14 @@ function showMoreTruncate(len) {
     LOG_LIMIT += LOG_INC;
     console.log(LOG_INC, len, LOG_LIMIT);
     let newC = truncateContent(content, loadedFromObjectStore, LOG_LIMIT);
-    LOG_LIMIT -= newC.indexOf('\n') + 1;
+    let newlineIndex = newC.indexOf('\n') + 1;
+    if (newlineIndex < LOG_INC / 2) {
+        LOG_LIMIT -= newlineIndex;
+    }
 }
 </script>
 
-<Drawer bind:this={logViewer} size="900px">
+<Drawer bind:this={logViewer} bind:open={drawerOpen} size="900px">
 	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
 		<svelte:fragment slot="actions">
 			<Button
@@ -111,12 +149,11 @@ function showMoreTruncate(len) {
 				>{#if content}{@const len =
 						(content?.length ?? 0) +
 						(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button
-							on:click={getStoreLogs}>Show more...</button
-						><br
-						/>{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)... <button
-							on:click={() => showMoreTruncate(len)}>Show more</button
-						>
-					{/if}{@html html}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
+							on:click={getStoreLogs}
+							>Show more... <Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
+						><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)...<br
+						/><button on:click={() => showMoreTruncate(len)}>Show more..</button><br
+						/>{/if}{@html html}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre
 			>
 		</div>
 	</DrawerContent>
@@ -177,7 +214,7 @@ function showMoreTruncate(len) {
 			>{#if content}{@const len =
 					(content?.length ?? 0) +
 					(loadedFromObjectStore?.length ?? 0)}{#if downloadStartUrl}<button on:click={getStoreLogs}
-						>Show more...</button
+						>Show more... &nbsp;<Tooltip>{tooltipText(prefixIndex)}</Tooltip></button
 					><br />{:else if len > LOG_LIMIT}(truncated to the last {LOG_LIMIT} characters)<br
 					/><button on:click={() => showMoreTruncate(len)}>Show more..</button><br />{/if}<span
 					>{@html html}</span

package/package/components/LogViewer.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         jobId?: string | undefined;
         tag: string | undefined;
         small?: boolean | undefined;
+        drawerOpen?: boolean | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {