windmill-components 1.623.2 → 1.655.0

package/package/components/assets/VolumesDrawer.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">import { Alert, Drawer, DrawerContent } from '../common';
+import { VolumeService } from '../../gen';
+import { enterpriseLicense, workspaceStore, userStore } from '../../stores';
+import { displayDate, displaySize, emptyString, sendUserToast } from '../../utils';
+import { File, HardDriveIcon, Loader2, Plus, Shield, Trash2 } from 'lucide-svelte';
+import Button from '../common/button/Button.svelte';
+import SharedBadge from '../SharedBadge.svelte';
+import ShareModal from '../ShareModal.svelte';
+import Popover from '../meltComponents/Popover.svelte';
+import TextInput from '../text_input/TextInput.svelte';
+import { resource } from 'runed';
+let { onExplore } = $props();
+let open = $state(false);
+let refreshKey = $state(0);
+let shareModal = $state();
+let newVolumeName = $state('');
+let volumes = resource(() => (open ? { ws: $workspaceStore, key: refreshKey } : undefined), (params) => {
+    if (!params?.ws)
+        return Promise.resolve([]);
+    return VolumeService.listVolumes({ workspace: params.ws });
+});
+export function openDrawer() {
+    open = true;
+}
+async function createVolume(name, close) {
+    try {
+        await VolumeService.createVolume({
+            workspace: $workspaceStore,
+            requestBody: { name }
+        });
+        sendUserToast(`Volume '${name}' created`);
+        newVolumeName = '';
+        close();
+        refreshKey++;
+    }
+    catch (e) {
+        sendUserToast(`Failed to create volume: ${e}`, true);
+    }
+}
+async function deleteVolume(name) {
+    if (!confirm(`Delete volume '${name}'? This cannot be undone.`))
+        return;
+    await VolumeService.deleteVolume({ workspace: $workspaceStore, name });
+    sendUserToast(`Volume '${name}' deleted`);
+    refreshKey++;
+}
+function canReadVolume(createdBy, extraPerms) {
+    if ($userStore?.is_admin)
+        return true;
+    const username = $userStore?.username;
+    if (username === createdBy || `u/${username}` === createdBy)
+        return true;
+    const perms = extraPerms ?? {};
+    const keys = Object.keys(perms);
+    if (keys.length === 0)
+        return true; // public
+    if (`u/${username}` in perms)
+        return true;
+    const pgroups = $userStore?.pgroups ?? [];
+    return pgroups.some((g) => g in perms);
+}
+function canWriteVolume(createdBy, extraPerms) {
+    if ($userStore?.is_admin)
+        return true;
+    const username = $userStore?.username;
+    if (username === createdBy || `u/${username}` === createdBy)
+        return true;
+    if (extraPerms?.[`u/${username}`] === true)
+        return true;
+    const pgroups = $userStore?.pgroups ?? [];
+    return pgroups.some((g) => extraPerms?.[g] === true);
+}
+</script>
+
+<Drawer {open} size="700px" on:close={() => (open = false)}>
+	<DrawerContent title="Volumes" on:close={() => (open = false)}>
+		{#snippet actions()}
+			<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
+				{#snippet trigger()}
+					<Button unifiedSize="sm" variant="accent" startIcon={{ icon: Plus }} nonCaptureEvent
+						>New volume</Button
+					>
+				{/snippet}
+				{#snippet content({ close })}
+					<div class="flex flex-col gap-2 p-4">
+						<TextInput
+							size="md"
+							inputProps={{
+								placeholder: 'Volume name',
+								onkeyup: (e) => {
+									if (e.key === 'Enter' && newVolumeName.trim()) {
+										createVolume(newVolumeName.trim(), close)
+									}
+								}
+							}}
+							bind:value={newVolumeName}
+						/>
+						<Button
+							unifiedSize="sm"
+							variant="accent"
+							startIcon={{ icon: Plus }}
+							disabled={!newVolumeName.trim()}
+							on:click={() => createVolume(newVolumeName.trim(), close)}
+						>
+							Create
+						</Button>
+					</div>
+				{/snippet}
+			</Popover>
+		{/snippet}
+		{#if emptyString($enterpriseLicense)}
+			<div class="mb-4">
+				<Alert type="info" title="Community Edition limits">
+					Volumes are limited to 20 per workspace and 50 MB per file. Upgrade to Enterprise Edition
+					to remove these limits.
+				</Alert>
+			</div>
+		{/if}
+		{#if volumes.loading}
+			<div class="flex items-center justify-center py-8">
+				<Loader2 size={24} class="animate-spin text-secondary" />
+			</div>
+		{:else if !volumes.current?.length}
+			<div class="text-sm text-secondary py-8 text-center">
+				No volumes yet. Create one above or they are auto-created when a job declares a volume
+				annotation.
+			</div>
+		{:else}
+			<div class="flex flex-col divide-y border rounded-md">
+				{#each volumes.current as vol (vol.name)}
+					{@const readable = canReadVolume(vol.created_by, vol.extra_perms)}
+					{@const writable = canWriteVolume(vol.created_by, vol.extra_perms)}
+					<div class="flex items-center gap-3 px-4 py-3 hover:bg-surface-hover">
+						<HardDriveIcon size={16} class="text-secondary shrink-0" />
+						<div class="flex flex-col flex-1 min-w-0">
+							<div class="flex items-center gap-1.5">
+								<span class="text-sm font-medium truncate">{vol.name}</span>
+								<SharedBadge
+									extraPerms={vol.extra_perms as Record<string, boolean>}
+									canWrite={writable}
+								/>
+							</div>
+							<span class="text-2xs text-secondary">
+								{vol.file_count}
+								{vol.file_count === 1 ? 'file' : 'files'}
+								&middot; {displaySize(vol.size_bytes) ?? '0 B'}
+								&middot; owner: {vol.created_by.replace(/^u\//, '')}
+							</span>
+						</div>
+						{#if vol.last_used_at}
+							<span class="text-2xs text-secondary shrink-0">
+								Used {displayDate(vol.last_used_at)}
+							</span>
+						{/if}
+						{#if writable}
+							<Button
+								variant="subtle"
+								iconOnly
+								unifiedSize="sm"
+								endIcon={{ icon: Shield }}
+								on:click={() => shareModal?.openDrawer(vol.name, 'volume', true)}
+							/>
+						{/if}
+						{#if onExplore && readable}
+							<Button
+								variant="default"
+								unifiedSize="sm"
+								endIcon={{ icon: File }}
+								on:click={() => onExplore(vol.name)}
+							>
+								Explore
+							</Button>
+						{/if}
+						{#if writable}
+							<Button
+								variant="subtle"
+								iconOnly
+								unifiedSize="sm"
+								btnClasses="text-red-500 hover:text-red-600"
+								endIcon={{ icon: Trash2 }}
+								on:click={() => deleteVolume(vol.name)}
+							/>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<ShareModal bind:this={shareModal} on:change={() => refreshKey++} />

package/package/components/assets/VolumesDrawer.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    onExplore?: (volumeName: string) => void;
+};
+declare const VolumesDrawer: import("svelte").Component<$$ComponentProps, {
+    openDrawer: () => void;
+}, "">;
+type VolumesDrawer = ReturnType<typeof VolumesDrawer>;
+export default VolumesDrawer;

package/package/components/assets/assetsFilter.d.ts

@@ -0,0 +1,54 @@
+import { FileCode, FolderIcon, Box, Braces } from 'lucide-svelte';
+export declare function buildAssetsFilterSchema({ paths, assetKinds }: {
+    paths: string[];
+    assetKinds: string[];
+}): {
+    _default_: {
+        type: "string";
+        hidden: true;
+    };
+    asset_path: {
+        type: "string";
+        label: string;
+        icon: typeof FolderIcon;
+        description: string;
+    };
+    asset_kinds: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowCustomValue: false;
+        allowNegative: false;
+        allowMultiple: true;
+        label: string;
+        icon: typeof Box;
+        description: string;
+    };
+    usage_path: {
+        type: "string";
+        label: string;
+        icon: typeof FileCode;
+        description: string;
+    };
+    path: {
+        type: "oneof";
+        options: {
+            label: string;
+            value: string;
+        }[];
+        allowCustomValue: true;
+        allowNegative: false;
+        allowMultiple: false;
+        label: string;
+        icon: typeof FileCode;
+        description: string;
+    };
+    columns: {
+        type: "string";
+        label: string;
+        icon: typeof Braces;
+        description: string;
+    };
+};

package/package/components/assets/assetsFilter.js

@@ -0,0 +1,47 @@
+import { FileCode, FolderIcon, Box, Braces } from 'lucide-svelte';
+export function buildAssetsFilterSchema({ paths, assetKinds }) {
+    return {
+        _default_: {
+            type: 'string',
+            hidden: true
+        },
+        asset_path: {
+            type: 'string',
+            label: 'Asset path pattern',
+            icon: FolderIcon,
+            description: 'Filter by asset path pattern (case-insensitive)'
+        },
+        asset_kinds: {
+            type: 'oneof',
+            options: assetKinds.map((s) => ({ label: s, value: s })),
+            allowCustomValue: false,
+            allowNegative: false,
+            allowMultiple: true,
+            label: 'Asset kind',
+            icon: Box,
+            description: 'Filter by asset kind (s3object, resource, variable, etc.)'
+        },
+        usage_path: {
+            type: 'string',
+            label: 'Usage path pattern',
+            icon: FileCode,
+            description: 'Filter by usage path pattern (case-insensitive)'
+        },
+        path: {
+            type: 'oneof',
+            options: paths.map((s) => ({ label: s, value: s })),
+            allowCustomValue: true,
+            allowNegative: false,
+            allowMultiple: false,
+            label: 'Asset path',
+            icon: FileCode,
+            description: 'Filter by exact asset path'
+        },
+        columns: {
+            type: 'string',
+            label: 'Columns',
+            icon: Braces,
+            description: 'Filter by comma-separated column names (e.g., col1,col2,col3)'
+        }
+    };
+}

package/package/components/assets/lib.d.ts

@@ -2,10 +2,11 @@ import type { AssetKind as _AssetKind, Asset as _Asset, ListAssetsResponse, Asse
 export type Asset = _Asset;
 export type AssetKind = _AssetKind;
 export type AssetWithAccessType = Asset & {
-    access_type?: AssetUsageAccessType;
+    access_type?: AssetUsageAccessType | null;
 };
 export type AssetWithAltAccessType = AssetWithAccessType & {
-    alt_access_type?: AssetUsageAccessType;
+    alt_access_type?: AssetUsageAccessType | null;
+    columns?: Record<string, AssetUsageAccessType>;
 };
 export type AssetUsage = ListAssetsResponse['assets'][number]['usages'][number];
 export declare function formatAsset(asset: Asset): string;

package/package/components/assets/lib.js

@@ -9,11 +9,20 @@ export function formatAsset(asset) {
             return `ducklake://${asset.path}`;
         case 'datatable':
             return `datatable://${asset.path}`;
+        case 'volume':
+            return `volume://${asset.path}`;
     }
     return 'unknown';
 }
 export function formatShortAssetPath(asset) {
-    return asset.path.split('/').pop() || asset.path;
+    if (asset.kind === 'datatable' && asset.path === 'main')
+        return 'Main data table';
+    if (asset.kind === 'ducklake' && asset.path === 'main')
+        return 'Main ducklake';
+    const s = asset.path.split('/').pop() || asset.path;
+    if (s.includes('?table='))
+        return s.split('?table=')[1];
+    return s;
 }
 export function getAssetUsagePageUri(usage) {
     if (usage.kind === 'script') {
@@ -69,6 +78,8 @@ export function formatAssetKind(asset) {
             return 'Ducklake';
         case 'datatable':
             return 'Data table';
+        case 'volume':
+            return 'Volume';
     }
 }
 export function formatAssetAccessType(accessType) {

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -18,7 +18,7 @@ import Button from '../common/button/Button.svelte';
 import CalendarPicker from '../common/calendarPicker/CalendarPicker.svelte';
 import { AuditService, ResourceService, UserService, ScriptService, FlowService, AppService, CancelError } from '../../gen';
 import { userStore, workspaceStore } from '../../stores';
-import { ChevronDown, Loader2, RefreshCcw } from 'lucide-svelte';
+import { ChevronDown, Download, Loader2, RefreshCcw } from 'lucide-svelte';
 import { onDestroy, untrack } from 'svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
@@ -68,7 +68,7 @@ function loadLogs() {
         loading = false;
     });
     promise = CancelablePromiseUtils.onTimeout(promise, 4000, () => {
-        sendUserToast('Loading audit logs is taking longer than expected...', true, perPage > 25
+        sendUserToast('Loading audit logs is taking longer than expected...', 'warning', perPage > 25
             ? [{ label: 'Reduce to 25 items per page', callback: () => (perPage = 25) }]
             : []);
     });
@@ -218,6 +218,24 @@ const operations = {
 };
 let refresh = $state(0);
 let lastRefresh = $state(-1);
+function downloadAuditLogsAsJson() {
+    if (!logs || logs.length === 0) {
+        sendUserToast('No audit logs to download', true);
+        return;
+    }
+    const jsonContent = JSON.stringify(logs, null, 2);
+    const blob = new Blob([jsonContent], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const filename = `audit_logs_${$workspaceStore}_${timestamp}.json`;
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}
 // observe all the variables that should trigger an update
 $effect(() => {
     ;
@@ -378,6 +396,14 @@ $effect(() => {
 		>
 			Clear filters
 		</Button>
+		<Button
+			variant="subtle"
+			on:click={downloadAuditLogsAsJson}
+			unifiedSize="md"
+			title="Downloads currently displayed logs only (up to {perPage} entries)"
+			startIcon={{ icon: Download }}
+			iconOnly
+		/>
 		<Button
 			variant="accent"
 			on:click={() => {

package/package/components/chartjs-wrappers/Chart.svelte

@@ -15,8 +15,8 @@ $effect(() => {
     untrack(() => {
         chart = new Chart(canvasElem, {
             type,
-            data,
-            options
+            data: $state.snapshot(data),
+            options: $state.snapshot(options)
         });
     });
     return () => {
@@ -24,10 +24,10 @@ $effect(() => {
     };
 });
 $effect(() => {
-    chart;
+    data;
     untrack(() => {
         if (chart) {
-            chart.data = data;
+            chart.data = $state.snapshot(data);
             chart.update();
         }
     });

package/package/components/common/FileProgressBar.svelte

@@ -1,19 +1,21 @@
-<script lang="ts">import { tweened } from 'svelte/motion';
+<script lang="ts">import { untrack } from 'svelte';
+import { run } from 'svelte/legacy';
+import { tweened } from 'svelte/motion';
 import { cubicOut } from 'svelte/easing';
-export let color = 'blue';
-export let progress = 0;
-export let ended = false;
-const tweenedProgress = tweened(progress, {
+let { color = 'blue', progress = 0, ended = false, children } = $props();
+const tweenedProgress = tweened(untrack(() => progress), {
     duration: 400,
     easing: cubicOut
 });
-$: tweenedProgress.set(progress);
+run(() => {
+    tweenedProgress.set(progress);
+});
 </script>
 
 {#key color}
 	<div class="flex flex-row gap-1 items-center justify-between w-full">
 		{#if ended}
-			<slot />
+			{@render children?.()}
 		{:else}
 			<div class="progress-bar">
 				<div

package/package/components/common/FileProgressBar.svelte.d.ts

@@ -1,31 +1,9 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const FileProgressBar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     color?: string;
     progress?: number;
     ended?: boolean;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type FileProgressBar = InstanceType<typeof FileProgressBar>;
+    children?: import('svelte').Snippet;
+}
+declare const FileProgressBar: import("svelte").Component<Props, {}, "">;
+type FileProgressBar = ReturnType<typeof FileProgressBar>;
 export default FileProgressBar;