windmill-components 1.408.2 → 1.430.3

package/package/components/AutoscalingConfigEditor.svelte

@@ -0,0 +1,360 @@
+<script>import Toggle from './Toggle.svelte';
+import Section from './Section.svelte';
+import Tooltip from './Tooltip.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import { Button } from './common';
+import { ExternalLink } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import Label from './Label.svelte';
+import MultiSelect from 'svelte-multiselect';
+export let config;
+export let worker_tags;
+const dispatch = createEventDispatcher();
+let test_input = 3;
+</script>
+
+<div class="flex flex-row gap-16 pt-2">
+	<div class="space-y-4 flex flex-col gap-1 max-w-xs text-sm">
+		<h5>Rules</h5>
+		<Toggle
+			checked={config?.enabled ?? false}
+			options={{ right: 'Enabled' }}
+			on:change={(e) => {
+				dispatch('dirty')
+				if (e.detail) {
+					if (!config) {
+						config = {
+							enabled: true,
+							min_workers: 3,
+							max_workers: 10,
+							integration: { type: 'dryrun' }
+						}
+					} else {
+						config.enabled = true
+					}
+				} else {
+					config = {
+						...(config ?? {
+							min_workers: 3,
+							max_workers: 10,
+							integration: { type: 'dryrun' }
+						}),
+						enabled: false
+					}
+				}
+			}}
+		/>
+		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<label>
+			Min # of Workers
+			{#if config !== undefined}
+				<input on:input={() => dispatch('dirty')} type="number" bind:value={config.min_workers} />
+				{#if config.min_workers !== undefined && config.min_workers != undefined && config.min_workers > config.max_workers}
+					<div class="text-red-600 text-xs whitespace-nowrap"
+						>Minimum cannot be {'>'} to Maximum</div
+					>
+				{/if}
+			{:else}
+				<input type="number" disabled />
+			{/if}
+		</label>
+		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<label>
+			Max # of Workers
+			{#if config !== undefined}
+				<input on:input={() => dispatch('dirty')} type="number" bind:value={config.max_workers} />
+			{:else}
+				<input type="number" disabled />
+			{/if}
+		</label>
+		<div class="p-2">
+			<Section label="Advanced" small collapsable={true}>
+				<div class="flex flex-col gap-2 text-2xs">
+					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<label>
+						Cooldown seconds after an incremental scale-in/out
+						{#if config !== undefined}
+							<input
+								on:input={() => dispatch('dirty')}
+								type="number"
+								step="1"
+								min="30"
+								placeholder="300"
+								bind:value={config.cooldown_seconds}
+							/>
+						{:else}
+							<input type="number" disabled />
+						{/if}
+					</label>
+					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<label>
+						Cooldown seconds after a full scale out
+						{#if config !== undefined}
+							<input
+								on:input={() => dispatch('dirty')}
+								type="number"
+								step="1"
+								min="30"
+								placeholder="1500"
+								bind:value={config.full_scale_cooldown_seconds}
+							/>
+						{:else}
+							<input type="number" disabled />
+						{/if}
+					</label>
+					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<label>
+						Num jobs waiting to trigger an incremental scale-out
+						{#if config !== undefined}
+							<input
+								on:input={() => dispatch('dirty')}
+								type="number"
+								bind:value={config.inc_scale_num_jobs_waiting}
+								placeholder="1"
+							/>
+						{:else}
+							<input type="number" disabled />
+						{/if}
+					</label>
+
+					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<label>
+						Num jobs waiting to trigger a full scale out <Tooltip
+							>Default: max_workers, full scale out = scale out to max workers</Tooltip
+						>
+						{#if config !== undefined}
+							<input
+								on:input={() => dispatch('dirty')}
+								type="number"
+								placeholder="max workers"
+								bind:value={config.full_scale_jobs_waiting}
+							/>
+						{:else}
+							<input type="number" disabled />
+						{/if}
+					</label>
+					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<label>
+						Occupancy rate % threshold to go below to trigger a scale-in (decrease) <Tooltip
+							>Default: 25%, need to go below average of all of 15s, 5m and 30m occupancy rates</Tooltip
+						>
+						{#if config !== undefined}
+							<input
+								on:input={() => dispatch('dirty')}
+								type="number"
+								step="1"
+								min="0"
+								max="100"
+								placeholder="25"
+								bind:value={config.dec_scale_occupancy_rate}
+							/>
+						{:else}
+							<input type="number" step="0.01" disabled />
+						{/if}
+					</label>
+					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<label>
+						Occupancy rate threshold to exceed to trigger an incremental scale-out (increase) <Tooltip
+							>Default: 75%, need to exceed average of all of 15s, 5m and 30m occupancy rates</Tooltip
+						>
+						{#if config !== undefined}
+							<input
+								on:input={() => dispatch('dirty')}
+								type="number"
+								step="1"
+								min="0"
+								max="100"
+								placeholder="75"
+								bind:value={config.inc_scale_occupancy_rate}
+							/>
+						{:else}
+							<input type="number" step="0.01" disabled />
+						{/if}
+					</label>
+					<!-- svelte-ignore a11y-label-has-associated-control -->
+					<label>
+						Num workers to scale-in/out by when incremental <Tooltip
+							>Default: (max_workers - min_workers) / 5</Tooltip
+						>
+						{#if config !== undefined}
+							<input
+								on:input={() => dispatch('dirty')}
+								type="number"
+								step="1"
+								min="1"
+								placeholder="(max_workers - min_workers) / 5"
+								bind:value={config.inc_num_workers}
+							/>
+						{:else}
+							<input type="number" disabled />
+						{/if}
+					</label>
+
+					<Label label="Custom tags to autoscale on">
+						<svelte:fragment slot="header">
+							<Tooltip>
+								By default, autoscaling will apply to the tags the worker group is assigned to but
+								you can override this here.
+							</Tooltip>
+						</svelte:fragment>
+						{#if config}
+							{#if config.custom_tags}
+								<MultiSelect
+									outerDivClass="text-secondary !bg-surface-disabled !border-0"
+									selected={config.custom_tags}
+									on:change={(e) => {
+										console.log(e.detail.type, config?.custom_tags)
+										if (e.detail && config?.custom_tags) {
+											if (e.detail.type === 'add') {
+												config.custom_tags = [...config.custom_tags, e.detail.option]
+											} else if (e.detail.type === 'remove') {
+												config.custom_tags = config.custom_tags.filter((t) => t !== e.detail.option)
+												if (config?.custom_tags && config.custom_tags.length == 0) {
+													config.custom_tags = undefined
+												}
+											} else if (e.detail.type === 'removeAll') {
+												config.custom_tags = undefined
+											} else {
+												console.error(
+													`Priority tags multiselect - unknown event type: '${e.detail.type}'`
+												)
+											}
+											dispatch('dirty')
+										}
+									}}
+									on:clear={() => {
+										if (config) {
+											config.custom_tags = undefined
+										}
+										dispatch('dirty')
+									}}
+									options={worker_tags ?? []}
+									selectedOptionsDraggable={false}
+									ulOptionsClass={'!bg-surface-secondary'}
+									placeholder="Tags"
+								/>
+							{:else}
+								<Button
+									color="light"
+									size="xs"
+									variant="contained"
+									on:click={() => {
+										if (config) {
+											config.custom_tags = []
+											dispatch('dirty')
+										}
+									}}>Add custom tags</Button
+								>
+							{/if}
+						{/if}
+					</Label>
+				</div>
+			</Section>
+		</div>
+	</div>
+	<div class="flex flex-col gap-1 max-w-xs text-sm">
+		<h5>Integration</h5>
+		{#if config?.integration}
+			<ToggleButtonGroup
+				on:selected={(e) => dispatch('dirty')}
+				bind:selected={config.integration.type}
+				class="mb-4 mt-2"
+			>
+				<ToggleButton
+					value="dryrun"
+					size="sm"
+					label="Dry run"
+					tooltip="See autoscaling events but not actual scaling actions will be performed"
+				/>
+				<ToggleButton
+					value="script"
+					size="sm"
+					label="Custom Script"
+					tooltip="Run a custom script to scale your worker group"
+				/>
+				<ToggleButton position="center" disabled value="ecs" size="sm" label="ECS (soon)" />
+				<ToggleButton position="right" disabled value="nomad" size="sm" label="Nomad (soon)" />
+				<ToggleButton
+					position="right"
+					disabled
+					value="kubernetes"
+					size="sm"
+					label="Kubernetes (soon)"
+				/>
+			</ToggleButtonGroup>
+
+			{#if config.integration.type === 'script'}
+				<label>
+					Script path on the 'admins' workspace
+					<input
+						on:input={() => dispatch('dirty')}
+						type="text"
+						bind:value={config.integration.path}
+					/>
+				</label>
+
+				<label>
+					Custom tag for executing script (optional)
+					{#if config.integration.tag}
+						<input
+							on:input={() => dispatch('dirty')}
+							type="text"
+							bind:value={config.integration.tag}
+						/>
+					{:else}
+						<Button
+							color="light"
+							size="xs"
+							variant="contained"
+							on:click={() => {
+								if (config?.integration?.type === 'script') {
+									config.integration.tag = 'bash'
+									dispatch('dirty')
+								}
+							}}>Set tag</Button
+						>
+					{/if}
+				</label>
+
+				<div class="flex mt-6 gap-2">
+					<Button
+						color="dark"
+						target="_blank"
+						endIcon={{ icon: ExternalLink }}
+						href="/scripts/add?hub=hub%2F9204%2Fhelper%2FScale%20a%20worker%20group%20deployed%20as%20a%20kubernetes%20service&workspace=admins"
+						>Create from template</Button
+					>
+					<Button
+						color="dark"
+						target="_blank"
+						href={`/runs/${config.integration.path}?workspace=admins`}
+						endIcon={{ icon: ExternalLink }}
+					>
+						See jobs
+					</Button>
+				</div>
+				<div class="flex flex-row gap-2 mt-4">
+					<Button color="light" size="xs" variant="contained">Test scaling</Button>
+					<div class="flex text-xs flex-row gap-2 items-center">
+						<input class="!w-16" type="number" bind:value={test_input} />
+						workers
+					</div>
+				</div>
+			{/if}
+		{:else}
+			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2">
+				<ToggleButton value="dryrun" size="sm" label="Dry run" />
+				<ToggleButton value="script" size="sm" label="Custom Script" />
+				<ToggleButton position="center" value="ecs" size="sm" label="ECS (soon)" />
+				<ToggleButton position="right" value="nomad" size="sm" label="Nomad (soon)" />
+				<ToggleButton position="right" value="kubernetes" size="sm" label="Kubernetes (soon)" />
+			</ToggleButtonGroup>
+
+			<label>
+				Script path on the 'admins' workspace
+				<input type="text" disabled />
+			</label>
+		{/if}
+	</div>
+</div>

package/package/components/AutoscalingConfigEditor.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { AutoscalingConfig } from './worker_group';
+declare const __propDef: {
+    props: {
+        config: AutoscalingConfig | undefined;
+        worker_tags: string[] | undefined;
+    };
+    events: {
+        dirty: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AutoscalingConfigEditorProps = typeof __propDef.props;
+export type AutoscalingConfigEditorEvents = typeof __propDef.events;
+export type AutoscalingConfigEditorSlots = typeof __propDef.slots;
+export default class AutoscalingConfigEditor extends SvelteComponent<AutoscalingConfigEditorProps, AutoscalingConfigEditorEvents, AutoscalingConfigEditorSlots> {
+}
+export {};

package/package/components/AutoscalingEvents.svelte

@@ -0,0 +1,70 @@
+<script>import { ConfigService } from '../gen';
+import { LoaderIcon, RefreshCw } from 'lucide-svelte';
+import { Button, Skeleton } from './common';
+import { twMerge } from 'tailwind-merge';
+import TimeAgo from './TimeAgo.svelte';
+import { enterpriseLicense } from '../stores';
+export let worker_group;
+let loading = true;
+let events = undefined;
+$: worker_group && loadEvents();
+async function loadEvents() {
+    loading = true;
+    try {
+        events = await ConfigService.listAutoscalingEvents({ workerGroup: worker_group });
+    }
+    catch (e) {
+        events = [];
+        console.error(e);
+    }
+    finally {
+        loading = false;
+    }
+}
+</script>
+
+<div>
+	<h6
+		class={!$enterpriseLicense || (events != undefined && events.length == 0)
+			? 'text-tertiary'
+			: ''}
+		>Autoscaling events {#if $enterpriseLicense}<span class="text-xs text-tertiary">(5 last)</span>
+			<span class="inline-flex ml-6">
+				<Button
+					startIcon={{
+						icon: loading ? LoaderIcon : RefreshCw,
+						classes: twMerge(
+							loading ? 'animate-spin text-blue-800' : '',
+							'transition-all text-gray-500 dark:text-white'
+						)
+					}}
+					color="light"
+					size="xs2"
+					btnClasses={twMerge(loading ? ' bg-blue-100 dark:bg-blue-400' : '', 'transition-all')}
+					on:click={() => loadEvents()}
+					iconOnly
+				/>
+			</span>{/if}
+	</h6>
+	{#if !$enterpriseLicense}
+		<div class="text-xs pt-2 text-tertiary">Autoscaling is an EE feature</div>
+	{:else if loading}
+		<Skeleton layout={[[12], 1]} />
+	{:else if events}
+		{#if events.length == 0}
+			<div class="text-xs pt-2 text-tertiary"
+				>No events, is autoscaling set in the worker group config?</div
+			>
+		{:else}
+			<div class="flex flex-col gap-2 text-xs text-tertiary pt-4">
+				{#each events as event}
+					<div class="flex flex-row gap-4">
+						<div class="text-primary">{event.event_type} to {event.desired_workers}</div>
+						<div class="text-secondary">{event.reason}</div>
+						<div class="text-tertiary"><TimeAgo date={event.applied_at ?? ''} /></div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+</div>

package/package/components/AutoscalingEvents.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        worker_group: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AutoscalingEventsProps = typeof __propDef.props;
+export type AutoscalingEventsEvents = typeof __propDef.events;
+export type AutoscalingEventsSlots = typeof __propDef.slots;
+export default class AutoscalingEvents extends SvelteComponent<AutoscalingEventsProps, AutoscalingEventsEvents, AutoscalingEventsSlots> {
+}
+export {};

package/package/components/ChangeInstanceUsernameInner.svelte

@@ -49,11 +49,13 @@ async function renameUser() {
 </script>
 
 <div class="flex flex-col max-w-2xl p-2">
+	{#if isConflict} 
 	<span class="text-sm mb-2 leading-6 font-semibold"
-		>{isConflict ? 'Fix username conflict' : 'Change username'}</span
+		>Fix username conflict</span
 	>
+	{/if}
 
-	<span class="text-xs mb-1 leading-6"
+	<span class="text-sm font-semibold mb-1 leading-6"
 		>{isConflict ? 'Auto-generated instance username' : 'New username'}</span
 	>
 	<input

package/package/components/CronInput.svelte

@@ -17,6 +17,7 @@ export let schedule;
 export let timezone; // = Intl.DateTimeFormat().resolvedOptions().timeZone
 export let disabled = false;
 export let validCRON = true;
+export let cronVersion = 'v2';
 let preview = [];
 // If the user has already entered a cron string, switching to the basic tab will override it.
 let executeEvery = 'minute';
@@ -56,7 +57,7 @@ $: !emptyString(schedule) && handleScheduleInput(schedule, timezone);
 async function handleScheduleInput(input, timezone) {
     try {
         preview = await ScheduleService.previewSchedule({
-            requestBody: { schedule: formatCron(input), timezone }
+            requestBody: { schedule: formatCron(input), timezone, cron_version: cronVersion }
         });
         validCRON = true;
     }
@@ -104,33 +105,33 @@ $: {
     // If using the basic editor, set the cron string based on the selected options
     if (executeEvery === 'second') {
         if (seconds > 0) {
-            nschedule = `*/${seconds} * * * *`;
+            nschedule = `*/${seconds} * * * * *`;
         }
         else {
-            nschedule = `* * * * *`;
+            nschedule = `* * * * * *`;
         }
     }
     else if (executeEvery === 'minute') {
         if (minutes > 0) {
-            nschedule = `0 */${minutes} * * *`;
+            nschedule = `0 */${minutes} * * * *`;
         }
         else {
-            nschedule = `* * * * *`;
+            nschedule = `* * * * * *`;
         }
     }
     else if (executeEvery === 'hour') {
         if (hours > 0) {
-            nschedule = `0 0 */${hours} * *`;
+            nschedule = `0 0 */${hours} * * *`;
         }
         else {
-            nschedule = `* * * * *`;
+            nschedule = `* * * * * *`;
         }
     }
     else if (executeEvery === 'day-month') {
-        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} ${s_daysOfMonth} *`;
+        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} ${s_daysOfMonth} * *`;
     }
     else if (executeEvery === 'month') {
-        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} ${s_daysOfMonth} ${s_months}`;
+        nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} ${s_daysOfMonth} ${s_months} *`;
     }
     else if (executeEvery === 'day-week') {
         nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} * * ${s_daysOfWeek}`;
@@ -197,26 +198,33 @@ const items = Object.keys(timezones)
 
 <div class="w-full flex space-x-8">
 	<div class="w-full flex flex-col gap-4">
-		<Label label="Cron">
+		<Label label="Cron" class="font-semibold" primary={true}>
 			<svelte:fragment slot="error">
 				{#if !validCRON}
 					<div class="text-red-600 text-xs"> Invalid cron syntax </div>
 				{/if}
 			</svelte:fragment>
+			<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1 hover:underline">
+				<a
+					class="text-tertiary"
+					href="https://www.windmill.dev/docs/core_concepts/scheduling#cron-syntax"
+					target="_blank">Croner</a
+				>
+			</div>
 			<input
 				class="inline-block"
 				type="text"
 				id="cron-schedule"
 				name="cron-schedule"
-				placeholder="*/30 * * * *"
+				placeholder="0 0 */1 * * *"
 				bind:value={schedule}
 				{disabled}
 			/>
 		</Label>
-		<Label label="Timezone">
+		<Label label="Timezone" class="font-semibold" primary>
 			{#if disabled}
 				<div>
-					<Badge>{timezone}</Badge>
+					<Badge><span class="text-primary dark:text-primary-inverse">{timezone}</span></Badge>
 				</div>
 			{:else}
 				<Select
@@ -378,15 +386,14 @@ const items = Object.keys(timezones)
 						</Button>
 					</div>
 				</CronBuilder>
-				<CronGen bind:schedule />
+				<CronGen bind:schedule bind:cronVersion />
 			</div>
 		{/if}
 	</div>
 
 	<div class="w-full flex flex-col space-y-2">
-		<div class="text-sm font-semibold leading-none">Execution summary</div>
+		<div class="text-sm font-semibold leading-none">Estimated upcoming events ({timezone})</div>
 		<div class="flex flex-col space-y-2">
-			<div class="text-sm">Estimated upcoming events ({timezone})</div>
 			<div class="flex flex-col rounded-md p-4 border text-tertiary bg-surface-secondary gap-0.5">
 				{#each preview as date}
 					<span class="text-sm">{dateFormatter(new Date(date))}</span>

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         timezone: string;
         disabled?: boolean | undefined;
         validCRON?: boolean | undefined;
+        cronVersion?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/CustomPopover.svelte

@@ -6,6 +6,7 @@ export let disablePopup = false;
 export let disappearTimeout = 100;
 export let appearTimeout = 300;
 export let style = undefined;
+export let noPadding = false;
 export let focusEl = undefined;
 const [popperRef, popperContent] = createPopperActions({ placement });
 const popperOptions = {
@@ -65,7 +66,7 @@ $: focusEl && focusEl?.focus();
 			use:popperContent={popperOptions}
 			on:mouseenter={open}
 			on:mouseleave={close}
-			class="z-[5001] border rounded-lg shadow-lg p-4 bg-surface"
+			class="z-[5001] border rounded-lg shadow-lg {noPadding ? '' : 'p-4'} bg-surface"
 		>
 			<slot name="overlay" />
 		</div>

package/package/components/CustomPopover.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         disappearTimeout?: number | undefined;
         appearTimeout?: number | undefined;
         style?: string | undefined;
+        noPadding?: boolean | undefined;
         focusEl?: HTMLElement | undefined;
     };
     events: {

package/package/components/DefaultTags.svelte

@@ -14,7 +14,7 @@ let placement = 'bottom-end';
 	<svelte:fragment slot="button">
 		<Button color="dark" size="xs" nonCaptureEvent={true}>
 			<div class="flex flex-row gap-1 items-center"
-				><Pen size={14} /> Default Tags&nbsp;<Tooltip light
+				><Pen size={14} /> Default tags&nbsp;<Tooltip light
 					>Scripts and steps that have not been specifically assigned tags will use a default tag
 					that can be customized here</Tooltip
 				></div

package/package/components/DeployWorkspace.svelte

@@ -520,7 +520,7 @@ async function showDiff(kind, path) {
 	>
 {:else if notSet == true}
 	<Alert type="error" title="Staging/Prod deploy not set up"
-		>As an admin, go to "Workspace {'->'} Dev/Staging/Prod"</Alert
+		>As an admin, go to Settings {'->'} Workspace {'->'} Deployment UI</Alert
 	>
 {:else}
 	<Alert type="info" title="Shareable page"