windmill-components 1.394.8 → 1.405.5

package/package/components/IconedResourceType.svelte

@@ -1,13 +1,15 @@
 <script>
-import { APP_TO_ICON_COMPONENT } from './icons';
-export let name;
-export let silent = false;
-export let after = false;
-export let height = '24px';
-export let width = '24px';
-export let center = false;
-export let isSelected = false;
-$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]];
+	import { FileText } from 'lucide-svelte'
+	import { APP_TO_ICON_COMPONENT } from './icons'
+	export let name
+	export let silent = false
+	export let after = false
+	export let height = '24px'
+	export let width = '24px'
+	export let center = false
+	export let isSelected = false
+	export let formatExtension = undefined
+	$: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.split('_')[0]]
 </script>
 
 <div class="truncate flex flex-row gap-2 {center ? 'justify-center items-center' : ''}  -pl-2">
@@ -18,10 +20,15 @@ $: iconComponent = APP_TO_ICON_COMPONENT[name] || APP_TO_ICON_COMPONENT[name.spl
 		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
 			<svelte:component this={iconComponent} {height} {width} />
 		</span>
+	{:else if formatExtension}
+		<span class={isSelected ? 'text-secondary' : 'text-secondary grayscale'}>
+			<svelte:component this={FileText} {height} {width} />
+		</span>
 	{:else}
 		<span style="width: {width}; height: {height}" class="bg-gray-100 rounded-full" />
 	{/if}
 	{#if !silent && after}
 		{name}
 	{/if}
-</div>	
+</div>
+

package/package/components/IconedResourceType.svelte.d.ts

@@ -9,6 +9,7 @@ export default class IconedResourceType extends SvelteComponent<{
     width?: string | undefined;
     silent?: boolean | undefined;
     isSelected?: boolean | undefined;
+    formatExtension?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -26,6 +27,7 @@ declare const __propDef: {
         width?: string | undefined;
         silent?: boolean | undefined;
         isSelected?: boolean | undefined;
+        formatExtension?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/IdEditorInput.svelte

@@ -43,7 +43,6 @@ $: inputDiv?.focus();
 	<div class="flex w-full">
 		<input
 			bind:this={inputDiv}
-			autofocus
 			type="text"
 			bind:value
 			class="!w-auto grow"

package/package/components/InstanceSettings.svelte

@@ -1,6 +1,6 @@
 <script>import { settings, settingsKeys } from './instanceSettings';
-import { Button, Tab, TabContent, Tabs } from './common';
-import { ConfigService, SettingService } from '../gen';
+import { Button, Skeleton, Tab, TabContent, Tabs } from './common';
+import { SettingService, SettingsService } from '../gen';
 import Toggle from './Toggle.svelte';
 import SecondsInput from './common/seconds/SecondsInput.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -26,6 +26,8 @@ import ObjectStoreConfigSettings from './ObjectStoreConfigSettings.svelte';
 import { fade } from 'svelte/transition';
 import Popover from './Popover.svelte';
 import { base } from '../base';
+import { createEventDispatcher } from 'svelte';
+import { setLicense } from '../enterpriseUtils';
 export let tab = 'Core';
 export let hideTabs = false;
 export let hideSave = false;
@@ -35,23 +37,21 @@ let initialRequirePreexistingUserForOauth = false;
 let requirePreexistingUserForOauth = false;
 let ssoOrOauth = 'sso';
 let latestKeyRenewalAttempt = null;
-let serverConfig = {};
 let initialValues = {};
+let loading = true;
+let version = '';
 loadSettings();
+loadVersion();
+const dispatch = createEventDispatcher();
+async function loadVersion() {
+    version = await SettingsService.backendVersion();
+}
 async function loadSettings() {
-    try {
-        serverConfig = (await ConfigService.getConfig({ name: 'server' })) ?? {};
-    }
-    catch (e) {
-        console.log("Sever config not found, assuming it's first setup");
-    }
+    loading = true;
     async function getValue(key, storage) {
         if (storage == 'setting') {
             return SettingService.getGlobal({ key });
         }
-        else if (storage == 'config') {
-            return serverConfig[key];
-        }
     }
     initialOauths = (await SettingService.getGlobal({ key: 'oauths' })) ?? {};
     requirePreexistingUserForOauth =
@@ -70,21 +70,16 @@ async function loadSettings() {
     if (values['base_url'] == undefined) {
         values['base_url'] = 'http://localhost';
     }
+    if (values['smtp_connect'] == undefined) {
+        values['smtp_connect'] = {};
+    }
+    loading = false;
     latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
 }
 export async function saveSettings() {
     if (values) {
         const allSettings = Object.values(settings).flatMap((x) => Object.entries(x));
-        const newServerConfig = Object.fromEntries(allSettings
-            .filter((x) => x[1].storage == 'config' && values?.[x[1].key] && values?.[x[1].key] != '')
-            .map((x) => [x[1].key, values?.[x[1].key]]));
-        if (!deepEqual(newServerConfig, serverConfig)) {
-            await ConfigService.updateConfig({
-                name: 'server',
-                requestBody: newServerConfig
-            });
-            serverConfig = JSON.parse(JSON.stringify(newServerConfig));
-        }
+        let licenseKeySet = false;
         await Promise.all(allSettings
             .filter((x) => {
             return (x[1].storage == 'setting' &&
@@ -94,7 +89,13 @@ export async function saveSettings() {
                     initialValues?.[x[1].key] != null));
         })
             .map(async ([_, x]) => {
-            await SettingService.setGlobal({ key: x.key, requestBody: { value: values?.[x.key] } });
+            if (x.key == 'license_key') {
+                licenseKeySet = true;
+            }
+            return await SettingService.setGlobal({
+                key: x.key,
+                requestBody: { value: values?.[x.key] }
+            });
         }));
         initialValues = JSON.parse(JSON.stringify(values));
         if (!deepEqual(initialOauths, oauths)) {
@@ -112,11 +113,15 @@ export async function saveSettings() {
                 requestBody: { value: requirePreexistingUserForOauth }
             });
         }
+        if (licenseKeySet) {
+            setLicense();
+        }
     }
     else {
         console.error('Values not loaded');
     }
     sendUserToast('Settings updated');
+    dispatch('saved');
 }
 let oauths = {};
 let resourceName = '';
@@ -196,6 +201,14 @@ export async function openCustomerPortal() {
         opening = false;
     }
 }
+function showSetting(setting, values) {
+    if (setting == 'dev_instance') {
+        if (values['license_key'] == undefined) {
+            return false;
+        }
+    }
+    return true;
+}
 </script>
 
 <div class="pb-8">
@@ -207,33 +220,50 @@ export async function openCustomerPortal() {
 
 		<svelte:fragment slot="content">
 			<div class="pt-4" />
+
 			{#each Object.keys(settings) as category}
 				<TabContent value={category}>
 					{#if category == 'SMTP'}
 						<div class="text-secondary pb-4 text-xs"
-							>Setting SMTP unlocks sending emails upon adding new users to the workspace or the
-							instance.</div
+							>Setting SMTP unlocks sending emails upon adding new users to the workspace or the instance or sending critical alerts.
+							<a target="_blank" href="https://www.windmill.dev/docs/misc/setup_smtp">Learn more</a></div
 						>
+					{:else if category == 'Registries'}
+						<div class="text-secondary pb-4 text-xs">
+							Add private registries for Pip, Bun and npm. <a target="_blank" href="https://www.windmill.dev/docs/advanced/imports">Learn more</a>
+						</div>
 					{:else if category == 'Slack'}
 						<div class="text-secondary pb-4 text-xs">
-							Connecting your instance to a Slack workspace enables critical alerts to be sent to a
-							Slack channel.
+							Connecting your instance to a Slack workspace enables critical alerts to be sent to a Slack channel.
+							<a target="_blank" href="https://www.windmill.dev/docs/misc/saml_and_scim">Learn more</a>
+						</div>
+					{:else if category == 'SCIM/SAML'}
+						<div class="text-secondary pb-4 text-xs">
+							Setting up SAML and SCIM allows you to authenticate users using your identity provider.
+							<a target="_blank" href="https://www.windmill.dev/docs/advanced/instance_settings#slack">Learn more</a>
+						</div>
+					{:else if category == 'Debug'}
+						<div class="text-secondary pb-4 text-xs">
+							Enable debug mode to get more detailed logs.
 						</div>
 					{:else if category == 'Telemetry'}
 						<div class="text-secondary pb-4 text-xs">
 							Anonymous usage data is collected to help improve Windmill.
 							<br />The following information is collected:
 							<ul class="list-disc list-inside pl-2">
-								<li>version</li>
+								<li>version of your instance</li>
 								<li>number and total duration of jobs</li>
 								<li>accounts usage</li>
 								<li>login type usage</li>
 								<li>workers usage</li>
-								<li>vcpus usage</li>
+								<li>vCPUs usage</li>
 								<li>memory usage</li>
 							</ul>
 						</div>
 						{#if $enterpriseLicense}
+						<div class="text-secondary pb-4 text-xs">
+							On Enterprise Edition, you must send data to check that usage is in line with the terms of the subscription. You can either enable telemetry or regularly send usage data by clicking the button below.
+						</div>
 							<Button
 								on:click={sendStats}
 								variant="border"
@@ -243,8 +273,7 @@ export async function openCustomerPortal() {
 								size="xs">Send usage</Button
 							>
 						{/if}
-					{/if}
-					{#if category == 'SSO/OAuth'}
+					{:else if category == 'SSO/OAuth'}
 						<div>
 							<Tabs bind:selected={ssoOrOauth} class="mt-2 mb-4">
 								<Tab value="sso">SSO</Tab>
@@ -262,12 +291,12 @@ export async function openCustomerPortal() {
 								{/if}
 
 								<div class="py-1" />
-								<Alert type="info" title="Single Sign On">
-									When at least one of the below option is set, users will be able to login to
-									Windmill via their third-party account.
-									<br /> To test SSO, the recommended workflow is to to save the settings and try to
-									login in an incognito window.
-								</Alert>
+									<div class="mb-2">
+										<span class="text-primary text-sm">When at least one of the below options is set, users will be able to login to
+											Windmill via their third-party account.
+											<br /> To test SSO, the recommended workflow is to to save the settings and try to
+											login in an incognito window. <a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#sso">Learn more</a></span>
+									</div>
 								<div class="flex flex-col gap-2 py-4">
 									<OAuthSetting name="google" bind:value={oauths['google']} />
 									<OAuthSetting name="microsoft" bind:value={oauths['microsoft']} />
@@ -346,13 +375,14 @@ export async function openCustomerPortal() {
 									/>
 								</div>
 							{:else if ssoOrOauth === 'oauth'}
-								<Alert type="info" title="OAuth Resources">
-									When one of the below option is set, you will be able to create a specific
-									resource containing a token automatically generated by the third-party provider.
-									<br />
-									To test it after setting an oauth client, go to the Resources menu and create a new
-									one of the type of your oauth client (i.e. a 'github' resource if you set Github OAuth).
-								</Alert>
+								<div class="mb-2">
+									<span class="text-primary text-sm">When one of the below options is set, you will be able to create a specific
+										resource containing a token automatically generated by the third-party provider.
+										<br />
+										To test it after setting an oauth client, go to the Resources menu and create a new
+										one of the type of your oauth client (i.e. a 'github' resource if you set Github OAuth).
+										<br /><a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#oauth">Learn more</a></span>
+								</div>
 								<div class="py-1" />
 								<OAuthSetting login={false} name="slack" bind:value={oauths['slack']} />
 								<div class="py-1" />
@@ -435,7 +465,7 @@ export async function openCustomerPortal() {
 					<div>
 						<div class="flex-col flex gap-2 pb-4">
 							{#each settings[category] as setting}
-								{#if !setting.cloudonly || isCloudHosted()}
+								{#if (!setting.cloudonly || isCloudHosted()) && showSetting(setting.key, values)}
 									{#if setting.ee_only != undefined && !$enterpriseLicense}
 										<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap">
 											<AlertTriangle size={16} />
@@ -445,14 +475,18 @@ export async function openCustomerPortal() {
 									<label class="block pb-2">
 										<span class="text-primary font-semibold text-sm">{setting.label}</span>
 										{#if setting.description}
-											<span class="text-secondary text-xs">{setting.description}</span>
+											<span class="text-secondary text-xs">
+												{@html setting.description}
+											</span>
 										{/if}
 										{#if setting.tooltip}
 											<Tooltip>{setting.tooltip}</Tooltip>
 										{/if}
 										{#if values}
 											{@const hasError = setting.isValid && !setting.isValid(values[setting.key])}
-											{#if setting.fieldType == 'text'}
+											{#if loading}
+												<Skeleton layout={[[2.5]]} />
+											{:else if setting.fieldType == 'text'}
 												<input
 													disabled={setting.ee_only != undefined && !$enterpriseLicense}
 													type="text"
@@ -517,14 +551,16 @@ export async function openCustomerPortal() {
 														{:else if expiration}
 															<div class="flex flex-row gap-1 items-center">
 																<AlertCircle size={12} class="text-red-600" />
-																<span class="text-red-600 text-xs"
+																<span class="text-red-600 dark:text-red-400 text-xs"
 																	>License key expired on {expiration}</span
 																>
 															</div>
 														{:else}
 															<div class="flex flex-row gap-1 items-center">
 																<AlertCircle size={12} class="text-red-600" />
-																<span class="text-red-600 text-xs">Invalid license key format</span>
+																<span class="text-red-600 dark:text-red-400 text-xs"
+																	>Invalid license key format</span
+																>
 															</div>
 														{/if}
 													{/if}
@@ -575,13 +611,12 @@ export async function openCustomerPortal() {
 														</div>
 													{/if}
 													{#if licenseKeyChanged && !$enterpriseLicense}
-														<div class="flex flex-row items-center gap-1">
-															<AlertCircle size={12} class="text-yellow-600" />
-															<span class="text-xs text-yellow-600">
-																Refresh page after setting and saving license key to unlock all
-																features
-															</span>
-														</div>
+														{#if version.startsWith('CE')}
+															<div class="text-red-400"
+																>License key is set but image used is the Community Edition {version}.
+																Switch image to EE.</div
+															>
+														{/if}
 													{/if}
 
 													{#if valid || expiration}
@@ -611,79 +646,102 @@ export async function openCustomerPortal() {
 													bind:value={values[setting.key]}
 												/>
 											{:else if setting.fieldType == 'critical_error_channels'}
-												<div class="w-full">
-													<div class="flex max-w-md mt-1 gap-2 w-full items-center">
-														<select disabled>
-															<option>Tracing</option>
-														</select>
-														<input disabled />
-														<button
-															transition:fade|local={{ duration: 100 }}
-															class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
-															aria-label="Clear"
-															disabled
-														>
-															<X size={14} />
-														</button>
-													</div>
-													{#if $enterpriseLicense && Array.isArray(values[setting.key])}
-														{#each values[setting.key] ?? [] as v, i}
-															<div class="flex max-w-md mt-1 gap-2 w-full items-center">
-																<select
-																	on:change={(e) => {
-																		if (e.target?.['value']) {
-																			values[setting.key][i] = {
-																				[e.target['value']]: ''
-																			}
-																		}
-																	}}
-																	value={v && 'slack_channel' in v ? 'slack_channel' : 'email'}
-																>
-																	<option value="email">Email</option>
-																	<option value="slack_channel">Slack</option>
-																</select>
-																{#if v && 'slack_channel' in v}
-																	<input
-																		type="text"
-																		placeholder="Slack channel"
-																		on:input={(e) => {
+												<div class="w-full flex gap-x-16 flex-wrap">
+													<div class="w-full max-w-lg">
+														<div class="flex w-full max-w-lg mt-1 gap-2 w-full items-center">
+															<input
+																type="text"
+																placeholder="Logs (critical errors are always logged)"
+																disabled
+															/>
+														</div>
+
+														{#if $enterpriseLicense && Array.isArray(values[setting.key])}
+															{#each values[setting.key] ?? [] as v, i}
+																<div class="flex w-full max-w-lg mt-1 gap-2 w-full items-center">
+																	<select
+																		class="w-20"
+																		on:change={(e) => {
 																			if (e.target?.['value']) {
 																				values[setting.key][i] = {
-																					slack_channel: e.target['value']
+																					[e.target['value']]: ''
 																				}
 																			}
 																		}}
-																		value={v?.slack_channel ?? ''}
-																	/>
-																{:else}
-																	<input
-																		type="email"
-																		placeholder="Email address"
-																		on:input={(e) => {
-																			if (e.target?.['value']) {
-																				values[setting.key][i] = {
-																					email: e.target['value']
+																		value={v && 'slack_channel' in v ? 'slack_channel' : 'email'}
+																	>
+																		<option value="email">Email</option>
+																		<option value="slack_channel">Slack</option>
+																	</select>
+																	{#if v && 'slack_channel' in v}
+																		<input
+																			type="text"
+																			placeholder="Slack channel"
+																			on:input={(e) => {
+																				if (e.target?.['value']) {
+																					values[setting.key][i] = {
+																						slack_channel: e.target['value']
+																					}
 																				}
-																			}
+																			}}
+																			value={v?.slack_channel ?? ''}
+																		/>
+																	{:else}
+																		<input
+																			type="email"
+																			placeholder="Email address"
+																			on:input={(e) => {
+																				if (e.target?.['value']) {
+																					values[setting.key][i] = {
+																						email: e.target['value']
+																					}
+																				}
+																			}}
+																			value={v?.email ?? ''}
+																		/>
+																	{/if}
+																	<button
+																		transition:fade|local={{ duration: 100 }}
+																		class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
+																		aria-label="Clear"
+																		on:click={() => {
+																			values[setting.key] = values[setting.key].filter(
+																				(_, index) => index !== i
+																			)
 																		}}
-																		value={v?.email ?? ''}
-																	/>
-																{/if}
-																<button
-																	transition:fade|local={{ duration: 100 }}
-																	class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
-																	aria-label="Clear"
-																	on:click={() => {
-																		values[setting.key] = values[setting.key].filter(
-																			(_, index) => index !== i
+																	>
+																		<X size={14} />
+																	</button>
+																</div>
+															{/each}
+														{/if}
+													</div>
+													<div
+														><div class="flex mt-1">
+															<Button
+																size="xs"
+																variant="contained"
+																on:click={async () => {
+																	try {
+																		await SettingService.testCriticalChannels({
+																			requestBody: values[setting.key]
+																		})
+																		sendUserToast(
+																			'Test message sent successfully to critical channels',
+																			false
 																		)
-																	}}
-																>
-																	<X size={14} />
-																</button>
-															</div>
-														{/each}
-													{/if}
+																	} catch (error) {
+																		sendUserToast(
+																			'Failed to send test message: ' + error.message,
+																			true
+																		)
+																	}
+																}}
+															>
+																Test Critical Channels
+															</Button>
+														</div>
+													</div>
 												</div>
 												<div class="flex mt-2 gap-20 items-baseline">
 													<Button
@@ -736,6 +794,65 @@ export async function openCustomerPortal() {
 														</Button>
 													{/if}
 												</div>
+											{:else if setting.fieldType == 'smtp_connect'}
+												<div class="flex flex-col gap-4 mt-4">
+													{#if values[setting.key]}
+														<div>
+															<label for="smtp_host" class="block text-sm font-medium">Host</label>
+															<input
+																type="text"
+																id="smtp_host"
+																placeholder="smtp.gmail.com"
+																bind:value={values[setting.key].smtp_host}
+															/>
+														</div>
+														<div>
+															<label for="smtp_port" class="block text-sm font-medium">Port</label>
+															<input
+																type="number"
+																id="smtp_port"
+																placeholder="587"
+																bind:value={values[setting.key].smtp_port}
+															/>
+														</div>
+														<div>
+															<label for="smtp_username" class="block text-sm font-medium"
+																>Username</label
+															>
+															<input
+																type="text"
+																id="smtp_username"
+																placeholder="ruben@windmill.dev"
+																bind:value={values[setting.key].smtp_username}
+															/>
+														</div>
+														<div>
+															<label for="smtp_password" class="block text-sm font-medium"
+																>Password</label
+															>
+															<Password bind:password={values[setting.key].smtp_password} />
+														</div>
+														<div>
+															<label for="smtp_from" class="block text-sm font-medium"
+																>From Address</label
+															>
+															<input
+																type="email"
+																id="smtp_from"
+																placeholder="noreply@windmill.dev"
+																bind:value={values[setting.key].smtp_from}
+															/>
+														</div>
+														<div>
+															<Toggle
+																id="smtp_tls_implicit"
+																bind:checked={values[setting.key].smtp_tls_implicit}
+																options={{ right: 'Implicit TLS' }}
+																label="Implicit TLS"
+															/>
+														</div>
+													{/if}
+												</div>
 											{:else if setting.fieldType == 'object_store_config'}
 												<ObjectStoreConfigSettings bind:bucket_config={values[setting.key]} />
 												<div class="mb-6" />
@@ -768,7 +885,7 @@ export async function openCustomerPortal() {
 											{/if}
 
 											{#if hasError}
-												<span class="text-red-500 text-xs">
+												<span class="text-red-500 dark:text-red-400 text-sm">
 													{setting.error ?? ''}
 												</span>
 											{/if}
@@ -781,21 +898,22 @@ export async function openCustomerPortal() {
 						</div>
 					</div>
 					{#if category == 'SMTP'}
+						{@const smtp = values['smtp_settings']}
 						<div class="flex gap-4"
 							><input type="email" bind:value={to} placeholder="contact@windmill.dev" />
 							<Button
-								disabled={to == ''}
+								disabled={to == '' || !smtp}
 								on:click={async () => {
 									await SettingService.testSmtp({
 										requestBody: {
 											to,
 											smtp: {
-												host: values['smtp_host'],
-												username: values['smtp_username'],
-												password: values['smtp_password'],
-												port: values['smtp_port'],
-												from: values['smtp_from'],
-												tls_implicit: values['smtp_tls_implicit']
+												host: smtp['smtp_host'],
+												username: smtp['smtp_username'],
+												password: smtp['smtp_password'],
+												port: smtp['smtp_port'],
+												from: smtp['smtp_from'],
+												tls_implicit: smtp['smtp_tls_implicit']
 											}
 										}
 									})

package/package/components/InstanceSettings.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         openCustomerPortal?: (() => Promise<void>) | undefined;
     };
     events: {
+        saved: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/JobArgs.svelte

@@ -46,7 +46,9 @@ ${Object.entries(args)
 }
 </script>
 
-{#if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
+{#if args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'PREPROCESSOR_ARGS_ARE_DISCARDED'}
+	Preprocessor args are discarded
+{:else if id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG'}
 	The args are too big in size to be able to fetch alongside job. Please <a
 		href="/api/w/{workspace}/jobs_u/get_args/{id}"
 		target="_blank">download the JSON file to view them</a