Skip to content

Commit b72c3a9

Browse files
committed
Fix audit log pagination
1 parent b2fd91b commit b72c3a9

File tree

3 files changed

+57
-47
lines changed

3 files changed

+57
-47
lines changed

site/src/pages/AuditPage/AuditPage.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
import { useMachine } from "@xstate/react"
22
import { FC } from "react"
33
import { Helmet } from "react-helmet-async"
4+
import { useNavigate, useSearchParams } from "react-router-dom"
45
import { pageTitle } from "util/page"
56
import { auditMachine } from "xServices/audit/auditXService"
67
import { AuditPageView } from "./AuditPageView"
78

89
const AuditPage: FC = () => {
10+
const navigate = useNavigate()
11+
const [searchParams] = useSearchParams()
12+
const currentPage = searchParams.get("page") ? Number(searchParams.get("page")) : 1
913
const [auditState, auditSend] = useMachine(auditMachine, {
1014
context: {
11-
page: 1,
15+
page: currentPage,
1216
limit: 25,
1317
},
18+
actions: {
19+
onPageChange: ({ page }) => {
20+
navigate({
21+
search: `?page=${page}`,
22+
})
23+
},
24+
},
1425
})
1526
const { auditLogs, count, page, limit } = auditState.context
1627

@@ -31,6 +42,7 @@ const AuditPage: FC = () => {
3142
auditSend("PREVIOUS")
3243
}}
3344
onGoToPage={(page) => {
45+
console.log("PAGE", page)
3446
auditSend("GO_TO_PAGE", { page })
3547
}}
3648
/>

site/src/pages/AuditPage/AuditPageView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
8383
</Table>
8484
</TableContainer>
8585

86-
{!isLoading && count > limit ? (
86+
{count && count > limit ? (
8787
<PaginationWidget
8888
prevLabel=""
8989
nextLabel=""

site/src/xServices/audit/auditXService.ts

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ export const auditMachine = createMachine(
1010
schema: {
1111
context: {} as { auditLogs?: AuditLog[]; count?: number; page: number; limit: number },
1212
services: {} as {
13-
loadAuditLogs: {
14-
data: AuditLog[]
15-
}
16-
loadAuditLogsCount: {
17-
data: number
13+
loadAuditLogsAndCount: {
14+
data: {
15+
auditLogs: AuditLog[]
16+
count: number
17+
}
1818
}
1919
},
2020
events: {} as
@@ -33,42 +33,35 @@ export const auditMachine = createMachine(
3333
initial: "loading",
3434
states: {
3535
loading: {
36-
invoke: [
37-
{
38-
src: "loadAuditLogs",
39-
onDone: {
40-
actions: ["assignAuditLogs"],
41-
},
42-
onError: {
43-
target: "error",
44-
actions: ["displayLoadAuditLogsError"],
45-
},
36+
// Right now, XState doesn't a good job with state + context typing so
37+
// this forces the AuditPageView to showing the loading state when the
38+
// loading state is called again by cleaning up the audit logs data
39+
entry: "clearPreviousAuditLogs",
40+
invoke: {
41+
src: "loadAuditLogsAndCount",
42+
onDone: {
43+
target: "success",
44+
actions: ["assignAuditLogsAndCount"],
4645
},
47-
{
48-
src: "loadAuditLogsCount",
49-
onDone: {
50-
actions: ["assignCount"],
51-
},
52-
onError: {
53-
target: "error",
54-
actions: ["displayLoadAuditLogsCountError"],
55-
},
46+
onError: {
47+
target: "error",
48+
actions: ["displayApiError"],
5649
},
57-
],
50+
},
5851
onDone: "success",
5952
},
6053
success: {
6154
on: {
6255
NEXT: {
63-
actions: ["assignNextPage"],
56+
actions: ["assignNextPage", "onPageChange"],
6457
target: "loading",
6558
},
6659
PREVIOUS: {
67-
actions: ["assignPreviousPage"],
60+
actions: ["assignPreviousPage", "onPageChange"],
6861
target: "loading",
6962
},
7063
GO_TO_PAGE: {
71-
actions: ["assignPage"],
64+
actions: ["assignPage", "onPageChange"],
7265
target: "loading",
7366
},
7467
},
@@ -80,11 +73,12 @@ export const auditMachine = createMachine(
8073
},
8174
{
8275
actions: {
83-
assignAuditLogs: assign({
84-
auditLogs: (_, event) => event.data,
76+
clearPreviousAuditLogs: assign({
77+
auditLogs: (_) => undefined,
8578
}),
86-
assignCount: assign({
87-
count: (_, event) => event.data,
79+
assignAuditLogsAndCount: assign({
80+
auditLogs: (_, event) => event.data.auditLogs,
81+
count: (_, event) => event.data.count,
8882
}),
8983
assignNextPage: assign({
9084
page: ({ page }) => page + 1,
@@ -93,25 +87,29 @@ export const auditMachine = createMachine(
9387
page: ({ page }) => page - 1,
9488
}),
9589
assignPage: assign({
96-
page: ({ page }) => page,
90+
page: (_, { page }) => page,
9791
}),
98-
displayLoadAuditLogsError: (_, event) => {
92+
displayApiError: (_, event) => {
9993
const message = getErrorMessage(event.data, "Error on loading audit logs.")
10094
displayError(message)
10195
},
102-
displayLoadAuditLogsCountError: (_, event) => {
103-
const message = getErrorMessage(event.data, "Error on loading number of audit log entries.")
104-
displayError(message)
105-
},
10696
},
10797
services: {
108-
loadAuditLogs: ({ page, limit }, _) =>
109-
getAuditLogs({
110-
// The page in the API starts at 0
111-
offset: (page - 1) * limit,
112-
limit,
113-
}).then((data) => data.audit_logs),
114-
loadAuditLogsCount: () => getAuditLogsCount().then((data) => data.count),
98+
loadAuditLogsAndCount: async ({ page, limit }, _) => {
99+
const [auditLogs, count] = await Promise.all([
100+
getAuditLogs({
101+
// The page in the API starts at 0
102+
offset: (page - 1) * limit,
103+
limit,
104+
}).then((data) => data.audit_logs),
105+
getAuditLogsCount().then((data) => data.count),
106+
])
107+
108+
return {
109+
auditLogs,
110+
count,
111+
}
112+
},
115113
},
116114
},
117115
)

0 commit comments

Comments
 (0)