windmill-components 1.309.7 → 1.352.0

package/package/components/runs/RunsTable.svelte

@@ -1,19 +1,33 @@
 <script>import RunRow from './RunRow.svelte';
 import VirtualList from 'svelte-tiny-virtual-list';
 import { createEventDispatcher, onMount } from 'svelte';
+import Tooltip from '../Tooltip.svelte';
+import { AlertTriangle } from 'lucide-svelte';
+import Popover from '../Popover.svelte';
+import { workspaceStore } from '../../stores';
 //import InfiniteLoading from 'svelte-infinite-loading'
 export let jobs = undefined;
-export let selectedId = undefined;
+export let externalJobs = [];
+export let omittedObscuredJobs;
+export let showExternalJobs = false;
+export let isSelectingJobsToCancel = false;
+export let selectedIds = [];
 export let selectedWorkspace = undefined;
+export let activeLabel = null;
 // const loadMoreQuantity: number = 100
 function getTime(job) {
     return job['started_at'] ?? job['scheduled_for'] ?? job['created_at'];
 }
+let containsLabel = false;
 function groupJobsByDay(jobs) {
     const groupedLogs = {};
     if (!jobs)
         return groupedLogs;
+    let newContainsLabel = false;
     for (const job of jobs) {
+        if (job?.['labels'] != undefined) {
+            newContainsLabel = true;
+        }
         const field = getTime(job);
         if (field) {
             const date = new Date(field);
@@ -29,6 +43,7 @@ function groupJobsByDay(jobs) {
             groupedLogs[day].push(job);
         }
     }
+    containsLabel = newContainsLabel;
     for (const day in groupedLogs) {
         groupedLogs[day].sort((a, b) => {
             return new Date(getTime(b)).getTime() - new Date(getTime(a)).getTime();
@@ -44,7 +59,11 @@ function groupJobsByDay(jobs) {
     });
     return sortedLogs;
 }
-$: groupedJobs = jobs ? groupJobsByDay(jobs) : undefined;
+$: groupedJobs = jobs
+    ? showExternalJobs
+        ? groupJobsByDay([...jobs, ...externalJobs])
+        : groupJobsByDay(jobs)
+    : undefined;
 function flattenJobs(groupedJobs) {
     const flatJobs = [];
     for (const [date, jobsByDay] of Object.entries(groupedJobs)) {
@@ -86,6 +105,11 @@ function infiniteHandler({ detail: { loaded, error, complete } }) {
     }
 }
 */
+function jobCountString(jobCount) {
+    const jc = jobCount;
+    const isTruncated = jc >= 1000;
+    return `${jc}${isTruncated ? '+' : ''} job${jc != 1 ? 's' : ''}`;
+}
 function computeHeight() {
     tableHeight = document.querySelector('#runs-table-wrapper').parentElement?.clientHeight ?? 0;
 }
@@ -106,11 +130,33 @@ const dispatch = createEventDispatcher();
 		class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4"
 		bind:clientHeight={header}
 	>
-		<div class="w-1/12 text-2xs"
-			>{jobs?.length == 1000 ? '1000+' : jobs ? jobs.length.toString() : '...'} jobs</div
-		>
+		{#if showExternalJobs && externalJobs.length > 0}
+			<div class="w-1/12 text-2xs">
+				<div class="flex flex-row">
+					{jobs && jobCountString(jobs.length + externalJobs.length)}<Tooltip
+						>{externalJobs.length} jobs obscured</Tooltip
+					>
+				</div>
+			</div>
+		{:else if $workspaceStore !== 'admins' && omittedObscuredJobs}
+			<div class="w-1/12 text-2xs flex flex-row">
+				{jobs && jobCountString(jobs.length)}
+				<Popover>
+					<AlertTriangle size={16} class="ml-0.5 text-yellow-500" />
+					<svelte:fragment slot="text">
+						Too specific filtering may have caused the omission of obscured jobs. This is done for
+						security reasons. To see obscured jobs, try removing some filters.
+					</svelte:fragment>
+				</Popover>
+			</div>
+		{:else}
+			<div class="w-1/12 text-2xs">{jobs && jobCountString(jobs.length)}</div>
+		{/if}
 		<div class="w-4/12 text-xs font-semibold">Timestamp</div>
 		<div class="w-4/12 text-xs font-semibold">Path</div>
+		{#if containsLabel}
+			<div class="w-3/12 text-xs font-semibold">Label</div>
+		{/if}
 		<div class="w-3/12 text-xs font-semibold">Triggered by</div>
 	</div>
 
@@ -133,16 +179,31 @@ const dispatch = createEventDispatcher();
 					{:else}
 						<div class="flex flex-row items-center h-full w-full">
 							<RunRow
+								{containsLabel}
 								job={jobOrDate.job}
-								{selectedId}
+								selected={jobOrDate.job.id !== '-' && selectedIds.includes(jobOrDate.job.id)}
+								{isSelectingJobsToCancel}
 								on:select={() => {
-									selectedWorkspace = jobOrDate.job.workspace_id
-									selectedId = jobOrDate.job.id
-									dispatch('select')
+									const jobId = jobOrDate.job.id
+									if (isSelectingJobsToCancel) {
+										if (selectedIds.includes(jobOrDate.job.id)) {
+											selectedIds = selectedIds.filter((id) => id != jobId)
+										} else {
+											selectedIds.push(jobId)
+											selectedIds = selectedIds
+										}
+									} else {
+										selectedWorkspace = jobOrDate.job.workspace_id
+										selectedIds = [jobOrDate.job.id]
+										dispatch('select')
+									}
 								}}
+								{activeLabel}
+								on:filterByLabel
 								on:filterByPath
 								on:filterByUser
 								on:filterByFolder
+								on:filterByConcurrencyKey
 								{containerWidth}
 							/>
 						</div>
@@ -161,7 +222,7 @@ const dispatch = createEventDispatcher();
 		</div>
 	</VirtualList>
 </div>
-{#if jobs?.length == 0}
+{#if jobs?.length == 0 && (!showExternalJobs || externalJobs?.length == 0)}
 	<tr>
 		<td colspan="4" class="text-center py-8">
 			<div class="text-xs text-secondary"> No jobs found for the selected filters. </div>

package/package/components/runs/RunsTable.svelte.d.ts

@@ -3,13 +3,20 @@ import type { Job } from '../../gen';
 declare const __propDef: {
     props: {
         jobs?: Job[] | undefined;
-        selectedId?: string | undefined;
+        externalJobs?: Job[] | undefined;
+        omittedObscuredJobs: boolean;
+        showExternalJobs?: boolean | undefined;
+        isSelectingJobsToCancel?: boolean | undefined;
+        selectedIds?: string[] | undefined;
         selectedWorkspace?: string | undefined;
+        activeLabel?: string | null | undefined;
     };
     events: {
+        filterByLabel: CustomEvent<any>;
         filterByPath: CustomEvent<any>;
         filterByUser: CustomEvent<any>;
         filterByFolder: CustomEvent<any>;
+        filterByConcurrencyKey: CustomEvent<any>;
         select: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/schema/AddProperty.svelte

@@ -0,0 +1,149 @@
+<script>import { modalToSchema } from '../../common';
+import { emptySchema, sendUserToast } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+import AddPropertyForm from './AddPropertyForm.svelte';
+export let schema = emptySchema();
+export const DEFAULT_PROPERTY = {
+    selectedType: 'string',
+    description: '',
+    name: '',
+    required: false
+};
+const dispatch = createEventDispatcher();
+if (!schema) {
+    schema = emptySchema();
+}
+let schemaString = '';
+// Internal state: bound to args builder modal
+let argError = '';
+let editing = false;
+let oldArgName; // when editing argument and changing name
+let jsonEditor;
+reorder();
+function reorder() {
+    if (schema.order && Array.isArray(schema.order)) {
+        const n = {};
+        schema.order.forEach((x) => {
+            if (schema.properties && schema.properties[x] != undefined) {
+                n[x] = schema.properties[x];
+            }
+        });
+        Object.keys(schema.properties ?? {})
+            .filter((x) => !schema.order?.includes(x))
+            .forEach((x) => {
+            n[x] = schema.properties[x];
+        });
+        schema.properties = n;
+    }
+}
+function syncOrders() {
+    if (schema) {
+        schema.order = Object.keys(schema.properties ?? {});
+    }
+}
+function handleAddOrEditArgument(modalProperty) {
+    // If editing the arg's name, oldName containing the old argument name must be provided
+    argError = '';
+    modalProperty.name = modalProperty.name.trim();
+    if (modalProperty.name.length === 0) {
+        argError = 'Arguments need to have a name';
+    }
+    else if (Object.keys(schema.properties ?? {}).includes(modalProperty.name) &&
+        (!editing || (editing && oldArgName && oldArgName !== modalProperty.name))) {
+        argError = 'There is already an argument with this name';
+    }
+    else {
+        if (!schema.properties) {
+            schema.properties = {};
+        }
+        if (!schema.required) {
+            schema.required = [];
+        }
+        if (!schema.order || !Array.isArray(schema.order)) {
+            syncOrders();
+        }
+        schema.properties[modalProperty.name] = modalToSchema(modalProperty);
+        if (modalProperty.required) {
+            if (!schema.required.includes(modalProperty.name)) {
+                schema.required.push(modalProperty.name);
+            }
+        }
+        else if (schema.required.includes(modalProperty.name)) {
+            const index = schema.required.indexOf(modalProperty.name, 0);
+            if (index > -1) {
+                schema.required.splice(index, 1);
+            }
+        }
+        if (editing && oldArgName && oldArgName !== modalProperty.name) {
+            let oldPosition = schema.order.indexOf(oldArgName);
+            schema.order[oldPosition] = modalProperty.name;
+            reorder();
+            handleDeleteArgument([oldArgName]);
+        }
+        if (!schema.order?.includes(modalProperty.name)) {
+            schema.order.push(modalProperty.name);
+        }
+        modalProperty = Object.assign({}, DEFAULT_PROPERTY);
+        editing = false;
+        oldArgName = undefined;
+    }
+    schema = schema;
+    schemaString = JSON.stringify(schema, null, '\t');
+    jsonEditor?.setCode(schemaString);
+    if (argError !== '') {
+        sendUserToast(argError, true);
+    }
+    dispatch('change', schema);
+}
+export function handleDeleteArgument(argPath) {
+    try {
+        let modifiedObject = schema;
+        let modifiedProperties = modifiedObject.properties;
+        let argName = argPath.pop();
+        argPath.forEach((property) => {
+            if (Object.keys(modifiedProperties).includes(property)) {
+                modifiedObject = modifiedProperties[property];
+                modifiedProperties = modifiedObject.properties;
+            }
+            else {
+                throw Error('Nested argument not found!');
+            }
+        });
+        if (Object.keys(modifiedProperties).includes(argName)) {
+            delete modifiedProperties[argName];
+            modifiedObject.required = schema.required.filter((arg) => arg !== argName);
+            if (modifiedObject.order) {
+                modifiedObject.order = modifiedObject.order.filter((arg) => arg !== argName);
+            }
+            schema = schema;
+            schemaString = JSON.stringify(schema, null, '\t');
+            dispatch('change', schema);
+        }
+        else {
+            throw Error('Argument not found!');
+        }
+        syncOrders();
+        dispatch('change', schema);
+    }
+    catch (err) {
+        sendUserToast(`Could not delete argument: ${err}`, true);
+    }
+}
+</script>
+
+<div class="flex">
+	<AddPropertyForm
+		on:add={(e) => {
+			try {
+				handleAddOrEditArgument({
+					...DEFAULT_PROPERTY,
+					selectedType: 'string',
+					name: e.detail.name
+				})
+			} catch (err) {
+				sendUserToast(`Could not add argument: ${err}`, true)
+			}
+		}}
+	/>
+</div>

package/package/components/schema/AddProperty.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Schema, type ModalSchemaProperty } from '../../common';
+declare const __propDef: {
+    props: {
+        schema?: Schema | any;
+        DEFAULT_PROPERTY?: ModalSchemaProperty | undefined;
+        handleDeleteArgument?: ((argPath: string[]) => void) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AddPropertyProps = typeof __propDef.props;
+export type AddPropertyEvents = typeof __propDef.events;
+export type AddPropertySlots = typeof __propDef.slots;
+export default class AddProperty extends SvelteComponent<AddPropertyProps, AddPropertyEvents, AddPropertySlots> {
+    get DEFAULT_PROPERTY(): ModalSchemaProperty;
+    get handleDeleteArgument(): (argPath: string[]) => void;
+}
+export {};

package/package/components/schema/AddPropertyForm.svelte

@@ -0,0 +1,33 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { Button } from '../common';
+import { Plus } from 'lucide-svelte';
+let name = '';
+const dispatch = createEventDispatcher();
+function addField() {
+    dispatch('add', { name });
+    name = '';
+}
+</script>
+
+<div class="flex flex-row gap-2">
+	<input
+		bind:value={name}
+		placeholder="Field name"
+		on:keydown={(event) => {
+			if (event.key === 'Enter') {
+				addField()
+			}
+		}}
+	/>
+	<Button
+		variant="contained"
+		color="dark"
+		size="xs"
+		startIcon={{ icon: Plus }}
+		id="flow-editor-add-property"
+		on:click={addField}
+		disabled={!name}
+	>
+		Add field
+	</Button>
+</div>

package/package/components/schema/AddPropertyForm.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        add: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AddPropertyFormProps = typeof __propDef.props;
+export type AddPropertyFormEvents = typeof __propDef.events;
+export type AddPropertyFormSlots = typeof __propDef.slots;
+export default class AddPropertyForm extends SvelteComponent<AddPropertyFormProps, AddPropertyFormEvents, AddPropertyFormSlots> {
+}
+export {};

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -0,0 +1,198 @@
+<script>import { GripVertical, Pen, Trash } from 'lucide-svelte';
+import EditableSchemaForm from '../EditableSchemaForm.svelte';
+import { Drawer, DrawerContent } from '../common';
+import AddProperty from './AddProperty.svelte';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
+import { flip } from 'svelte/animate';
+import { emptyString, generateRandomString } from '../../utils';
+import Button from '../common/button/Button.svelte';
+import { createEventDispatcher, tick } from 'svelte';
+import Label from '../Label.svelte';
+import Toggle from '../Toggle.svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+export let schema;
+export let parentId = undefined;
+const flipDurationMs = 200;
+const dispatch = createEventDispatcher();
+let addProperty = undefined;
+let schemaFormDrawer = undefined;
+let editableSchemaForm = undefined;
+$: items = ((schema?.order ?? Object.keys(schema.properties ?? {}))?.map((item, index) => {
+    return { value: item, id: generateRandomString() };
+}) ?? []);
+function handleConsider(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+function handleFinalize(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+    const keys = items.map((item) => item.value);
+    schema.properties = keys.reduce((acc, key) => {
+        acc[key] = schema.properties[key];
+        return acc;
+    }, {});
+    schema.order = keys;
+    schema = { ...schema };
+    dispatch('change', schema);
+}
+const yOffset = 49;
+export let jsonView = false;
+let schemaString = JSON.stringify(schema, null, '\t');
+let editor = undefined;
+let error = undefined;
+</script>
+
+<div class="flex flex-col items-end mb-2 w-full">
+	<Toggle
+		bind:checked={jsonView}
+		label="JSON View"
+		size="xs"
+		options={{
+			right: 'JSON Editor',
+			rightTooltip:
+				'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
+		}}
+		lightMode
+		on:change={() => {
+			schemaString = JSON.stringify(schema, null, '\t')
+			editor?.setCode(schemaString)
+		}}
+	/>
+</div>
+
+<AddProperty
+	on:change={() => {
+		if (jsonView) {
+			schemaString = JSON.stringify(schema, null, '\t')
+			editor?.setCode(schemaString)
+		}
+		dispatch('change', schema)
+	}}
+	bind:schema
+	bind:this={addProperty}
+/>
+
+{#if !jsonView}
+	<div
+		use:dragHandleZone={{
+			items,
+			flipDurationMs,
+			dropTargetStyle: {},
+			type: parentId ? `app-editor-fields-${parentId}` : 'app-editor-fields'
+		}}
+		on:consider={handleConsider}
+		on:finalize={handleFinalize}
+		class="gap-1 flex flex-col mt-2"
+	>
+		{#if items?.length > 0}
+			{#each items as item (item.id)}
+				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+				<div
+					animate:flip={{ duration: 200 }}
+					class="w-full flex flex-col justify-between border items-center py-1 px-2 rounded-md bg-surface text-sm"
+				>
+					{#if schema.properties?.[item.value]}
+						<div class="flex flex-row justify-between items-center w-full">
+							{`${item.value}${
+								schema.properties?.[item.value]?.title
+									? ` (title: ${schema.properties?.[item.value]?.title})`
+									: ''
+							} `}
+							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div class="flex flex-row gap-1 item-center h-full justify-center">
+								<Button
+									iconOnly
+									size="xs2"
+									color="light"
+									startIcon={{ icon: Trash }}
+									on:click={() => {
+										addProperty?.handleDeleteArgument([item.value])
+									}}
+								/>
+								<Button
+									iconOnly
+									size="xs2"
+									color="light"
+									startIcon={{ icon: Pen }}
+									on:click={() => {
+										schemaFormDrawer?.openDrawer()
+
+										tick().then(() => {
+											editableSchemaForm?.openField(item.value)
+										})
+									}}
+								/>
+
+								<div class="cursor-move flex items-center handle" use:dragHandle>
+									<GripVertical size={16} />
+								</div>
+							</div>
+						</div>
+
+						{#if schema.properties[item.value]?.type === 'object' && !(schema.properties[item.value].oneOf && schema.properties[item.value].oneOf.length >= 2)}
+							<div class="flex flex-col w-full mt-2">
+								<Label label="Nested Properties">
+									<svelte:self
+										on:change={() => (schema = schema)}
+										schema={schema.properties[item.value]}
+										parentId={item.value}
+									/>
+								</Label>
+							</div>
+						{/if}
+					{:else}
+						<div class="text-tertiary"> Value is undefined </div>
+					{/if}
+				</div>
+			{/each}
+		{/if}
+	</div>
+
+	<Drawer bind:this={schemaFormDrawer} size="1200px">
+		<DrawerContent noPadding title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<AddProperty bind:schema />
+			</svelte:fragment>
+			<EditableSchemaForm
+				bind:this={editableSchemaForm}
+				bind:schema
+				isAppInput
+				on:edit={(e) => {
+					addProperty?.openDrawer(e.detail)
+				}}
+				on:delete={(e) => {
+					addProperty?.handleDeleteArgument([e.detail])
+				}}
+				offset={yOffset}
+				lightweightMode
+				dndType="drawer"
+			/>
+		</DrawerContent>
+	</Drawer>
+{:else}
+	<div class="mt-2" />
+	<SimpleEditor
+		bind:this={editor}
+		small
+		fixedOverflowWidgets={false}
+		on:change={() => {
+			try {
+				schema = JSON.parse(schemaString)
+				error = ''
+			} catch (err) {
+				error = err.message
+			}
+		}}
+		bind:code={schemaString}
+		lang="json"
+		autoHeight
+		automaticLayout
+	/>
+	{#if !emptyString(error)}
+		<div class="text-red-400 text-xs">{error}</div>
+	{:else}
+		<div><br /> </div>
+	{/if}
+{/if}

package/package/components/schema/EditableSchemaDrawer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { Schema } from '../../common';
+declare const __propDef: {
+    props: {
+        schema: Schema | undefined | any;
+        parentId?: string | undefined;
+        jsonView?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditableSchemaDrawerProps = typeof __propDef.props;
+export type EditableSchemaDrawerEvents = typeof __propDef.events;
+export type EditableSchemaDrawerSlots = typeof __propDef.slots;
+export default class EditableSchemaDrawer extends SvelteComponent<EditableSchemaDrawerProps, EditableSchemaDrawerEvents, EditableSchemaDrawerSlots> {
+}
+export {};

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -0,0 +1,31 @@
+<script>import { twMerge } from 'tailwind-merge';
+import EditableSchemaForm from '../EditableSchemaForm.svelte';
+import AddProperty from './AddProperty.svelte';
+export let schema;
+export let offset = 0;
+export let uiOnly = false;
+export let noPreview = false;
+export let fullHeight = true;
+export let lightweightMode = false;
+let addProperty = undefined;
+</script>
+
+<div class={twMerge(fullHeight ? 'h-full' : 'h-80', 'border overflow-y-auto rounded-md')}>
+	<div class="p-4 border-b">
+		<AddProperty bind:schema bind:this={addProperty} />
+	</div>
+	<EditableSchemaForm
+		bind:schema
+		isFlowInput
+		on:edit={(e) => {
+			addProperty?.openDrawer(e.detail)
+		}}
+		on:delete={(e) => {
+			addProperty?.handleDeleteArgument([e.detail])
+		}}
+		{offset}
+		{uiOnly}
+		{noPreview}
+		{lightweightMode}
+	/>
+</div>

package/package/components/schema/EditableSchemaWrapper.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { Schema } from '../../common';
+declare const __propDef: {
+    props: {
+        schema: Schema | undefined | any;
+        offset?: number | undefined;
+        uiOnly?: boolean | undefined;
+        noPreview?: boolean | undefined;
+        fullHeight?: boolean | undefined;
+        lightweightMode?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditableSchemaWrapperProps = typeof __propDef.props;
+export type EditableSchemaWrapperEvents = typeof __propDef.events;
+export type EditableSchemaWrapperSlots = typeof __propDef.slots;
+export default class EditableSchemaWrapper extends SvelteComponent<EditableSchemaWrapperProps, EditableSchemaWrapperEvents, EditableSchemaWrapperSlots> {
+}
+export {};