windmill-components 1.623.2 → 1.642.0

package/package/components/runs/RunRow.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">import { base } from '../../base';
 import { goto } from '../../navigation';
-import { displayDate, truncateHash, truncateRev, isScriptPreview, isJobSelectable, msToReadableTime, isFlowPreview, getJobKindIcon } from '../../utils';
-import { Badge, Button } from '../common';
+import { displayDate, truncateHash, truncateRev, isScriptPreview, msToReadableTime, isFlowPreview, getJobKindIcon } from '../../utils';
+import { Button } from '../common';
 import ScheduleEditor from '../triggers/schedules/ScheduleEditor.svelte';
-import { Calendar, Check, Clock, ExternalLink, FastForward, Hourglass, ListFilterPlus, Play, ShieldQuestion, X } from 'lucide-svelte';
+import JobStatusIcon from './JobStatusIcon.svelte';
+import { Calendar, Clock, ExternalLink, ListFilterPlus } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import TimeAgo from '../TimeAgo.svelte';
 import { forLater } from '../../forLater';
@@ -15,7 +16,7 @@ import { Tooltip } from '../meltComponents';
 import RunLabels from './RunLabels.svelte';
 import './runs-grid.css';
 const dispatch = createEventDispatcher();
-let { job, selected = false, containerWidth = 0, containsLabel = false, showTag = true, activeLabel, selectionMode = false } = $props();
+let { job, selected = false, containerWidth = 0, containsLabel = false, showTag = true, activeLabel, manualSelectionMode } = $props();
 let scheduleEditor = $state(undefined);
 let isExternal = $derived(job && job.id === '-');
 let labelWidth = $state(0);
@@ -29,75 +30,34 @@ let isJobRecent = $state(true);
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class={twMerge(
-		'hover:bg-surface-hover cursor-pointer',
-		selected ? 'bg-surface-accent-selected' : '',
+		'cursor-pointer',
+		selected ? 'bg-surface-accent-selected' : 'hover:bg-surface-hover',
 		'grid items-center h-full'
 	)}
-	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}
+	class:grid-runs-table={!containsLabel && !manualSelectionMode && showTag}
+	class:grid-runs-table-with-labels={containsLabel && !manualSelectionMode && showTag}
+	class:grid-runs-table-selection={!containsLabel && manualSelectionMode && showTag}
+	class:grid-runs-table-with-labels-selection={containsLabel && manualSelectionMode && showTag}
+	class:grid-runs-table-no-tag={!containsLabel && !manualSelectionMode && !showTag}
+	class:grid-runs-table-with-labels-no-tag={containsLabel && !manualSelectionMode && !showTag}
+	class:grid-runs-table-selection-no-tag={!containsLabel && manualSelectionMode && !showTag}
+	class:grid-runs-table-with-labels-selection-no-tag={containsLabel &&
+		manualSelectionMode &&
+		!showTag}
 	style="width: {containerWidth}px"
-	onclick={() => {
-		if (!selectionMode || isJobSelectable(selectionMode)(job)) {
-			dispatch('select')
-		}
-	}}
+	onclick={() => dispatch('select')}
+	oncontextmenu={(e) => !selected && dispatch('select')}
 >
 	<!-- Selection column (only when in selection mode) -->
-	{#if selectionMode}
-		<div class="flex items-center justify-center">
-			<div class="w-4 h-4">
-				<input type="checkbox" checked={selected} disabled={!isJobSelectable(selectionMode)(job)} />
-			</div>
+	{#if manualSelectionMode}
+		<div class="w-4 h-4 ml-4 pointer-events-none">
+			<input type="checkbox" checked={selected} />
 		</div>
 	{/if}
 
 	<!-- Status -->
-	<div class="flex items-center justify-start pl-2">
-		{#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} />
-				</Badge>
-			{:else}
-				<Badge color="green" baseClass="!px-1.5">
-					<Check size={14} />
-				</Badge>
-			{/if}
-		{:else if 'success' in job}
-			<Badge color="red" baseClass="!px-1.5">
-				<X size={14} />
-			</Badge>
-		{:else if 'running' in job && job.running && job.suspend}
-			<Badge color="violet" baseClass="!px-1.5" title="Suspended">
-				<Hourglass size={14} />
-			</Badge>
-		{:else if 'running' in job && job.running}
-			<Badge color="yellow" baseClass="!px-1.5">
-				<Play size={14} />
-			</Badge>
-		{:else if job && 'running' in job && job.scheduled_for && forLater(job.scheduled_for)}
-			<Badge color="blue" baseClass="!px-1.5">
-				<Calendar size={14} />
-			</Badge>
-		{:else if job.canceled}
-			<Badge color="red" baseClass="!px-1.5">
-				<Hourglass size={14} />
-			</Badge>
-		{:else}
-			<Badge baseClass="!px-1.5">
-				<Hourglass size={14} />
-			</Badge>
-		{/if}
+	<div class="flex items-center justify-start pl-4">
+		<JobStatusIcon {job} {isExternal} />
 	</div>
 
 	<!-- Job time -->

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

@@ -1,5 +1,4 @@
 import type { Job } from '../../gen';
-import { type RunsSelectionMode } from '../../utils';
 import './runs-grid.css';
 interface Props {
     job: Job;
@@ -8,7 +7,7 @@ interface Props {
     containsLabel?: boolean;
     showTag?: boolean;
     activeLabel: string | null;
-    selectionMode?: RunsSelectionMode | false;
+    manualSelectionMode?: undefined | 'cancel' | 'rerun';
 }
 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/RunsTable.svelte

@@ -1,12 +1,50 @@
 <script lang="ts">import RunRow from './RunRow.svelte';
 import VirtualList from '@tutorlatin/svelte-tiny-virtual-list';
-import { createEventDispatcher, onMount } from 'svelte';
+import { createEventDispatcher } from 'svelte';
 import Tooltip from '../Tooltip.svelte';
-import { AlertTriangle } from 'lucide-svelte';
+import { AlertTriangle, CircleXIcon, Code2Icon, ExternalLinkIcon, RefreshCwIcon } from 'lucide-svelte';
 import Popover from '../Popover.svelte';
 import { workspaceStore } from '../../stores';
 import './runs-grid.css';
-let { jobs = undefined, externalJobs = [], omittedObscuredJobs, showExternalJobs = false, selectionMode = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = false, perPage = 1000 } = $props();
+import { useKeyPressed } from '../../svelte5Utils.svelte';
+import { twMerge } from 'tailwind-merge';
+import RightClickPopover from '../RightClickPopover.svelte';
+import DropdownMenu, {} from '../DropdownMenu.svelte';
+import { clickOutside, isJobCancelable, isJobReRunnable } from '../../utils';
+import { goto } from '../../navigation';
+import BarsStaggered from '../icons/BarsStaggered.svelte';
+let { jobs = undefined, externalJobs = [], omittedObscuredJobs, showExternalJobs = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = false, perPage = 1000, manualSelectionMode, onCancelJobs, batchRerunOptionsIsOpen = $bindable() } = $props();
+let hasClickFocus = $state(false);
+const keysPressed = useKeyPressed(['Shift', 'Control', 'Meta', 'A', 'ArrowDown', 'ArrowUp'], {
+    onKeyDown(key, e) {
+        if (!hasClickFocus)
+            return;
+        if (key === 'A' && (keysPressed.Control || keysPressed.Meta)) {
+            if (batchRerunOptionsIsOpen)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            selectedIds = flatJobs
+                ? flatJobs
+                    .filter((jobOrDate) => jobOrDate.type === 'job')
+                    .map((jobOrDate) => jobOrDate.job.id)
+                : [];
+        }
+        else if ((key === 'ArrowDown' || key === 'ArrowUp') && selectedIds.length === 1) {
+            const idx = flatJobs?.findIndex((jobOrDate) => jobOrDate.type === 'job' && jobOrDate.job.id === selectedIds[0]);
+            if (idx == undefined)
+                return;
+            let nextJob = flatJobs?.[idx + (key === 'ArrowDown' ? 1 : -1)];
+            if (nextJob?.type === 'date')
+                nextJob = flatJobs?.[idx + (key === 'ArrowDown' ? 2 : -2)];
+            if (nextJob?.type !== 'job')
+                return;
+            selectedIds = [nextJob.job.id];
+            e.preventDefault();
+        }
+    }
+});
+let rightClickPopover = $state(undefined);
 function getTime(job) {
     return job['completed_at'] ?? job['started_at'] ?? job['scheduled_for'] ?? job['created_at'];
 }
@@ -60,7 +98,6 @@ function flattenJobs(groupedJobs) {
     return flatJobs;
 }
 let tableHeight = $state(0);
-let headerHeight = $state(0);
 let containerWidth = $state(0);
 // const MAX_ITEMS = perPage
 /*
@@ -78,20 +115,17 @@ function infiniteHandler({ detail: { loaded, error, complete } }) {
     }
 }
 */
-function jobCountString(jobCount, lastFetchWentToEnd) {
+function jobCountString(jobCount, lastFetchWentToEnd, hideLabel) {
     if (jobCount === undefined) {
         return '';
     }
     const jc = jobCount;
     const isTruncated = jc >= perPage && !lastFetchWentToEnd;
-    return `${jc}${isTruncated ? '+' : ''} job${jc != 1 ? 's' : ''}`;
+    if (hideLabel)
+        return `${jc}${isTruncated ? '+' : ''}`;
+    else
+        return `${jc}${isTruncated ? '+' : ''} job${jc != 1 ? 's' : ''}`;
 }
-function computeHeight() {
-    tableHeight = document.querySelector('#runs-table-wrapper').parentElement?.clientHeight ?? 0;
-}
-onMount(() => {
-    computeHeight();
-});
 const dispatch = createEventDispatcher();
 let scrollToIndex = $state(0);
 export function scrollToRun(ids) {
@@ -125,34 +159,120 @@ let stickyIndices = $derived.by(() => {
     }
     return nstickyIndices;
 });
-const showTag = $derived(containerWidth > 700);
+let showTag = $derived(containerWidth > 700);
+let selectedIdsPossibleActions = $derived.by(() => {
+    const cancellableJobIds = [];
+    const rerunnableJobIds = [];
+    for (const jobId of selectedIds) {
+        const job = flatJobs?.find((jobOrDate) => jobOrDate.type === 'job' && jobOrDate.job.id === jobId);
+        if (job?.type === 'job') {
+            if (isJobCancelable(job.job))
+                cancellableJobIds.push(job.job.id);
+            if (isJobReRunnable(job.job))
+                rerunnableJobIds.push(job.job.id);
+        }
+    }
+    return { cancellableJobIds, rerunnableJobIds };
+});
+let hoveredDropdownAction = $state(null);
+let dropdownActions = $derived.by(() => {
+    let rerunnable = selectedIdsPossibleActions.rerunnableJobIds.length;
+    let cancellable = selectedIdsPossibleActions.cancellableJobIds.length;
+    const actions = [];
+    if (selectedIds.length === 1) {
+        actions.push({
+            label: 'Show run details',
+            icon: ExternalLinkIcon,
+            onClick: () => goto(`/run/${selectedIds[0]}`)
+        });
+        const job = flatJobs?.find((jobOrDate) => jobOrDate.type === 'job' && jobOrDate.job.id === selectedIds[0]);
+        if (job?.type === 'job') {
+            if (job.job.job_kind === 'script') {
+                actions.push({
+                    label: 'Go to script page',
+                    icon: Code2Icon,
+                    onClick: () => goto(`/scripts/get/${job.job.script_hash}`)
+                });
+            }
+            if (job.job.job_kind === 'flow') {
+                actions.push({
+                    label: 'Go to flow page',
+                    icon: BarsStaggered,
+                    onClick: () => goto(`/flows/get/${job.job.script_path}`)
+                });
+            }
+        }
+    }
+    if (rerunnable)
+        actions.push({
+            label: 'Run again',
+            icon: RefreshCwIcon,
+            right: selectedIds.length >= 2 ? `${rerunnable}` : undefined,
+            onClick: () => {
+                selectedIds = selectedIdsPossibleActions.rerunnableJobIds;
+                batchRerunOptionsIsOpen = true;
+            },
+            onHover: (hover) => (hoveredDropdownAction = hover ? 'rerun' : null)
+        });
+    if (cancellable)
+        actions.push({
+            label: 'Cancel',
+            icon: CircleXIcon,
+            right: selectedIds.length >= 2 ? `${cancellable}` : undefined,
+            onClick: () => onCancelJobs?.(selectedIdsPossibleActions.cancellableJobIds),
+            onHover: (hover) => (hoveredDropdownAction = hover ? 'cancel' : null)
+        });
+    return actions;
+});
+function jobIsSelectable(job) {
+    if ((rightClickPopover?.isOpen() && hoveredDropdownAction === 'cancel') ||
+        manualSelectionMode === 'cancel')
+        return isJobCancelable(job);
+    if ((rightClickPopover?.isOpen() && hoveredDropdownAction === 'rerun') ||
+        manualSelectionMode === 'rerun' ||
+        batchRerunOptionsIsOpen)
+        return isJobReRunnable(job);
+    return true;
+}
+let selectableJobs = $derived(jobs?.filter(jobIsSelectable) ?? []);
 </script>
 
-<svelte:window onresize={() => computeHeight()} />
-
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="divide-y h-full border min-w-[650px]"
+	class="divide-y h-full flex flex-col min-w-[650px]"
 	id="runs-table-wrapper"
+	onclick={() => (hasClickFocus = true)}
+	use:clickOutside={{ onClickOutside: () => (hasClickFocus = false) }}
 	bind:clientWidth={containerWidth}
 >
-	<div bind:clientHeight={headerHeight}>
+	<div>
 		<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 sticky top-0 w-full min-h-6 my-2 pr-4 items-end"
+			class:grid-runs-table={!containsLabel && !manualSelectionMode && showTag}
+			class:grid-runs-table-with-labels={containsLabel && !manualSelectionMode && showTag}
+			class:grid-runs-table-selection={!containsLabel && manualSelectionMode && showTag}
+			class:grid-runs-table-with-labels-selection={containsLabel && manualSelectionMode && showTag}
+			class:grid-runs-table-no-tag={!containsLabel && !manualSelectionMode && !showTag}
+			class:grid-runs-table-with-labels-no-tag={containsLabel && !manualSelectionMode && !showTag}
+			class:grid-runs-table-selection-no-tag={!containsLabel && manualSelectionMode && !showTag}
 			class:grid-runs-table-with-labels-selection-no-tag={containsLabel &&
-				selectionMode &&
+				manualSelectionMode &&
 				!showTag}
 		>
-			{#if selectionMode}
-				<div class="text-xs font-semibold pl-4"></div>
+			{#if manualSelectionMode}
+				{@const allSelected = selectedIds.length === selectableJobs?.length}
+				<div class="w-4 h-4 ml-4">
+					<input
+						type="checkbox"
+						bind:checked={
+							() => allSelected,
+							() => (selectedIds = allSelected ? [] : (selectableJobs.map((j) => j.id) ?? []))
+						}
+					/>
+				</div>
 			{/if}
-			<div class="text-2xs px-2 flex flex-row items-center gap-2">
+			<div class="text-2xs px-4 flex flex-row items-center gap-2 leading-3">
 				{#if showExternalJobs && externalJobs.length > 0}
 					<div class="flex flex-row">
 						{jobs
@@ -171,125 +291,186 @@ const showTag = $derived(containerWidth > 700);
 						</Popover>
 					</div>
 				{:else}
-					{jobs ? jobCountString(jobs.length, lastFetchWentToEnd) : ''}
+					{@const jobCount = jobs
+						? jobCountString(jobs.length, lastFetchWentToEnd, selectedIds.length >= 2)
+						: ''}
+					{selectedIds.length >= 2 ? `${selectedIds.length}/` : ''}<wbr />
+					{jobCount}
 				{/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>
+			<div class="text-xs font-semibold leading-3">Started</div>
+			<div class="text-xs font-semibold leading-3">Duration</div>
+			<div class="text-xs font-semibold leading-3">Path</div>
 			{#if containsLabel}
-				<div class="text-xs font-semibold">Label</div>
+				<div class="text-xs font-semibold leading-3">Label</div>
 			{/if}
-			<div class="text-xs font-semibold">Triggered by</div>
+			<div class="text-xs font-semibold leading-3">Triggered by</div>
 			{#if showTag}
-				<div class="text-xs font-semibold">Tag</div>
+				<div class="text-xs font-semibold leading-3">Tag</div>
 			{/if}
-			<div class=""></div>
+			<div> </div>
 		</div>
 	</div>
-	{#if jobs?.length == 0 && (!showExternalJobs || externalJobs?.length == 0)}
-		<div class="text-xs text-secondary p-8"> No jobs found for the selected filters. </div>
-	{:else}
-		<VirtualList
-			width="100%"
-			height={tableHeight - headerHeight}
-			itemCount={flatJobs?.length ?? 3}
-			itemSize={42}
-			overscanCount={20}
-			{stickyIndices}
-			{scrollToIndex}
-			scrollToAlignment="center"
-		>
-			{#snippet header()}{/snippet}
-			{#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 font-semibold text-xs pl-2 h-[42px] flex items-center"
-								>
-									{jobOrDate.date}
-								</div>
+	<div
+		bind:clientHeight={tableHeight}
+		class="relative flex-1 border rounded-t-md overflow-clip bg-surface-tertiary [&>.virtual-list-wrapper::-webkit-scrollbar-track]:bg-surface-tertiary"
+	>
+		{#if jobs?.length == 0 && (!showExternalJobs || externalJobs?.length == 0)}
+			<div class="text-xs text-secondary p-8"> No jobs found for the selected filters. </div>
+		{:else}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="absolute inset-0 -mt-3"
+				oncontextmenu={(e) => {
+					e.preventDefault()
+					rightClickPopover?.open(e)
+				}}
+			>
+				<VirtualList
+					width="100%"
+					height={tableHeight}
+					itemCount={flatJobs?.length ?? 3}
+					itemSize={42}
+					overscanCount={20}
+					{stickyIndices}
+					{scrollToIndex}
+					scrollToAlignment="center"
+				>
+					{#snippet header()}{/snippet}
+					{#snippet item({ index, style })}
+						<div {style} class="w-full bg-surface-tertiary">
+							{#if flatJobs}
+								{@const jobOrDate = flatJobs[index]}
+								{#if jobOrDate}
+									{#if jobOrDate?.type === 'date'}
+										<div
+											class={twMerge(
+												'border-b py-1.5 font-semibold text-xs pl-4 h-[42px] flex items-end bg-surface-tertiary'
+											)}
+										>
+											{jobOrDate.date}
+										</div>
+									{:else}
+										{@const selected =
+											jobOrDate.job.id !== '-' && selectedIds.includes(jobOrDate.job.id)}
+										{@const nonSelectable = !jobIsSelectable(jobOrDate.job)}
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<!-- svelte-ignore a11y_no_static_element_interactions -->
+										<div
+											class={twMerge(
+												'flex flex-row items-center h-full w-full select-none transition-opacity',
+												nonSelectable || (rightClickPopover?.isOpen() && !selected)
+													? 'opacity-20'
+													: ''
+											)}
+										>
+											<RunRow
+												{manualSelectionMode}
+												{containsLabel}
+												{showTag}
+												job={jobOrDate.job}
+												{selected}
+												on:select={() => {
+													const jobId = jobOrDate.job.id
+													if (keysPressed.Shift && selectedIds.length > 0) {
+														if (nonSelectable) return
+														const lastSelectedId = selectedIds[selectedIds.length - 1]
+														const lastSelectedIndex = flatJobs?.findIndex(
+															(jobOrDate) =>
+																jobOrDate.type === 'job' && jobOrDate.job.id === lastSelectedId
+														)
+														if (lastSelectedIndex != undefined && flatJobs) {
+															const [start, end] =
+																index < lastSelectedIndex
+																	? [index, lastSelectedIndex]
+																	: [lastSelectedIndex, index]
+															const newSelectedIds = flatJobs
+																.slice(start, end + 1)
+																.filter((jobOrDate) => jobOrDate.type === 'job')
+																.map((jobOrDate) => jobOrDate.job.id)
+															selectedIds = Array.from(new Set([...selectedIds, ...newSelectedIds]))
+														}
+													} else if (
+														keysPressed.Control ||
+														keysPressed.Meta ||
+														manualSelectionMode
+													) {
+														if (nonSelectable) return
+														if (selectedIds.includes(jobOrDate.job.id)) {
+															selectedIds = selectedIds.filter((id) => id != jobId)
+														} else {
+															selectedIds.push(jobId)
+															selectedIds = selectedIds
+														}
+													} else {
+														if (batchRerunOptionsIsOpen) batchRerunOptionsIsOpen = false
+														if (
+															selectedIds.length !== 1 ||
+															selectedIds[0] !== 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}
+												on:filterByLabel
+												on:filterByPath
+												on:filterByUser
+												on:filterByFolder
+												on:filterByConcurrencyKey
+												on:filterBySchedule
+												on:filterByWorker
+												{containerWidth}
+											/>
+										</div>
+									{/if}
+								{:else}
+									{JSON.stringify(jobOrDate)}
+								{/if}
 							{: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}
-										on:select={() => {
-											const jobId = jobOrDate.job.id
-											if (selectionMode) {
-												if (selectedIds.includes(jobOrDate.job.id)) {
-													selectedIds = selectedIds.filter((id) => id != jobId)
-												} else {
-													selectedIds.push(jobId)
-													selectedIds = selectedIds
-												}
-											} else {
-												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}
-										on:filterByLabel
-										on:filterByPath
-										on:filterByUser
-										on:filterByFolder
-										on:filterByConcurrencyKey
-										on:filterBySchedule
-										on:filterByWorker
-										{containerWidth}
-									/>
+									<div class="w-1/12 text-2xs">...</div>
+									<div class="w-4/12 text-xs">...</div>
+									<div class="w-4/12 text-xs">...</div>
+									<div class="w-3/12 text-xs">...</div>
 								</div>
 							{/if}
-						{:else}
-							{JSON.stringify(jobOrDate)}
-						{/if}
-					{:else}
-						<div class="flex flex-row items-center h-full w-full">
-							<div class="w-1/12 text-2xs">...</div>
-							<div class="w-4/12 text-xs">...</div>
-							<div class="w-4/12 text-xs">...</div>
-							<div class="w-3/12 text-xs">...</div>
 						</div>
-					{/if}
-				</div>
-			{/snippet}
-			{#snippet footer()}
-				<div
-					>{#if !lastFetchWentToEnd && jobs && jobs.length >= perPage}
-						<button
-							class="text-xs text-accent text-center w-full pb-2"
-							onclick={() => {
-								dispatch('loadExtra')
-							}}
+					{/snippet}
+					{#snippet footer()}
+						<div
+							>{#if !lastFetchWentToEnd && jobs && jobs.length >= perPage}
+								<button
+									class="text-xs text-accent text-center w-full pb-2"
+									onclick={() => {
+										dispatch('loadExtra')
+									}}
+								>
+									Load next {perPage} jobs
+								</button>
+							{/if}</div
 						>
-							Load next {perPage} jobs
-						</button>
-					{/if}</div
-				>
-			{/snippet}
-		</VirtualList>
-	{/if}
+					{/snippet}
+				</VirtualList>
+			</div>
+		{/if}
+	</div>
 </div>
 
+<RightClickPopover bind:this={rightClickPopover}>
+	<DropdownMenu closeCallback={() => rightClickPopover?.close()} items={dropdownActions} />
+</RightClickPopover>
+
 <style>
-	:global(.virtual-list-wrapper:hover::-webkit-scrollbar) {
+	:global(.virtual-list-wrapper::-webkit-scrollbar) {
 		width: 8px !important;
 		height: 8px !important;
 	}</style>