windmill-components 1.109.8 → 1.121.0

package/package/components/SuperadminSettings.svelte

@@ -1,4 +1,4 @@
-<script>import { UserService, SettingsService, GlobalUserInfo } from '../gen';
+<script>import { UserService, GlobalUserInfo } from '../gen';
 import TableCustom from './TableCustom.svelte';
 import PageHeader from './PageHeader.svelte';
 import InviteGlobalUser from './InviteGlobalUser.svelte';
@@ -7,29 +7,27 @@ import { sendUserToast } from '../toast';
 import SearchItems from './SearchItems.svelte';
 import { page } from '$app/stores';
 import { goto } from '$app/navigation';
+import Version from './Version.svelte';
+import Uptodate from './Uptodate.svelte';
 let drawer;
 let filter = '';
 export function openDrawer() {
-    loadVersion();
     listUsers();
     drawer?.openDrawer?.();
 }
-export function toggleDrawer() {
-    drawer?.toggleDrawer?.();
-}
 export function closeDrawer() {
     drawer?.closeDrawer();
+    removeHash();
+}
+function removeHash() {
     const index = $page.url.href.lastIndexOf('#');
-    const href = $page.url.href;
-    const hashRemoved = index === -1 ? href : href.slice(0, index);
+    if (index === -1)
+        return;
+    const hashRemoved = $page.url.href.slice(0, index);
     goto(hashRemoved);
 }
-let version;
 let users = [];
 let filteredUsers = [];
-async function loadVersion() {
-    version = await SettingsService.backendVersion();
-}
 async function listUsers() {
     users = await UserService.listUsersAsSuperAdmin({ perPage: 100000 });
 }
@@ -42,12 +40,12 @@ async function listUsers() {
 	f={(x) => x.email + ' ' + x.name + ' ' + x.company}
 />
 
-<Drawer bind:this={drawer} on:open={listUsers} size="900px">
+<Drawer bind:this={drawer} on:open={listUsers} size="900px" on:clickAway={removeHash}>
 	<DrawerContent overflow_y={false} title="Superadmin Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
-				<div class="text-xs pt-1 text-gray-500">
-					Windmill {version}
+				<div class="text-xs pt-1 text-gray-500 flex flex-col">
+					<div>Windmill <Version /></div><div><Uptodate /></div>
 				</div>
 
 				<PageHeader title="All global users" primary={false} />

package/package/components/SuperadminSettings.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         openDrawer?: (() => void) | undefined;
-        toggleDrawer?: (() => void) | undefined;
         closeDrawer?: (() => void) | undefined;
     };
     events: {
@@ -15,7 +14,6 @@ export type SuperadminSettingsEvents = typeof __propDef.events;
 export type SuperadminSettingsSlots = typeof __propDef.slots;
 export default class SuperadminSettings extends SvelteComponentTyped<SuperadminSettingsProps, SuperadminSettingsEvents, SuperadminSettingsSlots> {
     get openDrawer(): () => void;
-    get toggleDrawer(): () => void;
     get closeDrawer(): () => void;
 }
 export {};

package/package/components/Toast.svelte

@@ -54,7 +54,7 @@ onMount(() => {
 				</button>
 			</div>
 		</div>
-		<div class="mt-2 flex flex-row gap-2 h-15">
+		<div class="mt-2 flex flex-col gap-2 h-15">
 			{#each actions as action, index (index)}
 				<Button
 					on:click={() => {

package/package/components/Uptodate.svelte

@@ -0,0 +1,26 @@
+<script>import { SettingsService } from '../gen';
+import Tooltip from './Tooltip.svelte';
+let uptodate = undefined;
+loadVersion();
+async function loadVersion() {
+    try {
+        const res = await SettingsService.backendUptodate();
+        if (res != 'yes') {
+            uptodate = res;
+        }
+    }
+    catch (e) {
+        console.warn('Could not fetch latest version', e);
+    }
+}
+</script>
+
+{#if uptodate}
+	<span class="text-blue-400"
+		>{uptodate} &nbsp;<Tooltip>
+			How to update?<br />
+			- docker: `docker compose up`<br />-
+			<a href="https://github.com/windmill-labs/windmill-helm-charts#install">helm</a>
+		</Tooltip></span
+	>
+{/if}

package/package/components/Uptodate.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UptodateProps = typeof __propDef.props;
+export type UptodateEvents = typeof __propDef.events;
+export type UptodateSlots = typeof __propDef.slots;
+export default class Uptodate extends SvelteComponentTyped<UptodateProps, UptodateEvents, UptodateSlots> {
+}
+export {};

package/package/components/UserSettings.svelte

@@ -1,5 +1,5 @@
 <script>import { usersWorkspaceStore } from '../stores';
-import { UserService, SettingsService } from '../gen';
+import { UserService } from '../gen';
 import { displayDate, copyToClipboard } from '../utils';
 import { faClipboard, faPlus } from '@fortawesome/free-solid-svg-icons';
 import TableCustom from './TableCustom.svelte';
@@ -8,7 +8,6 @@ import Icon from 'svelte-awesome';
 export let scopes = undefined;
 let newPassword;
 let passwordError;
-let version;
 let tokens;
 let newToken;
 let newTokenLabel;
@@ -21,18 +20,18 @@ import { page } from '$app/stores';
 import { goto } from '$app/navigation';
 import { sendUserToast } from '../toast';
 import Tooltip from './Tooltip.svelte';
+import Version from './Version.svelte';
 let drawer;
 export function openDrawer() {
-    loadVersion();
     loadLoginType();
     listTokens();
     drawer?.openDrawer();
 }
-export function toggleDrawer() {
-    drawer?.toggleDrawer();
-}
 export function closeDrawer() {
     drawer?.closeDrawer();
+    removeHash();
+}
+function removeHash() {
     const index = $page.url.href.lastIndexOf('#');
     if (index === -1)
         return;
@@ -52,9 +51,6 @@ async function setPassword() {
         sendUserToast('Specify a new password value to change your passord', true);
     }
 }
-async function loadVersion() {
-    version = await SettingsService.backendVersion();
-}
 async function loadLoginType() {
     login_type = (await UserService.globalWhoami()).login_type;
 }
@@ -81,12 +77,12 @@ async function deleteToken(tokenPrefix) {
 }
 </script>
 
-<Drawer bind:this={drawer} size="800px">
+<Drawer bind:this={drawer} size="800px" on:clickAway={removeHash}>
 	<DrawerContent title="User Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
-				<div class="text-xs pt-1 pb-2 text-gray-500">
-					Windmill {version}
+				<div class="text-xs pt-1 pb-2 text-gray-500 flex-col flex">
+					Windmill <Version />
 				</div>
 
 				{#if scopes == undefined}

package/package/components/UserSettings.svelte.d.ts

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         scopes?: string[] | undefined;
         openDrawer?: (() => void) | undefined;
-        toggleDrawer?: (() => void) | undefined;
         closeDrawer?: (() => void) | undefined;
     };
     events: {
@@ -16,7 +15,6 @@ export type UserSettingsEvents = typeof __propDef.events;
 export type UserSettingsSlots = typeof __propDef.slots;
 export default class UserSettings extends SvelteComponentTyped<UserSettingsProps, UserSettingsEvents, UserSettingsSlots> {
     get openDrawer(): () => void;
-    get toggleDrawer(): () => void;
     get closeDrawer(): () => void;
 }
 export {};

package/package/components/Version.svelte

@@ -0,0 +1,9 @@
+<script>import { SettingsService } from '../gen';
+let version = '';
+loadVersion();
+async function loadVersion() {
+    version = await SettingsService.backendVersion();
+}
+</script>
+
+{version}

package/package/components/Version.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VersionProps = typeof __propDef.props;
+export type VersionEvents = typeof __propDef.events;
+export type VersionSlots = typeof __propDef.slots;
+export default class Version extends SvelteComponentTyped<VersionProps, VersionEvents, VersionSlots> {
+}
+export {};

package/package/components/apps/components/buttons/AppButton.svelte

@@ -122,8 +122,8 @@ $: css = concatCustomCss($app.css?.buttoncomponent, customCss);
 				{#if resolvedConfig.beforeIcon && beforeIconComponent}
 					<svelte:component this={beforeIconComponent} size={14} />
 				{/if}
-				{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
-					<div>{resolvedConfig.label}</div>
+				{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
+					<div>{resolvedConfig.label.toString()}</div>
 				{/if}
 				{#if resolvedConfig.afterIcon && afterIconComponent}
 					<svelte:component this={afterIconComponent} size={14} />

package/package/components/apps/components/buttons/AppForm.svelte

@@ -26,7 +26,6 @@ const outputs = initOutput($worldStore, id, {
 });
 const resolvedConfig = initConfig(components['formcomponent'].initialData.configuration, configuration);
 let runnableComponent;
-let isLoading = false;
 let loading = false;
 $: noInputs =
     $stateId != undefined &&
@@ -81,7 +80,7 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 			<div class="flex justify-end my-1">
 				{#if !noInputs}
 					<Button
-						loading={isLoading}
+						{loading}
 						btnClasses={css?.button?.class}
 						style={css?.button?.style ?? ''}
 						on:pointerdown={(e) => {

package/package/components/apps/components/buttons/AppFormButton.svelte

@@ -38,9 +38,6 @@ $: errorsMessage = Object.values(errors)
     .join('\n');
 $: noInputs =
     componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0;
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
 $: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 let runnableWrapper;
 let loading = false;
@@ -56,38 +53,37 @@ let modal;
 	/>
 {/each}
 
-<AlwaysMountedModal title={resolvedConfig.label ?? ''} bind:this={modal}>
-	<RunnableWrapper
-		bind:this={runnableWrapper}
-		{recomputeIds}
-		{render}
-		bind:runnableComponent
-		{componentInput}
-		{id}
-		{extraQueryParams}
-		autoRefresh={false}
-		forceSchemaDisplay={true}
-		runnableClass="!block"
-		{outputs}
-		doOnSuccess={resolvedConfig.onSuccess}
-		doOnError={resolvedConfig.onError}
-		{errorHandledByComponent}
-	>
-		<div class="flex flex-col gap-2 px-4 w-full">
-			<div>
-				{#if noInputs}
-					<div class="text-gray-600 italic text-sm my-4">
-						Run forms are associated with a runnable that has user inputs.
-						<br />
-						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
-						<strong>
-							User Input
-							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
-						</strong>
-					</div>
-				{/if}
-			</div>
-			<div class="flex justify-end">
+<AlwaysMountedModal {css} title={resolvedConfig.modalTitle ?? ''} bind:this={modal}>
+	<div class="flex flex-col gap-2 px-4 w-full pt-2">
+		<RunnableWrapper
+			bind:this={runnableWrapper}
+			bind:loading
+			{recomputeIds}
+			{render}
+			bind:runnableComponent
+			{componentInput}
+			{id}
+			{extraQueryParams}
+			autoRefresh={false}
+			forceSchemaDisplay={true}
+			runnableClass="!block"
+			{outputs}
+			doOnSuccess={resolvedConfig.onSuccess}
+			doOnError={resolvedConfig.onError}
+			{errorHandledByComponent}
+		>
+			{#if noInputs}
+				<div class="text-gray-600 italic text-sm my-4">
+					Run forms are associated with a runnable that has user inputs.
+					<br />
+					Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
+					<strong>
+						User Input
+						<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
+					</strong>
+				</div>
+			{/if}
+			<div class="flex justify-end gap-3 p-2">
 				<Button
 					{loading}
 					btnClasses="my-1"
@@ -100,6 +96,7 @@ let modal;
 						} else {
 							await runnableComponent?.runComponent()
 						}
+						console.log('close')
 						modal?.close()
 					}}
 					size="xs"
@@ -108,11 +105,11 @@ let modal;
 					Submit
 				</Button>
 			</div>
-		</div>
-	</RunnableWrapper>
+		</RunnableWrapper>
+	</div>
 </AlwaysMountedModal>
 
-<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	{#if errorsMessage}
 		<div class="text-red-500 text-xs">{errorsMessage}</div>
 	{/if}

package/package/components/apps/components/buttons/AppSchemaForm.svelte

@@ -13,6 +13,8 @@ export let render;
 export let configuration;
 export let customCss = undefined;
 const { worldStore, connectingInput, app, selectedComponent, componentControl } = getContext('AppViewerContext');
+const iterContext = getContext('ListWrapperContext');
+const listInputs = getContext('ListInputs');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false,
@@ -29,6 +31,9 @@ function handleArgsChange() {
         }
     }
     outputs.values.set(newArgs, true);
+    if (iterContext && listInputs) {
+        listInputs(id, newArgs);
+    }
 }
 $componentControl[id] = {
     setValue(nvalue) {

package/package/components/apps/components/display/AppChartJs.svelte

@@ -19,13 +19,14 @@ const outputs = initOutput($worldStore, id, {
 });
 ChartJS.register(...registerables);
 let result = undefined;
-const options = {
+const resolvedConfig = initConfig(components['chartjscomponent'].initialData.configuration, configuration);
+$: options = {
     responsive: true,
     animation: false,
-    maintainAspectRatio: false
+    maintainAspectRatio: false,
+    ...(resolvedConfig.options ?? {})
 };
 $: css = concatCustomCss($app.css?.piechartcomponent, customCss);
-const resolvedConfig = initConfig(components['chartjscomponent'].initialData.configuration, configuration);
 </script>
 
 {#each Object.keys(components['chartjscomponent'].initialData.configuration) as key (key)}

package/package/components/apps/components/display/AppFlowStatusComponent.svelte

@@ -9,7 +9,7 @@ export let componentInput;
 export let initializing = false;
 export let customCss = undefined;
 export let render;
-const { app, worldStore } = getContext('AppViewerContext');
+const { app, worldStore, workspace } = getContext('AppViewerContext');
 const outputs = initOutput($worldStore, id, {
     result: undefined,
     loading: false
@@ -50,7 +50,7 @@ let jobId;
 			)}
 		>
 			{#if jobId}
-				<FlowStatusViewer {jobId} />
+				<FlowStatusViewer workspaceId={workspace} {jobId} />
 			{:else}
 				<span class="text-gray-600 text-xs">No flow</span>
 			{/if}

package/package/components/apps/components/display/AppLogsComponent.svelte

@@ -51,7 +51,13 @@ let testJob = undefined;
 				customCss?.container?.class
 			)}
 		>
-			<LogViewer content={testJob?.logs} isLoading={testIsLoading} />
+			<LogViewer
+				jobId={testJob?.id}
+				duration={testJob?.['duration_ms']}
+				mem={testJob?.['mem_peak']}
+				content={testJob?.logs}
+				isLoading={testIsLoading}
+			/>
 		</div>
 	</div>
 </RunnableWrapper>

package/package/components/apps/components/display/AppMap.svelte

@@ -24,8 +24,8 @@ let outputs = initOutput($worldStore, id, {
         bottomRight: { lat: 0, lon: 0 }
     }
 });
-let map;
-let mapElement;
+let map = undefined;
+let mapElement = undefined;
 let longitude = undefined;
 let latitude = undefined;
 let zoom = undefined;
@@ -48,9 +48,9 @@ function selectComponent() {
 }
 function getLayersByName(name) {
     return map
-        .getLayers()
-        .getArray()
-        .filter((l) => l.getProperties().name === LAYER_NAME[name]);
+        ?.getLayers()
+        ?.getArray()
+        ?.filter((l) => l.getProperties().name === LAYER_NAME[name]);
 }
 function getMarkerArray() {
     let array = undefined;
@@ -96,9 +96,13 @@ function createMarkerLayers() {
 function updateMarkers() {
     const layers = getLayersByName('MARKER');
     if (layers?.length) {
-        layers.forEach((l) => map.removeLayer(l));
+        layers.forEach((l) => map?.removeLayer(l));
     }
-    createMarkerLayers()?.forEach((l) => map.addLayer(l));
+    createMarkerLayers()?.forEach((l) => map?.addLayer(l));
+}
+$: if (!render) {
+    map = undefined;
+    mapElement = undefined;
 }
 $: if (!map && mapElement) {
     useGeographic();

package/package/components/apps/components/display/PlotlyHtml.svelte

@@ -20,7 +20,7 @@ let divEl = null;
 let Plotly;
 onMount(async () => {
     //@ts-ignore
-    await import('https://cdn.plot.ly/plotly-2.18.0.min.js');
+    await import('https://cdn.jsdelivr.net/npm/plotly.js-dist@2.18.0/plotly.min.js');
     Plotly = window['Plotly'];
 });
 let h = undefined;

package/package/components/apps/components/display/VegaLiteHtml.svelte

@@ -39,7 +39,7 @@ $: vegaEmbed &&
         actions: false,
         renderer: canvas ? 'canvas' : 'svg',
         height: h - 75,
-        width: w - 75
+        width: w - 100
     });
 </script>