windmill-components 1.85.0 → 1.87.0

package/dist/components/CronInput.svelte

@@ -0,0 +1,326 @@
+<script>import { ScheduleService } from '../gen';
+import { emptyString, formatCron } from '../utils';
+import Badge from './Badge.svelte';
+// @ts-ignore
+import Multiselect from 'svelte-multiselect';
+import TimezonePicker from 'svelte-timezone-picker';
+import CollapseLink from './CollapseLink.svelte';
+import { Button } from './common';
+export let schedule;
+// export let offset: number = -60 * Math.floor(new Date().getTimezoneOffset() / 60)
+export let timezone; // = Intl.DateTimeFormat().resolvedOptions().timeZone
+export let disabled = false;
+export let validCRON = true;
+let preview = [];
+// If the user has already entered a cron string, switching to the basic tab will override it.
+let executeEvery = 'minute';
+let seconds = 30;
+let minutes = 30;
+let hours = 1;
+const daysOfMonthOptions = Array.from(Array(31).keys()).map((i) => i + 1);
+let daysOfMonth = [];
+// let lastDayOfMonth = false
+const monthsOfYearOptions = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+];
+let monthsOfYear = [];
+const daysOfWeekOptions = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday'
+];
+let daysOfWeek = [];
+let UTCTime = '';
+$: !emptyString(schedule) && handleScheduleInput(schedule, timezone);
+async function handleScheduleInput(input, timezone) {
+    try {
+        preview = await ScheduleService.previewSchedule({
+            requestBody: { schedule: formatCron(input), timezone }
+        });
+        validCRON = true;
+    }
+    catch (err) {
+        if (err.status == 400 && err.body.includes('cron')) {
+            validCRON = false;
+        }
+        else {
+            validCRON = false;
+        }
+    }
+}
+let nschedule = '';
+$: {
+    // CRON string format
+    // sec  min   hour      day of month   month     day of week   year
+    // 0    30    9,12,15   1,15           May-Aug   Mon,Wed,Fri   2018/2
+    let s_daysOfMonth = '';
+    // if (lastDayOfMonth) {
+    // 	s_daysOfMonth = 'L'
+    // } else
+    if (daysOfMonth.length > 0) {
+        s_daysOfMonth = daysOfMonth.join(',');
+    }
+    else {
+        s_daysOfMonth = '*';
+    }
+    let s_months = '';
+    if (monthsOfYear.length > 0) {
+        s_months = monthsOfYear.map((m) => m.slice(0, 3).toLowerCase()).join(',');
+    }
+    else {
+        s_months = '*';
+    }
+    let s_daysOfWeek = '';
+    if (daysOfWeek.length > 0) {
+        s_daysOfWeek = daysOfWeek.map((d) => d.slice(0, 3).toLowerCase()).join(',');
+    }
+    else {
+        s_daysOfWeek = '*';
+    }
+    const s_AtUTCHours = parseInt(UTCTime.split(':')[0]) || '0';
+    const s_AtUTCMinutes = parseInt(UTCTime.split(':')[1]) || '0';
+    // If using the basic editor, set the cron string based on the selected options
+    if (executeEvery === 'second') {
+        if (seconds > 0) {
+            nschedule = `*/${seconds} * * * *`;
+        }
+        else {
+            nschedule = `* * * * *`;
+        }
+    }
+    else if (executeEvery === 'minute') {
+        if (minutes > 0) {
+            nschedule = `0 */${minutes} * * *`;
+        }
+        else {
+            nschedule = `* * * * *`;
+        }
+    }
+    else if (executeEvery === 'hour') {
+        if (hours > 0) {
+            nschedule = `0 0 */${hours} * *`;
+        }
+        else {
+            nschedule = `* * * * *`;
+        }
+    }
+    else if (executeEvery === 'day-month') {
+        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} ${s_daysOfMonth} *`;
+    }
+    else if (executeEvery === 'month') {
+        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} ${s_daysOfMonth} ${s_months}`;
+    }
+    else if (executeEvery === 'day-week') {
+        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} * * ${s_daysOfWeek}`;
+    }
+}
+$: dateFormatter = new Intl.DateTimeFormat('en-GB', {
+    weekday: 'short',
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    timeZone: timezone,
+    timeZoneName: 'short'
+}).format;
+</script>
+
+<div class="w-full flex space-x-16 p-4">
+	<div class="w-full flex flex-col space-y-2">
+		<div class="w-full flex flex-col gap-1">
+			<small class="font-bold">Cron</small>
+			<input
+				class="inline-block"
+				type="text"
+				id="cron-schedule"
+				name="cron-schedule"
+				placeholder="*/30 * * * *"
+				bind:value={schedule}
+				{disabled}
+			/>
+			{#if !validCRON}
+				<small class="text-red-600"> Invalid cron syntax </small>
+			{/if}
+		</div>
+
+		<div class="w-full flex flex-col gap-1">
+			<small class="font-bold">Timezone</small>
+
+			{#if disabled}
+				<div>
+					<Badge>{timezone}</Badge>
+				</div>
+			{:else}
+				<TimezonePicker {timezone} on:update={(e) => (timezone = e.detail.timezone)} />
+			{/if}
+		</div>
+
+		{#if !disabled}
+			<div class="w-full">
+				<CollapseLink text="Use simplified builder">
+					<div class="w-full flex flex-col gap-4 mt-4">
+						<div class="w-full flex flex-col gap-1">
+							<small class="font-bold">Execute schedule every</small>
+
+							<div class="w-full flex gap-4">
+								<div class="w-full flex flex-col gap-1">
+									<select
+										{disabled}
+										name="execute_every"
+										id="execute_every"
+										bind:value={executeEvery}
+									>
+										<option value="second">Second(s)</option>
+										<option value="minute">Minute(s)</option>
+										<option value="hour">Hour(s)</option>
+										<option value="day-month">Day of the month</option>
+										<option value="month">Month(s)</option>
+										<option value="day-week">Day of the week</option>
+									</select>
+								</div>
+
+								<div class="w-full flex flex-col gap-1 justify-center">
+									{#if executeEvery == 'second'}
+										<input {disabled} type="number" min="0" max="59" bind:value={seconds} />
+										<small>Valid range 0-59</small>
+									{:else if executeEvery == 'minute'}
+										<input {disabled} type="number" min="0" max="59" bind:value={minutes} />
+										<small>Valid range 0-59</small>
+									{:else if executeEvery == 'hour'}
+										<input {disabled} type="number" min="0" max="23" bind:value={hours} />
+										<small>Valid range 0-23</small>
+									{:else if executeEvery == 'day-month'}
+										<!-- <div class="w-full flex">
+									<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
+										<div class="flex">
+											<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
+										</div>
+										<small> Last day of the month </small>
+									</label>
+								</div> -->
+									{/if}
+								</div>
+							</div>
+						</div>
+
+						<div class="w-full flex flex-col gap-4">
+							{#if executeEvery == 'month'}
+								<div class="w-full flex flex-col">
+									<Multiselect
+										{disabled}
+										bind:selected={monthsOfYear}
+										options={monthsOfYearOptions}
+										selectedOptionsDraggable={false}
+										placeholder="Every month"
+									/>
+								</div>
+							{/if}
+
+							{#if executeEvery == 'day-week'}
+								<div class="w-full flex flex-col">
+									<Multiselect
+										{disabled}
+										bind:selected={daysOfWeek}
+										options={daysOfWeekOptions}
+										selectedOptionsDraggable={false}
+										placeholder="Every day"
+									/>
+								</div>
+							{/if}
+
+							{#if executeEvery == 'day-month' || executeEvery == 'month'}
+								<div class="w-full flex flex-col gap-1">
+									{#if executeEvery == 'month'}
+										<small class="font-bold">On day of the month</small>
+									{/if}
+									<div class="w-full flex gap-4">
+										<div class="w-full flex">
+											<Multiselect
+												{disabled}
+												bind:selected={daysOfMonth}
+												options={daysOfMonthOptions}
+												selectedOptionsDraggable={false}
+												placeholder="Every day"
+											/>
+										</div>
+
+										<!-- {#if executeEvery == 'month'}
+									<div class="w-full flex">
+										<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
+											<div class="flex">
+												<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
+											</div>
+											<small> Last day of the month </small>
+										</label>
+									</div>
+								{/if} -->
+									</div>
+									<small>Schedule will only execute on valid calendar days</small>
+								</div>
+							{/if}
+
+							{#if executeEvery == 'day-month' || executeEvery == 'month' || executeEvery == 'day-week'}
+								<div class="w-full flex flex-col gap-1">
+									<small class="font-bold">At UTC Time</small>
+									<input
+										{disabled}
+										type="time"
+										name="atUTCTime"
+										id="atUTCTime"
+										bind:value={UTCTime}
+									/>
+								</div>
+							{/if}
+						</div>
+
+						<div class="w-full flex flex-col gap-1">
+							<small class="font-bold">Preview New Cron</small>
+
+							<div class="flex p-2 px-4 rounded-md bg-gray-100">
+								<span>{nschedule}</span>
+							</div>
+						</div>
+					</div>
+
+					<div class="mt-4">
+						<Button variant="border" color="dark" size="xs" on:click={() => (schedule = nschedule)}
+							>Set Schedule</Button
+						>
+					</div>
+				</CollapseLink>
+			</div>
+		{/if}
+	</div>
+
+	<div class="w-full flex flex-col space-y-2">
+		<h3>Execution summary</h3>
+		<hr />
+		<div class="flex flex-col space-y-2">
+			<small>Estimated upcoming events ({timezone})</small>
+			<div class="flex flex-col rounded-md p-4 border text-gray-600">
+				{#each preview as date}
+					<div class="flex items-center space-x-2">
+						<span>{dateFormatter(new Date(date))}</span>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>

package/dist/components/CronInput.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        schedule: string;
+        timezone: string;
+        disabled?: boolean | undefined;
+        validCRON?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CronInputProps = typeof __propDef.props;
+export type CronInputEvents = typeof __propDef.events;
+export type CronInputSlots = typeof __propDef.slots;
+export default class CronInput extends SvelteComponentTyped<CronInputProps, CronInputEvents, CronInputSlots> {
+}
+export {};

package/dist/components/DisplayResult.svelte

@@ -0,0 +1,251 @@
+<script>import { Highlight } from 'svelte-highlight';
+import { json } from 'svelte-highlight/languages';
+import TableCustom from './TableCustom.svelte';
+import { copyToClipboard, truncate } from '../utils';
+import { Button, Drawer, DrawerContent } from './common';
+import autosize from 'svelte-autosize';
+import { ClipboardCopy } from 'lucide-svelte';
+import Portal from 'svelte-portal';
+export let result;
+export let requireHtmlApproval = false;
+export let filename = undefined;
+export let disableExpand = false;
+let resultKind;
+$: resultKind = inferResultKind(result);
+let forceJson = false;
+let enableHtml = false;
+function isRectangularArray(obj) {
+    if (!Array.isArray(obj) || obj.length == 0) {
+        return false;
+    }
+    if (!Object.values(obj)
+        .map(Array.isArray)
+        .reduce((a, b) => a && b)) {
+        return false;
+    }
+    let innerSize = obj[0].length;
+    return Object.values(obj)
+        .map((x) => x.length == innerSize)
+        .reduce((a, b) => a && b);
+}
+function asListOfList(obj) {
+    return obj;
+}
+function inferResultKind(result) {
+    if (result) {
+        try {
+            let keys = Object.keys(result);
+            if (isRectangularArray(result)) {
+                return 'table-row';
+            }
+            else if (keys.map((k) => Array.isArray(result[k])).reduce((a, b) => a && b)) {
+                return 'table-col';
+            }
+            else if (keys.length == 1 && keys[0] == 'html') {
+                return 'html';
+            }
+            else if (keys.length == 1 && keys[0] == 'png') {
+                return 'png';
+            }
+            else if (keys.length == 1 && keys[0] == 'svg') {
+                return 'svg';
+            }
+            else if (keys.length == 1 && keys[0] == 'jpeg') {
+                return 'jpeg';
+            }
+            else if (keys.length == 1 && keys[0] == 'file') {
+                return 'file';
+            }
+            else if (keys.length == 1 && keys[0] == 'error') {
+                return 'error';
+            }
+            else if (keys.length === 2 && keys.includes('file') && keys.includes('filename')) {
+                return 'filename';
+            }
+            else if (keys.length == 3 &&
+                keys.includes('resume') &&
+                keys.includes('cancel') &&
+                keys.includes('approvalPage')) {
+                return 'approval';
+            }
+        }
+        catch (err) { }
+    }
+    return 'json';
+}
+let payload = '';
+let jsonViewer;
+</script>
+
+<div class="inline-highlight">
+	{#if result != undefined}
+		{#if resultKind && resultKind != 'json'}
+			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
+				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
+			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
+				class="mb-2 w-full text-sm text-gray-700 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>
+				{/if}
+			</div>{/if}{#if !forceJson && resultKind == 'table-col'}<div
+				class="grid grid-flow-col-dense border border-gray-200 rounded-md"
+			>
+				{#each Object.keys(result) as col}
+					<div class="flex flex-col max-h-40 min-w-full">
+						<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md">
+							{col}
+						</div>
+						{#if Array.isArray(result[col])}
+							{#each result[col] as item}
+								<div class="px-12 text-left text-xs whitespace-nowrap">
+									{typeof item === 'string' ? item : JSON.stringify(item)}
+								</div>
+							{/each}
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{:else if !forceJson && resultKind == 'table-row'}<div
+				class="grid grid-flow-col-dense border border-gray-200"
+			>
+				<TableCustom>
+					<tbody slot="body">
+						{#each asListOfList(result) as row}
+							<tr>
+								{#each row as v}
+									<td class="!text-xs">{truncate(JSON.stringify(v), 200) ?? ''}</td>
+								{/each}
+							</tr>
+						{/each}
+					</tbody>
+				</TableCustom>
+			</div>
+		{:else if !forceJson && resultKind == 'html'}
+			<div class="h-full">
+				{#if !requireHtmlApproval || enableHtml}
+					{@html result.html}
+				{:else}
+					<div class="font-main text-sm">
+						<div class="flex flex-col">
+							<div class="bg-red-400 py-1 rounded-t text-white font-bold text-center">
+								Warning
+							</div>
+							<p
+								class="text-gray-600 mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
+								>Rendering HTML can expose you to <a
+									href="https://owasp.org/www-community/attacks/xss/"
+									target="_blank"
+									rel="noreferrer"
+									class="hover:underline">XSS attacks</a
+								>. Only enable it if you trust the author of the script.
+							</p>
+						</div>
+						<div class="center-center">
+							<Button size="sm" color="dark" on:click={() => (enableHtml = true)}>
+								Enable HTML rendering
+							</Button>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{:else if !forceJson && resultKind == 'png'}
+			<div class="h-full"
+				><img alt="png rendered" class="w-auto h-full" src="data:image/png;base64,{result.png}" />
+			</div>
+		{:else if !forceJson && resultKind == 'jpeg'}
+			<div class="h-full"
+				><img
+					alt="jpeg rendered"
+					class="w-auto h-full"
+					src="data:image/jpeg;base64,{result.jpeg}"
+				/>
+			</div>
+		{:else if !forceJson && resultKind == 'svg'}
+			<div
+				><a download="windmill.svg" href="data:text/plain;base64,{btoa(result.svg)}">Download</a>
+			</div>
+			<div class="h-full overflow-auto">{@html result.svg} </div>
+		{:else if !forceJson && resultKind == 'gif'}
+			<div class="h-full"
+				><img alt="gif rendered" class="w-auto h-full" src="data:image/gif;base64,{result.gif}" />
+			</div>
+		{:else if !forceJson && resultKind == 'file'}
+			<div
+				><a download="windmill.file" href="data:application/octet-stream;base64,{result.file}"
+					>Download</a
+				>
+			</div>
+		{:else if !forceJson && resultKind === 'filename'}
+			<div>
+				<a download={result.filename} href="data:application/octet-stream;base64,{result.file}">
+					Download
+				</a>
+			</div>
+		{:else if !forceJson && resultKind == 'error'}<div>
+				<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
+					>{result.error.name}: {result.error.message}</span
+				>
+				<pre class="text-sm whitespace-pre-wrap text-gray-900">{result.error.stack ?? ''}</pre>
+			</div>
+		{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-1 mx-4">
+				<Button
+					color="green"
+					variant="border"
+					on:click={() =>
+						fetch(result['resume'], {
+							method: 'POST',
+							body: JSON.stringify(payload),
+							headers: { 'Content-Type': 'application/json' }
+						})}
+				>
+					Resume</Button
+				>
+				<Button color="red" variant="border" on:click={() => fetch(result['cancel'])}>Cancel</Button
+				>
+				<div>
+					<h3>Payload</h3>
+					<div class="border border-black">
+						<input type="text" bind:value={payload} use:autosize />
+					</div>
+				</div>
+				<div class="center-center"
+					><a rel="noreferrer" target="_blank" href={result['approvalPage']}>Approval Page</a></div
+				>
+			</div>
+		{:else}
+			{@const jsonStr = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
+			{#if jsonStr.length > 10000}
+				JSON too large. <a
+					download="{filename ?? 'result'}.json"
+					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+				>
+			{:else}
+				<Highlight language={json} code={jsonStr} />
+			{/if}
+		{/if}
+	{:else}
+		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
+	{/if}
+</div>
+
+{#if !disableExpand}
+	<Portal>
+		<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"
+					>
+						<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+					</Button>
+				</svelte:fragment>
+				<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+			</DrawerContent>
+		</Drawer>
+	</Portal>
+{/if}

package/dist/components/DisplayResult.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        result: any;
+        requireHtmlApproval?: boolean | undefined;
+        filename?: string | undefined;
+        disableExpand?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DisplayResultProps = typeof __propDef.props;
+export type DisplayResultEvents = typeof __propDef.events;
+export type DisplayResultSlots = typeof __propDef.slots;
+export default class DisplayResult extends SvelteComponentTyped<DisplayResultProps, DisplayResultEvents, DisplayResultSlots> {
+}
+export {};