windmill-components 1.394.8 → 1.405.5

package/package/components/QueueMetricsDrawer.svelte

@@ -1,13 +1,378 @@
-<script>import { Drawer, DrawerContent } from './common';
+<script>import { onMount } from 'svelte';
+import { Drawer, DrawerContent, Button } from './common';
 import QueueMetricsDrawerInner from './QueueMetricsDrawerInner.svelte';
+import { ConfigService } from '../gen';
+import Section from './Section.svelte';
+import { sendUserToast } from '../toast';
+import { Pencil, Trash, Check, PlusCircle, SaveIcon } from 'lucide-svelte';
+import Tooltip from './Tooltip.svelte';
+import { enterpriseLicense } from '../stores';
 let drawer;
 export function openDrawer() {
     drawer?.openDrawer();
 }
+let alerts = [];
+let configName = 'alert__job_queue_waiting';
+let originalAlerts = [];
+let newTag = '';
+let editingIndex = -1;
+let changesMade = false;
+let removedAlerts = [];
+let stagedNewAlert = false;
+let workerTags = [];
+let filteredTags = [];
+$: removedAlerts;
+onMount(async () => {
+    await fetchConfig();
+    workerTags = await fetchWorkerTags();
+});
+async function fetchConfig() {
+    try {
+        const response = (await ConfigService.getConfig({ name: configName }));
+        alerts = response.alerts || [];
+        originalAlerts = JSON.parse(JSON.stringify(alerts));
+    }
+    catch (error) {
+        console.error('Failed to fetch config:', error);
+    }
+}
+async function fetchWorkerTags() {
+    try {
+        const response = await ConfigService.listConfigs();
+        const workerTagsSet = new Set();
+        response.forEach((config) => {
+            if (config.name.startsWith('worker__') && Array.isArray(config.config?.worker_tags)) {
+                config?.config?.worker_tags.forEach((tag) => workerTagsSet.add(tag));
+            }
+        });
+        return Array.from(workerTagsSet);
+    }
+    catch (error) {
+        console.error('Failed to fetch worker tags:', error);
+        return [];
+    }
+}
+function startEditing(index) {
+    editingIndex = index;
+    updateWorkerTags();
+}
+function saveAlert(index) {
+    const newAlert = alerts[index];
+    if (newAlert.tags_to_monitor.length === 0) {
+        sendUserToast('Please add at least one tag before saving.', true);
+        return;
+    }
+    if (newAlert.jobs_num_threshold <= 0 ||
+        newAlert.alert_cooldown_seconds <= 0 ||
+        newAlert.alert_time_threshold_seconds <= 0) {
+        sendUserToast('All numeric values must be strictly positive.', true);
+        return;
+    }
+    const alertExists = originalAlerts.some((alert) => originalAlerts.indexOf(alert) !== index &&
+        JSON.stringify(alert.tags_to_monitor.sort()) ===
+            JSON.stringify(newAlert.tags_to_monitor.sort()));
+    if (alertExists) {
+        sendUserToast('An identical alert already exists.', true);
+        return;
+    }
+    editingIndex = -1;
+    changesMade = JSON.stringify(alerts) !== JSON.stringify(originalAlerts);
+    stagedNewAlert = false;
+}
+function stageDeleteAlert(index) {
+    const alert = alerts[index];
+    removedAlerts = [...removedAlerts, alert];
+    changesMade =
+        removedAlerts.length > 0 || JSON.stringify(alerts) !== JSON.stringify(originalAlerts);
+}
+function filterTags(event) {
+    const input = event.target.value;
+    filteredTags = workerTags.filter((tag) => tag.toLowerCase().includes(input.toLowerCase()));
+}
+function addTag(alertIndex, tag) {
+    if (workerTags.includes(tag) && !alerts[alertIndex].tags_to_monitor.includes(tag)) {
+        alerts[alertIndex].tags_to_monitor = [...alerts[alertIndex].tags_to_monitor, tag];
+    }
+    newTag = '';
+    filteredTags = [];
+}
+function removeTag(alertIndex, tag) {
+    alerts[alertIndex].tags_to_monitor = alerts[alertIndex].tags_to_monitor.filter((t) => t !== tag);
+}
+async function applyConfig() {
+    if (stagedNewAlert) {
+        sendUserToast('New alert staged. Please save or cancel the changes before applying.', true);
+        return;
+    }
+    try {
+        await ConfigService.updateConfig({ name: configName, requestBody: { alerts } });
+        sendUserToast('Configuration updated successfully');
+        alerts = alerts.filter((alert) => !removedAlerts.includes(alert));
+        originalAlerts = JSON.parse(JSON.stringify(alerts));
+        removedAlerts = [];
+        changesMade = false;
+        stagedNewAlert = false;
+    }
+    catch (error) {
+        console.error('Failed to update config:', error);
+    }
+}
+async function cancelChanges() {
+    alerts = [...alerts, ...removedAlerts];
+    alerts = JSON.parse(JSON.stringify(originalAlerts));
+    removedAlerts = [];
+    editingIndex = -1;
+    changesMade = false;
+    stagedNewAlert = false;
+}
+function addNewAlert() {
+    // alert already being added
+    if (stagedNewAlert) {
+        return;
+    }
+    const newAlert = {
+        name: 'New Alert',
+        tags_to_monitor: [],
+        jobs_num_threshold: 3,
+        alert_cooldown_seconds: 600,
+        alert_time_threshold_seconds: 30
+    };
+    alerts = [...alerts, newAlert];
+    editingIndex = alerts.length - 1;
+    stagedNewAlert = true;
+    updateWorkerTags();
+}
+async function updateWorkerTags() {
+    workerTags = await fetchWorkerTags();
+}
+function addAllTags(alertIndex) {
+    alerts[alertIndex].tags_to_monitor = [
+        ...new Set([...alerts[alertIndex].tags_to_monitor, ...workerTags])
+    ];
+    alerts = alerts; // Trigger reactivity
+}
 </script>
 
-<Drawer bind:this={drawer}>
+<Drawer bind:this={drawer} size="800px">
 	<DrawerContent title="Queue Metrics" on:close={drawer.closeDrawer}>
-		<QueueMetricsDrawerInner />
+		<Section
+			label="Queue Alert Settings"
+			collapsable={true}
+			tooltip="Manage queue alerts for monitoring queue metrics. These alerts will trigger a critical alert notification if the queue metrics are met."
+			eeOnly={true}
+		>
+			{#if $enterpriseLicense}
+				{#if changesMade}
+					<div class="text-red-600 text-xs whitespace-nowrap pb-2">Non applied changes</div>
+					<div class="flex gap-2 pb-2">
+						<Button color="blue" size="xs" on:click={applyConfig}>
+							<SaveIcon size={16} /> Apply Config
+						</Button>
+						<Button color="light" size="xs" on:click={cancelChanges}>Cancel</Button>
+					</div>
+				{/if}
+
+				{#if alerts.length > 0}
+					<div>
+						<form on:submit|preventDefault>
+							<table class="w-full border-collapse mb-2 text-xs table-auto">
+								<thead class="bg-gray-200 text-left text-xs">
+									<tr>
+										<th class="p-2 min-w-[120px]">
+											Name
+											<Tooltip
+												markdownTooltip="The name of the alert. This will be used in the crticial alert notification and help identify the alert."
+											/>
+										</th>
+										<th class="p-2 w-full">
+											Queue Tags to Monitor
+											<Tooltip markdownTooltip="Queue tags to monitor for this alert." />
+										</th>
+										<th class="p-2 min-w-[65px]">
+											Jobs
+											<Tooltip
+												markdownTooltip="Number of jobs threshold. An alert will be triggerd if more than this number of jobs are in the queue for at least the time threshold."
+											/>
+										</th>
+										<th class="p-2 min-w-[115px]">
+											Cooldown (s)
+											<Tooltip
+												markdownTooltip="Cooldown period in seconds. The cooldown period is the time after an alert is triggered that no new alerts will be triggered."
+											/>
+										</th>
+										<th class="p-2 min-w-[105px]">
+											Time (s)
+											<Tooltip
+												markdownTooltip="Time threshold in seconds. An alert will be triggered if more than 'n jobs threshold' have been in the queue for at least this amount of time."
+											/>
+										</th>
+										<th class="p-2 min-w-[100px]"> Actions </th>
+									</tr>
+								</thead>
+								<tbody>
+									{#each alerts as alert, index}
+										<tr
+											class:staged-for-deletion={removedAlerts.includes(alert)}
+											class:non-interactable={removedAlerts.includes(alert)}
+										>
+											<td class="border p-2">
+												{#if editingIndex === index}
+													<input type="text" bind:value={alert.name} class="w-full p-1" />
+												{:else}
+													{alert.name}
+												{/if}
+											</td>
+											<td class="border p-2">
+												{#if editingIndex === index}
+													<div class="flex flex-wrap gap-1 mb-2">
+														{#each alert.tags_to_monitor as tag}
+															<span class="inline-block bg-blue-100 rounded px-2 py-1 text-xs">
+																{tag}
+																<button
+																	on:click={() => removeTag(index, tag)}
+																	aria-label="Remove Tag"
+																	class="ml-1 text-black text-xs">x</button
+																>
+															</span>
+														{/each}
+													</div>
+													<div class="flex items-center">
+														<input
+															type="text"
+															bind:value={newTag}
+															placeholder="Add tag"
+															on:input={(e) => filterTags(e)}
+															class="p-1 flex-grow mr-1"
+														/>
+														<button on:click={() => addTag(index, newTag)} aria-label="Add Tag">
+															<PlusCircle size={16} />
+														</button>
+													</div>
+													<!-- Add the new "Add All Tags" button here -->
+													<button
+														on:click={() => addAllTags(index)}
+														class="text-xs hover:bg-gray-200 rounded px-2 py-1 mt-1"
+													>
+														Add All Tags
+													</button>
+													{#if filteredTags.length > 0}
+														<ul class="autocomplete-list">
+															{#each filteredTags as tag}
+																<li>
+																	<button type="button" on:click={() => addTag(index, tag)}
+																		>{tag}</button
+																	>
+																</li>
+															{/each}
+														</ul>
+													{/if}
+												{:else}
+													<div class="flex flex-wrap gap-1">
+														{#each alert.tags_to_monitor as tag}
+															<span class="inline-block bg-blue-100 rounded px-2 py-1 text-xs"
+																>{tag}</span
+															>
+														{/each}
+													</div>
+												{/if}
+											</td>
+											<td class="border p-2">
+												{#if editingIndex === index}
+													<input
+														type="number"
+														bind:value={alert.jobs_num_threshold}
+														class="w-full p-1"
+													/>
+												{:else}
+													{alert.jobs_num_threshold}
+												{/if}
+											</td>
+											<td class="border p-2">
+												{#if editingIndex === index}
+													<input
+														type="number"
+														bind:value={alert.alert_cooldown_seconds}
+														class="w-full p-1"
+													/>
+												{:else}
+													{alert.alert_cooldown_seconds}
+												{/if}
+											</td>
+											<td class="border p-2">
+												{#if editingIndex === index}
+													<input
+														type="number"
+														bind:value={alert.alert_time_threshold_seconds}
+														class="w-full p-1"
+													/>
+												{:else}
+													{alert.alert_time_threshold_seconds}
+												{/if}
+											</td>
+											<td class="border p-2">
+												<div class="flex gap-3 justify-center items-center">
+													{#if editingIndex === index}
+														<button on:click={() => saveAlert(index)} aria-label="Save">
+															<Check size={16} />
+														</button>
+													{:else}
+														<button on:click={() => startEditing(index)} aria-label="Edit">
+															<Pencil size={16} />
+														</button>
+														<button on:click={() => stageDeleteAlert(index)} aria-label="Delete">
+															<Trash size={16} />
+														</button>
+													{/if}
+												</div>
+											</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</form>
+					</div>
+				{/if}
+
+				<!-- Button to Add New Alert at the Bottom of the Table -->
+				<div class="flex">
+					<Button color="blue" size="xs" on:click={addNewAlert}>
+						<PlusCircle size={16} />
+						Add New Alert
+					</Button>
+				</div>
+			{:else}
+				<p class="text-gray-600 text-sm">
+					Queue Metric Alerts are an enterprise feature allowing you to monitor queues for waiting jobs. Please upgrade to access this functionality. 
+					<a href="https://www.windmill.dev/docs/misc/plans_details" target="_blank" class="text-blue-500 underline">Learn more about our plans.</a>
+				</p>
+			{/if}
+		</Section>
+		<div class="p-8">
+			<QueueMetricsDrawerInner />
+		</div>
 	</DrawerContent>
 </Drawer>
+
+<style>
+	.staged-for-deletion {
+		background-color: #f8d7da; /* Light red background for staged deletion */
+	}
+	.non-interactable {
+		pointer-events: none; /* Disable pointer events */
+		opacity: 0.5; /* Reduce opacity */
+	}
+	.autocomplete-list {
+		border: 1px solid #ccc;
+		max-height: 150px;
+		overflow-y: auto;
+		background-color: white;
+		position: absolute;
+		z-index: 1000;
+	}
+	.autocomplete-list li {
+		padding: 8px;
+		cursor: pointer;
+	}
+	.autocomplete-list li:hover {
+		background-color: #f0f0f0;
+	}</style>

package/package/components/QueueMetricsDrawer.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
         openDrawer?: (() => void) | undefined;
     };
     events: {
+        submit: SubmitEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/ResourceEditor.svelte

@@ -73,7 +73,7 @@ export async function editResource() {
         dispatch('refresh', path);
     }
     else {
-        throw Error('Cannot edit undefined resourceToEdit');
+        throw Error('Cannot edit undefined resource');
     }
 }
 export async function createResource() {
@@ -95,6 +95,9 @@ async function loadResourceType() {
             if (resourceType.schema) {
                 resourceSchema = resourceType.schema;
             }
+            if (resourceTypeInfo?.format_extension) {
+                textFileContent = args.content;
+            }
         }
         catch (err) {
             resourceSchema = undefined;
@@ -121,6 +124,8 @@ function updateArgsFromLinkedVars() {
         args[k] = `$var:${path}`;
     });
 }
+let textFileContent = '';
+$: textFileContent && parseTextFileContent();
 function switchTab(asJson) {
     viewJsonSchema = asJson;
     if (asJson) {
@@ -128,8 +133,16 @@ function switchTab(asJson) {
     }
     else {
         parseJson();
+        if (resourceTypeInfo?.format_extension) {
+            textFileContent = args.content;
+        }
     }
 }
+function parseTextFileContent() {
+    args = {
+        content: textFileContent
+    };
+}
 </script>
 
 <div>
@@ -200,15 +213,30 @@ function switchTab(asJson) {
 			{#if loadingSchema}
 				<Skeleton layout={[[4]]} />
 			{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
-				<SchemaForm
-					onlyMaskPassword
-					noDelete
-					disabled={!can_write}
-					compact
-					schema={resourceSchema}
-					bind:args
-					bind:isValid
-				/>
+				{#if resourceTypeInfo?.format_extension}
+					<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
+						File content ({resourceTypeInfo.format_extension})
+					</h5>
+					<div class="h-full w-full border p-1 rounded">
+						<SimpleEditor
+							autoHeight
+							class="editor"
+							lang={resourceTypeInfo.format_extension}
+							bind:code={textFileContent}
+							fixedOverflowWidgets={false}
+						/>
+					</div>
+				{:else}
+					<SchemaForm
+						onlyMaskPassword
+						noDelete
+						disabled={!can_write}
+						compact
+						schema={resourceSchema}
+						bind:args
+						bind:isValid
+					/>
+				{/if}
 			{:else if !can_write}
 				<input type="text" disabled value={rawCode} />
 			{:else}

package/package/components/ResourcePicker.svelte

@@ -101,7 +101,7 @@ let darkMode = false;
 />
 
 <div class="flex flex-col w-full items-start">
-	<div class="flex flex-row gap-x-1 w-full items-center">
+	<div class="flex flex-row w-full items-center">
 		{#if collection?.length > 0}
 			<Select
 				{disabled}
@@ -113,9 +113,11 @@ let darkMode = false;
 					valueSelect = e.detail
 				}}
 				on:clear={() => {
+					initialValue = undefined
 					value = undefined
 					valueType = undefined
 					valueSelect = undefined
+					dispatch('clear')
 				}}
 				items={collection}
 				class="text-clip grow min-w-0"
@@ -128,14 +130,15 @@ let darkMode = false;
 		{:else if !loading}
 			<div class="text-2xs text-tertiary mr-2">0 found</div>
 		{/if}
-
 		{#if !loading}
+			<div class="mx-0.5" />
 			{#if value && value != ''}
 				<Button
 					{disabled}
 					color="light"
-					variant="border"
-					size="xs"
+					variant="contained"
+					size="sm"
+					btnClasses="w-8 px-0.5 py-1.5"
 					on:click={() => resourceEditor?.initEdit?.(value ?? '')}
 					startIcon={{ icon: Pen }}
 					iconOnly
@@ -147,8 +150,9 @@ let darkMode = false;
 					<Button
 						{disabled}
 						color="light"
-						variant="border"
-						size="xs"
+						variant="contained"
+						size="sm"
+						btnClasses="w-8 px-0.5 py-1.5"
 						on:click={() => appConnect?.open?.(rt)}
 						startIcon={{ icon: Plus }}>{rt}</Button
 					>
@@ -158,7 +162,7 @@ let darkMode = false;
 					{disabled}
 					color="light"
 					variant="border"
-					size="xs"
+					size="sm"
 					on:click={() => appConnect?.open?.(resourceType, expressOAuthSetup)}
 					startIcon={{ icon: Plus }}
 					iconOnly={collection?.length > 0}
@@ -170,9 +174,10 @@ let darkMode = false;
 		{/if}
 
 		<Button
-			variant="border"
+			variant="contained"
 			color="light"
-			size="xs"
+			btnClasses="w-8 px-0.5 py-1.5"
+			size="sm"
 			on:click={() => {
 				loadResources(resourceType)
 			}}

package/package/components/ResourcePicker.svelte.d.ts

@@ -13,6 +13,7 @@ declare const __propDef: {
         askNewResource?: (() => Promise<void>) | undefined;
     };
     events: {
+        clear: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/ResultJobLoader.svelte

@@ -59,21 +59,24 @@ export async function runScriptByPath(path, args, callbacks) {
     return abstractRun(() => JobService.runScriptByPath({
         workspace: $workspaceStore,
         path: path,
-        requestBody: args
+        requestBody: args,
+        skipPreprocessor: true
     }), callbacks);
 }
 export async function runScriptByHash(hash, args, callbacks) {
     return abstractRun(() => JobService.runScriptByHash({
         workspace: $workspaceStore,
         hash: hash,
-        requestBody: args
+        requestBody: args,
+        skipPreprocessor: true
     }), callbacks);
 }
 export async function runFlowByPath(path, args, callbacks) {
     return abstractRun(() => JobService.runFlowByPath({
         workspace: $workspaceStore,
         path: path ?? '',
-        requestBody: args
+        requestBody: args,
+        skipPreprocessor: true
     }), callbacks);
 }
 export async function runPreview(path, code, lang, args, tag, callbacks) {

package/package/components/ResultJobLoader.svelte.d.ts

@@ -81,7 +81,7 @@ export default class ResultJobLoader extends SvelteComponent<ResultJobLoaderProp
         cancel: () => void;
         error: (err: Error) => void;
     } | undefined) => Promise<string>;
-    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | "rust", args: Record<string, any>, tag: string | undefined, callbacks?: {
+    get runPreview(): (path: string | undefined, code: string, lang: "python3" | "deno" | "go" | "bash" | "powershell" | "postgresql" | "mysql" | "bigquery" | "snowflake" | "mssql" | "graphql" | "nativets" | "bun" | "php" | "rust" | "ansible", args: Record<string, any>, tag: string | undefined, callbacks?: {
         done: (x: any) => void;
         cancel: () => void;
         error: (err: Error) => void;

package/package/components/RunForm.svelte

@@ -71,7 +71,7 @@ function onArgsChange(args) {
 						<div class="flex items-center gap-2">
 							<span class="text-sm text-tertiary">
 								{#if runnable}
-									Edited <TimeAgo withDate agoOnlyIfRecent date={runnable.created_at || ''} /> by {runnable.created_by ||
+									Edited <TimeAgo agoOnlyIfRecent date={runnable.created_at || ''} /> by {runnable.created_by ||
 										'unknown'}
 								{/if}
 							</span>

package/package/components/SavedInputs.svelte

@@ -333,7 +333,7 @@ async function loadLargeArgs(id, input, allowLarge) {
 									<div
 										class="whitespace-nowrap col-span-3 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
-										<TimeAgo date={i.started_at ?? ''} />
+										<TimeAgo noDate date={i.started_at ?? ''} />
 									</div>
 									<div class="col-span-2">
 										<a
@@ -394,7 +394,7 @@ async function loadLargeArgs(id, input, allowLarge) {
 									<div
 										class="whitespace-nowrap col-span-2 !text-tertiary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
 									>
-										<TimeAgo date={i.created_at ?? ''} />
+										<TimeAgo noDate date={i.created_at ?? ''} />
 									</div>
 									<div class="col-span-1">
 										<a

package/package/components/ScheduleEditorInner.svelte

@@ -737,7 +737,7 @@ $: !showPauseUntil && (paused_until = undefined);
 									bind:handlerPath={errorHandlerPath}
 									customInitialScriptPath={errorHandlerCustomInitialPath}
 									slackToggleText="Alert channel on error"
-									customScriptTemplate="/scripts/add?hub=hub%2F2420%2Fwindmill%2Fschedule_error_handler_template"
+									customScriptTemplate="/scripts/add?hub=hub%2F9081%2Fwindmill%2Fschedule_error_handler_template"
 									bind:customHandlerKind={errorHandleritemKind}
 									bind:handlerExtraArgs={errorHandlerExtraArgs}
 								>
@@ -830,7 +830,7 @@ $: !showPauseUntil && (paused_until = undefined);
 									bind:handlerPath={recoveryHandlerPath}
 									customInitialScriptPath={recoveryHandlerCustomInitialPath}
 									slackToggleText="Alert channel when error recovered"
-									customScriptTemplate="/scripts/add?hub=hub%2F2794%2Fwindmill%2Fschedule_recovery_handler_template"
+									customScriptTemplate="/scripts/add?hub=hub%2F9082%2Fwindmill%2Fschedule_recovery_handler_template"
 									bind:customHandlerKind={recoveryHandlerItemKind}
 									bind:handlerExtraArgs={recoveryHandlerExtraArgs}
 								>

package/package/components/SchemaForm.svelte

@@ -157,6 +157,9 @@ $: fields = items ?? keys.map((x) => ({ id: x, value: x }));
 										extra={schema.properties[argName]}
 										title={schema.properties[argName].title}
 										placeholder={schema.properties[argName].placeholder}
+										disabled={disabledArgs.includes(argName) ||
+											disabled ||
+											schema.properties[argName].disabled}
 									>
 										<svelte:fragment slot="actions">
 											<slot name="actions" />
@@ -213,7 +216,9 @@ $: fields = items ?? keys.map((x) => ({ id: x, value: x }));
 										bind:order={schema.properties[argName].order}
 										nestedRequired={schema.properties[argName]?.required}
 										itemsType={schema.properties[argName].items}
-										disabled={disabledArgs.includes(argName) || disabled}
+										disabled={disabledArgs.includes(argName) ||
+											disabled ||
+											schema.properties[argName].disabled}
 										{compact}
 										{variableEditor}
 										{itemPicker}