openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { BlockWrapper } from "@/components/content/block-wrapper";
4import {
5 EmptyStateContainer,
6 EmptyStateDescription,
7 EmptyStateTitle,
8} from "@/components/content/empty-state";
9import { DataTable } from "@/components/ui/data-table/data-table";
10import { DataTablePaginationSimple } from "@/components/ui/data-table/data-table-pagination";
11import { Skeleton } from "@/components/ui/skeleton";
12import { useTRPC } from "@/lib/trpc/client";
13import { useQuery } from "@tanstack/react-query";
14
15import { useMemo } from "react";
16import { getColumns } from "./columns";
17
18export function AuditLogsWrapper({
19 monitorId,
20 interval,
21}: {
22 monitorId: string;
23 interval: number;
24}) {
25 const trpc = useTRPC();
26
27 const { data: auditLogs, isLoading } = useQuery(
28 trpc.tinybird.auditLog.queryOptions({ monitorId, interval }),
29 );
30
31 const { data: privateLocations } = useQuery(
32 trpc.privateLocation.list.queryOptions(),
33 );
34
35 const columns = useMemo(
36 () => getColumns(privateLocations),
37 [privateLocations],
38 );
39
40 if (isLoading) {
41 return (
42 <div className="flex h-full max-h-48 min-h-48 flex-col">
43 <Skeleton className="h-full w-full flex-1" />
44 </div>
45 );
46 }
47
48 if (!auditLogs?.data || auditLogs.data.length === 0) {
49 return (
50 <EmptyStateContainer>
51 <EmptyStateTitle>No audit logs</EmptyStateTitle>
52 <EmptyStateDescription>
53 No audit logs found for this monitor.
54 </EmptyStateDescription>
55 </EmptyStateContainer>
56 );
57 }
58
59 return (
60 <BlockWrapper>
61 <DataTable
62 columns={columns}
63 data={auditLogs.data}
64 paginationComponent={DataTablePaginationSimple}
65 />
66 </BlockWrapper>
67 );
68}
69
70export default AuditLogsWrapper;