windmill-components 1.37.0 → 1.46.1

package/components/Popover.svelte

@@ -0,0 +1,61 @@
+<script>import { createPopperActions } from 'svelte-popperjs';
+const [popperRef, popperContent] = createPopperActions({
+    placement: 'auto'
+});
+const betterPreventOverflow = (options) => ({
+    name: 'preventOverflow',
+    options,
+    effect: ({ state }) => {
+        const { padding = 0 } = options;
+        state.elements.popper.style.maxWidth = `calc(100vw - ${padding * 2}px)`;
+    }
+});
+const extraOpts = {
+    modifiers: [
+        betterPreventOverflow({ padding: 10 }),
+        { name: 'offset', options: { offset: [8, 8] } },
+        {
+            name: 'arrow',
+            options: {
+                padding: 10 // 5px from the edges of the popper
+            }
+        }
+    ]
+};
+let showTooltip = false;
+let timeout;
+function open() {
+    clearTimeout(timeout);
+    showTooltip = true;
+}
+function close() {
+    timeout = setTimeout(() => (showTooltip = false), 100);
+}
+</script>
+
+<button use:popperRef on:mouseenter={open} on:mouseleave={close}>
+	<slot />
+</button>
+{#if showTooltip}
+	<div id="tooltip" use:popperContent={extraOpts} on:mouseenter={open} on:mouseleave={close}>
+		<div class="max-w-sm">
+			<slot name="text" />
+		</div>
+	</div>
+{/if}
+
+<style>
+	#tooltip {
+    z-index: 50;
+    white-space: normal;
+    border-radius: 0.75rem;
+    --tw-bg-opacity: 1;
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+    padding: 1rem;
+    text-align: left;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 400;
+    --tw-text-opacity: 1;
+    color: rgb(209 213 219 / var(--tw-text-opacity))
+}</style>

package/components/Popover.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        text: {};
+    };
+};
+export declare type PopoverProps = typeof __propDef.props;
+export declare type PopoverEvents = typeof __propDef.events;
+export declare type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/components/Required.svelte

@@ -3,9 +3,9 @@ export let detail = '';
 </script>
 
 {#if required}
-	<span class="text-red-600 font-normal">*</span>
-{:else}
-	<span class="text-sm text-gray-500 ml-2 font-normal"
-		>(optional{detail != '' ? `, ${detail}` : ''})</span
+	<span class="text-red-700 font-normal {$$props.class}">*</span>
+{:else if detail || detail != ''}
+	<span class="text-sm text-gray-500 ml-2 font-normal {$$props.class}"
+		>({detail != '' ? `${detail}` : ''})</span
 	>
 {/if}

package/components/Required.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         required: boolean;
         detail?: string | undefined;
     };

package/components/ResourceEditor.svelte

@@ -1,16 +1,16 @@
 <script>import { ResourceService, VariableService } from '../gen';
 import { allTrue, emptySchema, sendUserToast } from '../utils';
 import { createEventDispatcher } from 'svelte';
-import Modal from './Modal.svelte';
 import Path from './Path.svelte';
 import ArgInput from './ArgInput.svelte';
-import AutosizedTextarea from './AutosizedTextarea.svelte';
 import ItemPicker from './ItemPicker.svelte';
 import VariableEditor from './VariableEditor.svelte';
 import Required from './Required.svelte';
-import { Button } from './common';
+import { Button, Drawer } from './common';
 import { workspaceStore } from '../stores';
 import ResourceTypePicker from './ResourceTypePicker.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import autosize from 'svelte-autosize';
 let path = '';
 let initialPath = '';
 let pathError = '';
@@ -26,7 +26,7 @@ let error;
 let pickForField;
 let itemPicker;
 let variableEditor;
-let modal;
+let drawer;
 const dispatch = createEventDispatcher();
 export async function initNew(rt) {
     step = 1;
@@ -37,7 +37,7 @@ export async function initNew(rt) {
     resourceSchema = emptySchema();
     resourceToEdit = undefined;
     selectedResourceType = rt;
-    modal.openModal();
+    drawer.openDrawer();
 }
 export async function initEdit(p) {
     initialPath = p;
@@ -48,7 +48,7 @@ export async function initEdit(p) {
     selectedResourceType = resourceToEdit.resource_type;
     await loadResourceType();
     args = resourceToEdit.value;
-    modal.openModal();
+    drawer.openDrawer();
 }
 async function createResource() {
     await ResourceService.createResource({
@@ -57,7 +57,7 @@ async function createResource() {
     });
     sendUserToast(`Successfully created resource at ${path}`);
     dispatch('refresh');
-    modal.closeModal();
+    drawer.closeDrawer();
 }
 async function editResource() {
     try {
@@ -69,7 +69,7 @@ async function editResource() {
             });
             sendUserToast(`Successfully updated resource at ${path}`);
             dispatch('refresh');
-            modal.closeModal();
+            drawer.closeDrawer();
         }
         else {
             throw Error('Cannot edit undefined resourceToEdit');
@@ -100,114 +100,106 @@ let inputCheck = {};
 $: isValid = allTrue(inputCheck) ?? false;
 </script>
 
-<Modal
-	bind:this={modal}
-	on:close={() => {
-		dispatch('close')
-	}}
->
-	<div slot="title">{resourceToEdit ? 'Edit ' + resourceToEdit.path : 'Add a resource'}</div>
-	<div slot="content">
-		<!-- content -->
-		{#if step === 1}
-			<div class="flex flex-col gap-3	px-6 py-3 bg-gray-50 text-gray-700">
-				<div>
-					<span class="text-red-600 text-2xs grow">{error ?? ''}</span>
-					<span class="mb-1 font-semibold text-gray-700">Path</span>
-					<Path
-						bind:error={pathError}
-						bind:path
-						{initialPath}
-						namePlaceholder="my_resource"
-						kind="resource"
-					>
-						<div slot="ownerToolkit">
-							Resource permissions depend on their path. Select the group <span class="font-mono"
-								>all</span
-							>
-							to share it, and <span class="font-mono">user</span> to keep it private.
-							<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
-						</div>
-					</Path>
-				</div>
-				<span class=" mt-3 font-semibold text-gray-700 "
-					>Description <Required required={false} />
-				</span>
-				<AutosizedTextarea
-					bind:value={description}
-					placeholder={DESCRIPTION_PLACEHOLDER}
-					minRows={3}
-				/>
-				<div>
-					<div class="mb-2 font-semibold text-gray-700">
-						Resource type<Required required={true} />
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent
+		title={resourceToEdit ? 'Edit ' + resourceToEdit.path : 'Add a resource'}
+		on:close={drawer.closeDrawer}
+	>
+		<div>
+			<!-- content -->
+			{#if step === 1}
+				<div class="flex flex-col gap-3 py-3  text-gray-700">
+					<div>
+						<span class="text-red-600 text-2xs grow">{error ?? ''}</span>
+						<span class="mb-1 font-semibold text-gray-700">Path</span>
+						<Path
+							bind:error={pathError}
+							bind:path
+							{initialPath}
+							namePlaceholder="my_resource"
+							kind="resource"
+						/>
 					</div>
-					<ResourceTypePicker
-						bind:value={selectedResourceType}
-						notPickable={resourceToEdit != undefined}
-						on:click={() => {
-							args = {}
-						}}
+					<span class=" mt-3 font-semibold text-gray-700 "
+						>Description <Required required={false} />
+					</span>
+					<textarea
+						type="text"
+						use:autosize
+						bind:value={description}
+						placeholder={DESCRIPTION_PLACEHOLDER}
 					/>
+					<div>
+						<div class="mb-2 font-semibold text-gray-700">
+							Resource type<Required required={true} />
+						</div>
+						<ResourceTypePicker
+							bind:value={selectedResourceType}
+							notPickable={resourceToEdit != undefined}
+							on:click={() => {
+								args = {}
+							}}
+						/>
+					</div>
 				</div>
-			</div>
-		{:else}
-			<div class="text-sm">
-				{#if resourceSchema && resourceSchema?.properties}
-					{#each Object.keys(resourceSchema.properties) as fieldName}
-						<div class="flex flex-row w-full items-end justify-between">
-							<ArgInput
-								label={fieldName}
-								description={resourceSchema.properties[fieldName]?.description}
-								bind:value={args[fieldName]}
-								type={resourceSchema.properties[fieldName]?.type}
-								required={resourceSchema.required.includes(fieldName)}
-								pattern={resourceSchema.properties[fieldName]?.pattern}
-								bind:valid={inputCheck[fieldName]}
-								defaultValue={resourceSchema.properties[fieldName]?.default}
-								enum_={resourceSchema.properties[fieldName]?.enum}
-								contentEncoding={resourceSchema.properties[fieldName]?.contentEncoding}
-								itemsType={resourceSchema.properties[fieldName]?.items}
-								properties={resourceSchema.properties[fieldName]?.properties}
-								format={resourceSchema.properties[fieldName]?.format}
-							/>
-							<div class="pb-6 ml-2 relative">
-								<Button
-									variant="border"
-									color="blue"
-									size="sm"
-									btnClasses="min-w-min items-center leading-4 py-0"
-									on:click={() => {
-										pickForField = fieldName
-										itemPicker.openModal()
-									}}>Insert variable</Button
-								>
+			{:else}
+				<div class="text-sm">
+					{#if resourceSchema && resourceSchema?.properties}
+						{#each Object.keys(resourceSchema.properties) as fieldName}
+							<div class="flex flex-row w-full items-end justify-between">
+								<ArgInput
+									label={fieldName}
+									description={resourceSchema.properties[fieldName]?.description}
+									bind:value={args[fieldName]}
+									type={resourceSchema.properties[fieldName]?.type}
+									required={resourceSchema.required.includes(fieldName)}
+									pattern={resourceSchema.properties[fieldName]?.pattern}
+									bind:valid={inputCheck[fieldName]}
+									defaultValue={resourceSchema.properties[fieldName]?.default}
+									enum_={resourceSchema.properties[fieldName]?.enum}
+									contentEncoding={resourceSchema.properties[fieldName]?.contentEncoding}
+									itemsType={resourceSchema.properties[fieldName]?.items}
+									properties={resourceSchema.properties[fieldName]?.properties}
+									format={resourceSchema.properties[fieldName]?.format}
+								/>
+								<div class="pb-6 ml-2 relative">
+									<Button
+										variant="border"
+										color="blue"
+										size="sm"
+										btnClasses="min-w-min items-center leading-4 py-0"
+										on:click={() => {
+											pickForField = fieldName
+											itemPicker.openDrawer()
+										}}>Insert variable</Button
+									>
+								</div>
 							</div>
-						</div>
-					{/each}
-				{:else}
-					<div>Invalid schema</div>
-				{/if}
-			</div>
-		{/if}
-	</div>
-	<span slot="submission" class="flex gap-4">
-		{#if step === 1}
-			<Button
-				on:click={async () => {
-					await loadResourceType()
-					step = 2
-				}}
-				disabled={selectedResourceType == undefined || pathError != ''}
-			>
-				Next
-			</Button>
-		{:else}
-			<Button variant="border" on:click={() => (step = 1)}>Back</Button>
-			<Button on:click={resourceAction} disabled={!isValid}>Save</Button>
-		{/if}
-	</span>
-</Modal>
+						{/each}
+					{:else}
+						<div>Invalid schema</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		<span slot="submission" class="flex gap-4">
+			{#if step === 1}
+				<Button
+					on:click={async () => {
+						await loadResourceType()
+						step = 2
+					}}
+					disabled={selectedResourceType == undefined || pathError != ''}
+				>
+					Next
+				</Button>
+			{:else}
+				<Button variant="border" on:click={() => (step = 1)}>Back</Button>
+				<Button on:click={resourceAction} disabled={!isValid}>Save</Button>
+			{/if}
+		</span>
+	</DrawerContent>
+</Drawer>
 
 <ItemPicker
 	bind:this={itemPicker}
@@ -238,10 +230,7 @@ $: isValid = allTrue(inputCheck) ?? false;
 		>
 			Create a new variable
 		</Button>
-		<div class="text-xs mr-2 align-middle">
-			The variable you were looking for does not exist yet?
-		</div>
 	</div>
 </ItemPicker>
 
-<VariableEditor bind:this={variableEditor} on:create={itemPicker.openModal} />
+<VariableEditor bind:this={variableEditor} on:create={itemPicker.openDrawer} />

package/components/ResourceEditor.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         initEdit?: ((p: string) => Promise<void>) | undefined;
     };
     events: {
-        close: CustomEvent<any>;
         refresh: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/ResourcePicker.svelte

@@ -28,12 +28,15 @@ $: dispatch('change', value);
 		<option value={r.path}>{r.path}{r.description ? ' | ' + r.description : ''}</option>
 	{/each}
 </select>
-<div class="flex flex-row gap-4">
-	<a class="text-xs hover:underline" target="_blank" href="/resources?connect_app={resourceType}"
-		>Connect the app {resourceType} to an account (if available)</a
+<div class="flex flex-row gap-2">
+	<a
+		class="text-xs hover:underline"
+		rel="noreferrer"
+		target="_blank"
+		href="/resources?connect_app={resourceType}">Connect {resourceType} with OAuth</a
 	>
 	<button
-		class="text-xs text-blue-500"
+		class="text-xs text-blue-500 font-normal"
 		type="button"
 		on:click={() => {
 			loadResources(resourceType)
@@ -42,12 +45,12 @@ $: dispatch('change', value);
 		refresh
 	</button>
 	<button
-		class="text-xs text-blue-500"
+		class="text-xs text-blue-500 font-normal"
 		type="button"
 		on:click={() => {
 			resourceEditor.initNew(resourceType)
 		}}
 	>
-		+ Create a new {resourceType} resource manually
+		+Create a new {resourceType}
 	</button>
 </div>

package/components/ResourceTypePicker.svelte

@@ -24,6 +24,7 @@ $: if ($workspaceStore) {
 	{#if nonePickable}
 		{@const isPicked = value === undefined}
 		<Button
+			size="sm"
 			variant="border"
 			color={isPicked ? 'blue' : 'dark'}
 			btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
@@ -36,13 +37,14 @@ $: if ($workspaceStore) {
 	{#each resources as r}
 		{@const isPicked = value === r}
 		<Button
+			size="sm"
 			variant="border"
 			color={isPicked ? 'blue' : 'dark'}
 			btnClasses={isPicked ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 			disabled={notPickable}
 			on:click={() => onClick(r)}
 		>
-			<IconedResourceType name={r} after={true} />
+			<IconedResourceType name={r} after={true} width="20px" height="20px" />
 		</Button>
 	{/each}
 </div>

package/components/RunChart.svelte

@@ -0,0 +1,102 @@
+<script>import { Scatter } from 'svelte-chartjs';
+import 'chartjs-adapter-date-fns';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, TimeScale, LogarithmicScale } from 'chart.js';
+import { createEventDispatcher } from 'svelte';
+import { json } from 'svelte-highlight/languages';
+export let jobs = [];
+const dispatch = createEventDispatcher();
+$: success = jobs?.filter((x) => x.success);
+$: failed = jobs?.filter((x) => !x.success);
+ChartJS.register(Title, Tooltip, Legend, zoomPlugin, LineElement, CategoryScale, LinearScale, LogarithmicScale, PointElement, TimeScale);
+$: data = {
+    labels: ['Duration'],
+    datasets: [
+        {
+            // borderColor: 'rgba(99,0,125, .2)',
+            backgroundColor: '#f87171',
+            label: 'Failed',
+            data: failed?.map((job) => ({
+                x: job.created_at,
+                y: job.duration_ms,
+                id: job.id,
+                path: job.script_path
+            })) ?? []
+        },
+        {
+            // borderColor: 'rgba(99,0,125, .2)',
+            backgroundColor: '#4ade80',
+            label: 'Successful',
+            data: success?.map((job) => ({
+                x: job.created_at,
+                y: job.duration_ms,
+                id: job.id,
+                path: job.script_path
+            })) ?? []
+        }
+    ]
+};
+const zoomOptions = {
+    pan: {
+        enabled: true,
+        modifierKey: 'ctrl',
+        onPanComplete: ({ chart }) => {
+            dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) });
+        }
+    },
+    zoom: {
+        drag: {
+            enabled: true
+        },
+        mode: 'x',
+        onZoom: ({ chart }) => {
+            dispatch('zoom', { min: new Date(chart.scales.x.min), max: new Date(chart.scales.x.max) });
+        }
+    }
+};
+function getPath(x) {
+    return x.path;
+}
+</script>
+
+<Scatter
+	{data}
+	options={{
+		responsive: true,
+		maintainAspectRatio: false,
+		plugins: {
+			zoom: zoomOptions,
+			legend: {
+				display: false
+			},
+			tooltip: {
+				callbacks: {
+					label: function (context) {
+						return getPath(context.raw)
+					}
+				}
+			}
+		},
+
+		scales: {
+			x: {
+				grid: {
+					display: false
+				},
+				type: 'time',
+				min: jobs?.[jobs?.length - 1]?.created_at ?? new Date().toString()
+			},
+			y: {
+				grid: {
+					display: false
+				},
+				title: {
+					display: true,
+					text: 'job duration (ms)'
+				},
+				type: 'logarithmic'
+			}
+		},
+		animation: false
+	}}
+/>

package/components/RunChart.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import 'chartjs-adapter-date-fns';
+import type { CompletedJob } from '../gen';
+declare const __propDef: {
+    props: {
+        jobs?: CompletedJob[] | undefined;
+    };
+    events: {
+        zoom: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RunChartProps = typeof __propDef.props;
+export declare type RunChartEvents = typeof __propDef.events;
+export declare type RunChartSlots = typeof __propDef.slots;
+export default class RunChart extends SvelteComponentTyped<RunChartProps, RunChartEvents, RunChartSlots> {
+}
+export {};