From 7486d17dbeba2235319f998a2d59f8d7910bc6f4 Mon Sep 17 00:00:00 2001 From: Guilhem Date: Wed, 26 Feb 2025 08:42:00 +0000 Subject: [PATCH] fix(frontend): improve pagination handling and filter refreshes (#5378) * fix pagination handling and filter refreshes * wip * fix window navigation --- .../auditLogs/AuditLogsFilters.svelte | 95 +++++++------------ .../auditLogs/AuditLogsTable.svelte | 3 +- .../(root)/(logged)/audit_logs/+page.svelte | 5 + 3 files changed, 42 insertions(+), 61 deletions(-) diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte index 1da413f915..8aeb4435ed 100644 --- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte +++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte @@ -16,7 +16,7 @@ import { userStore, workspaceStore } from '$lib/stores' import { Loader2, RefreshCcw } from 'lucide-svelte' - import { onDestroy } from 'svelte' + import { onDestroy, tick } from 'svelte' import AutoComplete from 'simple-svelte-autocomplete' import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte' import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte' @@ -24,10 +24,12 @@ let usernames: string[] let resources: string[] let loading: boolean = false + let page: number | undefined = undefined export let logs: AuditLog[] = [] export let username: string = 'all' - export let pageIndex: number | undefined = 0 + export let pageIndex: number | undefined = 1 + export let hasMore: boolean = false export let before: string | undefined = undefined export let after: string | undefined = undefined export let perPage: number | undefined = 100 @@ -77,6 +79,7 @@ actionKind, allWorkspaces: scope === 'all_workspaces' }) + hasMore = logs.length > 0 && logs.length === perPage loading = false } @@ -109,33 +112,19 @@ .sort() } - $: { - if ($workspaceStore && refresh) { - loadUsers() - loadResources() - loadLogs(username, pageIndex, perPage, before, after, operation, resource, actionKind, scope) - } + $: $workspaceStore && refresh && refreshLogs() + + let initialLoad = true + function refreshLogs() { + loadUsers() + loadResources() + loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope) + tick().then(() => { + initialLoad = false + }) } - function updateQueryParams({ - username, - perPage, - before, - after, - operation, - resource, - actionKind, - scope - }: { - username?: string | undefined - perPage?: number | undefined - before?: string | undefined - after?: string | undefined - operation?: string | undefined - resource?: string | undefined - actionKind?: ActionKind | undefined | 'all' - scope?: undefined | 'all_workspaces' | 'instance' - }) { + function updateLogs() { const queryParams: string[] = [] function addQueryParam(key: string, value: string | number | undefined | null) { @@ -145,7 +134,7 @@ } addQueryParam('username', username) - addQueryParam('page', 0) + addQueryParam('page', page) addQueryParam('perPage', perPage) addQueryParam('before', before) addQueryParam('after', after) @@ -158,45 +147,31 @@ } const query = '?' + queryParams.join('&') goto(query) + + loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope) + } + + function updateQueryParams() { + if (initialLoad) { + return + } + page = 1 + pageIndex = 1 + updateLogs() } function updatePageQueryParams(pageIndex?: number | undefined) { - const queryParams: string[] = [] - - function addQueryParam(key: string, value: string | number | undefined | null) { - if (value !== undefined && value !== null && value !== '' && value !== 'all') { - queryParams.push(`${key}=${encodeURIComponent(value)}`) - } + if (initialLoad) { + return } - - addQueryParam('username', username) - addQueryParam('page', pageIndex) - addQueryParam('perPage', perPage) - addQueryParam('before', before) - addQueryParam('after', after) - addQueryParam('operation', operation) - addQueryParam('resource', resource) - addQueryParam('actionKind', actionKind) - if (scope && $workspaceStore == 'admins') { - addQueryParam('scope', scope) - addQueryParam('workspace', 'admins') - } - - const query = '?' + queryParams.join('&') - goto(query) + page = pageIndex + updateLogs() } - $: updateQueryParams({ - username, - perPage, - before, - after, - operation, - resource, - actionKind, - scope - }) + // observe all the variables that should trigger an update + $: username, perPage, before, after, operation, resource, actionKind, scope, updateQueryParams() + // observe the pageIndex variable that should trigger an update $: updatePageQueryParams(pageIndex) window.addEventListener('popstate', handlePopState) diff --git a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte index 60c85ebefd..601fb9c567 100644 --- a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte +++ b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte @@ -13,6 +13,7 @@ export let logs: AuditLog[] = [] export let pageIndex: number | undefined = 1 export let perPage: number | undefined = 100 + export let hasMore: boolean = true export let actionKind: string | undefined = undefined export let operation: string | undefined = undefined export let selectedId: number | undefined = undefined @@ -69,8 +70,8 @@ paginated rounded={false} size="sm" + {hasMore} bind:perPage - shouldHidePagination={logs?.length === 0} > ID diff --git a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte index 1ea1298715..0c9791eefc 100644 --- a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte @@ -18,6 +18,7 @@ let username: string = $page.url.searchParams.get('username') ?? 'all' let pageIndex: number | undefined = Number($page.url.searchParams.get('page')) || 0 let before: string | undefined = $page.url.searchParams.get('before') ?? undefined + let hasMore: boolean = false let after: string | undefined = $page.url.searchParams.get('after') ?? undefined let perPage: number | undefined = Number($page.url.searchParams.get('perPage')) || 100 let operation: string = $page.url.searchParams.get('operation') ?? 'all' @@ -61,6 +62,7 @@ bind:pageIndex bind:perPage bind:scope + bind:hasMore />
@@ -75,6 +77,7 @@ bind:operation bind:resource bind:scope + bind:hasMore /> @@ -100,6 +103,7 @@ bind:operation bind:usernameFilter={username} bind:resourceFilter={resource} + bind:hasMore on:select={(e) => { selectedId = e.detail }} @@ -114,6 +118,7 @@