windmill-components 1.623.1 → 1.642.0

package/package/components/RunsPage.svelte

@@ -1,320 +1,104 @@
-<script module lang="ts">export let DEFAULT_RUNS_PER_PAGE = 1000;
-</script>
-
 <script lang="ts">import { JobService, UserService, FolderService, ScriptService, FlowService, OpenAPI } from '../gen';
 import { sendUserToast } from '../toast';
-import { userStore, workspaceStore, userWorkspaces } from '../stores';
-import { Button, Drawer, DrawerContent, Skeleton } from './common';
+import { userStore, workspaceStore, userWorkspaces, superadmin } from '../stores';
+import { Button, ButtonType, Drawer, DrawerContent, Skeleton, Tab, Tabs } from './common';
 import RunChart from './RunChart.svelte';
 import JobRunsPreview from './runs/JobRunsPreview.svelte';
 import Tooltip from './Tooltip.svelte';
-import CalendarPicker from './common/calendarPicker/CalendarPicker.svelte';
 import RunsTable from './runs/RunsTable.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import RunsFilter from './runs/RunsFilter.svelte';
+import { allowWildcards, buildRunsFilterSearchbarSchema, buildRunsFilterPresets } from './runs/runsFilter';
 import Toggle from './Toggle.svelte';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import RunsQueue from './runs/RunsQueue.svelte';
 import { twMerge } from 'tailwind-merge';
-import ManuelDatePicker from './runs/ManuelDatePicker.svelte';
-import JobsLoader from './runs/JobsLoader.svelte';
-import { Calendar, Clock, TriangleAlert } from 'lucide-svelte';
+import { computeJobKinds, useJobsLoader } from './runs/useJobsLoader.svelte';
 import ConcurrentJobsChart from './ConcurrentJobsChart.svelte';
-import { goto } from '$app/navigation';
-import { base } from '$app/paths';
-import { isJobSelectable } from '../utils';
+import { pluralize } from '../utils';
 import BatchReRunOptionsPane, {} from './runs/BatchReRunOptionsPane.svelte';
 import { untrack } from 'svelte';
 import { page } from '$app/state';
-import RunOption from './runs/RunOption.svelte';
-import TooltipV2 from './meltComponents/Tooltip.svelte';
-import DropdownSelect from './DropdownSelect.svelte';
-import RunsBatchActionsDropdown from './runs/RunsBatchActionsDropdown.svelte';
-import { createBubbler } from 'svelte/legacy';
-import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
-import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import Select from './select/Select.svelte';
 import AnimatedPane from './splitPanes/AnimatedPane.svelte';
-let { perPage = $bindable() } = $props();
-let jobs = $state();
-let selectedIds = $state([]);
-let loadingSelectedIds = $state(false);
-let selectedWorkspace = $state(undefined);
-let batchReRunOptions = $state({ flow: {}, script: {} });
-// All Filters
-// Filter by
-let path = $state(page.params.path ?? null);
-let worker = $state(page.url.searchParams.get('worker'));
-let user = $state(page.url.searchParams.get('user'));
-let folder = $state(page.url.searchParams.get('folder'));
-let label = $state(page.url.searchParams.get('label'));
-let allowWildcards = $state(page.url.searchParams.get('allow_wildcards') == 'true');
-let concurrencyKey = $state(page.url.searchParams.get('concurrency_key'));
-let tag = $state(page.url.searchParams.get('tag'));
-// Rest of filters handled by RunsFilter
-let success = $state((page.url.searchParams.get('success') ?? undefined));
-let showSkipped = $state(page.url.searchParams.get('show_skipped') != undefined
-    ? page.url.searchParams.get('show_skipped') == 'true'
-    : false);
-let showSchedules = $state(page.url.searchParams.get('show_schedules') != undefined
-    ? page.url.searchParams.get('show_schedules') == 'true'
-    : localStorage.getItem('show_schedules_in_run') == 'false'
-        ? false
-        : true);
-let showFutureJobs = $state(page.url.searchParams.get('show_future_jobs') != undefined
-    ? page.url.searchParams.get('show_future_jobs') == 'true'
-    : localStorage.getItem('show_future_jobs') == 'false'
-        ? false
-        : true);
-let argFilter = $state(page.url.searchParams.get('arg')
-    ? JSON.parse(decodeURIComponent(page.url.searchParams.get('arg') ?? '{}'))
-    : undefined);
-let resultFilter = $state(page.url.searchParams.get('result')
-    ? JSON.parse(decodeURIComponent(page.url.searchParams.get('result') ?? '{}'))
-    : undefined);
-let jobTriggerKind = $state(page.url.searchParams.get('job_trigger_kind') ?? undefined);
-// Handled on the main page
-let minTs = $state(page.url.searchParams.get('min_ts') ?? undefined);
-let maxTs = $state(page.url.searchParams.get('max_ts') ?? undefined);
-let schedulePath = $state(page.url.searchParams.get('schedule_path') ?? undefined);
-let jobKindsCat = $state(page.url.searchParams.get('job_kinds') ?? 'runs');
-let allWorkspaces = $state(page.url.searchParams.get('all_workspaces') == 'true');
-let lastFetchWentToEnd = $state(false);
-function loadFromQuery() {
-    path = page.params.path ?? null;
-    user = page.url.searchParams.get('user');
-    folder = page.url.searchParams.get('folder');
-    label = page.url.searchParams.get('label');
-    concurrencyKey = page.url.searchParams.get('concurrency_key');
-    tag = page.url.searchParams.get('tag');
-    worker = page.url.searchParams.get('worker');
-    allowWildcards = page.url.searchParams.get('allow_wildcards') == 'true';
-    // Rest of filters handled by RunsFilter
-    success = (page.url.searchParams.get('success') ?? undefined);
-    showSkipped =
-        page.url.searchParams.get('show_skipped') != undefined
-            ? page.url.searchParams.get('show_skipped') == 'true'
-            : false;
-    showSchedules =
-        page.url.searchParams.get('show_schedules') != undefined
-            ? page.url.searchParams.get('show_schedules') == 'true'
-            : localStorage.getItem('show_schedules_in_run') == 'false'
-                ? false
-                : true;
-    showFutureJobs =
-        page.url.searchParams.get('show_future_jobs') != undefined
-            ? page.url.searchParams.get('show_future_jobs') == 'true'
-            : localStorage.getItem('show_future_jobs') == 'false'
-                ? false
-                : true;
-    argFilter = page.url.searchParams.get('arg')
-        ? JSON.parse(decodeURIComponent(page.url.searchParams.get('arg') ?? '{}'))
-        : undefined;
-    resultFilter = page.url.searchParams.get('result')
-        ? JSON.parse(decodeURIComponent(page.url.searchParams.get('result') ?? '{}'))
-        : undefined;
-    jobTriggerKind = page.url.searchParams.get('job_trigger_kind') ?? undefined;
-    // Handled on the main page
-    minTs = page.url.searchParams.get('min_ts') ?? undefined;
-    maxTs = page.url.searchParams.get('max_ts') ?? undefined;
-    schedulePath = page.url.searchParams.get('schedule_path') ?? undefined;
-    perPage = parseInt(page.url.searchParams.get('per_page') ?? DEFAULT_RUNS_PER_PAGE.toString());
-    jobKindsCat = page.url.searchParams.get('job_kinds') ?? 'runs';
-    allWorkspaces = page.url.searchParams.get('all_workspaces') == 'true';
-}
-let queue_count = $state(undefined);
-let suspended_count = $state(undefined);
-let jobKinds = $state(undefined);
-let loading = $state(false);
+import { StaleWhileLoading, useLocalStorageValue } from '../svelte5Utils.svelte';
+import { CircleAlert, CircleCheck, CirclePlay, Hourglass, TriangleAlertIcon } from 'lucide-svelte';
+import DropdownV2 from './DropdownV2.svelte';
+import TimeframeSelect, { buildManualTimeframe, runsTimeframes, useSyncedTimeframe } from './runs/TimeframeSelect.svelte';
+import FilterSearchbar, { useUrlSyncedFilterInstance } from './FilterSearchbar.svelte';
+import { jobTriggerKinds } from './triggers/utils';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonMore from './common/toggleButton-v2/ToggleButtonMore.svelte';
 let paths = $state([]);
 let usernames = $state([]);
 let folders = $state([]);
-let completedJobs = $state(undefined);
-let extendedJobs = $state(undefined);
+let runsFilterSearchbarSchema = $derived(buildRunsFilterSearchbarSchema({
+    paths,
+    usernames,
+    folders,
+    jobTriggerKinds,
+    isSuperAdmin: !!$superadmin
+}));
+let perPage = useLocalStorageValue('runs_per_page', 1000, 'number');
+let filters = useUrlSyncedFilterInstance(untrack(() => runsFilterSearchbarSchema));
+let { initialPath } = $props();
+let batchRerunOptionsIsOpen = $state(false);
+// Initialize path filter from route param if provided and not already set via query params
+if (initialPath && !filters.val.path) {
+    filters.val.path = initialPath;
+}
+let selectedIds = $state([]);
+let selectedWorkspace = $state(undefined);
+let jobKinds = $derived(computeJobKinds(filters.val.job_kinds ?? null));
 let argError = $state('');
 let resultError = $state('');
-let filterTimeout = undefined;
-let selectedManualDate = $state(0);
-let autoRefresh = $state(getAutoRefresh());
+let autoRefresh = useLocalStorageValue('auto_refresh_in_runs', true, 'boolean');
 let runDrawer = $state(undefined);
 let lookback = $state(1);
 let askingForConfirmation = $state(undefined);
-function getAutoRefresh() {
-    try {
-        return localStorage.getItem('auto_refresh_in_runs') != 'false';
-    }
-    catch (e) {
-        console.error('Error getting auto refresh', e);
-        return true;
-    }
-}
-let innerWidth = $state(window.innerWidth);
-let jobsLoader = $state(undefined);
-let externalJobs = $state(undefined);
+let automaticTimeframeState = useLocalStorageValue('runs_automatic_timeframe', 'null', 'string');
+let _timeframe = useSyncedTimeframe(runsTimeframes, () => ({
+    maxTs: filters.val.max_ts?.toISOString(),
+    minTs: filters.val.min_ts?.toISOString(),
+    timeframe: automaticTimeframeState.val === 'null' ? null : automaticTimeframeState.val
+}), (v) => {
+    v.maxTs ? (filters.val.max_ts = new Date(v.maxTs)) : delete filters.val.max_ts;
+    v.minTs ? (filters.val.min_ts = new Date(v.minTs)) : delete filters.val.min_ts;
+    automaticTimeframeState.val = v.timeframe ?? 'null';
+});
+let timeframe = $derived(_timeframe.val);
+let manualTimeframe = $derived(timeframe.type === 'manual' ? timeframe : undefined);
 let graph = $state(typeOfChart(page.url.searchParams.get('graph')));
-let graphIsRunsChart = $state(untrack(() => graph) === 'RunChart');
-let manualDatePicker = $state(undefined);
+let innerWidth = $state(window.innerWidth);
+let jobsLoader = useJobsLoader(() => ({
+    filters: filters.val,
+    timeframe,
+    jobKinds,
+    autoRefresh: autoRefresh.val,
+    argError,
+    resultError,
+    perPage: perPage.val,
+    lookback: graph === 'RunChart' ? 0 : lookback,
+    onSetPerPage: (p) => (perPage.val = p),
+    currentWorkspace: $workspaceStore ?? ''
+}));
+let lastFetchWentToEnd = $derived(jobsLoader.lastFetchWentToEnd);
+let queue_count = $derived(jobsLoader.queue_count);
+let suspended_count = $derived(jobsLoader.suspended_count);
+let externalJobs = $derived(jobsLoader.externalJobs);
+let extendedJobs = $derived(jobsLoader.extendedJobs);
+// Avoid flicker, but still show empty if loading takes too long
+let debouncedCompletedJobs = new StaleWhileLoading(() => jobsLoader.completedJobs);
+let debouncedJobs = new StaleWhileLoading(() => jobsLoader.jobs);
+let completedJobs = $derived(jobsLoader.completedJobs ?? debouncedCompletedJobs.current);
+let jobs = $derived(jobsLoader.jobs ?? debouncedJobs.current);
 let runsTable = $state(undefined);
-function setQuery(replaceState) {
-    let searchParams = new URLSearchParams();
-    if (user) {
-        searchParams.set('user', user);
-    }
-    else {
-        searchParams.delete('user');
-    }
-    if (worker) {
-        searchParams.set('worker', worker);
-    }
-    else {
-        searchParams.delete('worker');
-    }
-    if (folder) {
-        searchParams.set('folder', folder);
-    }
-    else {
-        searchParams.delete('folder');
-    }
-    if (success !== undefined) {
-        searchParams.set('success', success.toString());
-    }
-    else {
-        searchParams.delete('success');
-    }
-    if (showSkipped) {
-        searchParams.set('show_skipped', showSkipped.toString());
-    }
-    else {
-        searchParams.delete('show_skipped');
-    }
-    if (showSchedules) {
-        searchParams.set('show_schedules', showSchedules.toString());
-    }
-    else {
-        searchParams.delete('show_schedules');
-    }
-    if (showFutureJobs) {
-        searchParams.set('show_future_jobs', showFutureJobs.toString());
-    }
-    else {
-        searchParams.delete('show_future_jobs');
-    }
-    if (allWorkspaces && $workspaceStore == 'admins') {
-        searchParams.set('all_workspaces', allWorkspaces.toString());
-        searchParams.set('workspace', 'admins');
-    }
-    else {
-        searchParams.delete('all_workspaces');
-    }
-    // ArgFilter is an object. Encode it to a string
-    if (argFilter) {
-        searchParams.set('arg', encodeURIComponent(JSON.stringify(argFilter)));
-    }
-    else {
-        searchParams.delete('arg');
-    }
-    if (resultFilter) {
-        searchParams.set('result', encodeURIComponent(JSON.stringify(resultFilter)));
-    }
-    else {
-        searchParams.delete('result');
-    }
-    if (jobTriggerKind) {
-        searchParams.set('job_trigger_kind', jobTriggerKind);
-    }
-    else {
-        searchParams.delete('job_trigger_kind');
-    }
-    if (schedulePath) {
-        searchParams.set('schedule_path', schedulePath);
-    }
-    else {
-        searchParams.delete('schedule_path');
-    }
-    if (jobKindsCat != 'runs') {
-        searchParams.set('job_kinds', jobKindsCat);
-    }
-    else {
-        searchParams.delete('job_kinds');
-    }
-    if (minTs) {
-        searchParams.set('min_ts', minTs);
-    }
-    else {
-        searchParams.delete('min_ts');
-    }
-    if (maxTs) {
-        searchParams.set('max_ts', maxTs);
-    }
-    else {
-        searchParams.delete('max_ts');
-    }
-    if (concurrencyKey) {
-        searchParams.set('concurrency_key', concurrencyKey);
-    }
-    else {
-        searchParams.delete('concurrency_key');
-    }
-    if (tag) {
-        searchParams.set('tag', tag);
-    }
-    else {
-        searchParams.delete('tag');
-    }
-    if (label) {
-        searchParams.set('label', label);
-    }
-    else {
-        searchParams.delete('label');
-    }
-    if (allowWildcards) {
-        searchParams.set('allow_wildcards', allowWildcards.toString());
-    }
-    else {
-        searchParams.delete('allow_wildcards');
-    }
-    if (graph != 'RunChart') {
-        searchParams.set('graph', graph);
-    }
-    else {
-        searchParams.delete('graph');
-    }
-    if (perPage != DEFAULT_RUNS_PER_PAGE) {
-        searchParams.set('per_page', perPage.toString());
-    }
-    else {
-        searchParams.delete('per_page');
-    }
-    let newPath = path ? `/${path}` : '';
-    let newUrl = `${base}/runs${newPath}?${searchParams.toString()}`;
-    if (page.url.searchParams.toString() != searchParams.toString() ||
-        page.url.pathname != newUrl.split('?')[0]) {
-        // replaceState(newUrl.toString(), $page.state)
-        goto(newUrl.toString(), { replaceState: replaceState, keepFocus: true });
-    }
-}
-function reloadJobsWithoutFilterError() {
-    if (resultError == '' && argError == '') {
-        filterTimeout && clearTimeout(filterTimeout);
-        filterTimeout = setTimeout(() => {
-            jobsLoader?.loadJobs(minTs, maxTs, true);
-        }, 2000);
-    }
-}
 function reset() {
-    path = page.params.path ?? null;
-    minTs = undefined;
-    maxTs = undefined;
-    jobs = undefined;
-    completedJobs = undefined;
-    lastFetchWentToEnd = false;
-    selectedManualDate = 0;
+    _timeframe.val = { ...runsTimeframes[0] };
     selectedIds = [];
-    schedulePath = undefined;
-    batchReRunOptions = { flow: {}, script: {} };
-    selectionMode = false;
+    delete filters.val.schedule_path;
     selectedWorkspace = undefined;
-    jobsLoader?.loadJobs(minTs, maxTs, true);
+    jobsLoader?.loadJobs(true);
 }
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
@@ -329,89 +113,27 @@ async function loadPaths() {
     const npaths_flows = await FlowService.listFlowPaths({ workspace: $workspaceStore ?? '' });
     paths = npaths_scripts.concat(npaths_flows).sort();
 }
-function filterByPath(e) {
-    path = e.detail;
-    user = null;
-    folder = null;
-    label = null;
-    concurrencyKey = null;
-    tag = null;
-    schedulePath = undefined;
-    worker = null;
-}
-function filterByUser(e) {
-    path = null;
-    folder = null;
-    user = e.detail;
-    label = null;
-    concurrencyKey = null;
-    tag = null;
-    schedulePath = undefined;
-}
-function filterByFolder(e) {
-    path = null;
-    user = null;
-    folder = e.detail;
-    label = null;
-    concurrencyKey = null;
-    tag = null;
-    schedulePath = undefined;
-    worker = null;
-}
-function filterByLabel(e) {
-    path = null;
-    user = null;
-    folder = null;
-    label = e.detail;
-    concurrencyKey = null;
-    tag = null;
-    schedulePath = undefined;
-    worker = null;
-    allowWildcards = false;
-}
-function filterByConcurrencyKey(e) {
-    path = null;
-    user = null;
-    folder = null;
-    label = null;
-    concurrencyKey = e.detail;
-    tag = null;
-    schedulePath = undefined;
-    worker = null;
-}
-function filterByTag(e) {
-    path = null;
-    user = null;
-    folder = null;
-    label = null;
-    concurrencyKey = null;
-    tag = e.detail;
-    schedulePath = undefined;
-    worker = null;
-    allowWildcards = false;
-}
-function filterBySchedule(e) {
-    path = null;
-    user = null;
-    folder = null;
-    label = null;
-    concurrencyKey = null;
-    tag = null;
-    schedulePath = e.detail;
-    worker = null;
-}
-function filterByWorker(e) {
-    path = null;
-    user = null;
-    folder = null;
-    label = null;
-    concurrencyKey = null;
-    tag = null;
-    schedulePath = undefined;
-    worker = e.detail;
-    allowWildcards = false;
+function resetAndFilterBy(setter) {
+    return (e) => {
+        delete filters.val.path;
+        delete filters.val.user;
+        delete filters.val.folder;
+        delete filters.val.label;
+        delete filters.val.concurrency_key;
+        delete filters.val.tag;
+        delete filters.val.worker;
+        delete filters.val.schedule_path;
+        setter(e.detail);
+    };
 }
-let calendarChangeTimeout = $state(undefined);
+const filterByPath = resetAndFilterBy((s) => (filters.val.path = s));
+const filterByUser = resetAndFilterBy((s) => (filters.val.user = s));
+const filterByFolder = resetAndFilterBy((s) => (filters.val.folder = s));
+const filterByLabel = resetAndFilterBy((s) => (filters.val.label = s));
+const filterByConcurrencyKey = resetAndFilterBy((s) => (filters.val.concurrency_key = s));
+const filterByTag = resetAndFilterBy((s) => (filters.val.tag = s));
+const filterBySchedule = resetAndFilterBy((s) => (filters.val.schedule_path = s));
+const filterByWorker = resetAndFilterBy((s) => (filters.val.worker = s));
 function typeOfChart(s) {
     switch (s) {
         case 'RunChart':
@@ -422,61 +144,55 @@ function typeOfChart(s) {
             return 'RunChart';
     }
 }
-let selectionMode = $state(false);
-async function onSetSelectionMode(mode) {
-    selectionMode = mode;
-    if (!mode) {
-        selectedIds = [];
-        batchReRunOptions = { flow: {}, script: {} };
-        return;
-    }
-    const selectableIds = jobs?.filter(isJobSelectable(mode)).map((j) => j.id) ?? [];
-    selectedIds = [];
-    if (!selectableIds?.length) {
-        sendUserToast('There are no visible jobs that can be ' +
-            { cancel: 'cancelled', 're-run': 're-ran' }[mode], true);
-    }
-}
 function getSelectedFilters() {
+    const argFilter = filters.val.arg && JSON.parse(filters.val.arg);
+    const resultFilter = filters.val.result && JSON.parse(filters.val.result);
+    const { minTs, maxTs } = timeframe.computeMinMax();
     return {
         workspace: $workspaceStore ?? '',
-        startedBefore: maxTs,
-        startedAfter: minTs,
-        schedulePath,
-        scriptPathExact: path === null || path === '' ? undefined : path,
-        createdBy: user === null || user === '' ? undefined : user,
-        scriptPathStart: folder === null || folder === '' ? undefined : `f/${folder}/`,
+        startedBefore: maxTs ?? undefined,
+        startedAfter: minTs ?? undefined,
+        schedulePath: filters.val.schedule_path ?? undefined,
+        scriptPathExact: filters.val.path === null || filters.val.path === '' ? undefined : filters.val.path,
+        createdBy: filters.val.user || undefined,
+        scriptPathStart: filters.val.folder ? `f/${filters.val.folder}/` : undefined,
         jobKinds: jobKinds == '' ? undefined : jobKinds,
-        success: success == 'success' ? true : success == 'failure' ? false : undefined,
-        running: success == 'running' || success == 'suspended'
+        success: filters.val.status == 'success'
+            ? true
+            : filters.val.status == 'failure'
+                ? false
+                : undefined,
+        running: filters.val.status == 'running' || filters.val.status == 'suspended'
             ? true
-            : success == 'waiting'
+            : filters.val.status == 'waiting'
                 ? false
                 : undefined,
-        isSkipped: showSkipped ? undefined : false,
+        isSkipped: filters.val.show_skipped ? undefined : false,
         // isFlowStep: jobKindsCat != 'all' ? false : undefined,
-        hasNullParent: path != undefined || path != undefined || jobKindsCat != 'all' ? true : undefined,
-        label: label === null || label === '' ? undefined : label,
-        tag: tag === null || tag === '' ? undefined : tag,
-        isNotSchedule: showSchedules == false ? true : undefined,
-        suspended: success == 'waiting' ? false : success == 'suspended' ? true : undefined,
-        scheduledForBeforeNow: showFutureJobs == false || success == 'waiting' || success == 'suspended'
+        hasNullParent: filters.val.path != undefined ||
+            filters.val.path != undefined ||
+            filters.val.job_kinds != 'all'
             ? true
             : undefined,
-        args: argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
-        result: resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
-            ? resultFilter
+        label: filters.val.label || undefined,
+        tag: filters.val.tag || undefined,
+        suspended: filters.val.status == 'waiting'
+            ? false
+            : filters.val.status == 'suspended'
+                ? true
+                : undefined,
+        scheduledForBeforeNow: filters.val.show_future_jobs == false ||
+            filters.val.status == 'waiting' ||
+            filters.val.status == 'suspended'
+            ? true
             : undefined,
-        jobTriggerKind,
-        allWorkspaces: allWorkspaces ? true : undefined,
-        allowWildcards: allowWildcards ? true : undefined
+        args: argFilter && Object.keys(argFilter).length && !argError ? argFilter : undefined,
+        result: resultFilter && Object.keys(resultFilter).length && !resultError ? resultFilter : undefined,
+        jobTriggerKind: filters.val.job_trigger_kind || undefined,
+        allWorkspaces: filters.val.all_workspaces || undefined,
+        allowWildcards: allowWildcards(filters.val) || undefined
     };
 }
-$effect(() => {
-    if (jobTriggerKind === 'schedule' && !showSchedules) {
-        showSchedules = true;
-    }
-});
 async function cancelJobs(uuidsToCancel, forceCancel = false) {
     const uuids = await JobService.cancelSelection({
         workspace: $workspaceStore ?? '',
@@ -484,11 +200,10 @@ async function cancelJobs(uuidsToCancel, forceCancel = false) {
         forceCancel: forceCancel
     });
     selectedIds = [];
-    jobsLoader?.loadJobs(minTs, maxTs, true, true);
+    jobsLoader?.loadJobs(true, true);
     sendUserToast(`Canceled ${uuids.length} jobs`);
-    selectionMode = false;
 }
-async function onCancelFilteredJobs() {
+async function onCancelAllJobsMatchingFilters() {
     forceCancelInPopup = false;
     askingForConfirmation = {
         title: 'Confirm cancelling all jobs corresponding to the selected filters',
@@ -507,17 +222,17 @@ async function onCancelFilteredJobs() {
         }
     };
 }
-async function onCancelSelectedJobs() {
+async function onCancelSelectedJobs(jobIdsToCancel) {
     forceCancelInPopup = true;
     askingForConfirmation = {
-        confirmBtnText: `Cancel ${selectedIds.length} jobs`,
-        title: 'Confirm cancelling the selected jobs',
+        confirmBtnText: `Cancel ${jobIdsToCancel.length} jobs`,
+        title: `Confirm cancelling ${jobIdsToCancel.length} jobs`,
         onConfirm: (forceCancel) => {
-            cancelJobs(selectedIds, forceCancel);
+            cancelJobs(jobIdsToCancel, forceCancel);
         }
     };
 }
-async function reRunJobs(jobIdsToReRun) {
+async function reRunJobs(jobIdsToReRun, batchReRunOptions) {
     if (!$workspaceStore)
         return;
     if (askingForConfirmation) {
@@ -525,8 +240,8 @@ async function reRunJobs(jobIdsToReRun) {
     }
     const body = {
         job_ids: jobIdsToReRun,
-        script_options_by_path: batchReRunOptions.script,
-        flow_options_by_path: batchReRunOptions.flow
+        script_options_by_path: batchReRunOptions.script ?? {},
+        flow_options_by_path: batchReRunOptions.flow ?? {}
     };
     // workaround because EventSource does not support POST requests
     // https://medium.com/@david.richards.tech/sse-server-sent-events-using-a-post-request-without-eventsource-1c0bd6f14425
@@ -581,98 +296,50 @@ async function reRunJobs(jobIdsToReRun) {
         resolve(undefined);
     });
     selectedIds = [];
-    batchReRunOptions = { flow: {}, script: {} };
-    jobsLoader?.loadJobs(minTs, maxTs, true, true);
-    selectionMode = false;
+    jobsLoader?.loadJobs(true, true);
 }
-async function onReRunFilteredJobs() {
+async function onRerunAllJobsMatchingFilters() {
     const selectedFilters = getSelectedFilters();
     selectedIds = [];
-    loadingSelectedIds = true;
-    if (jobKindsCat !== 'runs') {
+    const loadingToast = sendUserToast('Loading job ids', 'info');
+    if (filters.val.job_kinds !== 'runs') {
         sendUserToast('Batch re-run is only supported for scripts and flows', true);
+        loadingToast.destroy();
+        return;
     }
     selectedIds = await JobService.listFilteredJobsUuids({
         ...selectedFilters,
         jobKinds: 'script,flow'
     });
-    selectionMode = 're-run';
+    loadingToast.destroy();
+    batchRerunOptionsIsOpen = true;
 }
-async function onReRunSelectedJobs() {
+async function onReRunSelectedJobs(batchReRunOptions) {
     const jobIdsToReRun = selectedIds;
     askingForConfirmation = {
         title: `Confirm re-running the selected jobs`,
         confirmBtnText: `Re-run ${jobIdsToReRun.length} jobs`,
         type: 'reload',
         onConfirm: async () => {
-            await reRunJobs(jobIdsToReRun);
+            await reRunJobs(jobIdsToReRun, batchReRunOptions);
         }
     };
 }
-function setLookback(lookbackInDays) {
-    lookback = lookbackInDays;
-}
 async function loadExtra() {
-    if (jobsLoader) {
-        lastFetchWentToEnd = await jobsLoader.loadExtraJobs();
-    }
+    await jobsLoader?.loadExtraJobs();
 }
 function jobsFilter(f) {
-    path = null;
-    user = null;
-    folder = null;
-    label = null;
-    concurrencyKey = null;
-    schedulePath = undefined;
-    path = null;
-    tag = null;
-    worker = null;
-    if (success == f) {
-        success = undefined;
-    }
-    else {
-        success = f;
-    }
-    jobKindsCat = 'all';
+    filters.val.path = undefined;
+    filters.val.user = undefined;
+    filters.val.folder = undefined;
+    filters.val.label = undefined;
+    filters.val.concurrency_key = undefined;
+    filters.val.tag = undefined;
+    filters.val.worker = undefined;
+    filters.val.schedule_path = undefined;
+    filters.val.status = filters.val.status == f ? undefined : f;
+    filters.val.job_kinds = 'all';
 }
-$effect(() => {
-    loadingSelectedIds && selectedIds.length && setTimeout(() => (loadingSelectedIds = false), 250);
-});
-$effect(() => {
-    ;
-    [
-        user,
-        worker,
-        label,
-        folder,
-        path,
-        success !== undefined,
-        showSkipped,
-        showSchedules,
-        showFutureJobs,
-        argFilter,
-        resultFilter,
-        jobTriggerKind,
-        schedulePath,
-        jobKindsCat,
-        concurrencyKey,
-        tag,
-        graph,
-        maxTs,
-        minTs,
-        allWorkspaces,
-        allowWildcards,
-        $workspaceStore,
-        perPage
-    ];
-    untrack(() => setQuery(false));
-});
-$effect(() => {
-    minTs || untrack(() => setQuery(true));
-});
-$effect(() => {
-    maxTs || untrack(() => setQuery(true));
-});
 $effect(() => {
     if ($workspaceStore) {
         untrack(() => {
@@ -688,72 +355,12 @@ let warnJobLimit = $derived.by(() => {
         extended !== undefined &&
         extended.jobs.length + extended.obscured_jobs.length >= 1000);
 });
-const bubble = createBubbler();
-function selectAll() {
-    if (!selectionMode)
-        return;
-    if (allSelected) {
-        allSelected = false;
-        selectedIds = [];
-    }
-    else {
-        allSelected = true;
-        selectedIds = jobs?.filter(isJobSelectable(selectionMode)).map((j) => j.id) ?? [];
-    }
-}
-let allSelected = $derived.by(() => {
-    return selectionMode && selectedIds.length === selectableJobCount;
-});
-const selectableJobCount = $derived.by(() => {
-    if (!selectionMode)
-        return 0;
-    return jobs?.filter(isJobSelectable(selectionMode)).length ?? 0;
-});
-let tableTopBarWidth = $state(0);
 const smallScreenWidth = 1920;
-const verySmallScreenWidth = 1300;
 let forceCancelInPopup = $state(false);
-const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${perPage} jobs are taken into account: a job that was started earlier than this limit will not be taken into account`);
+const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${perPage.val} jobs are taken into account: a job that was started earlier than this limit will not be taken into account`);
+let manualSelectionMode = $state();
 </script>
 
-<JobsLoader
-	{allowWildcards}
-	{allWorkspaces}
-	bind:jobs
-	{user}
-	{folder}
-	{path}
-	{worker}
-	{label}
-	{success}
-	{showSkipped}
-	{argFilter}
-	{resultFilter}
-	{jobTriggerKind}
-	{showSchedules}
-	{showFutureJobs}
-	{schedulePath}
-	{jobKindsCat}
-	computeMinAndMax={manualDatePicker?.computeMinMax}
-	bind:minTs
-	bind:maxTs
-	bind:jobKinds
-	bind:queue_count
-	bind:suspended_count
-	{autoRefresh}
-	bind:completedJobs
-	bind:externalJobs
-	bind:extendedJobs
-	{concurrencyKey}
-	{argError}
-	{resultError}
-	{tag}
-	bind:perPage
-	bind:loading
-	bind:this={jobsLoader}
-	lookback={graphIsRunsChart ? 0 : lookback}
-/>
-
 <ConfirmationModal
 	title={askingForConfirmation?.title ?? ''}
 	confirmationText={askingForConfirmation?.confirmBtnText ?? ''}
@@ -801,7 +408,7 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 			{#if selectedIds[0] === '-'}
 				<div class="p-4">There is no information available for this job</div>
 			{:else}
-				<JobRunsPreview blankLink id={selectedIds[0]} workspace={selectedWorkspace} />
+				<JobRunsPreview id={selectedIds[0]} workspace={selectedWorkspace} />
 			{/if}
 		{/if}
 	</DrawerContent>
@@ -810,7 +417,6 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 <svelte:window
 	onpopstate={() => {
 		reset()
-		loadFromQuery()
 	}}
 />
 
@@ -822,29 +428,27 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 {:else}
 	<div class="w-full h-screen flex flex-col" bind:clientWidth={innerWidth}>
 		<!-- Header and filters -->
-		<div class="flex flex-row items-start w-full border-b px-4 gap-8">
-			<div class="flex flex-row items-center h-full gap-6">
-				<div class="flex flex-row items-center gap-1">
-					<h1
-						class={twMerge(
-							'!text-2xl font-semibold leading-6 tracking-tight',
-							$userStore?.operator ? 'pl-10' : ''
-						)}
-					>
-						Runs
-					</h1>
+		<div class="flex flex-row items-start w-full px-4 gap-3 py-4 flex-wrap">
+			<div class="flex flex-row items-center gap-6">
+				<h1
+					class={twMerge(
+						'!text-2xl font-semibold leading-6 tracking-tight',
+						$userStore?.operator ? 'pl-10' : ''
+					)}
+				>
+					Runs
+				</h1>
 
-					<Tooltip
-						documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs"
-					>
-						All past and schedule executions of scripts and flows, including previews. You only see
-						your own runs or runs of groups you belong to unless you are an admin.
-					</Tooltip>
-				</div>
+				<Tooltip
+					documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs"
+				>
+					All past and schedule executions of scripts and flows, including previews. You only see
+					your own runs or runs of groups you belong to unless you are an admin.
+				</Tooltip>
 
 				<!-- Queue -->
 				<RunsQueue
-					{success}
+					success={filters.val.status ?? null}
 					{queue_count}
 					{suspended_count}
 					onJobsWaiting={() => {
@@ -857,197 +461,175 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 				/>
 			</div>
 
-			<div class="py-2 flex items-start gap-x-4 gap-y-2 flex-row grow min-w-0 justify-end">
-				<!-- Dates -->
-				<div class="flex flex-row gap-2">
-					<RunOption label="From" for="min-datetimes">
-						{#if minTs || maxTs}
-							<input
-								type="text"
-								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={minTs ? new Date(minTs).toLocaleString() : 'zoom x axis to set min'}
-								disabled
-								name="min-datetimes"
-							/>
-						{/if}
-						<CalendarPicker
-							clearable={true}
-							date={minTs}
-							label="From"
-							class={minTs || maxTs ? '' : 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
-							on:change={async ({ detail }) => {
-								minTs = new Date(detail).toISOString()
-								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
-								calendarChangeTimeout = setTimeout(() => {
-									jobsLoader?.loadJobs(minTs, maxTs, true)
-								}, 1000)
-							}}
-							on:clear={async () => {
-								minTs = undefined
-								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
-								calendarChangeTimeout = setTimeout(() => {
-									jobsLoader?.loadJobs(minTs, maxTs, true)
-								}, 1000)
+			<div class="hidden xl:flex gap-2 ml-6">
+				<ToggleButtonGroup
+					tabListClass="hidden 2xl:flex"
+					bind:selected={
+						() => filters.val.job_kinds ?? 'runs',
+						(v) => (v === 'runs' ? delete filters.val.job_kinds : (filters.val.job_kinds = v))
+					}
+				>
+					{#snippet children({ item })}
+						<ToggleButton value="all" label="All" {item} />
+						<ToggleButton
+							value="runs"
+							label="Runs"
+							showTooltipIcon
+							tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
+							{item}
+						/>
+						<ToggleButton
+							value="dependencies"
+							label="Deps"
+							showTooltipIcon
+							tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
+							{item}
+						/>
+						<ToggleButtonMore
+							togglableItems={[
+								{
+									label: 'Previews',
+									value: 'previews',
+									tooltip: "Previews are jobs that have been started in the editor as 'Tests'"
+								},
+								{
+									label: 'Sync',
+									value: 'deploymentcallbacks',
+									tooltip:
+										'Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings'
+								}
+							]}
+							{item}
+							bind:selected={filters.val.job_kinds}
+						/>
+					{/snippet}
+				</ToggleButtonGroup>
+				<ToggleButtonGroup
+					bind:selected={
+						() => filters.val.status ?? 'all',
+						(v) => (v === 'all' ? delete filters.val.status : (filters.val.status = v))
+					}
+					id="status"
+				>
+					{#snippet children({ item })}
+						<ToggleButton value={'all'} label="All" {item} />
+						<ToggleButton
+							value={'running'}
+							tooltip="Running"
+							class="whitespace-nowrap"
+							icon={CirclePlay}
+							iconProps={{
+								class:
+									'group-data-[state=on]:text-yellow-600 dark:group-data-[state=on]:text-yellow-400'
 							}}
+							{item}
 						/>
-					</RunOption>
-
-					<RunOption label="To" for="max-datetimes">
-						{#if maxTs || minTs}
-							<input
-								type="text"
-								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={maxTs ? new Date(maxTs).toLocaleString() : 'zoom x axis to set max'}
-								name="max-datetimes"
-								disabled
-							/>
-						{/if}
-						<CalendarPicker
-							clearable={true}
-							date={maxTs}
-							label="To"
-							class={minTs || maxTs ? '' : 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
-							on:change={async ({ detail }) => {
-								maxTs = new Date(detail).toISOString()
-								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
-								calendarChangeTimeout = setTimeout(() => {
-									jobsLoader?.loadJobs(minTs, maxTs, true)
-								}, 1000)
+						<ToggleButton
+							value={'success'}
+							tooltip="Success"
+							class="whitespace-nowrap"
+							icon={CircleCheck}
+							iconProps={{
+								class:
+									'group-data-[state=on]:text-green-500 dark:group-data-[state=on]:text-green-300'
 							}}
-							on:clear={async () => {
-								maxTs = undefined
-								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
-								calendarChangeTimeout = setTimeout(() => {
-									jobsLoader?.loadJobs(minTs, maxTs, true)
-								}, 1000)
+							{item}
+						/>
+						<ToggleButton
+							value={'failure'}
+							tooltip="Failure"
+							class="whitespace-nowrap"
+							icon={CircleAlert}
+							iconProps={{
+								class: 'group-data-[state=on]:text-red-500 dark:group-data-[state=on]:text-red-300'
 							}}
+							{item}
 						/>
-					</RunOption>
-
-					{#if minTs || maxTs}
-						<RunOption label="Reset" for="reset" noLabel>
-							<Button variant="default" size="xs" onClick={reset} btnClasses="h-9">Reset</Button>
-						</RunOption>
-					{/if}
-				</div>
-
-				<!-- Filters 1 -->
-				<div class="flex flex-row gap-2">
-					<RunsFilter
-						bind:allowWildcards
-						bind:showSkipped
-						bind:user
-						bind:folder
-						bind:label
-						bind:concurrencyKey
-						bind:tag
-						bind:worker
-						bind:path
-						bind:success
-						bind:argFilter
-						bind:resultFilter
-						bind:jobTriggerKind
-						bind:argError
-						bind:resultError
-						bind:jobKindsCat
-						bind:allWorkspaces
-						bind:schedulePath
-						on:change={reloadJobsWithoutFilterError}
-						on:successChange={(e) => {
-							if (e.detail == 'running' && maxTs != undefined) {
-								maxTs = undefined
-							}
-						}}
-						{usernames}
-						{folders}
-						{paths}
-						mobile={innerWidth < verySmallScreenWidth}
-						small={innerWidth < smallScreenWidth}
-						calendarSmall={!minTs && !maxTs}
-					/>
-				</div>
+						{#if filters.val.status == 'waiting'}
+							<ToggleButton
+								value={'waiting'}
+								tooltip="Waiting"
+								class="whitespace-nowrap"
+								icon={Hourglass}
+								selectedColor="blue"
+								{item}
+							/>
+						{:else if filters.val.status == 'suspended'}
+							<ToggleButton
+								value={'suspended'}
+								tooltip="Suspended"
+								class="whitespace-nowrap"
+								icon={Hourglass}
+								selectedColor="purple"
+								{item}
+							/>
+						{/if}
+					{/snippet}
+				</ToggleButtonGroup>
 			</div>
+
+			<TimeframeSelect
+				wrapperClasses="ml-auto"
+				onClick={() => jobsLoader?.loadJobs(true)}
+				loading={jobsLoader?.loading}
+				items={runsTimeframes}
+				bind:value={_timeframe.val}
+			/>
+			<FilterSearchbar
+				class="flex-1 relative max-w-[34rem] min-w-[18rem] {ButtonType.UnifiedMinHeightClasses.md}"
+				schema={runsFilterSearchbarSchema}
+				presets={buildRunsFilterPresets({ isSuperadmin: !!$superadmin })}
+				bind:value={filters.val}
+				placeholder="Filter runs..."
+			/>
 		</div>
 
 		<!-- Graph -->
-		<div class="p-2 px-4 pt-8 w-full border-b">
-			<div class="relative z-10">
-				<div class="absolute left-0 -top-7 flex flex-row gap-2 items-center min-w-24">
-					<ToggleButtonGroup
-						selected={graph}
-						on:selected={({ detail }) => {
-							graph = detail
-							graphIsRunsChart = graph === 'RunChart'
-						}}
-					>
-						{#snippet children({ item })}
-							<ToggleButton value="RunChart" label="Duration" {item} />
-							<ToggleButton
-								{item}
-								value="ConcurrencyChart"
-								label="Concurrency"
-								icon={warnJobLimit ? TriangleAlert : undefined}
-								tooltip={warnJobLimit ? warnJobLimitMsg : undefined}
-							/>
+		<div class="p-2 px-4 bg-surface-tertiary mx-4 border rounded-md">
+			<div class="relative z-10 mb-2 flex gap-2">
+				<Tabs bind:selected={graph}>
+					<Tab value="RunChart" label="Duration" />
+					<Tab value="ConcurrencyChart" label="Concurrency">
+						{#snippet extra()}
+							{#if warnJobLimit}
+								<Tooltip Icon={TriangleAlertIcon}>{warnJobLimitMsg}</Tooltip>
+							{/if}
 						{/snippet}
-					</ToggleButtonGroup>
+					</Tab>
+				</Tabs>
 
-					{#if !graphIsRunsChart}
-						<DropdownSelect
-							items={[
-								{
-									displayName: 'None',
-									action: () => setLookback(0),
-									id: '0'
-								},
-								{
-									displayName: '1 day',
-									action: () => setLookback(1),
-									id: '1'
-								},
-								{
-									displayName: '3 days',
-									action: () => setLookback(3),
-									id: '3'
-								},
-								{
-									displayName: '7 days',
-									action: () => setLookback(7),
-									id: '7'
-								}
-							]}
-							selected={lookback.toString()}
-							selectedDisplayName={`${lookback} days lookback`}
-						>
-							{#snippet extraLabel()}
-								<TooltipV2>
-									{#snippet text()}
-										How far behind the min datetime to start considering jobs for the concurrency
-										graph. Change this value to include jobs started before the set time window for
-										the computation of the graph
-									{/snippet}
-								</TooltipV2>
-							{/snippet}
-						</DropdownSelect>
-					{/if}
-				</div>
+				{#if graph !== 'RunChart'}
+					<Select
+						class="ml-2"
+						bind:value={lookback}
+						items={[
+							{ label: 'None', value: 0 },
+							{ label: '1 day', value: 1 },
+							{ label: '3 days', value: 3 },
+							{ label: '7 days', value: 7 }
+						]}
+						transformInputSelectedText={(_, v) => `${pluralize(v, 'day')} lookback`}
+						tooltip={'How far behind the min datetime to start considering jobs for the concurrency graph. Change this value to include jobs started before the set time window for the computation of the graph'}
+					/>
+				{:else if !lastFetchWentToEnd}
+					<Button wrapperClasses="ml-2" unifiedSize="md" onClick={() => jobsLoader.loadExtraJobs()}>
+						Load more
+						<Tooltip>There are more jobs to load</Tooltip>
+					</Button>
+				{/if}
 			</div>
 			{#if graph === 'RunChart'}
+				{@const manualTimeframe = timeframe.type === 'manual' ? timeframe : undefined}
 				<RunChart
-					{lastFetchWentToEnd}
 					bind:selectedIds
-					canSelect={!selectionMode}
-					minTimeSet={minTs}
-					maxTimeSet={maxTs}
-					totalRowsFetched={jobs?.length ?? 0}
-					maxIsNow={maxTs == undefined}
-					onLoadExtra={loadExtra}
+					canSelect
+					minTimeSet={manualTimeframe?.minTs}
+					maxTimeSet={manualTimeframe?.maxTs}
+					maxIsNow={manualTimeframe?.maxTs == undefined}
 					jobs={completedJobs}
 					onZoom={async (zoom) => {
-						minTs = zoom.min.toISOString()
-						maxTs = zoom.max.toISOString()
-						manualDatePicker?.resetChoice()
-						jobsLoader?.loadJobs(minTs, maxTs, true)
+						_timeframe.val = buildManualTimeframe(zoom.min.toISOString(), zoom.max.toISOString())
+						jobsLoader?.loadJobs(true)
 					}}
 					onPointClicked={(ids) => {
 						runsTable?.scrollToRun(ids)
@@ -1055,207 +637,188 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 				/>
 			{:else if graph === 'ConcurrencyChart'}
 				<ConcurrentJobsChart
-					minTimeSet={minTs}
-					maxTimeSet={maxTs}
-					maxIsNow={maxTs == undefined}
+					minTimeSet={manualTimeframe?.minTs}
+					maxTimeSet={manualTimeframe?.maxTs}
+					maxIsNow={manualTimeframe?.maxTs == undefined}
 					{extendedJobs}
 					onZoom={async (zoom) => {
-						minTs = zoom.min.toISOString()
-						maxTs = zoom.max.toISOString()
-						jobsLoader?.loadJobs(minTs, maxTs, true)
+						_timeframe.val = buildManualTimeframe(zoom.min.toISOString(), zoom.max.toISOString())
+						jobsLoader?.loadJobs(true)
 					}}
 				/>
 			{/if}
 		</div>
 
-		<div class="grow min-h-0">
+		<div class="grow min-h-0 bottom-splitpane-wrapper">
 			<Splitpanes>
 				<Pane minSize={40}>
-					<div class="flex flex-col h-full">
-						<!-- Runs table top bar -->
-						<div
-							class="flex flex-row gap-4 items-center px-2 py-1 grow-0 justify-between"
-							bind:clientWidth={tableTopBarWidth}
-						>
-							<div class="flex flex-row gap-4 items-center">
-								{#if selectionMode && selectableJobCount}
-									<div class="flex flex-row items-center font-semibold text-sm">
-										<div class="px-2">
-											<input
-												onfocus={bubble('focus')}
-												type="checkbox"
-												checked={allSelected}
-												id="select-all"
-												class={twMerge(
-													'cursor-pointer',
-													allSelected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
-													'flex flex-row items-center p-2 pr-4 top-0 font-semibold text-sm'
-												)}
-												onclick={selectAll}
-											/>
-										</div>
-										<label
-											class="cursor-pointer whitespace-nowrap text-xs text-emphasis font-semibold"
-											for="select-all">Select all</label
-										>
+					<div class="h-full flex">
+						<div class="flex flex-col flex-1 m-4 mt-2 mr-2">
+							<!-- Runs table. Add overflow-hidden because scroll is handled inside the runs table based on this wrapper height -->
+							<div class="grow min-h-0 overflow-y-hidden overflow-x-auto">
+								{#if jobs}
+									<RunsTable
+										{jobs}
+										externalJobs={externalJobs ?? []}
+										omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
+										showExternalJobs={graph !== 'RunChart'}
+										activeLabel={filters.val.label}
+										{lastFetchWentToEnd}
+										bind:selectedIds
+										bind:selectedWorkspace
+										on:loadExtra={loadExtra}
+										on:filterByPath={filterByPath}
+										on:filterByUser={filterByUser}
+										on:filterByFolder={filterByFolder}
+										on:filterByLabel={filterByLabel}
+										on:filterByConcurrencyKey={filterByConcurrencyKey}
+										on:filterByTag={filterByTag}
+										on:filterBySchedule={filterBySchedule}
+										on:filterByWorker={filterByWorker}
+										bind:this={runsTable}
+										perPage={perPage.val}
+										bind:batchRerunOptionsIsOpen
+										onCancelJobs={onCancelSelectedJobs}
+										{manualSelectionMode}
+									></RunsTable>
+								{:else}
+									<div class="gap-1 flex flex-col">
+										{#each new Array(8) as _}
+											<Skeleton layout={[[3]]} />
+										{/each}
 									</div>
 								{/if}
-
-								<RunsBatchActionsDropdown
-									isLoading={loadingSelectedIds}
-									{selectionMode}
-									selectionCount={selectedIds.length}
-									{onSetSelectionMode}
-									{onCancelFilteredJobs}
-									{onCancelSelectedJobs}
-									{onReRunFilteredJobs}
-									{onReRunSelectedJobs}
-									small={tableTopBarWidth < 800}
-								/>
 							</div>
-
-							<div class="flex flex-row gap-4 items-center">
-								{#if !jobTriggerKind}
-									<div class="flex flex-row gap-1 items-center">
-										<Toggle
-											id="cron-schedules"
-											bind:checked={showSchedules}
-											on:change={() => {
-												localStorage.setItem(
-													'show_schedules_in_run',
-													showSchedules ? 'true' : 'false'
-												)
-											}}
-											options={tableTopBarWidth < 800 || selectionMode
-												? {}
-												: { right: 'Schedules' }}
-										/>
-										<span title="Schedules">
-											<Calendar size="14" />
-										</span>
-									</div>
-								{/if}
-
-								<div class="flex flex-row gap-1 items-center">
-									<Toggle
-										size="sm"
-										bind:checked={showFutureJobs}
-										on:change={() => {
-											localStorage.setItem('show_future_jobs', showFutureJobs ? 'true' : 'false')
-										}}
-										id="planned-later"
-										options={tableTopBarWidth < 800 || selectionMode
-											? {}
-											: { right: 'Planned later' }}
-									/>
-									<span title="Planned later">
-										<Clock size={14} />
-									</span>
-								</div>
-								<div class="flex flex-row gap-2 items-center">
-									<ManuelDatePicker
-										on:loadJobs={() => {
-											lastFetchWentToEnd = false
-											jobsLoader?.loadJobs(minTs, maxTs, true)
-										}}
-										bind:minTs
-										bind:maxTs
-										bind:selectedManualDate
-										{loading}
-										bind:this={manualDatePicker}
-										numberOfLastJobsToFetch={perPage}
+							<div
+								class="bg-surface-tertiary border rounded-b-md flex text-xs px-2 py-1 items-center gap-4"
+							>
+								{#if !manualSelectionMode}
+									<DropdownV2
+										btnText="Batch actions"
+										size="xs"
+										items={[
+											{
+												displayName: 'Cancel jobs',
+												action: () => ((manualSelectionMode = 'cancel'), (selectedIds = []))
+											},
+											{
+												displayName: 'Re-run jobs',
+												action: () => {
+													manualSelectionMode = 'rerun'
+													selectedIds = []
+													batchRerunOptionsIsOpen = true
+												}
+											},
+											{
+												displayName: 'Cancel all jobs matching filters',
+												action: () => onCancelAllJobsMatchingFilters()
+											},
+											{
+												displayName: 'Re-run all jobs matching filters',
+												action: () => onRerunAllJobsMatchingFilters()
+											}
+										]}
 									/>
-									<Toggle
-										size="sm"
-										bind:checked={autoRefresh}
-										on:change={() => {
-											localStorage.setItem('auto_refresh_in_runs', autoRefresh ? 'true' : 'false')
+								{:else}
+									<Button
+										size="xs"
+										destructive
+										onClick={() => {
+											manualSelectionMode = undefined
+											batchRerunOptionsIsOpen = false
 										}}
-										options={{ right: 'Auto-refresh' }}
-										textClass="whitespace-nowrap"
-									/>
-								</div>
-							</div>
-						</div>
-
-						<!-- Runs table. Add overflow-hidden because scroll is handled inside the runs table based on this wrapper height -->
-						<div class="grow min-h-0 overflow-y-hidden overflow-x-auto">
-							{#if jobs}
-								<RunsTable
-									{jobs}
-									externalJobs={externalJobs ?? []}
-									omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
-									showExternalJobs={!graphIsRunsChart}
-									activeLabel={label}
-									{selectionMode}
-									bind:selectedIds
-									bind:selectedWorkspace
-									bind:lastFetchWentToEnd
-									on:loadExtra={loadExtra}
-									on:filterByPath={filterByPath}
-									on:filterByUser={filterByUser}
-									on:filterByFolder={filterByFolder}
-									on:filterByLabel={filterByLabel}
-									on:filterByConcurrencyKey={filterByConcurrencyKey}
-									on:filterByTag={filterByTag}
-									on:filterBySchedule={filterBySchedule}
-									on:filterByWorker={filterByWorker}
-									bind:this={runsTable}
-									{perPage}
-								></RunsTable>
-							{:else}
-								<div class="gap-1 flex flex-col">
-									{#each new Array(8) as _}
-										<Skeleton layout={[[3]]} />
-									{/each}
-								</div>
-							{/if}
-						</div>
-						<div
-							class="bg-surface-secondary border-t flex text-xs px-2 py-1 items-center justify-end gap-2"
-						>
-							Per page:
-							<Select
-								class="w-20"
-								bind:value={
-									() => perPage,
-									(newPerPage) => {
-										perPage = newPerPage
-										if (newPerPage > (jobs?.length ?? 1000)) loadExtra()
+									>
+										Exit selection mode
+									</Button>
+								{/if}
+								<div class="flex-1"></div>
+								<Toggle
+									size="xs"
+									bind:checked={autoRefresh.val}
+									options={{ right: 'Auto-refresh' }}
+									textClass="whitespace-nowrap"
+								/>
+								<Select
+									class="w-24"
+									bind:value={
+										() => perPage.val,
+										(newPerPage) => {
+											perPage.val = newPerPage
+											if (newPerPage > (jobs?.length ?? 1000)) loadExtra()
+										}
 									}
-								}
-								onCreateItem={(v) => (perPage = parseInt(v))}
-								items={[
-									{ value: 25, label: '25' },
-									{ value: 100, label: '100' },
-									{ value: 1000, label: '1000' },
-									{ value: 10000, label: '10000' }
-								]}
-							/>
+									onCreateItem={(v) => (perPage.val = parseInt(v))}
+									items={[
+										{ value: 25, label: '25' },
+										{ value: 100, label: '100' },
+										{ value: 1000, label: '1000' },
+										{ value: 10000, label: '10000' }
+									]}
+									transformInputSelectedText={(_, v) => `${v} / page`}
+								/>
+							</div>
 						</div>
 					</div>
 				</Pane>
-				<AnimatedPane size={40} minSize={15} class="flex flex-col" opened={selectedIds.length > 0}>
-					{#if selectionMode === 're-run'}
-						<BatchReRunOptionsPane {selectedIds} bind:options={batchReRunOptions} />
-					{:else if selectedIds.length === 1}
-						{#if selectedIds[0] === '-'}
-							<div class="p-4">There is no information available for this job</div>
-						{:else}
-							<JobRunsPreview
-								on:filterByConcurrencyKey={filterByConcurrencyKey}
-								on:filterByWorker={filterByWorker}
-								id={selectedIds[0]}
-								workspace={selectedWorkspace}
+				<AnimatedPane
+					size={40}
+					minSize={15}
+					class="flex flex-col"
+					opened={selectedIds.length > 0 || !!manualSelectionMode}
+				>
+					<div class="mt-12 overflow-y-auto pr-4 ml-2 relative flex-1">
+						{#if manualSelectionMode === 'cancel'}
+							<div
+								class="rounded-md bg-surface-tertiary border absolute inset-0 mb-4 flex flex-col items-center justify-center"
+							>
+								<Button
+									destructive
+									variant="accent"
+									disabled={!selectedIds.length}
+									onClick={() => onCancelSelectedJobs(selectedIds)}
+								>
+									Cancel {selectedIds.length} jobs
+								</Button>
+							</div>
+						{:else if batchRerunOptionsIsOpen}
+							<BatchReRunOptionsPane
+								{selectedIds}
+								onCancel={() => (
+									(batchRerunOptionsIsOpen = false),
+									(manualSelectionMode = undefined)
+								)}
+								onConfirm={async (options) => {
+									await onReRunSelectedJobs(options)
+								}}
 							/>
+						{:else if selectedIds.length === 1}
+							{#if selectedIds[0] === '-'}
+								<div class="p-4">There is no information available for this job</div>
+							{:else}
+								<JobRunsPreview
+									id={selectedIds[0]}
+									workspace={selectedWorkspace}
+									on:filterByConcurrencyKey={filterByConcurrencyKey}
+									on:filterByWorker={filterByWorker}
+								/>
+							{/if}
+						{:else if selectedIds.length > 1}
+							<div
+								class="rounded-md bg-surface-tertiary border absolute inset-0 mb-4 flex items-center justify-center"
+							>
+								<div class="text-xs m-4"> {selectedIds.length} jobs selected</div>
+							</div>
 						{/if}
-					{:else if selectedIds.length > 1}
-						<div class="text-xs m-4"
-							>There are {selectedIds.length} jobs selected. Choose 1 to see detailed information</div
-						>
-					{/if}
+					</div>
 				</AnimatedPane>
 			</Splitpanes>
 		</div>
 	</div>
 {/if}
+
+<style>
+	:global(.bottom-splitpane-wrapper .splitpanes__splitter) {
+		background-color: transparent !important;
+		border: none !important;
+		/* opacity: 0 !important; */
+	}</style>