Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
8.1 kB · 276 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277"use client";
import type { RouterOutputs } from "@openstatus/api";import { Badge } from "@openstatus/ui/components/ui/badge";import { Checkbox } from "@openstatus/ui/components/ui/checkbox";import type { ColumnDef } from "@tanstack/react-table";import { formatDistanceToNow } from "date-fns";
import { TableCellLink } from "@/components/data-table/table-cell-link";import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header";
import { TableCellSkeleton } from "../dable-cell-skeleton";import { TableCellDate } from "../table-cell-date";import { TableCellNumber } from "../table-cell-number";import { TableCellUnavailable } from "../table-cell-unavailable";import { DataTableRowActions } from "./data-table-row-actions";
type Monitor = RouterOutputs["monitor"]["list"][number] & { globalMetrics?: | RouterOutputs["tinybird"]["globalMetrics"]["data"][number] // NOTE: after loading the data, if the monitor has no metrics, the value will be `false` | false;};
export const columns: ColumnDef<Monitor>[] = [ { id: "select", header: ({ table }) => ( <Checkbox checked={ table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate") } onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" /> ), cell: ({ row }) => ( <Checkbox checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(!!value)} aria-label="Select row" /> ), enableSorting: false, enableHiding: false, }, { accessorKey: "name", header: ({ column }) => ( <DataTableColumnHeader column={column} title="Name" /> ), cell: ({ row }) => { return ( <TableCellLink value={row.getValue("name")} href={`/monitors/${row.original.id}/overview`} /> ); }, enableHiding: false, meta: { cellClassName: "max-w-[150px] min-w-max", }, }, { accessorKey: "url", header: ({ column }) => ( <DataTableColumnHeader column={column} title="Endpoint" /> ), cell: ({ row }) => { return ( <TableCellLink value={row.getValue("url")} href={row.original.url} /> ); }, enableHiding: true, meta: { cellClassName: "max-w-[150px] min-w-max", }, }, { accessorKey: "jobType", header: "Type", enableHiding: true, }, { id: "status", accessorFn: (row) => { console.log(row); return row.active ? row.status : "inactive"; }, header: "Status", cell: ({ row }) => { const value = String(row.getValue("status"));
switch (value) { case "active": return <div className="text-success font-mono">{value}</div>; case "degraded": return <div className="text-warning font-mono">{value}</div>; case "error": return <div className="text-destructive font-mono">{value}</div>; default: return <div className="text-muted-foreground font-mono">{value}</div>; } }, filterFn: (row, _, value) => { if (Array.isArray(value)) { if (value.includes("inactive")) { return !row.original.active; } if (value.includes("active")) { return !!row.original.active && row.original.status === "active"; } return value.includes(row.original.status); } return row.original.status === value; }, enableSorting: false, enableHiding: false, enableGlobalFilter: false, }, { accessorKey: "active", enableHiding: true, enableGlobalFilter: false, }, { accessorKey: "tags", header: "Tags", cell: ({ row }) => { const value = row.getValue("tags"); if (!Array.isArray(value)) return null; if (value.length === 0) { return <div className="text-muted-foreground">-</div>; } return ( <div className="group/badges flex flex-wrap -space-x-2"> {value.map((tag) => ( <Badge key={tag.id} variant="outline" className="bg-background relative flex translate-x-0 items-center gap-1.5 rounded-full transition-transform hover:z-10 hover:translate-x-1" > <div className="size-2.5 rounded-full" style={{ backgroundColor: tag.color }} /> <span>{tag.name}</span> </Badge> ))} </div> ); }, filterFn: (row, _, value) => { const tagIds = row.original.tags.map((tag) => tag.id); if (Array.isArray(value)) { return value.some((v) => tagIds.includes(v)); } return tagIds.includes(value); }, getUniqueValues: (row) => row.tags.map((tag) => tag.id), enableSorting: false, enableHiding: false, enableGlobalFilter: false, }, { id: "lastIncident", header: "Last Incident", accessorFn: (row) => row.incidents?.[0]?.createdAt, cell: ({ row }) => { const value = row.getValue("lastIncident"); return <TableCellDate value={value} formatStr="LLL dd, y" />; }, enableHiding: false, enableGlobalFilter: false, }, // { // id: "uptime", // accessorFn: (row) => `uptime-${row.id}`, // header: "Last Week", // cell: ({ row }) => { // return ( // <ChartBarUptimeLight // monitorId={String(row.original.id)} // type={row.original.jobType as "http" | "tcp"} // /> // ); // }, // enableHiding: false, // enableGlobalFilter: false, // }, { id: "lastTimestamp", header: "Last Checked", accessorFn: (row) => typeof row.globalMetrics === "object" ? row.globalMetrics.lastTimestamp : row.globalMetrics, cell: ({ row }) => { const value = row.getValue("lastTimestamp"); if (value === undefined) return <TableCellSkeleton className="w-full" />; return ( <TableCellDate value={ typeof value === "number" ? formatDistanceToNow(new Date(value), { addSuffix: true }) : value } /> ); }, enableHiding: false, enableGlobalFilter: false, }, { id: "p50", accessorFn: (row) => typeof row.globalMetrics === "object" ? row.globalMetrics.p50Latency : row.globalMetrics, header: ({ column }) => ( <DataTableColumnHeader column={column} title="P50" /> ), cell: ({ row }) => { const value = row.getValue("p50"); if (value === undefined) return <TableCellSkeleton />; if (!value) return <TableCellUnavailable />; return <TableCellNumber value={value} unit="ms" />; }, enableHiding: false, }, { id: "p90", accessorFn: (row) => typeof row.globalMetrics === "object" ? row.globalMetrics.p90Latency : row.globalMetrics, header: ({ column }) => ( <DataTableColumnHeader column={column} title="P90" /> ), cell: ({ row }) => { const value = row.getValue("p90"); if (value === undefined) return <TableCellSkeleton />; if (!value) return <TableCellUnavailable />; return <TableCellNumber value={value} unit="ms" />; }, enableHiding: false, enableGlobalFilter: false, }, { id: "p95", accessorFn: (row) => typeof row.globalMetrics === "object" ? row.globalMetrics.p95Latency : row.globalMetrics, header: ({ column }) => ( <DataTableColumnHeader column={column} title="P95" /> ), cell: ({ row }) => { const value = row.getValue("p95"); if (value === undefined) return <TableCellSkeleton />; if (!value) return <TableCellUnavailable />; return <TableCellNumber value={value} unit="ms" />; }, enableHiding: false, enableGlobalFilter: false, }, { id: "actions", cell: ({ row }) => <DataTableRowActions row={row} />, meta: { cellClassName: "w-8", }, },];