openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { Badge } from "@/components/ui/badge";
4import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header";
5import { type NotifierProvider, config } from "@/data/notifications.client";
6import type { RouterOutputs } from "@openstatus/api";
7import type { ColumnDef } from "@tanstack/react-table";
8import Link from "next/link";
9import { TableCellBadge } from "../table-cell-badge";
10import { DataTableRowActions } from "./data-table-row-actions";
11
12type Notifier = RouterOutputs["notification"]["list"][number];
13
14export const columns: ColumnDef<Notifier>[] = [
15 {
16 accessorKey: "name",
17 header: ({ column }) => (
18 <DataTableColumnHeader column={column} title="Name" />
19 ),
20 enableHiding: false,
21 },
22 {
23 accessorKey: "provider",
24 header: "Provider",
25 enableSorting: false,
26 enableHiding: false,
27 cell: ({ row }) => {
28 const provider = row.getValue("provider") as NotifierProvider;
29 const Icon = config[provider].icon;
30 return (
31 <Badge variant="secondary" className="px-1.5 font-mono text-[10px]">
32 <Icon className="size-2.5" />
33 {config[provider].label}
34 </Badge>
35 );
36 },
37 },
38 {
39 accessorKey: "monitors",
40 header: "Monitors",
41 enableSorting: false,
42 enableHiding: false,
43 cell: ({ row }) => {
44 const value = row.getValue("monitors");
45 if (Array.isArray(value) && value.length > 0 && "name" in value[0]) {
46 return (
47 <div className="flex flex-wrap gap-1">
48 {value.map((m) => (
49 <Link href={`/monitors/${m.id}`} key={m.id}>
50 <TableCellBadge value={m.name} />
51 </Link>
52 ))}
53 </div>
54 );
55 }
56 return <span className="text-muted-foreground">-</span>;
57 },
58 meta: {
59 cellClassName: "tabular-nums font-mono",
60 },
61 },
62 {
63 id: "actions",
64 cell: ({ row }) => <DataTableRowActions row={row} />,
65 meta: {
66 cellClassName: "w-8",
67 },
68 },
69];