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.
2.0 kB · 71 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172"use client";
import type { RouterOutputs } from "@openstatus/api";import { Badge } from "@openstatus/ui/components/ui/badge";import type { ColumnDef } from "@tanstack/react-table";import Link from "next/link";
import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header";import { type NotifierProvider, config } from "@/data/notifications.client";
import { TableCellBadge } from "../table-cell-badge";import { DataTableRowActions } from "./data-table-row-actions";
type Notifier = RouterOutputs["notification"]["list"][number];
export const columns: ColumnDef<Notifier>[] = [ { accessorKey: "name", header: ({ column }) => ( <DataTableColumnHeader column={column} title="Name" /> ), enableHiding: false, }, { accessorKey: "provider", header: "Provider", enableSorting: false, enableHiding: false, cell: ({ row }) => { const provider = row.getValue("provider") as NotifierProvider; const Icon = config[provider].icon; return ( <Badge variant="secondary" className="px-1.5 font-mono text-[10px]"> <Icon className="size-2.5" /> {config[provider].label} </Badge> ); }, }, { accessorKey: "monitors", header: "Monitors", enableSorting: false, enableHiding: false, cell: ({ row }) => { const value = row.getValue("monitors"); if (Array.isArray(value) && value.length > 0 && "name" in value[0]) { return ( <div className="flex flex-wrap gap-1"> {value.map((m) => ( <Link href={`/monitors/${m.id}`} key={m.id}> <TableCellBadge value={m.name} /> </Link> ))} </div> ); } return <span className="text-muted-foreground">-</span>; }, meta: { cellClassName: "tabular-nums font-mono", }, }, { id: "actions", cell: ({ row }) => <DataTableRowActions row={row} />, meta: { cellClassName: "w-8", }, },];