starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-07 00:01:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): improve pagination handling and filter refreshes (#5378)

Browse Source 
* fix pagination handling and filter refreshes

* wip

* fix window navigation
This commit is contained in:
Guilhem
2025-02-26 09:42:00 +01:00
committed by GitHub
parent 378ee87e85
commit 7486d17dbe
3 changed files with 42 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
+35 -60
View File
@@ -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)
frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
+2 -1
View File
@@ -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}
>
<Head>
<Cell first head>ID</Cell>
frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
+5
View File
@@ -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
/>
</div>
<div class="2xl:hidden">
@@ -75,6 +77,7 @@
bind:operation
bind:resource
bind:scope
bind:hasMore
/>
</svelte:fragment>
</AuditLogMobileFilters>
@@ -100,6 +103,7 @@
bind:operation
bind:usernameFilter={username}
bind:resourceFilter={resource}
bind:hasMore
on:select={(e) => {
selectedId = e.detail
}}
@@ -114,6 +118,7 @@
<div class="md:hidden">
<AuditLogsTable
{logs}
bind:hasMore
bind:pageIndex
bind:perPage
bind:actionKind