windmill-components 1.408.2 → 1.430.3

package/package/components/InstanceSettings.svelte

@@ -12,8 +12,8 @@ import CloseButton from './common/CloseButton.svelte';
 import KeycloakSetting from './KeycloakSetting.svelte';
 import Alert from './common/alert/Alert.svelte';
 import { isCloudHosted } from '../cloud';
-import { capitalize, classNames } from '../utils';
-import { enterpriseLicense } from '../stores';
+import { capitalize, classNames, sleep } from '../utils';
+import { enterpriseLicense, isCriticalAlertsUIOpen } from '../stores';
 import CustomOauth from './CustomOauth.svelte';
 import { AlertCircle, AlertTriangle, BadgeCheck, Info, Plus, X, BadgeX, Slack } from 'lucide-svelte';
 import CustomSso from './CustomSso.svelte';
@@ -31,6 +31,7 @@ import { setLicense } from '../enterpriseUtils';
 export let tab = 'Core';
 export let hideTabs = false;
 export let hideSave = false;
+export let closeDrawer = () => { };
 let values = {};
 let initialOauths = {};
 let initialRequirePreexistingUserForOauth = false;
@@ -70,13 +71,27 @@ async function loadSettings() {
     if (values['base_url'] == undefined) {
         values['base_url'] = 'http://localhost';
     }
-    if (values['smtp_connect'] == undefined) {
-        values['smtp_connect'] = {};
+    if (values['smtp_settings'] == undefined) {
+        values['smtp_settings'] = {};
+    }
+    if (values['indexer_settings'] == undefined) {
+        values['indexer_settings'] = {};
     }
     loading = false;
     latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
+    // populate snowflake account identifier from db
+    const account_identifier = oauths?.snowflake_oauth?.connect_config?.extra_params?.account_identifier;
+    if (account_identifier) {
+        snowflakeAccountIdentifier = account_identifier;
+    }
 }
 export async function saveSettings() {
+    if (oauths?.snowflake_oauth &&
+        oauths?.snowflake_oauth?.connect_config?.extra_params?.account_identifier !==
+            snowflakeAccountIdentifier) {
+        setupSnowflakeUrls();
+    }
+    let shouldReloadPage = false;
     if (values) {
         const allSettings = Object.values(settings).flatMap((x) => Object.entries(x));
         let licenseKeySet = false;
@@ -92,6 +107,9 @@ export async function saveSettings() {
             if (x.key == 'license_key') {
                 licenseKeySet = true;
             }
+            if (x.requiresReloadOnChange) {
+                shouldReloadPage = true;
+            }
             return await SettingService.setGlobal({
                 key: x.key,
                 requestBody: { value: values?.[x.key] }
@@ -120,8 +138,15 @@ export async function saveSettings() {
     else {
         console.error('Values not loaded');
     }
-    sendUserToast('Settings updated');
-    dispatch('saved');
+    if (shouldReloadPage) {
+        sendUserToast('Settings updated, reloading page...');
+        await sleep(1000);
+        window.location.reload();
+    }
+    else {
+        sendUserToast('Settings updated');
+        dispatch('saved');
+    }
 }
 let oauths = {};
 let resourceName = '';
@@ -161,7 +186,9 @@ const windmillBuiltins = [
     'basecamp',
     'linkedin',
     'quickbooks',
-    'visma'
+    'visma',
+    'spotify',
+    'snowflake_oauth'
 ];
 let oauth_name = undefined;
 async function sendStats() {
@@ -209,6 +236,20 @@ function showSetting(setting, values) {
     }
     return true;
 }
+let snowflakeAccountIdentifier = '';
+function setupSnowflakeUrls() {
+    // strip all whitespaces from account identifier
+    snowflakeAccountIdentifier = snowflakeAccountIdentifier.replace(/\s/g, '');
+    const connect_config = {
+        scopes: [],
+        auth_url: `https://${snowflakeAccountIdentifier}.snowflakecomputing.com/oauth/authorize`,
+        token_url: `https://${snowflakeAccountIdentifier}.snowflakecomputing.com/oauth/token-request`,
+        req_body_auth: false,
+        extra_params: { account_identifier: snowflakeAccountIdentifier },
+        extra_params_callback: {}
+    };
+    oauths['snowflake_oauth'].connect_config = connect_config;
+}
 </script>
 
 <div class="pb-8">
@@ -225,22 +266,40 @@ function showSetting(setting, values) {
 				<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 or sending critical alerts.
-							<a target="_blank" href="https://www.windmill.dev/docs/misc/setup_smtp">Learn more</a></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 == "Indexer/Search"}
+						<div class="text-secondary pb-4 text-xs"
+							>The indexer service unlocks full text search across jobs and service logs. It requires spinning up its own separate container
+							<a target="_blank" href="https://www.windmill.dev/docs/core_concepts/search_bar#setup">Learn how to</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>
+							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.
-							<a target="_blank" href="https://www.windmill.dev/docs/misc/saml_and_scim">Learn more</a>
+							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>
+							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">
@@ -261,9 +320,11 @@ function showSetting(setting, values) {
 							</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>
+							<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"
@@ -291,12 +352,17 @@ function showSetting(setting, values) {
 								{/if}
 
 								<div class="py-1" />
-									<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="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']} />
@@ -323,6 +389,14 @@ function showSetting(setting, values) {
 														/>
 													</div>
 													<div class="p-2 border rounded">
+														<label class="block pb-2">
+															<span class="text-primary font-semibold text-sm">Custom Name</span>
+															<input
+																type="text"
+																placeholder="Custom Name"
+																bind:value={oauths[k]['display_name']}
+															/>
+														</label>
 														<label class="block pb-2">
 															<span class="text-primary font-semibold text-sm">Client Id</span>
 															<input
@@ -376,12 +450,18 @@ function showSetting(setting, values) {
 								</div>
 							{:else if ssoOrOauth === 'oauth'}
 								<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
+									<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>
+										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']} />
@@ -420,6 +500,22 @@ function showSetting(setting, values) {
 													{#if !windmillBuiltins.includes(k) && k != 'slack'}
 														<CustomOauth bind:connect_config={oauths[k]['connect_config']} />
 													{/if}
+													{#if k == 'snowflake_oauth'}
+														<label class="block pb-2">
+															<span class="text-primary font-semibold text-sm"
+																><a
+																	href="https://docs.snowflake.com/en/user-guide/admin-account-identifier#using-an-account-name-as-an-identifier"
+																	target="_blank">Snowflake Account Identifier</a
+																></span
+															>
+															<input
+																type="text"
+																placeholder="<orgname>-<account_name>"
+																required={true}
+																bind:value={snowflakeAccountIdentifier}
+															/>
+														</label>
+													{/if}
 												</div>
 											</div>
 										{/if}
@@ -465,7 +561,7 @@ function showSetting(setting, values) {
 					<div>
 						<div class="flex-col flex gap-2 pb-4">
 							{#each settings[category] as setting}
-								{#if (!setting.cloudonly || isCloudHosted()) && showSetting(setting.key, values)}
+								{#if (!setting.cloudonly || isCloudHosted()) && showSetting(setting.key, values) && !(setting.hiddenIfNull && values[setting.key] == null)}
 									{#if setting.ee_only != undefined && !$enterpriseLicense}
 										<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap">
 											<AlertTriangle size={16} />
@@ -496,6 +592,20 @@ function showSetting(setting, values) {
 														: ''}
 													bind:value={values[setting.key]}
 												/>
+												{#if setting.advancedToggle}
+													<div class="mt-1">
+														<Toggle
+															size="xs"
+															options={{ right: setting.advancedToggle.label }}
+															checked={setting.advancedToggle.checked(values)}
+															on:change={() => {
+																if (setting.advancedToggle) {
+																	values = setting.advancedToggle.onChange(values)
+																}
+															}}
+														/>
+													</div>
+												{/if}
 											{:else if setting.fieldType == 'textarea'}
 												<textarea
 													rows="2"
@@ -568,24 +678,33 @@ function showSetting(setting, values) {
 														{@const attemptedAt = new Date(
 															latestKeyRenewalAttempt.attempted_at
 														).toLocaleString()}
+														{@const isTrial =
+															latestKeyRenewalAttempt.result.startsWith('error: trial:')}
 														<div class="relative">
 															<Popover notClickable>
 																<div class="flex flex-row items-center gap-1">
 																	{#if latestKeyRenewalAttempt.result === 'success'}
 																		<BadgeCheck class="text-green-600" size={12} />
 																	{:else}
-																		<BadgeX class="text-red-600" size={12} />
+																		<BadgeX
+																			class={isTrial ? 'text-yellow-600' : 'text-red-600'}
+																			size={12}
+																		/>
 																	{/if}
 																	<span
 																		class={classNames(
 																			'text-xs',
 																			latestKeyRenewalAttempt.result === 'success'
 																				? 'text-green-600'
+																				: isTrial
+																				? 'text-yellow-600'
 																				: 'text-red-600'
 																		)}
 																	>
 																		{latestKeyRenewalAttempt.result === 'success'
 																			? 'Latest key renewal succeeded'
+																			: isTrial
+																			? 'Latest key renewal ignored because in trial'
 																			: 'Latest key renewal failed'}
 																		on {attemptedAt}
 																	</span>
@@ -595,6 +714,10 @@ function showSetting(setting, values) {
 																		<span class="text-green-300">
 																			Latest key renewal succeeded on {attemptedAt}
 																		</span>
+																	{:else if isTrial}
+																		<span class="text-yellow-300">
+																			License key cannot be renewed during trial ({attemptedAt})
+																		</span>
 																	{:else}
 																		<span class="text-red-300">
 																			Latest key renewal failed on {attemptedAt}: {latestKeyRenewalAttempt.result.replace(
@@ -645,6 +768,26 @@ function showSetting(setting, values) {
 													placeholder={setting.placeholder}
 													bind:value={values[setting.key]}
 												/>
+											{:else if setting.key == 'critical_alert_mute_ui'}
+												<div class="flex flex-col gap-y-2 my-2 py-2">
+													<Toggle
+														disabled={!$enterpriseLicense}
+														bind:checked={values[setting.key]}
+														options={{ right: setting.description }}
+													/>
+													<div class="flex flex-row">
+														<Button
+															disabled={!$enterpriseLicense}
+															size="sm"
+															on:click={() => {
+																isCriticalAlertsUIOpen.set(true)
+																closeDrawer?.()
+															}}
+														>
+															Show Critical Alerts
+														</Button>
+													</div>
+												</div>
 											{:else if setting.fieldType == 'critical_error_channels'}
 												<div class="w-full flex gap-x-16 flex-wrap">
 													<div class="w-full max-w-lg">
@@ -794,6 +937,137 @@ function showSetting(setting, values) {
 														</Button>
 													{/if}
 												</div>
+											{:else if setting.fieldType == 'indexer_rates'}
+												<div class="flex flex-col gap-4 mt-4">
+													{#if values[setting.key]}
+														<div>
+															<label for="writer_memory_budget" class="block text-sm font-medium">
+																Index writer memory budget (MB)
+																<Tooltip>
+																	The allocated memory arena for the indexer. A bigger value means
+																	less writing to disk and potentially higher indexing throughput
+																</Tooltip>
+															</label>
+															<input
+																type="number"
+																id="writer_memory_budget"
+																placeholder="300"
+																on:input={(e) => {
+																	if (e.target instanceof HTMLInputElement) {
+																		if (e.target.valueAsNumber) {
+																			values[setting.key].writer_memory_budget =
+																				e.target.valueAsNumber * (1024 * 1024)
+																		}
+																	}
+																}}
+																value={values[setting.key].writer_memory_budget / (1024 * 1024)}
+															/>
+														</div>
+														<h3>Completed Job Index</h3>
+														<div>
+															<label
+																for="commit_job_max_batch_size"
+																class="block text-sm font-medium"
+															>
+																Commit max batch size <Tooltip>
+																	The max amount of documents (here jobs) per commit. To optimize
+																	indexing throughput, it is best to keep this as high as possible.
+																	However, especially when reindexing the whole instance, it can be
+																	useful to have a limit on how many jobs can be written without
+																	being commited. A commit will make the jobs available for search,
+																	constitute a "checkpoint" state in the indexing and will be
+																	logged.
+																</Tooltip>
+															</label>
+															<input
+																type="number"
+																id="commit_job_max_batch_size"
+																placeholder="100000"
+																bind:value={values[setting.key].commit_job_max_batch_size}
+															/>
+														</div>
+														<div>
+															<label for="refresh_index_period" class="block text-sm font-medium">
+																Refresh index period (s) <Tooltip>
+																	The index will query new jobs peridically and write them on the
+																	index. This setting sets that period.
+																</Tooltip></label
+															>
+															<input
+																type="number"
+																id="refresh_index_period"
+																placeholder="300"
+																bind:value={values[setting.key].refresh_index_period}
+															/>
+														</div>
+														<div>
+															<label
+																for="max_indexed_job_log_size"
+																class="block text-sm font-medium"
+															>
+																Max indexed job log size (KB) <Tooltip>
+																	Job logs are included when indexing, but to avoid the index size
+																	growing artificially, the logs will be truncated after a size has
+																	been reached.
+																</Tooltip>
+															</label>
+															<input
+																type="number"
+																id="max_indexed_job_log_size"
+																placeholder="1024"
+																on:input={(e) => {
+																	if (e.target instanceof HTMLInputElement) {
+																		if (e.target.valueAsNumber) {
+																			values[setting.key].max_indexed_job_log_size =
+																				e.target.valueAsNumber * 1024
+																		}
+																	}
+																}}
+																value={values[setting.key].max_indexed_job_log_size / 1024}
+															/>
+														</div>
+														<h3>Service Logs Index</h3>
+														<div>
+															<label
+																for="commit_log_max_batch_size"
+																class="block text-sm font-medium"
+																>Commit max batch size Commit max batch size <Tooltip>
+																	The max amount of documents per commit. In this case 1 document is
+																	one log file representing all logs during 1 minute for a specific
+																	host. To optimize indexing throughput, it is best to keep this as
+																	high as possible. However, especially when reindexing the whole
+																	instance, it can be useful to have a limit on how many logs can be
+																	written without being commited. A commit will make the logs
+																	available for search, appear as a log line, and be a "checkpoint"
+																	of the indexing progress.
+																</Tooltip>
+															</label>
+															<input
+																type="number"
+																id="commit_log_max_batch_size"
+																placeholder="10000"
+																bind:value={values[setting.key].commit_log_max_batch_size}
+															/>
+														</div>
+														<div>
+															<label
+																for="refresh_log_index_period"
+																class="block text-sm font-medium"
+															>
+																Refresh index period (s) <Tooltip>
+																	The index will query new service logs peridically and write them
+																	on the index. This setting sets that period.
+																</Tooltip></label
+															>
+															<input
+																type="number"
+																id="refresh_log_index_period"
+																placeholder="300"
+																bind:value={values[setting.key].refresh_log_index_period}
+															/>
+														</div>
+													{/if}
+												</div>
 											{:else if setting.fieldType == 'smtp_connect'}
 												<div class="flex flex-col gap-4 mt-4">
 													{#if values[setting.key]}
@@ -845,12 +1119,26 @@ function showSetting(setting, values) {
 														</div>
 														<div>
 															<Toggle
+																disabled={values[setting.key].smtp_disable_tls}
 																id="smtp_tls_implicit"
 																bind:checked={values[setting.key].smtp_tls_implicit}
 																options={{ right: 'Implicit TLS' }}
 																label="Implicit TLS"
 															/>
 														</div>
+														<div>
+															<Toggle
+																id="smtp_disable_tls"
+																bind:checked={values[setting.key].smtp_disable_tls}
+																on:change={() => {
+																	if (values[setting.key].smtp_disable_tls) {
+																		values[setting.key].smtp_tls_implicit = false
+																	}
+																}}
+																options={{ right: 'Disable TLS' }}
+																label="Disable TLS"
+															/>
+														</div>
 													{/if}
 												</div>
 											{:else if setting.fieldType == 'object_store_config'}
@@ -913,7 +1201,8 @@ function showSetting(setting, values) {
 												password: smtp['smtp_password'],
 												port: smtp['smtp_port'],
 												from: smtp['smtp_from'],
-												tls_implicit: smtp['smtp_tls_implicit']
+												tls_implicit: smtp['smtp_tls_implicit'],
+												disable_tls: smtp['smtp_disable_tls']
 											}
 										}
 									})

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

@@ -4,6 +4,7 @@ declare const __propDef: {
         tab?: string | undefined;
         hideTabs?: boolean | undefined;
         hideSave?: boolean | undefined;
+        closeDrawer?: (() => void) | undefined;
         saveSettings?: (() => Promise<void>) | undefined;
         renewLicenseKey?: (() => Promise<void>) | undefined;
         openCustomerPortal?: (() => Promise<void>) | undefined;

package/package/components/JobArgs.svelte

@@ -10,6 +10,7 @@ import Head from './table/Head.svelte';
 import Row from './table/Row.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import { deepEqual } from 'fast-equals';
+import { isWindmillTooBigObject } from './job_args';
 export let id = undefined;
 export let args;
 export let argLabel = undefined;
@@ -57,7 +58,7 @@ ${Object.entries(args)
 	<div class="relative">
 		<DataTable size="sm">
 			<Head>
-				<tr>
+				<tr class="w-full">
 					<Cell head first>{argLabel ?? 'Arg'}</Cell>
 					<Cell head last>Value</Cell>
 				</tr>
@@ -73,7 +74,7 @@ ${Object.entries(args)
 				</svelte:fragment>
 			</Head>
 
-			<tbody class="divide-y">
+			<tbody class="divide-y w-full">
 				{#if args && Object.keys(args).length > 0}
 					{#each Object.entries(args).sort((a, b) => a[0].localeCompare(b[0])) as [arg, value]}
 						<Row>
@@ -131,7 +132,7 @@ ${Object.entries(args)
 				Copy to clipboard
 			</Button>
 		</svelte:fragment>
-		{#if jsonStr.length > 100000 || (id && workspace && args && typeof args === 'object' && deepEqual( Object.keys(args), ['reason'] ) && args['reason'] == 'WINDMILL_TOO_BIG')}
+		{#if jsonStr.length > 100000 || (id && workspace && args && isWindmillTooBigObject(args))}
 			<div class="text-sm mb-2 text-tertiary">
 				<a
 					download="windmill-args.json"

package/package/components/KanidmSetting.svelte

@@ -53,6 +53,10 @@ function changeValues({ baseUrl, id }) {
 				>
 				<input type="text" placeholder="Base URL" bind:value={baseUrl} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />

package/package/components/KeycloakSetting.svelte

@@ -46,6 +46,10 @@ function changeOrg(org) {
 				>
 				<input type="text" placeholder="yourorg" bind:value={org} />
 			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
 			<label class="block pb-2">
 				<span class="text-primary font-semibold text-sm">Client Id</span>
 				<input type="text" placeholder="Client Id" bind:value={value['id']} />

package/package/components/Label.svelte

@@ -1,10 +1,11 @@
 <script>export let label = undefined;
+export let primary = false;
 </script>
 
 <div class={$$props.class}>
 	<div class="flex flex-row justify-between items-center w-full">
 		<div class="flex flex-row items-center gap-1">
-			<span class="text-secondary text-sm leading-6">{label}</span>
+			<span class="{primary ? 'text-primary' : 'text-secondary'} text-sm leading-6">{label}</span>
 			<slot name="header" />
 		</div>
 		<slot name="error" />

package/package/components/Label.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         label?: string | undefined;
+        primary?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;