windmill-components 1.85.0 → 1.86.0

package/components/CenteredModal.svelte

@@ -10,9 +10,11 @@ onMount(async () => {
 });
 </script>
 
-<div class="center-center min-h-screen p-4 relative bg-[#3b4252]">
-	<div class="border rounded-md shadow-md bg-white w-full max-w-[640px] 
-	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10">
+<div class="center-center min-h-screen p-4 relative bg-gray-50">
+	<div
+		class="border rounded-md shadow-md bg-white w-full max-w-[640px]
+	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
+	>
 		<div class="mb-10">
 			<h1 class="text-center">
 				{title}
@@ -27,13 +29,13 @@ onMount(async () => {
 	</div>
 	{#if !disableLogo}
 		<div class="hidden lg:block absolute top-10 right-50">
-			<div class="animate-[spin_100s_linear_infinite] ">
-				<WindmillIcon white height="100px" width="100px" />
+			<div>
+				<WindmillIcon height="100px" width="100px" spin="slow" />
 			</div>
-			<h2 class="text-center pt-2 text-gray-100">Windmill</h2>
+			<h2 class="text-center pt-2 text-gray-800">Windmill</h2>
 		</div>
 	{/if}
-	<div class="absolute top-0 right-0 text-2xs text-gray-300 italic px-3 py-1">
+	<div class="absolute top-0 right-0 text-2xs text-gray-800 italic px-3 py-1">
 		<span class="font-mono">{version}</span>
 	</div>
 </div>

package/components/CronInput.svelte

@@ -1,28 +1,61 @@
-<script context="module">
-	export const OFFSET = new Date().getTimezoneOffset()
-</script>
-
 <script>import { ScheduleService } from '../gen';
-import { displayDate, emptyString, formatCron } from '../utils';
+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 = [];
-let cronError = '';
-export let schedule = '0 0 12 * *';
-export let disabled = false;
-let limit = 3;
-$: !emptyString(schedule) && handleScheduleInput(schedule);
-async function handleScheduleInput(input) {
+// 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), offset: OFFSET }
+            requestBody: { schedule: formatCron(input), timezone }
         });
-        cronError = '';
         validCRON = true;
     }
     catch (err) {
         if (err.status == 400 && err.body.includes('cron')) {
-            cronError = `Invalid cron expression`;
             validCRON = false;
         }
         else {
@@ -30,60 +63,264 @@ async function handleScheduleInput(input) {
         }
     }
 }
+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="max-w-xl">
-	<div class="w-full text-right text-red-600 text-2xs grow">{cronError}</div>
-	<div class="flex flex-row items-end max-w-5xl">
-		<label class="text-xs min-w-max mr-2 self-center" for="cron-schedule">CRON expression</label>
-		<input
-			class="inline-block"
-			type="text"
-			id="cron-schedule"
-			name="cron-schedule"
-			bind:value={schedule}
-			{disabled}
-		/>
-	</div>
-	{#if !disabled}
-		<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28 mb-2">
-			<button
-				on:click={() => {
-					schedule = '0 */15 * * *'
-					cronError = ''
-				}}>every 15 min</button
-			>
-			<button
-				on:click={() => {
-					schedule = '0 0 * * * *'
-					cronError = ''
-				}}>every hour</button
-			>
-			<button
-				on:click={() => {
-					schedule = '0 0 8 * * *'
-					cronError = ''
-				}}>once a day at 8AM</button
-			>
+<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>
-	{/if}
 
-	<CollapseLink text="preview next runs" open={true}>
-		{#if preview && preview.length > 0}
-			<div class="text-sm text-gray-700 border p-2 rounded-md">
-				<div class="flex flex-row justify-between">The next runs will be scheduled at:</div>
-				<ul class="list-disc mx-12">
-					{#each preview.slice(0, limit) as p}
-						<li class="mx-2 text-gray-700 text-sm">{displayDate(p, true)}</li>
-					{/each}
-					<li class="text-sm mx-2">...</li>
-					{#if limit != 10}
-						<button class="underline text-gray-400" on:click={() => (limit = 10)}>Load more</button>
-					{:else}
-						<button class="underline text-gray-400" on:click={() => (limit = 3)}>Load less</button>
-					{/if}
-				</ul>
+		<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}
-	</CollapseLink>
+	</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/components/CronInput.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-export declare const OFFSET: number;
 declare const __propDef: {
     props: {
-        validCRON?: boolean | undefined;
-        schedule?: string | undefined;
+        schedule: string;
+        timezone: string;
         disabled?: boolean | undefined;
+        validCRON?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/DisplayResult.svelte

@@ -82,9 +82,9 @@ let jsonViewer;
 			<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 min-w-[300px] text-sm text-gray-700 relative"
+				class="mb-2 w-full text-sm text-gray-700 relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
-				<div class="text-gray-500 text-sm absolute top-0 right-2">
+				<div class="text-gray-500 text-sm absolute top-6 right-0">
 					<button on:click={jsonViewer.openDrawer}>Expand JSON</button>
 				</div></div
 			>{/if}{#if !forceJson && resultKind == 'table-col'}<div