windmill-components 1.537.1 → 1.542.4

package/package/components/runs/RunsFilter.svelte.d.ts

@@ -21,6 +21,8 @@ interface Props {
     folders?: string[];
     allWorkspaces?: boolean;
     filterBy?: 'path' | 'user' | 'folder' | 'label' | 'concurrencyKey' | 'worker' | 'tag' | 'schedulePath';
+    small?: boolean;
+    calendarSmall?: boolean;
 }
 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> & {

package/package/components/runs/RunsQueue.svelte

@@ -1,32 +1,103 @@
-
-
-<script lang="ts">import { createEventDispatcher } from 'svelte';
-import { Button } from '../common';
-import { FilterX, ListFilter } from 'lucide-svelte';
-import Tooltip from '../Tooltip.svelte';
-export let queue_count = undefined;
-export let suspended_count = undefined;
-export let success;
-const dispatch = createEventDispatcher();
+<script lang="ts">import { Button } from '../common';
+import { Bot, Hourglass, ListFilterPlus, X } from 'lucide-svelte';
+import RunOption from './RunOption.svelte';
+import { Popover } from '../meltComponents';
+let { queue_count = undefined, suspended_count = undefined, success, small = false, onJobsWaiting, onJobsSuspended } = $props();
 </script>
 
-<div class="flex gap-1 relative max-w-36 min-w-[50px] items-baseline">
-	<div class="text-xs absolute -top-4 truncate flex items-baseline gap-1">Waiting for workers <Tooltip small>Jobs waiting for a worker being available to be executed</Tooltip></div>
-	<div class="mt-1">{queue_count ? ($queue_count ?? 0).toFixed(0) : '...'}</div>
-	<div class="truncate text-2xs  !text-secondary mt-0.5">
-		{#if queue_count && ($queue_count ?? 0) > 0}
-				<Button size="xs2" color="light" on:click={() => dispatch('jobs_waiting')}>{#if success == 'waiting'}<FilterX size={12}></FilterX>{:else}<ListFilter size={12}></ListFilter>{/if}</Button>
-		{/if}
+<div class="flex flex-row gap-4 items-center">
+	{#if small}
+		<Popover contentClasses="p-4" openOnHover debounceDelay={100}>
+			{#snippet trigger()}
+				<div class="relative">
+					<Bot size={16} />
+					{#if queue_count && ($queue_count ?? 0) > 0}
+						<div
+							class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 bg-yellow-500 rounded-full text-white text-xs h-4 min-w-4"
+						>
+							{queue_count ? ($queue_count ?? 0).toFixed(0) : '...'}
+						</div>
+					{/if}
+				</div>
+			{/snippet}
 
-	</div>
+			{#snippet content()}
+				{@render queuedContent()}
+			{/snippet}
+		</Popover>
+	{:else}
+		{@render queuedContent()}
+	{/if}
+
+	{#if small}
+		<Popover contentClasses="p-4" openOnHover debounceDelay={100}>
+			{#snippet trigger()}
+				<div class="relative">
+					<Hourglass size={16} />
+					<div
+						class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 bg-surface-secondary-inverse rounded-full text-primary-inverse text-xs h-4 min-w-4"
+					>
+						{suspended_count ? ($suspended_count ?? 0).toFixed(0) : '...'}
+					</div>
+				</div>
+			{/snippet}
+			{#snippet content()}
+				{@render suspendedContent()}
+			{/snippet}
+		</Popover>
+	{:else}
+		{@render suspendedContent()}
+	{/if}
 </div>
 
-{#if suspended_count && ($suspended_count ?? 0) > 0}
-	<div class="flex gap-1 relative max-w-36 min-w-[50px] items-baseline ml-20 mr-8">
-		<div class="text-xs absolute -top-4 truncate flex items-baseline gap-1">Suspended <Tooltip small>Jobs waiting for an event or approval before being resumed</Tooltip></div>
-		<div class="mt-1">{suspended_count ? ($suspended_count ?? 0).toFixed(0) : '...'}</div>
+{#snippet queuedContent()}
+	<RunOption label="Waiting for workers">
+		{#snippet tooltip()}
+			Jobs waiting for a worker being available to be executed
+		{/snippet}
+		<div
+			class={queue_count && ($queue_count ?? 0) > 0
+				? 'bg-yellow-500 text-white rounded-full w-6 h-6 flex center-center'
+				: ''}>{queue_count ? ($queue_count ?? 0).toFixed(0) : '...'}</div
+		>
 		<div class="truncate text-2xs !text-secondary mt-0.5">
-					<Button size="xs2" color="light" on:click={() => dispatch('jobs_suspended')}>{#if success == 'waiting'}<FilterX size={12}></FilterX>{:else}<ListFilter size={12}></ListFilter>{/if}</Button>
+			<Button size="xs2" color="light" on:click={() => onJobsWaiting?.()}>
+				{#if success == 'waiting'}
+					<div class="flex flex-row items-center gap-1">
+						Reset filter
+						<X size={12} />
+					</div>
+				{:else}
+					<ListFilterPlus size={14} />
+				{/if}
+			</Button>
 		</div>
-	</div>
-{/if}
+	</RunOption>
+{/snippet}
+
+{#snippet suspendedContent()}
+	{#if suspended_count && ($suspended_count ?? 0) > 0}
+		<RunOption label="Suspended">
+			{#snippet tooltip()}
+				Jobs waiting for an event or approval before being resumed
+			{/snippet}
+			<div
+				class={suspended_count && ($suspended_count ?? 0) > 0
+					? 'bg-surface-secondary-inverse text-primary-inverse rounded-full w-6 h-6 flex center-center'
+					: ''}>{suspended_count ? ($suspended_count ?? 0).toFixed(0) : '...'}</div
+			>
+			<div class="truncate text-2xs !text-secondary">
+				<Button size="xs2" color="light" on:click={() => onJobsSuspended?.()}>
+					{#if success == 'suspended'}
+						<div class="flex flex-row items-center gap-1">
+							Reset filter
+							<X size={12} />
+						</div>
+					{:else}
+						<ListFilterPlus size={14} />
+					{/if}
+				</Button>
+			</div>
+		</RunOption>
+	{/if}
+{/snippet}

package/package/components/runs/RunsQueue.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { Tweened } from 'svelte/motion';
-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 RunsQueue: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     queue_count?: Tweened<number> | undefined;
     suspended_count?: Tweened<number> | undefined;
     success: string | undefined;
-}, {
-    jobs_waiting: CustomEvent<any>;
-    jobs_suspended: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RunsQueue = InstanceType<typeof RunsQueue>;
+    small?: boolean;
+    onJobsWaiting?: () => void;
+    onJobsSuspended?: () => void;
+}
+declare const RunsQueue: import("svelte").Component<Props, {}, "">;
+type RunsQueue = ReturnType<typeof RunsQueue>;
 export default RunsQueue;

package/package/components/runs/RunsTable.svelte

@@ -1,14 +1,11 @@
-<script lang="ts">import { createBubbler } from 'svelte/legacy';
-const bubble = createBubbler();
-import RunRow from './RunRow.svelte';
+<script lang="ts">import RunRow from './RunRow.svelte';
 import VirtualList from '@tutorlatin/svelte-tiny-virtual-list';
 import { createEventDispatcher, onMount } from 'svelte';
 import Tooltip from '../Tooltip.svelte';
 import { AlertTriangle } from 'lucide-svelte';
 import Popover from '../Popover.svelte';
 import { workspaceStore } from '../../stores';
-import { twMerge } from 'tailwind-merge';
-import { isJobSelectable } from '../../utils';
+import './runs-grid.css';
 let { jobs = undefined, externalJobs = [], omittedObscuredJobs, showExternalJobs = false, selectionMode = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = $bindable(false) } = $props();
 function getTime(job) {
     return job['started_at'] ?? job['scheduled_for'] ?? job['created_at'];
@@ -81,26 +78,6 @@ function infiniteHandler({ detail: { loaded, error, complete } }) {
     }
 }
 */
-let selectableJobCount = $derived.by(() => {
-    if (!selectionMode)
-        return 0;
-    return jobs?.filter(isJobSelectable(selectionMode)).length ?? 0;
-});
-let allSelected = $derived.by(() => {
-    return selectionMode && selectedIds.length === selectableJobCount;
-});
-function selectAll() {
-    if (!selectionMode)
-        return;
-    if (allSelected) {
-        allSelected = false;
-        selectedIds = [];
-    }
-    else {
-        allSelected = true;
-        selectedIds = jobs?.filter(isJobSelectable(selectionMode)).map((j) => j.id) ?? [];
-    }
-}
 function jobCountString(jobCount, lastFetchWentToEnd) {
     if (jobCount === undefined) {
         return '';
@@ -148,64 +125,66 @@ let stickyIndices = $derived.by(() => {
     }
     return nstickyIndices;
 });
+const showTag = $derived(containerWidth > 700);
 </script>
 
 <svelte:window onresize={() => computeHeight()} />
 
 <div
-	class="divide-y min-w-[640px] h-full"
+	class="divide-y h-full border min-w-[650px]"
 	id="runs-table-wrapper"
 	bind:clientWidth={containerWidth}
 >
 	<div bind:clientHeight={headerHeight}>
-		{#if selectionMode && selectableJobCount}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class={twMerge(
-					'hover:bg-surface-hover bg-surface-primary cursor-pointer',
-					allSelected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
-					'flex flex-row items-center sticky w-full p-2 pr-4 top-0 font-semibold border-t text-sm'
-				)}
-				onclick={selectAll}
-			>
-				<div class="px-2">
-					<input onfocus={bubble('focus')} type="checkbox" checked={allSelected} />
-				</div>
-				Select all
-			</div>
-		{/if}
-		<div class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4">
-			{#if showExternalJobs && externalJobs.length > 0}
-				<div class="w-1/12 text-2xs">
+		<div
+			class="grid bg-surface-secondary sticky top-0 w-full py-2 pr-4"
+			class:grid-runs-table={!containsLabel && !selectionMode && showTag}
+			class:grid-runs-table-with-labels={containsLabel && !selectionMode && showTag}
+			class:grid-runs-table-selection={!containsLabel && selectionMode && showTag}
+			class:grid-runs-table-with-labels-selection={containsLabel && selectionMode && showTag}
+			class:grid-runs-table-no-tag={!containsLabel && !selectionMode && !showTag}
+			class:grid-runs-table-with-labels-no-tag={containsLabel && !selectionMode && !showTag}
+			class:grid-runs-table-selection-no-tag={!containsLabel && selectionMode && !showTag}
+			class:grid-runs-table-with-labels-selection-no-tag={containsLabel &&
+				selectionMode &&
+				!showTag}
+		>
+			{#if selectionMode}
+				<div class="text-xs font-semibold pl-4"></div>
+			{/if}
+			<div class="text-2xs px-2 flex flex-row items-center gap-2">
+				{#if showExternalJobs && externalJobs.length > 0}
 					<div class="flex flex-row">
 						{jobs
 							? jobCountString(jobs.length + externalJobs.length, lastFetchWentToEnd)
 							: ''}<Tooltip>{externalJobs.length} jobs obscured</Tooltip>
 					</div>
-				</div>
-			{:else if $workspaceStore !== 'admins' && omittedObscuredJobs}
-				<div class="w-1/12 text-2xs flex flex-row">
+				{:else if $workspaceStore !== 'admins' && omittedObscuredJobs}
+					<div class="flex flex-row">
+						{jobs ? jobCountString(jobs.length, lastFetchWentToEnd) : ''}
+						<Popover>
+							<AlertTriangle size={16} class="ml-0.5 text-yellow-500" />
+							{#snippet text()}
+								Too specific filtering may have caused the omission of obscured jobs. This is done
+								for security reasons. To see obscured jobs, try removing some filters.
+							{/snippet}
+						</Popover>
+					</div>
+				{:else}
 					{jobs ? jobCountString(jobs.length, lastFetchWentToEnd) : ''}
-					<Popover>
-						<AlertTriangle size={16} class="ml-0.5 text-yellow-500" />
-						{#snippet text()}
-							Too specific filtering may have caused the omission of obscured jobs. This is done for
-							security reasons. To see obscured jobs, try removing some filters.
-						{/snippet}
-					</Popover>
-				</div>
-			{:else}
-				<div class="w-1/12 text-2xs"
-					>{jobs ? jobCountString(jobs.length, lastFetchWentToEnd) : ''}</div
-				>
-			{/if}
-			<div class="w-4/12 text-xs font-semibold"></div>
-			<div class="w-4/12 text-xs font-semibold">Path</div>
+				{/if}
+			</div>
+			<div class="text-xs font-semibold">Started</div>
+			<div class="text-xs font-semibold">Duration</div>
+			<div class="text-xs font-semibold">Path</div>
 			{#if containsLabel}
-				<div class="w-3/12 text-xs font-semibold">Label</div>
+				<div class="text-xs font-semibold">Label</div>
+			{/if}
+			<div class="text-xs font-semibold">Triggered by</div>
+			{#if showTag}
+				<div class="text-xs font-semibold">Tag</div>
 			{/if}
-			<div class="w-3/12 text-xs font-semibold">Triggered by</div>
+			<div class=""></div>
 		</div>
 	</div>
 	{#if jobs?.length == 0 && (!showExternalJobs || externalJobs?.length == 0)}
@@ -222,20 +201,23 @@ let stickyIndices = $derived.by(() => {
 			scrollToAlignment="center"
 		>
 			{#snippet header()}{/snippet}
-			{#snippet children({ index, style })}
+			{#snippet item({ index, style })}
 				<div {style} class="w-full">
 					{#if flatJobs}
 						{@const jobOrDate = flatJobs[index]}
 
 						{#if jobOrDate}
 							{#if jobOrDate?.type === 'date'}
-								<div class="bg-surface-secondary py-2 border-b font-semibold text-xs pl-5">
+								<div
+									class="bg-surface-secondary py-2 border-b font-semibold text-xs pl-2 h-[42px] flex items-center"
+								>
 									{jobOrDate.date}
 								</div>
 							{:else}
 								<div class="flex flex-row items-center h-full w-full">
 									<RunRow
 										{containsLabel}
+										{showTag}
 										job={jobOrDate.job}
 										selected={jobOrDate.job.id !== '-' && selectedIds.includes(jobOrDate.job.id)}
 										{selectionMode}
@@ -249,9 +231,18 @@ let stickyIndices = $derived.by(() => {
 													selectedIds = selectedIds
 												}
 											} else {
-												selectedWorkspace = jobOrDate.job.workspace_id
-												selectedIds = [jobOrDate.job.id]
-												dispatch('select')
+												if (
+													JSON.stringify(selectedIds) !== JSON.stringify([jobOrDate.job.id]) ||
+													selectedWorkspace !== jobOrDate.job.workspace_id
+												) {
+													selectedWorkspace = jobOrDate.job.workspace_id
+													selectedIds = [jobOrDate.job.id]
+													dispatch('select')
+												} else {
+													selectedIds = []
+													selectedWorkspace = undefined
+													dispatch('select')
+												}
 											}
 										}}
 										{activeLabel}

package/package/components/runs/RunsTable.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Job } from '../../gen';
 import type { RunsSelectionMode } from './RunsBatchActionsDropdown.svelte';
+import './runs-grid.css';
 interface Props {
     jobs?: Job[] | undefined;
     externalJobs?: Job[];
@@ -38,6 +39,6 @@ declare const RunsTable: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     scrollToRun: (ids: string[]) => void;
-}, "selectedIds" | "selectedWorkspace" | "lastFetchWentToEnd">;
+}, "selectedIds" | "lastFetchWentToEnd" | "selectedWorkspace">;
 type RunsTable = InstanceType<typeof RunsTable>;
 export default RunsTable;

package/package/components/runs/runs-grid.css

@@ -0,0 +1,95 @@
+/* Shared CSS Grid Styles for RunsTable and RunRow components */
+
+/* Grid layouts with tag column */
+.grid-runs-table {
+	grid-template-columns:
+		60px /* Status (fixed width) */
+		minmax(100px, 0.8fr) /* Started time (~10%) */
+		minmax(60px, 0.5fr) /* Duration (~7%) */
+		minmax(200px, 2.3fr) /* Path (~33% reduced for wider tag) */
+		minmax(150px, 1.8fr) /* Triggered by (~28% reduced for wider tag) */
+		minmax(70px, 0.5fr) /* Tag (~7% wider) */
+		minmax(40px, 0.3fr); /* Actions (~5%) */
+}
+
+.grid-runs-table-with-labels {
+	grid-template-columns:
+		60px /* Status (fixed width) */
+		minmax(100px, 0.8fr) /* Started time (~10%) */
+		minmax(60px, 0.5fr) /* Duration (~7%) */
+		minmax(150px, 1.6fr) /* Path (~25% reduced for labels and wider tag) */
+		minmax(120px, 1.3fr) /* Labels (~22% reduced for wider tag) */
+		minmax(110px, 1.3fr) /* Triggered by (~22% reduced for wider tag) */
+		minmax(70px, 0.5fr) /* Tag (~7% wider) */
+		minmax(40px, 0.3fr); /* Actions (~5%) */
+}
+
+.grid-runs-table-selection {
+	grid-template-columns:
+		50px /* Selection checkbox (fixed width) */
+		80px /* Status (fixed width) */
+		minmax(100px, 0.8fr) /* Started time (~10%) */
+		minmax(60px, 0.5fr) /* Duration (~7%) */
+		minmax(200px, 2.3fr) /* Path (~33% reduced for wider tag) */
+		minmax(150px, 1.8fr) /* Triggered by (~28% reduced for wider tag) */
+		minmax(70px, 0.5fr) /* Tag (~7% wider) */
+		minmax(40px, 0.3fr); /* Actions (~5%) */
+}
+
+.grid-runs-table-with-labels-selection {
+	grid-template-columns:
+		50px /* Selection checkbox (fixed width) */
+		80px /* Status (fixed width) */
+		minmax(100px, 0.8fr) /* Started time (~10%) */
+		minmax(60px, 0.5fr) /* Duration (~7%) */
+		minmax(150px, 1.6fr) /* Path (~25% reduced for labels and wider tag) */
+		minmax(120px, 1.3fr) /* Labels (~22% reduced for wider tag) */
+		minmax(110px, 1.3fr) /* Triggered by (~22% reduced for wider tag) */
+		minmax(70px, 0.5fr) /* Tag (~7% wider) */
+		minmax(40px, 0.3fr); /* Actions (~5%) */
+}
+
+/* Grid layouts without tag column */
+.grid-runs-table-no-tag {
+	grid-template-columns:
+		60px /* Status (fixed width) */
+		minmax(100px, 0.8fr) /* Started time (~10%) */
+		minmax(60px, 0.5fr) /* Duration (~7%) */
+		minmax(200px, 2.8fr) /* Path (~38% expanded without tag) */
+		minmax(150px, 2.2fr) /* Triggered by (~33% expanded without tag) */
+		minmax(40px, 0.3fr); /* Actions (~5%) */
+}
+
+.grid-runs-table-with-labels-no-tag {
+	grid-template-columns:
+		60px /* Status (fixed width) */
+		minmax(100px, 0.8fr) /* Started time (~10%) */
+		minmax(60px, 0.5fr) /* Duration (~7%) */
+		minmax(150px, 1.8fr) /* Path (~30% expanded without tag) */
+		minmax(120px, 1.8fr) /* Labels (~30% expanded without tag) */
+		minmax(110px, 1.8fr) /* Triggered by (~30% expanded without tag) */
+		minmax(40px, 0.3fr); /* Actions (~5%) */
+}
+
+.grid-runs-table-selection-no-tag {
+	grid-template-columns:
+		40px /* Selection checkbox (fixed width) */
+		60px /* Status (fixed width) */
+		minmax(100px, 0.8fr) /* Started time (~10%) */
+		minmax(60px, 0.5fr) /* Duration (~7%) */
+		minmax(200px, 2.8fr) /* Path (~38% expanded without tag) */
+		minmax(150px, 2.2fr) /* Triggered by (~33% expanded without tag) */
+		minmax(40px, 0.3fr); /* Actions (~5%) */
+}
+
+.grid-runs-table-with-labels-selection-no-tag {
+	grid-template-columns:
+		50px /* Selection checkbox (fixed width) */
+		60px /* Status (fixed width) */
+		minmax(100px, 0.8fr) /* Started time (~10%) */
+		minmax(60px, 0.5fr) /* Duration (~7%) */
+		minmax(150px, 1.8fr) /* Path (~30% expanded without tag) */
+		minmax(120px, 1.8fr) /* Labels (~30% expanded without tag) */
+		minmax(110px, 1.8fr) /* Triggered by (~30% expanded without tag) */
+		minmax(40px, 0.3fr); /* Actions (~5%) */
+}

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -50,7 +50,18 @@ let items = $derived([
 const rnd = generateRandomString();
 </script>
 
-<div class="flex flex-col items-end mb-2 w-full">
+<div class="flex flex-wrap justify-between mb-2 w-full items-center gap-y-2">
+	<AddProperty
+		on:change={() => {
+			if (jsonView) {
+				schemaString = JSON.stringify(schema, null, '\t')
+				editor?.setCode(schemaString)
+			}
+		}}
+		bind:schema
+		bind:this={addPropertyComponent}
+	/>
+
 	<Toggle
 		bind:checked={jsonView}
 		label="JSON View"
@@ -68,17 +79,6 @@ const rnd = generateRandomString();
 	/>
 </div>
 
-<AddProperty
-	on:change={() => {
-		if (jsonView) {
-			schemaString = JSON.stringify(schema, null, '\t')
-			editor?.setCode(schemaString)
-		}
-	}}
-	bind:schema
-	bind:this={addPropertyComponent}
-/>
-
 {#if !jsonView}
 	{#key rnd}
 		<div