windmill-components 1.383.8 → 1.389.1

package/package/components/QueueMetricsDrawer.svelte

@@ -1,225 +1,13 @@
 <script>import { Drawer, DrawerContent } from './common';
-import 'chartjs-adapter-date-fns';
-import { Line } from 'svelte-chartjs';
-import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, LogarithmicScale, TimeScale } from 'chart.js';
-import { WorkerService } from '../gen';
-import { superadmin } from '../stores';
-import Skeleton from './common/skeleton/Skeleton.svelte';
-import DarkModeObserver from './DarkModeObserver.svelte';
-import Alert from './common/alert/Alert.svelte';
-export let drawer;
-let isOpen = false;
-let loading = true;
-const colorTuples = [
-    ['#7EB26D', 'rgba(126, 178, 109, 0.2)'],
-    ['#EAB839', 'rgba(234, 184, 57, 0.2)'],
-    ['#6ED0E0', 'rgba(110, 208, 224, 0.2)'],
-    ['#EF843C', 'rgba(239, 132, 60, 0.2)'],
-    ['#E24D42', 'rgba(226, 77, 66, 0.2)'],
-    ['#1F78C1', 'rgba(31, 120, 193, 0.2)'],
-    ['#BA43A9', 'rgba(186, 67, 169, 0.2)'],
-    ['#705DA0', 'rgba(112, 93, 160, 0.2)'],
-    ['#508642', 'rgba(80, 134, 66, 0.2)'],
-    ['#CCA300', 'rgba(204, 163, 0, 0.2)'],
-    ['#447EBC', 'rgba(68, 126, 188, 0.2)'],
-    ['#C15C17', 'rgba(193, 92, 23, 0.2)'],
-    ['#890F02', 'rgba(137, 15, 2, 0.2)'],
-    ['#666666', 'rgba(102, 102, 102, 0.2)'],
-    ['#44AA99', 'rgba(68, 170, 153, 0.2)'],
-    ['#6D8764', 'rgba(109, 135, 100, 0.2)'],
-    ['#555555', 'rgba(85, 85, 85, 0.2)'],
-    ['#B3B3B3', 'rgba(179, 179, 179, 0.2)'],
-    ['#008C9E', 'rgba(0, 140, 158, 0.2)'],
-    ['#6BBA70', 'rgba(107, 186, 112, 0.2)']
-];
-function getColors(labels) {
-    const colors = labels.map((_, i) => colorTuples[i % colorTuples.length]);
-    return Object.fromEntries(colors.map((c, i) => [labels[i], c]));
+import QueueMetricsDrawerInner from './QueueMetricsDrawerInner.svelte';
+let drawer;
+export function openDrawer() {
+    drawer?.openDrawer();
 }
-ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, TimeScale, LogarithmicScale);
-let countData = undefined;
-let delayData = undefined;
-let minDate = new Date();
-let noMetrics = false;
-function fillData(data, zero = 0) {
-    // fill holes with 0
-    const sorted = [];
-    for (const el of [
-        ...data,
-        {
-            created_at: new Date().toISOString(),
-            value: zero
-        }
-    ]) {
-        const last = sorted.length > 0 ? new Date(sorted[sorted.length - 1].created_at).getTime() : undefined;
-        const currentTs = new Date(el.created_at).getTime();
-        if (last && currentTs - last > 1000 * 60 * 2) {
-            const numElements = Math.floor((currentTs - last) / (1000 * 30));
-            for (let i = 1; i < numElements; i++) {
-                sorted.push({
-                    created_at: new Date(last + i * (1000 * 30)).toISOString(),
-                    value: zero
-                });
-            }
-        }
-        sorted.push(el);
-    }
-    // remove high frequency data points for similar values
-    const light = [];
-    for (const el of sorted) {
-        const last = light.length > 0 ? light[light.length - 1] : undefined;
-        if (!last ||
-            Math.abs((el.value - last.value) / last.value) > 0.1 ||
-            new Date(el.created_at).getTime() - new Date(last.created_at).getTime() > 1000 * 60 * 15) {
-            light.push(el);
-        }
-    }
-    return light;
-}
-async function loadMetrics() {
-    loading = true;
-    let metrics = await WorkerService.getQueueMetrics();
-    if (metrics.length == 0) {
-        noMetrics = true;
-        loading = false;
-        return;
-    }
-    const labels = metrics
-        .map((m) => m.id.slice(12))
-        .filter((v, i, a) => a.indexOf(v) === i)
-        .sort();
-    const labelColors = getColors(labels);
-    countData = {
-        datasets: metrics
-            .filter((m) => m.id.startsWith('queue_count_'))
-            .map((m) => {
-            const [color, bgColor] = labelColors[m.id.slice(12)];
-            return {
-                label: m.id.slice(12),
-                backgroundColor: bgColor,
-                borderColor: color,
-                data: fillData(m.values).map((v) => ({ x: v.created_at, y: v.value }))
-            };
-        })
-    };
-    delayData = {
-        datasets: metrics
-            .filter((m) => m.id.startsWith('queue_delay_'))
-            .map((m) => {
-            const [color, bgColor] = labelColors[m.id.slice(12)];
-            return {
-                label: m.id.slice(12),
-                borderColor: color,
-                backgroundColor: bgColor,
-                data: fillData(m.values, 1).map((v) => ({
-                    x: v.created_at,
-                    y: v.value
-                }))
-            };
-        })
-    };
-    minDate = new Date(Math.min(...countData.datasets.map((d) => new Date(d.data[0].x).getTime())));
-    loading = false;
-}
-$: if ($superadmin && isOpen) {
-    loadMetrics();
-}
-else {
-    countData = undefined;
-    delayData = undefined;
-}
-let darkMode = false;
-$: ChartJS.defaults.color = darkMode ? '#ccc' : '#666';
-$: ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
 </script>
 
-<DarkModeObserver bind:darkMode />
-
-<Drawer bind:this={drawer} bind:open={isOpen}>
+<Drawer bind:this={drawer}>
 	<DrawerContent title="Queue Metrics" on:close={drawer.closeDrawer}>
-		{#if loading}
-			<Skeleton layout={[[20]]} />
-		{:else if noMetrics}
-			<p class="text-secondary">No jobs delayed by more than 3 seconds in the last 14 days</p>
-		{:else}
-			<div class="flex flex-col gap-4">
-				{#if countData}
-					<Line
-						data={countData}
-						options={{
-							animation: false,
-							plugins: {
-								title: {
-									display: true,
-									text: 'Number of delayed jobs per tag (> 3s)'
-								}
-							},
-							scales: {
-								x: {
-									type: 'time',
-									min: minDate.toISOString(),
-									max: new Date().toISOString()
-								},
-								y: {
-									title: {
-										display: true,
-										text: 'count'
-									}
-								}
-							}
-						}}
-					/>
-				{/if}
-				{#if delayData}
-					<Line
-						data={delayData}
-						options={{
-							animation: false,
-							plugins: {
-								title: {
-									display: true,
-									text: 'Queue delay per tag (> 3s)'
-								},
-								tooltip: {
-									callbacks: {
-										label: function (context) {
-											// @ts-ignore
-											if (context.raw.y === 1) {
-												return context.dataset.label + ': 0'
-											} else {
-												// @ts-ignore
-												return context.dataset.label + ': ' + context.raw.y
-											}
-										}
-									}
-								}
-							},
-							scales: {
-								x: {
-									type: 'time',
-									min: minDate.toISOString(),
-									max: new Date().toISOString()
-								},
-
-								y: {
-									type: 'logarithmic',
-									title: {
-										display: true,
-										text: 'delay (s)'
-									},
-									ticks: {
-										callback: (value, _) => (value === 1 ? '0' : value)
-									}
-								}
-							}
-						}}
-					/>
-				{/if}
-				<Alert title="Info">
-					Only tags for jobs that have been delayed by more than 3 seconds in the last 14 days are
-					included in the graph.
-				</Alert>
-			</div>
-		{/if}
+		<QueueMetricsDrawerInner />
 	</DrawerContent>
 </Drawer>

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

@@ -1,9 +1,7 @@
 import { SvelteComponent } from "svelte";
-import { Drawer } from './common';
-import 'chartjs-adapter-date-fns';
 declare const __propDef: {
     props: {
-        drawer: Drawer;
+        openDrawer?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -14,5 +12,6 @@ export type QueueMetricsDrawerProps = typeof __propDef.props;
 export type QueueMetricsDrawerEvents = typeof __propDef.events;
 export type QueueMetricsDrawerSlots = typeof __propDef.slots;
 export default class QueueMetricsDrawer extends SvelteComponent<QueueMetricsDrawerProps, QueueMetricsDrawerEvents, QueueMetricsDrawerSlots> {
+    get openDrawer(): () => void;
 }
 export {};

package/package/components/QueueMetricsDrawerInner.svelte

@@ -0,0 +1,211 @@
+<script>import 'chartjs-adapter-date-fns';
+import { Line } from 'svelte-chartjs';
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, LogarithmicScale, TimeScale } from 'chart.js';
+import { WorkerService } from '../gen';
+import Skeleton from './common/skeleton/Skeleton.svelte';
+import DarkModeObserver from './DarkModeObserver.svelte';
+import Alert from './common/alert/Alert.svelte';
+let loading = true;
+const colorTuples = [
+    ['#7EB26D', 'rgba(126, 178, 109, 0.2)'],
+    ['#EAB839', 'rgba(234, 184, 57, 0.2)'],
+    ['#6ED0E0', 'rgba(110, 208, 224, 0.2)'],
+    ['#EF843C', 'rgba(239, 132, 60, 0.2)'],
+    ['#E24D42', 'rgba(226, 77, 66, 0.2)'],
+    ['#1F78C1', 'rgba(31, 120, 193, 0.2)'],
+    ['#BA43A9', 'rgba(186, 67, 169, 0.2)'],
+    ['#705DA0', 'rgba(112, 93, 160, 0.2)'],
+    ['#508642', 'rgba(80, 134, 66, 0.2)'],
+    ['#CCA300', 'rgba(204, 163, 0, 0.2)'],
+    ['#447EBC', 'rgba(68, 126, 188, 0.2)'],
+    ['#C15C17', 'rgba(193, 92, 23, 0.2)'],
+    ['#890F02', 'rgba(137, 15, 2, 0.2)'],
+    ['#666666', 'rgba(102, 102, 102, 0.2)'],
+    ['#44AA99', 'rgba(68, 170, 153, 0.2)'],
+    ['#6D8764', 'rgba(109, 135, 100, 0.2)'],
+    ['#555555', 'rgba(85, 85, 85, 0.2)'],
+    ['#B3B3B3', 'rgba(179, 179, 179, 0.2)'],
+    ['#008C9E', 'rgba(0, 140, 158, 0.2)'],
+    ['#6BBA70', 'rgba(107, 186, 112, 0.2)']
+];
+function getColors(labels) {
+    const colors = labels.map((_, i) => colorTuples[i % colorTuples.length]);
+    return Object.fromEntries(colors.map((c, i) => [labels[i], c]));
+}
+ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, TimeScale, LogarithmicScale);
+let countData = undefined;
+let delayData = undefined;
+let minDate = new Date();
+let noMetrics = false;
+function fillData(data, zero = 0) {
+    // fill holes with 0
+    const sorted = [];
+    for (const el of [
+        ...data,
+        {
+            created_at: new Date().toISOString(),
+            value: zero
+        }
+    ]) {
+        const last = sorted.length > 0 ? new Date(sorted[sorted.length - 1].created_at).getTime() : undefined;
+        const currentTs = new Date(el.created_at).getTime();
+        if (last && currentTs - last > 1000 * 60 * 2) {
+            const numElements = Math.floor((currentTs - last) / (1000 * 30));
+            for (let i = 1; i < numElements; i++) {
+                sorted.push({
+                    created_at: new Date(last + i * (1000 * 30)).toISOString(),
+                    value: zero
+                });
+            }
+        }
+        sorted.push(el);
+    }
+    // remove high frequency data points for similar values
+    const light = [];
+    for (const el of sorted) {
+        const last = light.length > 0 ? light[light.length - 1] : undefined;
+        if (!last ||
+            Math.abs((el.value - last.value) / last.value) > 0.1 ||
+            new Date(el.created_at).getTime() - new Date(last.created_at).getTime() > 1000 * 60 * 15) {
+            light.push(el);
+        }
+    }
+    return light;
+}
+async function loadMetrics() {
+    loading = true;
+    let metrics = await WorkerService.getQueueMetrics();
+    if (metrics.length == 0) {
+        noMetrics = true;
+        loading = false;
+        return;
+    }
+    const labels = metrics
+        .map((m) => m.id.slice(12))
+        .filter((v, i, a) => a.indexOf(v) === i)
+        .sort();
+    const labelColors = getColors(labels);
+    countData = {
+        datasets: metrics
+            .filter((m) => m.id.startsWith('queue_count_'))
+            .map((m) => {
+            const [color, bgColor] = labelColors[m.id.slice(12)];
+            return {
+                label: m.id.slice(12),
+                backgroundColor: bgColor,
+                borderColor: color,
+                data: fillData(m.values).map((v) => ({ x: v.created_at, y: v.value }))
+            };
+        })
+    };
+    delayData = {
+        datasets: metrics
+            .filter((m) => m.id.startsWith('queue_delay_'))
+            .map((m) => {
+            const [color, bgColor] = labelColors[m.id.slice(12)];
+            return {
+                label: m.id.slice(12),
+                borderColor: color,
+                backgroundColor: bgColor,
+                data: fillData(m.values, 1).map((v) => ({
+                    x: v.created_at,
+                    y: v.value
+                }))
+            };
+        })
+    };
+    minDate = new Date(Math.min(...countData.datasets.map((d) => new Date(d.data[0].x).getTime())));
+    loading = false;
+}
+loadMetrics();
+let darkMode = false;
+$: ChartJS.defaults.color = darkMode ? '#ccc' : '#666';
+$: ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+{#if loading}
+	<Skeleton layout={[[20]]} />
+{:else if noMetrics}
+	<p class="text-secondary">No jobs delayed by more than 3 seconds in the last 14 days</p>
+{:else}
+	<div class="flex flex-col gap-4">
+		{#if countData}
+			<Line
+				data={countData}
+				options={{
+					animation: false,
+					plugins: {
+						title: {
+							display: true,
+							text: 'Number of delayed jobs per tag (> 3s)'
+						}
+					},
+					scales: {
+						x: {
+							type: 'time',
+							min: minDate.toISOString(),
+							max: new Date().toISOString()
+						},
+						y: {
+							title: {
+								display: true,
+								text: 'count'
+							}
+						}
+					}
+				}}
+			/>
+		{/if}
+		{#if delayData}
+			<Line
+				data={delayData}
+				options={{
+					animation: false,
+					plugins: {
+						title: {
+							display: true,
+							text: 'Queue delay per tag (> 3s)'
+						},
+						tooltip: {
+							callbacks: {
+								label: function (context) {
+									// @ts-ignore
+									if (context.raw.y === 1) {
+										return context.dataset.label + ': 0'
+									} else {
+										// @ts-ignore
+										return context.dataset.label + ': ' + context.raw.y
+									}
+								}
+							}
+						}
+					},
+					scales: {
+						x: {
+							type: 'time',
+							min: minDate.toISOString(),
+							max: new Date().toISOString()
+						},
+
+						y: {
+							type: 'logarithmic',
+							title: {
+								display: true,
+								text: 'delay (s)'
+							},
+							ticks: {
+								callback: (value, _) => (value === 1 ? '0' : value)
+							}
+						}
+					}
+				}}
+			/>
+		{/if}
+		<Alert title="Info">
+			Only tags for jobs that have been delayed by more than 3 seconds in the last 14 days are
+			included in the graph.
+		</Alert>
+	</div>
+{/if}

package/package/components/QueueMetricsDrawerInner.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import 'chartjs-adapter-date-fns';
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QueueMetricsDrawerInnerProps = typeof __propDef.props;
+export type QueueMetricsDrawerInnerEvents = typeof __propDef.events;
+export type QueueMetricsDrawerInnerSlots = typeof __propDef.slots;
+export default class QueueMetricsDrawerInner extends SvelteComponent<QueueMetricsDrawerInnerProps, QueueMetricsDrawerInnerEvents, QueueMetricsDrawerInnerSlots> {
+}
+export {};

package/package/components/ResourceEditorDrawer.svelte

@@ -1,7 +1,6 @@
-<script>import ResourceEditor from './ResourceEditor.svelte';
-import { Button, Drawer } from './common';
+<script>import { Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
-import { Save } from 'lucide-svelte';
+import { Loader2, Save } from 'lucide-svelte';
 let drawer;
 let canSave = true;
 let resource_type = undefined;
@@ -24,14 +23,18 @@ export async function initNew(resourceType) {
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent title={path ? 'Edit ' + path : 'Add a resource'} on:close={drawer.closeDrawer}>
-		<ResourceEditor
-			{newResource}
-			{path}
-			{resource_type}
-			on:refresh
-			bind:this={resourceEditor}
-			bind:canSave
-		/>
+		{#await import('./ResourceEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default
+				{newResource}
+				{path}
+				{resource_type}
+				on:refresh
+				bind:this={resourceEditor}
+				bind:canSave
+			/>
+		{/await}
 		<svelte:fragment slot="actions">
 			<Button
 				startIcon={{ icon: Save }}

package/package/components/ResourceEditorDrawer.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
         initNew?: ((resourceType: string) => Promise<void>) | undefined;
     };
     events: {
-        refresh: CustomEvent<any>;
+        refresh: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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", 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", args: Record<string, any>, tag: string | undefined, callbacks?: {
         done: (x: any) => void;
         cancel: () => void;
         error: (err: Error) => void;

package/package/components/S3FilePicker.svelte

@@ -540,8 +540,20 @@ function selectItem(index, toggleCollapsed = true) {
 					{/if}
 
 					<div class="flex flex-col h-full w-full overflow-auto text-xs p-4 bg-surface-secondary">
-						{#if fileMetadata !== undefined && filePreview !== undefined}
+						{#if fileMetadata?.fileKey.endsWith('.png') || fileMetadata?.fileKey.endsWith('.jpg') || fileMetadata?.fileKey.endsWith('.jpeg') || fileMetadata?.fileKey.endsWith('.webp')}
+							<div>
+								<img
+									src={`/api/w/${$workspaceStore}/job_helpers/load_image_preview?file_key=${fileMetadata.fileKey}` +
+										(storage ? `&storage=${storage}` : '')}
+									alt="S3 preview"
+								/>
+							</div>
+						{:else if filePreviewLoading}
 							<div class="flex h-6 items-center text-tertiary mb-4">
+								<Loader2 size={12} class="animate-spin mr-1" /> File preview loading
+							</div>
+						{:else if fileMetadata !== undefined && filePreview !== undefined}
+							<div class="flex items-center text-tertiary mb-4">
 								{#if filePreview.contentType === 'Unknown'}
 									Type of file not supported for preview.
 								{:else if filePreview.contentType === 'Csv'}
@@ -585,13 +597,13 @@ function selectItem(index, toggleCollapsed = true) {
 									Previewing a {filePreview.contentType?.toLowerCase()} file.
 								{/if}
 							</div>
-							<pre class="grow whitespace-no-wrap break-words"
-								>{#if !emptyString(filePreview.contentPreview)}{filePreview.contentPreview}{:else if filePreview.contentType !== undefined}Preview impossible.{/if}</pre
-							>
-						{:else if filePreviewLoading}
-							<div class="flex h-6 items-center text-tertiary mb-4">
-								<Loader2 size={12} class="animate-spin mr-1" /> File preview loading
-							</div>
+							<pre class="grow whitespace-no-wrap break-words">
+									{#if !emptyString(filePreview.contentPreview)}
+									{filePreview.contentPreview}
+								{:else if filePreview.contentType !== undefined}
+									Preview impossible.
+								{/if}
+							</pre>
 						{/if}
 					</div>
 				</div>