windmill-components 1.309.7 → 1.352.0

package/package/components/ParqetCsvTableRenderer.svelte

@@ -0,0 +1,181 @@
+<script>import { GridApi, createGrid } from 'ag-grid-community';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { twMerge } from 'tailwind-merge';
+import DarkModeObserver from './DarkModeObserver.svelte';
+import { HelpersService } from '../gen';
+import { enterpriseLicense, workspaceStore } from '../stores';
+import { Download } from 'lucide-svelte';
+// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
+let selectedRowIndex = -1;
+export let s3resource;
+export let storage;
+export let workspaceId;
+export let disable_download = false;
+let csvSeparatorChar = ',';
+let datasource = {
+    rowCount: 0,
+    getRows: async function (params) {
+        try {
+            const searchCol = params.filterModel ? Object.keys(params.filterModel)?.[0] : undefined;
+            const csv = s3resource.endsWith('.csv');
+            const requestBody = {
+                workspace: workspaceId ?? $workspaceStore,
+                path: s3resource,
+                offset: params.startRow,
+                limit: params.endRow - params.startRow,
+                sortCol: params.sortModel?.[0]?.colId,
+                sortDesc: params.sortModel?.[0]?.sort == 'desc',
+                searchCol: searchCol,
+                searchTerm: searchCol ? params.filterModel?.[searchCol]?.filter : undefined,
+                storage: storage,
+                csvSeparator: csv ? csvSeparatorChar : undefined
+            };
+            const res = (csv
+                ? await HelpersService.loadCsvPreview(requestBody)
+                : await HelpersService.loadParquetPreview(requestBody));
+            for (let i = 0; i < res.rows.length; i++) {
+                res.rows[i]['__index'] = i + params.startRow;
+                if (!$enterpriseLicense) {
+                    Object.keys(res.rows[i]).forEach((key) => {
+                        if (key != '__index') {
+                            res.rows[i][key] = 'Require EE';
+                        }
+                    });
+                }
+            }
+            params.successCallback(res.rows);
+        }
+        catch (e) {
+            console.error(e);
+            params.failCallback();
+        }
+    }
+};
+function toggleRow(row) {
+    if (row) {
+        let rowIndex = row.rowIndex;
+        let data = { ...row.data };
+        delete data['__index'];
+        if (selectedRowIndex !== rowIndex) {
+            selectedRowIndex = rowIndex;
+        }
+    }
+}
+function toggleRows(rows) {
+    toggleRow(rows[0]);
+}
+let eGui;
+$: eGui && mountGrid();
+let error = undefined;
+async function mountGrid() {
+    if (eGui) {
+        try {
+            const csv = s3resource.endsWith('.csv');
+            const res = csv
+                ? await HelpersService.loadCsvPreview({
+                    workspace: $workspaceStore,
+                    path: s3resource,
+                    limit: 0,
+                    storage: storage,
+                    csvSeparator: csvSeparatorChar
+                })
+                : await HelpersService.loadParquetPreview({
+                    workspace: $workspaceStore,
+                    path: s3resource,
+                    limit: 0,
+                    storage: storage
+                });
+            createGrid(eGui, {
+                rowModelType: 'infinite',
+                datasource,
+                // @ts-ignore
+                columnDefs: res.columns.map((c) => {
+                    return {
+                        field: c,
+                        sortable: true,
+                        filter: true,
+                        filterParams: {
+                            filterOptions: ['contains'],
+                            maxNumConditions: 1
+                        }
+                    };
+                }),
+                pagination: false,
+                // defaultColDef: {
+                // 	flex: 1
+                // },
+                suppressColumnMoveAnimation: true,
+                rowSelection: 'multiple',
+                rowMultiSelectWithClick: true,
+                suppressRowDeselection: true,
+                onSelectionChanged: (e) => {
+                    onSelectionChanged(e.api);
+                },
+                getRowId: (data) => {
+                    return data.data['__index'];
+                }
+            }, {});
+            error = undefined;
+        }
+        catch (e) {
+            error = e.body;
+            console.error(e);
+        }
+    }
+}
+function onSelectionChanged(api) {
+    const rows = api.getSelectedNodes();
+    if (rows != undefined) {
+        toggleRows(rows);
+    }
+}
+let darkMode = false;
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div class={twMerge('mt-2  flex flex-col h-full min-h-[600px]')}>
+	{#if s3resource.endsWith('.csv')}
+		<div class="flex flex-row-reverse w-full">
+			<div class="flex items-baseline">
+				<label for="csvSeparatorChar" class="text-2xs text-secondary">Separator</label>
+
+				<div class="w-12 ml-2 mr-2">
+					<select class="h-8" bind:value={csvSeparatorChar} on:change={(e) => mountGrid()}>
+						<option value=",">,</option>
+						<option value=";">;</option>
+						<option value="\t">\t</option>
+						<option value="|">|</option>
+					</select>
+				</div>
+			</div>
+		</div>
+	{/if}
+	{#if !disable_download && !s3resource.endsWith('.csv')}
+		<a
+			target="_blank"
+			href="/api/w/{workspaceId}/job_helpers/download_s3_parquet_file_as_csv?file_key={s3resource}{storage
+				? `&storage=${storage}`
+				: ''}"
+			class="text-secondary w-full text-right underline text-2xs whitespace-nowrap"
+			><div class="flex flex-row-reverse gap-2 items-center"><Download size={12} /> CSV</div></a
+		>
+	{/if}
+
+	<div
+		class="ag-theme-alpine shadow-sm h-full"
+		class:ag-theme-alpine-dark={darkMode}
+		style="height: 600px;"
+	>
+		{#if error}
+			<div class="text-red-500">{error}</div>
+			<div>Try changing separator to fix it</div>
+		{/if}
+		<div bind:this={eGui} style="height:100%; " />
+	</div>
+</div>
+
+<!-- <div class="flex gap-1 absolute bottom-1 right-2 text-sm text-secondary"
+	>{firstRow}{'->'}{lastRow + 1} of {datasource?.rowCount} rows</div
+> -->

package/package/components/ParqetCsvTableRenderer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+declare const __propDef: {
+    props: {
+        s3resource: string;
+        storage: string | undefined;
+        workspaceId: string | undefined;
+        disable_download?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ParqetCsvTableRendererProps = typeof __propDef.props;
+export type ParqetCsvTableRendererEvents = typeof __propDef.events;
+export type ParqetCsvTableRendererSlots = typeof __propDef.slots;
+export default class ParqetCsvTableRenderer extends SvelteComponent<ParqetCsvTableRendererProps, ParqetCsvTableRendererEvents, ParqetCsvTableRendererSlots> {
+}
+export {};

package/package/components/Password.svelte

@@ -43,6 +43,7 @@ $: red = required && (password == '' || password == undefined);
 		id="password"
 		type="password"
 		bind:value={password}
+		on:keydown
 		autocomplete="off"
 		{placeholder}
 		{disabled}

package/package/components/Password.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         small?: boolean | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/PasswordArgInput.svelte

@@ -0,0 +1,49 @@
+<script>import { VariableService } from '../gen';
+import { userStore, workspaceStore } from '../stores';
+import { generateRandomString } from '../utils';
+import Password from './Password.svelte';
+export let value = undefined;
+export let disabled;
+let path = '';
+let password = value && !value.startsWith('$var:') ? value : '';
+async function generateValue() {
+    let npath = 'u/' +
+        ($userStore?.username ?? $userStore?.email)?.split('@')[0] +
+        '/secret_arg/' +
+        generateRandomString(12);
+    let nvalue = '$var:' + npath;
+    await VariableService.createVariable({
+        workspace: $workspaceStore,
+        requestBody: {
+            value: password,
+            is_secret: true,
+            path: npath,
+            description: ''
+        }
+    });
+    path = npath;
+    value = nvalue;
+}
+async function updateValue() {
+    await VariableService.updateVariable({
+        workspace: $workspaceStore,
+        path: path,
+        requestBody: {
+            value: password
+        }
+    });
+}
+let timeout = undefined;
+function debouncedUpdate() {
+    timeout && clearTimeout(timeout);
+    setTimeout(updateValue, 500);
+}
+$: password && debouncedUpdate();
+$: $workspaceStore &&
+    ($userStore?.username || $userStore?.email) &&
+    path == '' &&
+    password != '' &&
+    generateValue();
+</script>
+
+<Password {disabled} bind:password />

package/package/components/PasswordArgInput.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: string | undefined;
+        disabled: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PasswordArgInputProps = typeof __propDef.props;
+export type PasswordArgInputEvents = typeof __propDef.events;
+export type PasswordArgInputSlots = typeof __propDef.slots;
+export default class PasswordArgInput extends SvelteComponent<PasswordArgInputProps, PasswordArgInputEvents, PasswordArgInputSlots> {
+}
+export {};

package/package/components/Path.svelte

@@ -249,8 +249,8 @@ let contentSearch;
 		}}
 	>
 		{#if !folderCreated}
-			<div class="flex flex-row">
-				<input class="mr-2" placeholder="New folder name" bind:value={newFolderName} />
+			<div class="flex flex-col gap-2">
+				<input placeholder="New folder name" bind:value={newFolderName} />
 				<Button size="md" startIcon={{ icon: Plus }} disabled={!newFolderName} on:click={addFolder}>
 					New&nbsp;folder
 				</Button>

package/package/components/PersistentScriptDrawer.svelte

@@ -1,7 +1,7 @@
 <script>import { JobService } from '../gen';
 import { Badge, Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, onDestroy } from 'svelte';
 import { workspaceStore } from '../stores';
 import { displayDate, sleep, sendUserToast } from '../utils';
 import TableCustom from './TableCustom.svelte';
@@ -44,7 +44,7 @@ async function loadQueuedJobsOnce() {
     // toggle queuedJobsLoading to false in 1 secs to let some time for the animation to play
     setTimeout(() => {
         queuedJobsLoading = false;
-    }, 1000 - (endStart - timeStart));
+    }, 3000 - (endStart - timeStart));
 }
 async function scaleToZero() {
     cancellingInProgress = true;
@@ -72,6 +72,9 @@ async function exit() {
     loadQueuedJobs = false;
     drawer.closeDrawer?.();
 }
+onDestroy(() => {
+    loadQueuedJobs = false;
+});
 </script>
 
 <Drawer
@@ -99,7 +102,7 @@ async function exit() {
 				variant="border"
 				on:click={loadQueuedJobsOnce}
 			>
-				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size="xs" />Refresh
+				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size={14} />
 			</Button>
 		</div>
 		<TableCustom>

package/package/components/QueueMetricsDrawer.svelte

@@ -0,0 +1,225 @@
+<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]));
+}
+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}>
+	<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}
+	</DrawerContent>
+</Drawer>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import { Drawer } from './common';
+import 'chartjs-adapter-date-fns';
+declare const __propDef: {
+    props: {
+        drawer: Drawer;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};