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.
5.4 kB · 159 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160"use client";
import type { RouterOutputs } from "@openstatus/api";import { currentImpactsFromUpdates } from "@openstatus/db/src/schema/page_components/constants";import { Add } from "@openstatus/icons";import { Button } from "@openstatus/ui/components/ui/button";import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@openstatus/ui/components/ui/table";import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,} from "@openstatus/ui/components/ui/tooltip";import { useMutation, useQueryClient } from "@tanstack/react-query";import { useParams } from "next/navigation";
import { ProcessMessage } from "@/components/content/process-message";import { TableCellDate } from "@/components/data-table/table-cell-date";import { FormSheetStatusReportUpdate } from "@/components/forms/status-report-update/sheet";import { icons } from "@/data/icons";import { colors, defaultComponentImpacts, getNextStatus, toCreateStatusReportUpdateInput,} from "@/data/status-report-updates.client";import { useTRPC } from "@/lib/trpc/client";import { cn } from "@/lib/utils";
import { DataTableRowActions } from "./data-table-row-actions";
type StatusReportUpdates = RouterOutputs["statusReport"]["list"][number]["updates"];
export function DataTable({ updates, reportId, components = [],}: { updates: StatusReportUpdates; reportId: number; components?: { id: number; name: string }[];}) { const reportHasImpacts = updates.some((u) => u.componentImpacts.length > 0); const currentImpacts = currentImpactsFromUpdates(updates); const nextStatus = getNextStatus( updates[updates.length - 1]?.status ?? "investigating", ); const trpc = useTRPC(); const { id } = useParams<{ id: string }>(); const queryClient = useQueryClient(); const sendStatusReportUpdateMutation = useMutation( trpc.subscriberNotification.statusReport.mutationOptions(), ); const createStatusReportUpdateMutation = useMutation( trpc.statusReport.createStatusReportUpdate.mutationOptions({ onSuccess: (update) => { if (update?.notifySubscribers) { sendStatusReportUpdateMutation.mutate({ id: update.id }); } queryClient.invalidateQueries({ queryKey: trpc.statusReport.list.queryKey({ pageId: Number.parseInt(id), }), }); queryClient.invalidateQueries({ queryKey: trpc.page.list.queryKey(), }); queryClient.invalidateQueries({ queryKey: trpc.statusReport.list.queryKey({ period: "7d", }), }); }, }), );
return ( <Table className="w-full"> <TableHeader> <TableRow> <TableHead className="w-7"> <span className="sr-only">Status</span> </TableHead> <TableHead>Message</TableHead> <TableHead>Date</TableHead> <TableHead className="w-[px]"> <TooltipProvider> <Tooltip> <FormSheetStatusReportUpdate defaultValues={{ status: nextStatus, componentImpacts: defaultComponentImpacts({ components, currentImpacts, nextStatus, }), }} components={components} onSubmit={async (values) => { await createStatusReportUpdateMutation.mutateAsync( toCreateStatusReportUpdateInput({ statusReportId: reportId, values, reportHasImpacts, }), ); }} > <TooltipTrigger asChild> <Button size="icon" className="ml-auto flex h-7 w-7 p-0"> <Add /> <span className="sr-only">Create Report Update</span> </Button> </TooltipTrigger> </FormSheetStatusReportUpdate> <TooltipContent side="left" align="center"> Create Report Update </TooltipContent> </Tooltip> </TooltipProvider> </TableHead> </TableRow> </TableHeader> <TableBody> {updates.map((update) => { const Icon = icons.status[update.status]; return ( <TableRow key={update.id}> <TableCell> <div className="p-1"> <Icon className={cn(colors[update.status])} size={20} /> </div> </TableCell> <TableCell> <div className="prose dark:prose-invert prose-sm text-muted-foreground line-clamp-3 text-wrap"> <ProcessMessage value={update.message} /> </div> </TableCell> <TableCell className="text-muted-foreground w-[170px]"> <TableCellDate value={update.date} /> </TableCell> <TableCell className="w-8"> <DataTableRowActions row={update} components={components} /> </TableCell> </TableRow> ); })} </TableBody> </Table> );}