windmill-components 1.60.4 → 1.83.1

package/components/RunChart.svelte

@@ -16,7 +16,7 @@ $: data = {
             backgroundColor: '#f87171',
             label: 'Failed',
             data: failed?.map((job) => ({
-                x: job.created_at,
+                x: job.started_at,
                 y: job.duration_ms,
                 id: job.id,
                 path: job.script_path
@@ -27,7 +27,7 @@ $: data = {
             backgroundColor: '#4ade80',
             label: 'Successful',
             data: success?.map((job) => ({
-                x: job.created_at,
+                x: job.started_at,
                 y: job.duration_ms,
                 id: job.id,
                 path: job.script_path
@@ -40,7 +40,10 @@ const zoomOptions = {
         enabled: true,
         modifierKey: 'ctrl',
         onPanComplete: ({ chart }) => {
-            dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) });
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
         }
     },
     zoom: {
@@ -49,13 +52,28 @@ const zoomOptions = {
         },
         mode: 'x',
         onZoom: ({ chart }) => {
-            dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) });
+            dispatch('zoom', {
+                min: addSeconds(new Date(chart.scales.x.min), -1),
+                max: addSeconds(new Date(chart.scales.x.max), 1)
+            });
         }
     }
 };
 function getPath(x) {
     return x.path;
 }
+$: minTime = getMinTime(jobs);
+function addSeconds(date, seconds) {
+    date.setTime(date.getTime() + seconds * 1000);
+    return date;
+}
+function getMinTime(jobs) {
+    return addSeconds(new Date(jobs?.[jobs?.length - 1]?.started_at ?? new Date().toString()), -15);
+}
+$: maxTime = getMaxTime(jobs);
+function getMaxTime(jobs) {
+    return addSeconds(new Date(jobs?.[0]?.started_at ?? new Date().toString()), 15);
+}
 </script>
 
 <Scatter
@@ -83,7 +101,8 @@ function getPath(x) {
 					display: false
 				},
 				type: 'time',
-				min: jobs?.[jobs?.length - 1]?.created_at ?? new Date().toString()
+				min: minTime,
+				max: maxTime
 			},
 			y: {
 				grid: {

package/components/RunForm.svelte

@@ -8,6 +8,8 @@ import SharedBadge from './SharedBadge.svelte';
 import Toggle from './Toggle.svelte';
 import { userStore } from '../stores';
 import Tooltip from './Tooltip.svelte';
+import CliHelpBox from './CliHelpBox.svelte';
+import InlineCodeCopy from './InlineCodeCopy.svelte';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';
@@ -17,15 +19,18 @@ export let autofocus = false;
 export let topButton = false;
 export let loading = false;
 export let noVariablePicker = false;
+export let viewCliRun = false;
+export let isFlow;
 export let args = decodeArgs($page.url.searchParams.get('args') ?? undefined);
 export function run() {
     runAction(scheduledForStr, args, invisible_to_owner);
 }
 export let isValid = true;
-// Run later
 let viewOptions = false;
+let viewCliOptions = false;
 let scheduledForStr;
 let invisible_to_owner;
+$: cliCommand = `wmill ${isFlow ? 'flow' : 'script'} run ${runnable?.path} -d '${JSON.stringify(args)}'`;
 </script>
 
 <div class="max-w-6xl">
@@ -104,7 +109,7 @@ let invisible_to_owner;
 					</Button>
 				</div>
 				{#if viewOptions}
-					<div transition:slide class="mt-6">
+					<div transition:slide|local class="mt-6">
 						<div class="border rounded-md p-3 pt-4">
 							<div class="flex flex-row items-end">
 								<div class="w-max md:w-2/3 mt-2 mb-1">
@@ -138,7 +143,7 @@ let invisible_to_owner;
 				<div class="flex items-center gap-1">
 					<Toggle
 						options={{
-							right: `run only visible to you`
+							right: `make run invisible to others`
 						}}
 						bind:checked={invisible_to_owner}
 					/>
@@ -167,4 +172,22 @@ let invisible_to_owner;
 			{buttonText}
 		</Button>
 	{/if}
+
+	{#if viewCliRun}
+		<div class="my-10" />
+		<Button
+			color="light"
+			size="xs"
+			endIcon={{ icon: viewCliOptions ? faChevronUp : faChevronDown }}
+			on:click={() => (viewCliOptions = !viewCliOptions)}
+		>
+			Run it from the CLI
+		</Button>
+		{#if viewCliOptions}
+			<div transition:slide|local class="mt-2 px-4 pt-2">
+				<InlineCodeCopy content={cliCommand} />
+				<CliHelpBox />
+			</div>
+		{/if}
+	{/if}
 </div>

package/components/RunForm.svelte.d.ts

@@ -23,6 +23,8 @@ declare const __propDef: {
         topButton?: boolean | undefined;
         loading?: boolean | undefined;
         noVariablePicker?: boolean | undefined;
+        viewCliRun?: boolean | undefined;
+        isFlow: boolean;
         args?: Record<string, any> | undefined;
         run?: (() => void) | undefined;
         isValid?: boolean | undefined;

package/components/ScheduleEditor.svelte

@@ -165,7 +165,7 @@ let drawer;
 					bind:error={pathError}
 					bind:path
 					{initialPath}
-					namePlaceholder={'my_schedule'}
+					namePlaceholder="schedule"
 					kind="schedule"
 				/>
 				<div class="mb-8" />

package/components/SchemaEditor.svelte

@@ -9,6 +9,7 @@ import TableCustom from './TableCustom.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { flip } from 'svelte/animate';
+import Portal from 'svelte-portal';
 const dispatch = createEventDispatcher();
 export let schema = emptySchema();
 if (!schema) {
@@ -166,8 +167,10 @@ let error = '';
 			/>
 			<div class="ml-2">
 				<Tooltip>
-					Arguments can be edited either using the wizard, or by editing their json-schema
-					<a href="https://docs.windmill.dev/docs/reference/script_arguments_reference">docs</a>
+					Arguments can be edited either using the wizard, or by editing their JSON Schema,
+					<a href="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema"
+						>see docs</a
+					>
 				</Tooltip>
 			</div>
 		</div>
@@ -269,11 +272,13 @@ let error = '';
 	</div>
 </div>
 
-<SchemaModal
-	bind:this={schemaModal}
-	bind:property={modalProperty}
-	bind:error={argError}
-	on:save={handleAddOrEditArgument}
-	bind:editing
-	bind:oldArgName
-/>
+<Portal>
+	<SchemaModal
+		bind:this={schemaModal}
+		bind:property={modalProperty}
+		bind:error={argError}
+		on:save={handleAddOrEditArgument}
+		bind:editing
+		bind:oldArgName
+	/>
+</Portal>

package/components/SchemaForm.svelte

@@ -2,29 +2,23 @@
 import { workspaceStore } from '../stores';
 import { allTrue } from '../utils';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { slide } from 'svelte/transition';
 import ArgInput from './ArgInput.svelte';
 import { Button } from './common';
-import InputTransformForm from './InputTransformForm.svelte';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
-export let inputTransform = false;
 export let schema;
 export let args = {};
 export let disabledArgs = [];
 export let disabled = false;
 export let editableSchema = false;
 export let isValid = true;
-export let extraLib = 'missing extraLib';
 export let autofocus = false;
-export let previousModuleId = undefined;
 export let shouldHideNoInputs = false;
 export let compact = false;
 export let password = undefined;
 export let noVariablePicker = false;
-export let filter = undefined;
-export let noDynamicToggle = false;
 export let flexWrap = false;
+export let noDelete = false;
 let clazz = '';
 export { clazz as class };
 let inputCheck = {};
@@ -33,64 +27,86 @@ $: if (args == undefined || typeof args !== 'object') {
     args = {};
 }
 function removeExtraKey() {
+    const nargs = {};
     Object.keys(args ?? {}).forEach((key) => {
-        if (!Object.keys(schema?.properties ?? {}).includes(key)) {
-            delete args[key];
-            delete inputCheck[key];
+        if (keys.includes(key)) {
+            nargs[key] = args[key];
         }
     });
+    args = nargs;
 }
-$: schema?.properties && removeExtraKey();
 let pickForField;
 let itemPicker = undefined;
 let variableEditor = undefined;
+let keys = [];
+$: {
+    let lkeys = Object.keys(schema?.properties ?? {});
+    if (schema?.properties && JSON.stringify(lkeys) != JSON.stringify(keys)) {
+        keys = lkeys;
+        if (!noDelete) {
+            removeExtraKey();
+        }
+    }
+}
 </script>
 
 <div class="w-full {clazz} {flexWrap ? 'flex flex-row flex-wrap gap-x-6 gap-y-2' : ''}">
-	{#if Object.keys(schema?.properties ?? {}).length > 0}
-		{#each Object.keys(schema?.properties ?? {}) as argName, i (argName)}
-			{#if !filter || filter.includes(argName)}
-				<div transition:slide|local>
-					{#if inputTransform}
-						<InputTransformForm
-							{previousModuleId}
-							bind:arg={args[argName]}
-							bind:schema
-							bind:argName
-							bind:inputCheck={inputCheck[argName]}
-							bind:extraLib
-							{variableEditor}
-							{itemPicker}
-							bind:pickForField
-							{noDynamicToggle}
-						/>
-					{:else if typeof args == 'object'}
-						<ArgInput
-							autofocus={i == 0 && autofocus}
-							label={argName}
-							bind:description={schema.properties[argName].description}
-							bind:value={args[argName]}
-							type={schema.properties[argName].type}
-							required={schema.required.includes(argName)}
-							bind:pattern={schema.properties[argName].pattern}
-							bind:valid={inputCheck[argName]}
-							defaultValue={schema.properties[argName].default}
-							bind:enum_={schema.properties[argName].enum}
-							bind:format={schema.properties[argName].format}
-							contentEncoding={schema.properties[argName].contentEncoding}
-							properties={schema.properties[argName].properties}
-							bind:itemsType={schema.properties[argName].items}
-							disabled={disabledArgs.includes(argName) || disabled}
-							{editableSchema}
-							{compact}
-							password={argName == password}
-							{variableEditor}
-							{itemPicker}
-							bind:pickForField
-							bind:extra={schema.properties[argName]}
-						/>
-					{:else}
-						Expected argument to be an object, got {JSON.stringify(args)} instead
+	{#if keys.length > 0}
+		{#each keys as argName, i (argName)}
+			{#if Object.keys(schema.properties ?? {}).includes(argName)}
+				<div>
+					{#if typeof args == 'object' && schema?.properties[argName]}
+						{#if editableSchema}
+							<ArgInput
+								autofocus={i == 0 && autofocus}
+								label={argName}
+								bind:description={schema.properties[argName].description}
+								bind:value={args[argName]}
+								type={schema.properties[argName].type}
+								required={schema.required.includes(argName)}
+								bind:pattern={schema.properties[argName].pattern}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								bind:enum_={schema.properties[argName].enum}
+								bind:format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								bind:itemsType={schema.properties[argName].items}
+								disabled={disabledArgs.includes(argName) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								bind:extra={schema.properties[argName]}
+							/>
+						{:else}
+							<ArgInput
+								autofocus={i == 0 && autofocus}
+								label={argName}
+								description={schema.properties[argName].description}
+								bind:value={args[argName]}
+								type={schema.properties[argName].type}
+								required={schema.required.includes(argName)}
+								pattern={schema.properties[argName].pattern}
+								bind:valid={inputCheck[argName]}
+								defaultValue={schema.properties[argName].default}
+								enum_={schema.properties[argName].enum}
+								format={schema.properties[argName].format}
+								contentEncoding={schema.properties[argName].contentEncoding}
+								properties={schema.properties[argName].properties}
+								itemsType={schema.properties[argName].items}
+								disabled={disabledArgs.includes(argName) || disabled}
+								{editableSchema}
+								{compact}
+								password={argName == password}
+								{variableEditor}
+								{itemPicker}
+								bind:pickForField
+								extra={schema.properties[argName]}
+							/>
+						{/if}
 					{/if}
 				</div>
 			{/if}
@@ -105,11 +121,7 @@ let variableEditor = undefined;
 		bind:this={itemPicker}
 		pickCallback={(path, _) => {
 			if (pickForField) {
-				if (inputTransform) {
-					args[pickForField].value = '$var:' + path
-				} else {
-					args[pickForField] = '$var:' + path
-				}
+				args[pickForField] = '$var:' + path
 			}
 		}}
 		itemName="Variable"

package/components/SchemaForm.svelte.d.ts

@@ -2,23 +2,19 @@ import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
 declare const __propDef: {
     props: {
-        inputTransform?: boolean | undefined;
         schema: Schema;
         args?: Record<string, any> | undefined;
         disabledArgs?: string[] | undefined;
         disabled?: boolean | undefined;
         editableSchema?: boolean | undefined;
         isValid?: boolean | undefined;
-        extraLib?: string | undefined;
         autofocus?: boolean | undefined;
-        previousModuleId?: string | undefined;
         shouldHideNoInputs?: boolean | undefined;
         compact?: boolean | undefined;
         password?: string | undefined;
         noVariablePicker?: boolean | undefined;
-        filter?: string[] | undefined;
-        noDynamicToggle?: boolean | undefined;
         flexWrap?: boolean | undefined;
+        noDelete?: boolean | undefined;
         class?: string | undefined;
     };
     events: {