windmill-components 1.118.0 → 1.121.1

package/package/components/ArgInfo.svelte

@@ -1,7 +1,7 @@
 <script>import { ResourceService } from '../gen';
 import { workspaceStore } from '../stores';
 import { copyToClipboard, truncate } from '../utils';
-import { ClipboardCopy } from 'lucide-svelte';
+import { ClipboardCopy, Expand } from 'lucide-svelte';
 import { Button, DrawerContent } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
@@ -64,16 +64,18 @@ async function getResource(path) {
 		>
 	{/if}
 {:else}
-	<div class="max-h-40 overflow-auto">
-		<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
+	<div class="relative">
+		{#if JSON.stringify(value).length > 120}
+			<button
+				class="text-xs absolute top-0 right-4 text-gray-500"
+				on:click={() => {
+					jsonViewerContent = value
+					jsonViewer.toggleDrawer()
+				}}><Expand size={18} /></button
+			>
+		{/if}
+		<div class="max-h-40 overflow-auto">
+			<ObjectViewer collapsed={false} topBrackets={true} pureViewer={true} json={value} />
+		</div>
 	</div>
-	{#if JSON.stringify(value).length > 120}
-		<button
-			class="text-xs text-blue-500"
-			on:click={() => {
-				jsonViewerContent = value
-				jsonViewer.toggleDrawer()
-			}}>See JSON</button
-		>
-	{/if}
 {/if}

package/package/components/CenteredModal.svelte

@@ -1,13 +1,9 @@
-<script>import { SettingsService } from '../gen';
-import { onMount } from 'svelte';
-import WindmillIcon from './icons/WindmillIcon.svelte';
+<script>import WindmillIcon from './icons/WindmillIcon.svelte';
+import Uptodate from './Uptodate.svelte';
+import Version from './Version.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
 export let disableLogo = false;
-let version = '';
-onMount(async () => {
-    version = await SettingsService.backendVersion();
-});
 </script>
 
 <div class="center-center min-h-screen p-4 relative bg-gray-50">
@@ -39,7 +35,9 @@ onMount(async () => {
 		</div>
 	</div>
 
-	<div class="absolute top-0 right-0 text-2xs text-gray-800 italic px-3 py-1">
-		<span class="font-mono">{version}</span>
+	<div class="absolute top-0 right-0 text-2xs text-gray-600 italic px-3 py-1">
+		<span class="font-mono flex flex-col">
+			<div>Windmill <Version /></div><div><Uptodate /></div>
+		</span>
 	</div>
 </div>

package/package/components/DisplayResult.svelte

@@ -3,7 +3,7 @@ import { json } from 'svelte-highlight/languages';
 import TableCustom from './TableCustom.svelte';
 import { copyToClipboard, truncate } from '../utils';
 import { Button, Drawer, DrawerContent } from './common';
-import { ClipboardCopy } from 'lucide-svelte';
+import { ClipboardCopy, Download, Expand } from 'lucide-svelte';
 import Portal from 'svelte-portal';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 export let result;
@@ -87,6 +87,7 @@ function inferResultKind(result) {
     return 'json';
 }
 let jsonViewer;
+$: jsonStr = JSON.stringify(result, null, 4);
 </script>
 
 <div class="inline-highlight">
@@ -98,8 +99,8 @@ let jsonViewer;
 				class="mb-2 w-full text-sm relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 				{#if !disableExpand}
-					<div class="text-gray-500 text-xs absolute top-5 right-0">
-						<button on:click={jsonViewer.openDrawer}>Expand</button>
+					<div class="text-gray-500 text-xs absolute top-5.5 right-0">
+						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
 					</div>
 				{/if}
 			</div>{/if}{#if !forceJson && resultKind == 'table-col'}<div
@@ -218,7 +219,6 @@ let jsonViewer;
 				>
 			</div>
 		{:else}
-			{@const jsonStr = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
 			{#if jsonStr.length > 10000}
 				<div class="text-sm mb-2 text-gray-600">
 					<a
@@ -233,7 +233,7 @@ let jsonViewer;
 			{/if}
 		{/if}
 	{:else}
-		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
+		<div class="text-gray-500 text-sm">No result: {jsonStr}</div>
 	{/if}
 </div>
 
@@ -242,25 +242,26 @@ let jsonViewer;
 		<Drawer bind:this={jsonViewer} size="900px">
 			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
 				<svelte:fragment slot="actions">
-					<Button
-						on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
-						color="light"
-						size="xs"
+					<a
+						class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+						download="{filename ?? 'result'}.json"
+						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}"
+						>Download <Download size={14} /></a
 					>
+					<Button on:click={() => copyToClipboard(jsonStr)} color="light" size="xs">
 						<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
 					</Button>
 				</svelte:fragment>
-				{@const str = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
-				{#if str.length > 100000}
+				{#if jsonStr.length > 100000}
 					<div class="text-sm mb-2 text-gray-600">
 						<a
 							download="{filename ?? 'result'}.json"
-							href="data:text/json;charset=utf-8,{encodeURIComponent(str)}">Download</a
+							href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
 						>
 						JSON is too large to be displayed in full.
 					</div>
 				{:else}
-					<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+					<Highlight language={json} code={jsonStr.replace(/\\n/g, '\n')} />
 				{/if}
 			</DrawerContent>
 		</Drawer>

package/package/components/EditorBar.svelte

@@ -2,7 +2,7 @@
 </script>
 
 <script>import { ResourceService, VariableService } from '../gen';
-import { faBook, faCube, faDollarSign, faPlus, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
+import { faBook, faCube, faDollarSign, faHistory, faPlus, faRotate, faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 import { workspaceStore } from '../stores';
 import ItemPicker from './ItemPicker.svelte';
 import ResourceEditor from './ResourceEditor.svelte';
@@ -22,6 +22,7 @@ import { getScriptByPath } from '../scripts';
 import Toggle from './Toggle.svelte';
 import { Link, Users } from 'lucide-svelte';
 import { capitalize } from '../utils';
+import ScriptVersionHistory from './ScriptVersionHistory.svelte';
 export let lang;
 export let editor;
 export let websocketAlive;
@@ -31,6 +32,7 @@ export let kind = 'script';
 export let collabMode = false;
 export let collabLive = false;
 export let collabUsers = [];
+export let scriptPath = undefined;
 let contextualVariablePicker;
 let variablePicker;
 let resourcePicker;
@@ -94,8 +96,17 @@ function compile(schema) {
     }
     return rec(schema.properties, true);
 }
+let historyBrowserDrawerOpen = false;
 </script>
 
+{#if scriptPath}
+	<Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
+		<DrawerContent title="Versions History" on:close={() => (historyBrowserDrawerOpen = false)}>
+			<ScriptVersionHistory {scriptPath} />
+		</DrawerContent>
+	</Drawer>
+{/if}
+
 <Drawer bind:this={scriptPicker} size="900px">
 	<DrawerContent title="Code" on:close={scriptPicker.closeDrawer}>
 		{#if pick_existing == 'hub'}
@@ -440,20 +451,36 @@ function compile(schema) {
 		</div>
 	</div>
 
-	{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
-		<Button
-			btnClasses="!font-medium text-gray-600"
-			size="xs"
-			spacingSize="md"
-			color="light"
-			on:click={scriptPicker.openDrawer}
-			{iconOnly}
-			startIcon={{ icon: faBook }}
-			title="Explore other scripts"
-		>
-			Library
-		</Button>
-	{/if}
+	<div class="flex flex-row items-center gap-2">
+		{#if scriptPath}
+			<Button
+				btnClasses="!font-medium text-gray-600"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={() => (historyBrowserDrawerOpen = true)}
+				{iconOnly}
+				startIcon={{ icon: faHistory }}
+				title="See history"
+			>
+				History
+			</Button>
+		{/if}
+		{#if SCRIPT_EDITOR_SHOW_EXPLORE_OTHER_SCRIPTS}
+			<Button
+				btnClasses="!font-medium text-gray-600"
+				size="xs"
+				spacingSize="md"
+				color="light"
+				on:click={scriptPicker.openDrawer}
+				{iconOnly}
+				startIcon={{ icon: faBook }}
+				title="Explore other scripts"
+			>
+				Library
+			</Button>
+		{/if}
+	</div>
 </div>
 
 <style>

package/package/components/EditorBar.svelte.d.ts

@@ -21,6 +21,7 @@ declare const __propDef: {
         collabUsers?: {
             name: string;
         }[] | undefined;
+        scriptPath?: string | undefined;
     };
     events: {
         toggleCollabMode: CustomEvent<any>;

package/package/components/FlowJobResult.svelte

@@ -7,6 +7,7 @@ export let col = false;
 export let noBorder = false;
 export let loading;
 export let filename = undefined;
+export let jobId = undefined;
 </script>
 
 <div
@@ -24,6 +25,6 @@ export let filename = undefined;
 		{/if}
 	</div>
 	<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
-		<LogViewer content={logs ?? ''} isLoading={false} />
+		<LogViewer content={logs ?? ''} {jobId} isLoading={false} />
 	</div>
 </div>

package/package/components/FlowJobResult.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         noBorder?: boolean | undefined;
         loading: any;
         filename?: string | undefined;
+        jobId?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowStatusViewer.svelte

@@ -183,6 +183,7 @@ function onJobsLoaded(mod, job) {
 				{#if `result` in job}
 					<div class="w-full h-full">
 						<FlowJobResult
+							jobId={job?.id}
 							loading={job['running'] == true}
 							result={job.result}
 							logs={job.logs ?? ''}
@@ -425,6 +426,7 @@ function onJobsLoaded(mod, job) {
 							{@const node = localFlowModuleStates[selectedNode]}
 							{#if selectedNode == 'end'}
 								<FlowJobResult
+									jobId={job?.id}
 									filename={job.id}
 									loading={job['running']}
 									noBorder
@@ -463,6 +465,7 @@ function onJobsLoaded(mod, job) {
 								</div>
 
 								<FlowJobResult
+									jobId={job?.id}
 									loading={job['running'] == true}
 									noBorder
 									col

package/package/components/JobArgs.svelte

@@ -1,34 +1,127 @@
-<script>import ArgInfo from './ArgInfo.svelte';
-import { Skeleton } from './common';
+<script>import { ChevronRightSquare, ClipboardCopy, Download, Expand } from 'lucide-svelte';
+import ArgInfo from './ArgInfo.svelte';
+import { Button, Drawer, DrawerContent, Skeleton } from './common';
 import TableCustom from './TableCustom.svelte';
+import Portal from 'svelte-portal';
+import { Highlight } from 'svelte-highlight';
+import { copyToClipboard } from '../utils';
+import { json } from 'svelte-highlight/languages';
 export let args;
 export let tableClass = '';
+let jsonViewer;
+let runLocally;
+let jsonStr = '';
+function pythonCode() {
+    return `
+if __name__ == 'main':
+${Object.entries(args)
+        .map(([arg, value]) => {
+        return `  ${arg} = ${JSON.stringify(value)}`;
+    })
+        .join('\n')}
+
+  main(${Object.keys(args)
+        .map((x) => `${x} = ${x}`)
+        .join(', ')})
+`;
+}
+function typescriptCode() {
+    return `
+if (import.meta.main) {
+${Object.entries(args)
+        .map(([arg, value]) => {
+        return `  let ${arg} = ${JSON.stringify(value)}`;
+    })
+        .join('\n')}
+
+  await main(...)
+}
+`;
+}
 </script>
 
-<TableCustom class="py-2 {tableClass}">
-	<tr slot="header-row">
-		<th>Argument</th>
-		<th>Value</th>
-	</tr>
-	<tbody slot="body">
-		{#if args && Object.keys(args).length > 0}
-			{#each Object.entries(args) as [arg, value]}
+<div class="relative">
+	<div class="text-gray-500 text-xs absolute top-8 right-0">
+		<button
+			on:click={() => {
+				jsonStr = JSON.stringify(args, null, 4)
+				jsonViewer.openDrawer()
+			}}><Expand size={18} /></button
+		>
+	</div>
+	<TableCustom class="py-2 {tableClass}">
+		<tr slot="header-row">
+			<th>Argument</th>
+			<th>Value</th>
+		</tr>
+		<tbody slot="body">
+			{#if args && Object.keys(args).length > 0}
+				{#each Object.entries(args) as [arg, value]}
+					<tr>
+						<td class="font-semibold">{arg}</td>
+						<td><ArgInfo {value} /></td>
+					</tr>
+				{/each}
+			{:else if args}
+				<tr><div class="text-gray-600 pt-2 pl-1 text-sm">No arguments</div></tr>
+			{:else}
 				<tr>
-					<td class="font-semibold">{arg}</td>
-					<td><ArgInfo {value} /></td>
+					<td>
+						<Skeleton layout={[[3], 0.5, [3]]} />
+					</td>
+					<td>
+						<Skeleton layout={[[3], 0.5, [3]]} />
+					</td>
 				</tr>
-			{/each}
-		{:else if args}
-			<tr><div class="text-gray-600 pt-2 pl-1 text-sm">No arguments</div></tr>
-		{:else}
-			<tr>
-				<td>
-					<Skeleton layout={[[3], 0.5, [3]]} />
-				</td>
-				<td>
-					<Skeleton layout={[[3], 0.5, [3]]} />
-				</td>
-			</tr>
-		{/if}
-	</tbody>
-</TableCustom>
+			{/if}
+		</tbody>
+	</TableCustom>
+</div>
+
+<Portal>
+	<Drawer bind:this={jsonViewer} size="900px">
+		<DrawerContent title="Expanded Args" on:close={jsonViewer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<a
+					class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+					download="windmill-args.json"
+					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}"
+					>Download <Download size={14} /></a
+				>
+				<Button on:click={runLocally.openDrawer} color="light" size="xs">
+					<div class="flex gap-2 items-center">Use in a local script<ChevronRightSquare /> </div>
+				</Button>
+				<Button on:click={() => copyToClipboard(jsonStr)} color="light" size="xs">
+					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+				</Button>
+			</svelte:fragment>
+			{#if jsonStr.length > 100000}
+				<div class="text-sm mb-2 text-gray-600">
+					<a
+						download="windmill-args.json"
+						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+					>
+					JSON is too large to be displayed in full.
+				</div>
+			{:else}
+				<Highlight language={json} code={jsonStr.replace(/\\n/g, '\n')} />
+			{/if}
+		</DrawerContent>
+	</Drawer>
+	<Drawer bind:this={runLocally} size="900px">
+		<DrawerContent title="Run locally" on:close={runLocally.closeDrawer}>
+			<h3 class="mb-2">Envs</h3>
+			If using the wmill client in your code, set the following env variables:
+			<pre
+				><code
+					>BASE_URL="{window.location.origin}"
+WM_TOKEN="{'<TOKEN>'}"</code
+				></pre
+			>
+			<h3 class="mt-8">TypeScript</h3>
+			<pre><code>{typescriptCode()}</code></pre>
+			<h3 class="mt-8">Python</h3>
+			<pre><code>{pythonCode()}</code></pre>
+		</DrawerContent>
+	</Drawer>
+</Portal>

package/package/components/LogViewer.svelte

@@ -1,10 +1,13 @@
-<script>import { Loader2 } from 'lucide-svelte';
-import { Drawer, DrawerContent } from './common';
+<script>import { ClipboardCopy, Download, Loader2 } from 'lucide-svelte';
+import { Button, Drawer, DrawerContent } from './common';
+import { copyToClipboard } from '../utils';
+import { workspaceStore } from '../stores';
 export let content;
 export let isLoading;
 export let duration = undefined;
 export let mem = undefined;
 export let wrapperClass = '';
+export let jobId = undefined;
 let scroll = true;
 let div = null;
 $: if (content != undefined) {
@@ -19,6 +22,16 @@ let logViewer;
 
 <Drawer bind:this={logViewer} size="900px">
 	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
+		<svelte:fragment slot="actions">
+			<a
+				class="text-sm text-gray-600 mr-2 inline-flex gap-2 items-center py-2 px-2 hover:bg-gray-100 rounded-lg"
+				download="windmill-logs.json"
+				href="/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}">Download <Download size={14} /></a
+			>
+			<Button on:click={() => copyToClipboard(content)} color="light" size="xs">
+				<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+			</Button>
+		</svelte:fragment>
 		<div>
 			<pre class="bg-gray-50 text-xs w-full p-2"
 				>{#if content}{content}{:else if isLoading}Waiting for job to start...{:else}No logs are available yet{/if}</pre

package/package/components/LogViewer.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         duration?: number | undefined;
         mem?: number | undefined;
         wrapperClass?: string | undefined;
+        jobId?: string | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {

package/package/components/ModulePreview.svelte

@@ -88,6 +88,7 @@ function jobDone() {
 		<Splitpanes horizontal>
 			<Pane size={50} minSize={10}>
 				<LogViewer
+					jobId={testJob?.id}
 					duration={testJob?.['duration_ms']}
 					mem={testJob?.['mem_peak']}
 					content={testJob?.logs}

package/package/components/ScriptEditor.svelte

@@ -186,6 +186,7 @@ function collabUrl() {
 <div class="border-b-2 shadow-sm px-1 pr-4" bind:clientWidth={width}>
 	<div class="flex justify-between space-x-2">
 		<EditorBar
+			scriptPath={edit ? path : undefined}
 			on:toggleCollabMode={() => {
 				if (wsProvider?.shouldConnect) {
 					disableCollaboration()

package/package/components/ScriptVersionHistory.svelte

@@ -0,0 +1,57 @@
+<script>import { Pane, Splitpanes } from 'svelte-splitpanes';
+import PanelSection from './apps/editor/settingsPanel/common/PanelSection.svelte';
+import { classNames } from '../utils';
+import { ScriptService } from '../gen';
+import { workspaceStore } from '../stores';
+import { Skeleton } from './common';
+import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
+export let scriptPath;
+let selectedVersion = undefined;
+let versions = undefined;
+async function loadVersions() {
+    versions = (await ScriptService.getScriptByPath({ workspace: $workspaceStore, path: scriptPath })).parent_hashes;
+}
+loadVersions();
+</script>
+
+<Splitpanes class="!overflow-visible">
+	<Pane size={20}>
+		<PanelSection title="Past Versions">
+			<div class="flex flex-col gap-2 w-full">
+				{#if versions}
+					{#if versions.length > 0}
+						<div class="flex gap-2 flex-col">
+							{#each versions ?? [] as version}
+								<!-- svelte-ignore a11y-click-events-have-key-events -->
+								<div
+									class={classNames(
+										'border flex gap-1 truncate justify-between flex-row w-full items-center p-2 rounded-md cursor-pointer hover:bg-blue-50 hover:text-blue-400',
+										selectedVersion == version ? 'bg-blue-100 text-blue-600' : ''
+									)}
+									on:click={() => (selectedVersion = version)}
+								>
+									<span class="text-xs truncate">{version}</span>
+								</div>
+							{/each}
+						</div>
+					{:else}
+						<div class="text-sm text-gray-500">No items</div>
+					{/if}
+				{:else}
+					<Skeleton layout={[[40], [40], [40], [40], [40]]} />
+				{/if}
+			</div>
+		</PanelSection>
+	</Pane>
+	<Pane size={80}>
+		<div class="h-full w-full overflow-auto">
+			{#if selectedVersion}
+				{#key selectedVersion}
+					<FlowModuleScript path={scriptPath} hash={selectedVersion} />
+				{/key}
+			{:else}
+				<div class="text-sm p-2 text-gray-500">Select a deployment version to see its details</div>
+			{/if}
+		</div>
+	</Pane>
+</Splitpanes>

package/package/components/ScriptVersionHistory.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        scriptPath: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptVersionHistoryProps = typeof __propDef.props;
+export type ScriptVersionHistoryEvents = typeof __propDef.events;
+export type ScriptVersionHistorySlots = typeof __propDef.slots;
+export default class ScriptVersionHistory extends SvelteComponentTyped<ScriptVersionHistoryProps, ScriptVersionHistoryEvents, ScriptVersionHistorySlots> {
+}
+export {};

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,10 +7,11 @@ 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?.();
 }
@@ -25,12 +26,8 @@ function removeHash() {
     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 });
 }
@@ -47,8 +44,8 @@ async function listUsers() {
 	<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/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,9 +20,9 @@ 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();
@@ -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;
 }
@@ -85,8 +81,8 @@ async function deleteToken(tokenPrefix) {
 	<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/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/display/AppLogsComponent.svelte

@@ -52,6 +52,7 @@ let testJob = undefined;
 			)}
 		>
 			<LogViewer
+				jobId={testJob?.id}
 				duration={testJob?.['duration_ms']}
 				mem={testJob?.['mem_peak']}
 				content={testJob?.logs}

package/package/components/apps/components/display/table/AppTable.svelte

@@ -3,7 +3,7 @@ import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
 import { writable } from 'svelte/store';
 import { createSvelteTable, flexRender } from '@tanstack/svelte-table';
 import AppButton from '../../buttons/AppButton.svelte';
-import { classNames, isObject } from '../../../../../utils';
+import { classNames, isObject, sendUserToast } from '../../../../../utils';
 import DebouncedInput from '../../helpers/DebouncedInput.svelte';
 import AppTableFooter from './AppTableFooter.svelte';
 import { tableOptions } from './tableOptions';
@@ -151,6 +151,26 @@ $componentControl[id] = {
         }
     }
 };
+function getHeaderGroups(table) {
+    try {
+        return table.getHeaderGroups();
+    }
+    catch (e) {
+        sendUserToast("Couldn't render table header groups: " + e, true);
+        console.error(e);
+        return [];
+    }
+}
+function safeVisibleCell(row) {
+    try {
+        return row.getVisibleCells();
+    }
+    catch (e) {
+        sendUserToast("Couldn't render table header groups: " + e, true);
+        console.error(e);
+        return [];
+    }
+}
 </script>
 
 {#each Object.keys(components['tablecomponent'].initialData.configuration) as key (key)}
@@ -192,7 +212,7 @@ $componentControl[id] = {
 						)}
 						style={css?.tableHeader?.style ?? ''}
 					>
-						{#each $table.getHeaderGroups() as headerGroup}
+						{#each getHeaderGroups($table) as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
 									{#if header?.column?.columnDef?.header}
@@ -234,7 +254,7 @@ $componentControl[id] = {
 										: 'divide-gray-200'
 								)}
 							>
-								{#each row.getVisibleCells() as cell, index (index)}
+								{#each safeVisibleCell(row) as cell, index (index)}
 									{#if cell?.column?.columnDef?.cell}
 										{@const context = cell?.getContext()}
 										{#if context}

package/package/components/apps/components/layout/AppModal.svelte

@@ -86,7 +86,7 @@ let resolvedConfig = initConfig(components['modalcomponent'].initialData.configu
 			`${
 				$mode == 'dnd' ? 'absolute' : 'fixed'
 			} top-0 bottom-0 left-0 right-0 transition-all duration-50`,
-			open ? 'z-[1100] bg-black bg-opacity-60' : 'hidden'
+			open ? 'z-[1100] bg-black bg-opacity-60' : 'h-0 overflow-hidden'
 		)}
 	>
 		<div

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -458,7 +458,7 @@ function onKeyDown(event) {
 </Drawer>
 
 <Drawer bind:open={historyBrowserDrawerOpen} size="1200px">
-	<DrawerContent title="Deployment History" on:close={() => historyBrowserDrawerOpen}>
+	<DrawerContent title="Deployment History" on:close={() => (historyBrowserDrawerOpen = false)}>
 		<DeploymentHistory on:restore {versions} />
 	</DrawerContent>
 </Drawer>
@@ -558,7 +558,7 @@ function onKeyDown(event) {
 								{#if job?.job_kind !== 'flow' && job?.job_kind !== 'flowpreview'}
 									<Splitpanes horizontal class="grow border w-full">
 										<Pane size={50} minSize={10}>
-											<LogViewer content={job?.logs} isLoading={testIsLoading} />
+											<LogViewer jobId={job?.id} content={job?.logs} isLoading={testIsLoading} />
 										</Pane>
 										<Pane size={50} minSize={10} class="text-sm text-gray-600">
 											{#if job != undefined && 'result' in job && job.result != undefined}

package/package/components/jobs/JobPreview.svelte

@@ -112,6 +112,7 @@ onDestroy(() => {
 				{:else if job && `running` in job ? job.running : false}
 					<div class="text-sm font-semibold text-gray-600 mb-1"> Job is still running </div>
 					<LogViewer
+						jobId={job?.id}
 						duration={job?.['duration_ms']}
 						mem={job?.['mem_peak']}
 						content={job?.logs}

package/package/components/scriptEditor/LogPanel.svelte

@@ -66,6 +66,7 @@ function closeDrawer() {
 				<Splitpanes horizontal>
 					<Pane class="relative">
 						<LogViewer
+							jobId={previewJob?.id}
 							duration={previewJob?.['duration_ms']}
 							mem={previewJob?.['mem_peak']}
 							content={previewJob?.logs}

package/package/gen/core/OpenAPI.js

@@ -1,6 +1,6 @@
 export const OpenAPI = {
     BASE: '/api',
-    VERSION: '1.117.0',
+    VERSION: '1.121.0',
     WITH_CREDENTIALS: false,
     CREDENTIALS: 'include',
     TOKEN: undefined,

package/package/gen/index.d.ts

@@ -29,7 +29,9 @@ export type { FlowValue } from './models/FlowValue';
 export type { Folder } from './models/Folder';
 export type { ForloopFlow } from './models/ForloopFlow';
 export { GlobalUserInfo } from './models/GlobalUserInfo';
+export type { Graphql } from './models/Graphql';
 export type { Group } from './models/Group';
+export type { Http } from './models/Http';
 export type { Identity } from './models/Identity';
 export type { Input } from './models/Input';
 export type { InputTransform } from './models/InputTransform';
@@ -52,6 +54,7 @@ export type { OpenFlowWPath } from './models/OpenFlowWPath';
 export type { PathFlow } from './models/PathFlow';
 export type { PathScript } from './models/PathScript';
 export { Policy } from './models/Policy';
+export type { Postgresql } from './models/Postgresql';
 export { Preview } from './models/Preview';
 export { QueuedJob } from './models/QueuedJob';
 export { RawScript } from './models/RawScript';

package/package/gen/models/FlowModuleValue.d.ts

@@ -1,8 +1,11 @@
 import type { BranchAll } from './BranchAll';
 import type { BranchOne } from './BranchOne';
 import type { ForloopFlow } from './ForloopFlow';
+import type { Graphql } from './Graphql';
+import type { Http } from './Http';
 import type { Identity } from './Identity';
 import type { PathFlow } from './PathFlow';
 import type { PathScript } from './PathScript';
+import type { Postgresql } from './Postgresql';
 import type { RawScript } from './RawScript';
-export type FlowModuleValue = (RawScript | PathScript | PathFlow | ForloopFlow | BranchOne | BranchAll | Identity);
+export type FlowModuleValue = (RawScript | PathScript | PathFlow | ForloopFlow | BranchOne | BranchAll | Identity | Postgresql | Http | Graphql);

package/package/gen/models/Graphql.d.ts

@@ -0,0 +1,3 @@
+export type Graphql = {
+    type: 'graphql';
+};

package/package/gen/models/Graphql.js

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export {};

package/package/gen/models/Http.d.ts

@@ -0,0 +1,3 @@
+export type Http = {
+    type: 'http';
+};

package/package/gen/models/Http.js

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export {};

package/package/gen/models/Postgresql.d.ts

@@ -0,0 +1,3 @@
+export type Postgresql = {
+    type: 'postgresql';
+};

package/package/gen/models/Postgresql.js

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export {};

package/package/gen/models/QueuedJob.d.ts

@@ -44,7 +44,10 @@ export declare namespace QueuedJob {
         FLOW = "flow",
         FLOWPREVIEW = "flowpreview",
         SCRIPT_HUB = "script_hub",
-        IDENTITY = "identity"
+        IDENTITY = "identity",
+        HTTP = "http",
+        POSTGRESQL = "postgresql",
+        GRAPHQL = "graphql"
     }
     enum language {
         PYTHON3 = "python3",

package/package/gen/models/QueuedJob.js

@@ -12,6 +12,9 @@ export var QueuedJob;
         job_kind["FLOWPREVIEW"] = "flowpreview";
         job_kind["SCRIPT_HUB"] = "script_hub";
         job_kind["IDENTITY"] = "identity";
+        job_kind["HTTP"] = "http";
+        job_kind["POSTGRESQL"] = "postgresql";
+        job_kind["GRAPHQL"] = "graphql";
     })(job_kind = QueuedJob.job_kind || (QueuedJob.job_kind = {}));
     let language;
     (function (language) {

package/package/gen/services/JobService.d.ts

@@ -554,6 +554,15 @@ export declare class JobService {
         workspace: string;
         id: string;
     }): CancelablePromise<Job>;
+    /**
+     * get job logs
+     * @returns string job details
+     * @throws ApiError
+     */
+    static getJobLogs({ workspace, id, }: {
+        workspace: string;
+        id: string;
+    }): CancelablePromise<string>;
     /**
      * get job updates
      * @returns any job details

package/package/gen/services/JobService.js

@@ -355,6 +355,21 @@ export class JobService {
             },
         });
     }
+    /**
+     * get job logs
+     * @returns string job details
+     * @throws ApiError
+     */
+    static getJobLogs({ workspace, id, }) {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/w/{workspace}/jobs_u/get_logs/{id}',
+            path: {
+                'workspace': workspace,
+                'id': id,
+            },
+        });
+    }
     /**
      * get job updates
      * @returns any job details

package/package/gen/services/SettingsService.d.ts

@@ -6,6 +6,12 @@ export declare class SettingsService {
      * @throws ApiError
      */
     static backendVersion(): CancelablePromise<string>;
+    /**
+     * is backend up to date
+     * @returns string is backend up to date
+     * @throws ApiError
+     */
+    static backendUptodate(): CancelablePromise<string>;
     /**
      * get license id
      * @returns string get license id (empty if not ee)

package/package/gen/services/SettingsService.js

@@ -12,6 +12,17 @@ export class SettingsService {
             url: '/version',
         });
     }
+    /**
+     * is backend up to date
+     * @returns string is backend up to date
+     * @throws ApiError
+     */
+    static backendUptodate() {
+        return __request(OpenAPI, {
+            method: 'GET',
+            url: '/uptodate',
+        });
+    }
     /**
      * get license id
      * @returns string get license id (empty if not ee)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.118.0",
+	"version": "1.121.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -98,7 +98,7 @@
 		"svelte-timezone-picker": "^2.0.3",
 		"tailwind-merge": "^1.12.0",
 		"vscode-ws-jsonrpc": "3.0.0",
-		"windmill-parser-wasm": "file:../backend/parsers/windmill-parser-wasm/pkg",
+		"windmill-parser-wasm": "^1.120.0",
 		"y-monaco": "^0.1.4",
 		"y-websocket": "^1.5.0",
 		"yjs": "^13.6.4"
@@ -245,6 +245,10 @@
 		"./components/apps/editor/inlineScriptsPanel/utils": {
 			"types": "./package/components/apps/editor/inlineScriptsPanel/utils.d.ts",
 			"default": "./package/components/apps/editor/inlineScriptsPanel/utils.js"
+		},
+		"./gen/OpenAPI": {
+			"types": "./package/gen/OpenAPI.d.ts",
+			"default": "./package/gen/OpenAPI.js"
 		}
 	},
 	"files": [
@@ -338,6 +342,9 @@
 			],
 			"components/apps/editor/inlineScriptsPanel/utils": [
 				"./package/components/apps/editor/inlineScriptsPanel/utils.d.ts"
+			],
+			"gen/OpenAPI": [
+				"./package/gen/OpenAPI.d.ts"
 			]
 		}
 	}