diff --git a/apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/(overview)/page.tsx b/apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/(overview)/page.tsx index 8e4b02cd..ae310d3e 100644 --- a/apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/(overview)/page.tsx +++ b/apps/web/src/app/app/[workspaceSlug]/(dashboard)/monitors/(overview)/page.tsx @@ -1,5 +1,7 @@ import * as React from "react"; import Link from "next/link"; +import { notFound } from "next/navigation"; +import { z } from "zod"; import { OSTinybird } from "@openstatus/tinybird"; import { Button } from "@openstatus/ui"; @@ -17,10 +19,27 @@ const tb = new OSTinybird({ token: env.TINY_BIRD_API_KEY }); export const dynamic = "force-dynamic"; -export default async function MonitorPage() { +/** + * allowed URL search params + */ +const searchParamsSchema = z.object({ + tags: z + .string() + .transform((v) => v?.split(",")) + .optional(), +}); + +export default async function MonitorPage({ + searchParams, +}: { + searchParams: { [key: string]: string | string[] | undefined }; +}) { + const search = searchParamsSchema.safeParse(searchParams); const monitors = await api.monitor.getMonitorsByWorkspace.query(); const isLimitReached = await api.monitor.isMonitorLimitReached.query(); + if (!search.success) return notFound(); + if (monitors?.length === 0) return ( - + v.value !== undefined, + )} + columns={columns} + data={monitorsWithData} + tags={tags} + /> {isLimitReached ? : null} {/* */} diff --git a/apps/web/src/components/data-table/monitor/data-table.tsx b/apps/web/src/components/data-table/monitor/data-table.tsx index cefc2a4e..7abf83f5 100644 --- a/apps/web/src/components/data-table/monitor/data-table.tsx +++ b/apps/web/src/components/data-table/monitor/data-table.tsx @@ -33,16 +33,17 @@ interface DataTableProps { columns: ColumnDef[]; data: TData[]; tags?: MonitorTag[]; + defaultColumnFilters?: ColumnFiltersState; } export function DataTable({ columns, data, tags, + defaultColumnFilters = [], }: DataTableProps) { - const [columnFilters, setColumnFilters] = React.useState( - [], - ); + const [columnFilters, setColumnFilters] = + React.useState(defaultColumnFilters); const [columnVisibility, setColumnVisibility] = React.useState({ public: false, // default is true