Openstatus
www.openstatus.dev
🐛 pagination monitor (#888)
authored by
Thibault Le Ouay
and committed by
GitHub
60f79f79
53c84a74
+27
-10
+15
-8
apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/(overview)/page.tsx
+15
-8
apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/(overview)/page.tsx
···
11
11
import { DataTable } from "@/components/data-table/monitor/data-table";
12
12
import { env } from "@/env";
13
13
import { api } from "@/trpc/server";
14
+
import { DataTableWrapper } from "../[id]/data/_components/data-table-wrapper";
14
15
15
16
const tb = new OSTinybird({ token: env.TINY_BIRD_API_KEY });
16
17
···
32
33
if (v === "true") return true;
33
34
if (v === "false") return false;
34
35
return undefined;
35
-
}),
36
+
})
36
37
)
37
38
.optional(),
39
+
pageSize: z.coerce.number().optional().default(10),
40
+
pageIndex: z.coerce.number().optional().default(0),
38
41
});
39
42
40
43
export default async function MonitorPage({
···
74
77
{
75
78
monitorId: String(monitor.id),
76
79
},
77
-
{ cache: "no-store", revalidate: 0 },
80
+
{ cache: "no-store", revalidate: 0 }
78
81
);
79
82
80
83
const data = await tb.endpointStatusPeriod("7d")(
81
84
{
82
85
monitorId: String(monitor.id),
83
86
},
84
-
{ cache: "no-store", revalidate: 0 },
87
+
{ cache: "no-store", revalidate: 0 }
85
88
);
86
89
87
90
const [current] = metrics?.sort((a, b) =>
88
-
(a.lastTimestamp || 0) - (b.lastTimestamp || 0) < 0 ? 1 : -1,
91
+
(a.lastTimestamp || 0) - (b.lastTimestamp || 0) < 0 ? 1 : -1
89
92
) || [undefined];
90
93
91
94
const incidents = _incidents.filter(
92
-
(incident) => incident.monitorId === monitor.id,
95
+
(incident) => incident.monitorId === monitor.id
93
96
);
94
97
95
98
const tags = monitor.monitorTagsToMonitors.map(
96
-
({ monitorTag }) => monitorTag,
99
+
({ monitorTag }) => monitorTag
97
100
);
98
101
99
102
const maintenances = _maintenances.filter((maintenance) =>
100
-
maintenance.monitors.includes(monitor.id),
103
+
maintenance.monitors.includes(monitor.id)
101
104
);
102
105
103
106
return { monitor, metrics: current, data, incidents, maintenances, tags };
104
-
}),
107
+
})
105
108
);
106
109
107
110
return (
···
114
117
columns={columns}
115
118
data={monitorsWithData}
116
119
tags={tags}
120
+
defaultPagination={{
121
+
pageIndex: search.data.pageIndex,
122
+
pageSize: search.data.pageSize,
123
+
}}
117
124
/>
118
125
{isLimitReached ? <Limit /> : null}
119
126
</>
+12
-2
apps/web/src/components/data-table/monitor/data-table.tsx
+12
-2
apps/web/src/components/data-table/monitor/data-table.tsx
···
3
3
import type {
4
4
ColumnDef,
5
5
ColumnFiltersState,
6
+
PaginationState,
6
7
Table as TTable,
7
8
VisibilityState,
8
9
} from "@tanstack/react-table";
···
11
12
getCoreRowModel,
12
13
getFacetedRowModel,
13
14
getFilteredRowModel,
15
+
getPaginationRowModel,
14
16
useReactTable,
15
17
} from "@tanstack/react-table";
16
18
import * as React from "react";
···
36
38
data: TData[];
37
39
tags?: MonitorTag[];
38
40
defaultColumnFilters?: ColumnFiltersState;
41
+
defaultPagination?: PaginationState;
39
42
}
40
43
41
44
export function DataTable<TData, TValue>({
···
43
46
data,
44
47
tags,
45
48
defaultColumnFilters = [],
49
+
defaultPagination = { pageIndex: 0, pageSize: 10 },
46
50
}: DataTableProps<TData, TValue>) {
47
51
const [columnFilters, setColumnFilters] =
48
52
React.useState<ColumnFiltersState>(defaultColumnFilters);
···
51
55
public: false, // default is true
52
56
id: false, // we hide the id column
53
57
});
58
+
59
+
const [pagination, setPagination] =
60
+
React.useState<PaginationState>(defaultPagination);
54
61
55
62
const table = useReactTable({
56
63
data,
···
58
65
state: {
59
66
columnFilters,
60
67
columnVisibility,
68
+
pagination,
61
69
},
70
+
onPaginationChange: setPagination,
71
+
getPaginationRowModel: getPaginationRowModel(),
62
72
onColumnFiltersChange: setColumnFilters,
63
73
onColumnVisibilityChange: setColumnVisibility,
64
74
getFilteredRowModel: getFilteredRowModel(),
···
113
123
? null
114
124
: flexRender(
115
125
header.column.columnDef.header,
116
-
header.getContext(),
126
+
header.getContext()
117
127
)}
118
128
</TableHead>
119
129
);
···
132
142
<TableCell key={cell.id}>
133
143
{flexRender(
134
144
cell.column.columnDef.cell,
135
-
cell.getContext(),
145
+
cell.getContext()
136
146
)}
137
147
</TableCell>
138
148
))}