windmill-components 1.309.7 → 1.352.0

package/package/components/InputTransformForm.svelte

@@ -1,4 +1,4 @@
-<script>import { getContext } from 'svelte';
+<script>import { createEventDispatcher, getContext } from 'svelte';
 import ArgInput from './ArgInput.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import DynamicInputHelpBox from './flows/content/DynamicInputHelpBox.svelte';
@@ -28,6 +28,7 @@ export let enableAi = false;
 let monaco = undefined;
 let monacoTemplate = undefined;
 let argInput = undefined;
+const dispatch = createEventDispatcher();
 $: inputCat = computeInputCat(schema.properties[argName].type, schema.properties[argName].format, schema.properties[argName].items?.type, schema.properties[argName].enum, schema.properties[argName].contentEncoding);
 let propertyType = getPropertyType(arg);
 const { shouldUpdatePropertyType, exprsToSet } = getContext('FlowCopilotContext') || {};
@@ -325,6 +326,9 @@ loadResourceTypes();
 							}}
 							bind:code={arg.value}
 							fontSize={14}
+							on:change={() => {
+								dispatch('change', { argName })
+							}}
 						/>
 					{/if}
 				</div>
@@ -338,11 +342,16 @@ loadResourceTypes();
 					on:blur={() => {
 						focused = false
 					}}
+					shouldDispatchChanges
+					on:change={() => {
+						dispatch('change', { argName })
+					}}
 					label={argName}
 					bind:editor={monaco}
 					bind:description={schema.properties[argName].description}
 					bind:value={arg.value}
 					type={schema.properties[argName].type}
+					oneOf={schema.properties[argName].oneOf}
 					required={schema.required.includes(argName)}
 					bind:pattern={schema.properties[argName].pattern}
 					bind:valid={inputCheck}
@@ -359,12 +368,18 @@ loadResourceTypes();
 					{itemPicker}
 					bind:pickForField
 					showSchemaExplorer
+					nullable={schema.properties[argName].nullable}
+					bind:title={schema.properties[argName].title}
+					bind:placeholder={schema.properties[argName].placeholder}
 				/>
 			{:else if arg.expr != undefined}
 				<div class="border mt-2">
 					<SimpleEditor
 						bind:this={monaco}
 						bind:code={arg.expr}
+						on:change={() => {
+							dispatch('change', { argName })
+						}}
 						{extraLib}
 						lang="javascript"
 						shouldBindKey={false}
@@ -375,6 +390,9 @@ loadResourceTypes();
 								return false
 							})
 						}}
+						on:change={() => {
+							dispatch('change', { argName })
+						}}
 						on:blur={() => {
 							focused = false
 						}}

package/package/components/InputTransformForm.svelte.d.ts

@@ -22,6 +22,8 @@ declare const __propDef: {
         enableAi?: boolean | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/InputTransformSchemaForm.svelte

@@ -1,6 +1,7 @@
 <script>import { VariableService } from '../gen';
 import { workspaceStore } from '../stores';
 import { allTrue } from '../utils';
+import { createEventDispatcher } from 'svelte';
 import { Button } from './common';
 import StepInputsGen from './copilot/StepInputsGen.svelte';
 import InputTransformForm from './InputTransformForm.svelte';
@@ -19,6 +20,7 @@ export let enableAi = false;
 let clazz = '';
 export { clazz as class };
 let inputCheck = {};
+const dispatch = createEventDispatcher();
 $: isValid = allTrue(inputCheck) ?? false;
 $: if (args == undefined || typeof args !== 'object') {
     args = {};
@@ -81,6 +83,10 @@ $: {
 						{noDynamicToggle}
 						{pickableProperties}
 						{enableAi}
+						on:change={(e) => {
+							const { argName } = e.detail
+							dispatch('changeArg', { argName })
+						}}
 					/>
 				</div>
 			{/if}

package/package/components/InputTransformSchemaForm.svelte.d.ts

@@ -17,6 +17,8 @@ declare const __propDef: {
         setArgs?: ((nargs: Record<string, InputTransform | any>) => void) | undefined;
     };
     events: {
+        changeArg: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/InstanceSettings.svelte

@@ -12,10 +12,10 @@ import CloseButton from './common/CloseButton.svelte';
 import KeycloakSetting from './KeycloakSetting.svelte';
 import Alert from './common/alert/Alert.svelte';
 import { isCloudHosted } from '../cloud';
-import { capitalize } from '../utils';
+import { capitalize, classNames } from '../utils';
 import { enterpriseLicense } from '../stores';
 import CustomOauth from './CustomOauth.svelte';
-import { AlertTriangle, Plus } from 'lucide-svelte';
+import { AlertCircle, AlertTriangle, BadgeCheck, Info, Plus, X, BadgeX } from 'lucide-svelte';
 import CustomSso from './CustomSso.svelte';
 import AuthentikSetting from './AuthentikSetting.svelte';
 import AutheliaSetting from './AutheliaSetting.svelte';
@@ -23,6 +23,8 @@ import KanidmSetting from './KanidmSetting.svelte';
 import ZitadelSetting from './ZitadelSetting.svelte';
 import Password from './Password.svelte';
 import ObjectStoreConfigSettings from './ObjectStoreConfigSettings.svelte';
+import { fade } from 'svelte/transition';
+import Popover from './Popover.svelte';
 export let tab = 'Core';
 export let hideTabs = false;
 export let hideSave = false;
@@ -31,6 +33,7 @@ let initialOauths = {};
 let initialRequirePreexistingUserForOauth = false;
 let requirePreexistingUserForOauth = false;
 let ssoOrOauth = 'sso';
+let latestKeyRenewalAttempt = null;
 let serverConfig = {};
 let initialValues = {};
 loadSettings();
@@ -66,6 +69,7 @@ async function loadSettings() {
     if (values['base_url'] == undefined) {
         values['base_url'] = 'http://localhost';
     }
+    latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
 }
 export async function saveSettings() {
     if (values) {
@@ -121,7 +125,7 @@ function parseDate(license_key) {
         try {
             let i = parseInt(splitted[1]);
             let date = new Date(i * 1000);
-            return date.toDateString();
+            return date.toLocaleDateString();
         }
         catch { }
     }
@@ -152,6 +156,33 @@ async function sendStats() {
 }
 let clientName = '';
 let licenseKeyChanged = false;
+let renewing = false;
+export async function renewLicenseKey() {
+    renewing = true;
+    try {
+        await SettingService.renewLicenseKey();
+        sendUserToast('Key renewal successful');
+        loadSettings();
+    }
+    catch (err) {
+        latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
+        throw err;
+    }
+    finally {
+        renewing = false;
+    }
+}
+let opening = false;
+export async function openCustomerPortal() {
+    opening = true;
+    try {
+        const url = await SettingService.createCustomerPortalSession();
+        window.open(url, '_blank');
+    }
+    finally {
+        opening = false;
+    }
+}
 </script>
 
 <div class="pb-8">
@@ -449,30 +480,179 @@ let licenseKeyChanged = false;
 																requestBody: { license_key: values[setting.key] }
 															})
 															sendUserToast('Valid key')
-														}}>Test Key</Button
+														}}
 													>
+														Test Key
+													</Button>
 												</div>
-												{#if values[setting.key]?.length > 0}
-													{#if parseDate(values[setting.key])}
-														<span class="text-tertiary text-2xs"
-															>License key expires on {parseDate(values[setting.key])}</span
-														>
+												<div class="mt-1 flex flex-col gap-1 items-start">
+													{#if values[setting.key]?.length > 0}
+														{#if parseDate(values[setting.key])}
+															<div class="flex flex-row gap-1 items-center">
+																<Info size={12} class="text-tertiary" />
+																<span class="text-tertiary text-xs"
+																	>License key expires on {parseDate(values[setting.key])}</span
+																>
+															</div>
+														{/if}
 													{/if}
-												{/if}
-												{#if licenseKeyChanged}
-													<div class="text-yellow-600"
-														>Refresh page after setting license key and saving to unlock all
-														features</div
-													>
-												{/if}
+													{#if latestKeyRenewalAttempt}
+														{@const attemptedAt = new Date(
+															latestKeyRenewalAttempt.attempted_at
+														).toLocaleString()}
+														<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} />
+																	{/if}
+																	<span
+																		class={classNames(
+																			'text-xs',
+																			latestKeyRenewalAttempt.result === 'success'
+																				? 'text-green-600'
+																				: 'text-red-600'
+																		)}
+																	>
+																		{latestKeyRenewalAttempt.result === 'success'
+																			? 'Latest key renewal succeeded'
+																			: 'Latest key renewal failed'}
+																		on {attemptedAt}
+																	</span>
+																</div>
+																<div slot="text">
+																	{#if latestKeyRenewalAttempt.result === 'success'}
+																		<span class="text-green-300">
+																			Latest key renewal succeeded on {attemptedAt}
+																		</span>
+																	{:else}
+																		<span class="text-red-300">
+																			Latest key renewal failed on {attemptedAt}: {latestKeyRenewalAttempt.result.replace(
+																				'error: ',
+																				''
+																			)}
+																		</span>
+																	{/if}
+																	<br />
+																	As long as invoices are paid and usage corresponds to the subscription,
+																	the key is renewed daily with a validity of 35 days (grace period).
+																</div>
+															</Popover>
+														</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}
+
+													{#if $enterpriseLicense}
+														<div class="flex flex-row gap-2 mt-1">
+															<Button
+																on:click={renewLicenseKey}
+																loading={renewing}
+																size="xs"
+																color="dark"
+																>Renew key
+															</Button>
+															<Button
+																color="dark"
+																size="xs"
+																loading={opening}
+																on:click={openCustomerPortal}
+															>
+																Open customer portal
+															</Button>
+														</div>
+													{/if}
+												</div>
 											{:else if setting.fieldType == 'email'}
 												<input
 													type="email"
 													placeholder={setting.placeholder}
 													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>
+																	<option value="email">Email</option>
+																</select>
+																<input
+																	type="email"
+																	placeholder="Email address"
+																	on:input={(e) => {
+																		if (e.target?.['value']) {
+																			values[setting.key][i] = {
+																				email: e.target['value']
+																			}
+																		}
+																	}}
+																	value={v?.email ?? ''}
+																/>
+																<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 class="flex mt-2 gap-20 items-baseline">
+													<Button
+														variant="border"
+														color="light"
+														size="xs"
+														btnClasses="mt-1"
+														on:click={() => {
+															if (
+																values[setting.key] == undefined ||
+																!Array.isArray(values[setting.key])
+															) {
+																values[setting.key] = []
+															}
+															values[setting.key] = values[setting.key].concat('')
+														}}
+														id="arg-input-add-item"
+														startIcon={{ icon: Plus }}
+														disabled={!$enterpriseLicense}
+													>
+														Add item
+													</Button>
+												</div>
 											{:else if setting.fieldType == 'object_store_config'}
 												<ObjectStoreConfigSettings bind:bucket_config={values[setting.key]} />
+												<div class="mb-6" />
 											{:else if setting.fieldType == 'number'}
 												<input
 													type="number"

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         hideTabs?: boolean | undefined;
         hideSave?: boolean | undefined;
         saveSettings?: (() => Promise<void>) | undefined;
+        renewLicenseKey?: (() => Promise<void>) | undefined;
+        openCustomerPortal?: (() => Promise<void>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -16,5 +18,7 @@ export type InstanceSettingsEvents = typeof __propDef.events;
 export type InstanceSettingsSlots = typeof __propDef.slots;
 export default class InstanceSettings extends SvelteComponent<InstanceSettingsProps, InstanceSettingsEvents, InstanceSettingsSlots> {
     get saveSettings(): () => Promise<void>;
+    get renewLicenseKey(): () => Promise<void>;
+    get openCustomerPortal(): () => Promise<void>;
 }
 export {};

package/package/components/JobLogs.svelte

@@ -0,0 +1,12 @@
+<script>import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import LogViewer from './LogViewer.svelte';
+export let jobId;
+let logs = undefined;
+$: jobId && loadLogs();
+async function loadLogs() {
+    logs = await JobService.getJobLogs({ workspace: $workspaceStore, id: jobId });
+}
+</script>
+
+<LogViewer content={logs} isLoading={false} tag={undefined} {jobId} />

package/package/components/JobLogs.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        jobId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type JobLogsProps = typeof __propDef.props;
+export type JobLogsEvents = typeof __propDef.events;
+export type JobLogsSlots = typeof __propDef.slots;
+export default class JobLogs extends SvelteComponent<JobLogsProps, JobLogsEvents, JobLogsSlots> {
+}
+export {};

package/package/components/JobStatus.svelte

@@ -13,12 +13,12 @@ export let job;
 		<Badge large color="green" icon={{ icon: CheckCircle2, position: 'left' }}>
 			Success {job.is_skipped ? '(Skipped)' : ''}
 		</Badge>
-		<DurationMs duration_ms={job.duration_ms} />
+		<DurationMs duration_ms={job.duration_ms} self_wait_time_ms={job?.self_wait_time_ms} aggregate_wait_time_ms={job?.aggregate_wait_time_ms} />
 	</div>
 {:else if job && 'success' in job}
 	<div class="flex flex-row flex-wrap gap-y-1 mb-1 gap-x-2">
 		<Badge large color="red" icon={{ icon: XCircle, position: 'left' }}>Failed</Badge>
-		<DurationMs duration_ms={job.duration_ms} />
+		<DurationMs duration_ms={job.duration_ms} self_wait_time_ms={job?.self_wait_time_ms} aggregate_wait_time_ms={job?.aggregate_wait_time_ms} />
 	</div>
 {:else if job && 'running' in job && job.running}
 	<div>
@@ -37,7 +37,7 @@ export let job;
 	</div>
 {:else if job && 'running' in job}
 	<div class="flex flex-row gap-1 items-center">
-		<Badge icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
+		<Badge color="orange" icon={{ icon: Clock, position: 'left' }}>Queued</Badge>
 		<NoWorkerWithTagWarning tag={job.tag} />
 	</div>
 {:else}

package/package/components/Label.svelte

@@ -1,7 +1,7 @@
 <script>export let label = undefined;
 </script>
 
-<div>
+<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>

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

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         label?: string | undefined;
     };
     events: {