windmill-components 1.558.4 → 1.596.0

package/package/components/AutoscalingConfigEditor.svelte

@@ -3,18 +3,26 @@ 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 { Alert, Button } from './common';
 import { ExternalLink } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import TextInput from './text_input/TextInput.svelte';
 import Label from './Label.svelte';
 import MultiSelect from './select/MultiSelect.svelte';
 import { safeSelectItems } from './select/utils.svelte';
 import { ConfigService } from '../gen';
-let { config = $bindable(), worker_tags } = $props();
-const dispatch = createEventDispatcher();
+import Select from './select/Select.svelte';
+import ScriptPicker from './ScriptPicker.svelte';
+import Badge from './common/badge/Badge.svelte';
+let { config = $bindable(), worker_tags, disabled } = $props();
 let test_input = $state(3);
 let healthCheckLoading = $state(false);
 let healthCheckResult = $state(null);
+function validateMinMax() {
+    if (config?.min_workers && config?.max_workers && config.min_workers > config.max_workers) {
+        return 'Minimum cannot be greater than maximum';
+    }
+    return undefined;
+}
 async function checkKubernetesHealth() {
     if (!config?.integration || config.integration.type !== 'kubernetes')
         return;
@@ -34,361 +42,257 @@ async function checkKubernetesHealth() {
         healthCheckLoading = false;
     }
 }
+let collapsed = $state(true);
 </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' }
+<Section
+	label="Autoscaling"
+	collapsable
+	class="flex flex-col gap-6"
+	bind:collapsed
+	description="Autoscaling automatically adjusts the number of workers based on your workload demands."
+>
+	{#snippet labelExtra()}
+		<Badge color="gray">Beta</Badge>
+	{/snippet}
+	{#snippet header()}
+		<div class="ml-2">
+			<Toggle
+				checked={config?.enabled ?? false}
+				options={{ right: 'Enabled' }}
+				{disabled}
+				on:change={(e) => {
+					if (e.detail) {
+						collapsed = false
+						if (!config) {
+							config = {
+								enabled: true,
+								min_workers: 3,
+								max_workers: 10,
+								integration: { type: 'dryrun' }
+							}
+						} else {
+							config.enabled = true
 						}
 					} else {
-						config.enabled = true
-					}
-				} else {
-					config = {
-						...(config ?? {
-							min_workers: 3,
-							max_workers: 10,
-							integration: { type: 'dryrun' }
-						}),
-						enabled: false
+						config = {
+							...(config ?? {
+								min_workers: 3,
+								max_workers: 10,
+								integration: { type: 'dryrun' }
+							}),
+							enabled: false
+						}
 					}
-				}
-			}}
-		/>
-		<!-- svelte-ignore a11y_label_has_associated_control -->
-		<label>
-			Min # of Workers
+				}}
+			/>
+		</div>
+	{/snippet}
+
+	<div class="flex flex-row gap-4">
+		<Label label="Min # of workers" disabled={config === undefined} class="grow min-w-0">
+			<span class="text-xs text-secondary">The minimum number of workers to scale down to</span>
 			{#if config !== undefined}
-				<input oninput={() => 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
-					>
+				<input
+					type="number"
+					min="1"
+					class="rounded-md border border-border-light text-xs text-primary font-normal bg-surface-input px-2 py-1 focus:border-border-selected hover:border-border-selected/50 disabled:bg-surface-disabled disabled:border-transparent disabled:text-disabled"
+					bind:value={config.min_workers}
+					{disabled}
+				/>
+				{#if validateMinMax()}
+					<div class="text-2xs text-red-500 font-normal mt-1">
+						{validateMinMax()}
+					</div>
 				{/if}
 			{:else}
-				<input type="number" disabled />
+				<input type="number" {disabled} placeholder="3" />
 			{/if}
-		</label>
-		<!-- svelte-ignore a11y_label_has_associated_control -->
-		<label>
-			Max # of Workers
+		</Label>
+		<Label label="Max # of workers" disabled={config === undefined} class="grow min-w-0">
+			<span class="text-xs text-secondary">The maximum number of workers to scale up to</span>
 			{#if config !== undefined}
-				<input oninput={() => dispatch('dirty')} type="number" bind:value={config.max_workers} />
+				<input
+					type="number"
+					min="1"
+					class="rounded-md border border-border-light text-xs text-primary font-normal bg-surface-input px-2 py-1 focus:border-border-selected hover:border-border-selected/50 disabled:bg-surface-disabled disabled:border-transparent disabled:text-disabled"
+					bind:value={config.max_workers}
+					{disabled}
+				/>
 			{:else}
-				<input type="number" disabled />
+				<input type="number" disabled placeholder="10" />
 			{/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
-								oninput={() => 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
-								oninput={() => 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
-								oninput={() => dispatch('dirty')}
-								type="number"
-								bind:value={config.inc_scale_num_jobs_waiting}
-								placeholder="1"
-							/>
-						{:else}
-							<input type="number" disabled />
-						{/if}
-					</label>
+		</Label>
+	</div>
 
-					<!-- 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
-								oninput={() => 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
-								oninput={() => 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
-								oninput={() => 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
-								oninput={() => 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="Integration">
+		<span class="text-xs text-secondary">Choose how to autoscale your worker group</span>
+		{#if config?.integration}
+			<div class="flex flex-col gap-2">
+				<ToggleButtonGroup bind:selected={config.integration.type} {disabled}>
+					{#snippet children({ item })}
+						<ToggleButton
+							value="dryrun"
+							label="Dry run"
+							tooltip="See autoscaling events but not actual scaling actions will be performed"
+							{item}
+						/>
+						<ToggleButton
+							value="script"
+							label="Custom script"
+							tooltip="Run a custom script to scale your worker group"
+							{item}
+						/>
+						<ToggleButton disabled value="ecs" label="ECS (soon)" {item} />
+						<ToggleButton disabled value="nomad" label="Nomad (soon)" {item} />
+						<ToggleButton value="kubernetes" label="Kubernetes" {item} />
+					{/snippet}
+				</ToggleButtonGroup>
 
-					<Label label="Custom tags to autoscale on">
-						{#snippet header()}
-							<Tooltip>
-								By default, autoscaling will apply to the tags the worker group is assigned to but
-								you can override this here.
-							</Tooltip>
-						{/snippet}
-						{#if config}
-							{#if config.custom_tags}
-								<MultiSelect
-									bind:value={
-										() => config?.custom_tags ?? [],
+				{#if config.integration.type === 'script'}
+					<div class="flex flex-col gap-6 p-4 rounded-md border border-border-light">
+						<Label label="Script path" required>
+							<div class="flex flex-row gap-2">
+								<ScriptPicker
+									itemKind="script"
+									bind:scriptPath={
+										() => config?.integration?.['path'] ?? undefined,
 										(v) => {
-											config && (config.custom_tags = v.length ? v : undefined)
-											dispatch('dirty')
+											if (!config || !config.integration) return
+
+											if (!v || v === '') {
+												delete config.integration['path']
+											} else {
+												config.integration['path'] = v
+											}
 										}
 									}
-									items={safeSelectItems(worker_tags)}
-									placeholder="Tags"
+									clearable
+									{disabled}
 								/>
-							{: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"
-			>
-				{#snippet children({ item })}
-					<ToggleButton
-						value="dryrun"
-						label="Dry run"
-						tooltip="See autoscaling events but not actual scaling actions will be performed"
-						{item}
-					/>
-					<ToggleButton
-						value="script"
-						label="Custom script"
-						tooltip="Run a custom script to scale your worker group"
-						{item}
-					/>
-					<ToggleButton disabled value="ecs" label="ECS (soon)" {item} />
-					<ToggleButton disabled value="nomad" label="Nomad (soon)" {item} />
-					<ToggleButton value="kubernetes" label="Kubernetes" {item} />
-				{/snippet}
-			</ToggleButtonGroup>
 
-			{#if config.integration.type === 'script'}
-				<label>
-					Script path on the 'admins' workspace
-					<input
-						oninput={() => dispatch('dirty')}
-						type="text"
-						bind:value={config.integration.path}
-					/>
-				</label>
+								{#if config?.integration?.['path'] === undefined || config?.integration?.['path'] === ''}
+									<Button
+										variant="default"
+										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
+										{disabled}
+									</Button>
+								{:else}
+									<Button
+										variant="default"
+										target="_blank"
+										href={`/runs/${config.integration.path}?workspace=admins`}
+										endIcon={{ icon: ExternalLink }}
+										{disabled}
+									>
+										See jobs
+									</Button>
+								{/if}
+							</div>
+							<span class="text-2xs text-hint">Script must be in the 'admins' workspace</span>
+						</Label>
 
-				<label>
-					Custom tag for executing script (optional)
-					{#if config.integration.tag}
-						<input
-							oninput={() => 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
+						<Label
+							label="Custom tag for executing script"
+							tooltip="Optional tag to specify worker capabilities required for this script"
+							for="custom_tag_select"
 						>
-					{/if}
-				</label>
+							<Select
+								clearable
+								id="custom_tag_select"
+								disabled={!config || !config.integration || disabled}
+								bind:value={
+									() => config?.integration?.['tags'] ?? undefined,
+									(v) => {
+										if (!config || !config.integration) return
+										if (!v || v === '') {
+											delete config.integration['tags']
+										} else {
+											config.integration['tags'] = v
+										}
+									}
+								}
+								items={safeSelectItems(worker_tags)}
+							/>
 
-				<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 class="flex flex-row gap-2 justify-end mt-4">
+								<Button variant="default" unifiedSize="md">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>
+						</Label>
 					</div>
-				</div>
-			{/if}
+				{:else if config.integration.type === 'kubernetes'}
+					<div class="flex flex-col gap-3 p-4 border border-border-light rounded-md">
+						<div class="text-xs text-secondary mb-2">
+							Kubernetes configuration is automatically inferred from the cluster environment. The
+							worker group name and namespace will be detected automatically.
+						</div>
 
-			{#if config.integration.type === 'kubernetes'}
-				<div class="text-sm text-secondary mb-3">
-					Kubernetes configuration is automatically inferred from the cluster environment. 
-					The worker group name and namespace will be detected automatically.
-				</div>
+						<div class="flex flex-col gap-2">
+							<div class="flex items-center gap-2 justify-between">
+								<div class="flex flex-row gap-2">
+									<Button
+										unifiedSize="md"
+										variant="default"
+										endIcon={{ icon: ExternalLink }}
+										href="https://windmill.dev/docs/core_concepts/autoscaling#kubernetes"
+										target="_blank"
+									>
+										Setup Guide (Roles & Bindings)
+									</Button>
+									<Button
+										unifiedSize="md"
+										variant="default"
+										onclick={checkKubernetesHealth}
+										disabled={healthCheckLoading}
+									>
+										{healthCheckLoading ? 'Checking...' : 'Check Health'}
+									</Button>
+								</div>
 
-				<div class="flex flex-col gap-3 mt-4">
-					<div class="flex items-center gap-2">
-						<Button 
-							color="blue" 
-							size="xs" 
-							variant="contained"
-							startIcon={{ icon: ExternalLink }}
-							href="https://windmill.dev/docs/core_concepts/autoscaling#kubernetes"
-							target="_blank"
-						>
-							Setup Guide (Roles & Bindings)
-						</Button>
-						<Button 
-							color="light" 
-							size="xs" 
-							variant="contained"
-							onclick={checkKubernetesHealth}
-							disabled={healthCheckLoading}
-						>
-							{healthCheckLoading ? 'Checking...' : 'Check Health'}
-						</Button>
-					</div>
-					
-					{#if healthCheckResult !== null}
-						<div class="p-2 rounded-md text-sm {healthCheckResult.success ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300' : 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400'}">
-							{#if healthCheckResult.success}
-								Kubernetes autoscaling is healthy
-							{:else}
-								{healthCheckResult.error}
-								{#if healthCheckResult.error?.includes('permissions') || healthCheckResult.error?.includes('role')}
-									<br><small>Please follow the setup guide above to configure proper RBAC permissions.</small>
-								{/if}
-							{/if}
-						</div>
-					{/if}
+								<div class="flex flex-row gap-2 justify-end">
+									<Button unifiedSize="md" variant="default">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>
+							</div>
 
-					<div class="flex flex-row gap-2">
-						<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
+							{#if healthCheckResult !== null}
+								<Alert
+									type={healthCheckResult.success ? 'success' : 'error'}
+									title={healthCheckResult.success ? 'Health check passed' : 'Health check failed'}
+								>
+									{#if healthCheckResult.success}
+										Kubernetes autoscaling is healthy
+									{:else}
+										{healthCheckResult.error}
+										{#if healthCheckResult.error?.includes('permissions') || healthCheckResult.error?.includes('role')}
+											<br /><small
+												>Please follow the setup guide above to configure proper RBAC permissions.</small
+											>
+										{/if}
+									{/if}
+								</Alert>
+							{/if}
 						</div>
 					</div>
-				</div>
-			{/if}
+				{:else if config.integration.type === 'dryrun'}
+					<div class="p-4 border border-border-light rounded-md">
+						<span class="text-xs text-secondary">
+							In dry run mode, autoscaling will be simulated and events will be logged but no actual
+							scaling will be performed.
+						</span>
+					</div>
+				{/if}
+			</div>
 		{:else}
 			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2">
 				{#snippet children({ item })}
@@ -400,10 +304,186 @@ async function checkKubernetesHealth() {
 				{/snippet}
 			</ToggleButtonGroup>
 
-			<label>
-				Script path on the 'admins' workspace
-				<input type="text" disabled />
-			</label>
+			<Label label="Script path on the 'admins' workspace" for="script_path">
+				<TextInput
+					inputProps={{
+						disabled: true,
+						id: 'script_path',
+						placeholder: 'e.g. f/scaling/scale_worker_group'
+					}}
+				/>
+			</Label>
 		{/if}
-	</div>
-</div>
+	</Label>
+
+	<Section label="Advanced" small collapsable={true} class="flex flex-col gap-6">
+		<Label
+			label="Cooldown seconds after incremental scale-in/out"
+			disabled={config === undefined || disabled}
+			tooltip="Time to wait between incremental scaling operations"
+		>
+			{#if config !== undefined}
+				<input
+					type="number"
+					step="1"
+					min="30"
+					placeholder="300"
+					class="rounded-md border border-border-light text-xs text-primary font-normal bg-surface-input px-2 py-1 focus:border-border-selected hover:border-border-selected/50"
+					bind:value={config.cooldown_seconds}
+					{disabled}
+				/>
+			{:else}
+				<input type="number" disabled />
+			{/if}
+		</Label>
+		<Label
+			label="Cooldown seconds after full scale out"
+			disabled={config === undefined || disabled}
+			tooltip="Time to wait after scaling to maximum capacity"
+		>
+			{#if config !== undefined}
+				<input
+					type="number"
+					step="1"
+					min="30"
+					placeholder="1500"
+					class="rounded-md border border-border-light text-xs text-primary font-normal bg-surface-input px-2 py-1 focus:border-border-selected hover:border-border-selected/50"
+					bind:value={config.full_scale_cooldown_seconds}
+					{disabled}
+				/>
+			{:else}
+				<input
+					type="number"
+					disabled
+					class="rounded-md border border-border-light text-xs font-normal bg-surface-disabled border-transparent text-disabled px-2 py-1"
+				/>
+			{/if}
+		</Label>
+		<!-- svelte-ignore a11y_label_has_associated_control -->
+		<Label label="Num jobs waiting to trigger an incremental scale-out">
+			{#if config !== undefined}
+				<input
+					type="number"
+					bind:value={config.inc_scale_num_jobs_waiting}
+					placeholder="1"
+					{disabled}
+				/>
+			{:else}
+				<input type="number" disabled />
+			{/if}
+		</Label>
+
+		<!-- svelte-ignore a11y_label_has_associated_control -->
+		<Label
+			label="Num jobs waiting to trigger a full scale out"
+			tooltip="Default: max_workers, full scale out = scale out to max workers"
+			for="full_scale_jobs_waiting"
+		>
+			{#if config !== undefined}
+				<input
+					type="number"
+					placeholder="max workers"
+					bind:value={config.full_scale_jobs_waiting}
+					id="full_scale_jobs_waiting"
+					{disabled}
+				/>
+			{:else}
+				<input type="number" disabled />
+			{/if}
+		</Label>
+		<!-- svelte-ignore a11y_label_has_associated_control -->
+		<div class="flex flex-row gap-4">
+			<Label
+				label="Min occupancy rate"
+				tooltip="Default: 25%, need to go below average of all of 15s, 5m and 30m occupancy rates"
+				for="occupancy_rate_min"
+				class="grow min-w-0"
+			>
+				<span class="text-xs text-secondary"
+					>{`Threshold (%) to go below to trigger a scale-in (decrease)`}</span
+				>
+				{#if config !== undefined}
+					<input
+						type="number"
+						step="1"
+						min="0"
+						max="100"
+						placeholder="25"
+						id="occupancy_rate_min"
+						bind:value={config.dec_scale_occupancy_rate}
+						{disabled}
+					/>
+				{:else}
+					<input type="number" step="0.01" disabled />
+				{/if}
+			</Label>
+			<!-- svelte-ignore a11y_label_has_associated_control -->
+			<Label
+				label="Max occupancy rate"
+				tooltip="Default: 75%, need to exceed average of all of 15s, 5m and 30m occupancy rates"
+				for="occupancy_rate_max"
+				class="grow min-w-0"
+			>
+				<span class="text-xs text-secondary"
+					>{`Threshold (%) to exceed to trigger a scale-out (increase)`}</span
+				>
+				{#if config !== undefined}
+					<input
+						type="number"
+						step="1"
+						min="0"
+						max="100"
+						placeholder="75"
+						id="occupancy_rate_max"
+						bind:value={config.inc_scale_occupancy_rate}
+						{disabled}
+					/>
+				{:else}
+					<input type="number" step="0.01" disabled />
+				{/if}
+			</Label>
+		</div>
+
+		<!-- svelte-ignore a11y_label_has_associated_control -->
+		<Label
+			label="Num workers to scale-in/out by when incremental"
+			tooltip="Default: (max_workers - min_workers) / 5"
+		>
+			{#if config !== undefined}
+				<input
+					type="number"
+					step="1"
+					min="1"
+					placeholder="(max_workers - min_workers) / 5"
+					bind:value={config.inc_num_workers}
+					{disabled}
+				/>
+			{:else}
+				<input type="number" disabled />
+			{/if}
+		</Label>
+
+		<Label label="Custom tags to autoscale on" for="multi_select_custom_tags">
+			{#snippet header()}
+				<Tooltip>
+					By default, autoscaling will apply to the tags the worker group is assigned to but you can
+					override this here.
+				</Tooltip>
+			{/snippet}
+			{#if config}
+				<MultiSelect
+					id="multi_select_custom_tags"
+					bind:value={
+						() => config?.custom_tags ?? [],
+						(v) => {
+							config && (config.custom_tags = v.length ? v : undefined)
+						}
+					}
+					items={safeSelectItems(worker_tags)}
+					placeholder="Tags"
+					{disabled}
+				/>
+			{/if}
+		</Label>
+	</Section>
+</Section>