windmill-components 1.444.1 → 1.447.4

package/package/components/triggers/NatsTriggerEditorInner.svelte

@@ -0,0 +1,239 @@
+<script>import { Alert, Button } from '../common';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import Path from '../Path.svelte';
+import Required from '../Required.svelte';
+import ScriptPicker from '../ScriptPicker.svelte';
+import { NatsTriggerService } from '../../gen';
+import { usedTriggerKinds, userStore, workspaceStore } from '../../stores';
+import { canWrite, emptyString, sendUserToast } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import Section from '../Section.svelte';
+import { Loader2, Save } from 'lucide-svelte';
+import Label from '../Label.svelte';
+import Toggle from '../Toggle.svelte';
+import NatsTriggersConfigSection from './NatsTriggersConfigSection.svelte';
+let drawer;
+let is_flow = false;
+let initialPath = '';
+let edit = true;
+let itemKind = 'script';
+let script_path = '';
+let initialScriptPath = '';
+let fixedScriptPath = '';
+let path = '';
+let pathError = '';
+let enabled = false;
+let dirtyPath = false;
+let can_write = true;
+let drawerLoading = true;
+let defaultValues = undefined;
+let args = {};
+const dispatch = createEventDispatcher();
+$: is_flow = itemKind === 'flow';
+export async function openEdit(ePath, isFlow) {
+    drawerLoading = true;
+    try {
+        drawer?.openDrawer();
+        initialPath = ePath;
+        itemKind = isFlow ? 'flow' : 'script';
+        edit = true;
+        dirtyPath = false;
+        await loadTrigger();
+    }
+    catch (err) {
+        sendUserToast(`Could not load nats trigger: ${err}`, true);
+    }
+    finally {
+        drawerLoading = false;
+    }
+}
+export async function openNew(nis_flow, fixedScriptPath_, nDefaultValues) {
+    drawerLoading = true;
+    try {
+        drawer?.openDrawer();
+        is_flow = nis_flow;
+        edit = false;
+        itemKind = nis_flow ? 'flow' : 'script';
+        args.nats_resource_path = nDefaultValues?.nats_resource_path ?? '';
+        args.subjects = nDefaultValues?.subjects ?? [''];
+        args.use_jetstream = nDefaultValues?.use_jetstream ?? false;
+        args.stream_name = args.use_jetstream ? nDefaultValues?.stream_name ?? '' : undefined;
+        args.consumer_name = args.use_jetstream ? nDefaultValues?.consumer_name ?? '' : undefined;
+        initialScriptPath = '';
+        fixedScriptPath = fixedScriptPath_ ?? '';
+        script_path = fixedScriptPath;
+        path = '';
+        initialPath = '';
+        dirtyPath = false;
+        defaultValues = nDefaultValues;
+    }
+    finally {
+        drawerLoading = false;
+    }
+}
+async function loadTrigger() {
+    const s = await NatsTriggerService.getNatsTrigger({
+        workspace: $workspaceStore,
+        path: initialPath
+    });
+    script_path = s.script_path;
+    initialScriptPath = s.script_path;
+    is_flow = s.is_flow;
+    path = s.path;
+    args.nats_resource_path = s.nats_resource_path;
+    args.stream_name = s.stream_name;
+    args.consumer_name = s.consumer_name;
+    args.subjects = s.subjects;
+    args.use_jetstream = s.use_jetstream;
+    enabled = s.enabled;
+    can_write = canWrite(s.path, s.extra_perms, $userStore);
+}
+async function updateTrigger() {
+    if (edit) {
+        await NatsTriggerService.updateNatsTrigger({
+            workspace: $workspaceStore,
+            path: initialPath,
+            requestBody: {
+                path,
+                script_path,
+                is_flow,
+                nats_resource_path: args.nats_resource_path,
+                stream_name: args.stream_name,
+                consumer_name: args.consumer_name,
+                subjects: args.subjects,
+                use_jetstream: args.use_jetstream
+            }
+        });
+        sendUserToast(`Nats trigger ${path} updated`);
+    }
+    else {
+        await NatsTriggerService.createNatsTrigger({
+            workspace: $workspaceStore,
+            requestBody: {
+                path,
+                script_path,
+                is_flow,
+                enabled: true,
+                nats_resource_path: args.nats_resource_path,
+                stream_name: args.stream_name,
+                consumer_name: args.consumer_name,
+                subjects: args.subjects,
+                use_jetstream: args.use_jetstream
+            }
+        });
+        sendUserToast(`Nats trigger ${path} created`);
+    }
+    if (!$usedTriggerKinds.includes('nats')) {
+        $usedTriggerKinds = [...$usedTriggerKinds, 'nats'];
+    }
+    dispatch('update');
+    drawer.closeDrawer();
+}
+function useDefaultValues() {
+    if (args.nats_resource_path && args.nats_resource_path != '') {
+        return false;
+    }
+    if (!defaultValues) {
+        return false;
+    }
+    return (defaultValues.servers &&
+        defaultValues.servers.length > 0 &&
+        defaultValues.servers.some((broker) => broker.trim() !== ''));
+}
+let isValid = false;
+</script>
+
+<Drawer size="800px" bind:this={drawer}>
+	<DrawerContent
+		title={edit
+			? can_write
+				? `Edit NATS trigger ${initialPath}`
+				: `NATS trigger ${initialPath}`
+			: 'New NATS trigger'}
+		on:close={drawer.closeDrawer}
+	>
+		<svelte:fragment slot="actions">
+			{#if !drawerLoading}
+				{#if edit}
+					<div class="mr-8 center-center -mt-1">
+						<Toggle
+							disabled={!can_write}
+							checked={enabled}
+							options={{ right: 'enable', left: 'disable' }}
+							on:change={async (e) => {
+								await NatsTriggerService.setNatsTriggerEnabled({
+									path: initialPath,
+									workspace: $workspaceStore ?? '',
+									requestBody: { enabled: e.detail }
+								})
+								sendUserToast(`${e.detail ? 'enabled' : 'disabled'} NATS trigger ${initialPath}`)
+							}}
+						/>
+					</div>
+				{/if}
+				{#if can_write}
+					<Button
+						startIcon={{ icon: Save }}
+						disabled={pathError != '' || emptyString(script_path) || !can_write || !isValid}
+						on:click={updateTrigger}
+					>
+						Save
+					</Button>
+				{/if}
+			{/if}
+		</svelte:fragment>
+		{#if drawerLoading}
+			<Loader2 class="animate-spin" />
+		{:else}
+			<Alert title="Info" type="info">
+				{#if edit}
+					Changes can take up to 30 seconds to take effect.
+				{:else}
+					NATS consumers can take up to 30 seconds to start.
+				{/if}
+			</Alert>
+			<div class="flex flex-col gap-12 mt-6">
+				<div class="flex flex-col gap-4">
+					<Label label="Path">
+						<Path
+							bind:dirty={dirtyPath}
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							checkInitialPathExistence={!edit}
+							namePlaceholder="nats_trigger"
+							kind="nats_trigger"
+							disabled={!can_write}
+						/>
+					</Label>
+				</div>
+
+				<NatsTriggersConfigSection
+					{path}
+					bind:args
+					bind:isValid
+					defaultValues={useDefaultValues() ? defaultValues : undefined}
+				/>
+
+				<Section label="Runnable">
+					<p class="text-xs mb-1 text-tertiary">
+						Pick a script or flow to be triggered<Required required={true} />
+					</p>
+					<div class="flex flex-row mb-2">
+						<ScriptPicker
+							disabled={fixedScriptPath != '' || !can_write}
+							initialPath={fixedScriptPath || initialScriptPath}
+							kinds={['script']}
+							allowFlow={true}
+							bind:itemKind
+							bind:scriptPath={script_path}
+							allowRefresh={can_write}
+							allowEdit={!$userStore?.operator}
+						/>
+					</div>
+				</Section>
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>

package/package/components/triggers/NatsTriggerEditorInner.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        openEdit?: ((ePath: string, isFlow: boolean) => Promise<void>) | undefined;
+        openNew?: ((nis_flow: boolean, fixedScriptPath_?: string, nDefaultValues?: Record<string, any>) => Promise<void>) | undefined;
+    };
+    events: {
+        update: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NatsTriggerEditorInnerProps = typeof __propDef.props;
+export type NatsTriggerEditorInnerEvents = typeof __propDef.events;
+export type NatsTriggerEditorInnerSlots = typeof __propDef.slots;
+export default class NatsTriggerEditorInner extends SvelteComponent<NatsTriggerEditorInnerProps, NatsTriggerEditorInnerEvents, NatsTriggerEditorInnerSlots> {
+    get openEdit(): (ePath: string, isFlow: boolean) => Promise<void>;
+    get openNew(): (nis_flow: boolean, fixedScriptPath_?: string | undefined, nDefaultValues?: Record<string, any> | undefined) => Promise<void>;
+}
+export {};

package/package/components/triggers/NatsTriggersConfigSection.svelte

@@ -0,0 +1,276 @@
+<script>import ResourcePicker from '../ResourcePicker.svelte';
+import { Boxes } from 'lucide-svelte';
+import Section from '../Section.svelte';
+import Subsection from '../Subsection.svelte';
+import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
+import SchemaForm from '../SchemaForm.svelte';
+import CaptureSection, {} from './CaptureSection.svelte';
+import CaptureTable from './CaptureTable.svelte';
+import { workspaceStore } from '../../stores';
+export let defaultValues = undefined;
+export let headless = false;
+export let args = {};
+export let staticInputDisabled = true;
+export let showCapture = false;
+export let captureInfo = undefined;
+export let captureTable = undefined;
+export let isValid = false;
+export let path;
+let selected = staticInputDisabled ? 'resource' : 'static';
+const connnectionSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    type: 'object',
+    properties: {
+        servers: {
+            type: 'array',
+            items: {
+                type: 'string'
+            },
+            title: 'Servers',
+            default: ['']
+        },
+        require_tls: {
+            type: 'boolean',
+            title: 'Require TLS',
+            default: false
+        },
+        auth: {
+            type: 'object',
+            title: 'Authentication',
+            default: {
+                label: 'NO_AUTH'
+            },
+            oneOf: [
+                {
+                    type: 'object',
+                    title: 'NO_AUTH',
+                    properties: {
+                        label: {
+                            enum: ['NO_AUTH'],
+                            type: 'string'
+                        }
+                    }
+                },
+                {
+                    type: 'object',
+                    order: ['token'],
+                    title: 'TOKEN',
+                    required: ['token'],
+                    properties: {
+                        label: {
+                            enum: ['TOKEN'],
+                            type: 'string'
+                        },
+                        token: {
+                            type: 'string',
+                            password: true
+                        }
+                    }
+                },
+                {
+                    type: 'object',
+                    title: 'USER_PASSWORD',
+                    required: ['user', 'password'],
+                    properties: {
+                        label: {
+                            enum: ['USER_PASSWORD'],
+                            type: 'string'
+                        },
+                        user: {
+                            type: 'string'
+                        },
+                        password: {
+                            type: 'string',
+                            password: true
+                        }
+                    }
+                },
+                {
+                    type: 'object',
+                    order: ['nkey'],
+                    title: 'NKEY',
+                    required: ['nkey'],
+                    properties: {
+                        label: {
+                            enum: ['NKEY'],
+                            type: 'string'
+                        },
+                        seed: {
+                            type: 'string',
+                            password: true
+                        }
+                    }
+                },
+                {
+                    type: 'object',
+                    title: 'JWT',
+                    required: ['jwt', 'seed'],
+                    properties: {
+                        label: {
+                            enum: ['JWT'],
+                            type: 'string'
+                        },
+                        jwt: {
+                            type: 'string',
+                            password: true
+                        },
+                        seed: {
+                            type: 'string',
+                            password: true
+                        }
+                    }
+                }
+            ]
+        }
+    },
+    required: ['servers', 'auth', 'require_tls']
+};
+const argsSchema = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
+    type: 'object',
+    properties: {
+        subjects: {
+            type: 'array',
+            items: {
+                type: 'string'
+            },
+            nullable: false,
+            title: 'Subjects',
+            default: [''],
+            description: 'The subjects to listen to. If not using JetStream, only one subject is supported.'
+        },
+        use_jetstream: {
+            type: 'boolean',
+            title: 'Use JetStream',
+            default: false,
+            description: 'Whether to use JetStream (durable push-consumer)'
+        },
+        stream_name: {
+            type: 'string',
+            title: 'Stream name',
+            pattern: '^((\\$var:[\\w-\\/]+)|[a-zA-Z0-9-_]+)$',
+            customErrorMessage: 'Invalid stream name',
+            showExpr: 'fields.use_jetstream',
+            description: 'Required if using JetStream. If the stream already exists, it will be updated to include the specified subjects if not already present. Otherwise, it will be created.'
+        },
+        consumer_name: {
+            type: 'string',
+            title: 'Consumer name',
+            pattern: '^((\\$var:[\\w-\\/]+)|[a-zA-Z0-9-_]+)$',
+            customErrorMessage: 'Invalid consumer name',
+            showExpr: 'fields.use_jetstream',
+            description: 'Required is using JetStream. If a consumer with the same name already exists, it will be overwritten. It is also used as the deliver subject.'
+        }
+    },
+    required: ['subjects', 'use_jetstream', 'stream_name', 'consumer_name']
+};
+let connectionValid = false;
+let otherArgsValid = false;
+let globalError = '';
+$: globalError =
+    !args.use_jetstream && args.subjects && args.subjects.length > 1
+        ? 'Only one subject is supported if not using JetStream.'
+        : '';
+$: isValid =
+    (selected === 'resource'
+        ? !!args.nats_resource_path
+        : connectionValid &&
+            args.servers &&
+            args.servers.length > 0 &&
+            args.servers.every((b) => b.length > 0) &&
+            args.require_tls !== undefined &&
+            args.require_tls !== null) &&
+        otherArgsValid &&
+        args.subjects &&
+        args.subjects.length > 0 &&
+        args.subjects.every((b) => /^[a-zA-Z0-9-_.*>]+$/.test(b)) &&
+        globalError === '';
+$: usingResource = !!args.nats_resource_path;
+$: usingResource && (selected = 'resource');
+function setStreamAndConsumerNames() {
+    if (!args.stream_name) {
+        args.stream_name = `windmill_stream-${$workspaceStore}-${path.replaceAll('/', '__')}`;
+    }
+    if (!args.consumer_name) {
+        args.consumer_name = `windmill_consumer-${$workspaceStore}-${path.replaceAll('/', '__')}`;
+    }
+}
+$: useJetStream = args.use_jetstream;
+$: useJetStream && setStreamAndConsumerNames();
+</script>
+
+<div>
+	{#if showCapture && captureInfo}
+		<CaptureSection
+			captureType="nats"
+			disabled={!isValid}
+			{captureInfo}
+			on:captureToggle
+			on:applyArgs
+			on:updateSchema
+			on:addPreprocessor
+			bind:captureTable
+		/>
+	{/if}
+	<Section label="NATS" {headless}>
+		<div class="flex flex-col w-full gap-4">
+			<div class="block grow w-full">
+				<Subsection label="Connection">
+					<svelte:fragment slot="header">
+						{#if !staticInputDisabled}
+							<ToggleButtonGroup
+								bind:selected
+								class="h-full"
+								on:selected={(ev) => {
+									if (ev.detail === 'static') {
+										delete args.nats_resource_path
+										args.require_tls = false
+										args.servers = ['']
+										args.auth = {
+											label: 'NO_AUTH'
+										}
+									} else {
+										delete args.servers
+										delete args.auth
+										delete args.require_tls
+									}
+								}}
+							>
+								<ToggleButton value="static" label="Static" small={true} />
+								<ToggleButton value="resource" label="Resource" icon={Boxes} small={true} />
+							</ToggleButtonGroup>
+						{/if}
+					</svelte:fragment>
+
+					{#if selected === 'resource'}
+						<ResourcePicker
+							resourceType="nats"
+							bind:value={args.nats_resource_path}
+							{defaultValues}
+						/>
+					{:else}
+						<SchemaForm
+							schema={connnectionSchema}
+							bind:args
+							bind:isValid={connectionValid}
+							lightHeader={true}
+						/>
+					{/if}
+				</Subsection>
+			</div>
+
+			<div class="block grow w-full">
+				<Subsection headless={true}>
+					<SchemaForm
+						schema={argsSchema}
+						bind:args
+						bind:isValid={otherArgsValid}
+						lightHeader={true}
+					/>
+				</Subsection>
+				<span class="text-xs text-red-500">{globalError}</span>
+			</div>
+		</div>
+	</Section>
+</div>

package/package/components/triggers/NatsTriggersConfigSection.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+import { type CaptureInfo } from './CaptureSection.svelte';
+import CaptureTable from './CaptureTable.svelte';
+declare const __propDef: {
+    props: {
+        defaultValues?: Record<string, any> | undefined;
+        headless?: boolean | undefined;
+        args?: Record<string, any> | undefined;
+        staticInputDisabled?: boolean | undefined;
+        showCapture?: boolean | undefined;
+        captureInfo?: CaptureInfo | undefined;
+        captureTable?: CaptureTable | undefined;
+        isValid?: boolean | undefined;
+        path: string;
+    };
+    events: {
+        captureToggle: CustomEvent<undefined>;
+        applyArgs: CustomEvent<{
+            kind: "main" | "preprocessor";
+            args: Record<string, any> | undefined;
+        }>;
+        updateSchema: CustomEvent<{
+            payloadData: Record<string, any>;
+            redirect: boolean;
+        }>;
+        addPreprocessor: CustomEvent<null>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NatsTriggersConfigSectionProps = typeof __propDef.props;
+export type NatsTriggersConfigSectionEvents = typeof __propDef.events;
+export type NatsTriggersConfigSectionSlots = typeof __propDef.slots;
+export default class NatsTriggersConfigSection extends SvelteComponent<NatsTriggersConfigSectionProps, NatsTriggersConfigSectionEvents, NatsTriggersConfigSectionSlots> {
+}
+export {};

package/package/components/triggers/NatsTriggersPanel.svelte

@@ -0,0 +1,126 @@
+<script>import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
+import { NatsTriggerService } from '../../gen';
+import { canWrite } from '../../utils';
+import Alert from '../common/alert/Alert.svelte';
+import { getContext, onMount } from 'svelte';
+import NatsTriggerEditor from './NatsTriggerEditor.svelte';
+import { isCloudHosted } from '../../cloud';
+import TriggersEditorSection from './TriggersEditorSection.svelte';
+import Section from '../Section.svelte';
+import Skeleton from '../common/skeleton/Skeleton.svelte';
+import Description from '../Description.svelte';
+export let isFlow;
+export let path;
+export let newItem = false;
+export let isEditor = false;
+export let canHavePreprocessor = false;
+export let hasPreprocessor = false;
+let natsTriggerEditor;
+$: path && loadTriggers();
+const { triggersCount, selectedTrigger, defaultValues } = getContext('TriggerContext');
+onMount(() => {
+    if (defaultValues &&
+        $selectedTrigger === 'nats' &&
+        Object.keys($defaultValues ?? {}).length > 0) {
+        natsTriggerEditor.openNew(isFlow, path, $defaultValues);
+        defaultValues.set(undefined);
+    }
+});
+let natsTriggers = undefined;
+export async function loadTriggers() {
+    try {
+        natsTriggers = (await NatsTriggerService.listNatsTriggers({
+            workspace: $workspaceStore ?? '',
+            path,
+            isFlow
+        })).map((x) => {
+            return { canWrite: canWrite(x.path, x.extra_perms, $userStore), ...x };
+        });
+        $triggersCount = { ...($triggersCount ?? {}), nats_count: natsTriggers?.length };
+    }
+    catch (e) {
+        console.error('impossible to load nats triggers', e);
+    }
+}
+let data = {
+    natsTriggers: [],
+    newItem
+};
+function saveTrigger(path, args) {
+    natsTriggerEditor?.openNew(isFlow, path, args);
+}
+</script>
+
+<NatsTriggerEditor
+	on:update={() => {
+		loadTriggers()
+	}}
+	bind:this={natsTriggerEditor}
+/>
+
+{#if !$enterpriseLicense}
+	<Alert title="EE Only" type="warning" size="xs">
+		Nats triggers are an enterprise only feature.
+	</Alert>
+{:else if isCloudHosted()}
+	<Alert title="Not compatible with multi-tenant cloud" type="warning" size="xs">
+		Nats triggers are disabled in the multi-tenant cloud.
+	</Alert>
+{:else}
+	<div class="flex flex-col gap-4">
+		<Description link="https://www.windmill.dev/docs/core_concepts/nats_triggers">
+			NATS triggers execute scripts and flows in response to messages published to NATS subjects.
+		</Description>
+		<TriggersEditorSection
+			on:saveTrigger={(e) => {
+				saveTrigger(path, e.detail.config)
+			}}
+			on:applyArgs
+			on:addPreprocessor
+			cloudDisabled={false}
+			triggerType="nats"
+			{isFlow}
+			{data}
+			{path}
+			{isEditor}
+			{canHavePreprocessor}
+			{hasPreprocessor}
+			{newItem}
+		/>
+
+		{#if !newItem}
+			{#if natsTriggers}
+				<Section label="NATS Triggers">
+					{#if natsTriggers.length == 0}
+						<div class="text-xs text-secondary text-center"> No nats triggers </div>
+					{:else}
+						<div class="flex flex-col divide-y pt-2">
+							{#each natsTriggers as natsTrigger (natsTrigger.path)}
+								<div class="grid grid-cols-5 text-2xs items-center py-2">
+									<div class="col-span-2 truncate">{natsTrigger.path}</div>
+									<div class="col-span-2 truncate">
+										{natsTrigger.nats_resource_path}
+									</div>
+									<div class="flex justify-end">
+										<button
+											on:click={() => natsTriggerEditor?.openEdit(natsTrigger.path, isFlow)}
+											class="px-2"
+										>
+											{#if natsTrigger.canWrite}
+												Edit
+											{:else}
+												View
+											{/if}
+										</button>
+									</div>
+								</div>
+							{/each}
+						</div>
+					{/if}
+				</Section>
+			{:else}
+				<Skeleton layout={[[8]]} />
+			{/if}
+		{/if}
+	</div>
+{/if}