windmill-components 1.472.1 → 1.472.2

package/package/components/WorkerGroup.svelte

@@ -0,0 +1,966 @@
+<script>import { Copy, Plus, RefreshCcwIcon, Settings, Trash, X } from 'lucide-svelte';
+import { Alert, Badge, Button, Drawer } from './common';
+import Multiselect from 'svelte-multiselect';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import { ConfigService, WorkspaceService } from '../gen';
+import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
+import { createEventDispatcher } from 'svelte';
+import { sendUserToast } from '../toast';
+import { emptyString, pluralize } from '../utils';
+import { enterpriseLicense, superadmin } from '../stores';
+import Tooltip from './Tooltip.svelte';
+import Editor from './Editor.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import Section from './Section.svelte';
+import Label from './Label.svelte';
+import AutoComplete from 'simple-svelte-autocomplete';
+import YAML from 'yaml';
+import Toggle from './Toggle.svelte';
+import AutoscalingConfigEditor from './AutoscalingConfigEditor.svelte';
+export let name;
+export let config;
+export let activeWorkers;
+export let customTags;
+export let workers;
+$: vcpus_memory = computeVCpuAndMemory(workers);
+function computeVCpuAndMemory(workers) {
+    let vcpus = 0;
+    let memory = 0;
+    for (const [_, pings] of workers) {
+        for (const ping of pings) {
+            if (ping.vcpus) {
+                vcpus += ping.vcpus;
+            }
+            if (ping.memory) {
+                memory += ping.memory;
+            }
+        }
+    }
+    return { vcpus, memory };
+}
+let nconfig = {};
+function loadNConfig() {
+    nconfig = config
+        ? config.worker_tags != undefined || config.dedicated_worker != undefined
+            ? config
+            : {
+                worker_tags: []
+            }
+        : {
+            worker_tags: []
+        };
+    if (nconfig.priority_tags === undefined) {
+        nconfig.priority_tags = new Map();
+    }
+    customEnvVars = [];
+    if (nconfig.env_vars_allowlist === undefined) {
+        nconfig.env_vars_allowlist = [];
+    }
+    else {
+        for (const key of nconfig.env_vars_allowlist) {
+            customEnvVars.push({ key, type: 'dynamic', value: undefined });
+        }
+    }
+    if (nconfig.env_vars_static === undefined) {
+        nconfig.env_vars_static = new Map();
+    }
+    else {
+        for (const [key, value] of Object.entries(nconfig.env_vars_static)) {
+            customEnvVars.push({ key, type: 'static', value });
+        }
+    }
+    customEnvVars.sort((a, b) => (a.key < b.key ? -1 : 1));
+}
+let selectedPriorityTags = [];
+let customEnvVars = [];
+const defaultTags = [
+    'deno',
+    'python3',
+    'go',
+    'bash',
+    'powershell',
+    'dependency',
+    'flow',
+    'other',
+    'bun',
+    'php',
+    'rust',
+    'ansible',
+    'csharp'
+];
+const nativeTags = [
+    'nativets',
+    'postgresql',
+    'mysql',
+    'graphql',
+    'snowflake',
+    'mssql',
+    'bigquery',
+    'oracledb'
+];
+const aws_env_vars_preset = [
+    'AWS_REGION',
+    'AWS_DEFAULT_REGION',
+    'AWS_ACCESS_KEY_ID',
+    'AWS_SECRET_ACCESS_KEY',
+    'AWS_ENDPOINT_URL'
+];
+const ssl_env_vars_preset = [
+    'DENO_CERT',
+    'PIP_INDEX_CERT',
+    'REQUESTS_CA_BUNDLE',
+    'SSL_CERT_FILE',
+    'SSL_CERT_DIR'
+];
+let newTag = '';
+$: selected = nconfig?.dedicated_worker != undefined ? 'dedicated' : 'normal';
+$: {
+    selectedPriorityTags = [];
+    if (nconfig?.priority_tags !== undefined) {
+        for (const [tag, _] of Object.entries(nconfig?.priority_tags)) {
+            selectedPriorityTags.push(tag);
+        }
+    }
+}
+let workspaceTag = '';
+export let defaultTagPerWorkspace = undefined;
+let workspaces = [];
+async function listWorkspaces() {
+    workspaces = await WorkspaceService.listWorkspacesAsSuperAdmin();
+}
+$: $superadmin && listWorkspaces();
+const dispatch = createEventDispatcher();
+async function deleteWorkerGroup() {
+    await ConfigService.deleteConfig({ name: 'worker__' + name });
+    dispatch('reload');
+}
+let dirty = false;
+let dirtyCode = false;
+let openDelete = false;
+let openClean = false;
+let drawer;
+let createdTags = [];
+</script>
+
+<ConfirmationModal
+	open={openDelete}
+	title="Delete worker group"
+	confirmationText="Remove"
+	on:canceled={() => {
+		openDelete = false
+	}}
+	on:confirmed={async () => {
+		deleteWorkerGroup()
+		openDelete = false
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove this worker group {name}?</span>
+	</div>
+</ConfirmationModal>
+
+<ConfirmationModal
+	open={openClean}
+	title="Clear cache"
+	confirmationText="Remove"
+	on:canceled={() => {
+		openClean = false
+	}}
+	on:confirmed={async () => {
+		const ndate = Math.floor(Date.now() / 1000)
+		const withCacheConfig = { ...nconfig, cache_clear: ndate }
+		await ConfigService.updateConfig({
+			name: 'worker__' + name,
+			requestBody: withCacheConfig
+		})
+		if (config) {
+			config.cache_clear = ndate
+		}
+		sendUserToast('Worker caches clearing in 5s. Require a restart.')
+		dispatch('reload')
+		openClean = false
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span
+			>Are you sure you want to clean the cache of all workers of this worker group (will also
+			restart the workers and expect supervisor to restart them) ?</span
+		>
+	</div>
+</ConfirmationModal>
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent
+		on:close={() => drawer.closeDrawer()}
+		title={$superadmin ? `Edit worker config '${name}'` : `Worker config '${name}'`}
+	>
+		{#if !$enterpriseLicense}
+			<Alert type="warning" title="Worker management UI is EE only">
+				Workers can still have their WORKER_TAGS, INIT_SCRIPT and WHITELIST_ENVS passed as env.
+				Dedicated workers are an enterprise only feature.
+			</Alert>
+			<div class="pb-4" />
+		{/if}
+
+		<ToggleButtonGroup
+			{selected}
+			disabled={!$superadmin}
+			on:selected={(e) => {
+				dirty = true
+				if (nconfig == undefined) {
+					nconfig = {}
+				}
+				if (e.detail == 'dedicated') {
+					nconfig.dedicated_worker = ''
+					nconfig.worker_tags = undefined
+				} else {
+					nconfig.dedicated_worker = undefined
+					nconfig.worker_tags = []
+				}
+			}}
+			class="mb-4"
+			let:item
+		>
+			<ToggleButton
+				position="left"
+				value="normal"
+				size="sm"
+				label="Any jobs within worker tags"
+				{item}
+			/>
+			<ToggleButton
+				position="dedicated"
+				value="dedicated"
+				size="sm"
+				label="Dedicated to a script/flow"
+				{item}
+			/>
+		</ToggleButtonGroup>
+		{#if selected == 'normal'}
+			<Section label="Tags to listen to">
+				{#if nconfig?.worker_tags != undefined}
+					<div class="flex gap-3 gap-y-2 flex-wrap pb-2">
+						{#each nconfig.worker_tags as tag}
+							<div class="flex gap-0.5 items-center"
+								><div class="text-2xs p-1 rounded border text-primary">{tag}</div>
+								{#if $superadmin}
+									<button
+										class={'z-10 rounded-full p-1 duration-200 hover:bg-gray-200'}
+										aria-label="Remove item"
+										on:click|preventDefault|stopPropagation={() => {
+											if (nconfig != undefined) {
+												dirty = true
+												nconfig.worker_tags = nconfig?.worker_tags?.filter((t) => t != tag) ?? []
+												if (nconfig.priority_tags) {
+													delete nconfig.priority_tags[tag]
+												}
+												selectedPriorityTags = selectedPriorityTags.filter((t) => t != tag) ?? []
+											}
+										}}
+									>
+										<X size={12} />
+									</button>
+								{/if}</div
+							>
+						{/each}
+					</div>
+					{#if $superadmin}
+						<div class="max-w-md">
+							<AutoComplete
+								noInputStyles
+								items={[
+									...(customTags ?? []),
+									...createdTags,
+									...defaultTags,
+									...nativeTags
+								].filter((x) => !nconfig?.worker_tags?.includes(x))}
+								bind:selectedItem={newTag}
+								hideArrow={true}
+								inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary"'}
+								dropdownClassName="!text-sm !py-2 !rounded-sm  !border-gray-200 !border !shadow-md"
+								className="w-full !font-gray-600 !font-primary !bg-surface-primary"
+								onFocus={() => {
+									dispatch('focus')
+								}}
+								create
+								onCreate={(c) => {
+									createdTags.push(c)
+									createdTags = [...createdTags]
+									return c
+								}}
+								createText="Press enter to use this non-predefined value"
+							/>
+
+							<div class="mt-1" />
+							<div class="flex">
+								<Button
+									variant="contained"
+									color="blue"
+									size="xs"
+									startIcon={{ icon: Plus }}
+									disabled={newTag == '' || nconfig.worker_tags?.includes(newTag)}
+									on:click={() => {
+										if (nconfig != undefined) {
+											nconfig.worker_tags = [
+												...(nconfig?.worker_tags ?? []),
+												newTag.replaceAll(' ', '_')
+											]
+											newTag = ''
+											dirty = true
+										}
+									}}
+								>
+									Add tag
+								</Button>
+							</div>
+						</div>
+						<div class="flex flex-wrap mt-2 items-center gap-1 pt-2">
+							<Button
+								variant="contained"
+								color="light"
+								size="xs"
+								on:click={() => {
+									if (nconfig != undefined) {
+										nconfig.worker_tags =
+											defaultTagPerWorkspace && workspaceTag
+												? defaultTags.concat(nativeTags).map((nt) => `${nt}-${workspaceTag}`)
+												: defaultTags.concat(nativeTags)
+
+										dirty = true
+									}
+								}}
+							>
+								Reset to all tags <Tooltip
+									>{(defaultTagPerWorkspace && workspaceTag
+										? defaultTags.concat(nativeTags).map((nt) => `${nt}-${workspaceTag}`)
+										: defaultTags.concat(nativeTags)
+									).join(', ')}</Tooltip
+								>
+							</Button>
+							<Button
+								variant="contained"
+								color="light"
+								size="xs"
+								on:click={() => {
+									if (nconfig != undefined) {
+										nconfig.worker_tags =
+											defaultTagPerWorkspace && workspaceTag
+												? defaultTags.map((nt) => `${nt}-${workspaceTag}`)
+												: defaultTags
+										dirty = true
+									}
+								}}
+							>
+								Reset to all tags minus native ones <Tooltip
+									>{(defaultTagPerWorkspace
+										? defaultTags.map((nt) => `${nt}-${workspaceTag}`)
+										: defaultTags
+									).join(', ')}</Tooltip
+								>
+							</Button>
+							<Button
+								variant="contained"
+								color="light"
+								size="xs"
+								on:click={() => {
+									if (nconfig != undefined) {
+										nconfig.worker_tags =
+											defaultTagPerWorkspace && workspaceTag
+												? nativeTags.map((nt) => `${nt}-${workspaceTag}`)
+												: nativeTags
+										dirty = true
+									}
+								}}
+							>
+								Reset to native tags <Tooltip
+									>{(defaultTagPerWorkspace && workspaceTag
+										? nativeTags.map((nt) => `${nt}-${workspaceTag}`)
+										: nativeTags
+									).join(', ')}</Tooltip
+								>
+							</Button>
+
+							{#if defaultTagPerWorkspace}
+								<AutoComplete
+									bind:selectedItem={workspaceTag}
+									noInputStyles
+									hideArrow={true}
+									items={workspaces.map((w) => w.id)}
+									inputClassName={'flex !font-gray-600 !font-primary !bg-surface-primary'}
+									dropdownClassName="!text-sm !py-2 !rounded-sm  !border-gray-200 !border !shadow-md"
+									className="!font-gray-600 !font-primary !bg-surface-primary"
+									create
+									onCreate={(c) => c}
+									placeholder="Workspace ID"
+								/>
+							{/if}
+						</div>
+						<div class="max-w mt-2 items-center gap-1 pt-2">
+							{#if nconfig?.worker_tags !== undefined && nconfig?.worker_tags.length > 0}
+								<Label label="High-priority tags">
+									<svelte:fragment slot="header">
+										<Tooltip>
+											Jobs with the following high-priority tags will be picked up in priority by
+											this worker.
+											{#if !enterpriseLicense}
+												This is a feature only available in enterprise edition.
+											{/if}
+										</Tooltip>
+									</svelte:fragment>
+									<Multiselect
+										outerDivClass="text-secondary !bg-surface-disabled !border-0"
+										disabled={!$enterpriseLicense}
+										bind:selected={selectedPriorityTags}
+										on:change={(e) => {
+											if (e.detail.type === 'add') {
+												if (nconfig.priority_tags) {
+													nconfig.priority_tags[e.detail.option] = 100
+												}
+												dirty = true
+											} else if (e.detail.type === 'remove') {
+												if (nconfig.priority_tags) {
+													delete nconfig.priority_tags[e.detail.option]
+												}
+												dirty = true
+											} else if (e.detail.type === 'removeAll') {
+												nconfig.priority_tags = undefined
+												dirty = true
+											} else {
+												console.error(
+													`Priority tags multiselect - unknown event type: '${e.detail.type}'`
+												)
+											}
+										}}
+										options={nconfig?.worker_tags}
+										selectedOptionsDraggable={false}
+										ulOptionsClass={'!bg-surface-secondary'}
+										placeholder="High priority tags"
+									/>
+								</Label>
+							{/if}
+						</div>
+					{/if}
+				{/if}
+			</Section>
+			{#if nconfig !== undefined}
+				<div class="mt-8" />
+				<Section label="Alerts" tooltip="Alert is sent to the configured critical error channels">
+					<Toggle
+						size="sm"
+						options={{
+							right: 'Send an alert when the number of alive workers falls below a given threshold'
+						}}
+						checked={nconfig?.min_alive_workers_alert_threshold !== undefined}
+						on:change={(ev) => {
+							if (nconfig !== undefined) {
+								nconfig.min_alive_workers_alert_threshold = ev.detail ? 1 : undefined
+								dirty = true
+							}
+						}}
+						disabled{!$enterpriseLicense}
+					/>
+					{#if nconfig.min_alive_workers_alert_threshold !== undefined}
+						<div class="flex flex-row items-center justify-between">
+							<div class="flex flex-row items-center text-sm gap-2">
+								<p>Triggered when number of workers in group is lower than</p>
+								<input
+									type="number"
+									class="!w-14 text-center"
+									disabled={!$enterpriseLicense}
+									min="1"
+									bind:value={nconfig.min_alive_workers_alert_threshold}
+									on:change={(ev) => {
+										dirty = true
+									}}
+								/>
+							</div>
+						</div>
+					{/if}
+				</Section>
+			{/if}
+		{:else if selected == 'dedicated'}
+			{#if nconfig?.dedicated_worker != undefined}
+				<input
+					disabled={!$superadmin}
+					placeholder="<workspace>:<script path>"
+					type="text"
+					on:change={() => {
+						dirtyCode = true
+						dirty = true
+					}}
+					bind:value={nconfig.dedicated_worker}
+				/>
+				{#if $superadmin}
+					<div class="py-2"
+						><Alert
+							type="info"
+							title="Script's runtime setting 'dedicated worker' must be toggled on as well"
+						/></div
+					>
+					<p class="text-2xs text-tertiary mt-2"
+						>Workers will get killed upon detecting this setting change. It is assumed they are in
+						an environment where the supervisor will restart them. Upon restart, they will pick the
+						new dedicated worker config.</p
+					>
+				{/if}
+			{/if}
+		{/if}
+
+		<div class="mt-8" />
+		<Section
+			label="Python runtime settings"
+			collapsable={true}
+			tooltip="Add Python runtime specific settings like additional python paths and PIP local dependencies"
+		>
+			<div class="flex flex-col gap-3 gap-y-2 pb-2 max-w">
+				<span class="text-sm text-primary">Additional Python Paths</span>
+				{#each nconfig.additional_python_paths ?? [] as additional_python_path, i}
+					<div class="flex gap-1 items-center">
+						<input
+							type="text"
+							disabled={!$superadmin}
+							placeholder="/path/to/python3.X/site-packages"
+							bind:value={additional_python_path}
+						/>
+						{#if $superadmin}
+							<button
+								class="rounded-full bg-surface/60 hover:bg-gray-200"
+								aria-label="Clear"
+								on:click={() => {
+									if (
+										nconfig.additional_python_paths === undefined ||
+										nconfig.additional_python_paths.length == 0
+									) {
+										return
+									}
+									nconfig.additional_python_paths.splice(i, 1)
+									nconfig.additional_python_paths = [...nconfig.additional_python_paths]
+									dirty = true
+								}}
+							>
+								<X size={14} />
+							</button>
+						{/if}
+					</div>
+				{/each}
+				{#if $superadmin}
+					<div class="flex">
+						<Button
+							variant="contained"
+							color="blue"
+							size="xs"
+							startIcon={{ icon: Plus }}
+							on:click={() => {
+								if (nconfig.additional_python_paths === undefined) {
+									nconfig.additional_python_paths = []
+								}
+								nconfig.additional_python_paths.push('')
+								nconfig.additional_python_paths = [...nconfig.additional_python_paths]
+								dirty = true
+							}}
+						>
+							Add additional Python path
+						</Button>
+					</div>
+				{/if}
+
+				<span class="text-sm text-primary">PIP local dependencies</span>
+				{#each nconfig.pip_local_dependencies ?? [] as pip_local_dependency, i}
+					<div class="flex gap-1 items-center">
+						<input
+							disabled={!$superadmin}
+							type="text"
+							placeholder="httpx"
+							bind:value={pip_local_dependency}
+						/>
+						{#if $superadmin}
+							<button
+								class="rounded-full bg-surface/60 hover:bg-gray-200"
+								aria-label="Clear"
+								on:click={() => {
+									if (
+										nconfig.pip_local_dependencies === undefined ||
+										nconfig.pip_local_dependencies.length == 0
+									) {
+										return
+									}
+									nconfig.pip_local_dependencies.splice(i, 1)
+									nconfig.pip_local_dependencies = [...nconfig.pip_local_dependencies]
+									dirty = true
+								}}
+							>
+								<X size={14} />
+							</button>
+						{/if}
+					</div>
+				{/each}
+				{#if $superadmin}
+					<div class="flex">
+						<Button
+							variant="contained"
+							color="blue"
+							size="xs"
+							startIcon={{ icon: Plus }}
+							on:click={() => {
+								if (nconfig.pip_local_dependencies === undefined) {
+									nconfig.pip_local_dependencies = []
+								}
+								nconfig.pip_local_dependencies.push('')
+								nconfig.pip_local_dependencies = [...nconfig.pip_local_dependencies]
+								dirty = true
+							}}
+						>
+							Add PIP local dependency
+						</Button>
+					</div>
+				{/if}
+			</div>
+		</Section>
+
+		<div class="mt-8" />
+
+		<Section
+			label="Environment variables passed to jobs"
+			collapsable={true}
+			tooltip="Add static and dynamic environment variables that will be passed to jobs handled by this worker group. Dynamic environment variable values will be loaded from the worker host environment variables while static environment variables will be set directly from their values below."
+		>
+			<div class="flex flex-col gap-3 gap-y-2 pb-2 max-w">
+				{#each customEnvVars as envvar, i}
+					<div class="flex gap-1 items-center">
+						<input
+							disabled={!$superadmin}
+							type="text"
+							placeholder="ENV_VAR_NAME"
+							bind:value={envvar.key}
+							on:keypress={(e) => {
+								dirty = true
+							}}
+						/>
+						<ToggleButtonGroup
+							disabled={!$superadmin}
+							class="w-128"
+							bind:selected={envvar.type}
+							on:selected={(e) => {
+								dirty = true
+								if (e.detail === 'dynamic') {
+									envvar.value = undefined
+								}
+							}}
+							let:item
+						>
+							<ToggleButton value="dynamic" label="Dynamic" {item} />
+							<ToggleButton value="static" label="Static" {item} />
+						</ToggleButtonGroup>
+						<input
+							type="text"
+							disabled={!$superadmin || envvar.type === 'dynamic'}
+							placeholder={envvar.type === 'dynamic'
+								? 'value read from worker env var'
+								: 'static value'}
+							bind:value={envvar.value}
+						/>
+						{#if $superadmin}
+							<button
+								class="rounded-full bg-surface/60 hover:bg-gray-200"
+								aria-label="Clear"
+								on:click={() => {
+									if (nconfig.env_vars_static?.[envvar.key] !== undefined) {
+										delete nconfig.env_vars_static[envvar.key]
+									}
+									if (nconfig.env_vars_allowlist?.includes(envvar.key)) {
+										nconfig.env_vars_allowlist = nconfig.env_vars_allowlist.filter(
+											(k) => k != envvar.key
+										)
+									}
+									customEnvVars.splice(i, 1)
+									customEnvVars = [...customEnvVars]
+									dirty = true
+								}}
+							>
+								<X size={14} />
+							</button>
+						{/if}
+					</div>
+				{/each}
+				{#if $superadmin}
+					<div class="flex">
+						<Button
+							variant="contained"
+							color="blue"
+							size="xs"
+							startIcon={{ icon: Plus }}
+							on:click={() => {
+								customEnvVars.push({ key: '', type: 'dynamic', value: undefined })
+								customEnvVars = [...customEnvVars]
+								dirty = true
+							}}
+						>
+							Add environment variable
+						</Button>
+					</div>
+				{/if}
+			</div>
+			{#if !superadmin}
+				<div class="flex flex-wrap items-center gap-1 pt-2">
+					<Button
+						variant="contained"
+						color="light"
+						size="xs"
+						on:click={() => {
+							let updated = false
+							aws_env_vars_preset.forEach((envvar) => {
+								if (!customEnvVars.some((e) => e.key === envvar)) {
+									updated = true
+									customEnvVars.push({
+										key: envvar,
+										type: 'dynamic',
+										value: undefined
+									})
+								}
+							})
+							if (updated) {
+								customEnvVars = [...customEnvVars]
+								dirty = true
+							}
+						}}
+					>
+						AWS env var preset <Tooltip
+							>{`${aws_env_vars_preset.join(
+								', '
+							)} - see https://docs.aws.amazon.com/fr_fr/cli/latest/userguide/cli-configure-envvars.html for more options`}</Tooltip
+						>
+					</Button>
+					<Button
+						variant="contained"
+						color="light"
+						size="xs"
+						on:click={() => {
+							let updated = false
+							ssl_env_vars_preset.forEach((envvar) => {
+								if (!customEnvVars.some((e) => e.key === envvar)) {
+									updated = true
+									customEnvVars.push({
+										key: envvar,
+										type: 'dynamic',
+										value: undefined
+									})
+								}
+							})
+							if (updated) {
+								customEnvVars = [...customEnvVars]
+								dirty = true
+							}
+						}}
+					>
+						SSL env var preset <Tooltip>{`${ssl_env_vars_preset.join(', ')}`}</Tooltip>
+					</Button>
+				</div>
+			{/if}
+		</Section>
+		<div class="mt-8" />
+
+		<Section label="Autoscaling" collapsable>
+			<div slot="header" class="ml-4 flex flex-row gap-2 items-center">
+				<Badge>Beta</Badge>
+				{#if nconfig.autoscaling?.enabled}
+					<Badge color="green">Enabled</Badge>
+				{/if}
+			</div>
+			<AutoscalingConfigEditor
+				on:dirty={() => (dirty = true)}
+				worker_tags={nconfig.worker_tags}
+				bind:config={nconfig.autoscaling}
+			/>
+		</Section>
+		<div class="mt-8" />
+
+		<Section
+			label="Init script"
+			tooltip="Bash scripts run at start of the workers. More lightweight than having to require the worker images at the cost of being run on every start."
+		>
+			<div class="flex gap-4 py-2 pb-6 items-baseline w-full">
+				<div class="border w-full h-40">
+					{#if dirtyCode}
+						<div class="text-red-600 text-sm"
+							>Init script has changed, once applied, the workers will restart to apply it.</div
+						>
+					{/if}
+					<Editor
+						disabled={!$superadmin}
+						class="flex flex-1 grow h-full w-full"
+						automaticLayout
+						lang="shell"
+						scriptLang={'bash'}
+						useWebsockets={false}
+						fixedOverflowWidgets={false}
+						code={config?.init_bash ?? ''}
+						on:change={(e) => {
+							if (config) {
+								dirty = true
+								dirtyCode = true
+								const code = e.detail
+								if (code != '') {
+									nconfig.init_bash = code?.replace(/\r\n/g, '\n')
+								} else {
+									nconfig.init_bash = undefined
+								}
+							}
+						}}
+					/>
+				</div>
+			</div>
+		</Section>
+		<svelte:fragment slot="actions">
+			<div class="flex gap-4 items-center">
+				<div class="flex gap-2 items-center">
+					{#if dirty}
+						<div class="text-red-600 text-xs whitespace-nowrap">Non applied changes</div>
+					{/if}
+					<Button
+						variant="contained"
+						color="dark"
+						on:click={async () => {
+							if (
+								nconfig?.min_alive_workers_alert_threshold &&
+								nconfig?.min_alive_workers_alert_threshold < 1
+							) {
+								sendUserToast('Minimum alive workers alert threshold must be at least 1', true)
+								return
+							}
+							// Remove duplicate env vars by keeping only the last occurrence of each key
+							const seenKeys = new Set()
+							customEnvVars = customEnvVars
+								.reverse()
+								.filter((envVar) => {
+									if (envVar.key == '') {
+										return false
+									}
+									if (seenKeys.has(envVar.key)) {
+										return false
+									}
+									seenKeys.add(envVar.key)
+									return true
+								})
+								.reverse()
+							nconfig.env_vars_static = new Map()
+							nconfig.env_vars_allowlist = []
+							customEnvVars.forEach((envvar) => {
+								if (
+									nconfig.env_vars_static !== undefined &&
+									nconfig.env_vars_allowlist !== undefined &&
+									!emptyString(envvar.key)
+								) {
+									if (envvar.type === 'dynamic') {
+										nconfig.env_vars_allowlist.push(envvar.key)
+									} else {
+										nconfig.env_vars_static[envvar.key] = envvar.value
+									}
+								}
+							})
+
+							await ConfigService.updateConfig({ name: 'worker__' + name, requestBody: nconfig })
+							sendUserToast('Configuration set')
+							dispatch('reload')
+							dirty = false
+							dirtyCode = false
+						}}
+						disabled={(!dirty && nconfig?.dedicated_worker == undefined) ||
+							!$enterpriseLicense ||
+							!$superadmin}
+					>
+						Apply changes
+					</Button>
+				</div>
+			</div>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>
+
+<div class=" flex items-center justify-between pt-1">
+	<div class="text-xs"
+		>{pluralize(activeWorkers, 'worker')}
+		{#if vcpus_memory?.vcpus}
+			- {(vcpus_memory?.vcpus / 100000).toFixed(2)} vCPUs{/if}
+		{#if vcpus_memory?.memory}
+			- {((vcpus_memory?.memory * 1.0) / 1024 / 1024 / 1024).toFixed(2)} GB{/if}</div
+	>
+	<div class="flex gap-2 items-center justify-end flex-row my-2">
+		{#if $superadmin}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					dirty = false
+					loadNConfig()
+					drawer.openDrawer()
+				}}
+				startIcon={{ icon: config == undefined ? Plus : Settings }}
+			>
+				<div class="flex flex-row gap-1 items-center">
+					{config == undefined ? 'Create' : 'Edit'} config
+				</div>
+			</Button>
+
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					navigator.clipboard.writeText(
+						YAML.stringify({
+							name,
+							...config
+						})
+					)
+					sendUserToast('Worker config copied to clipboard as YAML')
+				}}
+				startIcon={{ icon: Copy }}
+			>
+				Copy config
+			</Button>
+
+			{#if config}
+				<Button
+					color="light"
+					size="xs"
+					on:click={() => {
+						if (!$enterpriseLicense) {
+							sendUserToast('Worker Management UI is an EE feature', true)
+						} else {
+							openDelete = true
+						}
+					}}
+					startIcon={{ icon: Trash }}
+					btnClasses="text-red-400"
+				>
+					Delete config
+				</Button>
+			{/if}
+
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					loadNConfig()
+
+					openClean = true
+				}}
+				btnClasses="text-red-400"
+				startIcon={{ icon: RefreshCcwIcon }}
+			>
+				Clean cache
+			</Button>
+		{:else if config}
+			<Button
+				color="light"
+				size="xs"
+				on:click={() => {
+					loadNConfig()
+					drawer.openDrawer()
+				}}
+			>
+				<div class="flex flex-row gap-1 items-center"> config </div>
+			</Button>
+		{/if}
+	</div>
+</div>