windmill-components 1.493.9 → 1.501.4

package/package/components/WorkerGroup.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">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';
@@ -8,24 +7,20 @@ import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svel
 import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../toast';
 import { emptyString, pluralize } from '../utils';
-import { enterpriseLicense, superadmin } from '../stores';
+import { enterpriseLicense, superadmin, devopsRole } 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 { defaultTags, nativeTags } from './worker_group';
 import AutoscalingConfigEditor from './AutoscalingConfigEditor.svelte';
 import TagsToListenTo from './TagsToListenTo.svelte';
-export let name;
-export let config;
-export let activeWorkers;
-export let customTags;
-export let workers;
-$: vcpus_memory = computeVCpuAndMemory(workers);
+import Select from './select/Select.svelte';
+import MultiSelect from './select/MultiSelect.svelte';
+import { safeSelectItems } from './select/utils.svelte';
 function computeVCpuAndMemory(workers) {
     let vcpus = 0;
     let memory = 0;
@@ -41,7 +36,7 @@ function computeVCpuAndMemory(workers) {
     }
     return { vcpus, memory };
 }
-let nconfig = {};
+let nconfig = $state({});
 function loadNConfig() {
     nconfig = config
         ? config.worker_tags != undefined || config.dedicated_worker != undefined
@@ -74,8 +69,7 @@ function loadNConfig() {
     }
     customEnvVars.sort((a, b) => (a.key < b.key ? -1 : 1));
 }
-let selectedPriorityTags = [];
-let customEnvVars = [];
+let customEnvVars = $state([]);
 const aws_env_vars_preset = [
     'AWS_REGION',
     'AWS_DEFAULT_REGION',
@@ -90,32 +84,27 @@ const ssl_env_vars_preset = [
     'SSL_CERT_FILE',
     'SSL_CERT_DIR'
 ];
-$: 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 = [];
+let workspaceTag = $state('');
+let { name, config = $bindable(), activeWorkers, customTags, workers, defaultTagPerWorkspace = undefined } = $props();
+let workspaces = $state([]);
 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 dirty = $state(false);
+let dirtyCode = $state(false);
+let openDelete = $state(false);
+let openClean = $state(false);
+let drawer = $state();
+let vcpus_memory = $derived(computeVCpuAndMemory(workers));
+let selected = $derived(nconfig?.dedicated_worker != undefined ? 'dedicated' : 'normal');
+$effect(() => {
+    ($superadmin || $devopsRole) && listWorkspaces();
+});
 </script>
 
 <ConfirmationModal
@@ -167,8 +156,8 @@ let drawer;
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
-		on:close={() => drawer.closeDrawer()}
-		title={$superadmin ? `Edit worker config '${name}'` : `Worker config '${name}'`}
+		on:close={() => drawer?.closeDrawer()}
+		title={($superadmin || $devopsRole) ? `Edit worker config '${name}'` : `Worker config '${name}'`}
 	>
 		{#if !$enterpriseLicense}
 			<Alert type="warning" title="Worker management UI is EE only">
@@ -195,22 +184,23 @@ let drawer;
 				}
 			}}
 			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}
-			/>
+			{#snippet children({ 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}
+				/>
+			{/snippet}
 		</ToggleButtonGroup>
 		{#if selected == 'normal'}
 			<Section label="Tags to listen to">
@@ -224,7 +214,6 @@ let drawer;
 							if (nconfig.priority_tags) {
 								delete nconfig.priority_tags[tag]
 							}
-							selectedPriorityTags = selectedPriorityTags.filter((t) => t != tag) ?? []
 						}}
 						bind:worker_tags={nconfig.worker_tags}
 						{customTags}
@@ -297,16 +286,10 @@ let drawer;
 						</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}
+							<Select
+								bind:value={workspaceTag}
+								items={workspaces.map((w) => ({ value: w.id }))}
+								onCreateItem={(c) => (workspaceTag = c)}
 								placeholder="Workspace ID"
 							/>
 						{/if}
@@ -314,7 +297,7 @@ let drawer;
 					<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">
+								{#snippet header()}
 									<Tooltip>
 										Jobs with the following high-priority tags will be picked up in priority by this
 										worker.
@@ -322,37 +305,17 @@ let drawer;
 											This is a feature only available in enterprise edition.
 										{/if}
 									</Tooltip>
-								</svelte:fragment>
-								<Multiselect
-									outerDivClass="text-secondary !bg-surface-disabled !border-0"
+								{/snippet}
+								<MultiSelect
 									disabled={!$enterpriseLicense}
-									bind:selected={selectedPriorityTags}
-									onchange={(e) => {
-										if (e.type === 'add') {
-											if (nconfig.priority_tags) {
-												if (e.option && typeof e.option !== 'object') {
-													nconfig.priority_tags[e.option] = 100
-												}
-											}
-											dirty = true
-										} else if (e.type === 'remove') {
-											if (nconfig.priority_tags) {
-												if (e.option && typeof e.option !== 'object') {
-													delete nconfig.priority_tags[e.option]
-												}
-											}
+									bind:value={
+										() => new Array(...(nconfig?.priority_tags?.keys?.() ?? [])),
+										(v) => {
+											nconfig.priority_tags = new Map<string, number>(v.map((k) => [k, 100]))
 											dirty = true
-										} else if (e.type === 'removeAll') {
-											nconfig.priority_tags = new Map<string, number>()
-											dirty = true
-										} else {
-											console.error(`Priority tags multiselect - unknown event type: '${e.type}'`)
 										}
-									}}
-									options={nconfig?.worker_tags}
-									selectedOptionsDraggable={false}
-									ulOptionsClass={'!bg-surface-secondary'}
-									placeholder="High priority tags"
+									}
+									items={safeSelectItems(nconfig?.worker_tags)}
 								/>
 							</Label>
 						{/if}
@@ -386,7 +349,7 @@ let drawer;
 									disabled={!$enterpriseLicense}
 									min="1"
 									bind:value={nconfig.min_alive_workers_alert_threshold}
-									on:change={(ev) => {
+									onchange={(ev) => {
 										dirty = true
 									}}
 								/>
@@ -398,16 +361,16 @@ let drawer;
 		{:else if selected == 'dedicated'}
 			{#if nconfig?.dedicated_worker != undefined}
 				<input
-					disabled={!$superadmin}
+					disabled={!($superadmin || $devopsRole)}
 					placeholder="<workspace>:<script path>"
 					type="text"
-					on:change={() => {
+					onchange={() => {
 						dirtyCode = true
 						dirty = true
 					}}
 					bind:value={nconfig.dedicated_worker}
 				/>
-				{#if $superadmin}
+				{#if $superadmin || $devopsRole}
 					<div class="py-2"
 						><Alert
 							type="info"
@@ -431,36 +394,38 @@ let drawer;
 		>
 			<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}
+				{#if nconfig.additional_python_paths}
+					{#each nconfig.additional_python_paths as _, i}
+						<div class="flex gap-1 items-center">
+							<input
+								type="text"
+								disabled={!($superadmin || $devopsRole)}
+								placeholder="/path/to/python3.X/site-packages"
+								bind:value={nconfig.additional_python_paths![i]}
+							/>
+							{#if $superadmin || $devopsRole}
+								<button
+									class="rounded-full bg-surface/60 hover:bg-gray-200"
+									aria-label="Clear"
+									onclick={() => {
+										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}
+				{#if $superadmin || $devopsRole}
 					<div class="flex">
 						<Button
 							variant="contained"
@@ -482,36 +447,38 @@ let drawer;
 				{/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}
+				{#if nconfig.pip_local_dependencies}
+					{#each nconfig.pip_local_dependencies as _, i}
+						<div class="flex gap-1 items-center">
+							<input
+								disabled={!($superadmin || $devopsRole)}
+								type="text"
+								placeholder="httpx"
+								bind:value={nconfig.pip_local_dependencies[i]}
+							/>
+							{#if $superadmin || $devopsRole}
+								<button
+									class="rounded-full bg-surface/60 hover:bg-gray-200"
+									aria-label="Clear"
+									onclick={() => {
+										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}
+				{#if $superadmin || $devopsRole}
 					<div class="flex">
 						<Button
 							variant="contained"
@@ -545,16 +512,16 @@ let drawer;
 				{#each customEnvVars as envvar, i}
 					<div class="flex gap-1 items-center">
 						<input
-							disabled={!$superadmin}
+							disabled={!($superadmin || $devopsRole)}
 							type="text"
 							placeholder="ENV_VAR_NAME"
 							bind:value={envvar.key}
-							on:keypress={(e) => {
+							onkeypress={(e) => {
 								dirty = true
 							}}
 						/>
 						<ToggleButtonGroup
-							disabled={!$superadmin}
+							disabled={!($superadmin || $devopsRole)}
 							class="w-128"
 							bind:selected={envvar.type}
 							on:selected={(e) => {
@@ -563,24 +530,25 @@ let drawer;
 									envvar.value = undefined
 								}
 							}}
-							let:item
 						>
-							<ToggleButton value="dynamic" label="Dynamic" {item} />
-							<ToggleButton value="static" label="Static" {item} />
+							{#snippet children({ item })}
+								<ToggleButton value="dynamic" label="Dynamic" {item} />
+								<ToggleButton value="static" label="Static" {item} />
+							{/snippet}
 						</ToggleButtonGroup>
 						<input
 							type="text"
-							disabled={!$superadmin || envvar.type === 'dynamic'}
+							disabled={!($superadmin || $devopsRole) || envvar.type === 'dynamic'}
 							placeholder={envvar.type === 'dynamic'
 								? 'value read from worker env var'
 								: 'static value'}
 							bind:value={envvar.value}
 						/>
-						{#if $superadmin}
+						{#if $superadmin || $devopsRole}
 							<button
 								class="rounded-full bg-surface/60 hover:bg-gray-200"
 								aria-label="Clear"
-								on:click={() => {
+								onclick={() => {
 									if (nconfig.env_vars_static?.[envvar.key] !== undefined) {
 										delete nconfig.env_vars_static[envvar.key]
 									}
@@ -599,7 +567,7 @@ let drawer;
 						{/if}
 					</div>
 				{/each}
-				{#if $superadmin}
+				{#if $superadmin || $devopsRole}
 					<div class="flex">
 						<Button
 							variant="contained"
@@ -617,7 +585,7 @@ let drawer;
 					</div>
 				{/if}
 			</div>
-			{#if !superadmin}
+			{#if !($superadmin || $devopsRole)}
 				<div class="flex flex-wrap items-center gap-1 pt-2">
 					<Button
 						variant="contained"
@@ -677,12 +645,14 @@ let drawer;
 		<div class="mt-8"></div>
 
 		<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>
+			{#snippet header()}
+				<div class="ml-4 flex flex-row gap-2 items-center">
+					<Badge>Beta</Badge>
+					{#if nconfig.autoscaling?.enabled}
+						<Badge color="green">Enabled</Badge>
+					{/if}
+				</div>
+			{/snippet}
 			<AutoscalingConfigEditor
 				on:dirty={() => (dirty = true)}
 				worker_tags={config?.worker_tags}
@@ -703,7 +673,7 @@ let drawer;
 						>
 					{/if}
 					<Editor
-						disabled={!$superadmin}
+						disabled={!($superadmin || $devopsRole)}
 						class="flex flex-1 grow h-full w-full"
 						automaticLayout
 						scriptLang={'bash'}
@@ -726,7 +696,7 @@ let drawer;
 				</div>
 			</div>
 		</Section>
-		<svelte:fragment slot="actions">
+		{#snippet actions()}
 			<div class="flex gap-4 items-center">
 				<div class="flex gap-2 items-center">
 					{#if dirty}
@@ -782,13 +752,13 @@ let drawer;
 						}}
 						disabled={(!dirty && nconfig?.dedicated_worker == undefined) ||
 							!$enterpriseLicense ||
-							!$superadmin}
+							!($superadmin || $devopsRole)}
 					>
 						Apply changes
 					</Button>
 				</div>
 			</div>
-		</svelte:fragment>
+		{/snippet}
 	</DrawerContent>
 </Drawer>
 
@@ -808,7 +778,7 @@ let drawer;
 				on:click={() => {
 					dirty = false
 					loadNConfig()
-					drawer.openDrawer()
+					drawer?.openDrawer()
 				}}
 				startIcon={{ icon: config == undefined ? Plus : Settings }}
 			>
@@ -871,7 +841,7 @@ let drawer;
 				size="xs"
 				on:click={() => {
 					loadNConfig()
-					drawer.openDrawer()
+					drawer?.openDrawer()
 				}}
 			>
 				<div class="flex flex-row gap-1 items-center"> config </div>

package/package/components/WorkerGroup.svelte.d.ts

@@ -1,19 +1,6 @@
 import { type WorkerPing } from '../gen';
 import { type AutoscalingConfig } from './worker_group';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const WorkerGroup: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     name: string;
     config: undefined | {
         dedicated_worker?: string;
@@ -30,10 +17,24 @@ declare const WorkerGroup: $$__sveltets_2_IsomorphicComponent<{
     customTags: string[] | undefined;
     workers: [string, WorkerPing[]][];
     defaultTagPerWorkspace?: boolean | undefined;
-}, {
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const WorkerGroup: $$__sveltets_2_IsomorphicComponent<Props, {
     reload: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "config">;
 type WorkerGroup = InstanceType<typeof WorkerGroup>;
 export default WorkerGroup;

package/package/components/WorkerHostname.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { WorkerService } from '../gen';
+import { ExternalLink, Loader2 } from 'lucide-svelte';
+let { worker, minTs } = $props();
+let instances = $state(undefined);
+async function loadWorkers() {
+    const res = await WorkerService.listWorkers({});
+    instances = res.reduce((acc, worker) => {
+        acc[worker.worker] = { hostname: worker.worker_instance, worker_group: worker.worker_group };
+        return acc;
+    }, {});
+}
+loadWorkers();
+</script>
+
+{#if instances == undefined}
+	<Loader2 />
+{:else if instances[worker]}
+	host: {instances[worker].hostname}
+	<br />
+	worker group: {instances[worker].worker_group}
+	<br />
+	<a
+		href="/service_logs?mode=worker&workerGroup={instances[worker]
+			.worker_group}&hostname={instances[worker].hostname}{minTs
+			? `&minTs=${encodeURIComponent(minTs)}`
+			: ''}"
+		target="_blank"
+	>
+		service logs <ExternalLink size={14} class="inline-block" />
+	</a>
+{/if}

package/package/components/WorkerHostname.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    worker: string;
+    minTs?: string;
+};
+declare const WorkerHostname: import("svelte").Component<Props, {}, "">;
+type WorkerHostname = ReturnType<typeof WorkerHostname>;
+export default WorkerHostname;