windmill-components 1.383.8 → 1.389.1

package/package/components/WorkspaceGroup.svelte

@@ -7,7 +7,7 @@ import { ConfigService, WorkspaceService } from '../gen';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../toast';
-import { emptyString } from '../utils';
+import { emptyString, pluralize } from '../utils';
 import { enterpriseLicense, superadmin } from '../stores';
 import Tooltip from './Tooltip.svelte';
 import Editor from './Editor.svelte';
@@ -16,10 +16,28 @@ 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';
 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
@@ -65,7 +83,8 @@ const defaultTags = [
     'flow',
     'other',
     'bun',
-    'php'
+    'php',
+    'rust'
 ];
 const nativeTags = [
     'nativets',
@@ -409,6 +428,42 @@ let createdTags = [];
 					{/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 ?? false}
+						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
@@ -733,6 +788,13 @@ let createdTags = [];
 						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
+							}
 							customEnvVars.forEach((envvar) => {
 								if (
 									nconfig.env_vars_static !== undefined &&
@@ -764,81 +826,90 @@ let createdTags = [];
 	</DrawerContent>
 </Drawer>
 
-<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>
+<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>
+			<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}
 
-		{#if config}
 			<Button
 				color="light"
 				size="xs"
 				on:click={() => {
-					if (!$enterpriseLicense) {
-						sendUserToast('Worker Management UI is an EE feature', true)
-					} else {
-						openDelete = true
-					}
+					loadNConfig()
+
+					openClean = true
 				}}
-				startIcon={{ icon: Trash }}
 				btnClasses="text-red-400"
+				startIcon={{ icon: RefreshCcwIcon }}
 			>
-				Delete config
+				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}
-
-		<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>

package/package/components/WorkspaceGroup.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import { type WorkerPing } from '../gen';
 declare const __propDef: {
     props: {
         name: string;
@@ -10,9 +11,11 @@ declare const __propDef: {
             init_bash?: string;
             additional_python_paths?: string[];
             pip_local_dependencies?: string[];
+            min_alive_workers_alert_threshold?: number;
         };
         activeWorkers: number;
         customTags: string[] | undefined;
+        workers: [string, WorkerPing[]][];
         defaultTagPerWorkspace?: boolean | undefined;
     };
     events: {

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -27,7 +27,7 @@ export let allowColumnDefsActions = true;
 let inputs = {};
 const context = getContext('AppViewerContext');
 const contextPanel = getContext('ContextPanel');
-const { app, selectedComponent, componentControl, darkMode } = context;
+const { app, selectedComponent, componentControl, darkMode, mode } = context;
 let css = initCss($app.css?.aggridcomponent, customCss);
 let selectedRowIndex = -1;
 function toggleRow(row) {
@@ -382,7 +382,24 @@ function updateOptions() {
 			class="ag-theme-alpine"
 			class:ag-theme-alpine-dark={$darkMode}
 		>
-			<div bind:this={eGui} style:height="100%" />
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				bind:this={eGui}
+				style:height="100%"
+				on:keydown={(e) => {
+					if ((e.ctrlKey || e.metaKey) && e.key === 'c' && $mode !== 'dnd') {
+						const selectedCell = api?.getFocusedCell()
+						if (selectedCell) {
+							const rowIndex = selectedCell.rowIndex
+							const colId = selectedCell.column?.getId()
+							const rowNode = api?.getDisplayedRowAtIndex(rowIndex)
+							const selectedValue = rowNode?.data?.[colId]
+							navigator.clipboard.writeText(selectedValue)
+							sendUserToast('Copied cell value to clipboard', false)
+						}
+					}
+				}}
+			/>
 		</div>
 		{#if resolvedConfig && 'footer' in resolvedConfig && resolvedConfig.footer}
 			<div class="flex gap-1 w-full justify-between items-center text-xs text-primary p-2">

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte

@@ -19,6 +19,7 @@ export let initializing = undefined;
 export let render;
 export let customCss = undefined;
 export let actions = undefined;
+export let actionsOrder = undefined;
 let runnableComponent = undefined;
 function clear() {
     setTimeout(() => {

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../../types';
 import { type TableAction } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
 import './theme/windmill-theme.css';
@@ -13,6 +13,7 @@ declare const __propDef: {
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridinfinitecomponent'> | undefined;
         actions?: TableAction[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte

@@ -13,6 +13,7 @@ export let initializing = undefined;
 export let render;
 export let customCss = undefined;
 export let actions = [];
+export let actionsOrder = undefined;
 let loaded = false;
 async function load() {
     await import('ag-grid-enterprise');
@@ -32,6 +33,7 @@ load();
 		{render}
 		{customCss}
 		{actions}
+		{actionsOrder}
 	/>
 {:else}
 	<Loader2 class="animate-spin" />

package/package/components/apps/components/display/table/AppAggridInfiniteTableEe.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../../types';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import type { TableAction } from '../../../editor/component';
@@ -14,6 +14,7 @@ declare const __propDef: {
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridinfinitecomponentee'> | undefined;
         actions?: TableAction[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/display/table/AppAggridTable.svelte

@@ -18,6 +18,7 @@ import AppAggridTableActions from './AppAggridTableActions.svelte';
 import { cellRendererFactory, defaultCellRenderer } from './utils';
 import Popover from '../../../../Popover.svelte';
 import { Button } from '../../../../common';
+import InputValue from '../../helpers/InputValue.svelte';
 // import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 export let id;
 export let componentInput;
@@ -26,11 +27,12 @@ export let initializing = undefined;
 export let render;
 export let customCss = undefined;
 export let actions = undefined;
+export let actionsOrder = undefined;
 const context = getContext('AppViewerContext');
 const contextPanel = getContext('ContextPanel');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-const { app, worldStore, selectedComponent, componentControl, darkMode } = context;
+const { app, worldStore, selectedComponent, componentControl, darkMode, mode } = context;
 const rowHeights = {
     normal: 40,
     compact: 30,
@@ -139,6 +141,19 @@ function refreshActions(actions) {
 }
 let lastActions = undefined;
 $: actions && refreshActions(actions);
+let lastActionsOrder = undefined;
+$: computedOrder && refreshActionsOrder(computedOrder);
+function clearActionOrder() {
+    computedOrder = undefined;
+    updateOptions();
+}
+$: computedOrder && computedOrder.length > 0 && actionsOrder === undefined && clearActionOrder();
+function refreshActionsOrder(actionsOrder) {
+    if (Array.isArray(actionsOrder) && !deepEqual(actionsOrder, lastActionsOrder)) {
+        lastActionsOrder = [...actionsOrder];
+        updateOptions();
+    }
+}
 let inputs = {};
 const tableActionsFactory = cellRendererFactory((c, p) => {
     const rowIndex = p.node.rowIndex ?? 0;
@@ -147,12 +162,17 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
         ['AppViewerContext', context],
         ['ContextPanel', contextPanel]
     ]);
+    const sortedActions = computedOrder
+        ? computedOrder
+            .map((key) => actions?.find((a) => a.id === key))
+            .filter(Boolean)
+        : actions;
     let ta = new AppAggridTableActions({
         target: c.eGui,
         props: {
             p,
             id: id,
-            actions,
+            actions: sortedActions,
             rowIndex,
             row,
             render,
@@ -381,8 +401,13 @@ function updateOptions() {
 let loading = false;
 let refreshCount = 0;
 let footerRenderCount = 0;
+let computedOrder = undefined;
 </script>
 
+{#if actionsOrder}
+	<InputValue key="actionsOrder" {id} input={actionsOrder} bind:value={computedOrder} />
+{/if}
+
 {#each Object.keys(components['aggridcomponent'].initialData.configuration) as key (key)}
 	<ResolveConfig
 		{id}
@@ -440,7 +465,24 @@ let footerRenderCount = 0;
 			>
 				{#key resolvedConfig?.pagination}
 					{#if loaded}
-						<div bind:this={eGui} style:height="100%" />
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div
+							bind:this={eGui}
+							style:height="100%"
+							on:keydown={(e) => {
+								if ((e.ctrlKey || e.metaKey) && e.key === 'c' && $mode !== 'dnd') {
+									const selectedCell = api?.getFocusedCell()
+									if (selectedCell) {
+										const rowIndex = selectedCell.rowIndex
+										const colId = selectedCell.column?.getId()
+										const rowNode = api?.getDisplayedRowAtIndex(rowIndex)
+										const selectedValue = rowNode?.data?.[colId]
+										navigator.clipboard.writeText(selectedValue)
+										sendUserToast('Copied cell value to clipboard', false)
+									}
+								}
+							}}
+						/>
 					{:else}
 						<Loader2 class="animate-spin" />
 					{/if}

package/package/components/apps/components/display/table/AppAggridTable.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../../types';
 import { type TableAction } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
 import './theme/windmill-theme.css';
@@ -13,6 +13,7 @@ declare const __propDef: {
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridcomponent'> | undefined;
         actions?: TableAction[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/display/table/AppAggridTableEe.svelte

@@ -13,6 +13,7 @@ export let initializing = undefined;
 export let render;
 export let customCss = undefined;
 export let actions = [];
+export let actionsOrder = undefined;
 let loaded = false;
 async function load() {
     await import('ag-grid-enterprise');
@@ -32,6 +33,7 @@ load();
 		{render}
 		{customCss}
 		{actions}
+		{actionsOrder}
 	/>
 {:else}
 	<Loader2 class="animate-spin" />

package/package/components/apps/components/display/table/AppAggridTableEe.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../../types';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import type { TableAction } from '../../../editor/component';
@@ -14,6 +14,7 @@ declare const __propDef: {
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridcomponent'> | undefined;
         actions?: TableAction[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;