windmill-components 1.472.1 → 1.472.3

package/package/components/ObjectStoreConfigSettings.svelte

@@ -0,0 +1,195 @@
+<script>import { Database, Loader2 } from 'lucide-svelte';
+import Toggle from './Toggle.svelte';
+import { Button, Tab, Tabs } from './common';
+import { SettingService } from '../gen';
+import { sendUserToast } from '../toast';
+import TestConnection from './TestConnection.svelte';
+import { enterpriseLicense } from '../stores';
+export let bucket_config = undefined;
+$: bucket_config?.type == 'S3' &&
+    bucket_config.allow_http == undefined &&
+    (bucket_config.allow_http = true);
+let loading = false;
+async function testConnection() {
+    loading = true;
+    try {
+        if (bucket_config) {
+            await SettingService.testObjectStorageConfig({
+                requestBody: bucket_config
+            });
+            sendUserToast('Connection successful', false);
+        }
+    }
+    catch (e) {
+        sendUserToast(e.body, true);
+    }
+    finally {
+        loading = false;
+    }
+}
+</script>
+
+<div class="my-0.5">
+	<Toggle
+		disabled={!$enterpriseLicense}
+		options={{ right: bucket_config ? '' : 'set object store' }}
+		checked={Boolean(bucket_config)}
+		on:change={(e) => {
+			if (e.detail) {
+				bucket_config = {
+					type: 'S3',
+					bucket: '',
+					region: '',
+					access_key: '',
+					secret_key: '',
+					endpoint: ''
+				}
+			} else {
+				bucket_config = undefined
+			}
+		}}
+	/>
+</div>
+{#if bucket_config}
+	<div class="p-2">
+		<div class="flex gap-2 py-1">
+			<Button
+				spacingSize="sm"
+				size="xs"
+				btnClasses="h-8"
+				color="light"
+				variant="border"
+				on:click={testConnection}
+			>
+				{#if loading}
+					<Loader2 class="animate-spin mr-2 !h-4 !w-4" />
+				{:else}
+					<Database class="mr-2 !h-4 !w-4" />
+				{/if}
+				Test from a server
+			</Button>
+			<TestConnection
+				args={bucket_config}
+				resourceType="s3_bucket"
+				workspaceOverride="admins"
+				buttonTextOverride="Test from a worker"
+			/>
+		</div>
+		<Tabs
+			bind:selected={bucket_config.type}
+			on:selected={(e) => {
+				if (e.detail === 'S3') {
+					bucket_config = {
+						type: 'S3',
+						bucket: '',
+						region: '',
+						access_key: '',
+						secret_key: '',
+						endpoint: ''
+					}
+				} else if (e.detail === 'Azure') {
+					bucket_config = {
+						type: 'Azure',
+						accountName: '',
+						containerName: '',
+						useSSL: false,
+						tenantId: '',
+						clientId: '',
+						accessKey: ''
+					}
+				}
+			}}
+		>
+			<Tab size="sm" value="S3">S3</Tab>
+			<Tab size="sm" value="Azure">Azure Blob</Tab>
+		</Tabs>
+		<div class="flex flex-col gap-2 mt-2 p-2 border rounded-md">
+			{#if bucket_config.type === 'S3'}
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Bucket</span>
+					<input type="text" placeholder="bucket-name" bind:value={bucket_config.bucket} />
+				</label>
+
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Region</span>
+					<span class="text-tertiary text-2xs"
+						>If left empty, will be derived automatically from $AWS_REGION</span
+					>
+					<input type="text" bind:value={bucket_config.region} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Access key ID</span>
+					<span class="text-tertiary text-2xs"
+						>If left empty, will be derived automatically from $AWS_ACCESS_KEY_ID, pod or ec2
+						profile</span
+					>
+					<input type="text" bind:value={bucket_config.access_key} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Secret key</span>
+					<span class="text-tertiary text-2xs"
+						>If left empty, will be derived automatically from $AWS_SECRET_KEY, pod or ec2 profile</span
+					>
+					<input
+						type="password"
+						autocomplete="new-password"
+						bind:value={bucket_config.secret_key}
+					/>
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Endpoint</span>
+					<span class="text-tertiary text-2xs"
+						>Only needed for non AWS S3 providers like R2 or MinIo</span
+					>
+					<input type="text" bind:value={bucket_config.endpoint} />
+				</label>
+				<div class="block pb-2">
+					<span class="text-tertiary text-2xs">Disable if using https only policy</span>
+					<div>
+						<Toggle bind:checked={bucket_config.allow_http} options={{ right: 'Allow http' }} />
+					</div>
+				</div>
+			{:else if bucket_config.type === 'Azure'}
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Account name</span>
+					<input type="text" placeholder="account-name" bind:value={bucket_config.accountName} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Container name</span>
+					<input
+						type="text"
+						placeholder="container-name"
+						bind:value={bucket_config.containerName}
+					/>
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm">Access key</span>
+					<input type="password" autocomplete="new-password" bind:value={bucket_config.accessKey} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm"
+						>Tenant ID <span class="text-2xs text-tertiary">(optional)</span></span
+					>
+					<input type="text" bind:value={bucket_config.tenantId} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm"
+						>Client ID <span class="text-2xs text-tertiary">(optional)</span></span
+					>
+					<input type="text" bind:value={bucket_config.clientId} />
+				</label>
+				<label class="block pb-2">
+					<span class="text-primary font-semibold text-sm"
+						>Endpoint <span class="text-2xs text-tertiary">(optional)</span></span
+					>
+					<span class="text-tertiary text-2xs"
+						>Only needed for non Azure Blob providers like Azurite</span
+					>
+					<input type="text" bind:value={bucket_config.endpoint} />
+				</label>
+			{:else}
+				<div>Unknown bucket type {bucket_config['type']}</div>
+			{/if}
+		</div>
+	</div>
+{/if}

package/package/components/ObjectStoreConfigSettings.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        bucket_config?: {
+            type: 'S3';
+            bucket: string;
+            region: string;
+            access_key: string;
+            secret_key: string;
+            endpoint: string;
+            allow_http?: boolean | undefined;
+        } | {
+            type: 'Azure';
+            accountName: string;
+            containerName: string;
+            useSSL?: boolean | undefined;
+            tenantId: string;
+            clientId: string;
+            accessKey: string;
+            endpoint?: string | undefined;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ObjectStoreConfigSettingsProps = typeof __propDef.props;
+export type ObjectStoreConfigSettingsEvents = typeof __propDef.events;
+export type ObjectStoreConfigSettingsSlots = typeof __propDef.slots;
+export default class ObjectStoreConfigSettings extends SvelteComponent<ObjectStoreConfigSettingsProps, ObjectStoreConfigSettingsEvents, ObjectStoreConfigSettingsSlots> {
+}
+export {};

package/package/components/ObjectTypeNarrowing.svelte

@@ -0,0 +1,18 @@
+<script>import { createEventDispatcher } from 'svelte';
+import ResourceTypePicker from './ResourceTypePicker.svelte';
+export let format;
+let resource = format?.startsWith('resource-')
+    ? format.substring('resource-'.length)
+    : undefined;
+const dispatch = createEventDispatcher();
+</script>
+
+<ResourceTypePicker
+	on:click={(e) => {
+		resource = e.detail
+		format = resource != undefined ? `resource-${resource}` : undefined
+		dispatch('change', format)
+	}}
+	value={resource}
+	nonePickable={true}
+/>

package/package/components/ObjectTypeNarrowing.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        format: string | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ObjectTypeNarrowingProps = typeof __propDef.props;
+export type ObjectTypeNarrowingEvents = typeof __propDef.events;
+export type ObjectTypeNarrowingSlots = typeof __propDef.slots;
+export default class ObjectTypeNarrowing extends SvelteComponent<ObjectTypeNarrowingProps, ObjectTypeNarrowingEvents, ObjectTypeNarrowingSlots> {
+}
+export {};

package/package/components/OktaSetting.svelte

@@ -0,0 +1,108 @@
+<script>import CollapseLink from './CollapseLink.svelte';
+import IconedResourceType from './IconedResourceType.svelte';
+import Toggle from './Toggle.svelte';
+import Tooltip from './Tooltip.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+export let value;
+$: enabled = value != undefined;
+$: changeDomain(value?.['domain'], value?.['custom']);
+function changeDomain(domain, custom) {
+    if (value) {
+        let baseUrl = custom ? `https://${domain}` : `https://${domain}.okta.com`;
+        value = {
+            ...value,
+            login_config: {
+                auth_url: `${baseUrl}/oauth2/v1/authorize`,
+                token_url: `${baseUrl}/oauth2/v1/token`,
+                userinfo_url: `${baseUrl}/oauth2/v1/userinfo`,
+                scopes: ['openid', 'profile', 'email']
+            },
+            connect_config: {
+                auth_url: `${baseUrl}/oauth2/v1/authorize`,
+                token_url: `${baseUrl}/oauth2/v1/token`,
+                scopes: ['openid', 'profile', 'email']
+            }
+        };
+    }
+}
+</script>
+
+<div class="flex flex-col gap-1">
+	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<label class="text-sm font-medium text-primary flex gap-4 items-center"
+		><div class="w-[120px]"><IconedResourceType name="okta" after={true} /></div><Toggle
+			checked={enabled}
+			on:change={(e) => {
+				if (e.detail) {
+					value = { id: '', secret: '', domain: '', custom: false }
+				} else {
+					value = undefined
+				}
+			}}
+		/></label
+	>
+	{#if enabled}
+		<div class="p-2 rounded border">
+			<label class="block pb-2">
+				<div class="flex gap-2 items-end">
+					<div>
+						<ToggleButtonGroup
+							selected={value['custom'] ? 'custom' : 'org'}
+							on:selected={({ detail }) => {
+								value['custom'] = detail === 'custom'
+							}}
+							let:item
+						>
+							<ToggleButton value="org" label={'Org'} {item} />
+							<ToggleButton value="custom" label="Custom" {item} />
+						</ToggleButtonGroup>
+					</div>
+					<div class="grow">
+						<span class="text-primary font-semibold text-sm"
+							>{#if value['custom']}Custom ({'https://<domain>'}){:else}
+								Org ({'https://<your org>.okta.com'}){/if}</span
+						>
+						<input type="text" placeholder="yourorg" bind:value={value['domain']} />
+					</div>
+				</div>
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm">Custom Name</span>
+				<input type="text" placeholder="Custom Name" bind:value={value['display_name']} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm"
+					>Client Id <Tooltip
+						>Client credential from the client ID section of the okta service configuration</Tooltip
+					></span
+				>
+				<input type="text" placeholder="Client Id" bind:value={value['id']} />
+			</label>
+			<label class="block pb-2">
+				<span class="text-primary font-semibold text-sm"
+					>Client Secret <Tooltip
+						>from the CLIENT SECRETS section of the okta service configuration</Tooltip
+					></span
+				>
+				<input type="text" placeholder="Client Secret" bind:value={value['secret']} />
+			</label>
+			<CollapseLink text="Instructions">
+				<div class="text-sm text-secondary border p-2">
+					From your Admin page, setup windmill using the service flow <br />Create a new app
+					integration <br />a. For "sign-in method" select "OIDC - Open ID Connect" <br />
+					b. For "application type" select "Web Appliction" <br />
+					Select all of the following options for Grant type of "Client acting on behalf of a user":
+					<br /> Authorization Code Refresh Token Implicit (hybrid) <br />
+					Allow ID Token with implicit grant type <br />
+					Allow Access Token with implicit grant type <br />
+					For Refresh Token, select "Rotate token after every use" <br />
+					Under "LOGIN", set the following: <br />"Sign-in redirect URIs"
+					`BASE_URL/user/login_callback/okta`<br />
+					"Sign-out redirect URIs" `BASE_URL/auth/logout` <br />"Login initiated by" App Only <br />
+					"Initiate login URI" `BASE_URL/user/login`
+				</div>
+			</CollapseLink>
+		</div>
+	{/if}
+</div>

package/package/components/OktaSetting.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type OktaSettingProps = typeof __propDef.props;
+export type OktaSettingEvents = typeof __propDef.events;
+export type OktaSettingSlots = typeof __propDef.slots;
+export default class OktaSetting extends SvelteComponent<OktaSettingProps, OktaSettingEvents, OktaSettingSlots> {
+}
+export {};

package/package/components/PageHeader.svelte

@@ -0,0 +1,34 @@
+<script>import Tooltip from './Tooltip.svelte';
+export let title;
+export let tooltip = '';
+export let documentationLink = undefined;
+export let primary = true;
+</script>
+
+<div class="flex flex-row flex-wrap justify-between pb-2 my-4 mr-2">
+	{#if primary}
+		<span class="flex items-center gap-2">
+			<h1 class="!text-2xl font-semibold whitespace-nowrap leading-6 tracking-tight">{title}</h1>
+			{#if tooltip != '' || documentationLink}
+				<Tooltip {documentationLink}>
+					{tooltip}
+				</Tooltip>
+			{/if}
+		</span>
+	{:else}
+		<span class="flex items-center gap-2">
+			<h2 class="!text-sm font-semibold">{title}</h2>
+			{#if tooltip != '' || documentationLink}
+				<Tooltip {documentationLink} wrapperClass="mb-0.5">
+					{tooltip}
+				</Tooltip>
+			{/if}
+		</span>
+	{/if}
+
+	{#if $$slots.default}
+		<div class="my-2">
+			<slot />
+		</div>
+	{/if}
+</div>

package/package/components/PageHeader.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        tooltip?: string | undefined;
+        documentationLink?: string | undefined;
+        primary?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type PageHeaderProps = typeof __propDef.props;
+export type PageHeaderEvents = typeof __propDef.events;
+export type PageHeaderSlots = typeof __propDef.slots;
+export default class PageHeader extends SvelteComponent<PageHeaderProps, PageHeaderEvents, PageHeaderSlots> {
+}
+export {};

package/package/components/ParqetCsvTableRenderer.svelte

@@ -0,0 +1,204 @@
+<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 { base } from '../base';
+import { enterpriseLicense, workspaceStore } from '../stores';
+import { Download } from 'lucide-svelte';
+import { Loader2 } 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 lastSearch = undefined;
+let nbRows = undefined;
+let csvSeparatorChar = ',';
+let datasource = {
+    rowCount: 0,
+    getRows: async function (params) {
+        try {
+            const searchCol = params.filterModel ? Object.keys(params.filterModel)?.[0] : undefined;
+            const searchTerm = searchCol ? params.filterModel?.[searchCol]?.filter : undefined;
+            const csv = s3resource.endsWith('.csv');
+            const newSearch = searchCol ? searchCol + searchTerm : undefined;
+            if (!nbRows || lastSearch != newSearch) {
+                nbRows = undefined;
+                const res = await HelpersService.loadTableRowCount({
+                    workspace: workspaceId ?? $workspaceStore,
+                    path: s3resource,
+                    searchCol: searchCol,
+                    storage,
+                    searchTerm
+                });
+                nbRows = res.count;
+                lastSearch = newSearch;
+            }
+            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,
+                searchTerm,
+                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, nbRows);
+        }
+        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="{base}/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}
+
+	{#if nbRows != undefined}
+		<div class="text-secondary ml-0.5 text-2xs">{nbRows} rows</div>
+	{:else}
+		<Loader2 class="animate-spin ml-0.5" size={12} />
+	{/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 {};