windmill-components 1.405.0 → 1.405.5

package/package/components/Portal.svelte.d.ts

@@ -1,10 +1,4 @@
-/**
- * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
- *
- * @param {HTMLElement} el
- * @param {HTMLElement|string} target DOM Element or CSS Selector
- */
-export function portal(el: HTMLElement, target?: HTMLElement | string): {
+export function portal(el: any, options: any): {
     update: (newTarget: any) => Promise<void>;
     destroy: () => void;
 };
@@ -12,6 +6,7 @@ export function portal(el: HTMLElement, target?: HTMLElement | string): {
 /** @typedef {typeof __propDef.events}  PortalEvents */
 /** @typedef {typeof __propDef.slots}  PortalSlots */
 export default class Portal extends SvelteComponent<{
+    name?: any;
     target?: string | HTMLElement | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -25,6 +20,7 @@ export type PortalSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        name?: any;
         target?: string | HTMLElement | undefined;
     };
     events: {

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() {
@@ -214,11 +214,10 @@ function parseTextFileContent() {
 				<Skeleton layout={[[4]]} />
 			{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
 				{#if resourceTypeInfo?.format_extension}
-						<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
-							File content ({resourceTypeInfo.format_extension})
-						</h5>
+					<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"

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/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/ScriptVersionHistory.svelte

@@ -1,5 +1,4 @@
 <script>import { Pane, Splitpanes } from 'svelte-splitpanes';
-import PanelSection from './apps/editor/settingsPanel/common/PanelSection.svelte';
 import { classNames, emptyString } from '../utils';
 import { ScriptService } from '../gen';
 import { workspaceStore } from '../stores';
@@ -52,70 +51,66 @@ let previousHash = undefined;
 
 <Splitpanes class="!overflow-visible">
 	<Pane size={20}>
-		<PanelSection title="Past Versions">
-			<div class="flex flex-col gap-2 w-full">
-				{#if !loading}
-					{#if versions && versions.length > 0}
-						<div class="flex gap-2 flex-col">
-							{#each versions ?? [] as version, versionIndex}
-								<!-- svelte-ignore a11y-click-events-have-key-events -->
-								<!-- svelte-ignore a11y-no-static-element-interactions -->
-								<div
-									class={classNames(
-										'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer ',
-										selectedVersion?.script_hash == version.script_hash
-											? 'bg-surface-selected'
-											: '',
-										'hover:bg-surface-hover'
-									)}
-									on:click={() => {
-										selectedVersion = version
-										selectedVersionIndex = versionIndex
+		<div class="flex flex-col gap-2 px-2 pt-2 w-full">
+			{#if !loading}
+				{#if versions && versions.length > 0}
+					<div class="flex gap-2 flex-col">
+						{#each versions ?? [] as version, versionIndex}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div
+								class={classNames(
+									'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer ',
+									selectedVersion?.script_hash == version.script_hash ? 'bg-surface-selected' : '',
+									'hover:bg-surface-hover'
+								)}
+								on:click={() => {
+									selectedVersion = version
+									selectedVersionIndex = versionIndex
 
-										if (showDiff && versions && selectedVersionIndex === versions.length - 1) {
-											showDiff = false
-										}
+									if (showDiff && versions && selectedVersionIndex === versions.length - 1) {
+										showDiff = false
+									}
 
-										const availableVersions = versions?.slice(selectedVersionIndex + 1)
+									const availableVersions = versions?.slice(selectedVersionIndex + 1)
 
-										if (
-											previousHash &&
-											!availableVersions?.find((v) => v.script_hash === previousHash)
-										) {
-											previousHash = availableVersions?.[0]?.script_hash
-										}
+									if (
+										previousHash &&
+										!availableVersions?.find((v) => v.script_hash === previousHash)
+									) {
+										previousHash = availableVersions?.[0]?.script_hash
+									}
 
-										deploymentMsgUpdate = undefined
-										deploymentMsgUpdateMode = false
-									}}
-								>
-									<span class="text-xs truncate">
-										{#if emptyString(version.deployment_msg)}Version {version.script_hash}{:else}{version.deployment_msg}{/if}
-									</span>
-									{#if openDetails}
-										<Button
-											on:click={() => {
-												dispatch('openDetails', { version: version.script_hash })
-											}}
-											class="ml-2 inline-flex gap-1 text-xs items-center"
-											size="xs"
-											color="light"
-											variant="border"
-										>
-											Run page<ExternalLink size={14} />
-										</Button>
-									{/if}
-								</div>
-							{/each}
-						</div>
-					{:else}
-						<div class="text-sm text-tertiary">No items</div>
-					{/if}
+									deploymentMsgUpdate = undefined
+									deploymentMsgUpdateMode = false
+								}}
+							>
+								<span class="text-xs truncate">
+									{#if emptyString(version.deployment_msg)}Version {version.script_hash}{:else}{version.deployment_msg}{/if}
+								</span>
+								{#if openDetails}
+									<Button
+										on:click={() => {
+											dispatch('openDetails', { version: version.script_hash })
+										}}
+										class="ml-2 inline-flex gap-1 text-xs items-center"
+										size="xs"
+										color="light"
+										variant="border"
+									>
+										Run page<ExternalLink size={14} />
+									</Button>
+								{/if}
+							</div>
+						{/each}
+					</div>
 				{:else}
-					<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+					<div class="text-sm text-tertiary">No items</div>
 				{/if}
-			</div>
-		</PanelSection>
+			{:else}
+				<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+			{/if}
+		</div>
 	</Pane>
 	<Pane size={80}>
 		<div class="h-full w-full overflow-auto">