{#if selectedId}
{@const log = logs.find((e) => e.id === selectedId)}
{#if log}
-
+
+
+ {log.operation}
+ {displayDate(log.timestamp)}
+
+ {#if onClose}
+
+ {/if}
+
+
ID
{log.id}
@@ -49,9 +67,10 @@
{#if log?.parameters?.uuid}
{/if}
{:else}
-
No log selected
+
No log selected
{/if}
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
index 4090a39dbb..9817b667f7 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
@@ -44,7 +44,6 @@
interface Props {
logs?: AuditLog[]
username?: string
- pageIndex?: number | undefined
before?: string | undefined
after?: string | undefined
perPage?: number | undefined
@@ -53,13 +52,14 @@
actionKind?: ActionKind | 'all'
scope?: undefined | 'all_workspaces' | 'instance'
loading?: boolean
+ /** Lay the filters out in a row (page header) rather than stacked (popover). */
+ inline?: boolean
onRefresh?: () => void
}
let {
logs = undefined,
username = $bindable('all'),
- pageIndex = $bindable(1),
before = $bindable(undefined),
after = $bindable(undefined),
perPage = $bindable(100),
@@ -68,6 +68,7 @@
actionKind = $bindable(undefined),
scope = $bindable(undefined),
loading = false,
+ inline = false,
onRefresh
}: Props = $props()
@@ -100,7 +101,6 @@
}
addQueryParam('username', username)
- addQueryParam('page', pageIndex)
addQueryParam('perPage', perPage)
addQueryParam('before', before)
addQueryParam('after', after)
@@ -120,7 +120,6 @@
function handlePopState() {
const urlSearchParams = new URLSearchParams(window.location.search)
username = urlSearchParams.get('username') ?? 'all'
- pageIndex = Number(urlSearchParams.get('page')) || 1
before = urlSearchParams.get('before') ?? undefined
after = urlSearchParams.get('after') ?? undefined
perPage = Number(urlSearchParams.get('perPage')) || 100
@@ -263,12 +262,12 @@
// observe all the variables that should be reflected in the url
$effect(() => {
- ;[username, perPage, before, after, operation, resource, actionKind, scope, pageIndex]
+ ;[username, perPage, before, after, operation, resource, actionKind, scope]
untrack(() => updateQueryParams())
})
-
+
{#if $workspaceStore == 'admins'}
Scope
@@ -406,7 +405,6 @@
username = 'all'
operation = 'all'
actionKind = 'all'
- pageIndex = 1
perPage = 100
resource = 'all'
scope = undefined
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
index 372b2aadd3..5c2c140632 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
@@ -1,17 +1,16 @@
-
computeHeight()} />
-
-
-
-
-
ID
-
Timestamp
-
Username
- {#if showWorkspace}
-
Workspace
- {/if}
-
Operation
-
Resource
-
+
+
+
+
ID
+
Timestamp
+
Username
+ {#if showWorkspace}
+
Workspace
+ {/if}
+
Operation
+
Resource
- {#if loading}
-
-
-
- {:else if !logs?.length}
-
- No logs found for the selected filters.
-
- {:else}
-
{
- if (flatLogs?.[index]?.type === 'date') {
- return 33
- }
- return 42
- }}
- overscanCount={20}
- {stickyIndices}
- scrollToAlignment="center"
- >
- {#snippet header()}{/snippet}
- {#snippet item({ index, style })}
-
- {#if flatLogs}
- {@const logOrDate = flatLogs[index]}
+
+ {#if loading}
+
+
+
+ {:else if !logs?.length}
+
+ No logs found for the selected filters.
+
+ {:else}
+
{
+ if (flatLogs?.[index]?.type === 'date') {
+ return 33
+ }
+ return 42
+ }}
+ overscanCount={20}
+ {stickyIndices}
+ scrollToAlignment="center"
+ >
+ {#snippet header()}{/snippet}
+ {#snippet item({ index, style })}
+
+ {#if flatLogs}
+ {@const logOrDate = flatLogs[index]}
- {#if logOrDate}
- {#if logOrDate?.type === 'date'}
-
- {logOrDate.date}
-
- {:else}
-
-
-
{
- onselect?.(logOrDate.log.id)
- }}
- >
-
- {logOrDate.log.id}
+ {#if logOrDate}
+ {#if logOrDate?.type === 'date'}
+
+ {logOrDate.date}
-
- {displayDate(logOrDate.log.timestamp)}
-
-
-
-
+
+
{
+ onselect?.(logOrDate.log.id)
+ }}
+ >
+
+ {logOrDate.log.id}
+
+
+ {displayDate(logOrDate.log.timestamp)}
+
+
+
+
-
-
- {logOrDate.log.username}
-
- {#if logOrDate.log.parameters && 'end_user' in logOrDate.log.parameters}
-
- ({logOrDate.log.parameters.end_user})
+
+
+ {logOrDate.log.username}
- {/if}
+ {#if logOrDate.log.parameters && 'end_user' in logOrDate.log.parameters}
+
+ ({logOrDate.log.parameters.end_user})
+
+ {/if}
+
+
+
+ {#if showWorkspace}
+
+
+ {logOrDate.log.workspace_id}
+
+
+ {/if}
+
+
+ {
+ actionKind = logOrDate.log.action_kind.toLocaleLowerCase()
+ }}
+ color={kindToBadgeColor(logOrDate.log.action_kind)}
+ >
+ {logOrDate.log.action_kind}
+
+ {
+ operation = logOrDate.log.operation
+ }}
+ >
+ {logOrDate.log.operation}
+
-
-
- {#if showWorkspace}
-
- {/if}
-
-
- {
- actionKind = logOrDate.log.action_kind.toLocaleLowerCase()
- }}
- color={kindToBadgeColor(logOrDate.log.action_kind)}
- >
- {logOrDate.log.action_kind}
-
- {
- operation = logOrDate.log.operation
- }}
- >
- {logOrDate.log.operation}
-
-
-
-
-
-
- {logOrDate.log.resource}
-
-
+ {/if}
+ {:else}
+
{/if}
{:else}
@@ -291,46 +288,29 @@
Loading...
{/if}
- {:else}
-
+ {/snippet}
+ {#snippet footer()}
+ {#if hasMore && !batchProgress}
+
+
{/if}
-
- {/snippet}
- {#snippet footer()}{/snippet}
-
- {/if}
-
+ {/snippet}
+
+ {/if}
+
-
-
- Page {pageIndex}
-
-
+
{pluralize(logs?.length ?? 0, 'log')}
{#if batchProgress}
{/if}
-
- Per page:
-
-
+
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsTimeline.svelte b/frontend/src/lib/components/auditLogs/AuditLogsTimeline.svelte
index 4275b49e3b..0ec00b0d36 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsTimeline.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsTimeline.svelte
@@ -550,7 +550,7 @@
)
-
+
{#if logs.length === 0}
No audit logs to display
{:else if !groupedData || groupedData.status === 'loading'}
diff --git a/frontend/src/lib/components/auditLogs/useAuditLogsLoader.svelte.ts b/frontend/src/lib/components/auditLogs/useAuditLogsLoader.svelte.ts
index a7327fa942..4c76290b27 100644
--- a/frontend/src/lib/components/auditLogs/useAuditLogsLoader.svelte.ts
+++ b/frontend/src/lib/components/auditLogs/useAuditLogsLoader.svelte.ts
@@ -13,7 +13,6 @@ export interface AuditLogsLoaderArgs {
actionKind: ActionKind | 'all'
before: string | undefined
after: string | undefined
- pageIndex: number
perPage: number
}
@@ -23,44 +22,32 @@ const SMALL_BATCH_SIZE = 25
const MAX_PER_PAGE = 1000
/**
- * Where the first batch of a page starts. Rows are ordered by descending id, so the batches after
- * it follow a `before_id` cursor and only this one needs an offset. `page` can only express
- * offsets that are multiples of `batchSize`: land on the closest one at or below the page start,
- * and report how many rows of that batch belong to the previous page.
- */
-export function computeFirstBatch(
- pageIndex: number,
- perPage: number,
- batchSize: number
-): { firstPage: number; skipFirst: number } {
- const startOffset = (Math.max(1, pageIndex) - 1) * perPage
- const firstPage = Math.floor(startOffset / batchSize) + 1
- return { firstPage, skipFirst: startOffset - (firstPage - 1) * batchSize }
-}
-
-/**
- * Loads one page of audit logs, optionally streaming it in smaller batches so rows show up as
- * they arrive on instances where a full page takes a long time to come back.
+ * Loads the newest audit logs, optionally streaming them in smaller batches so rows show up as
+ * they arrive on instances where a full load takes a long time to come back, and appends older
+ * ones on demand. Rows are ordered by descending id, so every batch after the first follows a
+ * `before_id` cursor.
*/
export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
let logs: AuditLog[] | undefined = $state()
let loading = $state(false)
+ let loadingExtra = $state(false)
let hasMore = $state(false)
let batchProgress = $state<{ loaded: number; total: number } | null>(null)
let currentBatchSize = $state
(null)
let pendingLoad: CancelablePromise | undefined
let pendingLoadHasRows = false
+ let pendingExtra: CancelablePromise | undefined
+ // The batch size the user last picked, so a load-more after a streamed load streams too.
+ let streamBatchSize: number | undefined
function fetchBatch(
a: AuditLogsLoaderArgs,
- page: number,
limit: number,
beforeId: number | undefined
): CancelablePromise {
return AuditService.listAuditLogs({
workspace: a.scope === 'instance' ? 'global' : a.workspace!,
- page,
perPage: limit,
beforeId,
before: a.before,
@@ -96,6 +83,8 @@ export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
pendingLoad?.cancel()
pendingLoad = undefined
pendingLoadHasRows = false
+ cancelExtra()
+ streamBatchSize = batchSize
const a = args()
if (a.workspace == undefined && a.scope !== 'instance') {
@@ -106,7 +95,6 @@ export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
const total = Math.min(Math.max(1, Math.floor(a.perPage) || 1), MAX_PER_PAGE)
const size = Math.min(Math.max(1, batchSize ?? total), total)
const isBatched = size < total
- const { firstPage, skipFirst } = computeFirstBatch(a.pageIndex, total, size)
loading = true
batchProgress = isBatched ? { loaded: 0, total } : null
@@ -115,8 +103,8 @@ export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
const acc: AuditLog[] = []
let slowBatchToastShown = false
- function loadBatch(beforeId: number | undefined, skip: number): CancelablePromise {
- let fetch = fetchBatch(a, beforeId === undefined ? firstPage : 1, size, beforeId)
+ function loadBatch(beforeId: number | undefined): CancelablePromise {
+ let fetch = fetchBatch(a, size, beforeId)
if (isBatched && size > 1) {
fetch = CancelablePromiseUtils.onTimeout(fetch, 4000, () => {
if (slowBatchToastShown) return
@@ -129,7 +117,7 @@ export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
})
}
return CancelablePromiseUtils.then(fetch, (rows) => {
- acc.push(...(skip > 0 ? rows.slice(skip) : rows).slice(0, total - acc.length))
+ acc.push(...rows.slice(0, total - acc.length))
logs = [...acc]
loading = false
pendingLoadHasRows = true
@@ -137,12 +125,12 @@ export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
batchProgress = { loaded: acc.length, total }
}
if (rows.length < size || acc.length >= total) {
- // Only once the page is complete: a half-streamed page says nothing about
- // whether there is a next one.
+ // Only once the load is complete: a half-streamed one says nothing about
+ // whether older logs exist.
hasMore = acc.length >= total
return CancelablePromiseUtils.pure(undefined)
}
- return loadBatch(rows[rows.length - 1].id, 0)
+ return loadBatch(rows[rows.length - 1].id)
})
}
@@ -159,7 +147,7 @@ export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
}, 15000)
}
- let promise = loadBatch(undefined, skipFirst)
+ let promise = loadBatch(undefined)
if (!isBatched) {
promise = CancelablePromiseUtils.onTimeout(promise, 4000, () => {
const smaller = total > SMALL_BATCH_SIZE ? SMALL_BATCH_SIZE : 1
@@ -213,6 +201,82 @@ export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
abandonLoad()
}
+ function cancelExtra() {
+ pendingExtra?.cancel()
+ pendingExtra = undefined
+ loadingExtra = false
+ }
+
+ function loadMore(batchSize: number | undefined = streamBatchSize) {
+ const last = logs?.[logs.length - 1]
+ if (!last || !hasMore || pendingLoad || pendingExtra) return
+ streamBatchSize = batchSize
+ const a = args()
+ const total = Math.min(Math.max(1, Math.floor(a.perPage) || 1), MAX_PER_PAGE)
+ const size = Math.min(Math.max(1, batchSize ?? total), total)
+ let appended = 0
+ loadingExtra = true
+
+ // Rows are appended as each batch lands, so stopping keeps them and the next load-more
+ // continues from the last one.
+ function extraBatch(beforeId: number): CancelablePromise {
+ return CancelablePromiseUtils.then(fetchBatch(a, size, beforeId), (rows) => {
+ const kept = rows.slice(0, total - appended)
+ appended += kept.length
+ logs = [...(logs ?? []), ...kept]
+ // Checked before the short-batch end: a short batch trimmed to fit `total` still has
+ // rows left past the cut.
+ if (appended >= total) return CancelablePromiseUtils.pure(undefined)
+ if (rows.length < size) {
+ hasMore = false
+ return CancelablePromiseUtils.pure(undefined)
+ }
+ return extraBatch(rows[rows.length - 1].id)
+ })
+ }
+
+ let promise = CancelablePromiseUtils.onTimeout(extraBatch(last.id), 4000, () => {
+ const smaller = total > SMALL_BATCH_SIZE ? SMALL_BATCH_SIZE : 1
+ const offerBatches = size === total && total > 1
+ sendUserToast('Loading more audit logs is taking longer than expected...', 'warning', [
+ {
+ label: 'Stop loading',
+ callback: () => {
+ if (pendingExtra === thisExtra) cancelExtra()
+ }
+ },
+ ...(offerBatches
+ ? [
+ {
+ label: smaller === 1 ? 'Stream 1 by 1' : `Stream by batches of ${smaller}`,
+ callback: () => {
+ if (pendingExtra !== thisExtra) return
+ cancelExtra()
+ loadMore(smaller)
+ }
+ }
+ ]
+ : [])
+ ])
+ })
+ promise = CancelablePromiseUtils.catchErr(promise, (e) => {
+ if (e instanceof CancelError) return CancelablePromiseUtils.pure(undefined)
+ sendUserToast(
+ 'There was an issue loading more audit logs, see browser console for more details',
+ true
+ )
+ console.error(e)
+ return CancelablePromiseUtils.pure(undefined)
+ })
+ const thisExtra = CancelablePromiseUtils.pipe(promise, () => {
+ if (pendingExtra === thisExtra) {
+ pendingExtra = undefined
+ loadingExtra = false
+ }
+ })
+ pendingExtra = thisExtra
+ }
+
$effect(() => {
// Building the args reads every filter, which is what registers this effect's dependencies.
args()
@@ -220,6 +284,7 @@ export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
return () => {
pendingLoad?.cancel()
pendingLoad = undefined
+ cancelExtra()
}
})
@@ -227,12 +292,16 @@ export function useAuditLogsLoader(args: () => AuditLogsLoaderArgs) {
reload: () => load(),
restreamWithBatchSize,
stopBatchLoading,
+ loadMore,
get logs() {
return logs
},
get loading() {
return loading
},
+ get loadingExtra() {
+ return loadingExtra
+ },
get hasMore() {
return hasMore
},
diff --git a/frontend/src/lib/components/auditLogs/useAuditLogsLoader.test.ts b/frontend/src/lib/components/auditLogs/useAuditLogsLoader.test.ts
deleted file mode 100644
index a244ed18b9..0000000000
--- a/frontend/src/lib/components/auditLogs/useAuditLogsLoader.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { computeFirstBatch } from './useAuditLogsLoader.svelte'
-
-describe('computeFirstBatch', () => {
- it('starts at the page itself when nothing is batched', () => {
- expect(computeFirstBatch(3, 100, 100)).toEqual({ firstPage: 3, skipFirst: 0 })
- })
-
- it('lands exactly on the page start when the batch size divides the offset', () => {
- expect(computeFirstBatch(1, 100, 25)).toEqual({ firstPage: 1, skipFirst: 0 })
- expect(computeFirstBatch(3, 100, 25)).toEqual({ firstPage: 9, skipFirst: 0 })
- expect(computeFirstBatch(2, 100, 1)).toEqual({ firstPage: 101, skipFirst: 0 })
- })
-
- it('drops the rows before the page start when it does not', () => {
- // page 2 of 100 starts at offset 100, batches of 30 can only land on offset 90
- expect(computeFirstBatch(2, 100, 30)).toEqual({ firstPage: 4, skipFirst: 10 })
- })
-})
diff --git a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
index 6f2917dcd1..59c961febb 100644
--- a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
@@ -9,7 +9,7 @@
import { Alert, DrawerContent, Skeleton } from '$lib/components/common'
import Drawer from '$lib/components/common/drawer/Drawer.svelte'
- import SplitPanesWrapper from '$lib/components/splitPanes/SplitPanesWrapper.svelte'
+ import AnimatedPane from '$lib/components/splitPanes/AnimatedPane.svelte'
import type { AuditLog } from '$lib/gen'
import { AuditService } from '$lib/gen'
@@ -19,7 +19,6 @@
import { useAuditLogsLoader } from '$lib/components/auditLogs/useAuditLogsLoader.svelte'
let username: string = $state(page.url.searchParams.get('username') ?? 'all')
- let pageIndex: number | undefined = $state(Number(page.url.searchParams.get('page')) || 1)
let before: string | undefined = $state(page.url.searchParams.get('before') ?? undefined)
let after: string | undefined = $state(page.url.searchParams.get('after') ?? undefined)
let perPage: number | undefined = $state(Number(page.url.searchParams.get('perPage')) || 100)
@@ -42,25 +41,35 @@
actionKind,
before,
after,
- pageIndex: pageIndex ?? 1,
perPage: perPage ?? 100
}))
let logs: AuditLog[] | undefined = $derived(auditLogsLoader.logs)
let batchProgress = $derived(auditLogsLoader.batchProgress)
// Regrouping the timeline can fire extra requests to fill in missing job spans, so it gets the
- // result of a batched load once it settles rather than every intermediate batch.
+ // result of a batched load or load-more once it settles rather than every intermediate batch.
let timelineLogs: AuditLog[] | undefined = $state()
$effect(() => {
- const settledLogs = batchProgress ? undefined : auditLogsLoader.logs
+ const settledLogs =
+ batchProgress || auditLogsLoader.loadingExtra ? undefined : auditLogsLoader.logs
if (settledLogs) {
timelineLogs = settledLogs
}
})
let selectedId: number | undefined = $state(undefined)
+ // A selection the loaded rows no longer contain (a filter change or reload) closes the pane.
+ let detailOpen = $derived(
+ selectedId !== undefined && !!logs?.some((log) => log.id === selectedId)
+ )
let auditLogDrawer: Drawer | undefined = $state()
+ // The inline filters show only when their one-line width fits in the space the title leaves.
+ // Both are measured, so the sidebar, side panels, zoom and filter values are all accounted for.
+ let filtersSlotWidth = $state(0)
+ let filtersRowWidth = $state(0)
+ let inlineFilters = $derived(filtersRowWidth > 0 && filtersRowWidth <= filtersSlotWidth)
+
// Function to fetch missing job execution audit logs
async function fetchMissingJobSpan(jobId: string, jobLogs: AuditLog[]): Promise {
if (jobLogs.length === 0) return []
@@ -109,16 +118,27 @@
{:else}
-
-
+
+
Audit logs
You can only see your own audit logs unless you are an admin.
-
-
+
+
+
+
auditLogsLoader.reload()}
/>
-
-
+ {#if !$enterpriseLicense || $enterpriseLicense.endsWith('_pro')}
+
+
+ You need an enterprise license to see unredacted audit logs.
+
+
+ {/if}
+
+
{#if timelineLogs}
{
before = max.toISOString()
after = min.toISOString()
- console.log('zoom!')
}}
onMissingJobSpan={fetchMissingJobSpan}
onLogSelected={(log) => {
- console.log('selected log ')
selectedId = log.id
}}
/>
{/if}
-
-
- {#if !$enterpriseLicense || $enterpriseLicense.endsWith('_pro')}
-
- You need an enterprise license to see unredacted audit logs.
-
-
- {/if}
-
-
-
-
-
- {#if logs || batchProgress}
- auditLogsLoader.restreamWithBatchSize(size)}
- onStopLoading={() => auditLogsLoader.stopBatchLoading()}
- showWorkspace={scope === 'instance' || scope === 'all_workspaces'}
- onselect={(id) => {
- selectedId = id
- }}
- />
- {:else}
-
- {#each new Array(8) as _}
-
- {/each}
-
- {/if}
-
-
- {#if logs}
-
- {/if}
-
-
-
-
+
+
+
+
+
+
+ {#if logs || batchProgress}
+
auditLogsLoader.loadMore()}
+ {batchProgress}
+ batchSize={auditLogsLoader.currentBatchSize}
+ onBatchSizeChange={(size) => auditLogsLoader.restreamWithBatchSize(size)}
+ onStopLoading={() => auditLogsLoader.stopBatchLoading()}
+ showWorkspace={scope === 'instance' || scope === 'all_workspaces'}
+ onselect={(id) => {
+ selectedId = selectedId === id ? undefined : id
+ }}
+ />
+ {:else}
+
+ {#each new Array(8) as _}
+
+ {/each}
+
+ {/if}
+
+
+
+ {#if logs}
+
{
+ selectedId = undefined
+ }}
+ />
+ {/if}
+
+
+
+
+
+
auditLogsLoader.loadMore()}
bind:perPage
bind:actionKind
bind:operation