Openstatus www.openstatus.dev
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

๐Ÿ› 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
··· 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
··· 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 ))}