windmill-components 1.309.7 → 1.339.2

package/package/components/runs/RunRow.svelte

@@ -3,7 +3,7 @@ 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';
@@ -13,19 +13,22 @@ const dispatch = createEventDispatcher();
 export let job;
 export let selectedId = undefined;
 export let containerWidth = 0;
+export let containsLabel = false;
+export let activeLabel;
 let scheduleEditor;
+$: isExternal = job && job.id === '-';
+let triggeredByWidth = 0;
 </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' : '',
+		selectedId === job.id && !isExternal ? 'bg-blue-50 dark:bg-blue-900/50' : '',
 		'flex flex-row items-center h-full'
 	)}
 	style="width: {containerWidth}px"
@@ -34,7 +37,11 @@ let scheduleEditor;
 	}}
 >
 	<div class="w-1/12 flex justify-center">
-		{#if 'success' in job && job.success}
+		{#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} />
@@ -91,18 +98,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 +158,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 +204,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 +217,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

@@ -5,11 +5,14 @@ declare const __propDef: {
         job: Job;
         selectedId?: string | undefined;
         containerWidth?: number | undefined;
+        containsLabel?: boolean | undefined;
+        activeLabel: string | null;
     };
     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>;
     };

package/package/components/runs/RunsTable.svelte

@@ -1,19 +1,32 @@
 <script>import RunRow from './RunRow.svelte';
 import VirtualList from '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 InfiniteLoading from 'svelte-infinite-loading'
 export let jobs = undefined;
+export let externalJobs = [];
+export let omittedObscuredJobs;
+export let showExternalJobs = false;
 export let selectedId = undefined;
 export let selectedWorkspace = undefined;
+export let activeLabel = null;
 // const loadMoreQuantity: number = 100
 function getTime(job) {
     return job['started_at'] ?? job['scheduled_for'] ?? job['created_at'];
 }
+let containsLabel = false;
 function groupJobsByDay(jobs) {
     const groupedLogs = {};
     if (!jobs)
         return groupedLogs;
+    let newContainsLabel = false;
     for (const job of jobs) {
+        if (job?.['labels'] != undefined) {
+            newContainsLabel = true;
+        }
         const field = getTime(job);
         if (field) {
             const date = new Date(field);
@@ -29,6 +42,7 @@ function groupJobsByDay(jobs) {
             groupedLogs[day].push(job);
         }
     }
+    containsLabel = newContainsLabel;
     for (const day in groupedLogs) {
         groupedLogs[day].sort((a, b) => {
             return new Date(getTime(b)).getTime() - new Date(getTime(a)).getTime();
@@ -44,7 +58,11 @@ function groupJobsByDay(jobs) {
     });
     return sortedLogs;
 }
-$: groupedJobs = jobs ? groupJobsByDay(jobs) : undefined;
+$: groupedJobs = jobs
+    ? showExternalJobs
+        ? groupJobsByDay([...jobs, ...externalJobs])
+        : groupJobsByDay(jobs)
+    : undefined;
 function flattenJobs(groupedJobs) {
     const flatJobs = [];
     for (const [date, jobsByDay] of Object.entries(groupedJobs)) {
@@ -86,6 +104,11 @@ function infiniteHandler({ detail: { loaded, error, complete } }) {
     }
 }
 */
+function jobCountString(jobCount) {
+    const jc = jobCount;
+    const isTruncated = jc == 1000;
+    return `${jc}${isTruncated ? '+' : ''} job${jc != 1 ? 's' : ''}`;
+}
 function computeHeight() {
     tableHeight = document.querySelector('#runs-table-wrapper').parentElement?.clientHeight ?? 0;
 }
@@ -106,11 +129,32 @@ const dispatch = createEventDispatcher();
 		class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4"
 		bind:clientHeight={header}
 	>
-		<div class="w-1/12 text-2xs"
-			>{jobs?.length == 1000 ? '1000+' : jobs ? jobs.length.toString() : '...'} jobs</div
-		>
+		{#if showExternalJobs && externalJobs.length > 0}
+			<div class="w-1/12 text-2xs">
+				<div class="flex flex-row">
+					{jobs && jobCountString(jobs.length + externalJobs.length)}<Tooltip
+						>{externalJobs.length} jobs obscured</Tooltip
+					>
+				</div>
+			</div>
+		{:else if $workspaceStore !== 'admins' &&  omittedObscuredJobs}
+			<div class="w-1/12 text-2xs flex flex-row">
+				{jobs && jobCountString(jobs.length)}
+				<Popover>
+					<AlertTriangle size={16} class="ml-0.5 text-yellow-500"/>
+					<svelte:fragment slot="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.
+					</svelte:fragment>
+				</Popover>
+			</div>
+		{:else}
+			<div class="w-1/12 text-2xs">{jobs && jobCountString(jobs.length)}</div>
+		{/if}
 		<div class="w-4/12 text-xs font-semibold">Timestamp</div>
 		<div class="w-4/12 text-xs font-semibold">Path</div>
+		{#if containsLabel}
+			<div class="w-3/12 text-xs font-semibold">Label</div>
+		{/if}
 		<div class="w-3/12 text-xs font-semibold">Triggered by</div>
 	</div>
 
@@ -133,6 +177,7 @@ const dispatch = createEventDispatcher();
 					{:else}
 						<div class="flex flex-row items-center h-full w-full">
 							<RunRow
+								{containsLabel}
 								job={jobOrDate.job}
 								{selectedId}
 								on:select={() => {
@@ -140,9 +185,12 @@ const dispatch = createEventDispatcher();
 									selectedId = jobOrDate.job.id
 									dispatch('select')
 								}}
+								{activeLabel}
+								on:filterByLabel
 								on:filterByPath
 								on:filterByUser
 								on:filterByFolder
+								on:filterByConcurrencyKey
 								{containerWidth}
 							/>
 						</div>
@@ -161,7 +209,7 @@ const dispatch = createEventDispatcher();
 		</div>
 	</VirtualList>
 </div>
-{#if jobs?.length == 0}
+{#if jobs?.length == 0 && (!showExternalJobs || externalJobs?.length == 0)}
 	<tr>
 		<td colspan="4" class="text-center py-8">
 			<div class="text-xs text-secondary"> No jobs found for the selected filters. </div>

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

@@ -3,13 +3,19 @@ import type { Job } from '../../gen';
 declare const __propDef: {
     props: {
         jobs?: Job[] | undefined;
+        externalJobs?: Job[] | undefined;
+        omittedObscuredJobs: boolean;
+        showExternalJobs?: boolean | undefined;
         selectedId?: string | undefined;
         selectedWorkspace?: string | undefined;
+        activeLabel?: string | null | undefined;
     };
     events: {
+        filterByLabel: CustomEvent<any>;
         filterByPath: CustomEvent<any>;
         filterByUser: CustomEvent<any>;
         filterByFolder: CustomEvent<any>;
+        filterByConcurrencyKey: CustomEvent<any>;
         select: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;