windmill-components 1.309.7 → 1.352.0

package/package/components/runs/JobPreview.svelte

@@ -1,9 +1,9 @@
-<script>import {} from '../../gen';
+<script>import { ConcurrencyGroupsService } from '../../gen';
 import TestJobLoader from '../TestJobLoader.svelte';
 import DisplayResult from '../DisplayResult.svelte';
 import JobArgs from '../JobArgs.svelte';
 import LogViewer from '../LogViewer.svelte';
-import { Badge, Skeleton, Tab, Tabs } from '../common';
+import { Badge, Button, Skeleton, Tab, Tabs } from '../common';
 import HighlightCode from '../HighlightCode.svelte';
 import { forLater } from '../../forLater';
 import FlowProgressBar from '../flows/FlowProgressBar.svelte';
@@ -11,6 +11,10 @@ import FlowStatusViewer from '../FlowStatusViewer.svelte';
 import DurationMs from '../DurationMs.svelte';
 import { workspaceStore } from '../../stores';
 import WorkflowTimeline from '../WorkflowTimeline.svelte';
+import Popover from '../Popover.svelte';
+import { truncateRev } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import { ListFilter } from 'lucide-svelte';
 export let id;
 export let blankLink = false;
 export let workspace;
@@ -28,10 +32,18 @@ $: if (currentJob?.id == id) {
 }
 $: id && watchJob && watchJob(id);
 $: job?.logs == undefined && job && viewTab == 'logs' && getLogs?.();
+let lastJobId = undefined;
+let concurrencyKey = undefined;
+$: job?.id && lastJobId !== job.id && getConcurrencyKey(job);
+async function getConcurrencyKey(job) {
+    lastJobId = job.id;
+    concurrencyKey = await ConcurrencyGroupsService.getConcurrencyKey({ id: job.id });
+}
 let viewTab = 'result';
 function asWorkflowStatus(x) {
     return x;
 }
+const dispatch = createEventDispatcher();
 </script>
 
 <TestJobLoader
@@ -44,14 +56,18 @@ function asWorkflowStatus(x) {
 />
 <div class="p-4 flex flex-col gap-2 items-start h-full">
 	{#if job}
-		<div class="flex gap-2">
+		<div class="flex gap-2 flex-wrap">
 			{#if job?.['priority']}
 				<Badge color="red">
 					priority: {job?.['priority']}
 				</Badge>
 			{/if}
 			{#if job && 'duration_ms' in job && job.duration_ms != undefined}
-				<DurationMs duration_ms={job.duration_ms} />
+				<DurationMs
+					duration_ms={job.duration_ms}
+					self_wait_time_ms={job?.self_wait_time_ms}
+					aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
+				/>
 			{/if}
 			{#if job?.['mem_peak']}
 				<Badge large>
@@ -68,6 +84,30 @@ function asWorkflowStatus(x) {
 					Tag: {job.tag}
 				</Badge>
 			{/if}
+			{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
+				{#each job?.['labels'] as label}
+					<Badge baseClass="text-2xs">Label: {label}</Badge>
+				{/each}
+			{/if}
+			{#if concurrencyKey}
+				<Popover notClickable>
+					<svelte:fragment slot="text">
+						This jobs has concurrency limits enabled with the key:
+						<Button
+							class="inline-text"
+							size="xs2"
+							color="light"
+							on:click={() => {
+								dispatch('filterByConcurrencyKey', concurrencyKey)
+							}}
+						>
+							{concurrencyKey}
+							<ListFilter class="inline-block" size={10} />
+						</Button>
+					</svelte:fragment>
+					<Badge large>Concurrency: {truncateRev(concurrencyKey, 20)}</Badge>
+				</Popover>
+			{/if}
 		</div>
 		<a
 			href="/run/{job?.id}?workspace={job?.workspace_id}"

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

@@ -6,6 +6,8 @@ declare const __propDef: {
         workspace: string | undefined;
     };
     events: {
+        filterByConcurrencyKey: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/runs/RunRow.svelte

@@ -3,38 +3,57 @@ import { displayDate, msToSec, truncateHash, truncateRev } from '../../utils';
 import { Badge, Button } from '../common';
 import ScheduleEditor from '../ScheduleEditor.svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
-import { Bot, Calendar, Check, FastForward, Folder, Hourglass, ListFilter, Play, X } from 'lucide-svelte';
+import { Calendar, Check, FastForward, Folder, Hourglass, ListFilter, Play, ShieldQuestion, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import TimeAgo from '../TimeAgo.svelte';
 import { forLater } from '../../forLater';
 import { twMerge } from 'tailwind-merge';
 import Portal from 'svelte-portal';
+import WaitTimeWarning from '../common/waitTimeWarning/WaitTimeWarning.svelte';
 const dispatch = createEventDispatcher();
 export let job;
-export let selectedId = undefined;
+export let selected = false;
 export let containerWidth = 0;
+export let containsLabel = false;
+export let activeLabel;
+export let isSelectingJobsToCancel = false;
 let scheduleEditor;
+$: isExternal = job && job.id === '-';
+let triggeredByWidth = 0;
+function isJobCancelable(j) {
+    return j.type === 'QueuedJob' && !j.schedule_path;
+}
 </script>
 
 <Portal>
 	<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
 </Portal>
-
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={twMerge(
 		'hover:bg-surface-hover cursor-pointer',
-		selectedId === job.id ? 'bg-blue-50 dark:bg-blue-900/50' : '',
+		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
 		'flex flex-row items-center h-full'
 	)}
 	style="width: {containerWidth}px"
 	on:click={() => {
-		dispatch('select')
+		if (!isSelectingJobsToCancel || isJobCancelable(job)) {
+			dispatch('select')
+		}
 	}}
 >
 	<div class="w-1/12 flex justify-center">
-		{#if 'success' in job && job.success}
+		{#if isSelectingJobsToCancel && isJobCancelable(job)}
+		<div class="px-2">
+			<input type="checkbox" checked={selected}/>
+		</div>
+		{/if}
+		{#if isExternal}
+			<Badge color="gray" baseClass="!px-1.5">
+				<ShieldQuestion size={14} />
+			</Badge>
+		{:else if 'success' in job && job.success}
 			{#if job.is_skipped}
 				<Badge color="green" rounded>
 					<FastForward size={14} />
@@ -73,6 +92,13 @@ let scheduleEditor;
 							job.duration_ms
 						)}s{#if job.job_kind == 'flow' || job.job_kind == 'flowpreview'}&nbsp;total{/if})
 					{/if}
+					{#if job && (job.self_wait_time_ms || job.aggregate_wait_time_ms)}
+						<WaitTimeWarning
+							self_wait_time_ms={job.self_wait_time_ms}
+							aggregate_wait_time_ms={job.aggregate_wait_time_ms}
+							variant="icon"
+						/>
+					{/if}
 				{:else if `scheduled_for` in job && job.scheduled_for && forLater(job.scheduled_for)}
 					Scheduled for {displayDate(job.scheduled_for)}
 				{:else}
@@ -91,18 +117,25 @@ let scheduleEditor;
 					<div class="whitespace-nowrap text-xs font-semibold truncate">
 						{#if job.script_path}
 							<div class="flex flex-row gap-1 items-center">
-								<a href="/run/{job.id}?workspace={job.workspace_id}" class="truncate w-30">
-									{job.script_path}
-								</a>
-								<Button
-									size="xs2"
-									color="light"
-									on:click={() => {
-										dispatch('filterByPath', job.script_path)
-									}}
-								>
-									<ListFilter size={10} />
-								</Button>
+								{#if isExternal}
+									<span class="w-30 justify-center">-</span>
+								{:else}
+									<a
+										href="/run/{job.id}?workspace={job.workspace_id}"
+										class="truncate w-30 dark:text-blue-400"
+									>
+										{job.script_path}
+									</a>
+									<Button
+										size="xs2"
+										color="light"
+										on:click={() => {
+											dispatch('filterByPath', job.script_path)
+										}}
+									>
+										<ListFilter size={10} />
+									</Button>
+								{/if}
 								{#if job.script_path?.startsWith('f/')}
 									<Button
 										size="xs2"
@@ -144,17 +177,43 @@ let scheduleEditor;
 				</div>
 			{:else}
 				<div class="flex flex-row gap-1 items-center">
-					<Bot size={12} class="text-secondary" />
-					<span class="mx-1 text-xs">
-						Parent <a href={`/run/${job.parent_job}?workspace=${job.workspace_id}`}>
-							{job.parent_job}
+					<span class="text-2xs text-tertiary truncate">
+						parent <a href={`/run/${job.parent_job}?workspace=${job.workspace_id}`}>
+							{truncateRev(job.parent_job, 10)}
 						</a>
 					</span>
 				</div>
 			{/if}
 		{/if}
 	</div>
-	<div class="w-3/12 flex justify-start">
+	{#if containsLabel}
+		<div class="w-3/12 flex justify-start">
+			{#if job && job?.['labels']}
+				<div class="flex flex-row items-center gap-1 overflow-x-auto">
+					{#if Array.isArray(job?.['labels'])}
+						{#each job?.['labels'] as label}
+							<Button
+								variant="border"
+								size="xs2"
+								btnClasses={twMerge(
+									activeLabel == label ? 'bg-blue-50 dark:bg-blue-900/50' : '',
+									'!text-2xs !font-normal truncate max-w-28'
+								)}
+								color="light"
+								on:click={() => {
+									dispatch('filterByLabel', label)
+								}}
+							>
+								{label}
+								<ListFilter size={10} />
+							</Button>
+						{/each}
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+	<div class="w-3/12 flex justify-start" bind:clientWidth={triggeredByWidth}>
 		{#if job && job.schedule_path}
 			<div class="flex flex-row items-center gap-1">
 				<Calendar size={14} />
@@ -164,7 +223,12 @@ let scheduleEditor;
 					btnClasses="font-normal"
 					on:click={() => scheduleEditor?.openEdit(job.schedule_path ?? '', job.job_kind == 'flow')}
 				>
-					{job.schedule_path}
+					<div
+						class="truncate text-ellipsis text-left"
+						style="max-width: {triggeredByWidth - 48}px"
+					>
+						{job.schedule_path}
+					</div>
 				</Button>
 			</div>
 		{:else}
@@ -172,15 +236,17 @@ let scheduleEditor;
 				<div class="text-xs">
 					{job.created_by}
 				</div>
-				<Button
-					size="xs2"
-					color="light"
-					on:click={() => {
-						dispatch('filterByUser', job.created_by)
-					}}
-				>
-					<ListFilter size={10} />
-				</Button>
+				{#if !isExternal}
+					<Button
+						size="xs2"
+						color="light"
+						on:click={() => {
+							dispatch('filterByUser', job.created_by)
+						}}
+					>
+						<ListFilter size={10} />
+					</Button>
+				{/if}
 			</div>
 		{/if}
 	</div>

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

@@ -3,13 +3,17 @@ import type { Job } from '../../gen';
 declare const __propDef: {
     props: {
         job: Job;
-        selectedId?: string | undefined;
+        selected?: boolean | undefined;
         containerWidth?: number | undefined;
+        containsLabel?: boolean | undefined;
+        activeLabel: string | null;
+        isSelectingJobsToCancel?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;
         filterByPath: CustomEvent<any>;
         filterByFolder: CustomEvent<any>;
+        filterByLabel: CustomEvent<any>;
         filterByUser: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/package/components/runs/RunsFilter.svelte

@@ -9,9 +9,13 @@ import Toggle from '../Toggle.svelte';
 import Label from '../Label.svelte';
 import Section from '../Section.svelte';
 import CloseButton from '../common/CloseButton.svelte';
-import { workspaceStore } from '../../stores';
+import { enterpriseLicense, workspaceStore } from '../../stores';
+import { createEventDispatcher } from 'svelte';
+import ToggleButtonMore from '../common/toggleButton-v2/ToggleButtonMore.svelte';
 // Filters
 export let path = null;
+export let label = null;
+export let concurrencyKey = null;
 export let success = undefined;
 export let isSkipped = undefined;
 export let argFilter;
@@ -21,16 +25,18 @@ export let resultError;
 export let jobKindsCat;
 export let user = null;
 export let folder = null;
-export let hideSchedules = undefined;
 export let mobile = false;
 // Autocomplete data
 export let paths = [];
 export let usernames = [];
 export let folders = [];
 export let allWorkspaces = false;
+$: displayedLabel = label;
+$: displayedConcurrencyKey = concurrencyKey;
 let copyArgFilter = argFilter;
 let copyResultFilter = resultFilter;
 export let filterBy = 'path';
+const dispatch = createEventDispatcher();
 let manuallySet = false;
 $: {
     if (path !== null && path !== '' && filterBy !== 'path') {
@@ -45,7 +51,17 @@ $: {
         manuallySet = true;
         filterBy = 'folder';
     }
+    else if (label !== null && label !== '' && filterBy !== 'label') {
+        manuallySet = true;
+        filterBy = 'label';
+    }
+    else if (concurrencyKey !== null && concurrencyKey !== '' && filterBy !== 'concurrencyKey') {
+        manuallySet = true;
+        filterBy = 'concurrencyKey';
+    }
 }
+let labelTimeout = undefined;
+let concurrencyKeyTimeout = undefined;
 </script>
 
 <div class="flex gap-4">
@@ -70,6 +86,8 @@ $: {
 							path = null
 							user = null
 							folder = null
+							label = null
+							concurrencyKey = null
 						} else {
 							manuallySet = false
 						}
@@ -78,6 +96,12 @@ $: {
 					<ToggleButton value="path" label="Path" />
 					<ToggleButton value="user" label="User" />
 					<ToggleButton value="folder" label="Folder" />
+					<ToggleButtonMore
+						togglableItems={[
+							{ label: 'Concurrency key', value: 'concurrencyKey' },
+							{ label: 'Label', value: 'label' }
+						]}
+					/>
 				</ToggleButtonGroup>
 			</div>
 
@@ -89,6 +113,7 @@ $: {
 								class="absolute top-2 right-2 z-50"
 								on:click={() => {
 									user = null
+									dispatch('reset')
 								}}
 							>
 								<X size={14} />
@@ -99,6 +124,12 @@ $: {
 
 						<span class="text-xs absolute -top-4">User</span>
 						<AutoComplete
+							create
+							onCreate={(user) => {
+								usernames.push(user)
+								return user
+							}}
+							createText="Press enter to use this value"
 							noInputStyles
 							items={usernames}
 							value={user}
@@ -118,6 +149,7 @@ $: {
 								class="absolute top-2 right-2 z-50"
 								on:click={() => {
 									folder = null
+									dispatch('reset')
 								}}
 							>
 								<X size={14} />
@@ -148,6 +180,7 @@ $: {
 								class="absolute top-2 right-2 z-50"
 								on:click={() => {
 									path = null
+									dispatch('reset')
 								}}
 							>
 								<X size={14} />
@@ -159,6 +192,12 @@ $: {
 						<span class="text-xs absolute -top-4">Path</span>
 
 						<AutoComplete
+							create
+							onCreate={(path) => {
+								paths.push(path)
+								return path
+							}}
+							createText="Press enter to use this value"
 							noInputStyles
 							items={paths}
 							value={path}
@@ -170,6 +209,86 @@ $: {
 						/>
 					</div>
 				{/key}
+			{:else if filterBy === 'label'}
+				{#key label}
+					<div class="relative">
+						{#if label}
+							<button
+								class="absolute top-2 right-2 z-50"
+								on:click={() => {
+									label = null
+									dispatch('reset')
+								}}
+							>
+								<X size={14} />
+							</button>
+						{/if}
+
+						<span class="text-xs absolute -top-4"
+							>Label <Tooltip
+								>Labels are string values in the array at the result field 'wm_labels' to easily
+								filter them</Tooltip
+							></span
+						>
+
+						<input
+							autofocus
+							type="text"
+							class="!h-[32px] py-1 !text-xs !w-64"
+							bind:value={displayedLabel}
+							on:keydown={(e) => {
+								if (labelTimeout) {
+									clearTimeout(labelTimeout)
+								}
+
+								labelTimeout = setTimeout(() => {
+									label = displayedLabel
+								}, 1000)
+							}}
+						/>
+					</div>
+				{/key}
+			{:else if filterBy === 'concurrencyKey'}
+				{#key concurrencyKey}
+					<div class="relative">
+						{#if concurrencyKey}
+							<button
+								class="absolute top-2 right-2 z-50"
+								on:click={() => {
+									concurrencyKey = null
+									dispatch('reset')
+								}}
+							>
+								<X size={14} />
+							</button>
+						{/if}
+						<span class="text-xs absolute -top-4"
+							>Concurrency Key <Tooltip>
+								For concurrency limited jobs, the concurrency key defines a group of jobs that share
+								the same limits.
+								{#if !$enterpriseLicense}
+									Concurrency limits are an EE feature.
+								{/if}
+							</Tooltip></span
+						>
+
+						<input
+							autofocus
+							type="text"
+							class="!h-[32px] py-1 !text-xs !w-64"
+							bind:value={displayedConcurrencyKey}
+							on:keydown={(e) => {
+								if (concurrencyKeyTimeout) {
+									clearTimeout(concurrencyKeyTimeout)
+								}
+
+								concurrencyKeyTimeout = setTimeout(() => {
+									concurrencyKey = displayedConcurrencyKey
+								}, 1000)
+							}}
+						/>
+					</div>
+				{/key}
 			{/if}
 		</div>
 		<div class="relative">
@@ -208,21 +327,21 @@ $: {
 				<ToggleButton value={undefined} label="All" />
 				<ToggleButton
 					value={'running'}
-					label="Running"
+					tooltip="Running"
 					class="whitespace-nowrap"
 					icon={PlayCircle}
 					iconProps={{ color: success === 'running' ? 'blue' : 'gray' }}
 				/>
 				<ToggleButton
 					value={'success'}
-					label="Success"
+					tooltip="Success"
 					class="whitespace-nowrap"
 					icon={CheckCircle2}
 					iconProps={{ color: success === 'success' ? 'green' : 'gray' }}
 				/>
 				<ToggleButton
 					value={'failure'}
-					label="Failure"
+					tooltip="Failure"
 					class="whitespace-nowrap"
 					icon={AlertCircle}
 					iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
@@ -257,6 +376,7 @@ $: {
 									path = null
 									user = null
 									folder = null
+									label = null
 								} else {
 									manuallySet = false
 								}
@@ -406,10 +526,6 @@ $: {
 					</div>
 				</Label>
 
-				<Label label="Hide future scheduled jobs from schedules">
-					<Toggle size="xs" bind:checked={hideSchedules} />
-				</Label>
-
 				<span class="text-xs leading-6">
 					{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
 				</span>

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

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         path?: string | null | undefined;
+        label?: string | null | undefined;
+        concurrencyKey?: string | null | undefined;
         success?: 'running' | 'success' | 'failure' | undefined;
         isSkipped?: boolean | undefined;
         argFilter: string;
@@ -11,16 +13,16 @@ declare const __propDef: {
         jobKindsCat: string;
         user?: string | null | undefined;
         folder?: string | null | undefined;
-        hideSchedules?: boolean | undefined;
         mobile?: boolean | undefined;
         paths?: string[] | undefined;
         usernames?: string[] | undefined;
         folders?: string[] | undefined;
         allWorkspaces?: boolean | undefined;
-        filterBy?: "path" | "folder" | "user" | undefined;
+        filterBy?: "path" | "folder" | "user" | "label" | "concurrencyKey" | undefined;
     };
     events: {
         change: CustomEvent<any>;
+        reset: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };