windmill-components 1.394.8 → 1.405.0

package/package/components/instanceSettings.js

@@ -2,7 +2,7 @@ export const settings = {
     Core: [
         {
             label: 'Base url',
-            description: 'Public base url of the instance',
+            description: 'Public base url of the instance. <a href="https://www.windmill.dev/docs/advanced/instance_settings#global-users">Learn more</a>',
             key: 'base_url',
             fieldType: 'text',
             placeholder: 'https://windmill.com',
@@ -17,7 +17,7 @@ export const settings = {
         },
         {
             label: 'Email domain',
-            description: 'Domain to display in webhooks for email triggers (should match the MX record)',
+            description: 'Domain to display in webhooks for <a href="https://www.windmill.dev/docs/advanced/email_triggers">email triggers</a> (should match the MX record)',
             key: 'email_domain',
             fieldType: 'text',
             storage: 'setting',
@@ -35,22 +35,23 @@ export const settings = {
         {
             label: 'Default timeout',
             key: 'job_default_timeout',
-            description: 'Default timeout for individual jobs',
+            description: 'Default timeout for individual jobs. <a href="https://www.windmill.dev/docs/core_concepts/jobs#retention-policy">Learn more</a>',
             fieldType: 'seconds',
             storage: 'setting',
             cloudonly: false
         },
         {
             label: 'Max timeout for sync endpoints',
+            description: 'Maximum amount of time (measured in seconds) that a <a href="https://www.windmill.dev/docs/core_concepts/webhooks">sync endpoint</a> is allowed to run before it is forcibly stopped or timed out.',
             key: 'timeout_wait_result',
             cloudonly: true,
             fieldType: 'seconds',
             placeholder: '60',
-            storage: 'config'
+            storage: 'setting'
         },
         {
             label: 'License key',
-            description: 'License key required to use the EE (switch image for windmill-ee)',
+            description: 'License key required to use the EE (switch image for windmill-ee). <a href="https://www.windmill.dev/docs/advanced/instance_settings#license-key">Learn more</a>',
             key: 'license_key',
             fieldType: 'license_key',
             placeholder: 'only needed to prepare upgrade to EE',
@@ -58,16 +59,15 @@ export const settings = {
         },
         {
             label: 'Non-prod instance',
-            description: 'Whether we should consider the reported usage of this instance as non-prod',
+            description: 'Whether we should consider the reported usage of this instance as non-prod. <a href="https://www.windmill.dev/docs/advanced/instance_settings#non-prod-instance">Learn more</a>',
             key: 'dev_instance',
             fieldType: 'boolean',
-            storage: 'setting',
-            ee_only: 'This is only relevant for EE'
+            storage: 'setting'
         },
         {
             label: 'Retention period in secs',
             key: 'retention_period_secs',
-            description: 'How long to keep the jobs data in the database (max 30 days on CE)',
+            description: 'How long to keep the jobs data in the database (max 30 days on CE). <a href="https://www.windmill.dev/docs/advanced/instance_settings#retention-period-in-secs">Learn more</a>',
             fieldType: 'seconds',
             placeholder: '30',
             storage: 'setting',
@@ -76,15 +76,15 @@ export const settings = {
         },
         {
             label: 'Expose metrics',
-            description: 'Expose Prometheus metrics for workers and servers on port 8001 at /metrics',
+            description: 'Expose Prometheus metrics for workers and servers on port 8001 at /metrics. <a href="https://www.windmill.dev/docs/advanced/instance_settings#expose-metrics">Learn more</a>',
             key: 'expose_metrics',
             fieldType: 'boolean',
             storage: 'setting',
             ee_only: ''
         },
         {
-            label: 'S3/Azure for Python/Go cache & large logs',
-            description: 'Bucket to store large logs and global cache for Python and Go.',
+            label: 'Instance object storage',
+            description: ' S3/Azure bucket to store large logs and global cache for Python and Go. <a href="https://www.windmill.dev/docs/core_concepts/object_storage_in_windmill#instance-object-storage">Learn more</a>',
             key: 'object_store_cache_config',
             fieldType: 'object_store_config',
             storage: 'setting',
@@ -92,7 +92,7 @@ export const settings = {
         },
         {
             label: 'Critical alert channels',
-            description: 'Channels to send critical alerts to. SMTP must be configured for the email channel. A Slack workspace must be connected to the instance for the Slack channel.',
+            description: 'Channels to send critical alerts to. SMTP must be configured for the email channel. A Slack workspace must be connected to the instance for the Slack channel. <a href="https://www.windmill.dev/docs/core_concepts/critical_alert_channels">Learn more</a>',
             key: 'critical_error_channels',
             fieldType: 'critical_error_channels',
             storage: 'setting',
@@ -100,7 +100,7 @@ export const settings = {
         },
         {
             label: 'Azure OpenAI base path',
-            description: 'All Windmill AI features will run on the specified deployed model. Format: https://{your-resource-name}.openai.azure.com/openai/deployments/{deployment-id}',
+            description: 'All Windmill AI features will run on the specified deployed model. Format: https://{your-resource-name}.openai.azure.com/openai/deployments/{deployment-id}. <a href="https://www.windmill.dev/docs/core_concepts/ai_generation#azure-openai-advanced-models">Learn more</a>',
             key: 'openai_azure_base_path',
             fieldType: 'text',
             storage: 'setting',
@@ -108,7 +108,7 @@ export const settings = {
         },
         {
             label: 'Private Hub base url',
-            description: 'Base url of your private Hub instance, without trailing slash',
+            description: 'Base url of your private Hub instance, without trailing slash. <a href="https://www.windmill.dev/docs/core_concepts/private_hub">Learn more</a>',
             placeholder: 'https://hub.company.com',
             key: 'hub_base_url',
             fieldType: 'text',
@@ -120,7 +120,7 @@ export const settings = {
     Registries: [
         {
             label: 'Pip Index Url',
-            description: 'Add private PIP registry',
+            description: 'Add private Pip registry',
             key: 'pip_index_url',
             fieldType: 'text',
             placeholder: 'https://username:password@pypi.company.com/simple',
@@ -129,7 +129,7 @@ export const settings = {
         },
         {
             label: 'Pip Extra Index Url',
-            description: 'Add private extra PIP registry',
+            description: 'Add private extra Pip registry',
             key: 'pip_extra_index_url',
             fieldType: 'text',
             placeholder: 'https://username:password@pypi.company.com/simple',
@@ -138,7 +138,7 @@ export const settings = {
         },
         {
             label: 'Npm Config Registry',
-            description: 'Add private NPM registry',
+            description: 'Add private npm registry',
             key: 'npm_config_registry',
             fieldType: 'text',
             placeholder: 'https://registry.npmjs.org/:_authToken=npm_FOOBAR',
@@ -157,44 +157,11 @@ export const settings = {
     ],
     SMTP: [
         {
-            label: 'Host',
-            key: 'smtp_host',
-            fieldType: 'text',
-            placeholder: 'smtp.gmail.com',
-            storage: 'config'
-        },
-        {
-            label: 'Port',
-            key: 'smtp_port',
-            fieldType: 'number',
-            placeholder: '587',
-            storage: 'config'
-        },
-        {
-            label: 'Username',
-            key: 'smtp_username',
-            fieldType: 'text',
-            placeholder: 'ruben@windmill.dev',
-            storage: 'config'
-        },
-        {
-            label: 'Password',
-            key: 'smtp_password',
-            fieldType: 'password',
-            storage: 'config'
-        },
-        {
-            label: 'From Address',
-            key: 'smtp_from',
-            placeholder: 'noreply@windmill.dev',
-            fieldType: 'email',
-            storage: 'config'
-        },
-        {
-            label: 'Implicit TLS',
-            key: 'smtp_tls_implicit',
-            fieldType: 'boolean',
-            storage: 'config'
+            label: 'SMTP',
+            key: 'smtp_settings',
+            fieldType: 'smtp_connect',
+            storage: 'setting',
+            ee_only: '',
         }
     ],
     Slack: [
@@ -231,14 +198,14 @@ export const settings = {
             label: 'Keep job directories',
             key: 'keep_job_dir',
             fieldType: 'boolean',
-            tooltip: 'Keep Job directories after execution at /tmp/windmill/<worker>/<job_id>',
+            description: 'Keep Job directories after execution at /tmp/windmill/<worker>/<job_id>',
             storage: 'setting'
         },
         {
             label: 'Expose debug metrics',
             key: 'expose_debug_metrics',
             fieldType: 'boolean',
-            tooltip: 'Expose additional metrics (require metrics to be enabled)',
+            description: 'Expose additional metrics (require metrics to be enabled)',
             storage: 'setting'
         }
     ],

package/package/components/jobs/JobProgressBar.svelte

@@ -0,0 +1,52 @@
+<script>import {} from '../../gen';
+import ProgressBar from '../progressBar/ProgressBar.svelte';
+export let job = undefined;
+export let compact = false;
+/// Progress of currently running job
+export let scriptProgress = undefined;
+// Removes `Step 1` and replaces it with `Running` 
+export let hideStepTitle = false;
+let error = undefined;
+let index = 0;
+let subIndex = 0;
+let subLength = 100;
+let length = 1;
+let nextInProgress = false;
+$: if (job)
+    updateJobProgress(job);
+$: subIndex = scriptProgress ?? 0;
+function updateJobProgress(job) {
+    if (!job['running'] && !job['success']) {
+        error = 0;
+    }
+    else {
+        error = undefined;
+    }
+    // Anything that is success automatically gets 100% progress
+    if (job['success'] && scriptProgress)
+        index = 1, subLength = 0, subIndex = 0, scriptProgress = 100;
+}
+let resetP;
+export function reset() {
+    resetP?.();
+    error = undefined;
+    subIndex = 0;
+    subLength = 100;
+    length = 1;
+    index = 0;
+    scriptProgress = undefined;
+}
+</script>
+
+<ProgressBar
+	bind:resetP
+	{length}
+	{index}
+	{nextInProgress}
+	{subLength}
+	{subIndex}
+	{error}
+	class={$$props.class}
+	bind:compact
+	bind:hideStepTitle
+/>

package/package/components/jobs/JobProgressBar.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Job } from '../../gen';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        job?: Job | undefined;
+        compact?: boolean | undefined;
+        scriptProgress?: number | undefined;
+        hideStepTitle?: boolean | undefined;
+        reset?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JobProgressBarProps = typeof __propDef.props;
+export type JobProgressBarEvents = typeof __propDef.events;
+export type JobProgressBarSlots = typeof __propDef.slots;
+export default class JobProgressBar extends SvelteComponent<JobProgressBarProps, JobProgressBarEvents, JobProgressBarSlots> {
+    get reset(): () => void;
+}
+export {};

package/package/components/progressBar/ProgressBar.svelte

@@ -1,5 +1,6 @@
 <script>import { tweened } from 'svelte/motion';
 import { linear } from 'svelte/easing';
+import { twMerge } from 'tailwind-merge';
 function getTween(initialValue = 0, duration = 200) {
     return tweened(initialValue, {
         duration,
@@ -11,6 +12,13 @@ export let index;
 export let subIndex;
 export let subLength;
 export let nextInProgress = false;
+// Used for displaying progress of subjob of flow
+export let subIndexIsPercent = false;
+// Remove padding/margin, border radius and titles
+// Used in individual job test runs
+export let compact = false;
+// Removes `Step 1` and replaces it with `Running` 
+export let hideStepTitle = false;
 export let length;
 let duration = 200;
 let percent = getTween(0, duration);
@@ -31,6 +39,7 @@ $: finished = index == length;
 </script>
 
 <div class={$$props.class}>
+	{#if !compact}
 	<div
 		class="flex justify-between items-end font-medium mb-1 {error != undefined
 			? 'text-red-700 dark:text-red-200'
@@ -41,12 +50,17 @@ $: finished = index == length;
 				? 'Error occured'
 				: finished
 				? 'Done'
+				: hideStepTitle 
+				? `Running`
+				: subIndexIsPercent
+				? `Step ${index + 1} (${subIndex !== undefined ? `${subIndex}%)` : ''}`
 				: `Step ${index + 1}${subIndex !== undefined ? `.${subIndex + 1}` : ''}`}
 		</span>
 		<span class="text-sm">
 			{$percent.toFixed(0)}%
 		</span>
 	</div>
+	{/if}
 	<!-- {#each state as step, index}
 		{index} {JSON.stringify(step)}
 	{/each} -->
@@ -56,7 +70,10 @@ $: finished = index == length;
 		{getPercent(index)}
 		|
 	{/each} -->
-	<div class="flex w-full bg-gray-200 rounded-full h-4 overflow-hidden">
+	<div class={twMerge(
+		"flex w-full bg-gray-200 overflow-hidden",
+		(compact) ? "rounded-none h-3" : "rounded-full h-4",
+	)}>
 		{#each new Array(length) as _, partIndex (partIndex)}
 			<div class="h-full relative border-white {partIndex === 0 ? '' : 'border-l'} w-full">
 				{#if partIndex == index && nextInProgress}

package/package/components/progressBar/ProgressBar.svelte.d.ts

@@ -7,6 +7,9 @@ declare const __propDef: {
         subIndex: number | undefined;
         subLength: number | undefined;
         nextInProgress?: boolean | undefined;
+        subIndexIsPercent?: boolean | undefined;
+        compact?: boolean | undefined;
+        hideStepTitle?: boolean | undefined;
         length: number;
         resetP?: (() => void) | undefined;
     };

package/package/components/runs/JobPreview.svelte

@@ -55,6 +55,7 @@ const dispatch = createEventDispatcher();
 	bind:watchJob
 	on:done={onDone}
 />
+
 <div class="p-4 flex flex-col gap-2 items-start h-full">
 	{#if job}
 		<div class="flex gap-2 flex-wrap">

package/package/components/runs/PreprocessedArgsDisplay.svelte

@@ -0,0 +1,71 @@
+<script>import Badge from '../common/badge/Badge.svelte';
+// import { ClipboardCopy, Download } from 'lucide-svelte'
+// import Drawer from '../common/drawer/Drawer.svelte'
+// import DrawerContent from '../common/drawer/DrawerContent.svelte'
+// import { Highlight } from 'svelte-highlight'
+// import Button from '../common/button/Button.svelte'
+// import { json } from 'svelte-highlight/languages'
+// import { copyToClipboard } from '../../utils'
+// import { deepEqual } from 'fast-equals'
+export let flowStatus;
+// $: args =
+// 	'_metadata' in flowStatus && 'original_args' in flowStatus['_metadata']
+// 		? flowStatus['_metadata']['original_args']
+// 		: undefined
+$: hasPreprocessedArgs =
+    '_metadata' in flowStatus && !!flowStatus['_metadata']['preprocessed_args'];
+// $: argsStr = args !== undefined ? JSON.stringify(args, null, 4) : undefined
+// let jsonViewer: Drawer | undefined = undefined
+</script>
+
+{#if hasPreprocessedArgs}
+	<div>
+		<Badge color="yellow">preprocessed args</Badge>
+	</div>
+{/if}
+
+<!-- 
+{#if args !== undefined && argsStr !== undefined}
+	<Drawer bind:this={jsonViewer} size="900px">
+		<DrawerContent title="Original args" on:close={jsonViewer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<Button
+					download="windmill-args.json"
+					href={`data:text/json;charset=utf-8,${encodeURIComponent(argsStr)}`}
+					startIcon={{ icon: Download }}
+					size="xs"
+					color="light"
+				>
+					Download
+				</Button>
+				<Button
+					on:click={() => copyToClipboard(argsStr)}
+					color="light"
+					size="xs"
+					startIcon={{ icon: ClipboardCopy }}
+				>
+					Copy to clipboard
+				</Button>
+			</svelte:fragment>
+			{#if args.length > 100000 || (args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG')}
+				<div class="text-sm mb-2 text-tertiary">
+					<a
+						download="windmill-args.json"
+						href={`data:text/json;charset=utf-8,${encodeURIComponent(args)}`}
+					>
+						JSON is too large to be displayed in full.
+					</a></div
+				>
+			{:else}
+				<Highlight language={json} code={argsStr.replace(/\\n/g, '\n')} />
+			{/if}
+		</DrawerContent>
+	</Drawer>
+	<button
+		on:click={() => {
+			jsonViewer?.openDrawer()
+		}}
+	>
+		<Badge color="yellow">preprocessed args</Badge>
+	</button>
+{/if} -->

package/package/components/runs/PreprocessedArgsDisplay.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        flowStatus: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PreprocessedArgsDisplayProps = typeof __propDef.props;
+export type PreprocessedArgsDisplayEvents = typeof __propDef.events;
+export type PreprocessedArgsDisplaySlots = typeof __propDef.slots;
+export default class PreprocessedArgsDisplay extends SvelteComponent<PreprocessedArgsDisplayProps, PreprocessedArgsDisplayEvents, PreprocessedArgsDisplaySlots> {
+}
+export {};

package/package/components/schema/AddProperty.svelte

@@ -94,6 +94,7 @@ function handleAddOrEditArgument(modalProperty) {
     if (argError !== '') {
         sendUserToast(argError, true);
     }
+    console.log(schema);
     dispatch('change', schema);
 }
 export function handleDeleteArgument(argPath) {

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -2,33 +2,156 @@
 import EditableSchemaForm from '../EditableSchemaForm.svelte';
 import AddProperty from './AddProperty.svelte';
 import { createEventDispatcher } from 'svelte';
+import Toggle from '../Toggle.svelte';
+import { emptySchema, validateFileExtension } from '../../utils';
+import AutoComplete from 'simple-svelte-autocomplete';
+import { Alert } from '../common';
 export let schema;
 export let offset = 0;
 export let uiOnly = false;
 export let noPreview = false;
 export let fullHeight = true;
 export let lightweightMode = false;
+export let formatExtension = undefined;
+let resourceIsTextFile = false;
 let addProperty = undefined;
 const dispatch = createEventDispatcher();
+$: !resourceIsTextFile && (formatExtension = undefined);
+$: invalidExtension =
+    formatExtension && formatExtension != ''
+        ? !validateFileExtension(formatExtension ?? 'txt')
+        : false;
+function switchResourceIsFile() {
+    if (!resourceIsTextFile) {
+        schema = emptySchema();
+        formatExtension = undefined;
+    }
+    else {
+        formatExtension = "";
+        schema = emptySchema();
+        schema.order = ['content'];
+        schema.properties = {
+            content: {
+                type: 'string',
+                description: 'Text contents of the file'
+            }
+        };
+    }
+    dispatch('change', schema);
+}
+function numberOfMatches(listItem, searchWords) {
+    if (!listItem) {
+        return 0;
+    }
+    let matches = 0;
+    searchWords.forEach((searchWord) => {
+        const searchLetters = searchWord.split('');
+        if (searchLetters.every((l) => listItem.includes(l))) {
+            matches++;
+        }
+    });
+    return matches;
+}
+let suggestedFileExtensions = ['json', 'yaml', 'jinja', 'j2', 'ini', 'cfg', 'toml', 'html', 'xml', 'yml'];
+let autocompleteExtension = true;
 </script>
 
-<div class={twMerge(fullHeight ? 'h-full' : 'h-80', 'border overflow-y-auto rounded-md')}>
-	<div class="p-4 border-b">
-		<AddProperty on:change={() => dispatch('change', schema)} bind:schema bind:this={addProperty} />
+{#if !resourceIsTextFile}
+	<div class={twMerge(fullHeight ? 'h-full' : 'h-80', 'border overflow-y-auto rounded-md')}>
+		<div class="p-4 border-b">
+			<AddProperty
+				on:change={() => dispatch('change', schema)}
+				bind:schema
+				bind:this={addProperty}
+			/>
+		</div>
+		<EditableSchemaForm
+			bind:schema
+			on:change={() => dispatch('change', schema)}
+			isFlowInput
+			on:edit={(e) => {
+				addProperty?.openDrawer(e.detail)
+			}}
+			on:delete={(e) => {
+				addProperty?.handleDeleteArgument([e.detail])
+			}}
+			{offset}
+			{uiOnly}
+			{noPreview}
+			{lightweightMode}
+		/>
 	</div>
-	<EditableSchemaForm
-		bind:schema
-		on:change={() => dispatch('change', schema)}
-		isFlowInput
-		on:edit={(e) => {
-			addProperty?.openDrawer(e.detail)
-		}}
-		on:delete={(e) => {
-			addProperty?.handleDeleteArgument([e.detail])
-		}}
-		{offset}
-		{uiOnly}
-		{noPreview}
-		{lightweightMode}
-	/>
-</div>
+{/if}
+{#if resourceIsTextFile}
+	<div class="flex items-center space-x-2 w-5/12">
+		<label for="format-extension" class="text-base font-medium whitespace-nowrap">
+			File extension{autocompleteExtension ? "" : " (free text)"}:
+		</label>
+		{#if autocompleteExtension}
+			<AutoComplete
+				inputId="format-extension"
+				autofocus={true}
+				items={[...suggestedFileExtensions, 'Choose another extension']}
+				onChange={(a) => {
+					if (a == 'Choose another extension') {
+						formatExtension = ''
+						autocompleteExtension = false
+					}
+				}}
+				itemFilterFunction={(listItem, searchWords) => {
+					if (searchWords.length == 0 || listItem === 'Choose another extension') {
+						return true
+					}
+					return numberOfMatches(listItem, searchWords) > 0
+				}}
+				noResultsText="No matches, try the 'Choose another extension' option"
+				bind:selectedItem={formatExtension}
+				inputClassName="!h-[32px] py-1 !text-xs !w-64"
+				hideArrow
+				className={'!font-bold'}
+				dropdownClassName="!font-normal !w-64 !max-w-64"
+				maxItemsToShowInList={8}
+				moreItemsText={null}
+				lock={true}
+			/>
+		{:else}
+			<input
+				autofocus={true}
+				bind:value={formatExtension}
+				class="!h-[32px] py-1 !text-xs !w-64"
+				placeholder="Enter your extension"
+				on:keydown={(event) => {
+					if (event.key === 'Enter') {
+						if (formatExtension && !suggestedFileExtensions.includes(formatExtension))
+							suggestedFileExtensions.push(formatExtension)
+
+						autocompleteExtension = true
+					}
+				}}
+			/>
+		{/if}
+	</div>
+
+	{#if invalidExtension}
+		<Alert title="Invalid file extension" type="error">
+			The provided extension (<span class="font-bold font-mono">.{formatExtension}</span>) contains
+			invalid characters. Note that you shouldn't add the leading dot, (i.e. enter `json` instead of `.json`)
+		</Alert>
+	{:else if formatExtension && formatExtension !== ''}
+		<Alert title={`Example: my_file.${formatExtension}`} type="info">
+			The <span class="font-bold font-mono"> .{formatExtension} </span> extension will be used to infer
+			the format when displaying the content and this is also how the resource will appear when pulling
+			via the CLI.
+		</Alert>
+		<div />
+	{/if}
+{/if}
+<Toggle
+	bind:checked={resourceIsTextFile}
+	options={{
+		right: 'This resource type represents a plain text file (clears current schema)',
+		rightTooltip:
+			'A text file such as a config file, template, or any other file format that contains plain text'
+	}}
+	on:change={() => switchResourceIsFile()}
+/>

package/package/components/schema/EditableSchemaWrapper.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         noPreview?: boolean | undefined;
         fullHeight?: boolean | undefined;
         lightweightMode?: boolean | undefined;
+        formatExtension?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;