windmill-components 1.558.3 → 1.596.0

package/package/components/InstanceSetting.svelte

@@ -1,27 +1,28 @@
 <script lang="ts">import { isCloudHosted } from '../cloud';
 import { enterpriseLicense, isCriticalAlertsUIOpen } from '../stores';
-import { AlertCircle, AlertTriangle, BadgeCheck, BadgeX, Info, Plus, Slack, X } from 'lucide-svelte';
+import { AlertCircle, BadgeCheck, BadgeX, Info } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import ObjectStoreConfigSettings from './ObjectStoreConfigSettings.svelte';
 import { sendUserToast } from '../toast';
-import ConfirmButton from './ConfirmButton.svelte';
+import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import { ConfigService, IndexSearchService, SettingService } from '../gen';
-import { Button, SecondsInput, Skeleton } from './common';
+import { Button, SecondsInput, Section, Skeleton } from './common';
 import Password from './Password.svelte';
 import { classNames } from '../utils';
 import Popover from './Popover.svelte';
 import PopoverMelt from './meltComponents/Popover.svelte';
 import Toggle from './Toggle.svelte';
 import { createEventDispatcher } from 'svelte';
-import { fade } from 'svelte/transition';
-import { base } from '../base';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import LoadingIcon from './apps/svelte-select/lib/LoadingIcon.svelte';
-import TeamSelector from './TeamSelector.svelte';
-import ChannelSelector from './ChannelSelector.svelte';
-let { setting, version, values, loading = true } = $props();
+import EEOnly from './EEOnly.svelte';
+import CriticalAlertChannels from './instanceSettings/CriticalAlertChannels.svelte';
+import SmtpSettings from './instanceSettings/SmtpSettings.svelte';
+import TextInput from './text_input/TextInput.svelte';
+import Label from './Label.svelte';
+let { setting, version, values, loading = true, openSmtpSettings, oauths } = $props();
 const dispatch = createEventDispatcher();
 if ((setting.fieldType == 'select' || setting.fieldType == 'select_python') &&
     $values[setting.key] == undefined) {
@@ -39,7 +40,6 @@ function showSetting(setting, values) {
 let licenseKeyChanged = $state(false);
 let renewing = $state(false);
 let opening = $state(false);
-let to = $state('');
 async function reloadKeyrenewalAttemptInfo() {
     latestKeyRenewalAttempt = await SettingService.getLatestKeyRenewalAttempt();
 }
@@ -102,6 +102,8 @@ function parseLicenseKey(key) {
 }
 let pythonAvailableVersions = $state([]);
 let isPyFetching = $state(false);
+let clearJobsIndexModalOpen = $state(false);
+let clearServiceLogsIndexModalOpen = $state(false);
 async function fetch_available_python_versions() {
     if (isPyFetching)
         return;
@@ -119,52 +121,32 @@ async function fetch_available_python_versions() {
 if (setting.fieldType == 'select_python') {
     fetch_available_python_versions();
 }
-function handleTeamChange(teamItem, i) {
-    $values['critical_error_channels'][i] = {
-        teams_channel: teamItem
-            ? {
-                team_id: teamItem.team_id,
-                team_name: teamItem.team_name,
-                channel_id: undefined, // Will be set when channel is selected
-                channel_name: undefined
-            }
-            : undefined
-    };
-}
-function handleChannelChange(channel, i) {
-    const team = $values['critical_error_channels'][i]?.teams_channel;
-    if (team) {
-        $values['critical_error_channels'][i] = {
-            teams_channel: {
-                team_id: team?.team_id,
-                team_name: team?.team_name,
-                channel_id: channel?.channel_id,
-                channel_name: channel?.channel_name
-            }
-        };
-    }
-}
 </script>
 
+{#snippet LabelSnippet()}
+	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<label class="flex flex-col gap-1 mb-1">
+		<div class="flex gap-1">
+			<span class="text-emphasis font-semibold text-xs">{setting.label}</span>
+			{#if setting.ee_only != undefined && !$enterpriseLicense}
+				<EEOnly>
+					{#if setting.ee_only != ''}{setting.ee_only}{/if}
+				</EEOnly>
+			{/if}
+		</div>
+		{#if setting.description}
+			<span class="text-secondary text-xs font-normal">
+				{@html setting.description}
+			</span>
+		{/if}
+	</label>
+{/snippet}
+
 <!-- {JSON.stringify($values, null, 2)} -->
 {#if (!setting.cloudonly || isCloudHosted()) && showSetting(setting.key, $values) && !(setting.hiddenIfNull && $values[setting.key] == null) && !(setting.hiddenIfEmpty && !$values[setting.key])}
-	{#if setting.ee_only != undefined && !$enterpriseLicense}
-		<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap">
-			<AlertTriangle size={16} />
-			EE only {#if setting.ee_only != ''}<Tooltip>{setting.ee_only}</Tooltip>{/if}
-		</div>
-	{/if}
 	{#if setting.fieldType == 'select'}
 		<div>
-			<!-- svelte-ignore a11y_label_has_associated_control -->
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">{setting.label}</span>
-				{#if setting.description}
-					<span class="text-secondary text-xs">
-						{@html setting.description}
-					</span>
-				{/if}
-			</label>
+			{@render LabelSnippet()}
 			<ToggleButtonGroup bind:selected={$values[setting.key]}>
 				{#snippet children({ item: toggleButton })}
 					{#each setting.select_items ?? [] as item}
@@ -181,14 +163,7 @@ function handleChannelChange(channel, i) {
 	{:else if setting.fieldType == 'select_python'}
 		<div>
 			<!-- svelte-ignore a11y_label_has_associated_control -->
-			<label class="block pb-2">
-				<span class="text-primary font-semibold text-sm">{setting.label}</span>
-				{#if setting.description}
-					<span class="text-secondary text-xs">
-						{@html setting.description}
-					</span>
-				{/if}
-			</label>
+			{@render LabelSnippet()}
 
 			<ToggleButtonGroup bind:selected={$values[setting.key]}>
 				{#snippet children({ item: toggleButtonn })}
@@ -200,19 +175,17 @@ function handleChannelChange(channel, i) {
 							item={toggleButtonn}
 						/>
 					{/each}
-					<PopoverMelt closeButton={!isPyFetching}>
+					<PopoverMelt closeButton={!isPyFetching} contentClasses="max-w-md">
 						{#snippet trigger()}
 							{#if setting.select_items?.some((e) => e.label == $values[setting.key] || e.value == $values[setting.key])}
 								<Button
-									variant="border"
-									color="dark"
+									variant="default"
 									btnClasses="px-1.5 py-1.5 text-2xs bg-surface-secondary border-0"
 									nonCaptureEvent={true}>Select Custom</Button
 								>
 							{:else}
 								<Button
-									variant="border"
-									color="dark"
+									variant="default"
 									btnClasses="px-1.5 py-1.5 text-2xs border-0 shadow-md"
 									nonCaptureEvent={true}>Custom | {$values[setting.key]}</Button
 								>
@@ -242,23 +215,53 @@ function handleChannelChange(channel, i) {
 			</ToggleButtonGroup>
 		</div>
 	{:else}
-		<!-- svelte-ignore a11y_label_has_associated_control -->
-		<label class="block pb-2">
-			<span class="text-primary font-semibold text-sm">{setting.label}</span>
-			{#if setting.description}
-				<span class="text-secondary text-xs">
-					{@html setting.description}
-				</span>
-			{/if}
+		{#snippet settingContent()}
+			<div class="flex flex-col gap-2 mb-1">
+				<div class="flex items-center justify-between">
+					<div class="text-emphasis font-semibold text-xs flex flex-col gap-1 w-full">
+						<div class="flex items-center justify-between gap-2 w-full">
+							{#if setting.fieldType != 'smtp_connect'}
+								<div class="flex gap-1">
+									<span class="text-emphasis font-semibold text-xs pb-1">{setting.label}</span>
+									{#if setting.ee_only != undefined && !$enterpriseLicense}
+										{#if setting.ee_only != ''}
+											<EEOnly>{setting.ee_only}</EEOnly>
+										{:else}
+											<EEOnly />
+										{/if}
+									{/if}
+								</div>
+							{/if}
+							{#if setting.actionButton}
+								<Button
+									disabled={setting.ee_only != undefined && !$enterpriseLicense}
+									variant={setting.actionButton.variant ?? 'default'}
+									unifiedSize="sm"
+									onclick={async () => await setting.actionButton?.onclick($values)}
+								>
+									{setting.actionButton.label}
+								</Button>
+							{/if}
+						</div>
+						{#if setting.description}
+							<span class="text-secondary font-normal text-xs">
+								{@html setting.description}
+							</span>
+						{/if}
+					</div>
+				</div>
+			</div>
 			{#if setting.tooltip}
 				<Tooltip>{setting.tooltip}</Tooltip>
 			{/if}
 			{#if $values}
 				{@const hasError = setting.isValid && !setting.isValid($values[setting.key])}
+				<div class="h-1"></div>
 				{#if loading}
 					<Skeleton layout={[[2.5]]} />
 				{:else if setting.fieldType == 'text'}
 					<input
+						id={setting.key}
 						disabled={setting.ee_only != undefined && !$enterpriseLicense}
 						type="text"
 						placeholder={setting.placeholder}
@@ -283,6 +286,7 @@ function handleChannelChange(channel, i) {
 					{/if}
 				{:else if setting.fieldType == 'textarea'}
 					<textarea
+						id={setting.key}
 						disabled={!$enterpriseLicense}
 						rows="2"
 						placeholder={setting.placeholder}
@@ -306,35 +310,34 @@ function handleChannelChange(channel, i) {
 						</div>
 					{/if}
 				{:else if setting.fieldType == 'codearea'}
-					<!-- svelte-ignore a11y_click_events_have_key_events -->
-					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div
-						onclick={(ev) => {
-							ev.stopPropagation() // this is to prevent wrapping label interference
-						}}
-					>
-						<SimpleEditor
-							autoHeight
-							class="editor"
-							lang={setting.codeAreaLang ?? 'txt'}
-							bind:code={$values[setting.key]}
-							fixedOverflowWidgets={false}
-						/></div
-					>
+					<SimpleEditor
+						autoHeight
+						class="editor"
+						lang={setting.codeAreaLang ?? 'txt'}
+						bind:code={$values[setting.key]}
+						fixedOverflowWidgets={false}
+					/>
 				{:else if setting.fieldType == 'license_key'}
 					{@const { valid, expiration } = parseLicenseKey($values[setting.key] ?? '')}
 					<div class="flex gap-2">
 						<Password
+							id={setting.key}
 							small
 							placeholder={setting.placeholder}
 							onKeyDown={() => {
 								licenseKeyChanged = true
 							}}
+							onBlur={() => {
+								if ($values[setting.key] && typeof $values[setting.key] === 'string') {
+									$values[setting.key] = $values[setting.key].trim()
+								}
+							}}
 							bind:password={$values[setting.key]}
 						/>
 						<Button
-							variant={$values[setting.key] ? 'contained' : 'border'}
-							size="xs"
+							variant="accent"
+							unifiedSize="md"
+							disabled={!$values[setting.key]}
 							on:click={async () => {
 								await SettingService.testLicenseKey({
 									requestBody: { license_key: $values[setting.key] }
@@ -349,9 +352,8 @@ function handleChannelChange(channel, i) {
 						{#if $values[setting.key]?.length > 0}
 							{#if valid}
 								<div class="flex flex-row gap-1 items-center">
-									<Info size={12} class="text-tertiary" />
-									<span class="text-tertiary text-xs"
-										>License key expires on {expiration ?? ''}</span
+									<Info size={12} class="text-primary" />
+									<span class="text-primary text-xs">License key expires on {expiration ?? ''}</span
 									>
 								</div>
 							{:else if expiration}
@@ -448,28 +450,34 @@ function handleChannelChange(channel, i) {
 
 						{#if valid || expiration}
 							<div class="flex flex-row gap-2 mt-1">
-								<Button on:click={renewLicenseKey} loading={renewing} size="xs" color="dark"
+								<Button on:click={renewLicenseKey} loading={renewing} size="xs" variant="accent"
 									>Renew key
 								</Button>
-								<Button color="dark" size="xs" loading={opening} on:click={openCustomerPortal}>
+								<Button variant="accent" size="xs" loading={opening} on:click={openCustomerPortal}>
 									Open customer portal
 								</Button>
 							</div>
 						{/if}
 					</div>
 				{:else if setting.fieldType == 'email'}
-					<input type="email" placeholder={setting.placeholder} bind:value={$values[setting.key]} />
+					<TextInput
+						inputProps={{
+							type: 'email',
+							placeholder: setting.placeholder,
+							id: setting.key
+						}}
+						bind:value={$values[setting.key]}
+					/>
 				{:else if setting.key == 'critical_alert_mute_ui'}
-					<div class="flex flex-col gap-y-2 my-2 py-2">
+					<div class="flex flex-col gap-y-2">
 						<Toggle
 							disabled={!$enterpriseLicense}
 							bind:checked={$values[setting.key]}
-							options={{ right: setting.description }}
+							id={setting.key}
 						/>
 						<div class="flex flex-row">
 							<Button
-								variant="border"
-								color="light"
+								variant="default"
 								disabled={!$enterpriseLicense}
 								size="xs"
 								on:click={() => {
@@ -482,425 +490,226 @@ function handleChannelChange(channel, i) {
 						</div>
 					</div>
 				{:else if setting.fieldType == 'critical_error_channels'}
-					<div class="w-full flex gap-x-16 flex-wrap">
-						<div class="w-full max-w-lg">
-							{#if $enterpriseLicense && Array.isArray($values[setting.key])}
-								{#each $values[setting.key] ?? [] as v, i}
-									<div class="flex w-full max-w-lg mt-1 gap-2 items-center">
-										<select
-											class="max-w-24"
-											onchange={(e) => {
-												if (e.target?.['value']) {
-													$values[setting.key][i] = {
-														[e.target['value']]: ''
+					<CriticalAlertChannels {values} {openSmtpSettings} {oauths} />
+				{:else if setting.fieldType == 'indexer_rates'}
+					<div class="flex flex-col gap-16 mt-4">
+						{#if $values[setting.key]}
+							<Section label="Memory" class="space-y-6">
+								<div class="flex flex-col gap-1">
+									<label
+										for="writer_memory_budget"
+										class="block text-xs font-semibold text-emphasis"
+									>
+										Index writer memory budget (MB)
+										<Tooltip>
+											The allocated memory arena for the indexer. A bigger value means less writing
+											to disk and potentially higher indexing throughput
+										</Tooltip>
+									</label>
+									<TextInput
+										inputProps={{
+											type: 'number',
+											placeholder: '300',
+											id: 'writer_memory_budget',
+											disabled: !$enterpriseLicense,
+											oninput: (e) => {
+												if (e.target instanceof HTMLInputElement) {
+													if (e.target.valueAsNumber) {
+														$values[setting.key].writer_memory_budget =
+															e.target.valueAsNumber * (1024 * 1024)
 													}
 												}
+											}
+										}}
+										value={$values[setting.key].writer_memory_budget / (1024 * 1024)}
+									/>
+								</div>
+								<Label label="Clear index">
+									<span class="text-xs text-secondary"
+										>This buttons will clear the whole index, and the service will start reindexing
+										from scratch. Full text search might be down during this time.</span
+									>
+									<div class="flex flex-row gap-2">
+										<Button
+											variant="default"
+											unifiedSize="sm"
+											on:click={() => {
+												clearJobsIndexModalOpen = true
 											}}
-											value={(() => {
-												if (!v) return 'email'
-												return (
-													['slack_channel', 'teams_channel'].find((type) => type in v) || 'email'
-												)
-											})()}
 										>
-											<option value="email">Email</option>
-											<option value="slack_channel">Slack</option>
-											<option value="teams_channel">Teams</option>
-										</select>
-										{#if v && 'slack_channel' in v}
-											<input
-												type="text"
-												placeholder="Slack channel"
-												oninput={(e) => {
-													if (e.target?.['value']) {
-														$values[setting.key][i] = {
-															slack_channel: e.target['value']
-														}
-													}
-												}}
-												value={v?.slack_channel ?? ''}
-											/>
-										{:else if v && 'teams_channel' in v}
-											<div class="flex flex-row gap-2 w-full">
-												<TeamSelector
-													containerClass="w-44"
-													minWidth="140px"
-													showRefreshButton={false}
-													bind:selectedTeam={
-														() =>
-															$values['critical_error_channels'][i]?.teams_channel
-																? {
-																		team_id:
-																			$values['critical_error_channels'][i]?.teams_channel?.team_id,
-																		team_name:
-																			$values['critical_error_channels'][i]?.teams_channel
-																				?.team_name
-																	}
-																: undefined,
-														(team) => handleTeamChange(team, i)
-													}
-												/>
-
-												{#if $values['critical_error_channels'][i]?.teams_channel?.team_id}
-													<ChannelSelector
-														containerClass=""
-														placeholder="Search channels"
-														teamId={$values['critical_error_channels'][i]?.teams_channel?.team_id}
-														bind:selectedChannel={
-															() =>
-																$values['critical_error_channels'][i]?.teams_channel?.channel_id
-																	? {
-																			channel_id:
-																				$values['critical_error_channels'][i]?.teams_channel
-																					?.channel_id,
-																			channel_name:
-																				$values['critical_error_channels'][i]?.teams_channel
-																					?.channel_name
-																		}
-																	: undefined,
-															(channel) => handleChannelChange(channel, i)
-														}
-														onError={(e) =>
-															sendUserToast('Failed to load channels: ' + e.message, true)}
-													/>
-												{/if}
-											</div>
-										{:else}
-											<input
-												type="email"
-												placeholder="Email address"
-												oninput={(e) => {
-													if (e.target?.['value']) {
-														$values[setting.key][i] = {
-															email: e.target['value']
-														}
-													}
-												}}
-												value={v?.email ?? ''}
-											/>
-										{/if}
-										<button
-											transition:fade|local={{ duration: 100 }}
-											class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover"
-											aria-label="Clear"
-											onclick={() => {
-												$values[setting.key] = $values[setting.key].filter(
-													(_, index) => index !== i
-												)
+											Clear jobs index
+										</Button>
+										<Button
+											variant="default"
+											unifiedSize="sm"
+											on:click={() => {
+												clearServiceLogsIndexModalOpen = true
 											}}
 										>
-											<X size={14} />
-										</button>
+											Clear service logs index
+										</Button>
 									</div>
-								{/each}
-							{/if}
-						</div>
-					</div>
-					<div class="flex mt-2 gap-20 items-center">
-						<Button
-							variant="border"
-							color="light"
-							size="xs"
-							btnClasses="mt-1"
-							on:click={() => {
-								if ($values[setting.key] == undefined || !Array.isArray($values[setting.key])) {
-									$values[setting.key] = []
-								}
-								// Start with a typed default to avoid invalid primitives in the array
-								$values[setting.key] = $values[setting.key].concat({ email: '' })
-							}}
-							id="arg-input-add-item"
-							startIcon={{ icon: Plus }}
-							disabled={!$enterpriseLicense}
-						>
-							Add channel
-						</Button>
-						<div class="flex mt-1">
-							<Button
-								disabled={!$enterpriseLicense}
-								variant="border"
-								color="light"
-								size="xs"
-								on:click={async () => {
-									try {
-										await SettingService.testCriticalChannels({
-											requestBody: $values[setting.key]
-										})
-										sendUserToast('Test message sent successfully to critical channels', false)
-									} catch (error) {
-										sendUserToast('Failed to send test message: ' + error.message, true)
-									}
-								}}
-							>
-								Test channels
-							</Button>
-						</div>
-					</div>
-				{:else if setting.fieldType == 'slack_connect'}
-					<div class="flex flex-col items-start self-start">
-						{#if $values[setting.key] && 'team_name' in $values[setting.key]}
-							<div class="text-sm">
-								Connected to <code>{$values[setting.key]['team_name']}</code>
-							</div>
-							<Button
-								size="sm"
-								endIcon={{ icon: Slack }}
-								btnClasses="mt-2"
-								variant="border"
-								on:click={async () => {
-									$values[setting.key] = undefined
-								}}
-							>
-								Disconnect Slack
-							</Button>
-						{:else}
-							<Button
-								size="xs"
-								color="dark"
-								href="{base}/api/oauth/connect_slack?instance=true"
-								startIcon={{ icon: Slack }}
-								disabled={!$enterpriseLicense}
-							>
-								Connect to Slack
-							</Button>
-						{/if}
-					</div>
-				{:else if setting.fieldType == 'indexer_rates'}
-					<div class="flex flex-col gap-4 mt-4">
-						{#if $values[setting.key]}
-							<div>
-								<label for="writer_memory_budget" class="block text-sm font-medium">
-									Index writer memory budget (MB)
-									<Tooltip>
-										The allocated memory arena for the indexer. A bigger value means less writing to
-										disk and potentially higher indexing throughput
-									</Tooltip>
-								</label>
-								<input
-									disabled={!$enterpriseLicense}
-									type="number"
-									id="writer_memory_budget"
-									placeholder="300"
-									oninput={(e) => {
-										if (e.target instanceof HTMLInputElement) {
-											if (e.target.valueAsNumber) {
-												$values[setting.key].writer_memory_budget =
-													e.target.valueAsNumber * (1024 * 1024)
-											}
-										}
-									}}
-									value={$values[setting.key].writer_memory_budget / (1024 * 1024)}
-								/>
-							</div>
-							<h3>Completed Job Index</h3>
-							<div>
-								<label for="commit_job_max_batch_size" class="block text-sm font-medium">
-									Commit max batch size <Tooltip>
-										The max amount of documents (here jobs) per commit. To optimize indexing
-										throughput, it is best to keep this as high as possible. However, especially
-										when reindexing the whole instance, it can be useful to have a limit on how many
-										jobs can be written without being committed. A commit will make the jobs
-										available for search, constitute a "checkpoint" state in the indexing and will
-										be logged.
-									</Tooltip>
-								</label>
-								<input
-									disabled={!$enterpriseLicense}
-									type="number"
-									id="commit_job_max_batch_size"
-									placeholder="100000"
-									bind:value={$values[setting.key].commit_job_max_batch_size}
-								/>
-							</div>
-							<div>
-								<label for="refresh_index_period" class="block text-sm font-medium">
-									Refresh index period (s) <Tooltip>
-										The index will query new jobs periodically and write them on the index. This
-										setting sets that period.
-									</Tooltip></label
-								>
-								<input
-									disabled={!$enterpriseLicense}
-									type="number"
-									id="refresh_index_period"
-									placeholder="300"
-									bind:value={$values[setting.key].refresh_index_period}
-								/>
-							</div>
-							<div>
-								<label for="max_indexed_job_log_size" class="block text-sm font-medium">
-									Max indexed job log size (KB) <Tooltip>
-										Job logs are included when indexing, but to avoid the index size growing
-										artificially, the logs will be truncated after a size has been reached.
-									</Tooltip>
-								</label>
-								<input
-									disabled={!$enterpriseLicense}
-									type="number"
-									id="max_indexed_job_log_size"
-									placeholder="1024"
-									oninput={(e) => {
-										if (e.target instanceof HTMLInputElement) {
-											if (e.target.valueAsNumber) {
-												$values[setting.key].max_indexed_job_log_size =
-													e.target.valueAsNumber * 1024
-											}
-										}
+								</Label>
+								<ConfirmationModal
+									title="Clear jobs index"
+									confirmationText="Clear"
+									open={clearJobsIndexModalOpen}
+									type="danger"
+									on:canceled={() => {
+										clearJobsIndexModalOpen = false
 									}}
-									value={$values[setting.key].max_indexed_job_log_size / 1024}
-								/>
-							</div>
-							<h3>Service Logs Index</h3>
-							<div>
-								<label for="commit_log_max_batch_size" class="block text-sm font-medium"
-									>Commit max batch size <Tooltip>
-										The max amount of documents per commit. In this case 1 document is one log file
-										representing all logs during 1 minute for a specific host. To optimize indexing
-										throughput, it is best to keep this as high as possible. However, especially
-										when reindexing the whole instance, it can be useful to have a limit on how many
-										logs can be written without being committed. A commit will make the logs
-										available for search, appear as a log line, and be a "checkpoint" of the
-										indexing progress.
-									</Tooltip>
-								</label>
-								<input
-									disabled={!$enterpriseLicense}
-									type="number"
-									id="commit_log_max_batch_size"
-									placeholder="10000"
-									bind:value={$values[setting.key].commit_log_max_batch_size}
-								/>
-							</div>
-							<div>
-								<label for="refresh_log_index_period" class="block text-sm font-medium">
-									Refresh index period (s) <Tooltip>
-										The index will query new service logs peridically and write them on the index.
-										This setting sets that period.
-									</Tooltip></label
-								>
-								<input
-									disabled={!$enterpriseLicense}
-									type="number"
-									id="refresh_log_index_period"
-									placeholder="300"
-									bind:value={$values[setting.key].refresh_log_index_period}
-								/>
-							</div>
-							<h3>Reset Index</h3>
-							This buttons will clear the whole index, and the service will start reindexing from scratch.
-							Full text search might be down during this time.
-							<div>
-								<ConfirmButton
-									on:click={async () => {
-										let r = await IndexSearchService.clearIndex({
+									on:confirmed={async () => {
+										const r = await IndexSearchService.clearIndex({
 											idxName: 'JobIndex'
 										})
-										console.log('asasd')
 										sendUserToast(r)
-									}}>Clear <b>Jobs</b> Index</ConfirmButton
+										clearJobsIndexModalOpen = false
+									}}
 								>
-								<ConfirmButton
-									on:click={async () => {
-										let r = await IndexSearchService.clearIndex({
+									Are you sure you want to clear the jobs index? The service will start reindexing
+									from scratch. Full text search might be down during this time.
+								</ConfirmationModal>
+								<ConfirmationModal
+									title="Clear service logs index"
+									confirmationText="Clear"
+									open={clearServiceLogsIndexModalOpen}
+									type="danger"
+									on:canceled={() => {
+										clearServiceLogsIndexModalOpen = false
+									}}
+									on:confirmed={async () => {
+										const r = await IndexSearchService.clearIndex({
 											idxName: 'ServiceLogIndex'
 										})
-										console.log('asasd')
 										sendUserToast(r)
-									}}>Clear <b>Service Logs</b> Index</ConfirmButton
+										clearServiceLogsIndexModalOpen = false
+									}}
 								>
-							</div>
-						{/if}
-					</div>
-				{:else if setting.fieldType == 'smtp_connect'}
-					<div class="flex flex-col gap-4 border rounded p-4">
-						{#if $values[setting.key]}
-							<div class="flex gap-4"
-								><input type="email" bind:value={to} placeholder="contact@windmill.dev" />
-								<Button
-									disabled={to == ''}
-									on:click={async () => {
-										let smtp = $values[setting.key]
-										await SettingService.testSmtp({
-											requestBody: {
-												to,
-												smtp: {
-													host: smtp['smtp_host'],
-													username: smtp['smtp_username'],
-													password: smtp['smtp_password'],
-													port: smtp['smtp_port'],
-													from: smtp['smtp_from'],
-													tls_implicit: smtp['smtp_tls_implicit'],
-													disable_tls: smtp['smtp_disable_tls']
+									Are you sure you want to clear the service logs index? The service will start
+									reindexing from scratch. Full text search might be down during this time.
+								</ConfirmationModal>
+							</Section>
+							<hr class="border-t -my-6" />
+							<Section label="Completed Job Index" class="space-y-6">
+								<div class="flex flex-col gap-1">
+									<label
+										for="commit_job_max_batch_size"
+										class="block text-xs font-semibold text-emphasis"
+									>
+										Commit max batch size <Tooltip>
+											The max amount of documents (here jobs) per commit. To optimize indexing
+											throughput, it is best to keep this as high as possible. However, especially
+											when reindexing the whole instance, it can be useful to have a limit on how
+											many jobs can be written without being committed. A commit will make the jobs
+											available for search, constitute a "checkpoint" state in the indexing and will
+											be logged.
+										</Tooltip>
+									</label>
+									<TextInput
+										inputProps={{
+											type: 'number',
+											placeholder: '100000',
+											id: 'commit_job_max_batch_size',
+											disabled: !$enterpriseLicense
+										}}
+										bind:value={$values[setting.key].commit_job_max_batch_size}
+									/>
+								</div>
+								<div class="flex flex-col gap-1">
+									<label
+										for="refresh_index_period"
+										class="block text-xs font-semibold text-emphasis"
+									>
+										Refresh index period (s) <Tooltip>
+											The index will query new jobs periodically and write them on the index. This
+											setting sets that period.
+										</Tooltip></label
+									>
+									<TextInput
+										inputProps={{
+											type: 'number',
+											placeholder: '300',
+											id: 'refresh_index_period',
+											disabled: !$enterpriseLicense
+										}}
+										bind:value={$values[setting.key].refresh_index_period}
+									/>
+								</div>
+								<div class="flex flex-col gap-1">
+									<label
+										for="max_indexed_job_log_size"
+										class="block text-xs font-semibold text-emphasis"
+									>
+										Max indexed job log size (KB) <Tooltip>
+											Job logs are included when indexing, but to avoid the index size growing
+											artificially, the logs will be truncated after a size has been reached.
+										</Tooltip>
+									</label>
+									<TextInput
+										inputProps={{
+											type: 'number',
+											placeholder: '1024',
+											id: 'max_indexed_job_log_size',
+											disabled: !$enterpriseLicense,
+											oninput: (e) => {
+												if (e.target instanceof HTMLInputElement) {
+													if (e.target.valueAsNumber) {
+														$values[setting.key].max_indexed_job_log_size =
+															e.target.valueAsNumber * 1024
+													}
 												}
 											}
-										})
-										sendUserToast('Test email sent')
-									}}>Test SMTP settings</Button
-								></div
-							>
-							<div>
-								<label for="smtp_host" class="block text-sm font-medium">Host</label>
-								<input
-									type="text"
-									id="smtp_host"
-									placeholder="smtp.gmail.com"
-									bind:value={$values[setting.key].smtp_host}
-								/>
-							</div>
-							<div>
-								<label for="smtp_port" class="block text-sm font-medium">Port</label>
-								<input
-									type="number"
-									id="smtp_port"
-									placeholder="587"
-									bind:value={$values[setting.key].smtp_port}
-								/>
-							</div>
-							<div>
-								<label for="smtp_username" class="block text-sm font-medium">Username</label>
-								<input
-									type="text"
-									id="smtp_username"
-									placeholder="ruben@windmill.dev"
-									bind:value={$values[setting.key].smtp_username}
-								/>
-							</div>
-							<div>
-								<label for="smtp_password" class="block text-sm font-medium">Password</label>
-								<Password bind:password={$values[setting.key].smtp_password} />
-							</div>
-							<div>
-								<label for="smtp_from" class="block text-sm font-medium">From Address</label>
-								<input
-									type="email"
-									id="smtp_from"
-									placeholder="noreply@windmill.dev"
-									bind:value={$values[setting.key].smtp_from}
-								/>
-							</div>
-							<div>
-								<Toggle
-									disabled={$values[setting.key].smtp_disable_tls == true || !$enterpriseLicense}
-									id="smtp_tls_implicit"
-									bind:checked={$values[setting.key].smtp_tls_implicit}
-									options={{ right: 'Implicit TLS' }}
-									label="Implicit TLS"
-								/>
-							</div>
-							<div>
-								<Toggle
-									id="smtp_disable_tls"
-									disabled={!$enterpriseLicense}
-									bind:checked={$values[setting.key].smtp_disable_tls}
-									on:change={() => {
-										if ($values[setting.key].smtp_disable_tls) {
-											$values[setting.key].smtp_tls_implicit = false
-										}
-									}}
-									options={{ right: 'Disable TLS' }}
-									label="Disable TLS"
-								/>
-							</div>
+										}}
+										value={$values[setting.key].max_indexed_job_log_size / 1024}
+									/>
+								</div>
+							</Section>
+							<hr class="border-t -my-6" />
+							<Section label="Service logs index" class="space-y-6">
+								<div class="flex flex-col gap-1">
+									<label
+										for="commit_log_max_batch_size"
+										class="block text-xs font-semibold text-emphasis"
+										>Commit max batch size <Tooltip>
+											The max amount of documents per commit. In this case 1 document is one log
+											file representing all logs during 1 minute for a specific host. To optimize
+											indexing throughput, it is best to keep this as high as possible. However,
+											especially when reindexing the whole instance, it can be useful to have a
+											limit on how many logs can be written without being committed. A commit will
+											make the logs available for search, appear as a log line, and be a
+											"checkpoint" of the indexing progress.
+										</Tooltip>
+									</label>
+									<input
+										disabled={!$enterpriseLicense}
+										type="number"
+										id="commit_log_max_batch_size"
+										placeholder="10000"
+										bind:value={$values[setting.key].commit_log_max_batch_size}
+									/>
+								</div>
+
+								<div class="flex flex-col gap-1">
+									<label
+										for="refresh_log_index_period"
+										class="block text-xs font-semibold text-emphasis"
+									>
+										Refresh index period (s) <Tooltip>
+											The index will query new service logs peridically and write them on the index.
+											This setting sets that period.
+										</Tooltip>
+									</label>
+									<TextInput
+										inputProps={{
+											type: 'number',
+											placeholder: '300',
+											id: 'refresh_log_index_period',
+											disabled: !$enterpriseLicense
+										}}
+										bind:value={$values[setting.key].refresh_log_index_period}
+									/>
+								</div>
+							</Section>
 						{/if}
 					</div>
 				{:else if setting.fieldType == 'otel'}
@@ -912,57 +721,61 @@ function handleChannelChange(channel, i) {
 									id="tracing_enabled"
 									bind:checked={$values[setting.key].tracing_enabled}
 									options={{ right: 'Tracing' }}
-									label="Tracing"
 								/>
 								<Toggle
 									disabled={!$enterpriseLicense}
 									id="logs_enabled"
 									bind:checked={$values[setting.key].logs_enabled}
 									options={{ right: 'Logs' }}
-									label="logs"
 								/>
 								<Toggle
 									disabled
 									id="metrics_enabled"
 									bind:checked={$values[setting.key].logs_enabled}
 									options={{ right: 'Metrics (coming soon)' }}
-									label="metrics"
 								/>
 							</div>
 
-							<div>
-								<label for="OTEL_EXPORTER_OTLP_ENDPOINT" class="block text-sm font-medium"
-									>Endpoint</label
+							<div class="flex flex-col gap-1">
+								<label
+									for="OTEL_EXPORTER_OTLP_ENDPOINT"
+									class="block text-xs font-semibold text-emphasis">Endpoint</label
 								>
-								<input
-									disabled={!$enterpriseLicense}
-									type="text"
-									id="OTEL_EXPORTER_OTLP_ENDPOINT"
-									placeholder="http://otel-collector.example.com:4317"
+								<TextInput
+									inputProps={{
+										type: 'text',
+										placeholder: 'http://otel-collector.example.com:4317',
+										id: 'OTEL_EXPORTER_OTLP_ENDPOINT',
+										disabled: !$enterpriseLicense
+									}}
 									bind:value={$values[setting.key].otel_exporter_otlp_endpoint}
 								/>
 							</div>
-							<div>
-								<label for="OTEL_EXPORTER_OTLP_HEADERS" class="block text-sm font-medium"
-									>Headers</label
+							<div class="flex flex-col gap-1">
+								<label
+									for="OTEL_EXPORTER_OTLP_HEADERS"
+									class="block text-xs font-semibold text-emphasis">Headers</label
 								>
-								<input
-									disabled={!$enterpriseLicense}
-									type="text"
-									id="OTEL_EXPORTER_OTLP_HEADERS"
-									placeholder="Authorization=Bearer my-secret-token,Env=production"
+								<TextInput
+									inputProps={{
+										type: 'text',
+										placeholder: 'Authorization=Bearer my-secret-token,Env=production',
+										id: 'OTEL_EXPORTER_OTLP_HEADERS',
+										disabled: !$enterpriseLicense
+									}}
 									bind:value={$values[setting.key].otel_exporter_otlp_headers}
 								/>
 							</div>
-							<div>
-								<label for="OTEL_EXPORTER_OTLP_PROTOCOL" class="block text-sm font-medium"
-									>Protocol</label
+							<div class="flex flex-col gap-1">
+								<label
+									for="OTEL_EXPORTER_OTLP_PROTOCOL"
+									class="block text-xs font-semibold text-emphasis">Protocol</label
 								>
-								gRPC
+								<span class="text-primary font-normal text-xs">gRPC</span>
 							</div>
 							<!-- <div>
-							<label for="OTEL_EXPORTER_OTLP_PROTOCOL" class="block text-sm font-medium"
-								>Protocol<span class="text-2xs text-tertiary ml-4"
+							<label for="OTEL_EXPORTER_OTLP_PROTOCOL" class="block text-sm font-semibold"
+								>Protocol<span class="text-2xs text-primary ml-4"
 									>grpc, http/protobuf, http/json</span
 								></label
 							>
@@ -974,8 +787,8 @@ function handleChannelChange(channel, i) {
 							/>
 						</div>
 						<div>
-							<label for="OTEL_EXPORTER_OTLP_COMPRESSION" class="block text-sm font-medium"
-								>Compression <span class="text-2xs text-tertiary ml-4">none, gzip</span></label
+							<label for="OTEL_EXPORTER_OTLP_COMPRESSION" class="block text-sm font-semibold"
+								>Compression <span class="text-2xs text-primary ml-4">none, gzip</span></label
 							>
 							<input
 								type="text"
@@ -996,6 +809,7 @@ function handleChannelChange(channel, i) {
 								<Toggle
 									disabled={!$enterpriseLicense}
 									bind:checked={$values[setting.key].enabled}
+									id={setting.key}
 								/>
 							</div>
 							{#if $values[setting.key].enabled}
@@ -1006,28 +820,28 @@ function handleChannelChange(channel, i) {
 										bind:value={$values[setting.key].value}
 									/>
 								</label>
-								<label class="block">
-									<span class="text-primary font-semibold text-sm">GB</span>
-								</label>
+								<span class="text-primary font-semibold text-sm">GB</span>
 							{/if}
 						</div>
 						<div class="mb-6"></div>
 					{/if}
 				{:else if setting.fieldType == 'number'}
-					<input
-						type="number"
-						placeholder={setting.placeholder}
+					<TextInput
+						inputProps={{
+							type: 'number',
+							placeholder: setting.placeholder,
+							id: setting.key
+						}}
 						bind:value={$values[setting.key]}
 					/>
 				{:else if setting.fieldType == 'password'}
 					<Password small placeholder={setting.placeholder} bind:password={$values[setting.key]} />
 				{:else if setting.fieldType == 'boolean'}
-					<div class="mt-0.5">
-						<Toggle
-							disabled={setting.ee_only != undefined && !$enterpriseLicense}
-							bind:checked={$values[setting.key]}
-						/>
-					</div>
+					<Toggle
+						disabled={setting.ee_only != undefined && !$enterpriseLicense}
+						bind:checked={$values[setting.key]}
+						id={setting.key}
+					/>
 				{:else if setting.fieldType == 'seconds'}
 					<div>
 						<SecondsInput
@@ -1039,6 +853,8 @@ function handleChannelChange(channel, i) {
 					</div>
 				{:else if setting.fieldType == 'select'}
 					TODO
+				{:else if setting.fieldType == 'smtp_connect'}
+					<SmtpSettings {values} disabled={loading} />
 				{/if}
 				{#if hasError}
 					<span class="text-red-500 dark:text-red-400 text-sm">
@@ -1048,6 +864,10 @@ function handleChannelChange(channel, i) {
 			{:else}
 				<input disabled placeholder="Loading..." />
 			{/if}
-		</label>
+		{/snippet}
+
+		<div class="block">
+			{@render settingContent()}
+		</div>
 	{/if}
 {/if}