windmill-components 1.623.1 → 1.642.0

package/package/components/AutheliaSetting.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 export let value;
 $: enabled = value != undefined;
 let org = '';
@@ -40,7 +41,7 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Authelia Url</span>
 				<span class="text-secondary font-normal text-xs"
@@ -69,6 +70,6 @@ function changeOrg(org) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/AuthentikSetting.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 export let value;
 $: enabled = value != undefined;
 // Initialize org from existing auth_url
@@ -40,7 +41,7 @@ function changeOrg(org) {
 		/></label
 	>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label>
 				<span class="text-emphasis font-semibold text-xs">Authentik Url</span>
 				<span class="text-secondary font-normal text-xs"
@@ -60,6 +61,6 @@ function changeOrg(org) {
 				<span class="text-emphasis font-semibold text-xs">Client Secret </span>
 				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/AutoscalingConfigEditor.svelte

@@ -13,7 +13,7 @@ import { ConfigService } from '../gen';
 import Select from './select/Select.svelte';
 import ScriptPicker from './ScriptPicker.svelte';
 import Badge from './common/badge/Badge.svelte';
-let { config = $bindable(), worker_tags, disabled } = $props();
+let { config = $bindable(), worker_tags, disabled, eeOnly = false } = $props();
 let test_input = $state(3);
 let healthCheckLoading = $state(false);
 let healthCheckResult = $state(null);
@@ -51,6 +51,7 @@ let collapsed = $state(true);
 	class="flex flex-col gap-6"
 	bind:collapsed
 	description="Autoscaling automatically adjusts the number of workers based on your workload demands."
+	{eeOnly}
 >
 	{#snippet labelExtra()}
 		<Badge color="gray">Beta</Badge>

package/package/components/AutoscalingConfigEditor.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     config: AutoscalingConfig | undefined;
     worker_tags: string[] | undefined;
     disabled: boolean;
+    eeOnly?: boolean;
 }
 declare const AutoscalingConfigEditor: import("svelte").Component<Props, {}, "config">;
 type AutoscalingConfigEditor = ReturnType<typeof AutoscalingConfigEditor>;

package/package/components/BedrockCredentialsCheck.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">import { JobService } from '../gen';
+import { workspaceStore } from '../stores';
+import { tryEvery } from '../utils';
+import { Check, LoaderCircle, Server, X, Cpu } from 'lucide-svelte';
+import Button from './common/button/Button.svelte';
+let apiStatus = $state('idle');
+let apiResult = $state(null);
+let workerStatus = $state('idle');
+let workerResult = $state(null);
+let isChecking = $state(false);
+async function checkApiCredentials() {
+    apiStatus = 'loading';
+    apiResult = null;
+    try {
+        const response = await fetch(`/api/w/${$workspaceStore}/ai/check_bedrock_credentials`);
+        if (!response.ok) {
+            throw new Error(`HTTP error: ${response.status}`);
+        }
+        apiResult = await response.json();
+        apiStatus = apiResult?.available ? 'success' : 'error';
+    }
+    catch (err) {
+        apiResult = {
+            available: false,
+            error: err instanceof Error ? err.message : 'Unknown error'
+        };
+        apiStatus = 'error';
+    }
+}
+async function checkWorkerCredentials() {
+    workerStatus = 'loading';
+    workerResult = null;
+    try {
+        // Create minimal flow with AI agent dry_run step
+        const flowValue = {
+            modules: [
+                {
+                    id: 'a',
+                    value: {
+                        type: 'aiagent',
+                        input_transforms: {
+                            provider: {
+                                type: 'static',
+                                value: {
+                                    kind: 'aws_bedrock',
+                                    resource: {
+                                        api_key: 'dry_run_placeholder',
+                                        region: 'us-east-1'
+                                    },
+                                    model: 'dry_run_placeholder'
+                                }
+                            },
+                            user_message: { type: 'static', value: 'dry_run_placeholder' },
+                            output_type: { type: 'static', value: 'text' },
+                            credentials_check: { type: 'static', value: true }
+                        },
+                        tools: []
+                    }
+                }
+            ]
+        };
+        const job = await JobService.runFlowPreview({
+            workspace: $workspaceStore,
+            requestBody: {
+                value: flowValue,
+                args: {}
+            }
+        });
+        tryEvery({
+            tryCode: async () => {
+                const testResult = await JobService.getCompletedJob({
+                    workspace: $workspaceStore,
+                    id: job
+                });
+                if (testResult.success && testResult.result) {
+                    const result = testResult.result;
+                    if (result?.credentials_check && result?.credentials) {
+                        workerResult = {
+                            ...result.credentials,
+                            source: 'worker_process',
+                            worker: testResult.worker ?? undefined
+                        };
+                        workerStatus = workerResult.available ? 'success' : 'error';
+                    }
+                    else {
+                        workerResult = {
+                            available: false,
+                            error: 'Unexpected response format',
+                            worker: testResult.worker ?? undefined
+                        };
+                        workerStatus = 'error';
+                    }
+                }
+                else {
+                    workerResult = {
+                        available: false,
+                        error: testResult.result?.['error']?.['message'] ?? 'Job failed',
+                        worker: testResult.worker ?? undefined
+                    };
+                    workerStatus = 'error';
+                }
+            },
+            timeoutCode: async () => {
+                workerResult = {
+                    available: false,
+                    error: 'Timeout: job did not complete within 10s'
+                };
+                workerStatus = 'error';
+                try {
+                    await JobService.cancelQueuedJob({
+                        workspace: $workspaceStore,
+                        id: job,
+                        requestBody: {
+                            reason: 'Timeout checking Bedrock credentials'
+                        }
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                }
+            },
+            interval: 500,
+            timeout: 10000
+        });
+    }
+    catch (err) {
+        workerResult = {
+            available: false,
+            error: err instanceof Error ? err.message : 'Unknown error'
+        };
+        workerStatus = 'error';
+    }
+}
+async function checkBoth() {
+    if (isChecking)
+        return;
+    isChecking = true;
+    try {
+        await Promise.all([checkApiCredentials(), checkWorkerCredentials()]);
+    }
+    finally {
+        isChecking = false;
+    }
+}
+</script>
+
+<div class="flex flex-col gap-3 p-3 border rounded-md bg-surface-secondary">
+	<div class="flex items-center justify-between">
+		<h4 class="text-sm font-semibold">AWS Environment Credentials Check</h4>
+		<Button size="xs" variant="border" on:click={checkBoth} disabled={isChecking}>
+			{#if isChecking}
+				<LoaderCircle class="animate-spin mr-1.5 h-3.5 w-3.5" />
+			{/if}
+			Check Credentials
+		</Button>
+	</div>
+
+	<p class="text-xs text-secondary">
+		Check if AWS credentials are available from the environment. If available, you do not need to
+		configure credentials manually.
+	</p>
+
+	<div class="grid grid-cols-2 gap-3">
+		<!-- API Server Check -->
+		<div class="flex flex-col gap-1.5 p-2 border rounded bg-surface">
+			<div class="flex items-center gap-1.5 text-xs font-medium">
+				<Server class="h-3.5 w-3.5" />
+				<span>API Server</span>
+				{#if apiStatus === 'loading'}
+					<LoaderCircle class="animate-spin h-3.5 w-3.5 ml-auto text-blue-500" />
+				{:else if apiStatus === 'success'}
+					<Check class="h-3.5 w-3.5 ml-auto text-green-500" />
+				{:else if apiStatus === 'error'}
+					<X class="h-3.5 w-3.5 ml-auto text-red-500" />
+				{/if}
+			</div>
+
+			{#if apiResult}
+				<div class="text-xs">
+					{#if apiResult.available}
+						<div class="text-green-600 dark:text-green-400">
+							Available: {apiResult.access_key_id_prefix}
+						</div>
+						{#if apiResult.region}
+							<div class="text-secondary">Region: {apiResult.region}</div>
+						{/if}
+					{:else}
+						<div class="text-red-600 dark:text-red-400 break-words">
+							{apiResult.error ?? 'Not available'}
+						</div>
+					{/if}
+				</div>
+			{:else if apiStatus === 'idle'}
+				<div class="text-xs text-tertiary">Click "Check Credentials" to test</div>
+			{/if}
+		</div>
+
+		<!-- Worker Check -->
+		<div class="flex flex-col gap-1.5 p-2 border rounded bg-surface">
+			<div class="flex items-center gap-1.5 text-xs font-medium">
+				<Cpu class="h-3.5 w-3.5" />
+				<span>Worker</span>
+				{#if workerStatus === 'loading'}
+					<LoaderCircle class="animate-spin h-3.5 w-3.5 ml-auto text-blue-500" />
+				{:else if workerStatus === 'success'}
+					<Check class="h-3.5 w-3.5 ml-auto text-green-500" />
+				{:else if workerStatus === 'error'}
+					<X class="h-3.5 w-3.5 ml-auto text-red-500" />
+				{/if}
+			</div>
+
+			{#if workerResult}
+				<div class="text-xs">
+					{#if workerResult.available}
+						<div class="text-green-600 dark:text-green-400">
+							Available: {workerResult.access_key_id_prefix}
+						</div>
+						{#if workerResult.region}
+							<div class="text-secondary">Region: {workerResult.region}</div>
+						{/if}
+						{#if workerResult.source}
+							<div class="text-secondary">Source: {workerResult.source}</div>
+						{/if}
+						{#if workerResult.worker}
+							<div class="text-secondary">Worker: {workerResult.worker}</div>
+						{/if}
+					{:else}
+						<div class="text-red-600 dark:text-red-400 break-words">
+							{workerResult.error ?? 'Not available'}
+						</div>
+						{#if workerResult.worker}
+							<div class="text-secondary">Worker: {workerResult.worker}</div>
+						{/if}
+					{/if}
+				</div>
+			{:else if workerStatus === 'idle'}
+				<div class="text-xs text-tertiary">Click "Check Credentials" to test</div>
+			{/if}
+		</div>
+	</div>
+</div>

package/package/components/BedrockCredentialsCheck.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const BedrockCredentialsCheck: import("svelte").Component<Record<string, never>, {}, "">;
+type BedrockCredentialsCheck = ReturnType<typeof BedrockCredentialsCheck>;
+export default BedrockCredentialsCheck;

package/package/components/CenteredModal.svelte

@@ -1,42 +1,60 @@
 <script lang="ts">import { setLicense } from '../enterpriseUtils';
 import { enterpriseLicense, whitelabelNameStore } from '../stores';
+import { twMerge } from 'tailwind-merge';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 import LoginPageHeader from './LoginPageHeader.svelte';
-export let subtitle = undefined;
-export let title = 'Windmill';
-export let disableLogo = false;
-export let large = false;
+let { subtitle = undefined, title = 'Windmill', disableLogo = false, large = false, centerVertically = true, loading = false, containOverflow = false, children } = $props();
 setLicense();
+let height = $state(0);
 </script>
 
-<div class="center-center min-h-screen p-4 relative bg-surface-secondary">
-	<div class="flex flex-col gap-2 items-center w-full">
+<div
+	class="flex justify-center h-screen p-4 relative bg-surface-secondary {containOverflow
+		? 'overflow-hidden'
+		: 'overflow-auto'}"
+	class:items-center={centerVertically}
+	style="scrollbar-gutter: stable both-edges;"
+	bind:clientHeight={height}
+>
+	<div
+		class={twMerge(
+			'flex flex-col gap-2 items-center w-full pb-8',
+			containOverflow ? 'min-h-0' : 'h-fit',
+			containOverflow ? '' : height > 1080 ? 'pt-28' : 'pt-12'
+		)}
+	>
 		{#if (!disableLogo && !$enterpriseLicense) || !$whitelabelNameStore}
 			<div class="hidden lg:block">
 				<div>
-					<WindmillIcon height="100px" width="100px" spin="slow" />
+					<WindmillIcon size={centerVertically ? 64 : 48} spin={loading ? 'fast' : 'slow'} />
 				</div>
-				<h2 class="text-center py-2 text-primary">Windmill</h2>
 			</div>
+		{:else}
+			<div class="pt-8"></div>
 		{/if}
 
-		<div
-			class="rounded-md bg-surface w-full {large
-				? 'max-w-5xl'
-				: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
-		>
-			<div class="mb-10">
-				<h1 class="text-center text-lg text-emphasis font-semibold">
-					{title}
-				</h1>
-				{#if subtitle}
-					<p class="text-sm font-semibold text-emphasis text-center mt-2">
-						{subtitle}
-					</p>
-				{/if}
-			</div>
-			<slot />
+		<div class="mb-4">
+			<h1 class="text-center text-lg text-emphasis font-semibold">
+				{title}
+			</h1>
+			{#if subtitle}
+				<p class="text-xs font-normal text-primary text-center mt-2">
+					{subtitle}
+				</p>
+			{/if}
 		</div>
+
+		{#if children}
+			<div
+				class="rounded-md bg-surface w-full {large
+					? 'max-w-5xl'
+					: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 z-10 {containOverflow
+					? 'flex-1 min-h-0 flex flex-col'
+					: ''}"
+			>
+				{@render children()}
+			</div>
+		{/if}
 	</div>
 
 	<LoginPageHeader />

package/package/components/CenteredModal.svelte.d.ts

@@ -1,32 +1,13 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const CenteredModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     subtitle?: string | undefined;
     title?: string;
     disableLogo?: boolean;
     large?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type CenteredModal = InstanceType<typeof CenteredModal>;
+    centerVertically?: boolean;
+    loading?: boolean;
+    containOverflow?: boolean;
+    children?: import('svelte').Snippet;
+}
+declare const CenteredModal: import("svelte").Component<Props, {}, "">;
+type CenteredModal = ReturnType<typeof CenteredModal>;
 export default CenteredModal;

package/package/components/CenteredPage.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
-let { class: clazz = '', children } = $props();
+let { class: clazz = '', id, children, wrapperClasses = '', handleOverflow = true } = $props();
 let width = $state(0);
 </script>
 
-<div class="pb-8">
+<div
+	class={twMerge('pb-8', wrapperClasses, handleOverflow ? 'h-full overflow-y-auto' : '')}
+	style={handleOverflow ? 'scrollbar-gutter: stable both-edges;' : ''}
+	{id}
+>
 	<div class={twMerge('max-w-7xl mx-auto px-4 sm:px-6 md:px-8', clazz)} bind:clientWidth={width}
 		>{@render children?.({ width })}</div
 	>

package/package/components/CenteredPage.svelte.d.ts

@@ -1,8 +1,11 @@
 interface Props {
     class?: string;
+    id?: string;
     children?: import('svelte').Snippet<[{
         width: number;
     }]>;
+    wrapperClasses?: string;
+    handleOverflow?: boolean;
 }
 declare const CenteredPage: import("svelte").Component<Props, {}, "">;
 type CenteredPage = ReturnType<typeof CenteredPage>;

package/package/components/ChangeInstanceUsernameInner.svelte

@@ -29,7 +29,7 @@ const dispatch = createEventDispatcher();
 async function renameUser() {
     loading = true;
     try {
-        const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? false;
+        const automateUsernameCreation = (await SettingService.getGlobal({ key: 'automate_username_creation' })) ?? true;
         if (!automateUsernameCreation) {
             sendUserToast('Modifying the username is only possible when the creation of usernames is automated and defined at instance level..');
             return;