-72

apps/web/src/components/billing/pro-banner.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { ArrowRight, ChevronRight, Rocket, X } from "lucide-react"; 4 4 - import Link from "next/link"; 5 5 - import { useParams } from "next/navigation"; 6 6 - import { useEffect, useState } from "react"; 7 7 - 8 8 - import { Button } from "@openstatus/ui/src/components/button"; 9 9 - 10 10 - import { api } from "@/trpc/client"; 11 11 - 12 12 - export function ProBanner() { 13 13 - const [hidden, setHidden] = useState(true); 14 14 - const params = useParams(); 15 15 - const workspaceSlug = params?.workspaceSlug; 16 16 - 17 17 - function onClick() { 18 18 - if (document) { 19 19 - const expires = new Date(); 20 20 - expires.setDate(expires.getDate() + 7); 21 21 - // store the cookie for 7 days and only for a specific workspace 22 22 - document.cookie = `hide-pro-banner=true; expires=${expires}; path=/app/${workspaceSlug}`; 23 23 - } 24 24 - setHidden(true); 25 25 - } 26 26 - 27 27 - useEffect(() => { 28 28 - async function configureProBanner() { 29 29 - const workspace = await api.workspace.getWorkspace.query(); 30 30 - // make sure to display the banner only for free plans 31 31 - if (document && workspace?.plan === "free") { 32 32 - const cookie = document.cookie 33 33 - .split("; ") 34 34 - .find((row) => row.startsWith("hide-pro-banner")); 35 35 - if (!cookie) { 36 36 - setHidden(false); 37 37 - } 38 38 - } 39 39 - } 40 40 - configureProBanner(); 41 41 - }, []); 42 42 - 43 43 - if (hidden) return null; 44 44 - 45 45 - return ( 46 46 - <div className="grid gap-2 rounded-md border border-border p-3"> 47 47 - <div className="flex items-center justify-between"> 48 48 - <p className="inline-flex items-center font-medium text-sm"> 49 49 - OpenStatus Subscription <Rocket className="ml-2 h-4 w-4" /> 50 50 - </p> 51 51 - <Button 52 52 - variant="ghost" 53 53 - size="icon" 54 54 - onClick={onClick} 55 55 - className="h-7 w-7" 56 56 - > 57 57 - <X className="h-4 w-4" /> 58 58 - </Button> 59 59 - </div> 60 60 - <p className="text-muted-foreground text-sm"> 61 61 - Unlock custom domains, teams, 1 min. checks and more. 62 62 - </p> 63 63 - <Button variant="secondary" size="sm" asChild> 64 64 - <Link href={`/app/${workspaceSlug}/settings/billing`} className="group"> 65 65 - <span className="mr-0.5">Upgrade</span>{" "} 66 66 - <ArrowRight className="relative inline h-4 w-0 transition-all group-hover:w-4" /> 67 67 - <ChevronRight className="relative inline h-4 w-4 transition-all group-hover:w-0" /> 68 68 - </Link> 69 69 - </Button> 70 70 - </div> 71 71 - ); 72 72 - }

-38

apps/web/src/components/billing/pro-feature-alert.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { AlertTriangle } from "lucide-react"; 4 4 - import Link from "next/link"; 5 5 - import { useParams } from "next/navigation"; 6 6 - 7 7 - import type { WorkspacePlan } from "@openstatus/db/src/schema/workspaces/validation"; 8 8 - import { Alert, AlertDescription, AlertTitle } from "@openstatus/ui"; 9 9 - 10 10 - interface Props { 11 11 - feature: string; 12 12 - workspacePlan?: WorkspacePlan; 13 13 - } 14 14 - 15 15 - export function ProFeatureAlert({ feature, workspacePlan = "team" }: Props) { 16 16 - const params = useParams<{ workspaceSlug: string }>(); 17 17 - return ( 18 18 - <Alert> 19 19 - <AlertTriangle className="h-4 w-4" /> 20 20 - <AlertTitle> 21 21 - {feature} is a <span className="capitalize">{workspacePlan}</span>{" "} 22 22 - feature. 23 23 - </AlertTitle> 24 24 - <AlertDescription> 25 25 - If you want to use{" "} 26 26 - <span className="lowercase underline decoration-dotted">{feature}</span> 27 27 - , please upgrade your plan. Go to{" "} 28 28 - <Link 29 29 - href={`/app/${params.workspaceSlug}/settings/billing`} 30 30 - className="inline-flex items-center font-medium text-foreground underline underline-offset-4 hover:no-underline" 31 31 - > 32 32 - settings 33 33 - </Link> 34 34 - . 35 35 - </AlertDescription> 36 36 - </Alert> 37 37 - ); 38 38 - }

-17

apps/web/src/components/billing/pro-feature-badge.tsx

reviewed

··· 1 1 - import type { WorkspacePlan } from "@openstatus/db/src/schema"; 2 2 - import { Badge } from "@openstatus/ui"; 3 3 - import { upgradePlan } from "./utils"; 4 4 - 5 5 - export function ProFeatureBadge({ 6 6 - plan, 7 7 - minRequiredPlan, 8 8 - }: { 9 9 - plan: WorkspacePlan; 10 10 - minRequiredPlan: WorkspacePlan; 11 11 - }) { 12 12 - const shouldUpgrade = upgradePlan(plan, minRequiredPlan); 13 13 - 14 14 - if (!shouldUpgrade) return null; 15 15 - 16 16 - return <Badge>{minRequiredPlan}</Badge>; 17 17 - }

-59

apps/web/src/components/billing/pro-feature-hover-card.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { useState } from "react"; 4 4 - 5 5 - import type { WorkspacePlan } from "@openstatus/db/src/schema/workspaces/validation"; 6 6 - import { HoverCard, HoverCardContent, HoverCardTrigger } from "@openstatus/ui"; 7 7 - import { ArrowUpRight } from "lucide-react"; 8 8 - import Link from "next/link"; 9 9 - import { upgradePlan } from "./utils"; 10 10 - 11 11 - // TBD: we could useParams() to access workspaceSlug 12 12 - 13 13 - export function ProFeatureHoverCard({ 14 14 - children, 15 15 - plan, 16 16 - minRequiredPlan, 17 17 - workspaceSlug, 18 18 - }: { 19 19 - children: React.ReactNode; 20 20 - plan: WorkspacePlan; 21 21 - minRequiredPlan: WorkspacePlan; 22 22 - workspaceSlug: string; 23 23 - }) { 24 24 - const [open, setOpen] = useState(false); 25 25 - const shouldUpgrade = upgradePlan(plan, minRequiredPlan); 26 26 - 27 27 - if (!shouldUpgrade) return children; 28 28 - 29 29 - // TODO: add a <Badge /> component to display the plan name 30 30 - 31 31 - return ( 32 32 - <HoverCard openDelay={0} open={open} onOpenChange={setOpen}> 33 33 - <HoverCardTrigger 34 34 - onClick={() => setOpen(true)} 35 35 - className="relative cursor-not-allowed opacity-70" 36 36 - asChild 37 37 - > 38 38 - {children} 39 39 - </HoverCardTrigger> 40 40 - <HoverCardContent side="top" className="grid gap-2"> 41 41 - <p className="text-muted-foreground text-sm"> 42 42 - This feature is only available starting from the{" "} 43 43 - <span className="font-semibold capitalize">{minRequiredPlan}</span>{" "} 44 44 - plan. 45 45 - </p> 46 46 - <p className="text-sm"> 47 47 - <Link 48 48 - href={`/app/${workspaceSlug}/settings/billing`} 49 49 - target="_blank" 50 50 - className="group inline-flex items-center font-medium text-foreground underline underline-offset-4 hover:no-underline" 51 51 - > 52 52 - Upgrade now 53 53 - <ArrowUpRight className="ml-1 h-4 w-4 shrink-0 text-muted-foreground group-hover:text-foreground" /> 54 54 - </Link> 55 55 - </p> 56 56 - </HoverCardContent> 57 57 - </HoverCard> 58 58 - ); 59 59 - }

-6

apps/web/src/components/billing/utils.ts

reviewed

··· 1 1 - import { workspacePlanHierarchy } from "@openstatus/db/src/schema"; 2 2 - import type { WorkspacePlan } from "@openstatus/db/src/schema/workspaces/validation"; 3 3 - 4 4 - export function upgradePlan(current: WorkspacePlan, required: WorkspacePlan) { 5 5 - return workspacePlanHierarchy[current] < workspacePlanHierarchy[required]; 6 6 - }

-31

apps/web/src/components/dashboard/help-callout.tsx

reviewed

··· 1 1 - import { HelpCircle } from "lucide-react"; 2 2 - 3 3 - import { Alert, AlertDescription, AlertTitle } from "@openstatus/ui"; 4 4 - 5 5 - export function HelpCallout() { 6 6 - return ( 7 7 - <Alert className="max-w-md"> 8 8 - <HelpCircle className="h-4 w-4" /> 9 9 - <AlertTitle className="">Need help?</AlertTitle> 10 10 - <AlertDescription className="text-muted-foreground"> 11 11 - Let us know at{" "} 12 12 - <a 13 13 - href="mailto:ping@openstatus.dev" 14 14 - className="font-medium text-foreground underline hover:no-underline" 15 15 - > 16 16 - ping@openstatus.dev 17 17 - </a>{" "} 18 18 - or join our{" "} 19 19 - <a 20 20 - href="/discord" 21 21 - target="_blank" 22 22 - className="font-medium text-foreground underline hover:no-underline" 23 23 - rel="noreferrer" 24 24 - > 25 25 - Discord 26 26 - </a> 27 27 - . 28 28 - </AlertDescription> 29 29 - </Alert> 30 30 - ); 31 31 - }

-72

apps/web/src/components/dashboard/info-alert-dialog.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import { useEffect, useState } from "react"; 3 3 - 4 4 - import { 5 5 - AlertDialog, 6 6 - AlertDialogAction, 7 7 - AlertDialogContent, 8 8 - AlertDialogDescription, 9 9 - AlertDialogFooter, 10 10 - AlertDialogHeader, 11 11 - AlertDialogTitle, 12 12 - } from "@openstatus/ui"; 13 13 - 14 14 - interface InfoAlertDialogProps { 15 15 - workspaceSlug: string; 16 16 - /** 17 17 - * Default expiration time in days 18 18 - */ 19 19 - expires?: number; 20 20 - 21 21 - id: string; 22 22 - title: React.ReactNode; 23 23 - description: React.ReactNode; 24 24 - } 25 25 - 26 26 - export function InfoAlertDialog({ 27 27 - workspaceSlug, 28 28 - expires = 7, 29 29 - id, 30 30 - title, 31 31 - description, 32 32 - }: InfoAlertDialogProps) { 33 33 - const [open, setOpen] = useState(false); 34 34 - 35 35 - function onClick() { 36 36 - if (document) { 37 37 - const expiresAt = new Date(); 38 38 - expiresAt.setDate(expiresAt.getDate() + expires); 39 39 - // store the cookie for 7 days and only for a specific workspace 40 40 - document.cookie = `${id}=true; expires=${expiresAt}; path=/app/${workspaceSlug}`; 41 41 - } 42 42 - setOpen(false); 43 43 - } 44 44 - 45 45 - useEffect(() => { 46 46 - async function configureProBanner() { 47 47 - if (document) { 48 48 - const cookie = document.cookie 49 49 - .split("; ") 50 50 - .find((row) => row.startsWith(id)); 51 51 - if (!cookie) { 52 52 - setOpen(true); 53 53 - } 54 54 - } 55 55 - } 56 56 - configureProBanner(); 57 57 - }, [id]); 58 58 - 59 59 - return ( 60 60 - <AlertDialog open={open} onOpenChange={setOpen}> 61 61 - <AlertDialogContent> 62 62 - <AlertDialogHeader> 63 63 - <AlertDialogTitle>{title}</AlertDialogTitle> 64 64 - <AlertDialogDescription>{description}</AlertDialogDescription> 65 65 - </AlertDialogHeader> 66 66 - <AlertDialogFooter> 67 67 - <AlertDialogAction onClick={onClick}>Continue</AlertDialogAction> 68 68 - </AlertDialogFooter> 69 69 - </AlertDialogContent> 70 70 - </AlertDialog> 71 71 - ); 72 72 - }

-18

apps/web/src/components/dashboard/limit.tsx

reviewed

··· 1 1 - import Link from "next/link"; 2 2 - 3 3 - export function Limit() { 4 4 - return ( 5 5 - <div className="col-span-full text-center"> 6 6 - <p className="text-muted-foreground text-sm"> 7 7 - You have reached the account limits. Please{" "} 8 8 - <Link 9 9 - href={"./settings/billing"} 10 10 - className="text-foreground underline underline-offset-4 hover:no-underline" 11 11 - > 12 12 - upgrade 13 13 - </Link>{" "} 14 14 - your account. 15 15 - </p> 16 16 - </div> 17 17 - ); 18 18 - }

-135

apps/web/src/components/data-table/incident/columns.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { formatDistanceStrict } from "date-fns"; 5 5 - import Image from "next/image"; 6 6 - import Link from "next/link"; 7 7 - 8 8 - import type { Incident } from "@openstatus/db/src/schema"; 9 9 - 10 10 - import { formatDateTime } from "@/lib/utils"; 11 11 - import { DataTableRowActions } from "./data-table-row-actions"; 12 12 - 13 13 - export const columns: ColumnDef<Incident>[] = [ 14 14 - { 15 15 - accessorKey: "monitorId", 16 16 - header: "Monitor", 17 17 - cell: ({ row }) => { 18 18 - return ( 19 19 - <Link 20 20 - href={`./monitors/${row.original.monitorId}/overview`} 21 21 - className="group flex items-center gap-2" 22 22 - > 23 23 - <span className="max-w-[125px] truncate group-hover:underline"> 24 24 - {row.original.monitorName} 25 25 - </span> 26 26 - </Link> 27 27 - ); 28 28 - }, 29 29 - }, 30 30 - { 31 31 - accessorKey: "startedAt", 32 32 - header: "Started At", 33 33 - cell: ({ row }) => { 34 34 - const { startedAt, incidentScreenshotUrl } = row.original; 35 35 - const date = startedAt ? formatDateTime(startedAt) : "-"; 36 36 - return ( 37 37 - <div className="flex gap-2"> 38 38 - <span className="max-w-[150px] truncate text-muted-foreground sm:max-w-[200px] lg:max-w-[250px] xl:max-w-[350px]"> 39 39 - {date} 40 40 - </span> 41 41 - {incidentScreenshotUrl ? ( 42 42 - <a 43 43 - href={incidentScreenshotUrl} 44 44 - target="_blank" 45 45 - rel="noreferrer" 46 46 - className="relative relative h-5 w-5 overflow-hidden rounded border" 47 47 - > 48 48 - <Image 49 49 - src={incidentScreenshotUrl} 50 50 - alt="incident screenshot" 51 51 - fill={true} 52 52 - /> 53 53 - </a> 54 54 - ) : null} 55 55 - </div> 56 56 - ); 57 57 - }, 58 58 - }, 59 59 - { 60 60 - accessorKey: "acknowledgetAt", 61 61 - header: "Acknowledged At", 62 62 - cell: ({ row }) => { 63 63 - const { acknowledgedAt } = row.original; 64 64 - const date = acknowledgedAt ? formatDateTime(acknowledgedAt) : "-"; 65 65 - return ( 66 66 - <div className="flex"> 67 67 - <span className="max-w-[150px] truncate text-muted-foreground sm:max-w-[200px] lg:max-w-[250px] xl:max-w-[350px]"> 68 68 - {date} 69 69 - </span> 70 70 - </div> 71 71 - ); 72 72 - }, 73 73 - }, 74 74 - { 75 75 - accessorKey: "resolvedAt", 76 76 - header: "Resolved At", 77 77 - cell: ({ row }) => { 78 78 - const { resolvedAt, recoveryScreenshotUrl } = row.original; 79 79 - const date = resolvedAt ? formatDateTime(resolvedAt) : "-"; 80 80 - return ( 81 81 - <div className="flex gap-2"> 82 82 - <span className="max-w-[150px] truncate text-muted-foreground sm:max-w-[200px] lg:max-w-[250px] xl:max-w-[350px]"> 83 83 - {date} 84 84 - </span> 85 85 - {recoveryScreenshotUrl ? ( 86 86 - <a 87 87 - href={recoveryScreenshotUrl} 88 88 - target="_blank" 89 89 - rel="noreferrer" 90 90 - className="relative h-5 w-5 overflow-hidden rounded border" 91 91 - > 92 92 - <Image 93 93 - src={recoveryScreenshotUrl} 94 94 - alt="recovery screenshot" 95 95 - fill={true} 96 96 - /> 97 97 - </a> 98 98 - ) : null} 99 99 - </div> 100 100 - ); 101 101 - }, 102 102 - }, 103 103 - { 104 104 - header: "Duration", 105 105 - cell: ({ row }) => { 106 106 - const { startedAt, resolvedAt } = row.original; 107 107 - 108 108 - if (!resolvedAt) { 109 109 - return <span className="text-muted-foreground">-</span>; 110 110 - } 111 111 - 112 112 - const duration = formatDistanceStrict( 113 113 - new Date(startedAt), 114 114 - new Date(resolvedAt), 115 115 - ); 116 116 - return ( 117 117 - <div className="flex"> 118 118 - <span className="max-w-[150px] truncate text-muted-foreground sm:max-w-[200px] lg:max-w-[250px] xl:max-w-[350px]"> 119 119 - {duration} 120 120 - </span> 121 121 - </div> 122 122 - ); 123 123 - }, 124 124 - }, 125 125 - { 126 126 - id: "actions", 127 127 - cell: ({ row }) => { 128 128 - return ( 129 129 - <div className="text-right"> 130 130 - <DataTableRowActions row={row} /> 131 131 - </div> 132 132 - ); 133 133 - }, 134 134 - }, 135 135 - ];

-147

apps/web/src/components/data-table/incident/data-table-row-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Row } from "@tanstack/react-table"; 4 4 - import { MoreHorizontal } from "lucide-react"; 5 5 - import Link from "next/link"; 6 6 - import { useRouter } from "next/navigation"; 7 7 - import * as React from "react"; 8 8 - 9 9 - import { selectIncidentSchema } from "@openstatus/db/src/schema"; 10 10 - import { 11 11 - AlertDialog, 12 12 - AlertDialogAction, 13 13 - AlertDialogCancel, 14 14 - AlertDialogContent, 15 15 - AlertDialogDescription, 16 16 - AlertDialogFooter, 17 17 - AlertDialogHeader, 18 18 - AlertDialogTitle, 19 19 - AlertDialogTrigger, 20 20 - Button, 21 21 - DropdownMenu, 22 22 - DropdownMenuContent, 23 23 - DropdownMenuItem, 24 24 - DropdownMenuSeparator, 25 25 - DropdownMenuTrigger, 26 26 - } from "@openstatus/ui"; 27 27 - 28 28 - import { LoadingAnimation } from "@/components/loading-animation"; 29 29 - import { toastAction } from "@/lib/toast"; 30 30 - import { api } from "@/trpc/client"; 31 31 - 32 32 - interface DataTableRowActionsProps<TData> { 33 33 - row: Row<TData>; 34 34 - } 35 35 - 36 36 - export function DataTableRowActions<TData>({ 37 37 - row, 38 38 - }: DataTableRowActionsProps<TData>) { 39 39 - const incident = selectIncidentSchema.parse(row.original); 40 40 - const router = useRouter(); 41 41 - const [isPending, startTransition] = React.useTransition(); 42 42 - const [alertOpen, setAlertOpen] = React.useState(false); 43 43 - 44 44 - async function resolved() { 45 45 - startTransition(async () => { 46 46 - try { 47 47 - if (!incident.id) return; 48 48 - await api.incident.resolvedIncident.mutate({ id: incident.id }); 49 49 - toastAction("success"); 50 50 - router.refresh(); 51 51 - } catch { 52 52 - toastAction("error"); 53 53 - } 54 54 - }); 55 55 - } 56 56 - 57 57 - async function acknowledge() { 58 58 - startTransition(async () => { 59 59 - try { 60 60 - if (!incident.id) return; 61 61 - await api.incident.acknowledgeIncident.mutate({ id: incident.id }); 62 62 - toastAction("success"); 63 63 - router.refresh(); 64 64 - } catch { 65 65 - toastAction("error"); 66 66 - } 67 67 - }); 68 68 - } 69 69 - 70 70 - async function onDelete() { 71 71 - startTransition(async () => { 72 72 - try { 73 73 - if (!incident.id) return; 74 74 - await api.incident.delete.mutate({ id: incident.id }); 75 75 - toastAction("success"); 76 76 - setAlertOpen(false); 77 77 - router.refresh(); 78 78 - } catch { 79 79 - toastAction("error"); 80 80 - } 81 81 - }); 82 82 - } 83 83 - 84 84 - return ( 85 85 - <AlertDialog open={alertOpen} onOpenChange={(value) => setAlertOpen(value)}> 86 86 - <DropdownMenu> 87 87 - <DropdownMenuTrigger asChild> 88 88 - <Button 89 89 - variant="ghost" 90 90 - className="h-8 w-8 p-0 data-[state=open]:bg-accent" 91 91 - > 92 92 - <span className="sr-only">Open menu</span> 93 93 - <MoreHorizontal className="h-4 w-4" /> 94 94 - </Button> 95 95 - </DropdownMenuTrigger> 96 96 - <DropdownMenuContent align="end"> 97 97 - <DropdownMenuItem 98 98 - disabled={incident.acknowledgedAt !== null} 99 99 - onClick={acknowledge} 100 100 - > 101 101 - Acknowledge 102 102 - </DropdownMenuItem> 103 103 - <DropdownMenuItem 104 104 - disabled={ 105 105 - incident.resolvedAt !== null || incident.acknowledgedAt === null 106 106 - } 107 107 - onClick={resolved} 108 108 - > 109 109 - Resolved 110 110 - </DropdownMenuItem> 111 111 - <DropdownMenuSeparator /> 112 112 - <Link href={`./incidents/${incident.id}/overview`}> 113 113 - <DropdownMenuItem>Details</DropdownMenuItem> 114 114 - </Link> 115 115 - <DropdownMenuSeparator /> 116 116 - <AlertDialogTrigger asChild> 117 117 - <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background"> 118 118 - Delete 119 119 - </DropdownMenuItem> 120 120 - </AlertDialogTrigger> 121 121 - </DropdownMenuContent> 122 122 - </DropdownMenu> 123 123 - <AlertDialogContent> 124 124 - <AlertDialogHeader> 125 125 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 126 126 - <AlertDialogDescription> 127 127 - This action cannot be undone. This will permanently delete the 128 128 - monitor. 129 129 - </AlertDialogDescription> 130 130 - </AlertDialogHeader> 131 131 - <AlertDialogFooter> 132 132 - <AlertDialogCancel>Cancel</AlertDialogCancel> 133 133 - <AlertDialogAction 134 134 - onClick={(e) => { 135 135 - e.preventDefault(); 136 136 - onDelete(); 137 137 - }} 138 138 - disabled={isPending} 139 139 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 140 140 - > 141 141 - {!isPending ? "Delete" : <LoadingAnimation />} 142 142 - </AlertDialogAction> 143 143 - </AlertDialogFooter> 144 144 - </AlertDialogContent> 145 145 - </AlertDialog> 146 146 - ); 147 147 - }

-83

apps/web/src/components/data-table/incident/data-table.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { 5 5 - flexRender, 6 6 - getCoreRowModel, 7 7 - useReactTable, 8 8 - } from "@tanstack/react-table"; 9 9 - 10 10 - import { 11 11 - Table, 12 12 - TableBody, 13 13 - TableCell, 14 14 - TableHead, 15 15 - TableHeader, 16 16 - TableRow, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - interface DataTableProps<TData, TValue> { 20 20 - columns: ColumnDef<TData, TValue>[]; 21 21 - data: TData[]; 22 22 - } 23 23 - 24 24 - // FIXME: right now, the mobile layout is messed up 25 25 - // https://github.com/TanStack/table/discussions/3192#discussioncomment-6458134 26 26 - 27 27 - export function DataTable<TData, TValue>({ 28 28 - columns, 29 29 - data, 30 30 - }: DataTableProps<TData, TValue>) { 31 31 - const table = useReactTable({ 32 32 - data, 33 33 - columns, 34 34 - getCoreRowModel: getCoreRowModel(), 35 35 - }); 36 36 - 37 37 - return ( 38 38 - <div className="rounded-md border"> 39 39 - <Table> 40 40 - <TableHeader className="bg-muted/50"> 41 41 - {table.getHeaderGroups().map((headerGroup) => ( 42 42 - <TableRow key={headerGroup.id} className="hover:bg-transparent"> 43 43 - {headerGroup.headers.map((header) => { 44 44 - return ( 45 45 - <TableHead key={header.id}> 46 46 - {header.isPlaceholder 47 47 - ? null 48 48 - : flexRender( 49 49 - header.column.columnDef.header, 50 50 - header.getContext(), 51 51 - )} 52 52 - </TableHead> 53 53 - ); 54 54 - })} 55 55 - </TableRow> 56 56 - ))} 57 57 - </TableHeader> 58 58 - <TableBody> 59 59 - {table.getRowModel().rows?.length ? ( 60 60 - table.getRowModel().rows.map((row) => ( 61 61 - <TableRow 62 62 - key={row.id} 63 63 - data-state={row.getIsSelected() && "selected"} 64 64 - > 65 65 - {row.getVisibleCells().map((cell) => ( 66 66 - <TableCell key={cell.id}> 67 67 - {flexRender(cell.column.columnDef.cell, cell.getContext())} 68 68 - </TableCell> 69 69 - ))} 70 70 - </TableRow> 71 71 - )) 72 72 - ) : ( 73 73 - <TableRow> 74 74 - <TableCell colSpan={columns.length} className="h-24 text-center"> 75 75 - No results. 76 76 - </TableCell> 77 77 - </TableRow> 78 78 - )} 79 79 - </TableBody> 80 80 - </Table> 81 81 - </div> 82 82 - ); 83 83 - }

-47

apps/web/src/components/data-table/invitation/columns.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - 5 5 - import type { Invitation, WorkspaceRole } from "@openstatus/db/src/schema"; 6 6 - import { Badge } from "@openstatus/ui/src/components/badge"; 7 7 - 8 8 - import { formatDate } from "@/lib/utils"; 9 9 - import { DataTableRowActions } from "./data-table-row-actions"; 10 10 - 11 11 - // TODO: add total number of monitors 12 12 - 13 13 - export const columns: ColumnDef<Invitation>[] = [ 14 14 - { 15 15 - accessorKey: "email", 16 16 - header: "Email", 17 17 - }, 18 18 - { 19 19 - accessorKey: "role", 20 20 - header: "Role", 21 21 - cell: ({ row }) => { 22 22 - const role = row.getValue("role") as WorkspaceRole; 23 23 - return ( 24 24 - <Badge variant={role === "member" ? "outline" : "default"}> 25 25 - {row.getValue("role")} 26 26 - </Badge> 27 27 - ); 28 28 - }, 29 29 - }, 30 30 - { 31 31 - accessorKey: "expiresAt", 32 32 - header: "Expires at", 33 33 - cell: ({ row }) => { 34 34 - return <span>{formatDate(row.getValue("expiresAt"))}</span>; 35 35 - }, 36 36 - }, 37 37 - { 38 38 - id: "actions", 39 39 - cell: ({ row }) => { 40 40 - return ( 41 41 - <div className="text-right"> 42 42 - <DataTableRowActions row={row} /> 43 43 - </div> 44 44 - ); 45 45 - }, 46 46 - }, 47 47 - ];

-82

apps/web/src/components/data-table/invitation/data-table-row-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Row } from "@tanstack/react-table"; 4 4 - import { useRouter } from "next/navigation"; 5 5 - import * as React from "react"; 6 6 - 7 7 - import { selectInvitationSchema } from "@openstatus/db/src/schema"; 8 8 - import { 9 9 - AlertDialog, 10 10 - AlertDialogAction, 11 11 - AlertDialogCancel, 12 12 - AlertDialogContent, 13 13 - AlertDialogDescription, 14 14 - AlertDialogFooter, 15 15 - AlertDialogHeader, 16 16 - AlertDialogTitle, 17 17 - AlertDialogTrigger, 18 18 - Button, 19 19 - } from "@openstatus/ui"; 20 20 - 21 21 - import { LoadingAnimation } from "@/components/loading-animation"; 22 22 - import { toastAction } from "@/lib/toast"; 23 23 - import { api } from "@/trpc/client"; 24 24 - 25 25 - interface DataTableRowActionsProps<TData> { 26 26 - row: Row<TData>; 27 27 - } 28 28 - 29 29 - export function DataTableRowActions<TData>({ 30 30 - row, 31 31 - }: DataTableRowActionsProps<TData>) { 32 32 - const invitation = selectInvitationSchema.parse(row.original); 33 33 - const router = useRouter(); 34 34 - const [alertOpen, setAlertOpen] = React.useState(false); 35 35 - const [isPending, startTransition] = React.useTransition(); 36 36 - 37 37 - async function onRevoke() { 38 38 - startTransition(async () => { 39 39 - try { 40 40 - if (!invitation.id) return; 41 41 - await api.invitation.delete.mutate({ id: invitation.id }); 42 42 - toastAction("deleted"); 43 43 - router.refresh(); 44 44 - setAlertOpen(false); 45 45 - } catch { 46 46 - toastAction("error"); 47 47 - } 48 48 - }); 49 49 - } 50 50 - 51 51 - return ( 52 52 - <AlertDialog open={alertOpen} onOpenChange={(value) => setAlertOpen(value)}> 53 53 - <AlertDialogTrigger asChild> 54 54 - <Button variant="outline" size="sm"> 55 55 - Revoke 56 56 - </Button> 57 57 - </AlertDialogTrigger> 58 58 - <AlertDialogContent> 59 59 - <AlertDialogHeader> 60 60 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 61 61 - <AlertDialogDescription> 62 62 - The invitation will be revoked and the user will no longer be able 63 63 - to join the workspace. 64 64 - </AlertDialogDescription> 65 65 - </AlertDialogHeader> 66 66 - <AlertDialogFooter> 67 67 - <AlertDialogCancel>Cancel</AlertDialogCancel> 68 68 - <AlertDialogAction 69 69 - onClick={(e) => { 70 70 - e.preventDefault(); 71 71 - onRevoke(); 72 72 - }} 73 73 - disabled={isPending} 74 74 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 75 75 - > 76 76 - {!isPending ? "Revoke" : <LoadingAnimation />} 77 77 - </AlertDialogAction> 78 78 - </AlertDialogFooter> 79 79 - </AlertDialogContent> 80 80 - </AlertDialog> 81 81 - ); 82 82 - }

-80

apps/web/src/components/data-table/invitation/data-table.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { 5 5 - flexRender, 6 6 - getCoreRowModel, 7 7 - useReactTable, 8 8 - } from "@tanstack/react-table"; 9 9 - 10 10 - import { 11 11 - Table, 12 12 - TableBody, 13 13 - TableCell, 14 14 - TableHead, 15 15 - TableHeader, 16 16 - TableRow, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - interface DataTableProps<TData, TValue> { 20 20 - columns: ColumnDef<TData, TValue>[]; 21 21 - data: TData[]; 22 22 - } 23 23 - 24 24 - export function DataTable<TData, TValue>({ 25 25 - columns, 26 26 - data, 27 27 - }: DataTableProps<TData, TValue>) { 28 28 - const table = useReactTable({ 29 29 - data, 30 30 - columns, 31 31 - getCoreRowModel: getCoreRowModel(), 32 32 - }); 33 33 - 34 34 - return ( 35 35 - <div className="rounded-md border"> 36 36 - <Table> 37 37 - <TableHeader className="bg-muted/50"> 38 38 - {table.getHeaderGroups().map((headerGroup) => ( 39 39 - <TableRow key={headerGroup.id} className="hover:bg-transparent"> 40 40 - {headerGroup.headers.map((header) => { 41 41 - return ( 42 42 - <TableHead key={header.id}> 43 43 - {header.isPlaceholder 44 44 - ? null 45 45 - : flexRender( 46 46 - header.column.columnDef.header, 47 47 - header.getContext(), 48 48 - )} 49 49 - </TableHead> 50 50 - ); 51 51 - })} 52 52 - </TableRow> 53 53 - ))} 54 54 - </TableHeader> 55 55 - <TableBody> 56 56 - {table.getRowModel().rows?.length ? ( 57 57 - table.getRowModel().rows.map((row) => ( 58 58 - <TableRow 59 59 - key={row.id} 60 60 - data-state={row.getIsSelected() && "selected"} 61 61 - > 62 62 - {row.getVisibleCells().map((cell) => ( 63 63 - <TableCell key={cell.id}> 64 64 - {flexRender(cell.column.columnDef.cell, cell.getContext())} 65 65 - </TableCell> 66 66 - ))} 67 67 - </TableRow> 68 68 - )) 69 69 - ) : ( 70 70 - <TableRow> 71 71 - <TableCell colSpan={columns.length} className="h-24 text-center"> 72 72 - No results. 73 73 - </TableCell> 74 74 - </TableRow> 75 75 - )} 76 76 - </TableBody> 77 77 - </Table> 78 78 - </div> 79 79 - ); 80 80 - }

-58

apps/web/src/components/data-table/maintenance/columns.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - 5 5 - import type { Maintenance } from "@openstatus/db/src/schema"; 6 6 - import { format } from "date-fns"; 7 7 - import { DataTableRowActions } from "./data-table-row-actions"; 8 8 - 9 9 - export const columns: ColumnDef<Maintenance>[] = [ 10 10 - { 11 11 - accessorKey: "title", 12 12 - header: "Title", 13 13 - }, 14 14 - { 15 15 - accessorKey: "message", 16 16 - header: "Message", 17 17 - cell: ({ row }) => { 18 18 - return ( 19 19 - <p className="flex max-w-[125px] lg:max-w-[250px] xl:max-w-[350px]"> 20 20 - <span className="truncate">{row.getValue("message")}</span> 21 21 - </p> 22 22 - ); 23 23 - }, 24 24 - }, 25 25 - { 26 26 - accessorKey: "from", 27 27 - header: "Start", 28 28 - cell: ({ row }) => { 29 29 - return ( 30 30 - <p className="text-muted-foreground"> 31 31 - {format(row.getValue("from"), "LLL dd, y HH:mm zzzz")} 32 32 - </p> 33 33 - ); 34 34 - }, 35 35 - }, 36 36 - { 37 37 - accessorKey: "to", 38 38 - header: "End", 39 39 - cell: ({ row }) => { 40 40 - return ( 41 41 - <p className="text-muted-foreground"> 42 42 - {format(row.getValue("to"), "LLL dd, y HH:mm zzzz")} 43 43 - </p> 44 44 - ); 45 45 - }, 46 46 - }, 47 47 - // missing: from, to 48 48 - { 49 49 - id: "actions", 50 50 - cell: ({ row }) => { 51 51 - return ( 52 52 - <div className="text-right"> 53 53 - <DataTableRowActions row={row} /> 54 54 - </div> 55 55 - ); 56 56 - }, 57 57 - }, 58 58 - ];

-115

apps/web/src/components/data-table/maintenance/data-table-row-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Row } from "@tanstack/react-table"; 4 4 - import { MoreHorizontal } from "lucide-react"; 5 5 - import Link from "next/link"; 6 6 - import { useRouter } from "next/navigation"; 7 7 - import * as React from "react"; 8 8 - 9 9 - import { selectMaintenanceSchema } from "@openstatus/db/src/schema"; 10 10 - import { 11 11 - AlertDialog, 12 12 - AlertDialogAction, 13 13 - AlertDialogCancel, 14 14 - AlertDialogContent, 15 15 - AlertDialogDescription, 16 16 - AlertDialogFooter, 17 17 - AlertDialogHeader, 18 18 - AlertDialogTitle, 19 19 - AlertDialogTrigger, 20 20 - Button, 21 21 - DropdownMenu, 22 22 - DropdownMenuContent, 23 23 - DropdownMenuItem, 24 24 - DropdownMenuTrigger, 25 25 - } from "@openstatus/ui"; 26 26 - 27 27 - import { LoadingAnimation } from "@/components/loading-animation"; 28 28 - import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; 29 29 - import { toastAction } from "@/lib/toast"; 30 30 - import { api } from "@/trpc/client"; 31 31 - 32 32 - interface DataTableRowActionsProps<TData> { 33 33 - row: Row<TData>; 34 34 - } 35 35 - 36 36 - export function DataTableRowActions<TData>({ 37 37 - row, 38 38 - }: DataTableRowActionsProps<TData>) { 39 39 - const maintenance = selectMaintenanceSchema.parse(row.original); 40 40 - const router = useRouter(); 41 41 - const [alertOpen, setAlertOpen] = React.useState(false); 42 42 - const [isPending, startTransition] = React.useTransition(); 43 43 - const { copy } = useCopyToClipboard(); 44 44 - 45 45 - async function onDelete() { 46 46 - startTransition(async () => { 47 47 - try { 48 48 - if (!maintenance.id) return; 49 49 - await api.maintenance.delete.mutate({ id: maintenance.id }); 50 50 - toastAction("deleted"); 51 51 - router.refresh(); 52 52 - setAlertOpen(false); 53 53 - } catch { 54 54 - toastAction("error"); 55 55 - } 56 56 - }); 57 57 - } 58 58 - 59 59 - return ( 60 60 - <AlertDialog open={alertOpen} onOpenChange={(value) => setAlertOpen(value)}> 61 61 - <DropdownMenu> 62 62 - <DropdownMenuTrigger asChild> 63 63 - <Button 64 64 - variant="ghost" 65 65 - className="h-8 w-8 p-0 data-[state=open]:bg-accent" 66 66 - > 67 67 - <span className="sr-only">Open menu</span> 68 68 - <MoreHorizontal className="h-4 w-4" /> 69 69 - </Button> 70 70 - </DropdownMenuTrigger> 71 71 - <DropdownMenuContent align="end"> 72 72 - <Link href={`./maintenances/${maintenance.id}/edit`}> 73 73 - <DropdownMenuItem>Edit</DropdownMenuItem> 74 74 - </Link> 75 75 - <DropdownMenuItem 76 76 - onClick={() => 77 77 - copy(`${maintenance.id}`, { 78 78 - withToast: `Copied ID '${maintenance.id}'`, 79 79 - }) 80 80 - } 81 81 - > 82 82 - Copy ID 83 83 - </DropdownMenuItem> 84 84 - <AlertDialogTrigger asChild> 85 85 - <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background"> 86 86 - Delete 87 87 - </DropdownMenuItem> 88 88 - </AlertDialogTrigger> 89 89 - </DropdownMenuContent> 90 90 - </DropdownMenu> 91 91 - <AlertDialogContent> 92 92 - <AlertDialogHeader> 93 93 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 94 94 - <AlertDialogDescription> 95 95 - This action cannot be undone. This will permanently delete the 96 96 - monitor. 97 97 - </AlertDialogDescription> 98 98 - </AlertDialogHeader> 99 99 - <AlertDialogFooter> 100 100 - <AlertDialogCancel>Cancel</AlertDialogCancel> 101 101 - <AlertDialogAction 102 102 - onClick={(e) => { 103 103 - e.preventDefault(); 104 104 - onDelete(); 105 105 - }} 106 106 - disabled={isPending} 107 107 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 108 108 - > 109 109 - {!isPending ? "Delete" : <LoadingAnimation />} 110 110 - </AlertDialogAction> 111 111 - </AlertDialogFooter> 112 112 - </AlertDialogContent> 113 113 - </AlertDialog> 114 114 - ); 115 115 - }

-80

apps/web/src/components/data-table/maintenance/data-table.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { 5 5 - flexRender, 6 6 - getCoreRowModel, 7 7 - useReactTable, 8 8 - } from "@tanstack/react-table"; 9 9 - 10 10 - import { 11 11 - Table, 12 12 - TableBody, 13 13 - TableCell, 14 14 - TableHead, 15 15 - TableHeader, 16 16 - TableRow, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - interface DataTableProps<TData, TValue> { 20 20 - columns: ColumnDef<TData, TValue>[]; 21 21 - data: TData[]; 22 22 - } 23 23 - 24 24 - export function DataTable<TData, TValue>({ 25 25 - columns, 26 26 - data, 27 27 - }: DataTableProps<TData, TValue>) { 28 28 - const table = useReactTable({ 29 29 - data, 30 30 - columns, 31 31 - getCoreRowModel: getCoreRowModel(), 32 32 - }); 33 33 - 34 34 - return ( 35 35 - <div className="rounded-md border"> 36 36 - <Table> 37 37 - <TableHeader className="bg-muted/50"> 38 38 - {table.getHeaderGroups().map((headerGroup) => ( 39 39 - <TableRow key={headerGroup.id} className="hover:bg-transparent"> 40 40 - {headerGroup.headers.map((header) => { 41 41 - return ( 42 42 - <TableHead key={header.id}> 43 43 - {header.isPlaceholder 44 44 - ? null 45 45 - : flexRender( 46 46 - header.column.columnDef.header, 47 47 - header.getContext(), 48 48 - )} 49 49 - </TableHead> 50 50 - ); 51 51 - })} 52 52 - </TableRow> 53 53 - ))} 54 54 - </TableHeader> 55 55 - <TableBody> 56 56 - {table.getRowModel().rows?.length ? ( 57 57 - table.getRowModel().rows.map((row) => ( 58 58 - <TableRow 59 59 - key={row.id} 60 60 - data-state={row.getIsSelected() && "selected"} 61 61 - > 62 62 - {row.getVisibleCells().map((cell) => ( 63 63 - <TableCell key={cell.id}> 64 64 - {flexRender(cell.column.columnDef.cell, cell.getContext())} 65 65 - </TableCell> 66 66 - ))} 67 67 - </TableRow> 68 68 - )) 69 69 - ) : ( 70 70 - <TableRow> 71 71 - <TableCell colSpan={columns.length} className="h-24 text-center"> 72 72 - No results. 73 73 - </TableCell> 74 74 - </TableRow> 75 75 - )} 76 76 - </TableBody> 77 77 - </Table> 78 78 - </div> 79 79 - ); 80 80 - }

-349

apps/web/src/components/data-table/monitor/columns.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { formatDistanceToNowStrict } from "date-fns"; 5 5 - import Link from "next/link"; 6 6 - 7 7 - import type { 8 8 - Incident, 9 9 - Maintenance, 10 10 - Monitor, 11 11 - MonitorTag, 12 12 - } from "@openstatus/db/src/schema"; 13 13 - import { Tracker } from "@openstatus/tracker"; 14 14 - import { 15 15 - Badge, 16 16 - Checkbox, 17 17 - Tooltip, 18 18 - TooltipContent, 19 19 - TooltipProvider, 20 20 - TooltipTrigger, 21 21 - } from "@openstatus/ui"; 22 22 - 23 23 - import { StatusDotWithTooltip } from "@/components/monitor/status-dot-with-tooltip"; 24 24 - import { TagBadgeWithTooltip } from "@/components/monitor/tag-badge-with-tooltip"; 25 25 - import { Bar } from "@/components/tracker/tracker"; 26 26 - import { isActiveMaintenance } from "@/lib/maintenances/utils"; 27 27 - 28 28 - import type { ResponseStatusTracker, ResponseTimeMetrics } from "@/lib/tb"; 29 29 - import { Eye, EyeOff, Radio, View } from "lucide-react"; 30 30 - import type { ReactNode } from "react"; 31 31 - import { DataTableColumnHeader } from "./data-table-column-header"; 32 32 - import { DataTableRowActions } from "./data-table-row-actions"; 33 33 - 34 34 - // EXAMPLE: get the type of the response of the endpoint 35 35 - 36 36 - export const columns: ColumnDef<{ 37 37 - monitor: Monitor; 38 38 - metrics?: ResponseTimeMetrics; 39 39 - data?: ResponseStatusTracker[]; 40 40 - incidents?: Incident[]; 41 41 - maintenances?: Maintenance[]; 42 42 - tags?: MonitorTag[]; 43 43 - }>[] = [ 44 44 - { 45 45 - id: "id", 46 46 - accessorKey: "id", 47 47 - accessorFn: (row) => row.monitor.id, 48 48 - }, 49 49 - { 50 50 - id: "jobType", 51 51 - accessorKey: "jobType", 52 52 - accessorFn: (row) => row.monitor.jobType, 53 53 - filterFn: (row, _id, value) => { 54 54 - if (!Array.isArray(value)) return true; 55 55 - return value.includes(row.original.monitor.jobType); 56 56 - }, 57 57 - }, 58 58 - { 59 59 - id: "select", 60 60 - header: ({ table }) => ( 61 61 - <Checkbox 62 62 - checked={ 63 63 - table.getIsAllPageRowsSelected() || 64 64 - (table.getIsSomePageRowsSelected() && "indeterminate") 65 65 - } 66 66 - onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} 67 67 - aria-label="Select all" 68 68 - className="translate-y-[2px]" 69 69 - /> 70 70 - ), 71 71 - cell: ({ row }) => ( 72 72 - <Checkbox 73 73 - checked={row.getIsSelected()} 74 74 - onCheckedChange={(value) => row.toggleSelected(!!value)} 75 75 - aria-label="Select row" 76 76 - className="translate-y-[2px]" 77 77 - /> 78 78 - ), 79 79 - }, 80 80 - { 81 81 - accessorKey: "active", 82 82 - accessorFn: (row) => row.monitor.active, 83 83 - header: () => <Radio className="h-4 w-4" />, 84 84 - cell: ({ row }) => { 85 85 - const { active, status } = row.original.monitor; 86 86 - const maintenance = isActiveMaintenance(row.original.maintenances); 87 87 - return ( 88 88 - <div className="flex w-4 items-center justify-center"> 89 89 - <StatusDotWithTooltip 90 90 - active={active} 91 91 - status={status} 92 92 - maintenance={maintenance} 93 93 - /> 94 94 - </div> 95 95 - ); 96 96 - }, 97 97 - filterFn: (row, _id, value) => { 98 98 - if (!Array.isArray(value)) return true; 99 99 - return value.includes(row.original.monitor.active); 100 100 - }, 101 101 - meta: { 102 102 - headerClassName: "w-4", 103 103 - }, 104 104 - }, 105 105 - { 106 106 - accessorKey: "name", 107 107 - accessorFn: (row) => row.monitor.name, // used for filtering as name is nested within the monitor object 108 108 - header: ({ column }) => ( 109 109 - <DataTableColumnHeader column={column} title="Name" /> 110 110 - ), 111 111 - cell: ({ row }) => { 112 112 - const { name, public: _public } = row.original.monitor; 113 113 - return ( 114 114 - <div className="flex gap-2"> 115 115 - <Link 116 116 - href={`./monitors/${row.original.monitor.id}/overview`} 117 117 - className="group flex max-w-full items-center gap-2" 118 118 - prefetch={false} 119 119 - > 120 120 - <span className="truncate group-hover:underline">{name}</span> 121 121 - </Link> 122 122 - {_public ? <Badge variant="secondary">public</Badge> : null} 123 123 - </div> 124 124 - ); 125 125 - }, 126 126 - }, 127 127 - { 128 128 - accessorKey: "tags", 129 129 - header: "Tags", 130 130 - cell: ({ row }) => { 131 131 - const { tags } = row.original; 132 132 - if (!tags?.length) 133 133 - return <span className="text-muted-foreground">-</span>; 134 134 - return <TagBadgeWithTooltip tags={tags} />; 135 135 - }, 136 136 - filterFn: (row, _id, value) => { 137 137 - if (!Array.isArray(value)) return true; 138 138 - // REMINDER: if one value is found, return true 139 139 - // we could consider restricting it to all the values have to be found 140 140 - return value.some((item) => 141 141 - row.original.tags?.some((tag) => tag.name === item), 142 142 - ); 143 143 - }, 144 144 - }, 145 145 - { 146 146 - accessorKey: "public", 147 147 - accessorFn: (row) => row.monitor.public, 148 148 - header: () => ( 149 149 - <div className="w-4"> 150 150 - <View className="h-4 w-4" /> 151 151 - </div> 152 152 - ), 153 153 - cell: ({ row }) => { 154 154 - const { public: _public } = row.original.monitor; 155 155 - return ( 156 156 - <> 157 157 - {_public ? ( 158 158 - <Eye className="h-4 w-4" /> 159 159 - ) : ( 160 160 - <EyeOff className="h-4 w-4" /> 161 161 - )} 162 162 - </> 163 163 - ); 164 164 - }, 165 165 - filterFn: (row, _id, value) => { 166 166 - if (!Array.isArray(value)) return true; 167 167 - return value.includes(row.original.monitor.public); 168 168 - }, 169 169 - }, 170 170 - { 171 171 - accessorKey: "tracker", 172 172 - header: () => ( 173 173 - <HeaderTooltip text="UTC time period"> 174 174 - <span className="underline decoration-dotted">Last 7 days</span> 175 175 - </HeaderTooltip> 176 176 - ), 177 177 - cell: ({ row }) => { 178 178 - const tracker = new Tracker({ 179 179 - data: row.original.data?.slice(0, 7).reverse(), 180 180 - incidents: row.original.incidents, 181 181 - maintenances: row.original.maintenances, 182 182 - }); 183 183 - return ( 184 184 - <div className="flex w-24 gap-1"> 185 185 - {tracker.days?.map((tracker) => ( 186 186 - <Bar 187 187 - key={tracker.day} 188 188 - className="h-5" 189 189 - showValues={true} 190 190 - {...tracker} 191 191 - /> 192 192 - ))} 193 193 - </div> 194 194 - ); 195 195 - }, 196 196 - }, 197 197 - { 198 198 - accessorKey: "lastTimestamp", 199 199 - header: "Last ping", 200 200 - cell: ({ row }) => { 201 201 - const timestamp = row.original.metrics?.lastTimestamp; 202 202 - if (timestamp) { 203 203 - const distance = formatDistanceToNowStrict(new Date(timestamp), { 204 204 - addSuffix: true, 205 205 - }); 206 206 - return ( 207 207 - <div className="flex max-w-[84px] text-muted-foreground sm:max-w-none"> 208 208 - <span className="truncate">{distance}</span> 209 209 - </div> 210 210 - ); 211 211 - } 212 212 - return <span className="text-muted-foreground">-</span>; 213 213 - }, 214 214 - }, 215 215 - { 216 216 - accessorKey: "uptime", 217 217 - header: ({ column }) => ( 218 218 - <DataTableColumnHeader column={column} title="Uptime" /> 219 219 - ), 220 220 - cell: ({ row }) => { 221 221 - const { count, ok } = row.original?.metrics || {}; 222 222 - if (!count || !ok) 223 223 - return <span className="text-muted-foreground">-</span>; 224 224 - const rounded = Math.round((ok / count) * 10_000) / 100; 225 225 - return <DisplayNumber value={rounded} suffix="%" />; 226 226 - }, 227 227 - sortingFn: (rowA, rowB, columnId) => { 228 228 - const valueA = rowA.getValue(columnId) as number | undefined; 229 229 - const valueB = rowB.getValue(columnId) as number | undefined; 230 230 - if (!valueB) return valueA || 1; 231 231 - if (!valueA) return -valueB; 232 232 - return valueA - valueB; 233 233 - }, 234 234 - }, 235 235 - { 236 236 - accessorKey: "p50Latency", 237 237 - accessorFn: (row) => row.metrics?.p50Latency, 238 238 - header: ({ column }) => ( 239 239 - <DataTableColumnHeader column={column} title="P50" /> 240 240 - ), 241 241 - cell: ({ row }) => { 242 242 - const latency = row.original.metrics?.p50Latency; 243 243 - if (latency) return <DisplayNumber value={latency} suffix="ms" />; 244 244 - return <span className="text-muted-foreground">-</span>; 245 245 - }, 246 246 - sortingFn: (rowA, rowB, columnId) => { 247 247 - const valueA = rowA.getValue(columnId) as number | undefined; 248 248 - const valueB = rowB.getValue(columnId) as number | undefined; 249 249 - if (!valueB) return valueA || 1; 250 250 - if (!valueA) return -valueB; 251 251 - return valueA - valueB; 252 252 - }, 253 253 - }, 254 254 - { 255 255 - accessorKey: "p75Latency", 256 256 - accessorFn: (row) => row.metrics?.p75Latency, 257 257 - header: ({ column }) => ( 258 258 - <DataTableColumnHeader column={column} title="P75" /> 259 259 - ), 260 260 - cell: ({ row }) => { 261 261 - const latency = row.original.metrics?.p75Latency; 262 262 - if (latency) return <DisplayNumber value={latency} suffix="ms" />; 263 263 - return <span className="text-muted-foreground">-</span>; 264 264 - }, 265 265 - sortingFn: (rowA, rowB, columnId) => { 266 266 - const valueA = rowA.getValue(columnId) as number | undefined; 267 267 - const valueB = rowB.getValue(columnId) as number | undefined; 268 268 - if (!valueB) return valueA || 1; 269 269 - if (!valueA) return -valueB; 270 270 - return valueA - valueB; 271 271 - }, 272 272 - }, 273 273 - { 274 274 - accessorKey: "p95Latency", 275 275 - accessorFn: (row) => row.metrics?.p95Latency, 276 276 - header: ({ column }) => ( 277 277 - <DataTableColumnHeader column={column} title="P95" /> 278 278 - ), 279 279 - cell: ({ row }) => { 280 280 - const latency = row.original.metrics?.p95Latency; 281 281 - if (latency) return <DisplayNumber value={latency} suffix="ms" />; 282 282 - return <span className="text-muted-foreground">-</span>; 283 283 - }, 284 284 - sortingFn: (rowA, rowB, columnId) => { 285 285 - const valueA = rowA.getValue(columnId) as number | undefined; 286 286 - const valueB = rowB.getValue(columnId) as number | undefined; 287 287 - if (!valueB) return valueA || 1; 288 288 - if (!valueA) return -valueB; 289 289 - return valueA - valueB; 290 290 - }, 291 291 - }, 292 292 - { 293 293 - accessorKey: "p99Latency", 294 294 - accessorFn: (row) => row.metrics?.p99Latency, 295 295 - header: ({ column }) => ( 296 296 - <DataTableColumnHeader column={column} title="P99" /> 297 297 - ), 298 298 - cell: ({ row }) => { 299 299 - const latency = row.original.metrics?.p99Latency; 300 300 - if (latency) return <DisplayNumber value={latency} suffix="ms" />; 301 301 - return <span className="text-muted-foreground">-</span>; 302 302 - }, 303 303 - sortingFn: (rowA, rowB, columnId) => { 304 304 - const valueA = rowA.getValue(columnId) as number | undefined; 305 305 - const valueB = rowB.getValue(columnId) as number | undefined; 306 306 - if (!valueB) return valueA || 1; 307 307 - if (!valueA) return -valueB; 308 308 - return valueA - valueB; 309 309 - }, 310 310 - }, 311 311 - { 312 312 - id: "actions", 313 313 - cell: ({ row }) => { 314 314 - return ( 315 315 - <div className="text-right"> 316 316 - <DataTableRowActions row={row} /> 317 317 - </div> 318 318 - ); 319 319 - }, 320 320 - }, 321 321 - ]; 322 322 - 323 323 - function HeaderTooltip({ 324 324 - text, 325 325 - children, 326 326 - }: { 327 327 - text: string; 328 328 - children: ReactNode; 329 329 - }) { 330 330 - return ( 331 331 - <TooltipProvider> 332 332 - <Tooltip> 333 333 - <TooltipTrigger suppressHydrationWarning>{children}</TooltipTrigger> 334 334 - <TooltipContent>{text}</TooltipContent> 335 335 - </Tooltip> 336 336 - </TooltipProvider> 337 337 - ); 338 338 - } 339 339 - 340 340 - function DisplayNumber({ value, suffix }: { value: number; suffix: string }) { 341 341 - return ( 342 342 - <span className="font-mono"> 343 343 - {new Intl.NumberFormat("us").format(value).toString()} 344 344 - <span className="font-normal text-muted-foreground text-xs"> 345 345 - {suffix} 346 346 - </span> 347 347 - </span> 348 348 - ); 349 349 - }

-66

apps/web/src/components/data-table/monitor/data-table-column-header.tsx

reviewed

··· 1 1 - import type { Column } from "@tanstack/react-table"; 2 2 - import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react"; 3 3 - 4 4 - import { 5 5 - Button, 6 6 - DropdownMenu, 7 7 - DropdownMenuContent, 8 8 - DropdownMenuItem, 9 9 - DropdownMenuTrigger, 10 10 - } from "@openstatus/ui"; 11 11 - 12 12 - import { cn } from "@/lib/utils"; 13 13 - 14 14 - interface DataTableColumnHeaderProps<TData, TValue> 15 15 - extends React.HTMLAttributes<HTMLDivElement> { 16 16 - column: Column<TData, TValue>; 17 17 - title: string; 18 18 - } 19 19 - 20 20 - export function DataTableColumnHeader<TData, TValue>({ 21 21 - column, 22 22 - title, 23 23 - className, 24 24 - }: DataTableColumnHeaderProps<TData, TValue>) { 25 25 - if (!column.getCanSort()) { 26 26 - return <div className={cn(className)}>{title}</div>; 27 27 - } 28 28 - 29 29 - return ( 30 30 - <div className={cn("flex items-center space-x-2", className)}> 31 31 - <DropdownMenu> 32 32 - <DropdownMenuTrigger asChild> 33 33 - <Button 34 34 - variant="ghost" 35 35 - size="sm" 36 36 - className="-ml-3 h-8 data-[state=open]:bg-accent" 37 37 - > 38 38 - <span>{title}</span> 39 39 - {column.getIsSorted() === "desc" ? ( 40 40 - <ArrowUp className="ml-2 h-4 w-4" /> 41 41 - ) : column.getIsSorted() === "asc" ? ( 42 42 - <ArrowDown className="ml-2 h-4 w-4" /> 43 43 - ) : ( 44 44 - <ChevronsUpDown className="ml-2 h-4 w-4" /> 45 45 - )} 46 46 - </Button> 47 47 - </DropdownMenuTrigger> 48 48 - <DropdownMenuContent align="start"> 49 49 - <DropdownMenuItem onClick={() => column.toggleSorting(false)}> 50 50 - <ArrowDown className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" /> 51 51 - Asc 52 52 - </DropdownMenuItem> 53 53 - <DropdownMenuItem onClick={() => column.toggleSorting(true)}> 54 54 - <ArrowUp className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" /> 55 55 - Desc 56 56 - </DropdownMenuItem> 57 57 - {/* <DropdownMenuSeparator /> 58 58 - <DropdownMenuItem onClick={() => column.toggleVisibility(false)}> 59 59 - <EyeOff className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" /> 60 60 - Hide 61 61 - </DropdownMenuItem> */} 62 62 - </DropdownMenuContent> 63 63 - </DropdownMenu> 64 64 - </div> 65 65 - ); 66 66 - }

-363

apps/web/src/components/data-table/monitor/data-table-floating-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import * as Portal from "@radix-ui/react-portal"; 4 4 - import type { Table } from "@tanstack/react-table"; 5 5 - import { useEffect, useState, useTransition } from "react"; 6 6 - 7 7 - import { Kbd } from "@/components/kbd"; 8 8 - import { LoadingAnimation } from "@/components/loading-animation"; 9 9 - import { toast, toastAction } from "@/lib/toast"; 10 10 - import { cn } from "@/lib/utils"; 11 11 - import { api } from "@/trpc/client"; 12 12 - import type { Monitor, MonitorTag } from "@openstatus/db/src/schema"; 13 13 - import { 14 14 - AlertDialog, 15 15 - AlertDialogAction, 16 16 - AlertDialogCancel, 17 17 - AlertDialogContent, 18 18 - AlertDialogDescription, 19 19 - AlertDialogFooter, 20 20 - AlertDialogHeader, 21 21 - AlertDialogTitle, 22 22 - AlertDialogTrigger, 23 23 - Button, 24 24 - Command, 25 25 - CommandEmpty, 26 26 - CommandGroup, 27 27 - CommandInput, 28 28 - CommandItem, 29 29 - CommandList, 30 30 - Popover, 31 31 - PopoverContent, 32 32 - PopoverTrigger, 33 33 - Select, 34 34 - SelectContent, 35 35 - SelectGroup, 36 36 - SelectItem, 37 37 - SelectLabel, 38 38 - SelectTrigger, 39 39 - SelectValue, 40 40 - Tooltip, 41 41 - TooltipContent, 42 42 - TooltipProvider, 43 43 - TooltipTrigger, 44 44 - } from "@openstatus/ui"; 45 45 - import { Check, X } from "lucide-react"; 46 46 - import { useRouter } from "next/navigation"; 47 47 - 48 48 - interface DataTableFloatingActions<TData> { 49 49 - table: Table<TData>; 50 50 - actions?: []; 51 51 - tags?: MonitorTag[]; 52 52 - } 53 53 - 54 54 - export function DataTableFloatingActions<TData>({ 55 55 - table, 56 56 - tags, 57 57 - }: DataTableFloatingActions<TData>) { 58 58 - const router = useRouter(); 59 59 - const [alertOpen, setAlertOpen] = useState(false); 60 60 - const [isPending, startTransition] = useTransition(); 61 61 - const [method, setMethod] = useState< 62 62 - "delete" | "active" | "public" | "tag" | null 63 63 - >(null); 64 64 - const rows = table.getFilteredSelectedRowModel().rows; 65 65 - 66 66 - // clear selection on escape key 67 67 - useEffect(() => { 68 68 - function handleKeyDown(event: KeyboardEvent) { 69 69 - if (event.key === "Escape") { 70 70 - table.toggleAllRowsSelected(false); 71 71 - } 72 72 - } 73 73 - 74 74 - window.addEventListener("keydown", handleKeyDown); 75 75 - return () => window.removeEventListener("keydown", handleKeyDown); 76 76 - }, [table]); 77 77 - 78 78 - if (table.getFilteredSelectedRowModel().rows.length === 0) { 79 79 - return null; 80 80 - } 81 81 - 82 82 - function handleUpdates(props: Partial<Pick<Monitor, "active" | "public">>) { 83 83 - startTransition(async () => { 84 84 - toast.promise( 85 85 - async () => { 86 86 - await api.monitor.updateMonitors.mutate({ 87 87 - ids: rows.map((row) => row.getValue("id")), 88 88 - ...props, 89 89 - }); 90 90 - router.refresh(); 91 91 - }, 92 92 - { 93 93 - loading: "Updating monitor(s)...", 94 94 - success: "Monitor(s) updated!", 95 95 - error: "Something went wrong!", 96 96 - finally: () => {}, 97 97 - }, 98 98 - ); 99 99 - }); 100 100 - } 101 101 - 102 102 - function handleTagUpdates(props: { 103 103 - tagId: number; 104 104 - action: "add" | "remove"; 105 105 - }) { 106 106 - startTransition(async () => { 107 107 - toast.promise( 108 108 - async () => { 109 109 - await api.monitor.updateMonitorsTag.mutate({ 110 110 - ids: rows.map((row) => row.getValue("id")), 111 111 - ...props, 112 112 - }); 113 113 - router.refresh(); 114 114 - }, 115 115 - { 116 116 - loading: 117 117 - props.action === "add" 118 118 - ? "Adding tag to monitor(s)..." 119 119 - : "Removing tag from monitor(s)...", 120 120 - success: 121 121 - props.action === "add" 122 122 - ? "Tag added to monitor(s)!" 123 123 - : "Tag removed from monitor(s)", 124 124 - error: "Something went wrong!", 125 125 - finally: () => {}, 126 126 - }, 127 127 - ); 128 128 - }); 129 129 - } 130 130 - 131 131 - function handleDeletes() { 132 132 - startTransition(async () => { 133 133 - try { 134 134 - await api.monitor.deleteMonitors.mutate({ 135 135 - ids: rows.map((row) => row.getValue("id")), 136 136 - }); 137 137 - setAlertOpen(false); 138 138 - table.toggleAllRowsSelected(false); 139 139 - router.refresh(); 140 140 - } catch (error) { 141 141 - console.error(error); 142 142 - toastAction("error"); 143 143 - } 144 144 - }); 145 145 - } 146 146 - 147 147 - // TODO: can we make it smarter! Its ugly as hell 148 148 - 149 149 - const statusValue = rows.every((row) => row.getValue("active") === true) 150 150 - ? "true" 151 151 - : rows.every((row) => row.getValue("active") === false) 152 152 - ? "false" 153 153 - : undefined; 154 154 - 155 155 - const visibilityValue = rows.every((row) => row.getValue("public") === true) 156 156 - ? "true" 157 157 - : rows.every((row) => row.getValue("public") === false) 158 158 - ? "false" 159 159 - : undefined; 160 160 - 161 161 - const everyTagValue = 162 162 - tags?.filter((tag) => { 163 163 - return rows.every((row) => { 164 164 - const _tags = row.getValue("tags"); 165 165 - if (Array.isArray(_tags)) { 166 166 - return _tags.map(({ id }) => id)?.includes(tag.id); 167 167 - } 168 168 - return false; 169 169 - }); 170 170 - }) || []; 171 171 - 172 172 - const someTagValue = 173 173 - tags?.filter((tag) => { 174 174 - return rows.some((row) => { 175 175 - const _tags = row.getValue("tags"); 176 176 - if (Array.isArray(_tags)) { 177 177 - return _tags.map(({ id }) => id)?.includes(tag.id); 178 178 - } 179 179 - return false; 180 180 - }); 181 181 - }) || []; 182 182 - 183 183 - return ( 184 184 - <Portal.Root> 185 185 - <div className="fixed inset-x-0 bottom-4 z-50 mx-auto w-fit px-4"> 186 186 - <div className="flex flex-wrap items-center gap-2 rounded-md border bg-background px-4 py-2 shadow-sm"> 187 187 - <TooltipProvider> 188 188 - <Tooltip> 189 189 - <TooltipTrigger asChild> 190 190 - <Button 191 191 - variant="ghost" 192 192 - onClick={() => table.toggleAllRowsSelected(false)} 193 193 - className="border border-dashed" 194 194 - > 195 195 - <span className="whitespace-nowrap"> 196 196 - {rows.length} selected 197 197 - </span> 198 198 - <X className="ml-1.5 size-4 shrink-0" /> 199 199 - </Button> 200 200 - </TooltipTrigger> 201 201 - <TooltipContent className="flex items-center"> 202 202 - <p className="mr-2">Clear selection</p> 203 203 - <Kbd abbrTitle="Escape" variant="outline"> 204 204 - Esc 205 205 - </Kbd> 206 206 - </TooltipContent> 207 207 - </Tooltip> 208 208 - </TooltipProvider> 209 209 - <AlertDialog 210 210 - open={alertOpen} 211 211 - onOpenChange={(value) => setAlertOpen(value)} 212 212 - > 213 213 - <AlertDialogTrigger asChild> 214 214 - <Button 215 215 - variant="outline" 216 216 - className="border-destructive text-destructive hover:bg-destructive hover:text-background" 217 217 - > 218 218 - Delete 219 219 - </Button> 220 220 - </AlertDialogTrigger> 221 221 - <AlertDialogContent> 222 222 - <AlertDialogHeader> 223 223 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 224 224 - <AlertDialogDescription> 225 225 - This action cannot be undone. This will permanently delete the 226 226 - selected monitor(s). 227 227 - </AlertDialogDescription> 228 228 - </AlertDialogHeader> 229 229 - <AlertDialogFooter> 230 230 - <AlertDialogCancel>Cancel</AlertDialogCancel> 231 231 - <AlertDialogAction 232 232 - onClick={() => { 233 233 - setMethod("delete"); 234 234 - handleDeletes(); 235 235 - }} 236 236 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 237 237 - > 238 238 - {isPending && method === "delete" ? ( 239 239 - <LoadingAnimation /> 240 240 - ) : ( 241 241 - "Delete" 242 242 - )} 243 243 - </AlertDialogAction> 244 244 - </AlertDialogFooter> 245 245 - </AlertDialogContent> 246 246 - </AlertDialog> 247 247 - <Select 248 248 - disabled={isPending && method === "active"} 249 249 - value={statusValue} 250 250 - onValueChange={(value) => { 251 251 - setMethod("active"); 252 252 - handleUpdates({ active: value === "true" }); 253 253 - }} 254 254 - > 255 255 - <SelectTrigger className="h-9 max-w-fit"> 256 256 - <SelectValue placeholder="Status" /> 257 257 - </SelectTrigger> 258 258 - <SelectContent> 259 259 - <SelectGroup> 260 260 - <SelectLabel>Status</SelectLabel> 261 261 - <SelectItem value="true">Active</SelectItem> 262 262 - <SelectItem value="false">Inactive</SelectItem> 263 263 - </SelectGroup> 264 264 - </SelectContent> 265 265 - </Select> 266 266 - <Popover> 267 267 - <PopoverTrigger disabled={isPending && method === "tag"} asChild> 268 268 - <Button variant="outline" className="flex items-center gap-2"> 269 269 - <span>Tags</span> 270 270 - {everyTagValue.length ? ( 271 271 - <div className="relative flex overflow-hidden"> 272 272 - {everyTagValue.map((tag) => ( 273 273 - <div 274 274 - key={tag.id} 275 275 - style={{ backgroundColor: tag.color }} 276 276 - className="h-2.5 w-2.5 rounded-full ring-2 ring-background" 277 277 - /> 278 278 - ))} 279 279 - </div> 280 280 - ) : null} 281 281 - </Button> 282 282 - </PopoverTrigger> 283 283 - <PopoverContent className="w-[200px] p-0" align="start"> 284 284 - <Command> 285 285 - <CommandInput placeholder={"Tags"} /> 286 286 - <CommandList> 287 287 - <CommandEmpty>No results found.</CommandEmpty> 288 288 - <CommandGroup> 289 289 - {tags?.map((tag) => { 290 290 - const isSelected = everyTagValue 291 291 - .map((tag) => tag.id) 292 292 - ?.includes(tag.id); 293 293 - const isIndeterminated = !isSelected 294 294 - ? someTagValue.map((tag) => tag.id)?.includes(tag.id) 295 295 - : false; 296 296 - return ( 297 297 - <CommandItem 298 298 - key={String(tag.name)} 299 299 - onSelect={() => { 300 300 - setMethod("tag"); 301 301 - handleTagUpdates({ 302 302 - tagId: tag.id, 303 303 - action: 304 304 - !isSelected || isIndeterminated 305 305 - ? "add" 306 306 - : "remove", 307 307 - }); 308 308 - }} 309 309 - > 310 310 - <div 311 311 - className={cn( 312 312 - "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", 313 313 - { 314 314 - "bg-primary text-primary-foreground": 315 315 - isSelected, 316 316 - "text-muted-foreground": isIndeterminated, 317 317 - "opacity-50 [&_svg]:invisible": 318 318 - !isSelected && !isIndeterminated, 319 319 - }, 320 320 - )} 321 321 - > 322 322 - <Check className={cn("h-4 w-4")} /> 323 323 - </div> 324 324 - <div className="flex w-full items-center justify-between"> 325 325 - <span>{tag.name}</span> 326 326 - <div 327 327 - key={tag.id} 328 328 - style={{ backgroundColor: tag.color }} 329 329 - className="h-2.5 w-2.5 rounded-full" 330 330 - /> 331 331 - </div> 332 332 - </CommandItem> 333 333 - ); 334 334 - })} 335 335 - </CommandGroup> 336 336 - </CommandList> 337 337 - </Command> 338 338 - </PopoverContent> 339 339 - </Popover> 340 340 - <Select 341 341 - disabled={isPending && method === "public"} 342 342 - value={visibilityValue} 343 343 - onValueChange={(value) => { 344 344 - setMethod("public"); 345 345 - handleUpdates({ public: value === "true" }); 346 346 - }} 347 347 - > 348 348 - <SelectTrigger className="h-9 max-w-fit"> 349 349 - <SelectValue placeholder="Visibility" /> 350 350 - </SelectTrigger> 351 351 - <SelectContent> 352 352 - <SelectGroup> 353 353 - <SelectLabel>Visibility</SelectLabel> 354 354 - <SelectItem value="true">Public</SelectItem> 355 355 - <SelectItem value="false">Private</SelectItem> 356 356 - </SelectGroup> 357 357 - </SelectContent> 358 358 - </Select> 359 359 - </div> 360 360 - </div> 361 361 - </Portal.Root> 362 362 - ); 363 363 - }

-119

apps/web/src/components/data-table/monitor/data-table-pagination.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Table } from "@tanstack/react-table"; 4 4 - import { 5 5 - ChevronLeft, 6 6 - ChevronRight, 7 7 - ChevronsLeft, 8 8 - ChevronsRight, 9 9 - } from "lucide-react"; 10 10 - 11 11 - import { 12 12 - Button, 13 13 - Select, 14 14 - SelectContent, 15 15 - SelectItem, 16 16 - SelectTrigger, 17 17 - SelectValue, 18 18 - } from "@openstatus/ui"; 19 19 - 20 20 - import { parseAsInteger, useQueryStates } from "nuqs"; 21 21 - 22 22 - // REMINDER: pageIndex pagination issue - jumping back to 0 after change 23 23 - 24 24 - interface DataTablePaginationProps<TData> { 25 25 - table: Table<TData>; 26 26 - } 27 27 - 28 28 - export function DataTablePagination<TData>({ 29 29 - table, 30 30 - }: DataTablePaginationProps<TData>) { 31 31 - const [_, setSearchParams] = useQueryStates({ 32 32 - pageSize: parseAsInteger.withDefault(10), 33 33 - // pageIndex: parseAsInteger.withDefault(0), 34 34 - }); 35 35 - 36 36 - return ( 37 37 - <div className="flex flex-wrap-reverse items-center justify-between gap-4 px-2"> 38 38 - <div> 39 39 - <p className="text-muted-foreground text-sm"> 40 40 - {table.getFilteredSelectedRowModel().rows.length} of{" "} 41 41 - {table.getFilteredRowModel().rows.length} row(s) selected. 42 42 - </p> 43 43 - </div> 44 44 - <div className="flex items-center space-x-6 lg:space-x-8"> 45 45 - <div className="flex items-center space-x-2"> 46 46 - <p className="font-medium text-sm">Rows per page</p> 47 47 - <Select 48 48 - value={`${table.getState().pagination.pageSize}`} 49 49 - onValueChange={(value) => { 50 50 - table.setPageSize(Number(value)); 51 51 - setSearchParams({ pageSize: Number(value) }); 52 52 - }} 53 53 - > 54 54 - <SelectTrigger className="h-8 w-[70px]"> 55 55 - <SelectValue placeholder={table.getState().pagination.pageSize} /> 56 56 - </SelectTrigger> 57 57 - <SelectContent side="top"> 58 58 - {[10, 20, 30, 40, 50].map((pageSize) => ( 59 59 - <SelectItem key={pageSize} value={`${pageSize}`}> 60 60 - {pageSize} 61 61 - </SelectItem> 62 62 - ))} 63 63 - </SelectContent> 64 64 - </Select> 65 65 - </div> 66 66 - <div className="flex w-[100px] items-center justify-center font-medium text-sm"> 67 67 - Page {table.getState().pagination.pageIndex + 1} of{" "} 68 68 - {table.getPageCount()} 69 69 - </div> 70 70 - <div className="flex items-center space-x-2"> 71 71 - <Button 72 72 - variant="outline" 73 73 - className="hidden h-8 w-8 p-0 lg:flex" 74 74 - onClick={() => { 75 75 - table.setPageIndex(0); 76 76 - }} 77 77 - disabled={!table.getCanPreviousPage()} 78 78 - > 79 79 - <span className="sr-only">Go to first page</span> 80 80 - <ChevronsLeft className="h-4 w-4" /> 81 81 - </Button> 82 82 - <Button 83 83 - variant="outline" 84 84 - className="h-8 w-8 p-0" 85 85 - onClick={() => { 86 86 - table.previousPage(); 87 87 - }} 88 88 - disabled={!table.getCanPreviousPage()} 89 89 - > 90 90 - <span className="sr-only">Go to previous page</span> 91 91 - <ChevronLeft className="h-4 w-4" /> 92 92 - </Button> 93 93 - <Button 94 94 - variant="outline" 95 95 - className="h-8 w-8 p-0" 96 96 - onClick={() => { 97 97 - table.nextPage(); 98 98 - }} 99 99 - disabled={!table.getCanNextPage()} 100 100 - > 101 101 - <span className="sr-only">Go to next page</span> 102 102 - <ChevronRight className="h-4 w-4" /> 103 103 - </Button> 104 104 - <Button 105 105 - variant="outline" 106 106 - className="hidden h-8 w-8 p-0 lg:flex" 107 107 - onClick={() => { 108 108 - table.setPageIndex(table.getPageCount() - 1); 109 109 - }} 110 110 - disabled={!table.getCanNextPage()} 111 111 - > 112 112 - <span className="sr-only">Go to last page</span> 113 113 - <ChevronsRight className="h-4 w-4" /> 114 114 - </Button> 115 115 - </div> 116 116 - </div> 117 117 - </div> 118 118 - ); 119 119 - }

-202

apps/web/src/components/data-table/monitor/data-table-row-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Row } from "@tanstack/react-table"; 4 4 - import { MoreHorizontal } from "lucide-react"; 5 5 - import Link from "next/link"; 6 6 - import { useRouter } from "next/navigation"; 7 7 - import { useState, useTransition } from "react"; 8 8 - import { z } from "zod"; 9 9 - 10 10 - import { selectMonitorSchema } from "@openstatus/db/src/schema"; 11 11 - import { 12 12 - AlertDialog, 13 13 - AlertDialogAction, 14 14 - AlertDialogCancel, 15 15 - AlertDialogContent, 16 16 - AlertDialogDescription, 17 17 - AlertDialogFooter, 18 18 - AlertDialogHeader, 19 19 - AlertDialogTitle, 20 20 - AlertDialogTrigger, 21 21 - Button, 22 22 - DropdownMenu, 23 23 - DropdownMenuContent, 24 24 - DropdownMenuItem, 25 25 - DropdownMenuSeparator, 26 26 - DropdownMenuTrigger, 27 27 - } from "@openstatus/ui"; 28 28 - 29 29 - import { LoadingAnimation } from "@/components/loading-animation"; 30 30 - import type { RegionChecker } from "@/components/ping-response-analysis/utils"; 31 31 - import { toast, toastAction } from "@/lib/toast"; 32 32 - import { api } from "@/trpc/client"; 33 33 - 34 34 - import type { TCPResponseTest } from "@/app/api/checker/test/tcp/schema"; 35 35 - import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; 36 36 - 37 37 - interface DataTableRowActionsProps<TData> { 38 38 - row: Row<TData>; 39 39 - } 40 40 - 41 41 - export function DataTableRowActions<TData>({ 42 42 - row, 43 43 - }: DataTableRowActionsProps<TData>) { 44 44 - const { monitor, isLimitReached } = z 45 45 - .object({ monitor: selectMonitorSchema, isLimitReached: z.boolean() }) 46 46 - .parse(row.original); 47 47 - const router = useRouter(); 48 48 - const [alertOpen, setAlertOpen] = useState(false); 49 49 - const [isPending, startTransition] = useTransition(); 50 50 - const { copy } = useCopyToClipboard(); 51 51 - 52 52 - async function onDelete() { 53 53 - startTransition(async () => { 54 54 - try { 55 55 - if (!monitor.id) return; 56 56 - await api.monitor.delete.mutate({ id: monitor.id }); 57 57 - toastAction("deleted"); 58 58 - router.refresh(); 59 59 - setAlertOpen(false); 60 60 - } catch { 61 61 - toastAction("error"); 62 62 - } 63 63 - }); 64 64 - } 65 65 - 66 66 - // FIXME: the test doenst take the assertions into account! 67 67 - // FIXME: improve (similar to the one in the edit form - also include toast.promise + better error message!) 68 68 - async function onTest() { 69 69 - startTransition(async () => { 70 70 - const { url, body, method, headers, jobType } = monitor; 71 71 - 72 72 - try { 73 73 - const res = await fetch(`/api/checker/test/${jobType}`, { 74 74 - method: "POST", 75 75 - headers: new Headers({ 76 76 - "Content-Type": "application/json", 77 77 - }), 78 78 - body: JSON.stringify({ url, body, method, headers }), 79 79 - }); 80 80 - const data = (await res.json()) as 81 81 - | RegionChecker 82 82 - | z.infer<typeof TCPResponseTest>; 83 83 - 84 84 - // FIXME: assertions 85 85 - // it's getting 😭 86 86 - const success = 87 87 - data.state === "success" && data.type === "http" 88 88 - ? data.status >= 200 && data.status < 300 89 89 - : data.state === "success" && data.type === "tcp" && !data.error; 90 90 - 91 91 - if (success) { 92 92 - toastAction("test-success"); 93 93 - } else { 94 94 - toastAction("test-error"); 95 95 - } 96 96 - } catch { 97 97 - toastAction("error"); 98 98 - } 99 99 - }); 100 100 - } 101 101 - async function onClone() { 102 102 - startTransition(async () => { 103 103 - try { 104 104 - const id = monitor.id; 105 105 - if (!id) return; 106 106 - 107 107 - const selectedMonitorData = await api.monitor.getMonitorById.query({ 108 108 - id, 109 109 - }); 110 110 - 111 111 - const { notificationIds, pageIds, monitorTagIds } = 112 112 - await api.monitor.getMonitorRelationsById.query({ id }); 113 113 - 114 114 - const cloneMonitorData = { 115 115 - ...selectedMonitorData, 116 116 - name: `${selectedMonitorData.name} - copy`, 117 117 - tags: monitorTagIds, 118 118 - notifications: notificationIds, 119 119 - pages: pageIds, 120 120 - active: false, 121 121 - id: undefined, 122 122 - updatedAt: undefined, 123 123 - createdAt: undefined, 124 124 - }; 125 125 - 126 126 - // Create a clone function in the api 127 127 - await api.monitor.create.mutate(cloneMonitorData); 128 128 - 129 129 - toast.success("Monitor cloned!"); 130 130 - router.refresh(); 131 131 - } catch (error) { 132 132 - console.log("error", error); 133 133 - toastAction("error"); 134 134 - } 135 135 - }); 136 136 - } 137 137 - 138 138 - return ( 139 139 - <AlertDialog open={alertOpen} onOpenChange={(value) => setAlertOpen(value)}> 140 140 - <DropdownMenu> 141 141 - <DropdownMenuTrigger asChild> 142 142 - <Button 143 143 - variant="ghost" 144 144 - className="h-8 w-8 p-0 data-[state=open]:bg-accent" 145 145 - > 146 146 - <span className="sr-only">Open menu</span> 147 147 - <MoreHorizontal className="h-4 w-4" /> 148 148 - </Button> 149 149 - </DropdownMenuTrigger> 150 150 - <DropdownMenuContent align="end"> 151 151 - <Link href={`./monitors/${monitor.id}/edit`}> 152 152 - <DropdownMenuItem>Edit</DropdownMenuItem> 153 153 - </Link> 154 154 - <Link href={`./monitors/${monitor.id}/overview`}> 155 155 - <DropdownMenuItem>Details</DropdownMenuItem> 156 156 - </Link> 157 157 - <DropdownMenuItem onClick={onClone} disabled={isLimitReached}> 158 158 - Clone 159 159 - </DropdownMenuItem> 160 160 - <DropdownMenuItem onClick={onTest}>Test</DropdownMenuItem> 161 161 - <DropdownMenuItem 162 162 - onClick={() => 163 163 - copy(`${monitor.id}`, { 164 164 - withToast: `Copied ID '${monitor.id}'`, 165 165 - }) 166 166 - } 167 167 - > 168 168 - Copy ID 169 169 - </DropdownMenuItem> 170 170 - <DropdownMenuSeparator /> 171 171 - <AlertDialogTrigger asChild> 172 172 - <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background"> 173 173 - Delete 174 174 - </DropdownMenuItem> 175 175 - </AlertDialogTrigger> 176 176 - </DropdownMenuContent> 177 177 - </DropdownMenu> 178 178 - <AlertDialogContent> 179 179 - <AlertDialogHeader> 180 180 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 181 181 - <AlertDialogDescription> 182 182 - This action cannot be undone. This will permanently delete the 183 183 - monitor. 184 184 - </AlertDialogDescription> 185 185 - </AlertDialogHeader> 186 186 - <AlertDialogFooter> 187 187 - <AlertDialogCancel>Cancel</AlertDialogCancel> 188 188 - <AlertDialogAction 189 189 - onClick={(e) => { 190 190 - e.preventDefault(); 191 191 - onDelete(); 192 192 - }} 193 193 - disabled={isPending} 194 194 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 195 195 - > 196 196 - {!isPending ? "Delete" : <LoadingAnimation />} 197 197 - </AlertDialogAction> 198 198 - </AlertDialogFooter> 199 199 - </AlertDialogContent> 200 200 - </AlertDialog> 201 201 - ); 202 202 - }

-92

apps/web/src/components/data-table/monitor/data-table-toolbar.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Table } from "@tanstack/react-table"; 4 4 - import { X } from "lucide-react"; 5 5 - 6 6 - import type { MonitorTag } from "@openstatus/db/src/schema"; 7 7 - import { Button, Input } from "@openstatus/ui"; 8 8 - 9 9 - import { DataTableFacetedFilter } from "../data-table-faceted-filter"; 10 10 - 11 11 - interface DataTableToolbarProps<TData> { 12 12 - table: Table<TData>; 13 13 - tags?: MonitorTag[]; 14 14 - } 15 15 - 16 16 - export function DataTableToolbar<TData>({ 17 17 - table, 18 18 - tags, 19 19 - }: DataTableToolbarProps<TData>) { 20 20 - const isFiltered = table.getState().columnFilters.length > 0; 21 21 - 22 22 - return ( 23 23 - <div className="flex flex-wrap items-center justify-between gap-3"> 24 24 - <div className="flex flex-1 flex-wrap items-center gap-2"> 25 25 - <Input 26 26 - placeholder="Filter names..." 27 27 - value={(table.getColumn("name")?.getFilterValue() as string) ?? ""} 28 28 - onChange={(event) => 29 29 - table.getColumn("name")?.setFilterValue(event.target.value) 30 30 - } 31 31 - className="h-8 w-[150px] lg:w-[250px]" 32 32 - /> 33 33 - {table.getColumn("tags") && tags && ( 34 34 - <DataTableFacetedFilter 35 35 - column={table.getColumn("tags")} 36 36 - title="Tags" 37 37 - options={tags?.map((tag) => ({ 38 38 - label: tag.name, 39 39 - value: tag.name, 40 40 - }))} 41 41 - /> 42 42 - )} 43 43 - {table.getColumn("public") && ( 44 44 - <DataTableFacetedFilter 45 45 - column={table.getColumn("public")} 46 46 - title="Visibility" 47 47 - options={[ 48 48 - { label: "Public", value: true }, 49 49 - { label: "Private", value: false }, 50 50 - ]} 51 51 - /> 52 52 - )} 53 53 - {table.getColumn("active") && ( 54 54 - <DataTableFacetedFilter 55 55 - column={table.getColumn("active")} 56 56 - title="Active" 57 57 - options={[ 58 58 - { label: "True", value: true }, 59 59 - { label: "False", value: false }, 60 60 - ]} 61 61 - /> 62 62 - )} 63 63 - {table.getColumn("jobType") && ( 64 64 - <DataTableFacetedFilter 65 65 - column={table.getColumn("jobType")} 66 66 - title="Type" 67 67 - options={[ 68 68 - { label: "HTTP", value: "http" }, 69 69 - { label: "TCP", value: "tcp" }, 70 70 - ]} 71 71 - /> 72 72 - )} 73 73 - {isFiltered && ( 74 74 - <Button 75 75 - variant="ghost" 76 76 - onClick={() => table.resetColumnFilters()} 77 77 - className="h-8 px-2 lg:px-3" 78 78 - > 79 79 - Reset 80 80 - <X className="ml-2 h-4 w-4" /> 81 81 - </Button> 82 82 - )} 83 83 - </div> 84 84 - <div className="flex items-center self-end rounded-lg border border-dashed bg-muted/50 px-3 py-2"> 85 85 - <p className="text-muted-foreground text-xs"> 86 86 - Quantiles and Uptime are aggregated data from the{" "} 87 87 - <span className="text-foreground">last 24h</span>. 88 88 - </p> 89 89 - </div> 90 90 - </div> 91 91 - ); 92 92 - }

-176

apps/web/src/components/data-table/monitor/data-table.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { 4 4 - ColumnDef, 5 5 - ColumnFiltersState, 6 6 - PaginationState, 7 7 - SortingState, 8 8 - Table as TTable, 9 9 - VisibilityState, 10 10 - } from "@tanstack/react-table"; 11 11 - import { 12 12 - flexRender, 13 13 - getCoreRowModel, 14 14 - getFacetedRowModel, 15 15 - getFacetedUniqueValues, 16 16 - getFilteredRowModel, 17 17 - getPaginationRowModel, 18 18 - getSortedRowModel, 19 19 - useReactTable, 20 20 - } from "@tanstack/react-table"; 21 21 - import * as React from "react"; 22 22 - import { z } from "zod"; 23 23 - 24 24 - import { selectMonitorTagSchema } from "@openstatus/db/src/schema"; 25 25 - import type { MonitorTag } from "@openstatus/db/src/schema"; 26 26 - import { 27 27 - Table, 28 28 - TableBody, 29 29 - TableCell, 30 30 - TableHead, 31 31 - TableHeader, 32 32 - TableRow, 33 33 - } from "@openstatus/ui"; 34 34 - 35 35 - import { DataTableFloatingActions } from "./data-table-floating-actions"; 36 36 - import { DataTablePagination } from "./data-table-pagination"; 37 37 - import { DataTableToolbar } from "./data-table-toolbar"; 38 38 - 39 39 - interface DataTableProps<TData, TValue> { 40 40 - columns: ColumnDef<TData, TValue>[]; 41 41 - data: TData[]; 42 42 - tags?: MonitorTag[]; 43 43 - defaultColumnFilters?: ColumnFiltersState; 44 44 - defaultPagination?: PaginationState; 45 45 - } 46 46 - 47 47 - export function DataTable<TData, TValue>({ 48 48 - columns, 49 49 - data, 50 50 - tags, 51 51 - defaultColumnFilters = [], 52 52 - defaultPagination = { pageIndex: 0, pageSize: 10 }, 53 53 - }: DataTableProps<TData, TValue>) { 54 54 - const [sorting, setSorting] = React.useState<SortingState>([]); 55 55 - const [columnFilters, setColumnFilters] = 56 56 - React.useState<ColumnFiltersState>(defaultColumnFilters); 57 57 - const [columnVisibility, setColumnVisibility] = 58 58 - React.useState<VisibilityState>({ 59 59 - public: false, 60 60 - id: false, 61 61 - jobType: false, 62 62 - }); 63 63 - 64 64 - const [pagination, setPagination] = 65 65 - React.useState<PaginationState>(defaultPagination); 66 66 - 67 67 - const table = useReactTable({ 68 68 - data, 69 69 - columns, 70 70 - state: { 71 71 - columnFilters, 72 72 - columnVisibility, 73 73 - pagination, 74 74 - sorting, 75 75 - }, 76 76 - // @ts-expect-error - REMINDER: unfortunately we cannot pass a function from a RSC to a client component 77 77 - getRowId: (row, index) => row.monitor?.id?.toString() ?? index, 78 78 - onPaginationChange: setPagination, 79 79 - getPaginationRowModel: getPaginationRowModel(), 80 80 - onColumnFiltersChange: setColumnFilters, 81 81 - onColumnVisibilityChange: setColumnVisibility, 82 82 - getFilteredRowModel: getFilteredRowModel(), 83 83 - getCoreRowModel: getCoreRowModel(), 84 84 - onSortingChange: setSorting, 85 85 - getSortedRowModel: getSortedRowModel(), 86 86 - getFacetedRowModel: getFacetedRowModel(), 87 87 - // TODO: check if we can optimize it - because it gets bigger and bigger with every new filter 88 88 - // getFacetedUniqueValues: getFacetedUniqueValues(), 89 89 - // REMINDER: We cannot use the default getFacetedUniqueValues as it doesnt support Array of Objects 90 90 - getFacetedUniqueValues: (_table: TTable<TData>, columnId: string) => () => { 91 91 - const map = getFacetedUniqueValues<TData>()(_table, columnId)(); 92 92 - if (columnId === "tags") { 93 93 - if (tags) { 94 94 - for (const tag of tags) { 95 95 - const tagsNumber = data.reduce((prev, curr) => { 96 96 - const values = z 97 97 - .object({ tags: z.array(selectMonitorTagSchema) }) 98 98 - .safeParse(curr); 99 99 - if (!values.success) return prev; 100 100 - if (values.data.tags?.find((t) => t.name === tag.name)) 101 101 - return prev + 1; 102 102 - return prev; 103 103 - }, 0); 104 104 - map.set(tag.name, tagsNumber); 105 105 - } 106 106 - } 107 107 - } 108 108 - return map; 109 109 - }, 110 110 - }); 111 111 - 112 112 - return ( 113 113 - <div className="space-y-4"> 114 114 - <DataTableToolbar table={table} tags={tags} /> 115 115 - <div className="rounded-md border"> 116 116 - <Table> 117 117 - <TableHeader className="bg-muted/50"> 118 118 - {table.getHeaderGroups().map((headerGroup) => ( 119 119 - <TableRow key={headerGroup.id} className="hover:bg-transparent"> 120 120 - {headerGroup.headers.map((header) => { 121 121 - return ( 122 122 - // FIXME: className="[&:has(svg)]:w-4" takes the svg of the button > checkbox into account 123 123 - <TableHead 124 124 - key={header.id} 125 125 - className={header.column.columnDef.meta?.headerClassName} 126 126 - > 127 127 - {header.isPlaceholder 128 128 - ? null 129 129 - : flexRender( 130 130 - header.column.columnDef.header, 131 131 - header.getContext(), 132 132 - )} 133 133 - </TableHead> 134 134 - ); 135 135 - })} 136 136 - </TableRow> 137 137 - ))} 138 138 - </TableHeader> 139 139 - <TableBody> 140 140 - {table.getRowModel().rows?.length ? ( 141 141 - table.getRowModel().rows.map((row) => ( 142 142 - <TableRow 143 143 - key={row.id} 144 144 - data-state={row.getIsSelected() && "selected"} 145 145 - > 146 146 - {row.getVisibleCells().map((cell) => ( 147 147 - <TableCell 148 148 - key={cell.id} 149 149 - className={cell.column.columnDef.meta?.cellClassName} 150 150 - > 151 151 - {flexRender( 152 152 - cell.column.columnDef.cell, 153 153 - cell.getContext(), 154 154 - )} 155 155 - </TableCell> 156 156 - ))} 157 157 - </TableRow> 158 158 - )) 159 159 - ) : ( 160 160 - <TableRow> 161 161 - <TableCell 162 162 - colSpan={columns.length} 163 163 - className="h-24 text-center" 164 164 - > 165 165 - No results. 166 166 - </TableCell> 167 167 - </TableRow> 168 168 - )} 169 169 - </TableBody> 170 170 - </Table> 171 171 - </div> 172 172 - <DataTablePagination table={table} /> 173 173 - <DataTableFloatingActions table={table} tags={tags} /> 174 174 - </div> 175 175 - ); 176 176 - }

-73

apps/web/src/components/data-table/notification/columns.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - 5 5 - import type { Monitor, Notification } from "@openstatus/db/src/schema"; 6 6 - import { Badge } from "@openstatus/ui/src/components/badge"; 7 7 - 8 8 - import Link from "next/link"; 9 9 - import { z } from "zod"; 10 10 - import { DataTableBadges } from "../data-table-badges"; 11 11 - import { DataTableRowActions } from "./data-table-row-actions"; 12 12 - 13 13 - // TODO: use the getProviderMetaData function from the notification form to access the data 14 14 - 15 15 - export const columns: ColumnDef< 16 16 - Notification & { monitor: { monitor: Monitor }[] } 17 17 - >[] = [ 18 18 - { 19 19 - accessorKey: "name", 20 20 - header: "Name", 21 21 - cell: ({ row }) => { 22 22 - const { name } = row.original; 23 23 - return ( 24 24 - <div className="flex gap-2"> 25 25 - <Link 26 26 - href={`./notifications/${row.original.id}/edit`} 27 27 - className="group flex max-w-full items-center gap-2" 28 28 - prefetch={false} 29 29 - > 30 30 - <span className="truncate group-hover:underline">{name}</span> 31 31 - </Link> 32 32 - </div> 33 33 - ); 34 34 - }, 35 35 - }, 36 36 - { 37 37 - accessorKey: "provider", 38 38 - header: "Provider", 39 39 - cell: ({ row }) => { 40 40 - return ( 41 41 - <Badge variant="secondary" className="capitalize"> 42 42 - {row.getValue("provider")} 43 43 - </Badge> 44 44 - ); 45 45 - }, 46 46 - }, 47 47 - { 48 48 - accessorKey: "monitor", 49 49 - header: "Monitors", 50 50 - cell: ({ row }) => { 51 51 - const monitor = row.getValue("monitor"); 52 52 - const monitors = z 53 53 - .object({ monitor: z.object({ name: z.string() }) }) 54 54 - .array() 55 55 - .parse(monitor); 56 56 - return ( 57 57 - <DataTableBadges 58 58 - names={monitors.map((monitor) => monitor.monitor.name)} 59 59 - /> 60 60 - ); 61 61 - }, 62 62 - }, 63 63 - { 64 64 - id: "actions", 65 65 - cell: ({ row }) => { 66 66 - return ( 67 67 - <div className="text-right"> 68 68 - <DataTableRowActions row={row} /> 69 69 - </div> 70 70 - ); 71 71 - }, 72 72 - }, 73 73 - ];

-119

apps/web/src/components/data-table/notification/data-table-row-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Row } from "@tanstack/react-table"; 4 4 - import { MoreHorizontal } from "lucide-react"; 5 5 - import Link from "next/link"; 6 6 - import { useRouter } from "next/navigation"; 7 7 - import * as React from "react"; 8 8 - 9 9 - import { selectNotificationSchema } from "@openstatus/db/src/schema"; 10 10 - import { 11 11 - AlertDialog, 12 12 - AlertDialogAction, 13 13 - AlertDialogCancel, 14 14 - AlertDialogContent, 15 15 - AlertDialogDescription, 16 16 - AlertDialogFooter, 17 17 - AlertDialogHeader, 18 18 - AlertDialogTitle, 19 19 - AlertDialogTrigger, 20 20 - Button, 21 21 - DropdownMenu, 22 22 - DropdownMenuContent, 23 23 - DropdownMenuItem, 24 24 - DropdownMenuSeparator, 25 25 - DropdownMenuTrigger, 26 26 - } from "@openstatus/ui"; 27 27 - 28 28 - import { LoadingAnimation } from "@/components/loading-animation"; 29 29 - import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; 30 30 - import { toastAction } from "@/lib/toast"; 31 31 - import { api } from "@/trpc/client"; 32 32 - 33 33 - interface DataTableRowActionsProps<TData> { 34 34 - row: Row<TData>; 35 35 - } 36 36 - 37 37 - export function DataTableRowActions<TData>({ 38 38 - row, 39 39 - }: DataTableRowActionsProps<TData>) { 40 40 - const notification = selectNotificationSchema.parse(row.original); 41 41 - const router = useRouter(); 42 42 - const [alertOpen, setAlertOpen] = React.useState(false); 43 43 - const [isPending, startTransition] = React.useTransition(); 44 44 - const { copy } = useCopyToClipboard(); 45 45 - 46 46 - async function onDelete() { 47 47 - startTransition(async () => { 48 48 - try { 49 49 - if (!notification.id) return; 50 50 - await api.notification.deleteNotification.mutate({ 51 51 - id: notification.id, 52 52 - }); 53 53 - toastAction("deleted"); 54 54 - router.refresh(); 55 55 - setAlertOpen(false); 56 56 - } catch { 57 57 - toastAction("error"); 58 58 - } 59 59 - }); 60 60 - } 61 61 - 62 62 - return ( 63 63 - <AlertDialog open={alertOpen} onOpenChange={(value) => setAlertOpen(value)}> 64 64 - <DropdownMenu> 65 65 - <DropdownMenuTrigger asChild> 66 66 - <Button 67 67 - variant="ghost" 68 68 - className="h-8 w-8 p-0 data-[state=open]:bg-accent" 69 69 - > 70 70 - <span className="sr-only">Open menu</span> 71 71 - <MoreHorizontal className="h-4 w-4" /> 72 72 - </Button> 73 73 - </DropdownMenuTrigger> 74 74 - <DropdownMenuContent align="end"> 75 75 - <Link href={`./notifications/${notification.id}/edit`}> 76 76 - <DropdownMenuItem>Edit</DropdownMenuItem> 77 77 - </Link> 78 78 - <DropdownMenuItem 79 79 - onClick={() => 80 80 - copy(`${notification.id}`, { 81 81 - withToast: `Copied ID '${notification.id}'`, 82 82 - }) 83 83 - } 84 84 - > 85 85 - Copy ID 86 86 - </DropdownMenuItem> 87 87 - <DropdownMenuSeparator /> 88 88 - <AlertDialogTrigger asChild> 89 89 - <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background"> 90 90 - Delete 91 91 - </DropdownMenuItem> 92 92 - </AlertDialogTrigger> 93 93 - </DropdownMenuContent> 94 94 - </DropdownMenu> 95 95 - <AlertDialogContent> 96 96 - <AlertDialogHeader> 97 97 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 98 98 - <AlertDialogDescription> 99 99 - This action cannot be undone. This will permanently delete the 100 100 - notification. 101 101 - </AlertDialogDescription> 102 102 - </AlertDialogHeader> 103 103 - <AlertDialogFooter> 104 104 - <AlertDialogCancel>Cancel</AlertDialogCancel> 105 105 - <AlertDialogAction 106 106 - onClick={(e) => { 107 107 - e.preventDefault(); 108 108 - onDelete(); 109 109 - }} 110 110 - disabled={isPending} 111 111 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 112 112 - > 113 113 - {!isPending ? "Delete" : <LoadingAnimation />} 114 114 - </AlertDialogAction> 115 115 - </AlertDialogFooter> 116 116 - </AlertDialogContent> 117 117 - </AlertDialog> 118 118 - ); 119 119 - }

-80

apps/web/src/components/data-table/notification/data-table.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { 5 5 - flexRender, 6 6 - getCoreRowModel, 7 7 - useReactTable, 8 8 - } from "@tanstack/react-table"; 9 9 - 10 10 - import { 11 11 - Table, 12 12 - TableBody, 13 13 - TableCell, 14 14 - TableHead, 15 15 - TableHeader, 16 16 - TableRow, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - interface DataTableProps<TData, TValue> { 20 20 - columns: ColumnDef<TData, TValue>[]; 21 21 - data: TData[]; 22 22 - } 23 23 - 24 24 - export function DataTable<TData, TValue>({ 25 25 - columns, 26 26 - data, 27 27 - }: DataTableProps<TData, TValue>) { 28 28 - const table = useReactTable({ 29 29 - data, 30 30 - columns, 31 31 - getCoreRowModel: getCoreRowModel(), 32 32 - }); 33 33 - 34 34 - return ( 35 35 - <div className="rounded-md border"> 36 36 - <Table> 37 37 - <TableHeader className="bg-muted/50"> 38 38 - {table.getHeaderGroups().map((headerGroup) => ( 39 39 - <TableRow key={headerGroup.id} className="hover:bg-transparent"> 40 40 - {headerGroup.headers.map((header) => { 41 41 - return ( 42 42 - <TableHead key={header.id}> 43 43 - {header.isPlaceholder 44 44 - ? null 45 45 - : flexRender( 46 46 - header.column.columnDef.header, 47 47 - header.getContext(), 48 48 - )} 49 49 - </TableHead> 50 50 - ); 51 51 - })} 52 52 - </TableRow> 53 53 - ))} 54 54 - </TableHeader> 55 55 - <TableBody> 56 56 - {table.getRowModel().rows?.length ? ( 57 57 - table.getRowModel().rows.map((row) => ( 58 58 - <TableRow 59 59 - key={row.id} 60 60 - data-state={row.getIsSelected() && "selected"} 61 61 - > 62 62 - {row.getVisibleCells().map((cell) => ( 63 63 - <TableCell key={cell.id}> 64 64 - {flexRender(cell.column.columnDef.cell, cell.getContext())} 65 65 - </TableCell> 66 66 - ))} 67 67 - </TableRow> 68 68 - )) 69 69 - ) : ( 70 70 - <TableRow> 71 71 - <TableCell colSpan={columns.length} className="h-24 text-center"> 72 72 - No results. 73 73 - </TableCell> 74 74 - </TableRow> 75 75 - )} 76 76 - </TableBody> 77 77 - </Table> 78 78 - </div> 79 79 - ); 80 80 - }

-46

apps/web/src/components/data-table/page-subscriber/columns.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - 5 5 - import type { PageSubscriber } from "@openstatus/db/src/schema"; 6 6 - 7 7 - import { formatDateTime } from "@/lib/utils"; 8 8 - import { DataTableRowActions } from "./data-table-row-actions"; 9 9 - 10 10 - export const columns: ColumnDef<PageSubscriber>[] = [ 11 11 - { 12 12 - accessorKey: "email", 13 13 - header: "Email", 14 14 - cell: ({ row }) => { 15 15 - return <span>{row.getValue("email")}</span>; 16 16 - }, 17 17 - }, 18 18 - { 19 19 - accessorKey: "acceptedAt", 20 20 - header: "Accepted", 21 21 - cell: ({ row }) => { 22 22 - const { acceptedAt } = row.original; 23 23 - const date = acceptedAt ? formatDateTime(acceptedAt) : "-"; 24 24 - return <span className="text-muted-foreground">{date}</span>; 25 25 - }, 26 26 - }, 27 27 - { 28 28 - accessorKey: "createdAt", 29 29 - header: "Created", 30 30 - cell: ({ row }) => { 31 31 - const { createdAt } = row.original; 32 32 - const date = createdAt ? formatDateTime(createdAt) : "-"; 33 33 - return <span className="text-muted-foreground">{date}</span>; 34 34 - }, 35 35 - }, 36 36 - { 37 37 - id: "actions", 38 38 - cell: ({ row }) => { 39 39 - return ( 40 40 - <div className="text-right"> 41 41 - <DataTableRowActions row={row} /> 42 42 - </div> 43 43 - ); 44 44 - }, 45 45 - }, 46 46 - ];

-120

apps/web/src/components/data-table/page-subscriber/data-table-row-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Row } from "@tanstack/react-table"; 4 4 - import { MoreHorizontal } from "lucide-react"; 5 5 - import { useRouter } from "next/navigation"; 6 6 - import * as React from "react"; 7 7 - 8 8 - import { selectPageSubscriberSchema } from "@openstatus/db/src/schema"; 9 9 - import { 10 10 - AlertDialog, 11 11 - AlertDialogAction, 12 12 - AlertDialogCancel, 13 13 - AlertDialogContent, 14 14 - AlertDialogDescription, 15 15 - AlertDialogFooter, 16 16 - AlertDialogHeader, 17 17 - AlertDialogTitle, 18 18 - AlertDialogTrigger, 19 19 - Button, 20 20 - DropdownMenu, 21 21 - DropdownMenuContent, 22 22 - DropdownMenuItem, 23 23 - DropdownMenuTrigger, 24 24 - } from "@openstatus/ui"; 25 25 - 26 26 - import { LoadingAnimation } from "@/components/loading-animation"; 27 27 - import { toastAction } from "@/lib/toast"; 28 28 - import { api } from "@/trpc/client"; 29 29 - 30 30 - interface DataTableRowActionsProps<TData> { 31 31 - row: Row<TData>; 32 32 - } 33 33 - 34 34 - export function DataTableRowActions<TData>({ 35 35 - row, 36 36 - }: DataTableRowActionsProps<TData>) { 37 37 - const subscriber = selectPageSubscriberSchema.parse(row.original); 38 38 - const router = useRouter(); 39 39 - const [alertOpen, setAlertOpen] = React.useState(false); 40 40 - const [isPending, startTransition] = React.useTransition(); 41 41 - 42 42 - async function onDelete() { 43 43 - startTransition(async () => { 44 44 - try { 45 45 - if (!subscriber.id) return; 46 46 - await api.pageSubscriber.unsubscribeById.mutate({ 47 47 - id: subscriber.id, 48 48 - }); 49 49 - toastAction("deleted"); 50 50 - router.refresh(); 51 51 - setAlertOpen(false); 52 52 - } catch { 53 53 - toastAction("error"); 54 54 - } 55 55 - }); 56 56 - } 57 57 - 58 58 - async function onAccept() { 59 59 - startTransition(async () => { 60 60 - try { 61 61 - if (!subscriber.id) return; 62 62 - await api.pageSubscriber.acceptSubscriberById.mutate({ 63 63 - id: subscriber.id, 64 64 - }); 65 65 - toastAction("success"); 66 66 - router.refresh(); 67 67 - } catch { 68 68 - toastAction("error"); 69 69 - } 70 70 - }); 71 71 - } 72 72 - 73 73 - return ( 74 74 - <AlertDialog open={alertOpen} onOpenChange={(value) => setAlertOpen(value)}> 75 75 - <DropdownMenu> 76 76 - <DropdownMenuTrigger asChild> 77 77 - <Button 78 78 - variant="ghost" 79 79 - className="h-8 w-8 p-0 data-[state=open]:bg-accent" 80 80 - > 81 81 - <span className="sr-only">Open menu</span> 82 82 - <MoreHorizontal className="h-4 w-4" /> 83 83 - </Button> 84 84 - </DropdownMenuTrigger> 85 85 - <DropdownMenuContent align="end"> 86 86 - {!subscriber.acceptedAt ? ( 87 87 - <DropdownMenuItem onClick={onAccept}>Accept</DropdownMenuItem> 88 88 - ) : null} 89 89 - <AlertDialogTrigger asChild> 90 90 - <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background"> 91 91 - Delete 92 92 - </DropdownMenuItem> 93 93 - </AlertDialogTrigger> 94 94 - </DropdownMenuContent> 95 95 - </DropdownMenu> 96 96 - <AlertDialogContent> 97 97 - <AlertDialogHeader> 98 98 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 99 99 - <AlertDialogDescription> 100 100 - The user will not be able to receive the latest status reports. But 101 101 - will be able to subscribe again. 102 102 - </AlertDialogDescription> 103 103 - </AlertDialogHeader> 104 104 - <AlertDialogFooter> 105 105 - <AlertDialogCancel>Cancel</AlertDialogCancel> 106 106 - <AlertDialogAction 107 107 - onClick={(e) => { 108 108 - e.preventDefault(); 109 109 - onDelete(); 110 110 - }} 111 111 - disabled={isPending} 112 112 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 113 113 - > 114 114 - {!isPending ? "Delete" : <LoadingAnimation />} 115 115 - </AlertDialogAction> 116 116 - </AlertDialogFooter> 117 117 - </AlertDialogContent> 118 118 - </AlertDialog> 119 119 - ); 120 120 - }

-80

apps/web/src/components/data-table/page-subscriber/data-table.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { 5 5 - flexRender, 6 6 - getCoreRowModel, 7 7 - useReactTable, 8 8 - } from "@tanstack/react-table"; 9 9 - 10 10 - import { 11 11 - Table, 12 12 - TableBody, 13 13 - TableCell, 14 14 - TableHead, 15 15 - TableHeader, 16 16 - TableRow, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - interface DataTableProps<TData, TValue> { 20 20 - columns: ColumnDef<TData, TValue>[]; 21 21 - data: TData[]; 22 22 - } 23 23 - 24 24 - export function DataTable<TData, TValue>({ 25 25 - columns, 26 26 - data, 27 27 - }: DataTableProps<TData, TValue>) { 28 28 - const table = useReactTable({ 29 29 - data, 30 30 - columns, 31 31 - getCoreRowModel: getCoreRowModel(), 32 32 - }); 33 33 - 34 34 - return ( 35 35 - <div className="rounded-md border"> 36 36 - <Table> 37 37 - <TableHeader className="bg-muted/50"> 38 38 - {table.getHeaderGroups().map((headerGroup) => ( 39 39 - <TableRow key={headerGroup.id} className="hover:bg-transparent"> 40 40 - {headerGroup.headers.map((header) => { 41 41 - return ( 42 42 - <TableHead key={header.id}> 43 43 - {header.isPlaceholder 44 44 - ? null 45 45 - : flexRender( 46 46 - header.column.columnDef.header, 47 47 - header.getContext(), 48 48 - )} 49 49 - </TableHead> 50 50 - ); 51 51 - })} 52 52 - </TableRow> 53 53 - ))} 54 54 - </TableHeader> 55 55 - <TableBody> 56 56 - {table.getRowModel().rows?.length ? ( 57 57 - table.getRowModel().rows.map((row) => ( 58 58 - <TableRow 59 59 - key={row.id} 60 60 - data-state={row.getIsSelected() && "selected"} 61 61 - > 62 62 - {row.getVisibleCells().map((cell) => ( 63 63 - <TableCell key={cell.id}> 64 64 - {flexRender(cell.column.columnDef.cell, cell.getContext())} 65 65 - </TableCell> 66 66 - ))} 67 67 - </TableRow> 68 68 - )) 69 69 - ) : ( 70 70 - <TableRow> 71 71 - <TableCell colSpan={columns.length} className="h-24 text-center"> 72 72 - No results. 73 73 - </TableCell> 74 74 - </TableRow> 75 75 - )} 76 76 - </TableBody> 77 77 - </Table> 78 78 - </div> 79 79 - ); 80 80 - }

-173

apps/web/src/components/data-table/status-page/columns.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import Image from "next/image"; 5 5 - import Link from "next/link"; 6 6 - import * as z from "zod"; 7 7 - 8 8 - import type { 9 9 - Maintenance, 10 10 - Page, 11 11 - StatusReport, 12 12 - StatusReportUpdate, 13 13 - } from "@openstatus/db/src/schema"; 14 14 - import { 15 15 - Tooltip, 16 16 - TooltipContent, 17 17 - TooltipProvider, 18 18 - TooltipTrigger, 19 19 - } from "@openstatus/ui"; 20 20 - 21 21 - import { formatDate } from "@/lib/utils"; 22 22 - import { ArrowUpRight, Check } from "lucide-react"; 23 23 - import { DataTableBadges } from "../data-table-badges"; 24 24 - import { DataTableRowActions } from "./data-table-row-actions"; 25 25 - 26 26 - export const columns: ColumnDef< 27 27 - Page & { 28 28 - monitorsToPages: { monitor: { name: string } }[]; 29 29 - maintenances: Maintenance[]; // we get only the active maintenances! 30 30 - statusReports: (StatusReport & { 31 31 - statusReportUpdates: StatusReportUpdate[]; 32 32 - })[]; 33 33 - } 34 34 - >[] = [ 35 35 - { 36 36 - accessorKey: "title", 37 37 - header: "Title", 38 38 - cell: ({ row }) => { 39 39 - return ( 40 40 - <Link 41 41 - href={`./status-pages/${row.original.id}/reports`} 42 42 - className="group flex items-center gap-2" 43 43 - > 44 44 - <span className="max-w-[125px] truncate group-hover:underline"> 45 45 - {row.getValue("title")} 46 46 - </span> 47 47 - </Link> 48 48 - ); 49 49 - }, 50 50 - }, 51 51 - { 52 52 - accessorKey: "slug", 53 53 - header: "Slug", 54 54 - cell: ({ row }) => { 55 55 - return ( 56 56 - <TooltipProvider> 57 57 - <Tooltip delayDuration={100}> 58 58 - <TooltipTrigger> 59 59 - <a 60 60 - href={ 61 61 - process.env.NODE_ENV === "production" 62 62 - ? `https://${row.original.slug}.openstatus.dev` 63 63 - : `/status-page/${row.original.slug}` 64 64 - } 65 65 - target="_blank" 66 66 - rel="noreferrer" 67 67 - className="group flex items-center gap-1" 68 68 - > 69 69 - <span className="max-w-[125px] truncate font-mono group-hover:underline"> 70 70 - {row.getValue("slug")} 71 71 - </span> 72 72 - <ArrowUpRight className="h-4 w-4 shrink-0 text-muted-foreground group-hover:text-foreground" /> 73 73 - </a> 74 74 - </TooltipTrigger> 75 75 - <TooltipContent>Visit page</TooltipContent> 76 76 - </Tooltip> 77 77 - </TooltipProvider> 78 78 - ); 79 79 - }, 80 80 - }, 81 81 - { 82 82 - accessorKey: "monitorsToPages", 83 83 - header: "Monitors", 84 84 - cell: ({ row }) => { 85 85 - const monitorsToPages = row.getValue("monitorsToPages"); 86 86 - const monitors = z 87 87 - .object({ monitor: z.object({ name: z.string() }) }) 88 88 - .array() 89 89 - .parse(monitorsToPages); 90 90 - return ( 91 91 - <DataTableBadges 92 92 - names={monitors.map((monitor) => monitor.monitor.name)} 93 93 - /> 94 94 - ); 95 95 - }, 96 96 - }, 97 97 - { 98 98 - accessorKey: "statusReports", 99 99 - header: "Last Report", 100 100 - cell: ({ row }) => { 101 101 - const lastReport = row.original.statusReports?.[0]; 102 102 - 103 103 - if (!lastReport) { 104 104 - return <span className="text-muted-foreground/50">-</span>; 105 105 - } 106 106 - 107 107 - const date = 108 108 - lastReport.statusReportUpdates?.[0].date || lastReport.updatedAt; 109 109 - 110 110 - return ( 111 111 - <div className="group relative"> 112 112 - <span className="group-hover:text-muted-foreground/70"> 113 113 - {formatDate(date)} 114 114 - </span> 115 115 - <div className="-inset-x-2 -inset-y-1 invisible absolute flex items-center px-2 py-1 backdrop-blur-xs group-hover:visible"> 116 116 - <Link 117 117 - href={`./status-pages/${row.original.id}/reports/${lastReport.id}`} 118 118 - className="hover:underline" 119 119 - > 120 120 - Go to report 121 121 - </Link> 122 122 - </div> 123 123 - </div> 124 124 - ); 125 125 - }, 126 126 - }, 127 127 - { 128 128 - accessorKey: "icon", 129 129 - header: "Favicon", 130 130 - cell: ({ row }) => { 131 131 - if (!row.getValue("icon")) { 132 132 - return <span className="text-muted-foreground/50">-</span>; 133 133 - } 134 134 - return ( 135 135 - <Image 136 136 - src={row.getValue("icon")} 137 137 - alt="" 138 138 - className="rounded-sm border border-border" 139 139 - width={20} 140 140 - height={20} 141 141 - /> 142 142 - ); 143 143 - }, 144 144 - }, 145 145 - { 146 146 - accessorKey: "passwordProtected", 147 147 - header: "Protected", 148 148 - cell: ({ row }) => { 149 149 - const passwordProtected = Boolean(row.getValue("passwordProtected")); 150 150 - if (passwordProtected) { 151 151 - return <Check className="h-4 w-4 text-foreground" />; 152 152 - } 153 153 - return <span className="text-muted-foreground/50">-</span>; 154 154 - }, 155 155 - }, 156 156 - // { 157 157 - // accessorKey: "createdAt", 158 158 - // header: "Created", 159 159 - // cell: ({ row }) => { 160 160 - // return <span>{formatDate(row.getValue("createdAt"))}</span>; 161 161 - // }, 162 162 - // }, 163 163 - { 164 164 - id: "actions", 165 165 - cell: ({ row }) => { 166 166 - return ( 167 167 - <div className="text-right"> 168 168 - <DataTableRowActions row={row} /> 169 169 - </div> 170 170 - ); 171 171 - }, 172 172 - }, 173 173 - ];

-224

apps/web/src/components/data-table/status-page/data-table-row-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Row } from "@tanstack/react-table"; 4 4 - import { MoreHorizontal } from "lucide-react"; 5 5 - import Link from "next/link"; 6 6 - import { useRouter } from "next/navigation"; 7 7 - import * as React from "react"; 8 8 - 9 9 - import { selectPageSchema } from "@openstatus/db/src/schema"; 10 10 - import { 11 11 - AlertDialog, 12 12 - AlertDialogAction, 13 13 - AlertDialogCancel, 14 14 - AlertDialogContent, 15 15 - AlertDialogDescription, 16 16 - AlertDialogFooter, 17 17 - AlertDialogHeader, 18 18 - AlertDialogTitle, 19 19 - AlertDialogTrigger, 20 20 - Button, 21 21 - Dialog, 22 22 - DialogContent, 23 23 - DialogDescription, 24 24 - DialogHeader, 25 25 - DialogTitle, 26 26 - DialogTrigger, 27 27 - DropdownMenu, 28 28 - DropdownMenuContent, 29 29 - DropdownMenuItem, 30 30 - DropdownMenuSeparator, 31 31 - DropdownMenuTrigger, 32 32 - Label, 33 33 - RadioGroup, 34 34 - RadioGroupItem, 35 35 - } from "@openstatus/ui"; 36 36 - 37 37 - import { LoadingAnimation } from "@/components/loading-animation"; 38 38 - import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; 39 39 - import { toastAction } from "@/lib/toast"; 40 40 - import { api } from "@/trpc/client"; 41 41 - 42 42 - export const SIZE: Record<string, { width: number; height: number }> = { 43 43 - sm: { width: 120, height: 34 }, 44 44 - md: { width: 160, height: 46 }, 45 45 - lg: { width: 200, height: 56 }, 46 46 - xl: { width: 240, height: 68 }, 47 47 - }; 48 48 - 49 49 - interface DataTableRowActionsProps<TData> { 50 50 - row: Row<TData>; 51 51 - } 52 52 - 53 53 - export function DataTableRowActions<TData>({ 54 54 - row, 55 55 - }: DataTableRowActionsProps<TData>) { 56 56 - const page = selectPageSchema.parse(row.original); 57 57 - const router = useRouter(); 58 58 - const [alertOpen, setAlertOpen] = React.useState(false); 59 59 - const [isPending, startTransition] = React.useTransition(); 60 60 - const [size, setSize] = React.useState<"sm" | "md" | "lg" | "xl">("sm"); 61 61 - const [theme, setTheme] = React.useState<"light" | "dark">("light"); 62 62 - const { copy } = useCopyToClipboard(); 63 63 - 64 64 - async function onDelete() { 65 65 - startTransition(async () => { 66 66 - try { 67 67 - if (!page.id) return; 68 68 - await api.page.delete.mutate({ id: page.id }); 69 69 - toastAction("deleted"); 70 70 - router.refresh(); 71 71 - setAlertOpen(false); 72 72 - } catch { 73 73 - toastAction("error"); 74 74 - } 75 75 - }); 76 76 - } 77 77 - 78 78 - return ( 79 79 - <Dialog> 80 80 - <AlertDialog 81 81 - open={alertOpen} 82 82 - onOpenChange={(value) => setAlertOpen(value)} 83 83 - > 84 84 - <DropdownMenu> 85 85 - <DropdownMenuTrigger asChild> 86 86 - <Button 87 87 - variant="ghost" 88 88 - className="h-8 w-8 p-0 data-[state=open]:bg-accent" 89 89 - > 90 90 - <span className="sr-only">Open menu</span> 91 91 - <MoreHorizontal className="h-4 w-4" /> 92 92 - </Button> 93 93 - </DropdownMenuTrigger> 94 94 - <DropdownMenuContent align="end"> 95 95 - <Link href={`./status-pages/${page.id}/edit`}> 96 96 - <DropdownMenuItem>Edit</DropdownMenuItem> 97 97 - </Link> 98 98 - <Link 99 99 - href={ 100 100 - process.env.NODE_ENV === "production" 101 101 - ? `https://${page.slug}.openstatus.dev` 102 102 - : `/status-page/${page.slug}` 103 103 - } 104 104 - target="_blank" 105 105 - > 106 106 - <DropdownMenuItem>Visit</DropdownMenuItem> 107 107 - </Link> 108 108 - <DropdownMenuItem 109 109 - onClick={() => 110 110 - copy(`${page.id}`, { 111 111 - withToast: `Copied ID '${page.id}'`, 112 112 - }) 113 113 - } 114 114 - > 115 115 - Copy ID 116 116 - </DropdownMenuItem> 117 117 - <DropdownMenuSeparator /> 118 118 - <Link href={`./status-pages/${page.id}/reports/new`}> 119 119 - <DropdownMenuItem>Create Report</DropdownMenuItem> 120 120 - </Link> 121 121 - <DialogTrigger asChild> 122 122 - <DropdownMenuItem>Create Badge</DropdownMenuItem> 123 123 - </DialogTrigger> 124 124 - <DropdownMenuSeparator /> 125 125 - <AlertDialogTrigger asChild> 126 126 - <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background"> 127 127 - Delete 128 128 - </DropdownMenuItem> 129 129 - </AlertDialogTrigger> 130 130 - </DropdownMenuContent> 131 131 - </DropdownMenu> 132 132 - <AlertDialogContent> 133 133 - <AlertDialogHeader> 134 134 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 135 135 - <AlertDialogDescription> 136 136 - This action cannot be undone. This will permanently delete the 137 137 - monitor. 138 138 - </AlertDialogDescription> 139 139 - </AlertDialogHeader> 140 140 - <AlertDialogFooter> 141 141 - <AlertDialogCancel>Cancel</AlertDialogCancel> 142 142 - <AlertDialogAction 143 143 - onClick={(e) => { 144 144 - e.preventDefault(); 145 145 - onDelete(); 146 146 - }} 147 147 - disabled={isPending} 148 148 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 149 149 - > 150 150 - {!isPending ? "Delete" : <LoadingAnimation />} 151 151 - </AlertDialogAction> 152 152 - </AlertDialogFooter> 153 153 - </AlertDialogContent> 154 154 - <DialogContent> 155 155 - <DialogHeader> 156 156 - <DialogTitle>Create Badge</DialogTitle> 157 157 - </DialogHeader> 158 158 - <DialogDescription> 159 159 - Create an uptime badge for your status page. 160 160 - </DialogDescription> 161 161 - <div className="flex items-center justify-center"> 162 162 - <div className="flex w-full items-center justify-center rounded-md border p-4"> 163 163 - <img 164 164 - src={`/status-page/${page.slug}/badge?size=${size}&theme=${theme}`} 165 165 - alt="Badge" 166 166 - width={SIZE[size].width} 167 167 - height={SIZE[size].height} 168 168 - /> 169 169 - </div> 170 170 - </div> 171 171 - <div className="flex items-center justify-between"> 172 172 - <RadioGroup 173 173 - className="flex" 174 174 - onValueChange={(value) => 175 175 - setSize(value as "sm" | "md" | "lg" | "xl") 176 176 - } 177 177 - value={size} 178 178 - > 179 179 - {Object.keys(SIZE).map((size) => ( 180 180 - <div className="flex items-center space-x-2" key={size}> 181 181 - <RadioGroupItem value={size} id={size} /> 182 182 - <Label htmlFor={size}>{size}</Label> 183 183 - </div> 184 184 - ))} 185 185 - </RadioGroup> 186 186 - <div> 187 187 - <span className="font-mono text-muted-foreground text-sm"> 188 188 - {SIZE[size].width}x{SIZE[size].height} 189 189 - </span> 190 190 - </div> 191 191 - </div> 192 192 - <RadioGroup 193 193 - className="flex" 194 194 - onValueChange={(value) => setTheme(value as "light" | "dark")} 195 195 - value={theme} 196 196 - > 197 197 - {["light", "dark"].map((theme) => ( 198 198 - <div className="flex items-center space-x-2" key={theme}> 199 199 - <RadioGroupItem value={theme} id={theme} /> 200 200 - <Label htmlFor={theme}>{theme}</Label> 201 201 - </div> 202 202 - ))} 203 203 - </RadioGroup> 204 204 - <div className="flex items-center justify-center"> 205 205 - <Button 206 206 - variant="outline" 207 207 - className="w-full" 208 208 - size="sm" 209 209 - onClick={() => 210 210 - copy( 211 211 - `https://openstatus.dev/status-page/${page.slug}/badge?size=${size}&theme=${theme}`, 212 212 - { withToast: true }, 213 213 - ) 214 214 - } 215 215 - > 216 216 - https://openstatus.dev/status-page/{page.slug}/badge?size={size} 217 217 - &theme={theme} 218 218 - </Button> 219 219 - </div> 220 220 - </DialogContent> 221 221 - </AlertDialog> 222 222 - </Dialog> 223 223 - ); 224 224 - }

-80

apps/web/src/components/data-table/status-page/data-table.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { 5 5 - flexRender, 6 6 - getCoreRowModel, 7 7 - useReactTable, 8 8 - } from "@tanstack/react-table"; 9 9 - 10 10 - import { 11 11 - Table, 12 12 - TableBody, 13 13 - TableCell, 14 14 - TableHead, 15 15 - TableHeader, 16 16 - TableRow, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - interface DataTableProps<TData, TValue> { 20 20 - columns: ColumnDef<TData, TValue>[]; 21 21 - data: TData[]; 22 22 - } 23 23 - 24 24 - export function DataTable<TData, TValue>({ 25 25 - columns, 26 26 - data, 27 27 - }: DataTableProps<TData, TValue>) { 28 28 - const table = useReactTable({ 29 29 - data, 30 30 - columns, 31 31 - getCoreRowModel: getCoreRowModel(), 32 32 - }); 33 33 - 34 34 - return ( 35 35 - <div className="rounded-md border"> 36 36 - <Table> 37 37 - <TableHeader className="bg-muted/50"> 38 38 - {table.getHeaderGroups().map((headerGroup) => ( 39 39 - <TableRow key={headerGroup.id} className="hover:bg-transparent"> 40 40 - {headerGroup.headers.map((header) => { 41 41 - return ( 42 42 - <TableHead key={header.id}> 43 43 - {header.isPlaceholder 44 44 - ? null 45 45 - : flexRender( 46 46 - header.column.columnDef.header, 47 47 - header.getContext(), 48 48 - )} 49 49 - </TableHead> 50 50 - ); 51 51 - })} 52 52 - </TableRow> 53 53 - ))} 54 54 - </TableHeader> 55 55 - <TableBody> 56 56 - {table.getRowModel().rows?.length ? ( 57 57 - table.getRowModel().rows.map((row) => ( 58 58 - <TableRow 59 59 - key={row.id} 60 60 - data-state={row.getIsSelected() && "selected"} 61 61 - > 62 62 - {row.getVisibleCells().map((cell) => ( 63 63 - <TableCell key={cell.id}> 64 64 - {flexRender(cell.column.columnDef.cell, cell.getContext())} 65 65 - </TableCell> 66 66 - ))} 67 67 - </TableRow> 68 68 - )) 69 69 - ) : ( 70 70 - <TableRow> 71 71 - <TableCell colSpan={columns.length} className="h-24 text-center"> 72 72 - No results. 73 73 - </TableCell> 74 74 - </TableRow> 75 75 - )} 76 76 - </TableBody> 77 77 - </Table> 78 78 - </div> 79 79 - ); 80 80 - }

-63

apps/web/src/components/data-table/status-report/columns.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import Link from "next/link"; 5 5 - 6 6 - import type { 7 7 - StatusReport, 8 8 - StatusReportUpdate, 9 9 - } from "@openstatus/db/src/schema"; 10 10 - 11 11 - import { StatusBadge } from "@/components/status-update/status-badge"; 12 12 - import { formatDate } from "@/lib/utils"; 13 13 - import { DataTableRowActions } from "./data-table-row-actions"; 14 14 - 15 15 - export const columns: ColumnDef< 16 16 - StatusReport & { statusReportUpdates: StatusReportUpdate[] } 17 17 - >[] = [ 18 18 - { 19 19 - accessorKey: "title", 20 20 - header: "Title", 21 21 - cell: ({ row }) => { 22 22 - const id = row.original.id; 23 23 - return ( 24 24 - <Link href={`./reports/${id}/overview`} className="hover:underline"> 25 25 - <span className="truncate">{row.getValue("title")}</span> 26 26 - </Link> 27 27 - ); 28 28 - }, 29 29 - }, 30 30 - { 31 31 - accessorKey: "status", 32 32 - header: "Status", 33 33 - cell: ({ row }) => { 34 34 - const status = row.original.status; 35 35 - return <StatusBadge status={status} />; 36 36 - }, 37 37 - }, 38 38 - { 39 39 - accessorKey: "statusReportUpdates", 40 40 - header: "Updates", 41 41 - cell: ({ row }) => { 42 42 - const statusReportUpdates = row.original.statusReportUpdates; 43 43 - return <code>{statusReportUpdates.length}</code>; 44 44 - }, 45 45 - }, 46 46 - { 47 47 - accessorKey: "updatedAt", 48 48 - header: "Last Updated", 49 49 - cell: ({ row }) => { 50 50 - return <span>{formatDate(row.getValue("updatedAt"))}</span>; 51 51 - }, 52 52 - }, 53 53 - { 54 54 - id: "actions", 55 55 - cell: ({ row }) => { 56 56 - return ( 57 57 - <div className="text-right"> 58 58 - <DataTableRowActions row={row} /> 59 59 - </div> 60 60 - ); 61 61 - }, 62 62 - }, 63 63 - ];

-120

apps/web/src/components/data-table/status-report/data-table-row-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Row } from "@tanstack/react-table"; 4 4 - import { MoreHorizontal } from "lucide-react"; 5 5 - import Link from "next/link"; 6 6 - import { useRouter } from "next/navigation"; 7 7 - import * as React from "react"; 8 8 - 9 9 - import { selectStatusReportSchema } from "@openstatus/db/src/schema"; 10 10 - import { 11 11 - AlertDialog, 12 12 - AlertDialogAction, 13 13 - AlertDialogCancel, 14 14 - AlertDialogContent, 15 15 - AlertDialogDescription, 16 16 - AlertDialogFooter, 17 17 - AlertDialogHeader, 18 18 - AlertDialogTitle, 19 19 - AlertDialogTrigger, 20 20 - Button, 21 21 - DropdownMenu, 22 22 - DropdownMenuContent, 23 23 - DropdownMenuItem, 24 24 - DropdownMenuTrigger, 25 25 - } from "@openstatus/ui"; 26 26 - 27 27 - import { LoadingAnimation } from "@/components/loading-animation"; 28 28 - import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"; 29 29 - import { toastAction } from "@/lib/toast"; 30 30 - import { api } from "@/trpc/client"; 31 31 - 32 32 - interface DataTableRowActionsProps<TData> { 33 33 - row: Row<TData>; 34 34 - } 35 35 - 36 36 - export function DataTableRowActions<TData>({ 37 37 - row, 38 38 - }: DataTableRowActionsProps<TData>) { 39 39 - const statusReport = selectStatusReportSchema.parse(row.original); 40 40 - const router = useRouter(); 41 41 - const [alertOpen, setAlertOpen] = React.useState(false); 42 42 - const [isPending, startTransition] = React.useTransition(); 43 43 - const { copy } = useCopyToClipboard(); 44 44 - 45 45 - async function onDelete() { 46 46 - startTransition(async () => { 47 47 - try { 48 48 - if (!statusReport.id) return; 49 49 - await api.statusReport.deleteStatusReport.mutate({ 50 50 - id: statusReport.id, 51 51 - }); 52 52 - toastAction("deleted"); 53 53 - router.refresh(); 54 54 - setAlertOpen(false); 55 55 - } catch { 56 56 - toastAction("error"); 57 57 - } 58 58 - }); 59 59 - } 60 60 - 61 61 - return ( 62 62 - <AlertDialog open={alertOpen} onOpenChange={(value) => setAlertOpen(value)}> 63 63 - <DropdownMenu> 64 64 - <DropdownMenuTrigger asChild> 65 65 - <Button 66 66 - variant="ghost" 67 67 - className="h-8 w-8 p-0 data-[state=open]:bg-accent" 68 68 - > 69 69 - <span className="sr-only">Open menu</span> 70 70 - <MoreHorizontal className="h-4 w-4" /> 71 71 - </Button> 72 72 - </DropdownMenuTrigger> 73 73 - <DropdownMenuContent align="end"> 74 74 - <Link href={`./reports/${statusReport.id}/edit`}> 75 75 - <DropdownMenuItem>Edit</DropdownMenuItem> 76 76 - </Link> 77 77 - <Link href={`./reports/${statusReport.id}/overview`}> 78 78 - <DropdownMenuItem>View</DropdownMenuItem> 79 79 - </Link> 80 80 - <DropdownMenuItem 81 81 - onClick={() => 82 82 - copy(`${statusReport.id}`, { 83 83 - withToast: `Copied ID '${statusReport.id}'`, 84 84 - }) 85 85 - } 86 86 - > 87 87 - Copy ID 88 88 - </DropdownMenuItem> 89 89 - <AlertDialogTrigger asChild> 90 90 - <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background"> 91 91 - Delete 92 92 - </DropdownMenuItem> 93 93 - </AlertDialogTrigger> 94 94 - </DropdownMenuContent> 95 95 - </DropdownMenu> 96 96 - <AlertDialogContent> 97 97 - <AlertDialogHeader> 98 98 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 99 99 - <AlertDialogDescription> 100 100 - This action cannot be undone. This will permanently delete the 101 101 - monitor. 102 102 - </AlertDialogDescription> 103 103 - </AlertDialogHeader> 104 104 - <AlertDialogFooter> 105 105 - <AlertDialogCancel>Cancel</AlertDialogCancel> 106 106 - <AlertDialogAction 107 107 - onClick={(e) => { 108 108 - e.preventDefault(); 109 109 - onDelete(); 110 110 - }} 111 111 - disabled={isPending} 112 112 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 113 113 - > 114 114 - {!isPending ? "Delete" : <LoadingAnimation />} 115 115 - </AlertDialogAction> 116 116 - </AlertDialogFooter> 117 117 - </AlertDialogContent> 118 118 - </AlertDialog> 119 119 - ); 120 120 - }

-80

apps/web/src/components/data-table/status-report/data-table.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { 5 5 - flexRender, 6 6 - getCoreRowModel, 7 7 - useReactTable, 8 8 - } from "@tanstack/react-table"; 9 9 - 10 10 - import { 11 11 - Table, 12 12 - TableBody, 13 13 - TableCell, 14 14 - TableHead, 15 15 - TableHeader, 16 16 - TableRow, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - interface DataTableProps<TData, TValue> { 20 20 - columns: ColumnDef<TData, TValue>[]; 21 21 - data: TData[]; 22 22 - } 23 23 - 24 24 - export function DataTable<TData, TValue>({ 25 25 - columns, 26 26 - data, 27 27 - }: DataTableProps<TData, TValue>) { 28 28 - const table = useReactTable({ 29 29 - data, 30 30 - columns, 31 31 - getCoreRowModel: getCoreRowModel(), 32 32 - }); 33 33 - 34 34 - return ( 35 35 - <div className="rounded-md border"> 36 36 - <Table> 37 37 - <TableHeader className="bg-muted/50"> 38 38 - {table.getHeaderGroups().map((headerGroup) => ( 39 39 - <TableRow key={headerGroup.id} className="hover:bg-transparent"> 40 40 - {headerGroup.headers.map((header) => { 41 41 - return ( 42 42 - <TableHead key={header.id}> 43 43 - {header.isPlaceholder 44 44 - ? null 45 45 - : flexRender( 46 46 - header.column.columnDef.header, 47 47 - header.getContext(), 48 48 - )} 49 49 - </TableHead> 50 50 - ); 51 51 - })} 52 52 - </TableRow> 53 53 - ))} 54 54 - </TableHeader> 55 55 - <TableBody> 56 56 - {table.getRowModel().rows?.length ? ( 57 57 - table.getRowModel().rows.map((row) => ( 58 58 - <TableRow 59 59 - key={row.id} 60 60 - data-state={row.getIsSelected() && "selected"} 61 61 - > 62 62 - {row.getVisibleCells().map((cell) => ( 63 63 - <TableCell key={cell.id}> 64 64 - {flexRender(cell.column.columnDef.cell, cell.getContext())} 65 65 - </TableCell> 66 66 - ))} 67 67 - </TableRow> 68 68 - )) 69 69 - ) : ( 70 70 - <TableRow> 71 71 - <TableCell colSpan={columns.length} className="h-24 text-center"> 72 72 - No results. 73 73 - </TableCell> 74 74 - </TableRow> 75 75 - )} 76 76 - </TableBody> 77 77 - </Table> 78 78 - </div> 79 79 - ); 80 80 - }

-59

apps/web/src/components/data-table/user/columns.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - 5 5 - import type { User, WorkspaceRole } from "@openstatus/db/src/schema"; 6 6 - import { Badge } from "@openstatus/ui/src/components/badge"; 7 7 - 8 8 - import { formatDate } from "@/lib/utils"; 9 9 - import { DataTableRowActions } from "./data-table-row-actions"; 10 10 - 11 11 - // TODO: add total number of monitors 12 12 - 13 13 - export const columns: ColumnDef<User & { role: WorkspaceRole }>[] = [ 14 14 - { 15 15 - accessorKey: "email", 16 16 - header: "Email", 17 17 - cell: ({ row }) => { 18 18 - return ( 19 19 - <div> 20 20 - <p> 21 21 - {row.original.firstName} {row.original.lastName} 22 22 - </p> 23 23 - <p className="text-muted-foreground">{row.getValue("email")}</p> 24 24 - </div> 25 25 - ); 26 26 - }, 27 27 - }, 28 28 - { 29 29 - accessorKey: "role", 30 30 - header: "Role", 31 31 - cell: ({ row }) => { 32 32 - const role = row.getValue("role") as WorkspaceRole; 33 33 - return ( 34 34 - <Badge variant={role === "member" ? "outline" : "default"}> 35 35 - {row.getValue("role")} 36 36 - </Badge> 37 37 - ); 38 38 - }, 39 39 - }, 40 40 - { 41 41 - accessorKey: "createdAt", 42 42 - header: "Created", 43 43 - cell: ({ row }) => { 44 44 - return <span>{formatDate(row.getValue("createdAt"))}</span>; 45 45 - }, 46 46 - }, 47 47 - { 48 48 - id: "actions", 49 49 - cell: ({ row }) => { 50 50 - const role = row.original.role; 51 51 - if (role === "owner") return null; 52 52 - return ( 53 53 - <div className="text-right"> 54 54 - <DataTableRowActions row={row} /> 55 55 - </div> 56 56 - ); 57 57 - }, 58 58 - }, 59 59 - ];

-105

apps/web/src/components/data-table/user/data-table-row-actions.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { Row } from "@tanstack/react-table"; 4 4 - import { MoreHorizontal } from "lucide-react"; 5 5 - import { useRouter } from "next/navigation"; 6 6 - import * as React from "react"; 7 7 - 8 8 - import { selectUserSchema } from "@openstatus/db/src/schema"; 9 9 - import { 10 10 - AlertDialog, 11 11 - AlertDialogAction, 12 12 - AlertDialogCancel, 13 13 - AlertDialogContent, 14 14 - AlertDialogDescription, 15 15 - AlertDialogFooter, 16 16 - AlertDialogHeader, 17 17 - AlertDialogTitle, 18 18 - AlertDialogTrigger, 19 19 - Button, 20 20 - DropdownMenu, 21 21 - DropdownMenuContent, 22 22 - DropdownMenuItem, 23 23 - DropdownMenuTrigger, 24 24 - } from "@openstatus/ui"; 25 25 - 26 26 - import { LoadingAnimation } from "@/components/loading-animation"; 27 27 - import { toast, toastAction } from "@/lib/toast"; 28 28 - import { api } from "@/trpc/client"; 29 29 - 30 30 - interface DataTableRowActionsProps<TData> { 31 31 - row: Row<TData>; 32 32 - } 33 33 - 34 34 - export function DataTableRowActions<TData>({ 35 35 - row, 36 36 - }: DataTableRowActionsProps<TData>) { 37 37 - const user = selectUserSchema.parse(row.original); 38 38 - const router = useRouter(); 39 39 - const [alertOpen, setAlertOpen] = React.useState(false); 40 40 - const [isPending, startTransition] = React.useTransition(); 41 41 - 42 42 - async function onDelete() { 43 43 - startTransition(async () => { 44 44 - try { 45 45 - if (!user.id) return; 46 46 - await api.workspace.removeWorkspaceUser.mutate({ id: user.id }); 47 47 - toastAction("removed"); 48 48 - router.refresh(); 49 49 - setAlertOpen(false); 50 50 - } catch (error) { 51 51 - if (error instanceof Error) { 52 52 - toast.error(error.message); 53 53 - } else { 54 54 - toastAction("error"); 55 55 - } 56 56 - setAlertOpen(false); 57 57 - } 58 58 - }); 59 59 - } 60 60 - 61 61 - return ( 62 62 - <AlertDialog open={alertOpen} onOpenChange={(value) => setAlertOpen(value)}> 63 63 - <DropdownMenu> 64 64 - <DropdownMenuTrigger asChild> 65 65 - <Button 66 66 - variant="ghost" 67 67 - className="h-8 w-8 p-0 data-[state=open]:bg-accent" 68 68 - > 69 69 - <span className="sr-only">Open menu</span> 70 70 - <MoreHorizontal className="h-4 w-4" /> 71 71 - </Button> 72 72 - </DropdownMenuTrigger> 73 73 - <DropdownMenuContent align="end"> 74 74 - <AlertDialogTrigger asChild> 75 75 - <DropdownMenuItem className="text-destructive focus:bg-destructive focus:text-background"> 76 76 - Remove 77 77 - </DropdownMenuItem> 78 78 - </AlertDialogTrigger> 79 79 - </DropdownMenuContent> 80 80 - </DropdownMenu> 81 81 - <AlertDialogContent> 82 82 - <AlertDialogHeader> 83 83 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 84 84 - <AlertDialogDescription> 85 85 - This action cannot be undone. This will remove the user from your 86 86 - team. 87 87 - </AlertDialogDescription> 88 88 - </AlertDialogHeader> 89 89 - <AlertDialogFooter> 90 90 - <AlertDialogCancel>Cancel</AlertDialogCancel> 91 91 - <AlertDialogAction 92 92 - onClick={(e) => { 93 93 - e.preventDefault(); 94 94 - onDelete(); 95 95 - }} 96 96 - disabled={isPending} 97 97 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 98 98 - > 99 99 - {!isPending ? "Remove" : <LoadingAnimation />} 100 100 - </AlertDialogAction> 101 101 - </AlertDialogFooter> 102 102 - </AlertDialogContent> 103 103 - </AlertDialog> 104 104 - ); 105 105 - }

-80

apps/web/src/components/data-table/user/data-table.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { ColumnDef } from "@tanstack/react-table"; 4 4 - import { 5 5 - flexRender, 6 6 - getCoreRowModel, 7 7 - useReactTable, 8 8 - } from "@tanstack/react-table"; 9 9 - 10 10 - import { 11 11 - Table, 12 12 - TableBody, 13 13 - TableCell, 14 14 - TableHead, 15 15 - TableHeader, 16 16 - TableRow, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - interface DataTableProps<TData, TValue> { 20 20 - columns: ColumnDef<TData, TValue>[]; 21 21 - data: TData[]; 22 22 - } 23 23 - 24 24 - export function DataTable<TData, TValue>({ 25 25 - columns, 26 26 - data, 27 27 - }: DataTableProps<TData, TValue>) { 28 28 - const table = useReactTable({ 29 29 - data, 30 30 - columns, 31 31 - getCoreRowModel: getCoreRowModel(), 32 32 - }); 33 33 - 34 34 - return ( 35 35 - <div className="rounded-md border"> 36 36 - <Table> 37 37 - <TableHeader className="bg-muted/50"> 38 38 - {table.getHeaderGroups().map((headerGroup) => ( 39 39 - <TableRow key={headerGroup.id} className="hover:bg-transparent"> 40 40 - {headerGroup.headers.map((header) => { 41 41 - return ( 42 42 - <TableHead key={header.id}> 43 43 - {header.isPlaceholder 44 44 - ? null 45 45 - : flexRender( 46 46 - header.column.columnDef.header, 47 47 - header.getContext(), 48 48 - )} 49 49 - </TableHead> 50 50 - ); 51 51 - })} 52 52 - </TableRow> 53 53 - ))} 54 54 - </TableHeader> 55 55 - <TableBody> 56 56 - {table.getRowModel().rows?.length ? ( 57 57 - table.getRowModel().rows.map((row) => ( 58 58 - <TableRow 59 59 - key={row.id} 60 60 - data-state={row.getIsSelected() && "selected"} 61 61 - > 62 62 - {row.getVisibleCells().map((cell) => ( 63 63 - <TableCell key={cell.id}> 64 64 - {flexRender(cell.column.columnDef.cell, cell.getContext())} 65 65 - </TableCell> 66 66 - ))} 67 67 - </TableRow> 68 68 - )) 69 69 - ) : ( 70 70 - <TableRow> 71 71 - <TableCell colSpan={columns.length} className="h-24 text-center"> 72 72 - No results. 73 73 - </TableCell> 74 74 - </TableRow> 75 75 - )} 76 76 - </TableBody> 77 77 - </Table> 78 78 - </div> 79 79 - ); 80 80 - }

-119

apps/web/src/components/forms/maintenance/form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { usePathname, useRouter } from "next/navigation"; 5 5 - import { useTransition } from "react"; 6 6 - import { useForm } from "react-hook-form"; 7 7 - 8 8 - import { insertMaintenanceSchema } from "@openstatus/db/src/schema"; 9 9 - import type { InsertMaintenance, Monitor } from "@openstatus/db/src/schema"; 10 10 - import { Form } from "@openstatus/ui"; 11 11 - 12 12 - import { toastAction } from "@/lib/toast"; 13 13 - import { api } from "@/trpc/client"; 14 14 - 15 15 - import { 16 16 - Tabs, 17 17 - TabsContent, 18 18 - TabsList, 19 19 - TabsTrigger, 20 20 - } from "@/components/dashboard/tabs"; 21 21 - 22 22 - import { SaveButton } from "../shared/save-button"; 23 23 - import { General } from "./general"; 24 24 - import { SectionConnect } from "./section-connect"; 25 25 - 26 26 - interface Props { 27 27 - defaultSection?: string; 28 28 - defaultValues?: InsertMaintenance; 29 29 - monitors?: Monitor[]; 30 30 - nextUrl?: string; 31 31 - pageId: number; 32 32 - } 33 33 - 34 34 - export function MaintenanceForm({ 35 35 - defaultSection, 36 36 - defaultValues, 37 37 - monitors, 38 38 - nextUrl, 39 39 - pageId, 40 40 - }: Props) { 41 41 - const form = useForm<InsertMaintenance>({ 42 42 - resolver: zodResolver(insertMaintenanceSchema), 43 43 - defaultValues: { 44 44 - ...defaultValues, 45 45 - title: defaultValues?.title || "", 46 46 - message: defaultValues?.message || "", 47 47 - from: defaultValues?.from ? new Date(defaultValues.from) : new Date(), 48 48 - to: defaultValues?.to 49 49 - ? new Date(defaultValues.to) 50 50 - : new Date(Date.now() + 1000 * 60 * 60), 51 51 - pageId, 52 52 - }, 53 53 - }); 54 54 - const router = useRouter(); 55 55 - const pathname = usePathname(); 56 56 - const [isPending, startTransition] = useTransition(); 57 57 - 58 58 - const onSubmit = async ({ ...props }: InsertMaintenance) => { 59 59 - startTransition(async () => { 60 60 - try { 61 61 - if (defaultValues) { 62 62 - await api.maintenance.updateLegacy.mutate(props); 63 63 - } else { 64 64 - await api.maintenance.create.mutate(props); 65 65 - } 66 66 - toastAction("saved"); 67 67 - // otherwise, the form will stay dirty - keepValues is used to keep the current values in the form 68 68 - form.reset({}, { keepValues: true }); 69 69 - if (nextUrl) { 70 70 - router.push(nextUrl); 71 71 - } 72 72 - router.refresh(); 73 73 - } catch { 74 74 - toastAction("error"); 75 75 - } 76 76 - }); 77 77 - }; 78 78 - 79 79 - function onValueChange(value: string) { 80 80 - // REMINDER: we are not merging the searchParams here 81 81 - // we are just setting the section to allow refreshing the page 82 82 - const params = new URLSearchParams(); 83 83 - params.set("section", value); 84 84 - router.push(`${pathname}?${params.toString()}`); 85 85 - } 86 86 - 87 87 - console.log(form.formState.errors); 88 88 - 89 89 - return ( 90 90 - <Form {...form}> 91 91 - <form 92 92 - onSubmit={async (e) => { 93 93 - e.preventDefault(); 94 94 - form.handleSubmit(onSubmit)(e); 95 95 - }} 96 96 - className="grid w-full gap-6" 97 97 - > 98 98 - <General form={form} /> 99 99 - <Tabs 100 100 - defaultValue={defaultSection} 101 101 - className="w-full" 102 102 - onValueChange={onValueChange} 103 103 - > 104 104 - <TabsList> 105 105 - <TabsTrigger value="connect">Connect</TabsTrigger> 106 106 - </TabsList> 107 107 - <TabsContent value="connect"> 108 108 - <SectionConnect form={form} monitors={monitors} /> 109 109 - </TabsContent> 110 110 - </Tabs> 111 111 - <SaveButton 112 112 - isPending={isPending} 113 113 - isDirty={form.formState.isDirty} 114 114 - onSubmit={form.handleSubmit(onSubmit)} 115 115 - /> 116 116 - </form> 117 117 - </Form> 118 118 - ); 119 119 - }

-113

apps/web/src/components/forms/maintenance/general.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import type { UseFormReturn } from "react-hook-form"; 3 3 - 4 4 - import type { InsertMaintenance } from "@openstatus/db/src/schema"; 5 5 - import { 6 6 - DateTimePickerPopover, 7 7 - FormControl, 8 8 - FormDescription, 9 9 - FormField, 10 10 - FormItem, 11 11 - FormLabel, 12 12 - FormMessage, 13 13 - Input, 14 14 - Textarea, 15 15 - } from "@openstatus/ui"; 16 16 - 17 17 - import { format } from "date-fns"; 18 18 - import { SectionHeader } from "../shared/section-header"; 19 19 - 20 20 - interface Props { 21 21 - form: UseFormReturn<InsertMaintenance>; 22 22 - } 23 23 - 24 24 - export function General({ form }: Props) { 25 25 - return ( 26 26 - <div className="grid gap-4 sm:grid-cols-3 sm:gap-6"> 27 27 - <SectionHeader 28 28 - title="Maintenance Information" 29 29 - description="Give your users a heads up when you're doing maintenance." 30 30 - /> 31 31 - <div className="flex w-full flex-col gap-4 sm:col-span-2"> 32 32 - <FormField 33 33 - control={form.control} 34 34 - name="title" 35 35 - render={({ field }) => ( 36 36 - <FormItem className="w-full"> 37 37 - <FormLabel>Title</FormLabel> 38 38 - <FormControl> 39 39 - <Input placeholder="Database migration" {...field} /> 40 40 - </FormControl> 41 41 - <FormDescription>Displayed on the status page.</FormDescription> 42 42 - <FormMessage /> 43 43 - </FormItem> 44 44 - )} 45 45 - /> 46 46 - <FormField 47 47 - control={form.control} 48 48 - name="message" 49 49 - render={({ field }) => ( 50 50 - <FormItem className="col-span-full"> 51 51 - <FormLabel>Message</FormLabel> 52 52 - <FormControl> 53 53 - <Textarea 54 54 - placeholder="We're doing some maintenance. We'll be back soon!" 55 55 - {...field} 56 56 - /> 57 57 - </FormControl> 58 58 - <FormDescription>Give your users some context.</FormDescription> 59 59 - <FormMessage /> 60 60 - </FormItem> 61 61 - )} 62 62 - /> 63 63 - <div className="grid grid-cols-2 gap-4"> 64 64 - <FormField 65 65 - control={form.control} 66 66 - name="from" 67 67 - render={({ field }) => ( 68 68 - <FormItem className="flex w-full flex-col"> 69 69 - <FormLabel>From</FormLabel> 70 70 - <DateTimePickerPopover 71 71 - date={field.value ? new Date(field.value) : new Date()} 72 72 - setDate={(date) => { 73 73 - field.onChange(date); 74 74 - }} 75 75 - className="w-full" 76 76 - /> 77 77 - <FormMessage /> 78 78 - </FormItem> 79 79 - )} 80 80 - /> 81 81 - <FormField 82 82 - control={form.control} 83 83 - name="to" 84 84 - render={({ field }) => ( 85 85 - <FormItem className="flex w-full flex-col"> 86 86 - <FormLabel>To</FormLabel> 87 87 - <DateTimePickerPopover 88 88 - date={ 89 89 - field.value 90 90 - ? new Date(field.value) 91 91 - : new Date(Date.now() + 1000 * 60 * 60) 92 92 - } 93 93 - setDate={(date) => { 94 94 - field.onChange(date); 95 95 - }} 96 96 - className="w-full" 97 97 - /> 98 98 - <FormMessage /> 99 99 - </FormItem> 100 100 - )} 101 101 - /> 102 102 - <FormDescription className="sm:-mt-2 col-span-full"> 103 103 - The period{" "} 104 104 - <span className="font-medium"> 105 105 - in local time {format(new Date(), "z")} 106 106 - </span>{" "} 107 107 - when the maintenance takes place. 108 108 - </FormDescription> 109 109 - </div> 110 110 - </div> 111 111 - </div> 112 112 - ); 113 113 - }

-85

apps/web/src/components/forms/maintenance/section-connect.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import type { UseFormReturn } from "react-hook-form"; 3 3 - 4 4 - import type { InsertMaintenance, Monitor } from "@openstatus/db/src/schema"; 5 5 - import { 6 6 - FormControl, 7 7 - FormDescription, 8 8 - FormField, 9 9 - FormItem, 10 10 - FormLabel, 11 11 - FormMessage, 12 12 - } from "@openstatus/ui"; 13 13 - 14 14 - import { CheckboxLabel } from "../shared/checkbox-label"; 15 15 - 16 16 - interface Props { 17 17 - form: UseFormReturn<InsertMaintenance>; 18 18 - monitors?: Monitor[]; 19 19 - } 20 20 - 21 21 - export function SectionConnect({ form, monitors }: Props) { 22 22 - return ( 23 23 - <div className="grid w-full gap-4"> 24 24 - <div className="flex flex-col gap-3"> 25 25 - <FormField 26 26 - control={form.control} 27 27 - name="monitors" 28 28 - render={() => ( 29 29 - <FormItem> 30 30 - <div className="mb-4"> 31 31 - <FormLabel>Monitors</FormLabel> 32 32 - <FormDescription> 33 33 - Select the monitors that are affected by this maintenance.{" "} 34 34 - <span className="font-medium"> 35 35 - We will not trigger any ping during that period. 36 36 - </span> 37 37 - </FormDescription> 38 38 - </div> 39 39 - <div className="grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-2 md:grid-cols-3"> 40 40 - {monitors?.map((item) => ( 41 41 - <FormField 42 42 - key={item.id} 43 43 - control={form.control} 44 44 - name="monitors" 45 45 - render={({ field }) => { 46 46 - return ( 47 47 - <FormItem key={item.id} className="h-full w-full"> 48 48 - <FormControl className="w-full"> 49 49 - <CheckboxLabel 50 50 - id={String(item.id)} 51 51 - name="monitor" 52 52 - checked={field.value?.includes(item.id)} 53 53 - onCheckedChange={(checked) => { 54 54 - return checked 55 55 - ? field.onChange([ 56 56 - ...(field.value || []), 57 57 - item.id, 58 58 - ]) 59 59 - : field.onChange( 60 60 - field.value?.filter( 61 61 - (value) => value !== item.id, 62 62 - ), 63 63 - ); 64 64 - }} 65 65 - > 66 66 - {item.name} 67 67 - </CheckboxLabel> 68 68 - </FormControl> 69 69 - </FormItem> 70 70 - ); 71 71 - }} 72 72 - /> 73 73 - ))} 74 74 - </div> 75 75 - {!monitors || monitors.length === 0 ? ( 76 76 - <FormDescription>Missing monitors.</FormDescription> 77 77 - ) : null} 78 78 - <FormMessage /> 79 79 - </FormItem> 80 80 - )} 81 81 - /> 82 82 - </div> 83 83 - </div> 84 84 - ); 85 85 - }

-97

apps/web/src/components/forms/monitor-tag/form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { useRouter } from "next/navigation"; 5 5 - import * as React from "react"; 6 6 - import { useForm } from "react-hook-form"; 7 7 - 8 8 - import { insertMonitorTagSchema } from "@openstatus/db/src/schema"; 9 9 - import type { InsertMonitorTag, MonitorTag } from "@openstatus/db/src/schema"; 10 10 - import { 11 11 - Form, 12 12 - FormControl, 13 13 - FormField, 14 14 - FormItem, 15 15 - FormLabel, 16 16 - FormMessage, 17 17 - Input, 18 18 - } from "@openstatus/ui"; 19 19 - 20 20 - import { toastAction } from "@/lib/toast"; 21 21 - import { api } from "@/trpc/client"; 22 22 - import { SaveButton } from "../shared/save-button"; 23 23 - 24 24 - interface Props { 25 25 - defaultValues?: MonitorTag; 26 26 - } 27 27 - 28 28 - export function MonitorTagForm({ defaultValues }: Props) { 29 29 - const form = useForm<InsertMonitorTag>({ 30 30 - resolver: zodResolver(insertMonitorTagSchema), 31 31 - defaultValues, 32 32 - }); 33 33 - const router = useRouter(); 34 34 - const [isPending, startTransition] = React.useTransition(); 35 35 - 36 36 - const onSubmit = ({ ...props }: InsertMonitorTag) => { 37 37 - startTransition(async () => { 38 38 - try { 39 39 - if (defaultValues) { 40 40 - await api.monitorTag.update.mutate({ ...props }); 41 41 - } else { 42 42 - await api.monitorTag.create.mutate({ ...props }); 43 43 - } 44 44 - router.refresh(); 45 45 - toastAction("saved"); 46 46 - } catch { 47 47 - toastAction("error"); 48 48 - } 49 49 - }); 50 50 - }; 51 51 - 52 52 - return ( 53 53 - <Form {...form}> 54 54 - <form 55 55 - onSubmit={async (e) => { 56 56 - e.preventDefault(); 57 57 - form.handleSubmit(onSubmit)(e); 58 58 - }} 59 59 - className="grid w-full gap-6" 60 60 - > 61 61 - <div className="flex gap-6"> 62 62 - <FormField 63 63 - control={form.control} 64 64 - name="name" 65 65 - render={({ field }) => ( 66 66 - <FormItem> 67 67 - <FormLabel>Name</FormLabel> 68 68 - <FormControl> 69 69 - <Input placeholder="API" {...field} /> 70 70 - </FormControl> 71 71 - <FormMessage /> 72 72 - </FormItem> 73 73 - )} 74 74 - /> 75 75 - <FormField 76 76 - control={form.control} 77 77 - name="color" 78 78 - render={({ field }) => ( 79 79 - <FormItem className="w-12"> 80 80 - <FormLabel>Color</FormLabel> 81 81 - <FormControl> 82 82 - <Input type="color" {...field} /> 83 83 - </FormControl> 84 84 - <FormMessage /> 85 85 - </FormItem> 86 86 - )} 87 87 - /> 88 88 - </div> 89 89 - <SaveButton 90 90 - isPending={isPending} 91 91 - isDirty={form.formState.isDirty} 92 92 - onSubmit={form.handleSubmit(onSubmit)} 93 93 - /> 94 94 - </form> 95 95 - </Form> 96 96 - ); 97 97 - }

-370

apps/web/src/components/forms/monitor/form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { getLimit } from "@openstatus/db/src/schema/plan/utils"; 5 5 - import { usePathname, useRouter } from "next/navigation"; 6 6 - import * as React from "react"; 7 7 - import { useForm } from "react-hook-form"; 8 8 - 9 9 - import * as assertions from "@openstatus/assertions"; 10 10 - import type { 11 11 - InsertMonitor, 12 12 - MonitorTag, 13 13 - Notification, 14 14 - Page, 15 15 - WorkspacePlan, 16 16 - } from "@openstatus/db/src/schema"; 17 17 - import { insertMonitorSchema } from "@openstatus/db/src/schema"; 18 18 - import { Badge, Form } from "@openstatus/ui"; 19 19 - 20 20 - import { 21 21 - Tabs, 22 22 - TabsContent, 23 23 - TabsList, 24 24 - TabsTrigger, 25 25 - } from "@/components/dashboard/tabs"; 26 26 - import { FailedPingAlertConfirmation } from "@/components/modals/failed-ping-alert-confirmation"; 27 27 - import type { RegionChecker } from "@/components/ping-response-analysis/utils"; 28 28 - import { toast, toastAction } from "@/lib/toast"; 29 29 - import { formatDuration } from "@/lib/utils"; 30 30 - import { api } from "@/trpc/client"; 31 31 - import type { Region } from "@openstatus/db/src/schema/constants"; 32 32 - import type { Limits } from "@openstatus/db/src/schema/plan/schema"; 33 33 - import { SaveButton } from "../shared/save-button"; 34 34 - import { General } from "./general"; 35 35 - import { RequestTestButton } from "./request-test-button"; 36 36 - import { SectionAssertions } from "./section-assertions"; 37 37 - import { SectionDanger } from "./section-danger"; 38 38 - import { SectionNotifications } from "./section-notifications"; 39 39 - import { SectionOtel } from "./section-otel"; 40 40 - import { SectionRequests } from "./section-requests"; 41 41 - import { SectionScheduling } from "./section-scheduling"; 42 42 - import { SectionStatusPage } from "./section-status-page"; 43 43 - 44 44 - interface Props { 45 45 - defaultSection?: string; 46 46 - limits: Limits; 47 47 - plan: WorkspacePlan; 48 48 - defaultValues?: InsertMonitor; 49 49 - notifications?: Notification[]; 50 50 - tags?: MonitorTag[]; 51 51 - pages?: Page[]; 52 52 - nextUrl?: string; 53 53 - withTestButton?: boolean; 54 54 - } 55 55 - 56 56 - const ABORT_TIMEOUT = 7_000; // in ms 57 57 - 58 58 - export function MonitorForm({ 59 59 - defaultSection, 60 60 - defaultValues, 61 61 - notifications, 62 62 - pages, 63 63 - tags, 64 64 - nextUrl, 65 65 - limits, 66 66 - plan, 67 67 - withTestButton = true, 68 68 - }: Props) { 69 69 - const _assertions = defaultValues?.assertions 70 70 - ? assertions.deserialize(defaultValues?.assertions).map((a) => a.schema) 71 71 - : []; 72 72 - 73 73 - const form = useForm<InsertMonitor>({ 74 74 - resolver: zodResolver(insertMonitorSchema), 75 75 - defaultValues: { 76 76 - url: defaultValues?.url || "", 77 77 - name: defaultValues?.name || "", 78 78 - description: defaultValues?.description || "", 79 79 - periodicity: defaultValues?.periodicity || "30m", 80 80 - active: defaultValues?.active ?? true, 81 81 - id: defaultValues?.id || 0, 82 82 - regions: defaultValues?.regions || getLimit(limits, "regions"), 83 83 - headers: defaultValues?.headers?.length 84 84 - ? defaultValues?.headers 85 85 - : [{ key: "", value: "" }], 86 86 - body: defaultValues?.body ?? "", 87 87 - method: defaultValues?.method ?? "GET", 88 88 - notifications: defaultValues?.notifications ?? [], 89 89 - pages: defaultValues?.pages ?? [], 90 90 - tags: defaultValues?.tags ?? [], 91 91 - public: defaultValues?.public ?? false, 92 92 - // biome-ignore lint/suspicious/noExplicitAny: <explanation> 93 93 - statusAssertions: _assertions.filter((a) => a.type === "status") as any, // TS considers a.type === "header" 94 94 - // biome-ignore lint/suspicious/noExplicitAny: <explanation> 95 95 - headerAssertions: _assertions.filter((a) => a.type === "header") as any, // TS considers a.type === "status" 96 96 - textBodyAssertions: _assertions.filter( 97 97 - (a) => a.type === "textBody", 98 98 - // biome-ignore lint/suspicious/noExplicitAny: <explanation> 99 99 - ) as any, // TS considers a.type === "textBody" 100 100 - degradedAfter: defaultValues?.degradedAfter, 101 101 - timeout: defaultValues?.timeout || 45000, 102 102 - jobType: defaultValues?.jobType || "http", 103 103 - otelEndpoint: defaultValues?.otelEndpoint ?? "", 104 104 - otelHeaders: defaultValues?.otelHeaders ?? [], 105 105 - }, 106 106 - }); 107 107 - const router = useRouter(); 108 108 - const pathname = usePathname(); 109 109 - const [isPending, setPending] = React.useState(false); 110 110 - const [pingFailed, setPingFailed] = React.useState(false); 111 111 - const type = React.useMemo( 112 112 - () => (defaultValues ? "update" : "create"), 113 113 - [defaultValues], 114 114 - ); 115 115 - 116 116 - const handleDataUpdateOrInsertion = async (props: InsertMonitor) => { 117 117 - if (defaultValues) { 118 118 - await api.monitor.update.mutate(props); 119 119 - } else { 120 120 - await api.monitor.create.mutate(props); 121 121 - } 122 122 - if (nextUrl) { 123 123 - router.push(nextUrl); 124 124 - } 125 125 - // to reset the `isDirty` state of them form while keeping the values for optimistic UI 126 126 - form.reset(undefined, { keepValues: true }); 127 127 - router.refresh(); 128 128 - }; 129 129 - 130 130 - const handleForceDataUpdateOrInsertion = async (props: InsertMonitor) => { 131 131 - try { 132 132 - handleDataUpdateOrInsertion(props); 133 133 - toastAction("saved"); 134 134 - } catch (_error) { 135 135 - toastAction("error"); 136 136 - } 137 137 - }; 138 138 - 139 139 - const onSubmit = ({ ...props }: InsertMonitor) => { 140 140 - toast.promise( 141 141 - async () => { 142 142 - setPending(true); 143 143 - const { error } = await pingEndpoint(); 144 144 - if (error) { 145 145 - setPingFailed(true); 146 146 - throw new Error(error); 147 147 - } 148 148 - await handleDataUpdateOrInsertion(props); 149 149 - }, 150 150 - { 151 151 - loading: "Checking the endpoint before saving...", 152 152 - success: () => "Endpoint is working fine. Saved!", 153 153 - error: (error: Error) => { 154 154 - if (error instanceof Error) return error.message; 155 155 - return "Endpoint is not working."; 156 156 - }, 157 157 - finally: () => { 158 158 - setPending(false); 159 159 - }, 160 160 - }, 161 161 - ); 162 162 - }; 163 163 - 164 164 - const validateJSON = (value?: string) => { 165 165 - if (!value) return; 166 166 - try { 167 167 - const obj = JSON.parse(value) as Record<string, unknown>; 168 168 - form.clearErrors("body"); 169 169 - return obj; 170 170 - } catch (_e) { 171 171 - form.setError("body", { 172 172 - message: "Not a valid JSON object", 173 173 - }); 174 174 - return false; 175 175 - } 176 176 - }; 177 177 - 178 178 - const pingEndpoint = async (region?: Region) => { 179 179 - try { 180 180 - const { 181 181 - url, 182 182 - body, 183 183 - method, 184 184 - headers, 185 185 - statusAssertions, 186 186 - headerAssertions, 187 187 - textBodyAssertions, 188 188 - jobType, 189 189 - } = form.getValues(); 190 190 - 191 191 - if ( 192 192 - body && 193 193 - body !== "" && 194 194 - headers?.some( 195 195 - (h) => h.key === "Content-Type" && h.value === "application/json", 196 196 - ) 197 197 - ) { 198 198 - const validJSON = validateJSON(body); 199 199 - if (!validJSON) { 200 200 - return { error: "Not a valid JSON object.", data: undefined }; 201 201 - } 202 202 - } 203 203 - 204 204 - const res = await fetch(`/api/checker/test/${jobType}`, { 205 205 - method: "POST", 206 206 - headers: new Headers({ 207 207 - "Content-Type": "application/json", 208 208 - }), 209 209 - body: JSON.stringify({ url, body, method, headers, region }), 210 210 - signal: AbortSignal.timeout(ABORT_TIMEOUT), 211 211 - }); 212 212 - 213 213 - if (!res.ok) { 214 214 - return { 215 215 - error: "Something went wrong. Please try again.", 216 216 - }; 217 217 - } 218 218 - 219 219 - const as = assertions.deserialize( 220 220 - JSON.stringify([ 221 221 - ...(statusAssertions || []), 222 222 - ...(headerAssertions || []), 223 223 - ...(textBodyAssertions || []), 224 224 - ]), 225 225 - ); 226 226 - 227 227 - const data = (await res.json()) as RegionChecker; 228 228 - 229 229 - const _headers: Record<string, string> = {}; 230 230 - // biome-ignore lint/suspicious/noAssignInExpressions: <explanation> 231 231 - res.headers.forEach((value, key) => (_headers[key] = value)); 232 232 - if (data.state === "success") { 233 233 - if (as.length > 0) { 234 234 - for (const a of as) { 235 235 - const { success, message } = a.assert({ 236 236 - body: data.body ?? "", 237 237 - header: data.headers ?? {}, 238 238 - status: data.status, 239 239 - }); 240 240 - if (!success) { 241 241 - return { data, error: `Assertion error: ${message}` }; 242 242 - } 243 243 - } 244 244 - } else { 245 245 - // default assertion if no assertions are provided 246 246 - if (res.status < 200 || res.status >= 300) { 247 247 - return { 248 248 - data, 249 249 - error: `Assertion error: The response status was not 2XX: ${data.status}.`, 250 250 - }; 251 251 - } 252 252 - } 253 253 - } else { 254 254 - return { data, error: `Request error: ${data}` }; 255 255 - } 256 256 - 257 257 - return { data, error: undefined }; 258 258 - } catch (error) { 259 259 - console.error(error); 260 260 - if (error instanceof Error && error.name === "AbortError") { 261 261 - return { 262 262 - error: `Abort error: request takes more then ${formatDuration( 263 263 - ABORT_TIMEOUT, 264 264 - )}.`, 265 265 - }; 266 266 - } 267 267 - return { 268 268 - error: "Something went wrong. Please try again.", 269 269 - }; 270 270 - } 271 271 - }; 272 272 - 273 273 - function onValueChange(value: string) { 274 274 - // REMINDER: we are not merging the searchParams here 275 275 - // we are just setting the section to allow refreshing the page 276 276 - const params = new URLSearchParams(); 277 277 - params.set("section", value); 278 278 - router.push(`${pathname}?${params.toString()}`); 279 279 - } 280 280 - 281 281 - return ( 282 282 - <> 283 283 - <Form {...form}> 284 284 - <form 285 285 - onSubmit={form.handleSubmit(onSubmit)} 286 286 - onKeyDown={(e) => e.key === "Enter" && e.preventDefault()} 287 287 - className="flex w-full flex-col gap-6" 288 288 - > 289 289 - <General {...{ form, tags }} /> 290 290 - <Tabs 291 291 - defaultValue={defaultSection} 292 292 - className="w-full" 293 293 - onValueChange={onValueChange} 294 294 - > 295 295 - <TabsList> 296 296 - <TabsTrigger value="request">Request</TabsTrigger> 297 297 - <TabsTrigger value="scheduling">Scheduling & Regions</TabsTrigger> 298 298 - <TabsTrigger value="assertions"> 299 299 - Timing & Assertions{" "} 300 300 - {_assertions.length ? ( 301 301 - <Badge variant="secondary" className="ml-1"> 302 302 - {_assertions.length} 303 303 - </Badge> 304 304 - ) : null} 305 305 - </TabsTrigger> 306 306 - <TabsTrigger value="notifications"> 307 307 - Notifications{" "} 308 308 - {defaultValues?.notifications?.length ? ( 309 309 - <Badge variant="secondary" className="ml-1"> 310 310 - {defaultValues.notifications.length} 311 311 - </Badge> 312 312 - ) : null} 313 313 - </TabsTrigger> 314 314 - <TabsTrigger value="status-page"> 315 315 - Status Page{" "} 316 316 - {defaultValues?.pages?.length ? ( 317 317 - <Badge variant="secondary" className="ml-1"> 318 318 - {defaultValues.pages.length} 319 319 - </Badge> 320 320 - ) : null} 321 321 - </TabsTrigger> 322 322 - <TabsTrigger value="otel">OTel</TabsTrigger> 323 323 - {defaultValues?.id ? ( 324 324 - <TabsTrigger value="danger">Danger</TabsTrigger> 325 325 - ) : null} 326 326 - </TabsList> 327 327 - <TabsContent value="request"> 328 328 - <SectionRequests {...{ form, pingEndpoint, type }} /> 329 329 - </TabsContent> 330 330 - <TabsContent value="assertions"> 331 331 - <SectionAssertions {...{ form }} /> 332 332 - </TabsContent> 333 333 - <TabsContent value="scheduling"> 334 334 - <SectionScheduling {...{ form, limits, plan }} /> 335 335 - </TabsContent> 336 336 - <TabsContent value="otel"> 337 337 - <SectionOtel {...{ form, limits }} /> 338 338 - </TabsContent> 339 339 - <TabsContent value="notifications"> 340 340 - <SectionNotifications {...{ form, notifications }} /> 341 341 - </TabsContent> 342 342 - <TabsContent value="status-page"> 343 343 - <SectionStatusPage {...{ form, pages }} /> 344 344 - </TabsContent> 345 345 - {defaultValues?.id ? ( 346 346 - <TabsContent value="danger"> 347 347 - <SectionDanger monitorId={defaultValues.id} {...{ form }} /> 348 348 - </TabsContent> 349 349 - ) : null} 350 350 - </Tabs> 351 351 - <div className="grid gap-4 sm:flex sm:items-start sm:justify-end"> 352 352 - {withTestButton ? ( 353 353 - <RequestTestButton {...{ form, limits, pingEndpoint }} /> 354 354 - ) : null} 355 355 - <SaveButton 356 356 - isPending={isPending} 357 357 - isDirty={form.formState.isDirty} 358 358 - onSubmit={form.handleSubmit(onSubmit)} 359 359 - /> 360 360 - </div> 361 361 - </form> 362 362 - </Form> 363 363 - <FailedPingAlertConfirmation 364 364 - monitor={form.getValues()} 365 365 - {...{ pingFailed, setPingFailed }} 366 366 - onConfirm={handleForceDataUpdateOrInsertion} 367 367 - /> 368 368 - </> 369 369 - ); 370 370 - }

-90

apps/web/src/components/forms/monitor/general.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import type { UseFormReturn } from "react-hook-form"; 3 3 - 4 4 - import type { InsertMonitor, MonitorTag } from "@openstatus/db/src/schema"; 5 5 - import { 6 6 - FormControl, 7 7 - FormDescription, 8 8 - FormField, 9 9 - FormItem, 10 10 - FormLabel, 11 11 - FormMessage, 12 12 - Input, 13 13 - Switch, 14 14 - } from "@openstatus/ui"; 15 15 - 16 16 - import { SectionHeader } from "../shared/section-header"; 17 17 - import { TagsMultiBox } from "./tags-multi-box"; 18 18 - 19 19 - interface Props { 20 20 - form: UseFormReturn<InsertMonitor>; 21 21 - tags?: MonitorTag[]; 22 22 - } 23 23 - 24 24 - export function General({ form, tags }: Props) { 25 25 - return ( 26 26 - <div className="grid gap-4 sm:grid-cols-3 sm:gap-6"> 27 27 - <SectionHeader 28 28 - title="Basic Information" 29 29 - description="Be able to find your monitor easily." 30 30 - /> 31 31 - <div className="flex w-full flex-col gap-4 sm:col-span-2"> 32 32 - <div className="flex w-full gap-4"> 33 33 - <FormField 34 34 - control={form.control} 35 35 - name="name" 36 36 - render={({ field }) => ( 37 37 - <FormItem className="w-full"> 38 38 - <FormLabel>Name</FormLabel> 39 39 - <FormControl> 40 40 - <Input placeholder="Documenso" {...field} /> 41 41 - </FormControl> 42 42 - <FormDescription>Displayed on the status page.</FormDescription> 43 43 - <FormMessage /> 44 44 - </FormItem> 45 45 - )} 46 46 - /> 47 47 - <FormField 48 48 - control={form.control} 49 49 - name="active" 50 50 - render={({ field }) => ( 51 51 - <FormItem className="flex flex-row items-center justify-between space-x-1 space-y-0"> 52 52 - <FormLabel>Active</FormLabel> 53 53 - <FormControl> 54 54 - <Switch 55 55 - checked={field.value || false} 56 56 - onCheckedChange={(value) => field.onChange(value)} 57 57 - /> 58 58 - </FormControl> 59 59 - <FormMessage /> 60 60 - </FormItem> 61 61 - )} 62 62 - /> 63 63 - </div> 64 64 - <div className="grid gap-4 sm:grid-cols-3"> 65 65 - <FormField 66 66 - control={form.control} 67 67 - name="tags" 68 68 - render={({ field }) => ( 69 69 - <FormItem className="sm:col-span-2"> 70 70 - <FormLabel>Tags</FormLabel> 71 71 - <FormControl> 72 72 - <TagsMultiBox 73 73 - tags={tags} 74 74 - onChange={field.onChange} 75 75 - values={field.value} 76 76 - // {...field} 77 77 - /> 78 78 - </FormControl> 79 79 - <FormDescription> 80 80 - Categorize your monitors. Create new tags by typing a name. 81 81 - </FormDescription> 82 82 - <FormMessage /> 83 83 - </FormItem> 84 84 - )} 85 85 - /> 86 86 - </div> 87 87 - </div> 88 88 - </div> 89 89 - ); 90 90 - }

-159

apps/web/src/components/forms/monitor/request-test-button.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { Send } from "lucide-react"; 4 4 - import React from "react"; 5 5 - import type { UseFormReturn } from "react-hook-form"; 6 6 - 7 7 - import { deserialize } from "@openstatus/assertions"; 8 8 - import type { InsertMonitor } from "@openstatus/db/src/schema"; 9 9 - import { 10 10 - type Region, 11 11 - monitorRegions, 12 12 - } from "@openstatus/db/src/schema/constants"; 13 13 - import { regionDict } from "@openstatus/regions"; 14 14 - import { 15 15 - Button, 16 16 - Dialog, 17 17 - DialogContent, 18 18 - DialogHeader, 19 19 - DialogTitle, 20 20 - Select, 21 21 - SelectContent, 22 22 - SelectItem, 23 23 - SelectTrigger, 24 24 - SelectValue, 25 25 - Tooltip, 26 26 - TooltipContent, 27 27 - TooltipProvider, 28 28 - TooltipTrigger, 29 29 - } from "@openstatus/ui"; 30 30 - 31 31 - import { LoadingAnimation } from "@/components/loading-animation"; 32 32 - import { RegionInfo } from "@/components/ping-response-analysis/region-info"; 33 33 - import { ResponseDetailTabs } from "@/components/ping-response-analysis/response-detail-tabs"; 34 34 - import type { RegionChecker } from "@/components/ping-response-analysis/utils"; 35 35 - import { toast, toastAction } from "@/lib/toast"; 36 36 - import type { Limits } from "@openstatus/db/src/schema/plan/schema"; 37 37 - import { getLimit } from "@openstatus/db/src/schema/plan/utils"; 38 38 - 39 39 - interface Props { 40 40 - form: UseFormReturn<InsertMonitor>; 41 41 - limits: Limits; 42 42 - pingEndpoint( 43 43 - region?: Region, 44 44 - ): Promise<{ data?: RegionChecker; error?: string }>; 45 45 - } 46 46 - 47 47 - export function RequestTestButton({ form, pingEndpoint, limits }: Props) { 48 48 - const [check, setCheck] = React.useState< 49 49 - { data: RegionChecker; error?: string } | undefined 50 50 - >(); 51 51 - const [value, setValue] = React.useState<Region>(monitorRegions[0]); 52 52 - const [isPending, startTransition] = React.useTransition(); 53 53 - 54 54 - const onClick = () => { 55 55 - if (isPending) return; 56 56 - 57 57 - const { url } = form.getValues(); 58 58 - 59 59 - if (!url) { 60 60 - toastAction("test-warning-empty-url"); 61 61 - return; 62 62 - } 63 63 - 64 64 - startTransition(async () => { 65 65 - try { 66 66 - const { data, error } = await pingEndpoint(value); 67 67 - if (data) setCheck({ data, error }); 68 68 - const isOk = !error; 69 69 - if (isOk) { 70 70 - toastAction("test-success"); 71 71 - } else { 72 72 - toast.error(error); 73 73 - } 74 74 - } catch { 75 75 - toastAction("error"); 76 76 - } 77 77 - }); 78 78 - }; 79 79 - 80 80 - const { flag } = regionDict[value as keyof typeof regionDict]; 81 81 - 82 82 - const { statusAssertions, headerAssertions } = form.getValues(); 83 83 - 84 84 - const regions = getLimit(limits, "regions"); 85 85 - 86 86 - return ( 87 87 - <Dialog open={!!check} onOpenChange={() => setCheck(undefined)}> 88 88 - <div className="group flex h-10 items-center rounded-md bg-transparent text-sm ring-offset-background focus-within:outline-hidden focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"> 89 89 - <Select 90 90 - value={value} 91 91 - onValueChange={(value: Region) => setValue(value)} 92 92 - > 93 93 - <SelectTrigger 94 94 - className="flex-1 rounded-r-none border-accent focus:ring-0" 95 95 - aria-label={value} 96 96 - > 97 97 - <SelectValue>{flag}</SelectValue> 98 98 - </SelectTrigger> 99 99 - <SelectContent> 100 100 - {regions.map((region) => { 101 101 - const { flag } = regionDict[region]; 102 102 - return ( 103 103 - <SelectItem key={region} value={region}> 104 104 - {flag} <span className="ml-1 font-mono">{region}</span> 105 105 - </SelectItem> 106 106 - ); 107 107 - })} 108 108 - </SelectContent> 109 109 - </Select> 110 110 - <TooltipProvider> 111 111 - <Tooltip> 112 112 - <TooltipTrigger asChild> 113 113 - <Button 114 114 - onClick={onClick} 115 115 - disabled={isPending} 116 116 - className="h-full flex-1 rounded-l-none focus:ring-0" 117 117 - variant="secondary" 118 118 - > 119 119 - {isPending ? ( 120 120 - <LoadingAnimation variant="inverse" /> 121 121 - ) : ( 122 122 - <> 123 123 - Test <Send className="ml-2 h-4 w-4" /> 124 124 - </> 125 125 - )} 126 126 - </Button> 127 127 - </TooltipTrigger> 128 128 - <TooltipContent> 129 129 - <p>Ping your endpoint</p> 130 130 - </TooltipContent> 131 131 - </Tooltip> 132 132 - </TooltipProvider> 133 133 - </div> 134 134 - <DialogContent className="max-h-screen w-full overflow-auto sm:max-w-3xl sm:p-8"> 135 135 - <DialogHeader> 136 136 - <DialogTitle>Response</DialogTitle> 137 137 - </DialogHeader> 138 138 - {check?.data.state === "success" ? ( 139 139 - <div className="grid gap-8"> 140 140 - <RegionInfo check={check.data} error={check.error} /> 141 141 - {check.data.state === "success" && check.data.type === "http" ? ( 142 142 - <ResponseDetailTabs 143 143 - timing={check.data.timing} 144 144 - headers={check.data.headers} 145 145 - status={check.data.status} 146 146 - assertions={deserialize( 147 147 - JSON.stringify([ 148 148 - ...(statusAssertions || []), 149 149 - ...(headerAssertions || []), 150 150 - ]), 151 151 - )} 152 152 - /> 153 153 - ) : null} 154 154 - </div> 155 155 - ) : null} 156 156 - </DialogContent> 157 157 - </Dialog> 158 158 - ); 159 159 - }

-126

apps/web/src/components/forms/monitor/section-danger.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { useRouter } from "next/navigation"; 4 4 - import type { UseFormReturn } from "react-hook-form"; 5 5 - 6 6 - import type { InsertMonitor } from "@openstatus/db/src/schema"; 7 7 - import { 8 8 - AlertDialog, 9 9 - AlertDialogAction, 10 10 - AlertDialogCancel, 11 11 - AlertDialogContent, 12 12 - AlertDialogDescription, 13 13 - AlertDialogFooter, 14 14 - AlertDialogHeader, 15 15 - AlertDialogTitle, 16 16 - AlertDialogTrigger, 17 17 - Button, 18 18 - Checkbox, 19 19 - FormControl, 20 20 - FormDescription, 21 21 - FormField, 22 22 - FormItem, 23 23 - FormLabel, 24 24 - } from "@openstatus/ui"; 25 25 - 26 26 - import { LoadingAnimation } from "@/components/loading-animation"; 27 27 - import { toastAction } from "@/lib/toast"; 28 28 - import { api } from "@/trpc/client"; 29 29 - import React from "react"; 30 30 - import { SectionHeader } from "../shared/section-header"; 31 31 - 32 32 - interface Props { 33 33 - monitorId: number; 34 34 - form: UseFormReturn<InsertMonitor>; 35 35 - } 36 36 - 37 37 - export function SectionDanger({ monitorId, form }: Props) { 38 38 - const router = useRouter(); 39 39 - const [open, setOpen] = React.useState(false); 40 40 - const [isPending, startTransition] = React.useTransition(); 41 41 - 42 42 - async function onDelete() { 43 43 - startTransition(async () => { 44 44 - try { 45 45 - await api.monitor.delete.mutate({ id: monitorId }); 46 46 - toastAction("deleted"); 47 47 - setOpen(false); 48 48 - router.push("/app"); 49 49 - } catch { 50 50 - toastAction("error"); 51 51 - } 52 52 - }); 53 53 - } 54 54 - 55 55 - return ( 56 56 - <div className="grid w-full gap-4"> 57 57 - <SectionHeader 58 58 - title="Danger Zone" 59 59 - description="Be aware of the changes you are about to make." 60 60 - /> 61 61 - <div className="grid gap-4 sm:grid-cols-3"> 62 62 - <FormField 63 63 - control={form.control} 64 64 - name="public" 65 65 - render={({ field }) => ( 66 66 - <FormItem className="flex flex-row items-start space-x-3 space-y-0 sm:col-span-2"> 67 67 - <FormControl> 68 68 - <Checkbox 69 69 - checked={field.value ?? false} 70 70 - onCheckedChange={field.onChange} 71 71 - /> 72 72 - </FormControl> 73 73 - <div className="space-y-1 leading-none"> 74 74 - <FormLabel>Allow public monitor</FormLabel> 75 75 - <FormDescription> 76 76 - Change monitor visibility. When checked, the monitor stats 77 77 - from the overview page will be public. You will be able to 78 78 - share it via a connected status page or{" "} 79 79 - <code className="underline underline-offset-4"> 80 80 - openstatus.dev/public/monitors/{form.getValues("id")} 81 81 - </code> 82 82 - . 83 83 - </FormDescription> 84 84 - </div> 85 85 - </FormItem> 86 86 - )} 87 87 - /> 88 88 - <div className="col-start-1 flex flex-col items-center gap-4 sm:col-span-2 sm:flex-row"> 89 89 - <AlertDialog open={open} onOpenChange={setOpen}> 90 90 - <AlertDialogTrigger asChild> 91 91 - <Button variant="destructive" className="w-full sm:w-auto"> 92 92 - Delete 93 93 - </Button> 94 94 - </AlertDialogTrigger> 95 95 - <AlertDialogContent> 96 96 - <AlertDialogHeader> 97 97 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 98 98 - <AlertDialogDescription> 99 99 - This action cannot be undone. This will permanently delete the 100 100 - monitor. 101 101 - </AlertDialogDescription> 102 102 - </AlertDialogHeader> 103 103 - <AlertDialogFooter> 104 104 - <AlertDialogCancel>Cancel</AlertDialogCancel> 105 105 - <AlertDialogAction 106 106 - onClick={(e) => { 107 107 - e.preventDefault(); 108 108 - onDelete(); 109 109 - }} 110 110 - disabled={isPending} 111 111 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 112 112 - > 113 113 - {!isPending ? "Delete" : <LoadingAnimation />} 114 114 - </AlertDialogAction> 115 115 - </AlertDialogFooter> 116 116 - </AlertDialogContent> 117 117 - </AlertDialog> 118 118 - <FormDescription className="order-1 text-red-500 sm:order-2"> 119 119 - This action cannot be undone. This will permanently delete the 120 120 - monitor. 121 121 - </FormDescription> 122 122 - </div> 123 123 - </div> 124 124 - </div> 125 125 - ); 126 126 - }

-103

apps/web/src/components/forms/monitor/section-limits.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import type { InsertMonitor } from "@openstatus/db/src/schema"; 6 6 - import { 7 7 - FormControl, 8 8 - FormDescription, 9 9 - FormField, 10 10 - FormItem, 11 11 - FormLabel, 12 12 - FormMessage, 13 13 - Select, 14 14 - SelectContent, 15 15 - SelectItem, 16 16 - SelectTrigger, 17 17 - SelectValue, 18 18 - } from "@openstatus/ui"; 19 19 - 20 20 - import { formatDuration } from "@/lib/utils"; 21 21 - import { SectionHeader } from "../shared/section-header"; 22 22 - 23 23 - interface Props { 24 24 - form: UseFormReturn<InsertMonitor>; 25 25 - } 26 26 - 27 27 - // FIXME: replace with enum 28 28 - // TODO: can be also replaced by a custom number input with max value (+ validation) 29 29 - const limits = [100, 250, 500, 1_000, 2_000, 5_000, 10_000, 20_000, 40_000]; 30 30 - 31 31 - export function SectionLimits({ form }: Props) { 32 32 - return ( 33 33 - <div className="grid w-full gap-4"> 34 34 - <SectionHeader 35 35 - title="Response Time Limits" 36 36 - description="Check when your endpoint is taking too long to respond. And set the limit to be considered degraded." 37 37 - /> 38 38 - <FormField 39 39 - control={form.control} 40 40 - name="id" // FIXME: should be something like 'limitDegraded' 41 41 - render={({ field }) => ( 42 42 - <FormItem> 43 43 - <FormLabel>Degraded limit</FormLabel> 44 44 - <Select 45 45 - onValueChange={(value) => field.onChange(Number.parseInt(value))} 46 46 - defaultValue={String(field.value)} 47 47 - > 48 48 - <FormControl> 49 49 - <SelectTrigger className="sm:w-[200px]"> 50 50 - <SelectValue placeholder="Select" /> 51 51 - </SelectTrigger> 52 52 - </FormControl> 53 53 - <SelectContent> 54 54 - {limits.map((limit) => ( 55 55 - <SelectItem key={limit} value={String(limit)}> 56 56 - {formatDuration(limit)} 57 57 - </SelectItem> 58 58 - ))} 59 59 - </SelectContent> 60 60 - </Select> 61 61 - <FormDescription> 62 62 - When the response time exceeds this limit, the monitor is will be 63 63 - considered as{" "} 64 64 - <span className="text-status-degraded">degraded</span>. 65 65 - </FormDescription> 66 66 - <FormMessage /> 67 67 - </FormItem> 68 68 - )} 69 69 - /> 70 70 - <FormField 71 71 - control={form.control} 72 72 - name="id" // FIXME: should be something like 'limitFailed' 73 73 - render={({ field }) => ( 74 74 - <FormItem> 75 75 - <FormLabel>Failed limit</FormLabel> 76 76 - <Select 77 77 - onValueChange={(value) => field.onChange(Number.parseInt(value))} 78 78 - defaultValue={String(field.value)} 79 79 - > 80 80 - <FormControl> 81 81 - <SelectTrigger className="sm:w-[200px]"> 82 82 - <SelectValue placeholder="Select" /> 83 83 - </SelectTrigger> 84 84 - </FormControl> 85 85 - <SelectContent> 86 86 - {limits.map((limit) => ( 87 87 - <SelectItem key={limit} value={String(limit)}> 88 88 - {formatDuration(limit)} 89 89 - </SelectItem> 90 90 - ))} 91 91 - </SelectContent> 92 92 - </Select> 93 93 - <FormDescription> 94 94 - When the response time exceeds this limit, the monitor is will be 95 95 - considered as <span className="text-status-down">failed</span>. 96 96 - </FormDescription> 97 97 - <FormMessage /> 98 98 - </FormItem> 99 99 - )} 100 100 - /> 101 101 - </div> 102 102 - ); 103 103 - }

-117

apps/web/src/components/forms/monitor/section-otel.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { X } from "lucide-react"; 4 4 - import { type UseFormReturn, useFieldArray } from "react-hook-form"; 5 5 - 6 6 - import type { InsertMonitor } from "@openstatus/db/src/schema"; 7 7 - import type { Limits } from "@openstatus/db/src/schema/plan/schema"; 8 8 - 9 9 - import { 10 10 - Button, 11 11 - FormControl, 12 12 - FormDescription, 13 13 - FormField, 14 14 - FormItem, 15 15 - FormLabel, 16 16 - FormMessage, 17 17 - Input, 18 18 - } from "@openstatus/ui"; 19 19 - 20 20 - import { ProFeatureAlert } from "@/components/billing/pro-feature-alert"; 21 21 - import { SectionHeader } from "../shared/section-header"; 22 22 - 23 23 - interface Props { 24 24 - form: UseFormReturn<InsertMonitor>; 25 25 - limits: Limits; 26 26 - } 27 27 - 28 28 - export function SectionOtel({ form, limits }: Props) { 29 29 - const { fields, append, remove } = useFieldArray({ 30 30 - name: "otelHeaders", 31 31 - control: form.control, 32 32 - }); 33 33 - 34 34 - if (!limits.otel) { 35 35 - return <ProFeatureAlert feature="OpenTelemetry" workspacePlan="team" />; 36 36 - } 37 37 - 38 38 - return ( 39 39 - <div className="grid w-full gap-4"> 40 40 - <SectionHeader 41 41 - title="OpenTelemetry" 42 42 - description="Configure your OpenTelemetry Exporter." 43 43 - /> 44 44 - <div className="grid sm:grid-cols-2 md:grid-cols-3"> 45 45 - <FormField 46 46 - control={form.control} 47 47 - name="otelEndpoint" 48 48 - render={({ field }) => ( 49 49 - <FormItem className="col-span-full"> 50 50 - <FormLabel>Endpoint</FormLabel> 51 51 - <FormControl> 52 52 - <Input 53 53 - type="text" 54 54 - placeholder="https://otel.openstatus.dev/api/v1/metrics" 55 55 - {...field} 56 56 - value={field.value ?? ""} 57 57 - /> 58 58 - </FormControl> 59 59 - <FormDescription> 60 60 - The endpoint to send the metrics to. 61 61 - </FormDescription> 62 62 - <FormMessage /> 63 63 - </FormItem> 64 64 - )} 65 65 - /> 66 66 - </div> 67 67 - <div className="space-y-2 sm:col-span-full"> 68 68 - <FormLabel>Request Header</FormLabel> 69 69 - {fields.map((field, index) => ( 70 70 - <div key={field.id} className="grid grid-cols-6 gap-4"> 71 71 - <FormField 72 72 - control={form.control} 73 73 - name={`otelHeaders.${index}.key`} 74 74 - render={({ field }) => ( 75 75 - <FormItem className="col-span-2"> 76 76 - <FormControl> 77 77 - <Input placeholder="key" {...field} /> 78 78 - </FormControl> 79 79 - </FormItem> 80 80 - )} 81 81 - /> 82 82 - <div className="col-span-4 flex items-center space-x-2"> 83 83 - <FormField 84 84 - control={form.control} 85 85 - name={`otelHeaders.${index}.value`} 86 86 - render={({ field }) => ( 87 87 - <FormItem className="w-full"> 88 88 - <FormControl> 89 89 - <Input placeholder="value" {...field} /> 90 90 - </FormControl> 91 91 - </FormItem> 92 92 - )} 93 93 - /> 94 94 - <Button 95 95 - size="icon" 96 96 - variant="ghost" 97 97 - type="button" 98 98 - onClick={() => remove(index)} 99 99 - > 100 100 - <X className="h-4 w-4" /> 101 101 - </Button> 102 102 - </div> 103 103 - </div> 104 104 - ))} 105 105 - <div> 106 106 - <Button 107 107 - type="button" 108 108 - variant="outline" 109 109 - onClick={() => append({ key: "", value: "" })} 110 110 - > 111 111 - Add Custom Header 112 112 - </Button> 113 113 - </div> 114 114 - </div> 115 115 - </div> 116 116 - ); 117 117 - }

-334

apps/web/src/components/forms/monitor/section-request-http.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { Wand2, X } from "lucide-react"; 4 4 - import type * as React from "react"; 5 5 - import { useFieldArray } from "react-hook-form"; 6 6 - import type { UseFormReturn } from "react-hook-form"; 7 7 - 8 8 - import { 9 9 - monitorMethods, 10 10 - monitorMethodsSchema, 11 11 - } from "@openstatus/db/src/schema"; 12 12 - import type { InsertMonitor } from "@openstatus/db/src/schema"; 13 13 - import { 14 14 - Button, 15 15 - FormControl, 16 16 - FormDescription, 17 17 - FormField, 18 18 - FormItem, 19 19 - FormLabel, 20 20 - FormMessage, 21 21 - Input, 22 22 - Select, 23 23 - SelectContent, 24 24 - SelectItem, 25 25 - SelectTrigger, 26 26 - SelectValue, 27 27 - Textarea, 28 28 - Tooltip, 29 29 - TooltipContent, 30 30 - TooltipProvider, 31 31 - TooltipTrigger, 32 32 - } from "@openstatus/ui"; 33 33 - 34 34 - import { toast } from "@/lib/toast"; 35 35 - import { useRef, useState } from "react"; 36 36 - 37 37 - const contentTypes = [ 38 38 - { value: "application/octet-stream", label: "Binary File" }, 39 39 - { value: "application/json", label: "JSON" }, 40 40 - { value: "application/xml", label: "XML" }, 41 41 - { value: "application/yaml", label: "YAML" }, 42 42 - { value: "application/edn", label: "EDN" }, 43 43 - { value: "application/other", label: "Other" }, 44 44 - { value: "none", label: "None" }, 45 45 - ]; 46 46 - 47 47 - interface Props { 48 48 - form: UseFormReturn<InsertMonitor>; 49 49 - } 50 50 - 51 51 - // TODO: add Dialog with response informations when pingEndpoint! 52 52 - 53 53 - export function SectionRequestHTTP({ form }: Props) { 54 54 - const { fields, append, prepend, remove, update } = useFieldArray({ 55 55 - name: "headers", 56 56 - control: form.control, 57 57 - }); 58 58 - const inputRef = useRef<HTMLInputElement>(null); 59 59 - const watchMethod = form.watch("method"); 60 60 - const [file, setFile] = useState<string | undefined>(undefined); 61 61 - const [content, setContent] = useState<string | undefined>( 62 62 - fields.find((field) => field.key === "Content-Type")?.value, 63 63 - ); 64 64 - 65 65 - const validateJSON = (value?: string) => { 66 66 - if (!value) return; 67 67 - try { 68 68 - const obj = JSON.parse(value) as Record<string, unknown>; 69 69 - form.clearErrors("body"); 70 70 - return obj; 71 71 - } catch (_e) { 72 72 - form.setError("body", { 73 73 - message: "Not a valid JSON object", 74 74 - }); 75 75 - return false; 76 76 - } 77 77 - }; 78 78 - 79 79 - const uploadFile = async (event: React.ChangeEvent<HTMLInputElement>) => { 80 80 - if (event.target.files?.[0]) { 81 81 - const file = event.target.files[0]; 82 82 - 83 83 - // File too big, return error 84 84 - const fileSize = file.size / 1024 / 1024; // in MiB 85 85 - if (fileSize > 10) { 86 86 - // Display error message 87 87 - toast.error("File size is too big. Max 10MB allowed."); 88 88 - return; 89 89 - } 90 90 - 91 91 - const reader = new FileReader(); 92 92 - reader.onload = (event) => { 93 93 - if (event.target?.result && typeof event.target.result === "string") { 94 94 - form.setValue("body", event.target?.result); 95 95 - setFile(file.name); 96 96 - } 97 97 - }; 98 98 - 99 99 - reader.readAsDataURL(file); 100 100 - } 101 101 - }; 102 102 - 103 103 - const onPrettifyJSON = () => { 104 104 - const body = form.getValues("body"); 105 105 - const obj = validateJSON(body); 106 106 - if (obj) { 107 107 - const pretty = JSON.stringify(obj, undefined, 4); 108 108 - form.setValue("body", pretty); 109 109 - } 110 110 - }; 111 111 - 112 112 - return ( 113 113 - <div className="grid w-full gap-4"> 114 114 - <div className="grid gap-4 sm:grid-cols-7"> 115 115 - <FormField 116 116 - control={form.control} 117 117 - name="method" 118 118 - render={({ field }) => ( 119 119 - <FormItem className="sm:col-span-1"> 120 120 - <FormLabel>Method</FormLabel> 121 121 - <Select 122 122 - onValueChange={(value) => { 123 123 - field.onChange(monitorMethodsSchema.parse(value)); 124 124 - form.resetField("body", { defaultValue: "" }); 125 125 - setContent(undefined); 126 126 - }} 127 127 - defaultValue={field.value} 128 128 - > 129 129 - <FormControl> 130 130 - <SelectTrigger> 131 131 - <SelectValue placeholder="Select" /> 132 132 - </SelectTrigger> 133 133 - </FormControl> 134 134 - <SelectContent> 135 135 - {monitorMethods.map((method) => ( 136 136 - <SelectItem key={method} value={method}> 137 137 - {method} 138 138 - </SelectItem> 139 139 - ))} 140 140 - </SelectContent> 141 141 - </Select> 142 142 - <FormMessage /> 143 143 - </FormItem> 144 144 - )} 145 145 - /> 146 146 - <FormField 147 147 - control={form.control} 148 148 - name="url" 149 149 - render={({ field }) => ( 150 150 - <FormItem className="sm:col-span-6"> 151 151 - <FormLabel>URL</FormLabel> 152 152 - <FormControl> 153 153 - <Input 154 154 - className="bg-muted" 155 155 - placeholder="https://documenso.com/api/health" 156 156 - {...field} 157 157 - /> 158 158 - </FormControl> 159 159 - </FormItem> 160 160 - )} 161 161 - /> 162 162 - </div> 163 163 - <div className="space-y-2 sm:col-span-full"> 164 164 - <FormLabel>Request Header</FormLabel> 165 165 - {fields.map((field, index) => ( 166 166 - <div key={field.id} className="grid grid-cols-6 gap-4"> 167 167 - <FormField 168 168 - control={form.control} 169 169 - name={`headers.${index}.key`} 170 170 - render={({ field }) => ( 171 171 - <FormItem className="col-span-2"> 172 172 - <FormControl> 173 173 - <Input placeholder="key" {...field} /> 174 174 - </FormControl> 175 175 - </FormItem> 176 176 - )} 177 177 - /> 178 178 - <div className="col-span-4 flex items-center space-x-2"> 179 179 - <FormField 180 180 - control={form.control} 181 181 - name={`headers.${index}.value`} 182 182 - render={({ field }) => ( 183 183 - <FormItem className="w-full"> 184 184 - <FormControl> 185 185 - <Input placeholder="value" {...field} /> 186 186 - </FormControl> 187 187 - </FormItem> 188 188 - )} 189 189 - /> 190 190 - <Button 191 191 - size="icon" 192 192 - variant="ghost" 193 193 - type="button" 194 194 - onClick={() => remove(index)} 195 195 - > 196 196 - <X className="h-4 w-4" /> 197 197 - </Button> 198 198 - </div> 199 199 - </div> 200 200 - ))} 201 201 - <div> 202 202 - <Button 203 203 - type="button" 204 204 - variant="outline" 205 205 - onClick={() => append({ key: "", value: "" })} 206 206 - > 207 207 - Add Custom Header 208 208 - </Button> 209 209 - </div> 210 210 - </div> 211 211 - {(watchMethod === "POST" || 212 212 - watchMethod === "PUT" || 213 213 - watchMethod === "PATCH" || 214 214 - watchMethod === "DELETE") && ( 215 215 - <div className="sm:col-span-full"> 216 216 - <FormField 217 217 - control={form.control} 218 218 - name="body" 219 219 - render={({ field }) => ( 220 220 - <FormItem className="space-y-1.5"> 221 221 - <div className="flex items-end justify-between"> 222 222 - <FormLabel className="flex items-center space-x-2"> 223 223 - Body 224 224 - <Select 225 225 - defaultValue={content} 226 226 - onValueChange={(value) => { 227 227 - setContent(value); 228 228 - 229 229 - if (content === "application/octet-stream") { 230 230 - form.setValue("body", ""); 231 231 - setFile(undefined); 232 232 - } 233 233 - 234 234 - const contentIndex = fields.findIndex( 235 235 - (field) => field.key === "Content-Type", 236 236 - ); 237 237 - 238 238 - if (contentIndex >= 0) { 239 239 - if (value === "none") { 240 240 - remove(contentIndex); 241 241 - } else { 242 242 - update(contentIndex, { 243 243 - key: "Content-Type", 244 244 - value, 245 245 - }); 246 246 - } 247 247 - } else { 248 248 - prepend({ key: "Content-Type", value }); 249 249 - } 250 250 - }} 251 251 - > 252 252 - <SelectTrigger 253 253 - variant={"ghost"} 254 254 - className="ml-1 h-7 text-muted-foreground text-xs" 255 255 - > 256 256 - <SelectValue placeholder="Content-Type" /> 257 257 - </SelectTrigger> 258 258 - <SelectContent> 259 259 - {contentTypes.map((type) => ( 260 260 - <SelectItem key={type.value} value={type.value}> 261 261 - {type.label} 262 262 - </SelectItem> 263 263 - ))} 264 264 - </SelectContent> 265 265 - </Select> 266 266 - </FormLabel> 267 267 - {watchMethod === "POST" && 268 268 - fields.some( 269 269 - (field) => 270 270 - field.key === "Content-Type" && 271 271 - field.value === "application/json", 272 272 - ) && ( 273 273 - <TooltipProvider> 274 274 - <Tooltip> 275 275 - <TooltipTrigger asChild> 276 276 - <Button 277 277 - type="button" 278 278 - variant="ghost" 279 279 - size="icon" 280 280 - className="h-7 w-7" 281 281 - onClick={onPrettifyJSON} 282 282 - > 283 283 - <Wand2 className="h-3 w-3" /> 284 284 - </Button> 285 285 - </TooltipTrigger> 286 286 - <TooltipContent> 287 287 - <p>Prettify JSON</p> 288 288 - </TooltipContent> 289 289 - </Tooltip> 290 290 - </TooltipProvider> 291 291 - )} 292 292 - </div> 293 293 - <div className="space-y-2"> 294 294 - <FormControl> 295 295 - {content === "application/octet-stream" ? ( 296 296 - <> 297 297 - <Button 298 298 - type="button" 299 299 - variant="outline" 300 300 - onClick={() => inputRef.current?.click()} 301 301 - className="max-w-56" 302 302 - > 303 303 - <span className="truncate"> 304 304 - {file || form.getValues("body") || "Upload file"} 305 305 - </span> 306 306 - </Button> 307 307 - <input 308 308 - type="file" 309 309 - onChange={uploadFile} 310 310 - ref={inputRef} 311 311 - hidden 312 312 - /> 313 313 - </> 314 314 - ) : ( 315 315 - <> 316 316 - <Textarea 317 317 - rows={8} 318 318 - placeholder='{ "hello": "world" }' 319 319 - {...field} 320 320 - /> 321 321 - <FormDescription>Write your payload.</FormDescription> 322 322 - </> 323 323 - )} 324 324 - </FormControl> 325 325 - <FormMessage /> 326 326 - </div> 327 327 - </FormItem> 328 328 - )} 329 329 - /> 330 330 - </div> 331 331 - )} 332 332 - </div> 333 333 - ); 334 334 - }

-65

apps/web/src/components/forms/monitor/section-request-tcp.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import type { UseFormReturn } from "react-hook-form"; 3 3 - 4 4 - import type { InsertMonitor } from "@openstatus/db/src/schema"; 5 5 - import { 6 6 - FormControl, 7 7 - FormDescription, 8 8 - FormField, 9 9 - FormItem, 10 10 - FormLabel, 11 11 - FormMessage, 12 12 - Input, 13 13 - } from "@openstatus/ui"; 14 14 - 15 15 - // TODO: add `port` and `host` field instead! 16 16 - 17 17 - interface Props { 18 18 - form: UseFormReturn<InsertMonitor>; 19 19 - } 20 20 - 21 21 - export function SectionRequestTCP({ form }: Props) { 22 22 - return ( 23 23 - <div className="grid w-full gap-4"> 24 24 - <div className="grid gap-4 sm:grid-cols-7"> 25 25 - <FormField 26 26 - control={form.control} 27 27 - name="url" 28 28 - render={({ field }) => ( 29 29 - <FormItem className="sm:col-span-5"> 30 30 - <FormLabel>Host:Port</FormLabel> 31 31 - <FormControl> 32 32 - <Input 33 33 - className="bg-muted" 34 34 - placeholder="192.168.1.1:80" 35 35 - {...field} 36 36 - /> 37 37 - </FormControl> 38 38 - <FormMessage /> 39 39 - <FormDescription> 40 40 - The input supports both IPv4 addresses and IPv6 addresses. 41 41 - </FormDescription> 42 42 - </FormItem> 43 43 - )} 44 44 - /> 45 45 - </div> 46 46 - <div className="text-sm"> 47 47 - <p>Examples:</p> 48 48 - <ul className="list-inside list-disc text-muted-foreground"> 49 49 - <li> 50 50 - Domain: <code className="text-foreground">openstatus.dev:443</code> 51 51 - </li> 52 52 - <li> 53 53 - IPv4: <code className="text-foreground">192.168.1.1:443</code> 54 54 - </li> 55 55 - <li> 56 56 - IPv6:{" "} 57 57 - <code className="text-foreground"> 58 58 - [2001:db8:85a3:8d3:1319:8a2e:370:7348]:443 59 59 - </code> 60 60 - </li> 61 61 - </ul> 62 62 - </div> 63 63 - </div> 64 64 - ); 65 65 - }

-126

apps/web/src/components/forms/monitor/section-requests.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import * as React from "react"; 4 4 - import type { UseFormReturn } from "react-hook-form"; 5 5 - 6 6 - import { monitorJobTypesSchema } from "@openstatus/db/src/schema"; 7 7 - import type { InsertMonitor } from "@openstatus/db/src/schema"; 8 8 - 9 9 - import { 10 10 - Tabs, 11 11 - TabsContent, 12 12 - TabsList, 13 13 - TabsTrigger, 14 14 - } from "@/components/dashboard/tabs"; 15 15 - 16 16 - import { Alert, AlertDescription, AlertTitle } from "@openstatus/ui"; 17 17 - import { SectionHeader } from "../shared/section-header"; 18 18 - import { SectionRequestHTTP } from "./section-request-http"; 19 19 - import { SectionRequestTCP } from "./section-request-tcp"; 20 20 - 21 21 - interface Props { 22 22 - form: UseFormReturn<InsertMonitor>; 23 23 - type: "create" | "update"; 24 24 - } 25 25 - 26 26 - // TODO: add Dialog with response informations when pingEndpoint! 27 27 - 28 28 - export function SectionRequests({ form, type }: Props) { 29 29 - const jobType = form.getValues("jobType"); 30 30 - const [prevJobType, setPrevJobType] = React.useState(jobType); 31 31 - 32 32 - if (prevJobType !== jobType) { 33 33 - setPrevJobType(jobType); 34 34 - if (type === "create") { 35 35 - form.resetField("url"); 36 36 - form.resetField("method"); 37 37 - form.resetField("body"); 38 38 - form.resetField("headers"); 39 39 - form.resetField("headerAssertions"); 40 40 - form.resetField("statusAssertions"); 41 41 - form.resetField("textBodyAssertions"); 42 42 - } 43 43 - } 44 44 - 45 45 - return ( 46 46 - <div className="grid w-full gap-4"> 47 47 - <SectionHeader 48 48 - title="Request Settings" 49 49 - description={ 50 50 - type === "create" ? ( 51 51 - <> 52 52 - Create your{" "} 53 53 - <span className="font-medium font-mono text-foreground"> 54 54 - HTTP 55 55 - </span>{" "} 56 56 - or{" "} 57 57 - <span className="font-medium font-mono text-foreground">TCP</span>{" "} 58 58 - request type. Add custom headers, payload and test your endpoint 59 59 - before submitting.{" "} 60 60 - <span className="font-medium"> 61 61 - You will not be able to switch type after saving. 62 62 - </span> 63 63 - </> 64 64 - ) : ( 65 65 - <> 66 66 - Update your{" "} 67 67 - <span className="font-medium font-mono text-foreground"> 68 68 - {jobType?.toUpperCase()} 69 69 - </span>{" "} 70 70 - request. Add custom headers, payload and test your endpoint before 71 71 - submitting. 72 72 - </> 73 73 - ) 74 74 - } 75 75 - /> 76 76 - {type === "create" ? ( 77 77 - <Tabs 78 78 - value={jobType} 79 79 - onValueChange={(value) => { 80 80 - const validate = monitorJobTypesSchema.safeParse(value); 81 81 - if (!validate.success) return; 82 82 - form.setValue("jobType", validate.data, { 83 83 - shouldDirty: true, 84 84 - shouldTouch: true, 85 85 - shouldValidate: true, 86 86 - }); 87 87 - }} 88 88 - > 89 89 - <TabsList> 90 90 - <TabsTrigger value="http">HTTP</TabsTrigger> 91 91 - <TabsTrigger value="tcp">TCP</TabsTrigger> 92 92 - </TabsList> 93 93 - <TabsContent value="http"> 94 94 - <SectionRequestHTTP {...{ form }} /> 95 95 - </TabsContent> 96 96 - <TabsContent value="tcp"> 97 97 - <SectionRequestTCP {...{ form }} /> 98 98 - </TabsContent> 99 99 - </Tabs> 100 100 - ) : null} 101 101 - {type === "update" 102 102 - ? (() => { 103 103 - switch (jobType) { 104 104 - case "http": 105 105 - return <SectionRequestHTTP {...{ form }} />; 106 106 - case "tcp": 107 107 - return <SectionRequestTCP {...{ form }} />; 108 108 - default: 109 109 - return ( 110 110 - <Alert> 111 111 - <AlertTitle>Missing Type</AlertTitle> 112 112 - <AlertDescription> 113 113 - The job type{" "} 114 114 - <span className="font-mono text-foreground uppercase"> 115 115 - {jobType} 116 116 - </span>{" "} 117 117 - is missing. Please select a valid job type. 118 118 - </AlertDescription> 119 119 - </Alert> 120 120 - ); 121 121 - } 122 122 - })() 123 123 - : null} 124 124 - </div> 125 125 - ); 126 126 - }

-228

apps/web/src/components/forms/monitor/section-scheduling.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { Info } from "lucide-react"; 4 4 - import type { UseFormReturn } from "react-hook-form"; 5 5 - 6 6 - import type { InsertMonitor, WorkspacePlan } from "@openstatus/db/src/schema"; 7 7 - import { monitorPeriodicitySchema } from "@openstatus/db/src/schema/constants"; 8 8 - import type { Limits } from "@openstatus/db/src/schema/plan/schema"; 9 9 - import { getLimit } from "@openstatus/db/src/schema/plan/utils"; 10 10 - 11 11 - import { cn } from "@/lib/utils"; 12 12 - import { groupByContinent } from "@openstatus/regions"; 13 13 - import { 14 14 - FormControl, 15 15 - FormDescription, 16 16 - FormField, 17 17 - FormItem, 18 18 - FormLabel, 19 19 - FormMessage, 20 20 - Select, 21 21 - SelectContent, 22 22 - SelectItem, 23 23 - SelectTrigger, 24 24 - SelectValue, 25 25 - } from "@openstatus/ui"; 26 26 - 27 27 - import { CheckboxLabel } from "../shared/checkbox-label"; 28 28 - import { SectionHeader } from "../shared/section-header"; 29 29 - import { SelectRegion } from "./select-region"; 30 30 - 31 31 - // TODO: centralize in a shared file! 32 32 - const cronJobs = [ 33 33 - { value: "30s", label: "30 seconds" }, 34 34 - { value: "1m", label: "1 minute" }, 35 35 - { value: "5m", label: "5 minutes" }, 36 36 - { value: "10m", label: "10 minutes" }, 37 37 - { value: "30m", label: "30 minutes" }, 38 38 - { value: "1h", label: "1 hour" }, 39 39 - ] as const; 40 40 - 41 41 - interface Props { 42 42 - form: UseFormReturn<InsertMonitor>; 43 43 - limits: Limits; 44 44 - plan: WorkspacePlan; 45 45 - } 46 46 - 47 47 - export function SectionScheduling({ form, limits, plan }: Props) { 48 48 - const periodicityLimit = getLimit(limits, "periodicity"); 49 49 - const regionsLimit = getLimit(limits, "regions"); 50 50 - return ( 51 51 - <div className="grid w-full gap-4"> 52 52 - <SectionHeader 53 53 - title="Schedule and Regions" 54 54 - description="Customize the period of time and the regions where your endpoint will be monitored." 55 55 - /> 56 56 - <div className="grid sm:grid-cols-2 md:grid-cols-3"> 57 57 - <FormField 58 58 - control={form.control} 59 59 - name="periodicity" 60 60 - render={({ field }) => ( 61 61 - <FormItem> 62 62 - <FormLabel>Frequency</FormLabel> 63 63 - <Select 64 64 - onValueChange={(value) => 65 65 - field.onChange(monitorPeriodicitySchema.parse(value)) 66 66 - } 67 67 - defaultValue={field.value} 68 68 - > 69 69 - <FormControl> 70 70 - <SelectTrigger className="w-full"> 71 71 - <SelectValue placeholder="How often should it check your endpoint?" /> 72 72 - </SelectTrigger> 73 73 - </FormControl> 74 74 - <SelectContent> 75 75 - {cronJobs.map(({ label, value }) => ( 76 76 - <SelectItem 77 77 - key={value} 78 78 - value={value} 79 79 - disabled={!periodicityLimit.includes(value)} 80 80 - > 81 81 - {label} 82 82 - </SelectItem> 83 83 - ))} 84 84 - </SelectContent> 85 85 - </Select> 86 86 - <FormDescription> 87 87 - Frequency of how often your endpoint will be pinged. 88 88 - </FormDescription> 89 89 - <FormMessage /> 90 90 - </FormItem> 91 91 - )} 92 92 - /> 93 93 - </div> 94 94 - <FormField 95 95 - control={form.control} 96 96 - name="regions" 97 97 - render={({ field }) => { 98 98 - return ( 99 99 - <FormItem> 100 100 - <FormLabel className="text-base">Regions</FormLabel> 101 101 - <div> 102 102 - <FormControl> 103 103 - <SelectRegion 104 104 - value={field.value} 105 105 - allowedRegions={regionsLimit} 106 106 - onChange={field.onChange} 107 107 - /> 108 108 - </FormControl> 109 109 - </div> 110 110 - <FormDescription> 111 111 - Select the regions you want to monitor your endpoint from.{" "} 112 112 - <br /> 113 113 - <span className="text-xs"> 114 114 - {plan === "free" 115 115 - ? "Only a few regions are available in the free plan. Upgrade to access all regions." 116 116 - : ""} 117 117 - </span> 118 118 - </FormDescription> 119 119 - <FewRegionsBanner form={form} className="max-w-md" /> 120 120 - <div> 121 121 - {Object.entries(groupByContinent) 122 122 - .sort((a, b) => a[0].localeCompare(b[0])) 123 123 - .map(([continent, regions]) => { 124 124 - return { continent, regions }; 125 125 - }) 126 126 - .map((current) => { 127 127 - return ( 128 128 - <div key={current.continent} className="py-2"> 129 129 - <p className="font-medium text-muted-foreground text-sm"> 130 130 - {current.continent} 131 131 - </p> 132 132 - <div className="grid grid-cols-3 gap-2"> 133 133 - {current.regions 134 134 - .sort((a, b) => 135 135 - a.location.localeCompare(b.location), 136 136 - ) 137 137 - .map((item) => { 138 138 - return ( 139 139 - <FormField 140 140 - key={item.code} 141 141 - control={form.control} 142 142 - name="regions" 143 143 - render={({ field }) => { 144 144 - const { flag, location } = item; 145 145 - return ( 146 146 - <FormItem 147 147 - key={item.code} 148 148 - className="h-full w-full" 149 149 - > 150 150 - <FormControl className="h-full"> 151 151 - <CheckboxLabel 152 152 - disabled={ 153 153 - !regionsLimit.includes(item.code) 154 154 - } 155 155 - id={item.code} 156 156 - name="region" 157 157 - checked={field.value?.includes( 158 158 - item.code, 159 159 - )} 160 160 - onCheckedChange={(checked) => { 161 161 - return checked 162 162 - ? field.onChange([ 163 163 - ...(field.value 164 164 - ? field.value 165 165 - : []), 166 166 - item.code, 167 167 - ]) 168 168 - : field.onChange( 169 169 - field.value?.filter( 170 170 - (value) => 171 171 - value !== item.code, 172 172 - ), 173 173 - ); 174 174 - }} 175 175 - className="p-3" 176 176 - > 177 177 - {location} {flag} 178 178 - </CheckboxLabel> 179 179 - </FormControl> 180 180 - </FormItem> 181 181 - ); 182 182 - }} 183 183 - /> 184 184 - ); 185 185 - })} 186 186 - </div> 187 187 - </div> 188 188 - ); 189 189 - })} 190 190 - </div> 191 191 - <FormMessage /> 192 192 - </FormItem> 193 193 - ); 194 194 - }} 195 195 - /> 196 196 - </div> 197 197 - ); 198 198 - } 199 199 - 200 200 - // REMINDER: only watch the regions in a new component to avoid re-renders 201 201 - function FewRegionsBanner({ 202 202 - form, 203 203 - className, 204 204 - }: Pick<Props, "form"> & { className?: string }) { 205 205 - const watchRegions = form.watch("regions"); 206 206 - 207 207 - if (watchRegions?.length && watchRegions.length > 2) return null; 208 208 - 209 209 - return ( 210 210 - <div 211 211 - className={cn( 212 212 - "flex items-center gap-3 rounded-lg border border-border px-3 py-2", 213 213 - className, 214 214 - )} 215 215 - > 216 216 - <Info 217 217 - className="-mt-0.5 shrink-0 text-status-monitoring" 218 218 - size={16} 219 219 - strokeWidth={2} 220 220 - aria-hidden="true" 221 221 - /> 222 222 - <p className="text-sm"> 223 223 - To minimize false positives, we recommend monitoring your endpoint in at 224 224 - least 3 regions. 225 225 - </p> 226 226 - </div> 227 227 - ); 228 228 - }

-111

apps/web/src/components/forms/monitor/section-status-page.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import type { InsertMonitor, Page } from "@openstatus/db/src/schema"; 6 6 - import { 7 7 - FormControl, 8 8 - FormDescription, 9 9 - FormField, 10 10 - FormItem, 11 11 - FormLabel, 12 12 - FormMessage, 13 13 - Input, 14 14 - } from "@openstatus/ui"; 15 15 - 16 16 - import { CheckboxLabel } from "../shared/checkbox-label"; 17 17 - import { SectionHeader } from "../shared/section-header"; 18 18 - 19 19 - interface Props { 20 20 - form: UseFormReturn<InsertMonitor>; 21 21 - pages?: Page[]; 22 22 - } 23 23 - 24 24 - // FIXME: the `CheckLabel` doesn't take the full space 25 25 - 26 26 - export function SectionStatusPage({ form, pages }: Props) { 27 27 - return ( 28 28 - <div className="flex w-full flex-col gap-4"> 29 29 - <SectionHeader 30 30 - title="Status Page" 31 31 - description="Customize the informations about your monitor on the corresponding status page." 32 32 - /> 33 33 - <FormField 34 34 - control={form.control} 35 35 - name="description" 36 36 - render={({ field }) => ( 37 37 - <FormItem> 38 38 - <FormLabel>Description</FormLabel> 39 39 - <FormControl> 40 40 - <Input 41 41 - placeholder="Determines the api health of our services." 42 42 - {...field} 43 43 - /> 44 44 - </FormControl> 45 45 - <FormDescription> 46 46 - Provide your users with information about it. 47 47 - </FormDescription> 48 48 - <FormMessage /> 49 49 - </FormItem> 50 50 - )} 51 51 - /> 52 52 - <FormField 53 53 - control={form.control} 54 54 - name="pages" 55 55 - // biome-ignore lint/correctness/noUnusedVariables: <explanation> 56 56 - render={({ field }) => { 57 57 - return ( 58 58 - <FormItem> 59 59 - <div className="mb-4"> 60 60 - <FormLabel className="text-base">Status Pages</FormLabel> 61 61 - <FormDescription> 62 62 - Select the pages where you want to display the monitor. 63 63 - </FormDescription> 64 64 - </div> 65 65 - <div className="grid grid-cols-1 grid-rows-1 gap-4 sm:grid-cols-2 md:grid-cols-3"> 66 66 - {pages?.map((item) => ( 67 67 - <FormField 68 68 - key={item.id} 69 69 - control={form.control} 70 70 - name="pages" 71 71 - render={({ field }) => { 72 72 - return ( 73 73 - <FormItem key={item.id} className="h-full w-full"> 74 74 - <FormControl className="h-full"> 75 75 - <CheckboxLabel 76 76 - id={String(item.id)} 77 77 - name="page" 78 78 - checked={field.value?.includes(item.id)} 79 79 - onCheckedChange={(checked) => { 80 80 - return checked 81 81 - ? field.onChange([ 82 82 - ...(field.value ? field.value : []), 83 83 - item.id, 84 84 - ]) 85 85 - : field.onChange( 86 86 - field.value?.filter( 87 87 - (value) => value !== item.id, 88 88 - ), 89 89 - ); 90 90 - }} 91 91 - > 92 92 - <span>{item.title}</span> 93 93 - </CheckboxLabel> 94 94 - </FormControl> 95 95 - </FormItem> 96 96 - ); 97 97 - }} 98 98 - /> 99 99 - ))} 100 100 - </div> 101 101 - {!pages || pages.length === 0 ? ( 102 102 - <FormDescription>Missing status pages.</FormDescription> 103 103 - ) : null} 104 104 - <FormMessage /> 105 105 - </FormItem> 106 106 - ); 107 107 - }} 108 108 - /> 109 109 - </div> 110 110 - ); 111 111 - }

-144

apps/web/src/components/forms/monitor/select-region.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { Check, ChevronsUpDown, Globe2 } from "lucide-react"; 4 4 - 5 5 - import { 6 6 - type Continent, 7 7 - type RegionInfo, 8 8 - formatRegionCode, 9 9 - regionDict, 10 10 - } from "@openstatus/regions"; 11 11 - import { Button, type ButtonProps } from "@openstatus/ui/src/components/button"; 12 12 - import { 13 13 - Command, 14 14 - CommandEmpty, 15 15 - CommandGroup, 16 16 - CommandInput, 17 17 - CommandItem, 18 18 - CommandList, 19 19 - CommandSeparator, 20 20 - } from "@openstatus/ui/src/components/command"; 21 21 - import { 22 22 - Popover, 23 23 - PopoverContent, 24 24 - PopoverTrigger, 25 25 - } from "@openstatus/ui/src/components/popover"; 26 26 - 27 27 - import { cn } from "@/lib/utils"; 28 28 - import { 29 29 - type Region, 30 30 - monitorRegions, 31 31 - } from "@openstatus/db/src/schema/constants"; 32 32 - 33 33 - interface SelectRegionProps extends Omit<ButtonProps, "onChange"> { 34 34 - allowedRegions: Region[]; 35 35 - value?: Region[]; 36 36 - onChange?: (value: Region[]) => void; 37 37 - } 38 38 - 39 39 - export function SelectRegion({ 40 40 - value = [], 41 41 - onChange, 42 42 - allowedRegions, 43 43 - className, 44 44 - ...props 45 45 - }: SelectRegionProps) { 46 46 - const regionsByContinent = monitorRegions.reduce( 47 47 - (prev, curr) => { 48 48 - const region = regionDict[curr]; 49 49 - 50 50 - const item = prev.find((r) => r.continent === region.continent); 51 51 - 52 52 - if (item) { 53 53 - item.data.push(region); 54 54 - } else { 55 55 - prev.push({ 56 56 - continent: region.continent, 57 57 - data: [region], 58 58 - }); 59 59 - } 60 60 - 61 61 - return prev; 62 62 - }, 63 63 - [] as { continent: Continent; data: RegionInfo[] }[], 64 64 - ); 65 65 - 66 66 - return ( 67 67 - <Popover> 68 68 - <PopoverTrigger asChild> 69 69 - <Button 70 70 - size="lg" 71 71 - variant="outline" 72 72 - className={cn("px-3 shadow-none", className)} 73 73 - {...props} 74 74 - > 75 75 - <Globe2 className="mr-2 h-4 w-4" /> 76 76 - <span className="whitespace-nowrap"> 77 77 - <code>{value.length}</code> Regions 78 78 - </span> 79 79 - <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> 80 80 - </Button> 81 81 - </PopoverTrigger> 82 82 - <PopoverContent className="p-0" align="start"> 83 83 - <Command> 84 84 - <CommandInput placeholder="Search regions..." /> 85 85 - <CommandList className="max-h-64"> 86 86 - <CommandEmpty>No results found.</CommandEmpty> 87 87 - <CommandGroup> 88 88 - <CommandItem 89 89 - onSelect={() => onChange?.(value.length ? [] : allowedRegions)} 90 90 - > 91 91 - {value.length ? "Clear all" : "Select all"} 92 92 - </CommandItem> 93 93 - </CommandGroup> 94 94 - <CommandSeparator /> 95 95 - {regionsByContinent.map(({ continent, data }) => { 96 96 - return ( 97 97 - <CommandGroup key={continent} heading={continent}> 98 98 - {data.map((region) => { 99 99 - const { code, flag, location, continent } = region; 100 100 - const isSelected = value.includes(code); 101 101 - return ( 102 102 - <CommandItem 103 103 - key={code} 104 104 - value={code} 105 105 - keywords={[code, location, continent]} 106 106 - disabled={!allowedRegions.includes(code)} 107 107 - onSelect={(checked) => { 108 108 - const newValue = !value.includes(checked as Region) 109 109 - ? [...value, code] 110 110 - : value.filter((r) => r !== code); 111 111 - onChange?.(newValue); 112 112 - }} 113 113 - > 114 114 - <div 115 115 - className={cn( 116 116 - "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", 117 117 - isSelected 118 118 - ? "bg-primary text-primary-foreground" 119 119 - : "opacity-50 [&_svg]:invisible", 120 120 - )} 121 121 - > 122 122 - <Check className={cn("h-4 w-4")} /> 123 123 - </div> 124 124 - <div className="flex w-full justify-between"> 125 125 - <span> 126 126 - {formatRegionCode(code)}{" "} 127 127 - <span className="truncate text-muted-foreground"> 128 128 - {location} 129 129 - </span> 130 130 - </span> 131 131 - <span>{flag}</span> 132 132 - </div> 133 133 - </CommandItem> 134 134 - ); 135 135 - })} 136 136 - </CommandGroup> 137 137 - ); 138 138 - })} 139 139 - </CommandList> 140 140 - </Command> 141 141 - </PopoverContent> 142 142 - </Popover> 143 143 - ); 144 144 - }

-397

apps/web/src/components/forms/monitor/tags-multi-box.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { Check, ChevronsUpDown, Edit2 } from "lucide-react"; 4 4 - import * as React from "react"; 5 5 - 6 6 - import type { MonitorTag } from "@openstatus/db/src/schema"; 7 7 - import { 8 8 - Accordion, 9 9 - AccordionContent, 10 10 - AccordionItem, 11 11 - AccordionTrigger, 12 12 - AlertDialog, 13 13 - AlertDialogAction, 14 14 - AlertDialogCancel, 15 15 - AlertDialogContent, 16 16 - AlertDialogDescription, 17 17 - AlertDialogFooter, 18 18 - AlertDialogHeader, 19 19 - AlertDialogTitle, 20 20 - AlertDialogTrigger, 21 21 - Button, 22 22 - Command, 23 23 - CommandGroup, 24 24 - CommandInput, 25 25 - CommandItem, 26 26 - CommandList, 27 27 - CommandSeparator, 28 28 - Dialog, 29 29 - DialogContent, 30 30 - DialogDescription, 31 31 - DialogHeader, 32 32 - DialogTitle, 33 33 - Input, 34 34 - Label, 35 35 - Popover, 36 36 - PopoverContent, 37 37 - PopoverTrigger, 38 38 - } from "@openstatus/ui"; 39 39 - 40 40 - import { Icons } from "@/components/icons"; 41 41 - import { LoadingAnimation } from "@/components/loading-animation"; 42 42 - import { TagBadge } from "@/components/monitor/tag-badge"; 43 43 - import { toastAction } from "@/lib/toast"; 44 44 - import { cn } from "@/lib/utils"; 45 45 - import { api } from "@/trpc/client"; 46 46 - 47 47 - const colors = [ 48 48 - "#ff5c5c", // Red 49 49 - "#6fcf97", // Green 50 50 - "#70a1ff", // Blue 51 51 - "#ffb74d", // Orange 52 52 - "#b19cd9", // Violet 53 53 - "#7986cb", // Indigo 54 54 - "#64b5f6", // Turquoise 55 55 - "#ffee58", // Yellow 56 56 - "#f06292", // Pink 57 57 - "#ff77ff", // Fuchsia 58 58 - "#808080", // Gray 59 59 - ]; 60 60 - 61 61 - interface TagsMultiBoxProps { 62 62 - tags?: MonitorTag[]; 63 63 - values: number[]; // values from the form 64 64 - onChange: (values: number[]) => void; 65 65 - } 66 66 - 67 67 - export function TagsMultiBox({ 68 68 - tags: defaultTags = [], 69 69 - values, 70 70 - onChange, 71 71 - }: TagsMultiBoxProps) { 72 72 - const inputRef = React.useRef<HTMLInputElement>(null); 73 73 - const [tags, setTags] = React.useState<MonitorTag[]>(defaultTags); 74 74 - const [openCombobox, setOpenCombobox] = React.useState(false); 75 75 - const [openDialog, setOpenDialog] = React.useState(false); 76 76 - const [inputValue, setInputValue] = React.useState<string>(""); 77 77 - 78 78 - const create = async (name: string) => { 79 79 - try { 80 80 - const randomIndex = Math.floor(Math.random() * colors.length); 81 81 - const newTag = await api.monitorTag.create.mutate({ 82 82 - name: name.trim(), 83 83 - color: colors[randomIndex] || "#808080", // gray as default 84 84 - }); 85 85 - toastAction("saved"); 86 86 - setTags((prev) => [...prev, newTag]); 87 87 - // TODO: seems like the new value is not taken into account.... 88 88 - // That's mainly because we only update the id, and not the name! Same is for the update() function 89 89 - onChange([...values, newTag.id]); 90 90 - } catch { 91 91 - toastAction("error"); 92 92 - } 93 93 - }; 94 94 - 95 95 - const toggle = (item: MonitorTag) => { 96 96 - onChange( 97 97 - values?.includes(item.id) 98 98 - ? values.filter((v) => v !== item.id) 99 99 - : [...values, item.id], 100 100 - ); 101 101 - inputRef?.current?.focus(); 102 102 - }; 103 103 - 104 104 - const update = async (tag: MonitorTag) => { 105 105 - try { 106 106 - const updateTag = await api.monitorTag.update.mutate(tag); 107 107 - if (!updateTag) return; 108 108 - setTags((prev) => prev.map((f) => (f.id === tag.id ? updateTag : f))); 109 109 - toastAction("saved"); 110 110 - } catch { 111 111 - toastAction("error"); 112 112 - } 113 113 - }; 114 114 - 115 115 - const _delete = async (item: MonitorTag) => { 116 116 - try { 117 117 - await api.monitorTag.delete.mutate({ id: item.id }); 118 118 - setTags((prev) => prev.filter((f) => f.id !== item.id)); 119 119 - onChange(values?.filter((v) => v !== item.id)); 120 120 - toastAction("deleted"); 121 121 - } catch { 122 122 - toastAction("error"); 123 123 - } 124 124 - }; 125 125 - 126 126 - const onComboboxOpenChange = (value: boolean) => { 127 127 - inputRef.current?.blur(); // HACK: otherwise, would scroll automatically to the bottom of page 128 128 - setOpenCombobox(value); 129 129 - }; 130 130 - 131 131 - return ( 132 132 - <div className="w-full"> 133 133 - <Popover open={openCombobox} onOpenChange={onComboboxOpenChange}> 134 134 - <PopoverTrigger asChild> 135 135 - <Button 136 136 - variant="outline" 137 137 - role="combobox" 138 138 - aria-expanded={openCombobox} 139 139 - className="h-auto w-full justify-between text-foreground" 140 140 - > 141 141 - <span className="flex flex-wrap gap-2 truncate"> 142 142 - {values.length > 0 143 143 - ? values.map((id) => { 144 144 - const tag = tags.find((tag) => tag.id === id); 145 145 - return tag ? <TagBadge key={tag.id} {...tag} /> : null; 146 146 - }) 147 147 - : "Select tags"} 148 148 - </span> 149 149 - <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> 150 150 - </Button> 151 151 - </PopoverTrigger> 152 152 - <PopoverContent className="w-full p-0"> 153 153 - <Command className="w-(--radix-popover-trigger-width)" loop> 154 154 - <CommandInput 155 155 - // biome-ignore lint/suspicious/noExplicitAny: <explanation> 156 156 - ref={inputRef as any} 157 157 - placeholder="Search tag..." 158 158 - value={inputValue} 159 159 - onValueChange={setInputValue} 160 160 - /> 161 161 - <CommandList> 162 162 - <CommandGroup className="max-h-[145px] overflow-auto"> 163 163 - {tags.map((item) => { 164 164 - const isActive = values?.includes(item.id); 165 165 - return ( 166 166 - <CommandItem 167 167 - key={item.id} 168 168 - value={item.name} 169 169 - onSelect={() => toggle(item)} 170 170 - > 171 171 - <Check 172 172 - className={cn( 173 173 - "mr-2 h-4 w-4", 174 174 - isActive ? "opacity-100" : "opacity-0", 175 175 - )} 176 176 - /> 177 177 - <div className="flex-1">{item.name}</div> 178 178 - <div 179 179 - className="h-4 w-4 rounded-full" 180 180 - style={{ backgroundColor: item.color }} 181 181 - /> 182 182 - </CommandItem> 183 183 - ); 184 184 - })} 185 185 - <CommandItemCreate 186 186 - onSelect={() => create(inputValue)} 187 187 - {...{ inputValue, tags }} 188 188 - /> 189 189 - </CommandGroup> 190 190 - <CommandSeparator alwaysRender /> 191 191 - <CommandGroup> 192 192 - <CommandItem 193 193 - value={`:${inputValue}:`} // HACK: that way, the edit button will always be shown 194 194 - className="text-muted-foreground text-xs" 195 195 - onSelect={() => setOpenDialog(true)} 196 196 - > 197 197 - <div className={cn("mr-2 h-4 w-4")} /> 198 198 - <Edit2 className="mr-2 h-2.5 w-2.5" /> 199 199 - Edit tags 200 200 - </CommandItem> 201 201 - </CommandGroup> 202 202 - </CommandList> 203 203 - </Command> 204 204 - </PopoverContent> 205 205 - </Popover> 206 206 - <Dialog 207 207 - open={openDialog} 208 208 - onOpenChange={(open) => { 209 209 - if (!open) setOpenCombobox(true); 210 210 - setOpenDialog(open); 211 211 - }} 212 212 - > 213 213 - <DialogContent className="flex max-h-[90vh] flex-col"> 214 214 - <DialogHeader> 215 215 - <DialogTitle>Edit Tags</DialogTitle> 216 216 - <DialogDescription> 217 217 - Update or delete tags. Create a tag through the combobox. 218 218 - </DialogDescription> 219 219 - </DialogHeader> 220 220 - <div className="flex-1 overflow-scroll"> 221 221 - {tags.map((item) => { 222 222 - return ( 223 223 - <DialogListItem 224 224 - key={item.id} 225 225 - onDelete={() => _delete(item)} 226 226 - onSubmit={async (values) => { 227 227 - await update({ 228 228 - ...item, 229 229 - ...values, 230 230 - }); 231 231 - }} 232 232 - {...item} 233 233 - /> 234 234 - ); 235 235 - })} 236 236 - </div> 237 237 - </DialogContent> 238 238 - </Dialog> 239 239 - </div> 240 240 - ); 241 241 - } 242 242 - 243 243 - const CommandItemCreate = ({ 244 244 - inputValue, 245 245 - tags, 246 246 - onSelect, 247 247 - }: { 248 248 - inputValue: string; 249 249 - tags: MonitorTag[]; 250 250 - onSelect: () => Promise<void>; 251 251 - }) => { 252 252 - const [isPending, startTransition] = React.useTransition(); 253 253 - const hasNoTag = !tags 254 254 - .map(({ name }) => name.toLowerCase()) 255 255 - .includes(`${inputValue.toLowerCase()}`); 256 256 - 257 257 - const render = inputValue !== "" && hasNoTag; 258 258 - 259 259 - if (!render) return null; 260 260 - 261 261 - // BUG: whenever a space is appended, the Create-Button will not be shown. 262 262 - return ( 263 263 - <CommandItem 264 264 - key={`${inputValue}`} 265 265 - value={`${inputValue}`} 266 266 - className="text-muted-foreground text-xs" 267 267 - onSelect={() => { 268 268 - startTransition(async () => { 269 269 - await onSelect(); 270 270 - }); 271 271 - }} 272 272 - disabled={isPending} 273 273 - > 274 274 - <div className={cn("mr-2 h-4 w-4")} /> 275 275 - {isPending ? "Creating" : "Create"} new label &quot;{inputValue}&quot; 276 276 - </CommandItem> 277 277 - ); 278 278 - }; 279 279 - 280 280 - const DialogListItem = ({ 281 281 - id, 282 282 - name, 283 283 - color, 284 284 - onSubmit, 285 285 - onDelete, 286 286 - }: MonitorTag & { 287 287 - onSubmit: (values: { name: string; color: string }) => Promise<void>; 288 288 - onDelete: () => Promise<void>; 289 289 - }) => { 290 290 - const inputRef = React.useRef<HTMLInputElement>(null); 291 291 - const [accordionValue, setAccordionValue] = React.useState<string>(""); 292 292 - const [inputValue, setInputValue] = React.useState<string>(name); 293 293 - const [colorValue, setColorValue] = React.useState<string>(color); 294 294 - const [isPending, startTransition] = React.useTransition(); 295 295 - const disabled = name === inputValue && color === colorValue; 296 296 - 297 297 - React.useEffect(() => { 298 298 - if (accordionValue !== "") { 299 299 - inputRef.current?.focus(); 300 300 - } 301 301 - }, [accordionValue]); 302 302 - 303 303 - // const handleSubmit = () => {} 304 304 - // const handleDelete = () => {} 305 305 - 306 306 - return ( 307 307 - <Accordion 308 308 - key={id} 309 309 - type="single" // will never work as we have only one accordion for each tag 310 310 - collapsible 311 311 - value={accordionValue} 312 312 - onValueChange={setAccordionValue} 313 313 - > 314 314 - <AccordionItem value={`item-${id}`}> 315 315 - <AccordionTrigger className="w-full hover:no-underline"> 316 316 - <TagBadge color={color} name={name} /> 317 317 - </AccordionTrigger> 318 318 - <AccordionContent> 319 319 - {/* REMINDER: cannot nest form within form! HOTFIX: no form */} 320 320 - <div className="flex items-end gap-4 px-1"> 321 321 - <div className="grid w-full gap-3"> 322 322 - <Label htmlFor="name">Label name</Label> 323 323 - <Input 324 324 - ref={inputRef} 325 325 - id="name" 326 326 - value={inputValue} 327 327 - onChange={(e) => setInputValue(e.target.value)} 328 328 - className="h-8" 329 329 - /> 330 330 - </div> 331 331 - <div className="grid gap-3"> 332 332 - <Label htmlFor="color">Color</Label> 333 333 - <Input 334 334 - id="color" 335 335 - type="color" 336 336 - value={colorValue} 337 337 - onChange={(e) => setColorValue(e.target.value)} 338 338 - className="h-8 px-2 py-1" 339 339 - /> 340 340 - </div> 341 341 - {/* FIXME: shouldnt saves the monitor form */} 342 342 - <Button 343 343 - onClick={() => { 344 344 - startTransition(() => { 345 345 - onSubmit({ 346 346 - name: inputValue.trim(), 347 347 - color: colorValue, 348 348 - }); 349 349 - setAccordionValue(""); 350 350 - }); 351 351 - }} 352 352 - disabled={disabled || isPending} 353 353 - > 354 354 - {isPending ? <LoadingAnimation /> : "Save"} 355 355 - </Button> 356 356 - <div className="flex items-center gap-4"> 357 357 - <AlertDialog> 358 358 - <AlertDialogTrigger asChild> 359 359 - <Button 360 360 - size="icon" 361 361 - variant="destructive" 362 362 - disabled={isPending} 363 363 - > 364 364 - <Icons.trash className="h-4 w-4" /> 365 365 - </Button> 366 366 - </AlertDialogTrigger> 367 367 - <AlertDialogContent> 368 368 - <AlertDialogHeader> 369 369 - <AlertDialogTitle>Are you sure sure?</AlertDialogTitle> 370 370 - <AlertDialogDescription asChild> 371 371 - <div> 372 372 - You are about to delete the tag{" "} 373 373 - <TagBadge color={color} name={name} /> . 374 374 - </div> 375 375 - </AlertDialogDescription> 376 376 - </AlertDialogHeader> 377 377 - <AlertDialogFooter> 378 378 - <AlertDialogCancel>Cancel</AlertDialogCancel> 379 379 - <AlertDialogAction 380 380 - onClick={() => { 381 381 - startTransition(async () => { 382 382 - await onDelete(); 383 383 - }); 384 384 - }} 385 385 - > 386 386 - {isPending ? <LoadingAnimation /> : "Delete"} 387 387 - </AlertDialogAction> 388 388 - </AlertDialogFooter> 389 389 - </AlertDialogContent> 390 390 - </AlertDialog> 391 391 - </div> 392 392 - </div> 393 393 - </AccordionContent> 394 394 - </AccordionItem> 395 395 - </Accordion> 396 396 - ); 397 397 - };

-138

apps/web/src/components/forms/notification/form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { useRouter } from "next/navigation"; 5 5 - import { useTransition } from "react"; 6 6 - import { useForm } from "react-hook-form"; 7 7 - 8 8 - import type { 9 9 - InsertNotification, 10 10 - InsertNotificationWithData, 11 11 - Monitor, 12 12 - NotificationProvider, 13 13 - WorkspacePlan, 14 14 - } from "@openstatus/db/src/schema"; 15 15 - import { InsertNotificationWithDataSchema } from "@openstatus/db/src/schema"; 16 16 - import { Badge, Form } from "@openstatus/ui"; 17 17 - 18 18 - import { 19 19 - Tabs, 20 20 - TabsContent, 21 21 - TabsList, 22 22 - TabsTrigger, 23 23 - } from "@/components/dashboard/tabs"; 24 24 - import { toast, toastAction } from "@/lib/toast"; 25 25 - import { api } from "@/trpc/client"; 26 26 - import { TRPCClientError } from "@trpc/client"; 27 27 - import { SaveButton } from "../shared/save-button"; 28 28 - import { General } from "./general"; 29 29 - import { SectionConnect } from "./section-connect"; 30 30 - 31 31 - interface Props { 32 32 - defaultValues?: InsertNotification; 33 33 - defaultSection?: string; 34 34 - onSubmit?: () => void; 35 35 - monitors?: Monitor[]; 36 36 - workspacePlan: WorkspacePlan; 37 37 - nextUrl?: string; 38 38 - provider: NotificationProvider; 39 39 - callbackData?: string; 40 40 - } 41 41 - 42 42 - export function NotificationForm({ 43 43 - defaultValues, 44 44 - defaultSection = "connect", 45 45 - onSubmit: onExternalSubmit, 46 46 - workspacePlan, 47 47 - monitors, 48 48 - nextUrl, 49 49 - provider, 50 50 - callbackData, 51 51 - }: Props) { 52 52 - const [isPending, startTransition] = useTransition(); 53 53 - const router = useRouter(); 54 54 - const form = useForm<InsertNotificationWithData>({ 55 55 - resolver: zodResolver(InsertNotificationWithDataSchema), 56 56 - defaultValues: { 57 57 - ...defaultValues, 58 58 - provider, 59 59 - name: defaultValues?.name || "", 60 60 - data: JSON.parse(defaultValues?.data || "{}"), 61 61 - }, 62 62 - }); 63 63 - 64 64 - async function onSubmit({ 65 65 - provider, 66 66 - data, 67 67 - ...rest 68 68 - }: InsertNotificationWithData) { 69 69 - console.log({ provider, data, ...rest }); 70 70 - startTransition(async () => { 71 71 - try { 72 72 - if (provider === "pagerduty") { 73 73 - if (callbackData) { 74 74 - data.pagerduty = callbackData; 75 75 - } 76 76 - } 77 77 - if (defaultValues) { 78 78 - await api.notification.update.mutate({ 79 79 - provider, 80 80 - data: JSON.stringify(data), 81 81 - ...rest, 82 82 - }); 83 83 - } else { 84 84 - await api.notification.create.mutate({ 85 85 - provider, 86 86 - data: JSON.stringify(data), 87 87 - ...rest, 88 88 - }); 89 89 - } 90 90 - if (nextUrl) { 91 91 - router.push(nextUrl); 92 92 - } 93 93 - router.refresh(); 94 94 - toastAction("saved"); 95 95 - } catch (e) { 96 96 - if (e instanceof TRPCClientError) toast.error(e.message); 97 97 - else toastAction("error"); 98 98 - } finally { 99 99 - onExternalSubmit?.(); 100 100 - } 101 101 - }); 102 102 - } 103 103 - 104 104 - return ( 105 105 - <Form {...form}> 106 106 - <form 107 107 - onSubmit={form.handleSubmit(onSubmit)} 108 108 - id="notification-form" // we use a form id to connect the submit button to the form (as we also have the form nested inside of `MonitorForm`) 109 109 - className="flex flex-col gap-4" 110 110 - > 111 111 - <General form={form} plan={workspacePlan} /> 112 112 - <Tabs defaultValue={defaultSection} className="w-full"> 113 113 - <TabsList> 114 114 - <TabsTrigger value="connect"> 115 115 - Connect{" "} 116 116 - {defaultValues?.monitors.length ? ( 117 117 - <Badge variant="secondary" className="ml-1"> 118 118 - {defaultValues?.monitors.length} 119 119 - </Badge> 120 120 - ) : null} 121 121 - </TabsTrigger> 122 122 - </TabsList> 123 123 - <TabsContent value="connect"> 124 124 - <SectionConnect form={form} monitors={monitors} /> 125 125 - </TabsContent> 126 126 - </Tabs> 127 127 - <div className="flex gap-4 sm:justify-end"> 128 128 - <SaveButton 129 129 - form="notification-form" 130 130 - isPending={isPending} 131 131 - isDirty={form.formState.isDirty} 132 132 - onSubmit={form.handleSubmit(onSubmit)} 133 133 - /> 134 134 - </div> 135 135 - </form> 136 136 - </Form> 137 137 - ); 138 138 - }

-96

apps/web/src/components/forms/notification/general.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import type { 6 6 - InsertNotificationWithData, 7 7 - WorkspacePlan, 8 8 - } from "@openstatus/db/src/schema"; 9 9 - import { 10 10 - FormControl, 11 11 - FormDescription, 12 12 - FormField, 13 13 - FormItem, 14 14 - FormLabel, 15 15 - FormMessage, 16 16 - Input, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - import { SectionHeader } from "../shared/section-header"; 20 20 - import { SectionDiscord } from "./provider/section-discord"; 21 21 - import { SectionEmail } from "./provider/section-email"; 22 22 - import { SectionNtfy } from "./provider/section-ntfy"; 23 23 - import { SectionOpsGenie } from "./provider/section-opsgenie"; 24 24 - import { SectionPagerDuty } from "./provider/section-pagerduty"; 25 25 - import { SectionSlack } from "./provider/section-slack"; 26 26 - import { SectionSms } from "./provider/section-sms"; 27 27 - import { SectionWebhook } from "./provider/section-webhook"; 28 28 - 29 29 - const LABELS = { 30 30 - slack: "Slack", 31 31 - discord: "Discord", 32 32 - sms: "SMS", 33 33 - pagerduty: "PagerDuty", 34 34 - opsgenie: "OpsGenie", 35 35 - email: "Email", 36 36 - ntfy: "Ntfy.sh", 37 37 - webhook: "Webhook", 38 38 - }; 39 39 - 40 40 - interface Props { 41 41 - form: UseFormReturn<InsertNotificationWithData>; 42 42 - plan: WorkspacePlan; 43 43 - } 44 44 - 45 45 - export function General({ form, plan }: Props) { 46 46 - const watchProvider = form.watch("provider"); 47 47 - 48 48 - function renderProviderSection() { 49 49 - switch (watchProvider) { 50 50 - case "slack": 51 51 - return <SectionSlack form={form} />; 52 52 - case "discord": 53 53 - return <SectionDiscord form={form} />; 54 54 - case "sms": 55 55 - return <SectionSms form={form} />; 56 56 - case "pagerduty": 57 57 - return <SectionPagerDuty form={form} plan={plan} />; 58 58 - case "opsgenie": 59 59 - return <SectionOpsGenie form={form} plan={plan} />; 60 60 - case "email": 61 61 - return <SectionEmail form={form} />; 62 62 - case "ntfy": 63 63 - return <SectionNtfy form={form} />; 64 64 - case "webhook": 65 65 - return <SectionWebhook form={form} />; 66 66 - default: 67 67 - return <div>No provider selected</div>; 68 68 - } 69 69 - } 70 70 - 71 71 - return ( 72 72 - <div className="grid gap-4 sm:grid-cols-3 sm:gap-6"> 73 73 - <SectionHeader 74 74 - title="Alert" 75 75 - description={`Update your ${LABELS[watchProvider]} settings`} 76 76 - /> 77 77 - <div className="grid gap-4 sm:col-span-2 sm:grid-cols-2"> 78 78 - <FormField 79 79 - control={form.control} 80 80 - name="name" 81 81 - render={({ field }) => ( 82 82 - <FormItem className="sm:col-span-1 sm:self-baseline"> 83 83 - <FormLabel>Name</FormLabel> 84 84 - <FormControl> 85 85 - <Input placeholder="Dev Team" {...field} /> 86 86 - </FormControl> 87 87 - <FormDescription>Define a name for the channel.</FormDescription> 88 88 - <FormMessage /> 89 89 - </FormItem> 90 90 - )} 91 91 - /> 92 92 - {renderProviderSection()} 93 93 - </div> 94 94 - </div> 95 95 - ); 96 96 - }

-48

apps/web/src/components/forms/notification/provider/actions.ts

reviewed

··· 1 1 - "use server"; 2 2 - 3 3 - import { sendTest as sendOpsGenieAlert } from "@openstatus/notification-opsgenie"; 4 4 - 5 5 - import { sendTest as sendPagerDutyAlert } from "@openstatus/notification-pagerduty"; 6 6 - 7 7 - import { sendTest as sendNtfyAlert } from "@openstatus/notification-ntfy"; 8 8 - 9 9 - import { sendTest as sendWebhookAlert } from "@openstatus/notification-webhook"; 10 10 - 11 11 - export async function sendOpsGenieTestAlert( 12 12 - apiKey: string, 13 13 - region: "us" | "eu", 14 14 - ) { 15 15 - const isSuccessfull = await sendOpsGenieAlert({ apiKey, region }); 16 16 - return isSuccessfull; 17 17 - } 18 18 - 19 19 - export async function sendPagerDutyTestAlert(integrationKey: string) { 20 20 - const isSuccessfull = await sendPagerDutyAlert({ 21 21 - integrationKey: integrationKey, 22 22 - }); 23 23 - return isSuccessfull; 24 24 - } 25 25 - 26 26 - export async function sendNtfyTestAlert({ 27 27 - topic, 28 28 - serverUrl, 29 29 - token, 30 30 - }: { 31 31 - topic: string; 32 32 - serverUrl?: string; 33 33 - token?: string; 34 34 - }) { 35 35 - const isSuccessfull = await sendNtfyAlert({ topic, serverUrl, token }); 36 36 - return isSuccessfull; 37 37 - } 38 38 - 39 39 - export async function sendWebhookTestAlert({ 40 40 - url, 41 41 - headers, 42 42 - }: { 43 43 - url: string; 44 44 - headers?: { key: string; value: string }[]; 45 45 - }) { 46 46 - const isSuccessfull = await sendWebhookAlert({ url, headers }); 47 47 - return isSuccessfull; 48 48 - }

-90

apps/web/src/components/forms/notification/provider/section-discord.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { useTransition } from "react"; 4 4 - import type { UseFormReturn } from "react-hook-form"; 5 5 - 6 6 - import type { InsertNotificationWithData } from "@openstatus/db/src/schema"; 7 7 - import { 8 8 - Button, 9 9 - FormControl, 10 10 - FormDescription, 11 11 - FormField, 12 12 - FormItem, 13 13 - FormLabel, 14 14 - FormMessage, 15 15 - Input, 16 16 - } from "@openstatus/ui"; 17 17 - 18 18 - import { LoadingAnimation } from "@/components/loading-animation"; 19 19 - import { toastAction } from "@/lib/toast"; 20 20 - import { sendTestDiscordMessage } from "@openstatus/notification-discord"; 21 21 - 22 22 - interface Props { 23 23 - form: UseFormReturn<InsertNotificationWithData>; 24 24 - } 25 25 - 26 26 - export function SectionDiscord({ form }: Props) { 27 27 - const [isTestPending, startTestTransition] = useTransition(); 28 28 - const watchUrl = form.watch("data.discord"); 29 29 - 30 30 - async function sendTestWebhookPing() { 31 31 - if (!watchUrl) return; 32 32 - startTestTransition(async () => { 33 33 - const isSuccessfull = await sendTestDiscordMessage(watchUrl); 34 34 - if (isSuccessfull) { 35 35 - toastAction("test-success"); 36 36 - } else { 37 37 - toastAction("test-error"); 38 38 - } 39 39 - }); 40 40 - } 41 41 - 42 42 - return ( 43 43 - <> 44 44 - <FormField 45 45 - control={form.control} 46 46 - name="data.discord" 47 47 - render={({ field }) => ( 48 48 - <FormItem className="sm:col-span-full"> 49 49 - <FormLabel>Webhook URL</FormLabel> 50 50 - <FormControl> 51 51 - <Input 52 52 - type="url" 53 53 - placeholder="https://discord.com/api/webhooks/{channelId}/xxx..." 54 54 - required 55 55 - {...field} 56 56 - /> 57 57 - </FormControl> 58 58 - <FormDescription className="flex items-center justify-between"> 59 59 - The data is required. 60 60 - <a 61 61 - href={"https://support.discord.com/hc/en-us/articles/228383668"} 62 62 - target="_blank" 63 63 - className="underline hover:no-underline" 64 64 - rel="noreferrer" 65 65 - > 66 66 - How to setup your Discord webhook 67 67 - </a> 68 68 - </FormDescription> 69 69 - <FormMessage /> 70 70 - </FormItem> 71 71 - )} 72 72 - /> 73 73 - <div className="col-span-full text-right"> 74 74 - <Button 75 75 - type="button" 76 76 - variant="secondary" 77 77 - className="w-full sm:w-auto" 78 78 - disabled={isTestPending || !watchUrl} 79 79 - onClick={sendTestWebhookPing} 80 80 - > 81 81 - {!isTestPending ? ( 82 82 - "Test Webhook" 83 83 - ) : ( 84 84 - <LoadingAnimation variant="inverse" /> 85 85 - )} 86 86 - </Button> 87 87 - </div> 88 88 - </> 89 89 - ); 90 90 - }

-44

apps/web/src/components/forms/notification/provider/section-email.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import type { InsertNotificationWithData } from "@openstatus/db/src/schema"; 6 6 - import { 7 7 - FormControl, 8 8 - FormDescription, 9 9 - FormField, 10 10 - FormItem, 11 11 - FormLabel, 12 12 - FormMessage, 13 13 - Input, 14 14 - } from "@openstatus/ui"; 15 15 - 16 16 - interface Props { 17 17 - form: UseFormReturn<InsertNotificationWithData>; 18 18 - } 19 19 - 20 20 - export function SectionEmail({ form }: Props) { 21 21 - return ( 22 22 - <FormField 23 23 - control={form.control} 24 24 - name="data.email" 25 25 - render={({ field }) => ( 26 26 - <FormItem className="sm:col-span-full"> 27 27 - <FormLabel>Email</FormLabel> 28 28 - <FormControl> 29 29 - <Input 30 30 - type="email" 31 31 - placeholder="dev@documenso.com" 32 32 - required 33 33 - {...field} 34 34 - /> 35 35 - </FormControl> 36 36 - <FormDescription className="flex items-center justify-between"> 37 37 - The email is required. 38 38 - </FormDescription> 39 39 - <FormMessage /> 40 40 - </FormItem> 41 41 - )} 42 42 - /> 43 43 - ); 44 44 - }

-105

apps/web/src/components/forms/notification/provider/section-ntfy.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { toastAction } from "@/lib/toast"; 4 4 - import type { UseFormReturn } from "react-hook-form"; 5 5 - 6 6 - import { LoadingAnimation } from "@/components/loading-animation"; 7 7 - import type { InsertNotificationWithData } from "@openstatus/db/src/schema"; 8 8 - import { 9 9 - Button, 10 10 - FormControl, 11 11 - FormField, 12 12 - FormItem, 13 13 - FormLabel, 14 14 - FormMessage, 15 15 - Input, 16 16 - } from "@openstatus/ui"; 17 17 - import { useTransition } from "react"; 18 18 - import { sendNtfyTestAlert } from "./actions"; 19 19 - 20 20 - interface Props { 21 21 - form: UseFormReturn<InsertNotificationWithData>; 22 22 - } 23 23 - 24 24 - export function SectionNtfy({ form }: Props) { 25 25 - const [isTestPending, startTestTransition] = useTransition(); 26 26 - 27 27 - const watchTopic = form.watch("data.ntfy.topic"); 28 28 - const watchUrl = form.watch("data.ntfy.serverUrl"); 29 29 - const watchToken = form.watch("data.ntfy.token"); 30 30 - 31 31 - async function sendTestAlert() { 32 32 - if (!watchTopic) return; 33 33 - startTestTransition(async () => { 34 34 - const isSuccessfull = await sendNtfyTestAlert({ 35 35 - topic: watchTopic, 36 36 - serverUrl: watchUrl || undefined, 37 37 - token: watchToken || undefined, 38 38 - }); 39 39 - if (isSuccessfull) { 40 40 - toastAction("test-success"); 41 41 - } else { 42 42 - toastAction("test-error"); 43 43 - } 44 44 - }); 45 45 - } 46 46 - 47 47 - return ( 48 48 - <> 49 49 - <FormField 50 50 - control={form.control} 51 51 - name="data.ntfy.topic" 52 52 - render={({ field }) => ( 53 53 - <FormItem className="sm:col-span-full"> 54 54 - <FormLabel>Topic</FormLabel> 55 55 - <FormControl> 56 56 - <Input type="text" placeholder="your-topic" required {...field} /> 57 57 - </FormControl> 58 58 - <FormMessage /> 59 59 - </FormItem> 60 60 - )} 61 61 - /> 62 62 - <FormField 63 63 - control={form.control} 64 64 - name="data.ntfy.serverUrl" 65 65 - render={({ field }) => ( 66 66 - <FormItem className="sm:col-span-full"> 67 67 - <FormLabel>URL</FormLabel> 68 68 - <FormControl> 69 69 - <Input type="url" placeholder="https://ntfy.sh" {...field} /> 70 70 - </FormControl> 71 71 - <FormMessage /> 72 72 - </FormItem> 73 73 - )} 74 74 - /> 75 75 - <FormField 76 76 - control={form.control} 77 77 - name="data.ntfy.token" 78 78 - render={({ field }) => ( 79 79 - <FormItem className="sm:col-span-full"> 80 80 - <FormLabel>Bearer Token</FormLabel> 81 81 - <FormControl> 82 82 - <Input type="url" placeholder="tk_iloveopenstatus" {...field} /> 83 83 - </FormControl> 84 84 - <FormMessage /> 85 85 - </FormItem> 86 86 - )} 87 87 - /> 88 88 - <div className="col-span-full text-right"> 89 89 - <Button 90 90 - type="button" 91 91 - variant="secondary" 92 92 - className="w-full sm:w-auto" 93 93 - disabled={isTestPending || !watchTopic} 94 94 - onClick={sendTestAlert} 95 95 - > 96 96 - {!isTestPending ? ( 97 97 - "Test Webhook" 98 98 - ) : ( 99 99 - <LoadingAnimation variant="inverse" /> 100 100 - )} 101 101 - </Button> 102 102 - </div> 103 103 - </> 104 104 - ); 105 105 - }

-124

apps/web/src/components/forms/notification/provider/section-opsgenie.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import { LoadingAnimation } from "@/components/loading-animation"; 6 6 - import { toastAction } from "@/lib/toast"; 7 7 - import type { 8 8 - InsertNotificationWithData, 9 9 - WorkspacePlan, 10 10 - } from "@openstatus/db/src/schema"; 11 11 - import { 12 12 - Button, 13 13 - FormControl, 14 14 - FormDescription, 15 15 - FormField, 16 16 - FormItem, 17 17 - FormLabel, 18 18 - FormMessage, 19 19 - Input, 20 20 - Select, 21 21 - SelectContent, 22 22 - SelectItem, 23 23 - SelectTrigger, 24 24 - SelectValue, 25 25 - } from "@openstatus/ui"; 26 26 - import { useTransition } from "react"; 27 27 - 28 28 - import { sendOpsGenieTestAlert } from "./actions"; 29 29 - 30 30 - interface Props { 31 31 - form: UseFormReturn<InsertNotificationWithData>; 32 32 - plan: WorkspacePlan; 33 33 - } 34 34 - 35 35 - export function SectionOpsGenie({ form }: Props) { 36 36 - const [isTestPending, startTestTransition] = useTransition(); 37 37 - const watchApiKey = form.watch("data.opsgenie.apiKey"); 38 38 - const watchRegion = form.watch("data.opsgenie.region"); 39 39 - 40 40 - async function sendTestAlert() { 41 41 - if (!watchApiKey || !watchRegion) return; 42 42 - startTestTransition(async () => { 43 43 - const isSuccessfull = await sendOpsGenieTestAlert( 44 44 - watchApiKey, 45 45 - watchRegion, 46 46 - ); 47 47 - if (isSuccessfull) { 48 48 - toastAction("test-success"); 49 49 - } else { 50 50 - toastAction("test-error"); 51 51 - } 52 52 - }); 53 53 - } 54 54 - 55 55 - return ( 56 56 - <> 57 57 - <FormField 58 58 - control={form.control} 59 59 - name="data.opsgenie.apiKey" 60 60 - render={({ field }) => ( 61 61 - <FormItem className="sm:col-span-full"> 62 62 - <FormLabel>API Key</FormLabel> 63 63 - <FormControl> 64 64 - <Input placeholder={"xxx-yyy-zzz"} {...field} /> 65 65 - </FormControl> 66 66 - <FormDescription className="flex items-center justify-between"> 67 67 - The API key is required. 68 68 - </FormDescription> 69 69 - <FormMessage /> 70 70 - </FormItem> 71 71 - )} 72 72 - /> 73 73 - <FormField 74 74 - control={form.control} 75 75 - name="data.opsgenie.region" 76 76 - render={({ field }) => ( 77 77 - <FormItem className="sm:col-span-full"> 78 78 - <FormLabel>Region</FormLabel> 79 79 - <FormControl> 80 80 - <Select onValueChange={field.onChange} defaultValue={field.value}> 81 81 - <FormControl> 82 82 - <SelectTrigger> 83 83 - <SelectValue placeholder="Select a region" /> 84 84 - </SelectTrigger> 85 85 - </FormControl> 86 86 - <SelectContent> 87 87 - <SelectItem value="us">US</SelectItem> 88 88 - <SelectItem value="eu">EU</SelectItem> 89 89 - </SelectContent> 90 90 - </Select> 91 91 - </FormControl> 92 92 - <FormDescription className="flex items-center justify-between"> 93 93 - The region is required. 94 94 - <a 95 95 - href="https://docs.openstatus.dev/synthetic/features/notification/opsgenie" 96 96 - target="_blank" 97 97 - className="underline hover:no-underline" 98 98 - rel="noreferrer" 99 99 - > 100 100 - How to setup your OpsGenie. 101 101 - </a> 102 102 - </FormDescription> 103 103 - <FormMessage /> 104 104 - </FormItem> 105 105 - )} 106 106 - /> 107 107 - <div className="col-span-full text-right"> 108 108 - <Button 109 109 - type="button" 110 110 - variant="secondary" 111 111 - className="w-full sm:w-auto" 112 112 - disabled={isTestPending || !watchApiKey || !watchRegion} 113 113 - onClick={sendTestAlert} 114 114 - > 115 115 - {!isTestPending ? ( 116 116 - "Test Alert" 117 117 - ) : ( 118 118 - <LoadingAnimation variant="inverse" /> 119 119 - )} 120 120 - </Button> 121 121 - </div> 122 122 - </> 123 123 - ); 124 124 - }

-65

apps/web/src/components/forms/notification/provider/section-pagerduty.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import { LoadingAnimation } from "@/components/loading-animation"; 6 6 - import { toastAction } from "@/lib/toast"; 7 7 - import type { 8 8 - InsertNotificationWithData, 9 9 - WorkspacePlan, 10 10 - } from "@openstatus/db/src/schema"; 11 11 - import { PagerDutySchema } from "@openstatus/notification-pagerduty"; 12 12 - import { Button } from "@openstatus/ui"; 13 13 - import { useSearchParams } from "next/navigation"; 14 14 - import { useTransition } from "react"; 15 15 - import { sendPagerDutyTestAlert } from "./actions"; 16 16 - 17 17 - interface Props { 18 18 - form: UseFormReturn<InsertNotificationWithData>; 19 19 - plan: WorkspacePlan; 20 20 - } 21 21 - 22 22 - export function SectionPagerDuty({ form }: Props) { 23 23 - const [isTestPending, startTestTransition] = useTransition(); 24 24 - const searchParams = useSearchParams(); 25 25 - 26 26 - const config = searchParams.get("config") || form.getValues("data.pagerduty"); 27 27 - 28 28 - const result = PagerDutySchema.safeParse(JSON.parse(config || "")); 29 29 - 30 30 - if (result.success === false) { 31 31 - return null; 32 32 - } 33 33 - 34 34 - const data = result.data; 35 35 - 36 36 - if (config) { 37 37 - form.setValue("data.pagerduty", config); 38 38 - } 39 39 - 40 40 - async function sendTestAlert() { 41 41 - startTestTransition(async () => { 42 42 - const isSuccessfull = await sendPagerDutyTestAlert( 43 43 - data.integration_keys[0].integration_key, 44 44 - ); 45 45 - if (isSuccessfull) { 46 46 - toastAction("test-success"); 47 47 - } else { 48 48 - toastAction("test-error"); 49 49 - } 50 50 - }); 51 51 - } 52 52 - 53 53 - return ( 54 54 - <div className="col-span-full text-right"> 55 55 - <Button 56 56 - type="button" 57 57 - variant="secondary" 58 58 - className="w-full sm:w-auto" 59 59 - onClick={sendTestAlert} 60 60 - > 61 61 - {!isTestPending ? "Test Alert" : <LoadingAnimation variant="inverse" />} 62 62 - </Button> 63 63 - </div> 64 64 - ); 65 65 - }

-92

apps/web/src/components/forms/notification/provider/section-slack.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { useTransition } from "react"; 4 4 - import type { UseFormReturn } from "react-hook-form"; 5 5 - 6 6 - import type { InsertNotificationWithData } from "@openstatus/db/src/schema"; 7 7 - import { 8 8 - Button, 9 9 - FormControl, 10 10 - FormDescription, 11 11 - FormField, 12 12 - FormItem, 13 13 - FormLabel, 14 14 - FormMessage, 15 15 - Input, 16 16 - } from "@openstatus/ui"; 17 17 - 18 18 - import { LoadingAnimation } from "@/components/loading-animation"; 19 19 - import { toastAction } from "@/lib/toast"; 20 20 - import { sendTestSlackMessage } from "@openstatus/notification-slack"; 21 21 - 22 22 - interface Props { 23 23 - form: UseFormReturn<InsertNotificationWithData>; 24 24 - } 25 25 - 26 26 - export function SectionSlack({ form }: Props) { 27 27 - const [isTestPending, startTestTransition] = useTransition(); 28 28 - const watchUrl = form.watch("data.slack"); 29 29 - 30 30 - async function sendTestWebhookPing() { 31 31 - if (!watchUrl) return; 32 32 - startTestTransition(async () => { 33 33 - const isSuccessfull = await sendTestSlackMessage(watchUrl); 34 34 - if (isSuccessfull) { 35 35 - toastAction("test-success"); 36 36 - } else { 37 37 - toastAction("test-error"); 38 38 - } 39 39 - }); 40 40 - } 41 41 - 42 42 - return ( 43 43 - <> 44 44 - <FormField 45 45 - control={form.control} 46 46 - name="data.slack" 47 47 - render={({ field }) => ( 48 48 - <FormItem className="sm:col-span-full"> 49 49 - <FormLabel>Webhook URL</FormLabel> 50 50 - <FormControl> 51 51 - <Input 52 52 - type="url" 53 53 - placeholder="https://hooks.slack.com/services/xxx..." 54 54 - required 55 55 - {...field} 56 56 - /> 57 57 - </FormControl> 58 58 - <FormDescription className="flex items-center justify-between"> 59 59 - The data is required. 60 60 - <a 61 61 - href={ 62 62 - "https://api.slack.com/messaging/webhooks#getting_started" 63 63 - } 64 64 - target="_blank" 65 65 - className="underline hover:no-underline" 66 66 - rel="noreferrer" 67 67 - > 68 68 - How to setup your Slack webhook 69 69 - </a> 70 70 - </FormDescription> 71 71 - <FormMessage /> 72 72 - </FormItem> 73 73 - )} 74 74 - /> 75 75 - <div className="col-span-full text-right"> 76 76 - <Button 77 77 - type="button" 78 78 - variant="secondary" 79 79 - className="w-full sm:w-auto" 80 80 - disabled={isTestPending || !watchUrl} 81 81 - onClick={sendTestWebhookPing} 82 82 - > 83 83 - {!isTestPending ? ( 84 84 - "Test Webhook" 85 85 - ) : ( 86 86 - <LoadingAnimation variant="inverse" /> 87 87 - )} 88 88 - </Button> 89 89 - </div> 90 90 - </> 91 91 - ); 92 92 - }

-39

apps/web/src/components/forms/notification/provider/section-sms.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import type { InsertNotificationWithData } from "@openstatus/db/src/schema"; 6 6 - import { 7 7 - FormControl, 8 8 - FormDescription, 9 9 - FormField, 10 10 - FormItem, 11 11 - FormLabel, 12 12 - FormMessage, 13 13 - Input, 14 14 - } from "@openstatus/ui"; 15 15 - 16 16 - interface Props { 17 17 - form: UseFormReturn<InsertNotificationWithData>; 18 18 - } 19 19 - 20 20 - export function SectionSms({ form }: Props) { 21 21 - return ( 22 22 - <FormField 23 23 - control={form.control} 24 24 - name="data.sms" 25 25 - render={({ field }) => ( 26 26 - <FormItem className="sm:col-span-full"> 27 27 - <FormLabel>Phone Number</FormLabel> 28 28 - <FormControl> 29 29 - <Input type="tel" placeholder="+1234567890" required {...field} /> 30 30 - </FormControl> 31 31 - <FormDescription className="flex items-center justify-between"> 32 32 - The phone number is required. 33 33 - </FormDescription> 34 34 - <FormMessage /> 35 35 - </FormItem> 36 36 - )} 37 37 - /> 38 38 - ); 39 39 - }

-137

apps/web/src/components/forms/notification/provider/section-webhook.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { toastAction } from "@/lib/toast"; 4 4 - import { type UseFormReturn, useFieldArray } from "react-hook-form"; 5 5 - 6 6 - import { LoadingAnimation } from "@/components/loading-animation"; 7 7 - import type { InsertNotificationWithData } from "@openstatus/db/src/schema"; 8 8 - import { 9 9 - Button, 10 10 - FormControl, 11 11 - FormField, 12 12 - FormItem, 13 13 - FormLabel, 14 14 - FormMessage, 15 15 - Input, 16 16 - } from "@openstatus/ui"; 17 17 - import { X } from "lucide-react"; 18 18 - import { useTransition } from "react"; 19 19 - import { sendWebhookTestAlert } from "./actions"; 20 20 - 21 21 - interface Props { 22 22 - form: UseFormReturn<InsertNotificationWithData>; 23 23 - } 24 24 - 25 25 - export function SectionWebhook({ form }: Props) { 26 26 - const [isTestPending, startTestTransition] = useTransition(); 27 27 - 28 28 - const { fields, append, remove } = useFieldArray({ 29 29 - name: "data.webhook.headers", 30 30 - control: form.control, 31 31 - }); 32 32 - 33 33 - const watchUrl = form.watch("data.webhook.endpoint"); 34 34 - const watchHeaders = form.watch("data.webhook.headers"); 35 35 - 36 36 - async function sendTestAlert() { 37 37 - if (!watchUrl) return; 38 38 - startTestTransition(async () => { 39 39 - const isSuccessful = await sendWebhookTestAlert({ 40 40 - url: watchUrl, 41 41 - headers: watchHeaders, 42 42 - }); 43 43 - if (isSuccessful) { 44 44 - toastAction("test-success"); 45 45 - } else { 46 46 - toastAction("test-error"); 47 47 - } 48 48 - }); 49 49 - } 50 50 - 51 51 - return ( 52 52 - <> 53 53 - <FormField 54 54 - control={form.control} 55 55 - name="data.webhook.endpoint" 56 56 - render={({ field }) => ( 57 57 - <FormItem className="sm:col-span-full"> 58 58 - <FormLabel>URL</FormLabel> 59 59 - <FormControl> 60 60 - <Input 61 61 - type="url" 62 62 - placeholder="https://your-webhook-url" 63 63 - {...field} 64 64 - /> 65 65 - </FormControl> 66 66 - <FormMessage /> 67 67 - </FormItem> 68 68 - )} 69 69 - /> 70 70 - 71 71 - <div className="space-y-2 sm:col-span-full"> 72 72 - <FormLabel>Request Header</FormLabel> 73 73 - {fields.map((field, index) => ( 74 74 - <div key={field.id} className="grid grid-cols-6 gap-4"> 75 75 - <FormField 76 76 - control={form.control} 77 77 - name={`data.webhook.headers.${index}.key`} 78 78 - render={({ field }) => ( 79 79 - <FormItem className="col-span-2"> 80 80 - <FormControl> 81 81 - <Input placeholder="key" {...field} /> 82 82 - </FormControl> 83 83 - </FormItem> 84 84 - )} 85 85 - /> 86 86 - <div className="col-span-4 flex items-center space-x-2"> 87 87 - <FormField 88 88 - control={form.control} 89 89 - name={`data.webhook.headers.${index}.value`} 90 90 - render={({ field }) => ( 91 91 - <FormItem className="w-full"> 92 92 - <FormControl> 93 93 - <Input placeholder="value" {...field} /> 94 94 - </FormControl> 95 95 - </FormItem> 96 96 - )} 97 97 - /> 98 98 - <Button 99 99 - size="icon" 100 100 - variant="ghost" 101 101 - type="button" 102 102 - onClick={() => remove(index)} 103 103 - > 104 104 - <X className="h-4 w-4" /> 105 105 - </Button> 106 106 - </div> 107 107 - </div> 108 108 - ))} 109 109 - <div> 110 110 - <Button 111 111 - type="button" 112 112 - variant="outline" 113 113 - onClick={() => append({ key: "", value: "" })} 114 114 - > 115 115 - Add Custom Header 116 116 - </Button> 117 117 - </div> 118 118 - </div> 119 119 - 120 120 - <div className="col-span-full text-right"> 121 121 - <Button 122 122 - type="button" 123 123 - variant="secondary" 124 124 - className="w-full sm:w-auto" 125 125 - disabled={isTestPending} 126 126 - onClick={sendTestAlert} 127 127 - > 128 128 - {!isTestPending ? ( 129 129 - "Test Webhook" 130 130 - ) : ( 131 131 - <LoadingAnimation variant="inverse" /> 132 132 - )} 133 133 - </Button> 134 134 - </div> 135 135 - </> 136 136 - ); 137 137 - }

-89

apps/web/src/components/forms/notification/section-connect.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import type { UseFormReturn } from "react-hook-form"; 3 3 - 4 4 - import type { 5 5 - InsertNotificationWithData, 6 6 - Monitor, 7 7 - } from "@openstatus/db/src/schema"; 8 8 - import { 9 9 - FormControl, 10 10 - FormDescription, 11 11 - FormField, 12 12 - FormItem, 13 13 - FormLabel, 14 14 - FormMessage, 15 15 - } from "@openstatus/ui"; 16 16 - 17 17 - import { CheckboxLabel } from "../shared/checkbox-label"; 18 18 - 19 19 - interface Props { 20 20 - form: UseFormReturn<InsertNotificationWithData>; 21 21 - monitors?: Monitor[]; 22 22 - } 23 23 - 24 24 - export function SectionConnect({ form, monitors }: Props) { 25 25 - return ( 26 26 - <div className="grid w-full gap-4"> 27 27 - <div className="flex flex-col gap-3"> 28 28 - <FormField 29 29 - control={form.control} 30 30 - name="monitors" 31 31 - render={() => ( 32 32 - <FormItem> 33 33 - <div className="mb-4"> 34 34 - <FormLabel>Monitors</FormLabel> 35 35 - <FormDescription> 36 36 - Attach the notification to specific monitors. 37 37 - </FormDescription> 38 38 - </div> 39 39 - <div className="grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-2 md:grid-cols-3"> 40 40 - {monitors?.map((item) => ( 41 41 - <FormField 42 42 - key={item.id} 43 43 - control={form.control} 44 44 - name="monitors" 45 45 - render={({ field }) => { 46 46 - return ( 47 47 - <FormItem key={item.id} className="h-full w-full"> 48 48 - <FormControl className="w-full"> 49 49 - <CheckboxLabel 50 50 - id={String(item.id)} 51 51 - name="monitor" 52 52 - checked={field.value?.includes(item.id)} 53 53 - onCheckedChange={(checked) => { 54 54 - return checked 55 55 - ? field.onChange([ 56 56 - ...(field.value || []), 57 57 - item.id, 58 58 - ]) 59 59 - : field.onChange( 60 60 - field.value?.filter( 61 61 - (value) => value !== item.id, 62 62 - ), 63 63 - ); 64 64 - }} 65 65 - className="flex-col items-start truncate" 66 66 - > 67 67 - <span>{item.name}</span> 68 68 - <span className="font-normal text-muted-foreground text-sm"> 69 69 - {item.url} 70 70 - </span> 71 71 - </CheckboxLabel> 72 72 - </FormControl> 73 73 - </FormItem> 74 74 - ); 75 75 - }} 76 76 - /> 77 77 - ))} 78 78 - </div> 79 79 - {!monitors || monitors.length === 0 ? ( 80 80 - <FormDescription>Missing monitors.</FormDescription> 81 81 - ) : null} 82 82 - <FormMessage /> 83 83 - </FormItem> 84 84 - )} 85 85 - /> 86 86 - </div> 87 87 - </div> 88 88 - ); 89 89 - }

-35

apps/web/src/components/forms/skeleton-form.tsx

reviewed

··· 1 1 - import { Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - export function SkeletonForm() { 4 4 - return ( 5 5 - <div className="grid w-full gap-6"> 6 6 - <div className="col-span-full grid gap-4 sm:grid-cols-3"> 7 7 - <div className="flex flex-col gap-2"> 8 8 - <Skeleton className="h-6 w-24" /> 9 9 - <Skeleton className="h-6 w-40" /> 10 10 - </div> 11 11 - <div className="grid w-full gap-6 sm:col-span-2"> 12 12 - <div className="space-y-2"> 13 13 - <Skeleton className="h-6 w-24" /> 14 14 - <Skeleton className="h-9 w-full" /> 15 15 - <Skeleton className="h-5 w-64" /> 16 16 - </div> 17 17 - <div className="space-y-2"> 18 18 - <Skeleton className="h-6 w-24" /> 19 19 - <Skeleton className="h-9 w-full" /> 20 20 - <Skeleton className="h-5 w-64" /> 21 21 - </div> 22 22 - <div className="space-y-2"> 23 23 - <Skeleton className="h-6 w-24" /> 24 24 - <Skeleton className="h-9 w-full" /> 25 25 - <Skeleton className="h-5 w-64" /> 26 26 - </div> 27 27 - </div> 28 28 - </div> 29 29 - <Skeleton className="h-9 w-full" /> 30 30 - <div className="flex space-y-2 sm:col-span-full sm:justify-end"> 31 31 - <Skeleton className="h-9 w-full sm:w-28" /> 32 32 - </div> 33 33 - </div> 34 34 - ); 35 35 - }

-213

apps/web/src/components/forms/status-page/form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { usePathname, useRouter } from "next/navigation"; 5 5 - import { useCallback, useEffect, useTransition } from "react"; 6 6 - import { useForm } from "react-hook-form"; 7 7 - 8 8 - import { insertPageSchema } from "@openstatus/db/src/schema"; 9 9 - import type { 10 10 - InsertPage, 11 11 - Monitor, 12 12 - WorkspacePlan, 13 13 - } from "@openstatus/db/src/schema"; 14 14 - import { Badge, Form } from "@openstatus/ui"; 15 15 - 16 16 - import { 17 17 - Tabs, 18 18 - TabsContent, 19 19 - TabsList, 20 20 - TabsTrigger, 21 21 - } from "@/components/dashboard/tabs"; 22 22 - import { useDebounce } from "@/hooks/use-debounce"; 23 23 - import { toast, toastAction } from "@/lib/toast"; 24 24 - import { slugify } from "@/lib/utils"; 25 25 - import { api } from "@/trpc/client"; 26 26 - import { SaveButton } from "../shared/save-button"; 27 27 - import { General } from "./general"; 28 28 - import { SectionAdvanced } from "./section-advanced"; 29 29 - import { SectionDanger } from "./section-danger"; 30 30 - import { SectionMonitor } from "./section-monitor"; 31 31 - import { SectionVisibility } from "./section-visibility"; 32 32 - 33 33 - interface Props { 34 34 - defaultSection?: string; 35 35 - defaultValues?: Omit<InsertPage, "configuration">; 36 36 - allMonitors?: Monitor[]; 37 37 - /** 38 38 - * gives the possibility to check all the monitors 39 39 - */ 40 40 - checkAllMonitors?: boolean; 41 41 - /** 42 42 - * on submit, allows to push a url 43 43 - */ 44 44 - nextUrl?: string; 45 45 - plan: WorkspacePlan; 46 46 - workspaceSlug: string; 47 47 - } 48 48 - 49 49 - export function StatusPageForm({ 50 50 - defaultSection, 51 51 - defaultValues, 52 52 - allMonitors, 53 53 - checkAllMonitors, 54 54 - nextUrl, 55 55 - plan, 56 56 - workspaceSlug, 57 57 - }: Props) { 58 58 - const form = useForm<Omit<InsertPage, "configuration">>({ 59 59 - resolver: zodResolver(insertPageSchema), 60 60 - defaultValues: { 61 61 - title: defaultValues?.title || "", // FIXME: you can save a page without title, causing unexpected slug behavior 62 62 - slug: defaultValues?.slug || "", 63 63 - description: defaultValues?.description || "", 64 64 - workspaceId: defaultValues?.workspaceId || 0, 65 65 - id: defaultValues?.id || 0, 66 66 - customDomain: defaultValues?.customDomain || "", 67 67 - icon: defaultValues?.icon || "", 68 68 - password: defaultValues?.password || "", 69 69 - passwordProtected: defaultValues?.passwordProtected || false, 70 70 - showMonitorValues: defaultValues?.showMonitorValues || true, 71 71 - monitors: 72 72 - checkAllMonitors && allMonitors 73 73 - ? allMonitors.map(({ id }) => ({ monitorId: id, order: 0 })) 74 74 - : defaultValues?.monitors ?? [], 75 75 - }, 76 76 - }); 77 77 - const pathname = usePathname(); 78 78 - const router = useRouter(); 79 79 - const [isPending, startTransition] = useTransition(); 80 80 - const watchSlug = form.watch("slug"); 81 81 - const watchTitle = form.watch("title"); 82 82 - const debouncedSlug = useDebounce(watchSlug, 1000); // using debounce to not exhaust the server 83 83 - 84 84 - const checkUniqueSlug = useCallback(async () => { 85 85 - const isUnique = await api.page.getSlugUniqueness.query({ 86 86 - slug: debouncedSlug, 87 87 - }); 88 88 - return ( 89 89 - isUnique || 90 90 - debouncedSlug.toLowerCase() === defaultValues?.slug.toLowerCase() 91 91 - ); 92 92 - }, [debouncedSlug, defaultValues?.slug]); 93 93 - 94 94 - useEffect(() => { 95 95 - async function watchSlugChanges() { 96 96 - const isUnique = await checkUniqueSlug(); 97 97 - if (!isUnique) { 98 98 - form.setError("slug", { 99 99 - message: "Already taken. Please select another slug.", 100 100 - }); 101 101 - } else { 102 102 - form.clearErrors("slug"); 103 103 - } 104 104 - } 105 105 - 106 106 - void watchSlugChanges(); 107 107 - // eslint-disable-next-line react-hooks/exhaustive-deps 108 108 - }, [checkUniqueSlug, form.clearErrors, form.setError]); 109 109 - 110 110 - useEffect(() => { 111 111 - if (!defaultValues?.title) { 112 112 - form.setValue("slug", slugify(watchTitle)); 113 113 - } 114 114 - }, [watchTitle, form, defaultValues?.title]); 115 115 - 116 116 - const onSubmit = async ({ ...props }: InsertPage) => { 117 117 - startTransition(async () => { 118 118 - try { 119 119 - const isUnique = await checkUniqueSlug(); 120 120 - if (!isUnique) { 121 121 - // the user will already have the "error" message - we include a toast as well 122 122 - toastAction("unique-slug"); 123 123 - } else { 124 124 - if (defaultValues) { 125 125 - await api.page.update.mutate(props); 126 126 - } else { 127 127 - await api.page.create.mutate(props); 128 128 - } 129 129 - 130 130 - toast.success("Saved successfully.", { 131 131 - description: "Your status page is ready to go.", 132 132 - action: { 133 133 - label: "Visit", 134 134 - onClick: () => 135 135 - window.open(`https://${props.slug}.openstatus.dev`, "_blank") 136 136 - ?.location, 137 137 - }, 138 138 - }); 139 139 - // otherwise, the form will stay dirty - keepValues is used to keep the current values in the form 140 140 - form.reset({}, { keepValues: true }); 141 141 - if (nextUrl) { 142 142 - router.push(nextUrl); 143 143 - } 144 144 - router.refresh(); 145 145 - } 146 146 - } catch { 147 147 - toastAction("error"); 148 148 - } 149 149 - }); 150 150 - }; 151 151 - 152 152 - function onValueChange(value: string) { 153 153 - // REMINDER: we are not merging the searchParams here 154 154 - // we are just setting the section to allow refreshing the page 155 155 - const params = new URLSearchParams(); 156 156 - params.set("section", value); 157 157 - router.push(`${pathname}?${params.toString()}`); 158 158 - } 159 159 - 160 160 - return ( 161 161 - <Form {...form}> 162 162 - <form 163 163 - onSubmit={async (e) => { 164 164 - e.preventDefault(); 165 165 - void form.handleSubmit(onSubmit)(e); 166 166 - }} 167 167 - className="grid w-full gap-6" 168 168 - > 169 169 - <General form={form} /> 170 170 - <Tabs 171 171 - defaultValue={defaultSection} 172 172 - className="w-full" 173 173 - onValueChange={onValueChange} 174 174 - > 175 175 - <TabsList> 176 176 - <TabsTrigger value="monitors"> 177 177 - Monitors{" "} 178 178 - {defaultValues?.monitors?.length ? ( 179 179 - <Badge variant="secondary" className="ml-1"> 180 180 - {defaultValues.monitors.length} 181 181 - </Badge> 182 182 - ) : null} 183 183 - </TabsTrigger> 184 184 - <TabsTrigger value="advanced">Advanced</TabsTrigger> 185 185 - <TabsTrigger value="visibility">Visibility</TabsTrigger> 186 186 - {defaultValues?.id ? ( 187 187 - <TabsTrigger value="danger">Danger</TabsTrigger> 188 188 - ) : null} 189 189 - </TabsList> 190 190 - <TabsContent value="monitors"> 191 191 - <SectionMonitor form={form} monitors={allMonitors} /> 192 192 - </TabsContent> 193 193 - <TabsContent value="advanced"> 194 194 - <SectionAdvanced {...{ form }} /> 195 195 - </TabsContent> 196 196 - <TabsContent value="visibility"> 197 197 - <SectionVisibility {...{ form, plan, workspaceSlug }} /> 198 198 - </TabsContent> 199 199 - {defaultValues?.id ? ( 200 200 - <TabsContent value="danger"> 201 201 - <SectionDanger pageId={defaultValues.id} /> 202 202 - </TabsContent> 203 203 - ) : null} 204 204 - </Tabs> 205 205 - <SaveButton 206 206 - isPending={isPending} 207 207 - isDirty={form.formState.isDirty} 208 208 - onSubmit={form.handleSubmit(onSubmit)} 209 209 - /> 210 210 - </form> 211 211 - </Form> 212 212 - ); 213 213 - }

-67

apps/web/src/components/forms/status-page/general.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import type { UseFormReturn } from "react-hook-form"; 3 3 - 4 4 - import type { InsertPage } from "@openstatus/db/src/schema"; 5 5 - import { 6 6 - FormControl, 7 7 - FormDescription, 8 8 - FormField, 9 9 - FormItem, 10 10 - FormLabel, 11 11 - FormMessage, 12 12 - Input, 13 13 - InputWithAddons, 14 14 - } from "@openstatus/ui"; 15 15 - 16 16 - import { SectionHeader } from "../shared/section-header"; 17 17 - 18 18 - interface Props { 19 19 - form: UseFormReturn<InsertPage>; 20 20 - } 21 21 - 22 22 - export function General({ form }: Props) { 23 23 - return ( 24 24 - <div className="grid gap-4 sm:grid-cols-3 sm:gap-6"> 25 25 - <SectionHeader 26 26 - title="Basic information" 27 27 - description="The public status page to update your users on service uptime." 28 28 - /> 29 29 - <div className="grid gap-4 sm:col-span-2"> 30 30 - <FormField 31 31 - control={form.control} 32 32 - name="title" 33 33 - render={({ field }) => ( 34 34 - <FormItem> 35 35 - <FormLabel>Title</FormLabel> 36 36 - <FormControl> 37 37 - <Input placeholder="Documenso Status" {...field} /> 38 38 - </FormControl> 39 39 - <FormDescription>The title of your page.</FormDescription> 40 40 - <FormMessage /> 41 41 - </FormItem> 42 42 - )} 43 43 - /> 44 44 - <FormField 45 45 - control={form.control} 46 46 - name="slug" 47 47 - render={({ field }) => ( 48 48 - <FormItem> 49 49 - <FormLabel>Slug</FormLabel> 50 50 - <FormControl> 51 51 - <InputWithAddons 52 52 - placeholder="documenso" 53 53 - trailing={".openstatus.dev"} 54 54 - {...field} 55 55 - /> 56 56 - </FormControl> 57 57 - <FormDescription> 58 58 - The subdomain for your status page. At least 3 chars. 59 59 - </FormDescription> 60 60 - <FormMessage /> 61 61 - </FormItem> 62 62 - )} 63 63 - /> 64 64 - </div> 65 65 - </div> 66 66 - ); 67 67 - }

-238

apps/web/src/components/forms/status-page/section-advanced.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { PutBlobResult } from "@vercel/blob"; 4 4 - import Image from "next/image"; 5 5 - import * as React from "react"; 6 6 - import { useRef } from "react"; 7 7 - import type { UseFormReturn } from "react-hook-form"; 8 8 - 9 9 - import type { InsertPage } from "@openstatus/db/src/schema"; 10 10 - import { 11 11 - AlertDialog, 12 12 - AlertDialogAction, 13 13 - AlertDialogCancel, 14 14 - AlertDialogContent, 15 15 - AlertDialogDescription, 16 16 - AlertDialogFooter, 17 17 - AlertDialogHeader, 18 18 - AlertDialogTitle, 19 19 - Button, 20 20 - Checkbox, 21 21 - FormControl, 22 22 - FormDescription, 23 23 - FormField, 24 24 - FormItem, 25 25 - FormLabel, 26 26 - FormMessage, 27 27 - Input, 28 28 - } from "@openstatus/ui"; 29 29 - 30 30 - import { BarDescription } from "@/components/tracker/tracker"; 31 31 - import { MousePointer2 } from "lucide-react"; 32 32 - import { SectionHeader } from "../shared/section-header"; 33 33 - 34 34 - interface Props { 35 35 - form: UseFormReturn<InsertPage>; 36 36 - } 37 37 - 38 38 - export function SectionAdvanced({ form }: Props) { 39 39 - const inputFileRef = useRef<HTMLInputElement>(null); 40 40 - const [open, setOpen] = React.useState(false); 41 41 - const [file, setFile] = React.useState<File | null>(null); 42 42 - 43 43 - /** 44 44 - * Determine the width and height of the uploaded image - it ideally is a square 45 45 - */ 46 46 - const getFileDimensions = async (file: File) => { 47 47 - const img = document.createElement("img"); 48 48 - img.src = URL.createObjectURL(file); 49 49 - await img.decode(); 50 50 - return { width: img.naturalWidth, height: img.naturalHeight }; 51 51 - }; 52 52 - 53 53 - const handleChange = async (file: FileList | null) => { 54 54 - if (!file || file.length === 0) { 55 55 - return; 56 56 - } 57 57 - 58 58 - const { height, width } = await getFileDimensions(file[0]); 59 59 - 60 60 - // remove rounding issues from transformations 61 61 - if (!(Math.abs(height - width) <= 1)) { 62 62 - setOpen(true); 63 63 - setFile(file[0]); 64 64 - return; 65 65 - } 66 66 - 67 67 - const newblob = await handleUpload(file[0]); 68 68 - form.setValue("icon", newblob.url); 69 69 - }; 70 70 - 71 71 - const handleUpload = async (file: File) => { 72 72 - const response = await fetch(`/api/upload?filename=${file.name}`, { 73 73 - method: "POST", 74 74 - body: file, 75 75 - }); 76 76 - 77 77 - const newblob = (await response.json()) as PutBlobResult; 78 78 - return newblob; 79 79 - }; 80 80 - 81 81 - const handleCancel = () => { 82 82 - // biome-ignore lint/suspicious/noAssignInExpressions: <explanation> 83 83 - inputFileRef.current?.value && (inputFileRef.current.value = ""); 84 84 - }; 85 85 - 86 86 - const handleConfirm = async () => { 87 87 - if (file) { 88 88 - const newblob = await handleUpload(file); 89 89 - form.setValue("icon", newblob.url); 90 90 - setFile(null); 91 91 - } 92 92 - setOpen(false); 93 93 - }; 94 94 - 95 95 - return ( 96 96 - <div className="grid w-full gap-4 md:grid-cols-3"> 97 97 - <SectionHeader 98 98 - title="Advanced Settings" 99 99 - description="Provide informations about what your status page is for. A favicon can be uploaded to customize your status page. It will be used as an icon on the header as well." 100 100 - className="md:col-span-full" 101 101 - /> 102 102 - <FormField 103 103 - control={form.control} 104 104 - name="description" 105 105 - render={({ field }) => ( 106 106 - <FormItem className="md:col-span-full"> 107 107 - <FormLabel>Description</FormLabel> 108 108 - <FormControl> 109 109 - <Input 110 110 - placeholder="Stay informed about our api and website health." 111 111 - {...field} 112 112 - /> 113 113 - </FormControl> 114 114 - <FormDescription> 115 115 - Provide your users informations about it. 116 116 - </FormDescription> 117 117 - <FormMessage /> 118 118 - </FormItem> 119 119 - )} 120 120 - /> 121 121 - <FormField 122 122 - control={form.control} 123 123 - name="icon" 124 124 - render={({ field }) => ( 125 125 - <FormItem className="col-span-full md:col-span-1"> 126 126 - <FormLabel>Favicon</FormLabel> 127 127 - <FormControl> 128 128 - <> 129 129 - {!field.value && ( 130 130 - <Input 131 131 - type="file" 132 132 - accept="image/x-icon,image/png" 133 133 - ref={inputFileRef} 134 134 - onChange={(e) => handleChange(e.target.files)} 135 135 - /> 136 136 - )} 137 137 - {field.value && ( 138 138 - <div className="flex items-center"> 139 139 - <div className="h-10 w-10 rounded-sm border border-border p-1"> 140 140 - <Image 141 141 - src={field.value} 142 142 - width={64} 143 143 - height={64} 144 144 - alt="Favicon" 145 145 - /> 146 146 - </div> 147 147 - <Button 148 148 - variant="link" 149 149 - onClick={() => { 150 150 - form.setValue("icon", ""); 151 151 - }} 152 152 - > 153 153 - Remove 154 154 - </Button> 155 155 - </div> 156 156 - )} 157 157 - </> 158 158 - </FormControl> 159 159 - <FormDescription>Your status page favicon</FormDescription> 160 160 - <FormMessage /> 161 161 - </FormItem> 162 162 - )} 163 163 - /> 164 164 - <div className="grid w-full gap-4 md:col-span-full md:grid-cols-3 md:grid-rows-2"> 165 165 - <SectionHeader 166 166 - title="Monitor Values Visibility" 167 167 - description={ 168 168 - <> 169 169 - Toggle the visibility of the values on the status page. Share your{" "} 170 170 - <span className="font-medium text-foreground">uptime</span> and 171 171 - the{" "} 172 172 - <span className="font-medium text-foreground"> 173 173 - number of request 174 174 - </span>{" "} 175 175 - to your endpoint. 176 176 - </> 177 177 - } 178 178 - className="md:col-span-2" 179 179 - /> 180 180 - <div className="group flex flex-col justify-center gap-1 rounded-md border border-dashed p-3 md:row-span-2"> 181 181 - <div className="flex flex-row items-center justify-center gap-2 text-muted-foreground group-hover:text-foreground"> 182 182 - <MousePointer2 className="h-3 w-3" /> 183 183 - <p className="text-sm">Hover State</p> 184 184 - </div> 185 185 - <div className="mx-auto max-w-60"> 186 186 - <BarDescription 187 187 - label="Operational" 188 188 - day={new Date().toISOString()} 189 189 - count={5600} 190 190 - ok={5569} 191 191 - showValues={!!form.getValues("showMonitorValues")} 192 192 - barClassName="bg-status-operational" 193 193 - className="rounded-md border bg-popover p-2 text-popover-foreground shadow-md md:col-span-1" 194 194 - /> 195 195 - </div> 196 196 - </div> 197 197 - <FormField 198 198 - control={form.control} 199 199 - name="showMonitorValues" 200 200 - render={({ field }) => ( 201 201 - <FormItem className="flex flex-row items-start space-x-3 space-y-0 md:col-span-2"> 202 202 - <FormControl> 203 203 - <Checkbox 204 204 - disabled={field.disabled} 205 205 - checked={field.value ?? false} 206 206 - onCheckedChange={field.onChange} 207 207 - /> 208 208 - </FormControl> 209 209 - <div className="space-y-1 leading-none"> 210 210 - <FormLabel>Show values</FormLabel> 211 211 - <FormDescription> 212 212 - Share the numbers to your users. 213 213 - </FormDescription> 214 214 - </div> 215 215 - </FormItem> 216 216 - )} 217 217 - /> 218 218 - </div> 219 219 - <AlertDialog open={open} onOpenChange={(value) => setOpen(value)}> 220 220 - <AlertDialogContent> 221 221 - <AlertDialogHeader> 222 222 - <AlertDialogTitle>Incorrect image size</AlertDialogTitle> 223 223 - <AlertDialogDescription> 224 224 - For the best result, the image should be a square. You can still 225 225 - upload it, but it will be cropped. 226 226 - </AlertDialogDescription> 227 227 - </AlertDialogHeader> 228 228 - <AlertDialogFooter> 229 229 - <AlertDialogCancel onClick={handleCancel}>Cancel</AlertDialogCancel> 230 230 - <AlertDialogAction onClick={handleConfirm}> 231 231 - Continue 232 232 - </AlertDialogAction> 233 233 - </AlertDialogFooter> 234 234 - </AlertDialogContent> 235 235 - </AlertDialog> 236 236 - </div> 237 237 - ); 238 238 - }

-92

apps/web/src/components/forms/status-page/section-danger.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { useRouter } from "next/navigation"; 4 4 - 5 5 - import { 6 6 - AlertDialog, 7 7 - AlertDialogAction, 8 8 - AlertDialogCancel, 9 9 - AlertDialogContent, 10 10 - AlertDialogDescription, 11 11 - AlertDialogFooter, 12 12 - AlertDialogHeader, 13 13 - AlertDialogTitle, 14 14 - AlertDialogTrigger, 15 15 - Button, 16 16 - FormDescription, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - import { LoadingAnimation } from "@/components/loading-animation"; 20 20 - import { toastAction } from "@/lib/toast"; 21 21 - import { api } from "@/trpc/client"; 22 22 - import React from "react"; 23 23 - import { SectionHeader } from "../shared/section-header"; 24 24 - 25 25 - interface Props { 26 26 - pageId: number; 27 27 - } 28 28 - 29 29 - export function SectionDanger({ pageId }: Props) { 30 30 - const router = useRouter(); 31 31 - const [open, setOpen] = React.useState(false); 32 32 - const [isPending, startTransition] = React.useTransition(); 33 33 - 34 34 - async function onDelete() { 35 35 - startTransition(async () => { 36 36 - try { 37 37 - await api.page.delete.mutate({ id: pageId }); 38 38 - toastAction("deleted"); 39 39 - setOpen(false); 40 40 - router.push("../"); 41 41 - } catch { 42 42 - toastAction("error"); 43 43 - } 44 44 - }); 45 45 - } 46 46 - 47 47 - return ( 48 48 - <div className="grid w-full gap-4"> 49 49 - <SectionHeader 50 50 - title="Danger Zone" 51 51 - description="Be aware of the changes you are about to make." 52 52 - /> 53 53 - <div className="grid gap-4 sm:grid-cols-3"> 54 54 - <div className="col-start-1 flex flex-col items-center gap-4 sm:col-span-2 sm:flex-row"> 55 55 - <AlertDialog open={open} onOpenChange={setOpen}> 56 56 - <AlertDialogTrigger asChild> 57 57 - <Button variant="destructive" className="w-full sm:w-auto"> 58 58 - Delete 59 59 - </Button> 60 60 - </AlertDialogTrigger> 61 61 - <AlertDialogContent> 62 62 - <AlertDialogHeader> 63 63 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 64 64 - <AlertDialogDescription> 65 65 - This action cannot be undone. This will permanently delete the 66 66 - status page. 67 67 - </AlertDialogDescription> 68 68 - </AlertDialogHeader> 69 69 - <AlertDialogFooter> 70 70 - <AlertDialogCancel>Cancel</AlertDialogCancel> 71 71 - <AlertDialogAction 72 72 - onClick={(e) => { 73 73 - e.preventDefault(); 74 74 - onDelete(); 75 75 - }} 76 76 - disabled={isPending} 77 77 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 78 78 - > 79 79 - {!isPending ? "Delete" : <LoadingAnimation />} 80 80 - </AlertDialogAction> 81 81 - </AlertDialogFooter> 82 82 - </AlertDialogContent> 83 83 - </AlertDialog> 84 84 - <FormDescription className="order-1 text-red-500 sm:order-2"> 85 85 - This action cannot be undone. This will permanently delete the 86 86 - status page. 87 87 - </FormDescription> 88 88 - </div> 89 89 - </div> 90 90 - </div> 91 91 - ); 92 92 - }

-161

apps/web/src/components/forms/status-page/section-monitor.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { CheckIcon, ChevronsUpDown, GripVertical } from "lucide-react"; 4 4 - import { useState } from "react"; 5 5 - import type { UseFormReturn } from "react-hook-form"; 6 6 - import { useFieldArray } from "react-hook-form"; 7 7 - 8 8 - import type { InsertPage, Monitor } from "@openstatus/db/src/schema"; 9 9 - import { 10 10 - Button, 11 11 - Command, 12 12 - CommandEmpty, 13 13 - CommandGroup, 14 14 - CommandInput, 15 15 - CommandItem, 16 16 - CommandList, 17 17 - Popover, 18 18 - PopoverContent, 19 19 - PopoverTrigger, 20 20 - Sortable, 21 21 - SortableDragHandle, 22 22 - SortableItem, 23 23 - } from "@openstatus/ui"; 24 24 - 25 25 - import { StatusDot } from "@/components/monitor/status-dot"; 26 26 - import { cn } from "@/lib/utils"; 27 27 - import { SectionHeader } from "../shared/section-header"; 28 28 - 29 29 - interface Props { 30 30 - monitors?: Monitor[]; 31 31 - form: UseFormReturn<InsertPage>; 32 32 - } 33 33 - 34 34 - export function SectionMonitor({ form, monitors }: Props) { 35 35 - const [open, setOpen] = useState(false); 36 36 - const { fields, append, move, remove } = useFieldArray({ 37 37 - control: form.control, 38 38 - name: "monitors", 39 39 - }); 40 40 - const watchMonitors = form.watch("monitors"); 41 41 - 42 42 - return ( 43 43 - <div className="grid w-full gap-4"> 44 44 - <SectionHeader 45 45 - title="Connected Monitors" 46 46 - description="Select the monitors you want to display on your status page. Change the order by using the right-side handle. Inactive monitors will not be shown." 47 47 - /> 48 48 - <Popover open={open} onOpenChange={setOpen}> 49 49 - <PopoverTrigger asChild> 50 50 - <Button 51 51 - variant="outline" 52 52 - role="combobox" 53 53 - aria-expanded={open} 54 54 - className="w-[240px] justify-between" 55 55 - > 56 56 - {watchMonitors.length > 0 57 57 - ? `${watchMonitors.length} monitor${ 58 58 - watchMonitors.length > 1 ? "s" : "" 59 59 - } selected` 60 60 - : "Select monitors..."} 61 61 - <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> 62 62 - </Button> 63 63 - </PopoverTrigger> 64 64 - <PopoverContent side="bottom" className="w-[240px] p-0"> 65 65 - <Command> 66 66 - <CommandInput placeholder="Select monitors..." className="h-9" /> 67 67 - <CommandList> 68 68 - <CommandEmpty>No monitors found.</CommandEmpty> 69 69 - <CommandGroup> 70 70 - {monitors?.map((monitor) => ( 71 71 - <CommandItem 72 72 - key={monitor.id} 73 73 - value={`${monitor.name}-${String(monitor.id)}`} 74 74 - keywords={[monitor.name]} 75 75 - onSelect={(currentValue) => { 76 76 - const splitValue = currentValue.split("-"); 77 77 - const id = splitValue?.[splitValue.length - 1]; 78 78 - const monitorIndex = watchMonitors.findIndex( 79 79 - (m) => m.monitorId === Number.parseInt(id), 80 80 - ); 81 81 - if (monitorIndex !== -1) { 82 82 - remove(monitorIndex); 83 83 - } else { 84 84 - append({ 85 85 - monitorId: monitor.id, 86 86 - order: fields.length + 1, 87 87 - }); 88 88 - } 89 89 - }} 90 90 - > 91 91 - <div className="truncate"> 92 92 - <p>{monitor.name}</p> 93 93 - {/* <p className="text-muted-foreground truncate text-xs"> 94 94 - {monitor.url} 95 95 - </p> */} 96 96 - </div> 97 97 - <CheckIcon 98 98 - className={cn( 99 99 - "ml-auto h-4 w-4 shrink-0", 100 100 - watchMonitors.some((m) => m.monitorId === monitor.id) 101 101 - ? "opacity-100" 102 102 - : "opacity-0", 103 103 - )} 104 104 - /> 105 105 - </CommandItem> 106 106 - ))} 107 107 - </CommandGroup> 108 108 - </CommandList> 109 109 - </Command> 110 110 - </PopoverContent> 111 111 - </Popover> 112 112 - <div className="h-full w-full"> 113 113 - {/* FIXME: if we wanna use `overlay` we need to fix the scrollable/position-fixed issues */} 114 114 - <Sortable 115 115 - value={fields} 116 116 - onMove={({ activeIndex, overIndex }) => move(activeIndex, overIndex)} 117 117 - // overlay={ 118 118 - // <div className="grid grid-cols-[0.5fr_1fr_auto] items-center gap-2"> 119 119 - // <Skeleton className="h-8 w-full rounded-sm" /> 120 120 - // <Skeleton className="h-8 w-full rounded-sm" /> 121 121 - // <Skeleton className="size-8 shrink-0 rounded-sm" /> 122 122 - // </div> 123 123 - // } 124 124 - > 125 125 - <div className="w-full space-y-2"> 126 126 - {fields.map((field) => { 127 127 - const monitor = monitors?.find( 128 128 - ({ id }) => field.monitorId === id, 129 129 - ); 130 130 - if (!monitor) return null; 131 131 - return ( 132 132 - <SortableItem key={field.id} value={field.id} asChild> 133 133 - <div className="grid grid-cols-[0.5fr_1fr_auto] items-center gap-2"> 134 134 - <div className="flex items-center gap-2 truncate"> 135 135 - <StatusDot 136 136 - active={monitor.active} 137 137 - status={monitor.status} 138 138 - />{" "} 139 139 - <span className="truncate">{monitor.name}</span> 140 140 - </div> 141 141 - <div className="truncate text-muted-foreground"> 142 142 - {monitor?.url} 143 143 - </div> 144 144 - <SortableDragHandle 145 145 - variant="outline" 146 146 - size="icon" 147 147 - className="size-8 shrink-0" 148 148 - type="button" 149 149 - > 150 150 - <GripVertical className="size-4" aria-hidden="true" /> 151 151 - </SortableDragHandle> 152 152 - </div> 153 153 - </SortableItem> 154 154 - ); 155 155 - })} 156 156 - </div> 157 157 - </Sortable> 158 158 - </div> 159 159 - </div> 160 160 - ); 161 161 - }

-131

apps/web/src/components/forms/status-page/section-visibility.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { X } from "lucide-react"; 4 4 - import type { UseFormReturn } from "react-hook-form"; 5 5 - 6 6 - import type { InsertPage, WorkspacePlan } from "@openstatus/db/src/schema"; 7 7 - import { 8 8 - Button, 9 9 - Checkbox, 10 10 - FormControl, 11 11 - FormDescription, 12 12 - FormField, 13 13 - FormItem, 14 14 - FormLabel, 15 15 - FormMessage, 16 16 - Input, 17 17 - } from "@openstatus/ui"; 18 18 - 19 19 - import { getBaseUrl } from "@/app/status-page/[domain]/utils"; 20 20 - import { ProFeatureHoverCard } from "@/components/billing/pro-feature-hover-card"; 21 21 - import { CopyToClipboardButton } from "@/components/dashboard/copy-to-clipboard-button"; 22 22 - import { SectionHeader } from "../shared/section-header"; 23 23 - 24 24 - interface Props { 25 25 - form: UseFormReturn<InsertPage>; 26 26 - plan: WorkspacePlan; 27 27 - workspaceSlug: string; 28 28 - } 29 29 - 30 30 - export function SectionVisibility({ form, plan, workspaceSlug }: Props) { 31 31 - const watchPasswordProtected = form.watch("passwordProtected"); 32 32 - const watchPassword = form.watch("password"); 33 33 - 34 34 - const baseUrl = getBaseUrl({ 35 35 - slug: form.getValues("slug"), 36 36 - customDomain: form.getValues("customDomain"), 37 37 - }); 38 38 - const link = `${baseUrl}?authorize=${watchPassword}`; 39 39 - 40 40 - const hasFreePlan = plan === "free"; 41 41 - 42 42 - return ( 43 43 - <div className="grid w-full gap-4 md:grid-cols-2"> 44 44 - <SectionHeader 45 45 - title="Visibility" 46 46 - description="Hide your page from the public by setting a password." 47 47 - className="md:col-span-full" 48 48 - /> 49 49 - <ProFeatureHoverCard 50 50 - workspaceSlug={workspaceSlug} 51 51 - plan={plan} 52 52 - minRequiredPlan="starter" 53 53 - > 54 54 - <div className="grid w-full gap-4 md:col-span-full md:grid-cols-2"> 55 55 - <FormField 56 56 - control={form.control} 57 57 - name="passwordProtected" 58 58 - disabled={hasFreePlan} 59 59 - render={({ field }) => ( 60 60 - <FormItem className="flex flex-row items-start space-x-3 space-y-0 md:col-span-full"> 61 61 - <FormControl> 62 62 - <Checkbox 63 63 - disabled={field.disabled} 64 64 - checked={field.value ?? false} 65 65 - onCheckedChange={field.onChange} 66 66 - /> 67 67 - </FormControl> 68 68 - <div className="space-y-1 leading-none"> 69 69 - <FormLabel>Protect with password</FormLabel> 70 70 - <FormDescription> 71 71 - Hide the page from the public 72 72 - </FormDescription> 73 73 - </div> 74 74 - </FormItem> 75 75 - )} 76 76 - /> 77 77 - <FormField 78 78 - control={form.control} 79 79 - name="password" 80 80 - disabled={hasFreePlan} 81 81 - render={({ field }) => ( 82 82 - <FormItem className="md:col-span-1"> 83 83 - <FormLabel>Password</FormLabel> 84 84 - <div className="flex items-center gap-2"> 85 85 - <FormControl> 86 86 - <Input 87 87 - {...field} 88 88 - placeholder="top-secret" 89 89 - disabled={!watchPasswordProtected} 90 90 - value={field.value ?? ""} // REMINDER: remove nullish coalescing from db schema 91 91 - /> 92 92 - </FormControl> 93 93 - <Button 94 94 - size="icon" 95 95 - variant="ghost" 96 96 - type="button" 97 97 - onClick={() => form.setValue("password", "")} 98 98 - disabled={!field.value || !watchPasswordProtected} 99 99 - > 100 100 - <X className="h-4 w-4" /> 101 101 - </Button> 102 102 - </div> 103 103 - <FormDescription> 104 104 - No restriction on the password. It&apos;s just a simple 105 105 - password you define. 106 106 - </FormDescription> 107 107 - <FormMessage /> 108 108 - </FormItem> 109 109 - )} 110 110 - /> 111 111 - {watchPasswordProtected ? ( 112 112 - <div className="text-sm md:col-span-full"> 113 113 - <p className="text-muted-foreground"> 114 114 - If you want to share the page without the need to enter the 115 115 - password, you can share the following link: 116 116 - </p> 117 117 - <div className="flex flex-wrap items-center gap-2"> 118 118 - <p className="text-foreground">{link} </p> 119 119 - {/* TODO: think of building a better shadcn like "CopyToClipboardButton" */} 120 120 - <CopyToClipboardButton 121 121 - text={link} 122 122 - tooltipText="Copy to clipboard" 123 123 - /> 124 124 - </div> 125 125 - </div> 126 126 - ) : null} 127 127 - </div> 128 128 - </ProFeatureHoverCard> 129 129 - </div> 130 130 - ); 131 131 - }

-346

apps/web/src/components/forms/status-report-form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { useRouter } from "next/navigation"; 5 5 - import * as React from "react"; 6 6 - import { useForm } from "react-hook-form"; 7 7 - 8 8 - import { 9 9 - insertStatusReportSchema, 10 10 - statusReportStatus, 11 11 - statusReportStatusSchema, 12 12 - } from "@openstatus/db/src/schema"; 13 13 - import type { InsertStatusReport, Monitor } from "@openstatus/db/src/schema"; 14 14 - import { 15 15 - Accordion, 16 16 - AccordionContent, 17 17 - AccordionItem, 18 18 - AccordionTrigger, 19 19 - Button, 20 20 - Checkbox, 21 21 - DateTimePickerPopover, 22 22 - Form, 23 23 - FormControl, 24 24 - FormDescription, 25 25 - FormField, 26 26 - FormItem, 27 27 - FormLabel, 28 28 - FormMessage, 29 29 - Input, 30 30 - RadioGroup, 31 31 - RadioGroupItem, 32 32 - Tabs, 33 33 - TabsContent, 34 34 - TabsList, 35 35 - TabsTrigger, 36 36 - Textarea, 37 37 - } from "@openstatus/ui"; 38 38 - 39 39 - import { Preview } from "@/components/content/preview"; 40 40 - import { Icons } from "@/components/icons"; 41 41 - import { LoadingAnimation } from "@/components/loading-animation"; 42 42 - import { statusDict } from "@/data/incidents-dictionary"; 43 43 - import { toastAction } from "@/lib/toast"; 44 44 - import { cn } from "@/lib/utils"; 45 45 - import { api } from "@/trpc/client"; 46 46 - 47 47 - interface Props { 48 48 - defaultValues?: InsertStatusReport; 49 49 - monitors?: Monitor[]; 50 50 - nextUrl?: string; 51 51 - pageId: number; 52 52 - } 53 53 - 54 54 - export function StatusReportForm({ 55 55 - defaultValues, 56 56 - monitors, 57 57 - nextUrl, 58 58 - pageId, 59 59 - }: Props) { 60 60 - const form = useForm<InsertStatusReport>({ 61 61 - resolver: zodResolver(insertStatusReportSchema), 62 62 - defaultValues: defaultValues 63 63 - ? { 64 64 - id: defaultValues.id, 65 65 - title: defaultValues.title, 66 66 - status: defaultValues.status, 67 67 - monitors: defaultValues.monitors, 68 68 - // include update on creation 69 69 - message: defaultValues.message, 70 70 - date: defaultValues.date, 71 71 - } 72 72 - : { 73 73 - status: "investigating", 74 74 - date: new Date(), 75 75 - }, 76 76 - }); 77 77 - const router = useRouter(); 78 78 - const [isPending, startTransition] = React.useTransition(); 79 79 - 80 80 - const onSubmit = ({ ...props }: InsertStatusReport) => { 81 81 - startTransition(async () => { 82 82 - try { 83 83 - if (defaultValues) { 84 84 - await api.statusReport.updateStatusReport.mutate({ 85 85 - pageId, 86 86 - ...props, 87 87 - }); 88 88 - } else { 89 89 - const { message, date, status, ...rest } = props; 90 90 - const statusReport = await api.statusReport.createStatusReport.mutate( 91 91 - { 92 92 - status, 93 93 - message, 94 94 - pageId, 95 95 - ...rest, 96 96 - }, 97 97 - ); 98 98 - // include update on creation 99 99 - if (statusReport?.id) { 100 100 - await api.statusReport.createStatusReportUpdate.mutate({ 101 101 - message, 102 102 - date, 103 103 - status, 104 104 - statusReportId: statusReport.id, 105 105 - }); 106 106 - } 107 107 - } 108 108 - if (nextUrl) { 109 109 - router.push(nextUrl); 110 110 - } 111 111 - router.refresh(); 112 112 - toastAction("saved"); 113 113 - } catch { 114 114 - toastAction("error"); 115 115 - } 116 116 - }); 117 117 - }; 118 118 - 119 119 - return ( 120 120 - <Form {...form}> 121 121 - <form 122 122 - onSubmit={async (e) => { 123 123 - e.preventDefault(); 124 124 - form.handleSubmit(onSubmit)(e); 125 125 - }} 126 126 - className="grid w-full gap-6" 127 127 - > 128 128 - <div className="grid gap-4 sm:grid-cols-3"> 129 129 - <div className="my-1.5 flex flex-col gap-2"> 130 130 - <p className="font-semibold text-sm leading-none">Inform</p> 131 131 - <p className="text-muted-foreground text-sm"> 132 132 - Keep your users informed about what just happened. 133 133 - </p> 134 134 - </div> 135 135 - <div className="grid gap-6 sm:col-span-2 sm:grid-cols-3"> 136 136 - <FormField 137 137 - control={form.control} 138 138 - name="title" 139 139 - render={({ field }) => ( 140 140 - <FormItem className="sm:col-span-4"> 141 141 - <FormLabel>Title</FormLabel> 142 142 - <FormControl> 143 143 - <Input placeholder="Downtime..." {...field} /> 144 144 - </FormControl> 145 145 - <FormDescription>The title of your outage.</FormDescription> 146 146 - <FormMessage /> 147 147 - </FormItem> 148 148 - )} 149 149 - /> 150 150 - <FormField 151 151 - control={form.control} 152 152 - name="status" 153 153 - render={({ field }) => ( 154 154 - <FormItem className="col-span-full space-y-1"> 155 155 - <FormLabel>Status</FormLabel> 156 156 - <FormDescription>Select the current status.</FormDescription> 157 157 - <FormMessage /> 158 158 - <RadioGroup 159 159 - onValueChange={(value) => 160 160 - field.onChange(statusReportStatusSchema.parse(value)) 161 161 - } // value is a string 162 162 - defaultValue={field.value} 163 163 - className="grid grid-cols-2 gap-4 sm:grid-cols-4" 164 164 - > 165 165 - {statusReportStatus.map((status) => { 166 166 - const { value, label, icon } = statusDict[status]; 167 167 - const Icon = Icons[icon]; 168 168 - return ( 169 169 - <FormItem key={value}> 170 170 - <FormLabel className="[&:has([data-state=checked])>div]:border-primary [&:has([data-state=checked])>div]:text-foreground"> 171 171 - <FormControl> 172 172 - <RadioGroupItem 173 173 - value={value} 174 174 - className="sr-only" 175 175 - /> 176 176 - </FormControl> 177 177 - <div className="flex w-full items-center justify-center rounded-lg border border-border px-3 py-2 text-center text-muted-foreground text-sm"> 178 178 - <Icon className="mr-2 h-4 w-4 shrink-0" /> 179 179 - <span className="truncate">{label}</span> 180 180 - </div> 181 181 - </FormLabel> 182 182 - </FormItem> 183 183 - ); 184 184 - })} 185 185 - </RadioGroup> 186 186 - </FormItem> 187 187 - )} 188 188 - /> 189 189 - <FormField 190 190 - control={form.control} 191 191 - name="monitors" 192 192 - render={() => ( 193 193 - <FormItem className="sm:col-span-full"> 194 194 - <div className="mb-4"> 195 195 - <FormLabel>Monitors</FormLabel> 196 196 - {/* TODO: second phrase can be set inside of a (?) tooltip */} 197 197 - <FormDescription> 198 198 - Select the monitors that you want to refer the incident 199 199 - to. It will be displayed on the status page they are 200 200 - attached to. 201 201 - </FormDescription> 202 202 - </div> 203 203 - <div className="grid grid-cols-2 gap-4 sm:grid-cols-4"> 204 204 - {monitors?.map((item) => ( 205 205 - <FormField 206 206 - key={item.id} 207 207 - control={form.control} 208 208 - name="monitors" 209 209 - render={({ field }) => { 210 210 - return ( 211 211 - <FormItem 212 212 - key={item.id} 213 213 - className="flex flex-row items-start space-x-3 space-y-0" 214 214 - > 215 215 - <FormControl> 216 216 - <Checkbox 217 217 - checked={field.value?.includes(item.id)} 218 218 - onCheckedChange={(checked) => { 219 219 - return checked 220 220 - ? field.onChange([ 221 221 - ...(field.value || []), 222 222 - item.id, 223 223 - ]) 224 224 - : field.onChange( 225 225 - field.value?.filter( 226 226 - (value) => value !== item.id, 227 227 - ), 228 228 - ); 229 229 - }} 230 230 - /> 231 231 - </FormControl> 232 232 - <div className="grid gap-1.5 leading-none"> 233 233 - <div className="flex items-center gap-2"> 234 234 - <FormLabel className="font-normal"> 235 235 - {item.name} 236 236 - </FormLabel> 237 237 - <span 238 238 - className={cn( 239 239 - "rounded-full p-1", 240 240 - item.active 241 241 - ? "bg-green-500" 242 242 - : "bg-red-500", 243 243 - )} 244 244 - /> 245 245 - </div> 246 246 - <p className="truncate text-muted-foreground text-sm"> 247 247 - {item.description} 248 248 - </p> 249 249 - </div> 250 250 - </FormItem> 251 251 - ); 252 252 - }} 253 253 - /> 254 254 - ))} 255 255 - </div> 256 256 - <FormMessage /> 257 257 - </FormItem> 258 258 - )} 259 259 - /> 260 260 - </div> 261 261 - </div> 262 262 - {/* include update on creation */} 263 263 - {!defaultValues ? ( 264 264 - <Accordion type="single" defaultValue="message" collapsible> 265 265 - <AccordionItem value="message"> 266 266 - <AccordionTrigger>Message</AccordionTrigger> 267 267 - <AccordionContent> 268 268 - <div className="grid gap-4 sm:grid-cols-3"> 269 269 - <div className="my-1.5 flex flex-col gap-2"> 270 270 - <p className="font-semibold text-sm leading-none"> 271 271 - Status Update 272 272 - </p> 273 273 - <p className="text-muted-foreground text-sm"> 274 274 - What is actually going wrong? 275 275 - </p> 276 276 - </div> 277 277 - <div className="grid gap-6 sm:col-span-2 sm:grid-cols-2"> 278 278 - <FormField 279 279 - control={form.control} 280 280 - name="message" 281 281 - render={({ field }) => ( 282 282 - <FormItem className="sm:col-span-4"> 283 283 - <FormLabel>Message</FormLabel> 284 284 - <Tabs defaultValue="write"> 285 285 - <TabsList> 286 286 - <TabsTrigger value="write">Write</TabsTrigger> 287 287 - <TabsTrigger value="preview">Preview</TabsTrigger> 288 288 - </TabsList> 289 289 - <TabsContent value="write"> 290 290 - <FormControl> 291 291 - <Textarea 292 292 - placeholder="We are encountering..." 293 293 - className="h-auto w-full resize-none" 294 294 - rows={9} 295 295 - {...field} 296 296 - /> 297 297 - </FormControl> 298 298 - </TabsContent> 299 299 - <TabsContent value="preview"> 300 300 - <Preview md={form.getValues("message")} /> 301 301 - </TabsContent> 302 302 - </Tabs> 303 303 - <FormDescription> 304 304 - Tell your user what&apos;s happening. Supports 305 305 - markdown. 306 306 - </FormDescription> 307 307 - <FormMessage /> 308 308 - </FormItem> 309 309 - )} 310 310 - /> 311 311 - <FormField 312 312 - control={form.control} 313 313 - name="date" 314 314 - render={({ field }) => ( 315 315 - <FormItem className="flex flex-col sm:col-span-full"> 316 316 - <FormLabel>Date</FormLabel> 317 317 - <DateTimePickerPopover 318 318 - date={ 319 319 - field.value ? new Date(field.value) : new Date() 320 320 - } 321 321 - setDate={(date) => { 322 322 - field.onChange(date); 323 323 - }} 324 324 - /> 325 325 - <FormDescription> 326 326 - The date and time when the incident took place. 327 327 - </FormDescription> 328 328 - <FormMessage /> 329 329 - </FormItem> 330 330 - )} 331 331 - /> 332 332 - </div> 333 333 - </div> 334 334 - </AccordionContent> 335 335 - </AccordionItem> 336 336 - </Accordion> 337 337 - ) : null} 338 338 - <div className="flex sm:justify-end"> 339 339 - <Button className="w-full sm:w-auto" size="lg"> 340 340 - {!isPending ? "Confirm" : <LoadingAnimation />} 341 341 - </Button> 342 342 - </div> 343 343 - </form> 344 344 - </Form> 345 345 - ); 346 346 - }

-199

apps/web/src/components/forms/status-report-update-form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { useRouter } from "next/navigation"; 5 5 - import * as React from "react"; 6 6 - import { useForm } from "react-hook-form"; 7 7 - 8 8 - import type { InsertStatusReportUpdate } from "@openstatus/db/src/schema"; 9 9 - import { 10 10 - insertStatusReportUpdateSchema, 11 11 - statusReportStatus, 12 12 - statusReportStatusSchema, 13 13 - } from "@openstatus/db/src/schema"; 14 14 - import { 15 15 - Button, 16 16 - DateTimePicker, 17 17 - Form, 18 18 - FormControl, 19 19 - FormDescription, 20 20 - FormField, 21 21 - FormItem, 22 22 - FormLabel, 23 23 - FormMessage, 24 24 - RadioGroup, 25 25 - RadioGroupItem, 26 26 - Tabs, 27 27 - TabsContent, 28 28 - TabsList, 29 29 - TabsTrigger, 30 30 - Textarea, 31 31 - } from "@openstatus/ui"; 32 32 - 33 33 - import { Preview } from "@/components/content/preview"; 34 34 - import { Icons } from "@/components/icons"; 35 35 - import { LoadingAnimation } from "@/components/loading-animation"; 36 36 - import { statusDict } from "@/data/incidents-dictionary"; 37 37 - import { toastAction } from "@/lib/toast"; 38 38 - import { api } from "@/trpc/client"; 39 39 - 40 40 - interface Props { 41 41 - defaultValues?: InsertStatusReportUpdate; 42 42 - statusReportId: number; 43 43 - onSubmit?: () => void; 44 44 - } 45 45 - 46 46 - export function StatusReportUpdateForm({ 47 47 - defaultValues, 48 48 - statusReportId, 49 49 - onSubmit, 50 50 - }: Props) { 51 51 - const form = useForm<InsertStatusReportUpdate>({ 52 52 - resolver: zodResolver(insertStatusReportUpdateSchema), 53 53 - defaultValues: { 54 54 - id: defaultValues?.id || 0, 55 55 - status: defaultValues?.status || "investigating", 56 56 - message: defaultValues?.message, 57 57 - date: defaultValues?.date || new Date(), 58 58 - statusReportId, 59 59 - }, 60 60 - }); 61 61 - const router = useRouter(); 62 62 - const [isPending, startTransition] = React.useTransition(); 63 63 - 64 64 - const handleSubmit = ({ ...props }: InsertStatusReportUpdate) => { 65 65 - startTransition(async () => { 66 66 - try { 67 67 - if (defaultValues) { 68 68 - await api.statusReport.updateStatusReportUpdate.mutate({ ...props }); 69 69 - } else { 70 70 - await api.statusReport.createStatusReportUpdate.mutate({ ...props }); 71 71 - } 72 72 - toastAction("saved"); 73 73 - onSubmit?.(); 74 74 - router.refresh(); 75 75 - } catch { 76 76 - toastAction("error"); 77 77 - } 78 78 - }); 79 79 - }; 80 80 - 81 81 - return ( 82 82 - <Form {...form}> 83 83 - <form 84 84 - onSubmit={async (e) => { 85 85 - e.preventDefault(); 86 86 - form.handleSubmit(handleSubmit)(e); 87 87 - }} 88 88 - className="grid w-full gap-6" 89 89 - > 90 90 - <div className="grid gap-4 sm:grid-cols-3"> 91 91 - <div className="my-1.5 flex flex-col gap-2"> 92 92 - <p className="font-semibold text-sm leading-none">Inform</p> 93 93 - <p className="text-muted-foreground text-sm"> 94 94 - Keep your users informed about what just happened. 95 95 - </p> 96 96 - </div> 97 97 - <div className="grid gap-6 sm:col-span-2 sm:grid-cols-3"> 98 98 - <FormField 99 99 - control={form.control} 100 100 - name="status" 101 101 - render={({ field }) => ( 102 102 - <FormItem className="space-y-1 sm:col-span-full"> 103 103 - <FormLabel>Status</FormLabel> 104 104 - <FormDescription>Select the current status.</FormDescription> 105 105 - <FormMessage /> 106 106 - <RadioGroup 107 107 - onValueChange={(value) => 108 108 - field.onChange(statusReportStatusSchema.parse(value)) 109 109 - } // value is a string 110 110 - defaultValue={field.value} 111 111 - className="grid grid-cols-2 gap-4 sm:grid-cols-4" 112 112 - > 113 113 - {statusReportStatus.map((status) => { 114 114 - const { value, label, icon } = statusDict[status]; 115 115 - const Icon = Icons[icon]; 116 116 - return ( 117 117 - <FormItem key={value}> 118 118 - <FormLabel className="[&:has([data-state=checked])>div]:border-primary [&:has([data-state=checked])>div]:text-foreground"> 119 119 - <FormControl> 120 120 - <RadioGroupItem 121 121 - value={value} 122 122 - className="sr-only" 123 123 - /> 124 124 - </FormControl> 125 125 - <div className="flex w-full items-center justify-center rounded-lg border border-border px-3 py-2 text-center text-muted-foreground text-sm"> 126 126 - <Icon className="mr-2 h-4 w-4 shrink-0" /> 127 127 - <span className="truncate">{label}</span> 128 128 - </div> 129 129 - </FormLabel> 130 130 - </FormItem> 131 131 - ); 132 132 - })} 133 133 - </RadioGroup> 134 134 - </FormItem> 135 135 - )} 136 136 - /> 137 137 - <FormField 138 138 - control={form.control} 139 139 - name="message" 140 140 - render={({ field }) => ( 141 141 - <FormItem className="sm:col-span-full"> 142 142 - <FormLabel>Message</FormLabel> 143 143 - <Tabs defaultValue="write"> 144 144 - <TabsList> 145 145 - <TabsTrigger value="write">Write</TabsTrigger> 146 146 - <TabsTrigger value="preview">Preview</TabsTrigger> 147 147 - </TabsList> 148 148 - <TabsContent value="write"> 149 149 - <FormControl> 150 150 - <Textarea 151 151 - placeholder="We are encountering..." 152 152 - className="h-auto w-full resize-none" 153 153 - rows={9} 154 154 - {...field} 155 155 - /> 156 156 - </FormControl> 157 157 - </TabsContent> 158 158 - <TabsContent value="preview"> 159 159 - <Preview md={form.getValues("message")} /> 160 160 - </TabsContent> 161 161 - </Tabs> 162 162 - <FormDescription> 163 163 - Tell your user what&apos;s happening. Supports markdown. 164 164 - </FormDescription> 165 165 - <FormMessage /> 166 166 - </FormItem> 167 167 - )} 168 168 - /> 169 169 - <FormField 170 170 - control={form.control} 171 171 - name="date" 172 172 - render={({ field }) => ( 173 173 - <FormItem className="flex flex-col sm:col-span-2"> 174 174 - <FormLabel>Date</FormLabel> 175 175 - <DateTimePicker 176 176 - className="w-full" 177 177 - date={new Date(field.value)} 178 178 - setDate={(date) => { 179 179 - field.onChange(date); 180 180 - }} 181 181 - /> 182 182 - <FormDescription> 183 183 - The date and time when the incident took place. 184 184 - </FormDescription> 185 185 - <FormMessage /> 186 186 - </FormItem> 187 187 - )} 188 188 - /> 189 189 - </div> 190 190 - </div> 191 191 - <div className="flex sm:justify-end"> 192 192 - <Button className="w-full sm:w-auto" size="lg"> 193 193 - {!isPending ? "Confirm" : <LoadingAnimation />} 194 194 - </Button> 195 195 - </div> 196 196 - </form> 197 197 - </Form> 198 198 - ); 199 199 - }

-103

apps/web/src/components/forms/status-report-update/form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { useRouter } from "next/navigation"; 5 5 - import * as React from "react"; 6 6 - import { useForm } from "react-hook-form"; 7 7 - 8 8 - import type { InsertStatusReportUpdate } from "@openstatus/db/src/schema"; 9 9 - import { insertStatusReportUpdateSchema } from "@openstatus/db/src/schema"; 10 10 - import { Button, Form } from "@openstatus/ui"; 11 11 - 12 12 - import { 13 13 - Tabs, 14 14 - TabsContent, 15 15 - TabsList, 16 16 - TabsTrigger, 17 17 - } from "@/components/dashboard/tabs"; 18 18 - import { LoadingAnimation } from "@/components/loading-animation"; 19 19 - import { toastAction } from "@/lib/toast"; 20 20 - import { api } from "@/trpc/client"; 21 21 - import { General } from "./general"; 22 22 - import { SectionDate } from "./section-date"; 23 23 - import { SectionMessage } from "./section-message"; 24 24 - 25 25 - interface Props { 26 26 - defaultValues?: InsertStatusReportUpdate; 27 27 - statusReportId: number; 28 28 - onSubmit?: () => void; 29 29 - } 30 30 - 31 31 - export function StatusReportUpdateForm({ 32 32 - defaultValues, 33 33 - statusReportId, 34 34 - onSubmit, 35 35 - }: Props) { 36 36 - const form = useForm<InsertStatusReportUpdate>({ 37 37 - resolver: zodResolver(insertStatusReportUpdateSchema), 38 38 - defaultValues: { 39 39 - id: defaultValues?.id || 0, 40 40 - status: defaultValues?.status || "investigating", 41 41 - message: defaultValues?.message, 42 42 - date: defaultValues?.date || new Date(), 43 43 - statusReportId, 44 44 - }, 45 45 - }); 46 46 - const router = useRouter(); 47 47 - const [isPending, startTransition] = React.useTransition(); 48 48 - 49 49 - const handleSubmit = ({ ...props }: InsertStatusReportUpdate) => { 50 50 - startTransition(async () => { 51 51 - try { 52 52 - if (defaultValues) { 53 53 - await api.statusReport.updateStatusReportUpdate.mutate({ 54 54 - ...props, 55 55 - }); 56 56 - } else { 57 57 - const statusReportUpdate = 58 58 - await api.statusReport.createStatusReportUpdate.mutate({ 59 59 - ...props, 60 60 - }); 61 61 - if (!statusReportUpdate) return; 62 62 - await api.emailRouter.sendStatusReport.mutate({ 63 63 - id: statusReportUpdate.id, 64 64 - }); 65 65 - } 66 66 - toastAction("saved"); 67 67 - onSubmit?.(); 68 68 - router.refresh(); 69 69 - } catch { 70 70 - toastAction("error"); 71 71 - } 72 72 - }); 73 73 - }; 74 74 - 75 75 - return ( 76 76 - <Form {...form}> 77 77 - <form 78 78 - onSubmit={async (e) => { 79 79 - e.preventDefault(); 80 80 - form.handleSubmit(handleSubmit)(e); 81 81 - }} 82 82 - className="grid w-full gap-6" 83 83 - > 84 84 - <General form={form} /> 85 85 - <Tabs defaultValue="message"> 86 86 - <TabsList> 87 87 - <TabsTrigger value="message">Message</TabsTrigger> 88 88 - <TabsTrigger value="date">Date & Time</TabsTrigger> 89 89 - </TabsList> 90 90 - <TabsContent value="message"> 91 91 - <SectionMessage form={form} /> 92 92 - </TabsContent> 93 93 - <TabsContent value="date"> 94 94 - <SectionDate form={form} /> 95 95 - </TabsContent> 96 96 - </Tabs> 97 97 - <Button className="w-full sm:w-auto" size="lg"> 98 98 - {!isPending ? "Confirm" : <LoadingAnimation />} 99 99 - </Button> 100 100 - </form> 101 101 - </Form> 102 102 - ); 103 103 - }

-64

apps/web/src/components/forms/status-report-update/general.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import { 6 6 - statusReportStatus, 7 7 - statusReportStatusSchema, 8 8 - } from "@openstatus/db/src/schema"; 9 9 - import type { InsertStatusReportUpdate } from "@openstatus/db/src/schema"; 10 10 - import { 11 11 - FormControl, 12 12 - FormField, 13 13 - FormItem, 14 14 - FormLabel, 15 15 - FormMessage, 16 16 - RadioGroup, 17 17 - RadioGroupItem, 18 18 - } from "@openstatus/ui"; 19 19 - 20 20 - import { Icons } from "@/components/icons"; 21 21 - import { statusDict } from "@/data/incidents-dictionary"; 22 22 - 23 23 - interface Props { 24 24 - form: UseFormReturn<InsertStatusReportUpdate>; 25 25 - } 26 26 - export function General({ form }: Props) { 27 27 - return ( 28 28 - <FormField 29 29 - control={form.control} 30 30 - name="status" 31 31 - render={({ field }) => ( 32 32 - <FormItem className="space-y-1 sm:col-span-full"> 33 33 - <FormLabel>Status</FormLabel> 34 34 - <FormMessage /> 35 35 - <RadioGroup 36 36 - onValueChange={(value) => 37 37 - field.onChange(statusReportStatusSchema.parse(value)) 38 38 - } // value is a string 39 39 - defaultValue={field.value} 40 40 - className="grid grid-cols-2 gap-4 sm:grid-cols-4" 41 41 - > 42 42 - {statusReportStatus.map((status) => { 43 43 - const { value, label, icon } = statusDict[status]; 44 44 - const Icon = Icons[icon]; 45 45 - return ( 46 46 - <FormItem key={value}> 47 47 - <FormLabel className="[&:has([data-state=checked])>div]:border-primary [&:has([data-state=checked])>div]:text-foreground"> 48 48 - <FormControl> 49 49 - <RadioGroupItem value={value} className="sr-only" /> 50 50 - </FormControl> 51 51 - <div className="flex w-full items-center justify-center rounded-lg border border-border px-3 py-2 text-center text-muted-foreground text-sm"> 52 52 - <Icon className="mr-2 h-4 w-4 shrink-0" /> 53 53 - <span className="truncate">{label}</span> 54 54 - </div> 55 55 - </FormLabel> 56 56 - </FormItem> 57 57 - ); 58 58 - })} 59 59 - </RadioGroup> 60 60 - </FormItem> 61 61 - )} 62 62 - /> 63 63 - ); 64 64 - }

-41

apps/web/src/components/forms/status-report-update/section-date.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import type { InsertStatusReportUpdate } from "@openstatus/db/src/schema"; 6 6 - import { 7 7 - DateTimePicker, 8 8 - FormDescription, 9 9 - FormField, 10 10 - FormItem, 11 11 - FormLabel, 12 12 - FormMessage, 13 13 - } from "@openstatus/ui"; 14 14 - 15 15 - interface Props { 16 16 - form: UseFormReturn<InsertStatusReportUpdate>; 17 17 - } 18 18 - export function SectionDate({ form }: Props) { 19 19 - return ( 20 20 - <FormField 21 21 - control={form.control} 22 22 - name="date" 23 23 - render={({ field }) => ( 24 24 - <FormItem> 25 25 - <FormLabel>Date</FormLabel> 26 26 - <DateTimePicker 27 27 - className="max-w-min rounded-md border" 28 28 - date={new Date(field.value)} 29 29 - setDate={(date) => { 30 30 - field.onChange(date); 31 31 - }} 32 32 - /> 33 33 - <FormDescription> 34 34 - The date and time when the incident took place. 35 35 - </FormDescription> 36 36 - <FormMessage /> 37 37 - </FormItem> 38 38 - )} 39 39 - /> 40 40 - ); 41 41 - }

-60

apps/web/src/components/forms/status-report-update/section-message.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import type { UseFormReturn } from "react-hook-form"; 4 4 - 5 5 - import type { InsertStatusReportUpdate } from "@openstatus/db/src/schema"; 6 6 - import { 7 7 - FormControl, 8 8 - FormDescription, 9 9 - FormField, 10 10 - FormItem, 11 11 - FormLabel, 12 12 - FormMessage, 13 13 - Tabs, 14 14 - TabsContent, 15 15 - TabsList, 16 16 - TabsTrigger, 17 17 - Textarea, 18 18 - } from "@openstatus/ui"; 19 19 - 20 20 - import { Preview } from "@/components/content/preview"; 21 21 - 22 22 - interface Props { 23 23 - form: UseFormReturn<InsertStatusReportUpdate>; 24 24 - } 25 25 - export function SectionMessage({ form }: Props) { 26 26 - return ( 27 27 - <FormField 28 28 - control={form.control} 29 29 - name="message" 30 30 - render={({ field }) => ( 31 31 - <FormItem className="sm:col-span-full"> 32 32 - <FormLabel>Message</FormLabel> 33 33 - <Tabs defaultValue="write"> 34 34 - <TabsList> 35 35 - <TabsTrigger value="write">Write</TabsTrigger> 36 36 - <TabsTrigger value="preview">Preview</TabsTrigger> 37 37 - </TabsList> 38 38 - <TabsContent value="write"> 39 39 - <FormControl> 40 40 - <Textarea 41 41 - placeholder="We are encountering..." 42 42 - className="h-auto w-full resize-none" 43 43 - rows={9} 44 44 - {...field} 45 45 - /> 46 46 - </FormControl> 47 47 - </TabsContent> 48 48 - <TabsContent value="preview"> 49 49 - <Preview md={form.getValues("message")} /> 50 50 - </TabsContent> 51 51 - </Tabs> 52 52 - <FormDescription> 53 53 - Tell your user what&apos;s happening. Supports markdown. 54 54 - </FormDescription> 55 55 - <FormMessage /> 56 56 - </FormItem> 57 57 - )} 58 58 - /> 59 59 - ); 60 60 - }

-153

apps/web/src/components/forms/status-report/form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { usePathname, useRouter } from "next/navigation"; 5 5 - import * as React from "react"; 6 6 - import { useForm } from "react-hook-form"; 7 7 - 8 8 - import { insertStatusReportSchema } from "@openstatus/db/src/schema"; 9 9 - import type { InsertStatusReport, Monitor } from "@openstatus/db/src/schema"; 10 10 - import { Form } from "@openstatus/ui"; 11 11 - 12 12 - import { 13 13 - Tabs, 14 14 - TabsContent, 15 15 - TabsList, 16 16 - TabsTrigger, 17 17 - } from "@/components/dashboard/tabs"; 18 18 - import { toastAction } from "@/lib/toast"; 19 19 - import { api } from "@/trpc/client"; 20 20 - import { SaveButton } from "../shared/save-button"; 21 21 - import { General } from "./general"; 22 22 - import { SectionConnect } from "./section-connect"; 23 23 - import { SectionUpdateMessage } from "./section-update-message"; 24 24 - 25 25 - interface Props { 26 26 - defaultSection?: string; 27 27 - defaultValues?: InsertStatusReport; 28 28 - monitors?: Monitor[]; 29 29 - nextUrl?: string; 30 30 - pageId: number; 31 31 - } 32 32 - 33 33 - export function StatusReportForm({ 34 34 - defaultSection, 35 35 - defaultValues, 36 36 - monitors, 37 37 - nextUrl, 38 38 - pageId, 39 39 - }: Props) { 40 40 - const form = useForm<InsertStatusReport>({ 41 41 - resolver: zodResolver(insertStatusReportSchema), 42 42 - defaultValues: defaultValues 43 43 - ? { 44 44 - id: defaultValues.id, 45 45 - title: defaultValues.title, 46 46 - status: defaultValues.status, 47 47 - monitors: defaultValues.monitors, 48 48 - // include update on creation 49 49 - message: defaultValues.message, 50 50 - date: defaultValues.date, 51 51 - } 52 52 - : { 53 53 - status: "investigating", 54 54 - date: new Date(), 55 55 - }, 56 56 - }); 57 57 - const pathname = usePathname(); 58 58 - const router = useRouter(); 59 59 - const [isPending, startTransition] = React.useTransition(); 60 60 - 61 61 - const onSubmit = ({ ...props }: InsertStatusReport) => { 62 62 - startTransition(async () => { 63 63 - try { 64 64 - if (defaultValues) { 65 65 - await api.statusReport.updateStatusReport.mutate({ 66 66 - pageId, 67 67 - ...props, 68 68 - }); 69 69 - } else { 70 70 - const { message, date, status, ...rest } = props; 71 71 - const statusReport = await api.statusReport.createStatusReport.mutate( 72 72 - { 73 73 - status, 74 74 - message, 75 75 - pageId, 76 76 - ...rest, 77 77 - }, 78 78 - ); 79 79 - // include update on creation 80 80 - if (statusReport?.id) { 81 81 - const statusReportUpdate = 82 82 - await api.statusReport.createStatusReportUpdate.mutate({ 83 83 - message, 84 84 - date, 85 85 - status, 86 86 - statusReportId: statusReport.id, 87 87 - }); 88 88 - 89 89 - if (statusReportUpdate) { 90 90 - await api.emailRouter.sendStatusReport.mutate({ 91 91 - id: statusReportUpdate.id, 92 92 - }); 93 93 - } 94 94 - } 95 95 - } 96 96 - if (nextUrl) { 97 97 - router.push(nextUrl); 98 98 - } 99 99 - router.refresh(); 100 100 - toastAction("saved"); 101 101 - } catch { 102 102 - toastAction("error"); 103 103 - } 104 104 - }); 105 105 - }; 106 106 - 107 107 - function onValueChange(value: string) { 108 108 - // REMINDER: we are not merging the searchParams here 109 109 - // we are just setting the section to allow refreshing the page 110 110 - const params = new URLSearchParams(); 111 111 - params.set("section", value); 112 112 - router.push(`${pathname}?${params.toString()}`); 113 113 - } 114 114 - 115 115 - return ( 116 116 - <Form {...form}> 117 117 - <form 118 118 - onSubmit={async (e) => { 119 119 - e.preventDefault(); 120 120 - form.handleSubmit(onSubmit)(e); 121 121 - }} 122 122 - className="grid w-full gap-6" 123 123 - > 124 124 - <General form={form} /> 125 125 - <Tabs 126 126 - defaultValue={defaultSection} 127 127 - className="w-full" 128 128 - onValueChange={onValueChange} 129 129 - > 130 130 - <TabsList> 131 131 - {!defaultValues ? ( 132 132 - <TabsTrigger value="update-message">Message</TabsTrigger> 133 133 - ) : null} 134 134 - <TabsTrigger value="connect">Connect</TabsTrigger> 135 135 - </TabsList> 136 136 - {!defaultValues ? ( 137 137 - <TabsContent value="update-message"> 138 138 - <SectionUpdateMessage form={form} /> 139 139 - </TabsContent> 140 140 - ) : null} 141 141 - <TabsContent value="connect"> 142 142 - <SectionConnect form={form} monitors={monitors} /> 143 143 - </TabsContent> 144 144 - </Tabs> 145 145 - <SaveButton 146 146 - isPending={isPending} 147 147 - isDirty={form.formState.isDirty} 148 148 - onSubmit={form.handleSubmit(onSubmit)} 149 149 - /> 150 150 - </form> 151 151 - </Form> 152 152 - ); 153 153 - }

-90

apps/web/src/components/forms/status-report/general.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import type { UseFormReturn } from "react-hook-form"; 3 3 - 4 4 - import { 5 5 - statusReportStatus, 6 6 - statusReportStatusSchema, 7 7 - } from "@openstatus/db/src/schema"; 8 8 - import type { InsertStatusReport } from "@openstatus/db/src/schema"; 9 9 - import { 10 10 - FormControl, 11 11 - FormDescription, 12 12 - FormField, 13 13 - FormItem, 14 14 - FormLabel, 15 15 - FormMessage, 16 16 - Input, 17 17 - RadioGroup, 18 18 - RadioGroupItem, 19 19 - } from "@openstatus/ui"; 20 20 - 21 21 - import { Icons } from "@/components/icons"; 22 22 - import { statusDict } from "@/data/incidents-dictionary"; 23 23 - import { SectionHeader } from "../shared/section-header"; 24 24 - 25 25 - interface Props { 26 26 - form: UseFormReturn<InsertStatusReport>; 27 27 - } 28 28 - 29 29 - export function General({ form }: Props) { 30 30 - return ( 31 31 - <div className="grid gap-4 sm:grid-cols-3 sm:gap-6"> 32 32 - <SectionHeader 33 33 - title="Inform" 34 34 - description="Keep your users informed about what just happened." 35 35 - /> 36 36 - <div className="grid gap-4 sm:col-span-2"> 37 37 - <FormField 38 38 - control={form.control} 39 39 - name="title" 40 40 - render={({ field }) => ( 41 41 - <FormItem> 42 42 - <FormLabel>Title</FormLabel> 43 43 - <FormControl> 44 44 - <Input placeholder="Downtime..." {...field} /> 45 45 - </FormControl> 46 46 - <FormDescription>The title of your outage.</FormDescription> 47 47 - <FormMessage /> 48 48 - </FormItem> 49 49 - )} 50 50 - /> 51 51 - <FormField 52 52 - control={form.control} 53 53 - name="status" 54 54 - render={({ field }) => ( 55 55 - <FormItem className="space-y-1"> 56 56 - <FormLabel>Status</FormLabel> 57 57 - <FormDescription>Select the current status.</FormDescription> 58 58 - <FormMessage /> 59 59 - <RadioGroup 60 60 - onValueChange={(value) => 61 61 - field.onChange(statusReportStatusSchema.parse(value)) 62 62 - } // value is a string 63 63 - defaultValue={field.value} 64 64 - className="grid grid-cols-2 gap-4 sm:grid-cols-4" 65 65 - > 66 66 - {statusReportStatus.map((status) => { 67 67 - const { value, label, icon } = statusDict[status]; 68 68 - const Icon = Icons[icon]; 69 69 - return ( 70 70 - <FormItem key={value}> 71 71 - <FormLabel className="[&:has([data-state=checked])>div]:border-primary [&:has([data-state=checked])>div]:text-foreground"> 72 72 - <FormControl> 73 73 - <RadioGroupItem value={value} className="sr-only" /> 74 74 - </FormControl> 75 75 - <div className="flex w-full items-center justify-center rounded-lg border border-border px-3 py-2 text-center text-muted-foreground text-sm"> 76 76 - <Icon className="mr-2 h-4 w-4 shrink-0" /> 77 77 - <span className="truncate">{label}</span> 78 78 - </div> 79 79 - </FormLabel> 80 80 - </FormItem> 81 81 - ); 82 82 - })} 83 83 - </RadioGroup> 84 84 - </FormItem> 85 85 - )} 86 86 - /> 87 87 - </div> 88 88 - </div> 89 89 - ); 90 90 - }

-84

apps/web/src/components/forms/status-report/section-connect.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import type { UseFormReturn } from "react-hook-form"; 3 3 - 4 4 - import type { InsertStatusReport, Monitor } from "@openstatus/db/src/schema"; 5 5 - import { 6 6 - FormControl, 7 7 - FormDescription, 8 8 - FormField, 9 9 - FormItem, 10 10 - FormLabel, 11 11 - FormMessage, 12 12 - } from "@openstatus/ui"; 13 13 - 14 14 - import { CheckboxLabel } from "../shared/checkbox-label"; 15 15 - 16 16 - interface Props { 17 17 - form: UseFormReturn<InsertStatusReport>; 18 18 - monitors?: Monitor[]; 19 19 - } 20 20 - 21 21 - export function SectionConnect({ form, monitors }: Props) { 22 22 - return ( 23 23 - <div className="grid w-full gap-4"> 24 24 - <div className="flex flex-col gap-3"> 25 25 - <FormField 26 26 - control={form.control} 27 27 - name="monitors" 28 28 - render={() => ( 29 29 - <FormItem> 30 30 - <div className="mb-4"> 31 31 - <FormLabel>Monitors</FormLabel> 32 32 - {/* TODO: second phrase can be set inside of a (?) tooltip */} 33 33 - <FormDescription> 34 34 - Select the monitors that you want to refer the incident to. It 35 35 - will be displayed on the status page they are attached to. 36 36 - </FormDescription> 37 37 - </div> 38 38 - <div className="grid grid-cols-1 grid-rows-1 gap-6 sm:grid-cols-2 md:grid-cols-3"> 39 39 - {monitors?.map((item) => ( 40 40 - <FormField 41 41 - key={item.id} 42 42 - control={form.control} 43 43 - name="monitors" 44 44 - render={({ field }) => { 45 45 - return ( 46 46 - <FormItem key={item.id} className="h-full w-full"> 47 47 - <FormControl className="w-full"> 48 48 - <CheckboxLabel 49 49 - id={String(item.id)} 50 50 - name="monitor" 51 51 - checked={field.value?.includes(item.id)} 52 52 - onCheckedChange={(checked) => { 53 53 - return checked 54 54 - ? field.onChange([ 55 55 - ...(field.value || []), 56 56 - item.id, 57 57 - ]) 58 58 - : field.onChange( 59 59 - field.value?.filter( 60 60 - (value) => value !== item.id, 61 61 - ), 62 62 - ); 63 63 - }} 64 64 - > 65 65 - {item.name} 66 66 - </CheckboxLabel> 67 67 - </FormControl> 68 68 - </FormItem> 69 69 - ); 70 70 - }} 71 71 - /> 72 72 - ))} 73 73 - </div> 74 74 - {!monitors || monitors.length === 0 ? ( 75 75 - <FormDescription>Missing monitors.</FormDescription> 76 76 - ) : null} 77 77 - <FormMessage /> 78 78 - </FormItem> 79 79 - )} 80 80 - /> 81 81 - </div> 82 82 - </div> 83 83 - ); 84 84 - }

-87

apps/web/src/components/forms/status-report/section-update-message.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import type { UseFormReturn } from "react-hook-form"; 3 3 - 4 4 - import type { InsertStatusReport } from "@openstatus/db/src/schema"; 5 5 - import { 6 6 - DateTimePickerPopover, 7 7 - FormControl, 8 8 - FormDescription, 9 9 - FormField, 10 10 - FormItem, 11 11 - FormLabel, 12 12 - FormMessage, 13 13 - Tabs, 14 14 - TabsContent, 15 15 - TabsList, 16 16 - TabsTrigger, 17 17 - Textarea, 18 18 - } from "@openstatus/ui"; 19 19 - 20 20 - import { Preview } from "@/components/content/preview"; 21 21 - import { SectionHeader } from "../shared/section-header"; 22 22 - 23 23 - interface Props { 24 24 - form: UseFormReturn<InsertStatusReport>; 25 25 - } 26 26 - 27 27 - export function SectionUpdateMessage({ form }: Props) { 28 28 - return ( 29 29 - <div className="grid w-full gap-4"> 30 30 - <SectionHeader 31 31 - title="Status Update Message" 32 32 - description="Describe the current status of the incident." 33 33 - /> 34 34 - <FormField 35 35 - control={form.control} 36 36 - name="message" 37 37 - render={({ field }) => ( 38 38 - <FormItem className="sm:col-span-4"> 39 39 - <FormLabel>Message</FormLabel> 40 40 - <Tabs defaultValue="write"> 41 41 - <TabsList> 42 42 - <TabsTrigger value="write">Write</TabsTrigger> 43 43 - <TabsTrigger value="preview">Preview</TabsTrigger> 44 44 - </TabsList> 45 45 - <TabsContent value="write"> 46 46 - <FormControl> 47 47 - <Textarea 48 48 - placeholder="We are encountering..." 49 49 - className="h-auto w-full resize-none" 50 50 - rows={9} 51 51 - {...field} 52 52 - /> 53 53 - </FormControl> 54 54 - </TabsContent> 55 55 - <TabsContent value="preview"> 56 56 - <Preview md={form.getValues("message")} /> 57 57 - </TabsContent> 58 58 - </Tabs> 59 59 - <FormDescription> 60 60 - Tell your user what&apos;s happening. Supports markdown. 61 61 - </FormDescription> 62 62 - <FormMessage /> 63 63 - </FormItem> 64 64 - )} 65 65 - /> 66 66 - <FormField 67 67 - control={form.control} 68 68 - name="date" 69 69 - render={({ field }) => ( 70 70 - <FormItem className="flex flex-col sm:col-span-full"> 71 71 - <FormLabel>Date</FormLabel> 72 72 - <DateTimePickerPopover 73 73 - date={field.value ? new Date(field.value) : new Date()} 74 74 - setDate={(date) => { 75 75 - field.onChange(date); 76 76 - }} 77 77 - /> 78 78 - <FormDescription> 79 79 - The date and time when the incident took place. 80 80 - </FormDescription> 81 81 - <FormMessage /> 82 82 - </FormItem> 83 83 - )} 84 84 - /> 85 85 - </div> 86 86 - ); 87 87 - }

-79

apps/web/src/components/forms/workspace-form.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { useRouter } from "next/navigation"; 5 5 - import { useTransition } from "react"; 6 6 - import { useForm } from "react-hook-form"; 7 7 - import * as z from "zod"; 8 8 - 9 9 - import { 10 10 - Button, 11 11 - Form, 12 12 - FormControl, 13 13 - FormDescription, 14 14 - FormField, 15 15 - FormItem, 16 16 - FormLabel, 17 17 - FormMessage, 18 18 - Input, 19 19 - } from "@openstatus/ui"; 20 20 - 21 21 - import { toastAction } from "@/lib/toast"; 22 22 - import { api } from "@/trpc/client"; 23 23 - import { LoadingAnimation } from "../loading-animation"; 24 24 - 25 25 - // or insertWorkspaceSchema.pick({ name: true }) and updating name to not be nullable 26 26 - const schema = z.object({ 27 27 - name: z.string().min(3, "workspace names must contain at least 3 characters"), 28 28 - }); 29 29 - type Schema = z.infer<typeof schema>; 30 30 - 31 31 - export function WorkspaceForm({ defaultValues }: { defaultValues: Schema }) { 32 32 - const form = useForm<Schema>({ 33 33 - resolver: zodResolver(schema), 34 34 - defaultValues, 35 35 - }); 36 36 - const router = useRouter(); 37 37 - const [isPending, startTransition] = useTransition(); 38 38 - 39 39 - async function onSubmit(data: Schema) { 40 40 - startTransition(async () => { 41 41 - try { 42 42 - await api.workspace.updateWorkspace.mutate(data); 43 43 - toastAction("saved"); 44 44 - router.refresh(); 45 45 - } catch { 46 46 - toastAction("error"); 47 47 - } 48 48 - }); 49 49 - } 50 50 - 51 51 - return ( 52 52 - <Form {...form}> 53 53 - <form 54 54 - onSubmit={form.handleSubmit(onSubmit)} 55 55 - className="grid w-full grid-cols-1 items-center gap-6 sm:grid-cols-6" 56 56 - > 57 57 - <FormField 58 58 - control={form.control} 59 59 - name="name" 60 60 - render={({ field }) => ( 61 61 - <FormItem className="sm:col-span-4"> 62 62 - <FormLabel>Name</FormLabel> 63 63 - <FormControl> 64 64 - <Input placeholder="Documenso" {...field} /> 65 65 - </FormControl> 66 66 - <FormDescription>The name of your workspace.</FormDescription> 67 67 - <FormMessage /> 68 68 - </FormItem> 69 69 - )} 70 70 - /> 71 71 - <div className="sm:col-span-full"> 72 72 - <Button className="w-full sm:w-auto" size="lg"> 73 73 - {!isPending ? "Confirm" : <LoadingAnimation />} 74 74 - </Button> 75 75 - </div> 76 76 - </form> 77 77 - </Form> 78 78 - ); 79 79 - }

-30

apps/web/src/components/layout/app-footer.tsx

reviewed

··· 1 1 - import Link from "next/link"; 2 2 - 3 3 - import { Shell } from "../dashboard/shell"; 4 4 - 5 5 - export function AppFooter() { 6 6 - return ( 7 7 - <footer className="w-full"> 8 8 - <Shell className="flex items-center justify-between"> 9 9 - <div className="font-light text-muted-foreground text-xs"> 10 10 - All rights reserved &copy; 11 11 - </div> 12 12 - <div className="text-right text-xs"> 13 13 - <Link 14 14 - href="/legal/terms" 15 15 - className="text-foreground underline underline-offset-4 hover:no-underline" 16 16 - > 17 17 - Terms 18 18 - </Link> 19 19 - <span className="mx-1 text-muted-foreground/70">&bull;</span> 20 20 - <Link 21 21 - href="/legal/privacy" 22 22 - className="text-foreground underline underline-offset-4 hover:no-underline" 23 23 - > 24 24 - Privacy 25 25 - </Link> 26 26 - </div> 27 27 - </Shell> 28 28 - </footer> 29 29 - ); 30 30 - }

-42

apps/web/src/components/layout/app-menu.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { ChevronsUpDown } from "lucide-react"; 4 4 - import { useSelectedLayoutSegment } from "next/navigation"; 5 5 - import * as React from "react"; 6 6 - 7 7 - import { 8 8 - Collapsible, 9 9 - CollapsibleContent, 10 10 - CollapsibleTrigger, 11 11 - } from "@openstatus/ui/src/components/collapsible"; 12 12 - 13 13 - import type { Page } from "@/config/pages"; 14 14 - import { AppSidebar } from "./app-sidebar"; 15 15 - 16 16 - export function AppMenu({ page }: { page?: Page }) { 17 17 - const [open, setOpen] = React.useState(false); 18 18 - 19 19 - const selectedSegment = useSelectedLayoutSegment(); 20 20 - 21 21 - if (!page) return null; 22 22 - 23 23 - const activeChild = page?.children?.find( 24 24 - ({ segment }) => segment === selectedSegment, 25 25 - ); 26 26 - 27 27 - return ( 28 28 - <Collapsible open={open} onOpenChange={(value) => setOpen(value)}> 29 29 - <CollapsibleTrigger className="flex w-full items-center justify-between"> 30 30 - <span className="font-medium text-foreground"> 31 31 - {activeChild?.title} 32 32 - </span> 33 33 - <span className="inline-flex h-9 w-9 items-center justify-center rounded-md font-medium text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"> 34 34 - <ChevronsUpDown className="h-4 w-4" /> 35 35 - </span> 36 36 - </CollapsibleTrigger> 37 37 - <CollapsibleContent className="mt-2"> 38 38 - <AppSidebar page={page} /> 39 39 - </CollapsibleContent> 40 40 - </Collapsible> 41 41 - ); 42 42 - }

-20

apps/web/src/components/layout/app-page-layout.tsx

reviewed

··· 1 1 - import { Shell } from "@/components/dashboard/shell"; 2 2 - import { cn } from "@/lib/utils"; 3 3 - 4 4 - export default function AppPageLayout({ 5 5 - children, 6 6 - className, 7 7 - }: { 8 8 - children: React.ReactNode; 9 9 - className?: string; 10 10 - }) { 11 11 - return ( 12 12 - <Shell className="relative flex flex-1 flex-col overflow-x-hidden"> 13 13 - <div 14 14 - className={cn("flex h-full flex-1 flex-col gap-6 md:gap-8", className)} 15 15 - > 16 16 - {children} 17 17 - </div> 18 18 - </Shell> 19 19 - ); 20 20 - }

-39

apps/web/src/components/layout/app-page-with-sidebar-layout.tsx

reviewed

··· 1 1 - import { Shell } from "@/components/dashboard/shell"; 2 2 - import type { PageId } from "@/config/pages"; 3 3 - import { pagesConfig } from "@/config/pages"; 4 4 - import { cn } from "@/lib/utils"; 5 5 - import { AppMenu } from "./app-menu"; 6 6 - import { AppSidebar } from "./app-sidebar"; 7 7 - 8 8 - export default function AppPageWithSidebarLayout({ 9 9 - id, 10 10 - className, 11 11 - children, 12 12 - }: { 13 13 - id?: PageId; 14 14 - className?: string; 15 15 - children: React.ReactNode; 16 16 - }) { 17 17 - const page = pagesConfig.find((page) => page.segment === id); 18 18 - 19 19 - return ( 20 20 - <div className="flex w-full flex-1 flex-col gap-6 lg:flex-row lg:gap-8"> 21 21 - <Shell className="block py-3 md:py-3 lg:hidden"> 22 22 - <AppMenu page={page} /> 23 23 - </Shell> 24 24 - <Shell className="hidden max-h-[calc(100vh-8rem)] max-w-min shrink-0 lg:sticky lg:top-28 lg:block"> 25 25 - <AppSidebar page={page} /> 26 26 - </Shell> 27 27 - <Shell className="relative flex-1 overflow-hidden"> 28 28 - <div 29 29 - className={cn( 30 30 - "flex h-full flex-1 flex-col gap-6 md:gap-8", 31 31 - className, 32 32 - )} 33 33 - > 34 34 - {children} 35 35 - </div> 36 36 - </Shell> 37 37 - </div> 38 38 - ); 39 39 - }

-52

apps/web/src/components/layout/app-sidebar.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { useParams, useSelectedLayoutSegment } from "next/navigation"; 4 4 - 5 5 - import type { Page } from "@/config/pages"; 6 6 - import { ProBanner } from "../billing/pro-banner"; 7 7 - import { AppLink } from "./app-link"; 8 8 - 9 9 - function replacePlaceholders( 10 10 - template: string, 11 11 - values: { [key: string]: string }, 12 12 - ): string { 13 13 - return template.replace(/\[([^\]]+)\]/g, (_, key) => { 14 14 - return values[key] || `[${key}]`; 15 15 - }); 16 16 - } 17 17 - 18 18 - export function AppSidebar({ page }: { page?: Page }) { 19 19 - const params = useParams<Record<string, string>>(); 20 20 - const selectedSegment = useSelectedLayoutSegment(); 21 21 - 22 22 - if (!page) return null; 23 23 - 24 24 - return ( 25 25 - <div className="flex h-full flex-col justify-between gap-2"> 26 26 - <div className="grid gap-2"> 27 27 - <p className="hidden px-3 font-medium text-foreground text-lg lg:block"> 28 28 - {page?.title} 29 29 - </p> 30 30 - <ul className="grid gap-2"> 31 31 - {page?.children?.map(({ title, segment, icon, disabled, href }) => { 32 32 - const prefix = `/app/${params.workspaceSlug}`; 33 33 - return ( 34 34 - <li key={title} className="w-full"> 35 35 - <AppLink 36 36 - label={title} 37 37 - href={`${prefix}${replacePlaceholders(href, params)}`} 38 38 - disabled={disabled} 39 39 - active={segment === selectedSegment} 40 40 - icon={icon} 41 41 - /> 42 42 - </li> 43 43 - ); 44 44 - })} 45 45 - </ul> 46 46 - </div> 47 47 - <div className="hidden lg:block"> 48 48 - <ProBanner /> 49 49 - </div> 50 50 - </div> 51 51 - ); 52 52 - }

-78

apps/web/src/components/layout/header/app-header.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { allChangelogs } from "content-collections"; 4 4 - import { ArrowUpRight } from "lucide-react"; 5 5 - import Link from "next/link"; 6 6 - 7 7 - import { Button, Skeleton } from "@openstatus/ui"; 8 8 - 9 9 - import { Shell } from "@/components/dashboard/shell"; 10 10 - import { useCookieState } from "@/hooks/use-cookie-state"; 11 11 - import { AppTabs } from "./app-tabs"; 12 12 - import { Breadcrumbs } from "./breadcrumbs"; 13 13 - import { UserNav } from "./user-nav"; 14 14 - 15 15 - const lastChangelog = allChangelogs 16 16 - .sort( 17 17 - (a, b) => 18 18 - new Date(a.publishedAt).getTime() - new Date(b.publishedAt).getTime(), 19 19 - ) 20 20 - .pop(); 21 21 - 22 22 - export function AppHeader() { 23 23 - const [lastViewed, setLastViewed] = useCookieState( 24 24 - "last-viewed-changelog", 25 25 - new Date(0).toISOString(), 26 26 - ); 27 27 - 28 28 - const show = 29 29 - lastChangelog && lastViewed 30 30 - ? new Date(lastViewed) < new Date(lastChangelog.publishedAt) 31 31 - : false; 32 32 - 33 33 - return ( 34 34 - // TODO: discuss amount of top-3 and top-6 35 35 - <header className="sticky top-2 z-50 w-full border-border"> 36 36 - <Shell className="bg-background/70 px-3 py-3 backdrop-blur-lg md:px-6 md:py-3"> 37 37 - <div className="flex w-full items-center justify-between"> 38 38 - <Breadcrumbs /> 39 39 - {/* */} 40 40 - <div className="flex items-center gap-1"> 41 41 - <ul className="hidden gap-1 sm:flex"> 42 42 - <li className="w-full"> 43 43 - <Button variant="link" asChild> 44 44 - <Link 45 45 - href="/changelog" 46 46 - target="_blank" 47 47 - onClick={() => setLastViewed(new Date().toISOString())} 48 48 - className="relative" 49 49 - > 50 50 - Changelog 51 51 - {show ? ( 52 52 - <span className="absolute top-1 right-1 h-2 w-2 rounded-full bg-green-500" /> 53 53 - ) : null} 54 54 - </Link> 55 55 - </Button> 56 56 - </li> 57 57 - <li className="w-full"> 58 58 - <Button variant="link" asChild> 59 59 - <Link href="/docs" target="_blank" className="group"> 60 60 - Docs 61 61 - <ArrowUpRight className="ml-1 h-4 w-4 shrink-0 text-muted-foreground group-hover:text-foreground" /> 62 62 - </Link> 63 63 - </Button> 64 64 - </li> 65 65 - </ul> 66 66 - <div className="relative"> 67 67 - <Skeleton className="h-8 w-8 rounded-full" /> 68 68 - <div className="absolute inset-0"> 69 69 - <UserNav /> 70 70 - </div> 71 71 - </div> 72 72 - </div> 73 73 - </div> 74 74 - <AppTabs /> 75 75 - </Shell> 76 76 - </header> 77 77 - ); 78 78 - }

-60

apps/web/src/components/layout/header/app-tabs.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { useParams, useSelectedLayoutSegment } from "next/navigation"; 4 4 - 5 5 - import { TabsContainer, TabsLink } from "@/components/dashboard/tabs-link"; 6 6 - import { StatusDot } from "@/components/monitor/status-dot"; 7 7 - import { pagesConfig } from "@/config/pages"; 8 8 - import { api } from "@/trpc/client"; 9 9 - import { useEffect, useState } from "react"; 10 10 - 11 11 - export function AppTabs() { 12 12 - const params = useParams(); 13 13 - const selectedSegment = useSelectedLayoutSegment(); 14 14 - 15 15 - if (!params?.workspaceSlug) return null; 16 16 - 17 17 - return ( 18 18 - <div className="-mb-3"> 19 19 - <TabsContainer> 20 20 - {pagesConfig.map(({ title, segment, href }) => { 21 21 - const active = segment === selectedSegment; 22 22 - return ( 23 23 - <TabsLink 24 24 - key={segment} 25 25 - active={active} 26 26 - href={`/app/${params?.workspaceSlug}${href}`} 27 27 - prefetch={false} 28 28 - className="relative" 29 29 - > 30 30 - {title} 31 31 - {/* {segment === "incidents" ? <IncidentsDot /> : null} */} 32 32 - </TabsLink> 33 33 - ); 34 34 - })} 35 35 - </TabsContainer> 36 36 - </div> 37 37 - ); 38 38 - } 39 39 - 40 40 - // FIXME: use react-query - once the user resolves the incident, the dot should disappear without refresh 41 41 - export function IncidentsDot() { 42 42 - const [open, setOpen] = useState(false); 43 43 - 44 44 - useEffect(() => { 45 45 - async function checkOpenIncidents() { 46 46 - const incidents = await api.incident.getOpenIncidents.query(); 47 47 - if (incidents.length) setOpen(true); 48 48 - } 49 49 - 50 50 - checkOpenIncidents(); 51 51 - }, []); 52 52 - 53 53 - if (!open) return null; 54 54 - 55 55 - return ( 56 56 - <div className="absolute top-1 right-1"> 57 57 - <StatusDot status="error" active /> 58 58 - </div> 59 59 - ); 60 60 - }

-107

apps/web/src/components/layout/header/breadcrumbs.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { Slash } from "lucide-react"; 4 4 - import Image from "next/image"; 5 5 - import Link from "next/link"; 6 6 - import { 7 7 - useParams, 8 8 - useSelectedLayoutSegment, 9 9 - useSelectedLayoutSegments, 10 10 - } from "next/navigation"; 11 11 - import { Fragment, useEffect, useState } from "react"; 12 12 - 13 13 - import { SelectWorkspace } from "@/components/workspace/select-workspace"; 14 14 - import { notEmpty } from "@/lib/utils"; 15 15 - import { api } from "@/trpc/client"; 16 16 - 17 17 - export function Breadcrumbs() { 18 18 - const params = useParams(); 19 19 - // const selectedSegment = useSelectedLayoutSegment(); 20 20 - // const selectedSegments = useSelectedLayoutSegments(); 21 21 - // const label = useIdLabel(); 22 22 - 23 23 - // // remove route groups like '(overview)' from the segments 24 24 - // const segmentsWithoutRouteGroup = selectedSegments.filter( 25 25 - // (segment) => !segment.startsWith("("), 26 26 - // ); 27 27 - 28 28 - // const isRoot = segmentsWithoutRouteGroup.length <= 1; 29 29 - 30 30 - // const page = pagesConfig.find(({ segment }) => segment === selectedSegment); 31 31 - const breadcrumbs = [ 32 32 - // !isRoot ? page?.title : null, 33 33 - // label, 34 34 - ].filter(notEmpty); 35 35 - 36 36 - const _isWorkspaceSlug = params.workspaceSlug; 37 37 - 38 38 - return ( 39 39 - <div className="flex items-center"> 40 40 - <Link href="/app" className="shrink-0"> 41 41 - <Image 42 42 - src="/icon.png" 43 43 - alt="OpenStatus" 44 44 - height={30} 45 45 - width={30} 46 46 - className="rounded-full border border-border" 47 47 - /> 48 48 - </Link> 49 49 - <Slash className="-rotate-12 mr-0.5 ml-2.5 h-4 w-4 text-muted-foreground" /> 50 50 - {params.workspaceSlug ? ( 51 51 - <div className="w-40"> 52 52 - <SelectWorkspace /> 53 53 - </div> 54 54 - ) : null} 55 55 - {breadcrumbs.map((breadcrumb) => ( 56 56 - <Fragment key={breadcrumb}> 57 57 - <Slash className="-rotate-12 mr-2.5 ml-0.5 h-4 w-4 text-muted-foreground" /> 58 58 - <p className="rounded-md font-medium text-primary text-sm"> 59 59 - {breadcrumb} 60 60 - </p> 61 61 - </Fragment> 62 62 - ))} 63 63 - </div> 64 64 - ); 65 65 - } 66 66 - 67 67 - // This is a custom hook that returns the label of the current id 68 68 - // biome-ignore lint/correctness/noUnusedVariables: <explanation> 69 69 - function useIdLabel() { 70 70 - const params = useParams(); 71 71 - const selectedSegment = useSelectedLayoutSegment(); 72 72 - const selectedSegments = useSelectedLayoutSegments(); 73 73 - const [label, setLabel] = useState<string>(); 74 74 - 75 75 - // remove route groups like '(overview)' from the segments 76 76 - const segmentsWithoutRouteGroup = selectedSegments.filter( 77 77 - (segment) => !segment.startsWith("("), 78 78 - ); 79 79 - 80 80 - const isRoot = segmentsWithoutRouteGroup.length <= 1; 81 81 - 82 82 - useEffect(() => { 83 83 - async function getInfos() { 84 84 - const { id } = params; 85 85 - if (!isRoot && id) { 86 86 - if (selectedSegment === "monitors") { 87 87 - const monitor = await api.monitor.getMonitorById.query({ 88 88 - id: Number(id), 89 89 - }); 90 90 - if (monitor) setLabel(monitor.name); 91 91 - } 92 92 - if (selectedSegment === "status-pages") { 93 93 - const statusPage = await api.page.getPageById.query({ 94 94 - id: Number(id), 95 95 - }); 96 96 - if (statusPage) setLabel(statusPage.title); 97 97 - } 98 98 - } 99 99 - if (isRoot && label) { 100 100 - setLabel(undefined); 101 101 - } 102 102 - } 103 103 - getInfos(); 104 104 - }, [params, selectedSegment, isRoot, label]); 105 105 - 106 106 - return label; 107 107 - }

-77

apps/web/src/components/status-update/delete-status-update.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { useRouter } from "next/navigation"; 4 4 - import * as React from "react"; 5 5 - 6 6 - import { 7 7 - AlertDialog, 8 8 - AlertDialogAction, 9 9 - AlertDialogCancel, 10 10 - AlertDialogContent, 11 11 - AlertDialogDescription, 12 12 - AlertDialogFooter, 13 13 - AlertDialogHeader, 14 14 - AlertDialogTitle, 15 15 - AlertDialogTrigger, 16 16 - } from "@openstatus/ui/src/components/alert-dialog"; 17 17 - import { Button } from "@openstatus/ui/src/components/button"; 18 18 - 19 19 - import { Icons } from "@/components/icons"; 20 20 - import { LoadingAnimation } from "@/components/loading-animation"; 21 21 - import { toastAction } from "@/lib/toast"; 22 22 - import { api } from "@/trpc/client"; 23 23 - 24 24 - export function DeleteStatusReportUpdateButtonIcon({ id }: { id: number }) { 25 25 - const router = useRouter(); 26 26 - const [alertOpen, setAlertOpen] = React.useState(false); 27 27 - const [isPending, startTransition] = React.useTransition(); 28 28 - 29 29 - async function onDelete() { 30 30 - startTransition(async () => { 31 31 - try { 32 32 - await api.statusReport.deleteStatusReportUpdate.mutate({ id }); 33 33 - toastAction("deleted"); 34 34 - router.refresh(); 35 35 - setAlertOpen(false); 36 36 - } catch { 37 37 - toastAction("error"); 38 38 - } 39 39 - }); 40 40 - } 41 41 - 42 42 - return ( 43 43 - <AlertDialog open={alertOpen} onOpenChange={(value) => setAlertOpen(value)}> 44 44 - <AlertDialogTrigger asChild> 45 45 - <Button 46 46 - size="icon" 47 47 - variant="outline" 48 48 - className="border-destructive/50 text-destructive/80 hover:bg-destructive/10 hover:text-destructive" 49 49 - > 50 50 - <Icons.trash className="h-4 w-4" /> 51 51 - </Button> 52 52 - </AlertDialogTrigger> 53 53 - <AlertDialogContent> 54 54 - <AlertDialogHeader> 55 55 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 56 56 - <AlertDialogDescription> 57 57 - This action cannot be undone. This will permanently delete the 58 58 - status report update. 59 59 - </AlertDialogDescription> 60 60 - </AlertDialogHeader> 61 61 - <AlertDialogFooter> 62 62 - <AlertDialogCancel>Cancel</AlertDialogCancel> 63 63 - <AlertDialogAction 64 64 - onClick={(e) => { 65 65 - e.preventDefault(); 66 66 - onDelete(); 67 67 - }} 68 68 - disabled={isPending} 69 69 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 70 70 - > 71 71 - {!isPending ? "Delete" : <LoadingAnimation />} 72 72 - </AlertDialogAction> 73 73 - </AlertDialogFooter> 74 74 - </AlertDialogContent> 75 75 - </AlertDialog> 76 76 - ); 77 77 - }

-49

apps/web/src/components/status-update/edit-status-update.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { useState } from "react"; 4 4 - 5 5 - import type { InsertStatusReportUpdate } from "@openstatus/db/src/schema"; 6 6 - import { Button } from "@openstatus/ui/src/components/button"; 7 7 - import { 8 8 - Dialog, 9 9 - DialogContent, 10 10 - DialogDescription, 11 11 - DialogHeader, 12 12 - DialogTitle, 13 13 - DialogTrigger, 14 14 - } from "@openstatus/ui/src/components/dialog"; 15 15 - 16 16 - import { StatusReportUpdateForm } from "../forms/status-report-update/form"; 17 17 - import { Icons } from "../icons"; 18 18 - 19 19 - export function EditStatusReportUpdateIconButton({ 20 20 - statusReportId, 21 21 - statusReportUpdate, 22 22 - }: { 23 23 - statusReportId: number; 24 24 - statusReportUpdate?: InsertStatusReportUpdate; 25 25 - }) { 26 26 - const [open, setOpen] = useState(false); 27 27 - return ( 28 28 - <Dialog open={open} onOpenChange={setOpen}> 29 29 - <DialogTrigger asChild> 30 30 - <Button size="icon" variant="outline"> 31 31 - <Icons.pencil className="h-4 w-4" /> 32 32 - </Button> 33 33 - </DialogTrigger> 34 34 - <DialogContent className="max-h-screen overflow-y-scroll sm:max-w-[650px]"> 35 35 - <DialogHeader> 36 36 - <DialogTitle>Edit Status Report</DialogTitle> 37 37 - <DialogDescription> 38 38 - Update your status report with new information. 39 39 - </DialogDescription> 40 40 - </DialogHeader> 41 41 - <StatusReportUpdateForm 42 42 - statusReportId={statusReportId} 43 43 - defaultValues={statusReportUpdate} 44 44 - onSubmit={() => setOpen(false)} 45 45 - /> 46 46 - </DialogContent> 47 47 - </Dialog> 48 48 - ); 49 49 - }

-113

apps/web/src/components/status-update/events.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { format } from "date-fns"; 4 4 - import * as React from "react"; 5 5 - 6 6 - import type { StatusReportUpdate } from "@openstatus/db/src/schema"; 7 7 - import { Button } from "@openstatus/ui/src/components/button"; 8 8 - 9 9 - import { Icons } from "@/components/icons"; 10 10 - import { statusDict } from "@/data/incidents-dictionary"; 11 11 - import { useProcessor } from "@/hooks/use-preprocessor"; 12 12 - import { cn } from "@/lib/utils"; 13 13 - import { DeleteStatusReportUpdateButtonIcon } from "./delete-status-update"; 14 14 - import { EditStatusReportUpdateIconButton } from "./edit-status-update"; 15 15 - 16 16 - export function Events({ 17 17 - statusReportUpdates, 18 18 - editable = false, 19 19 - collabsible = false, 20 20 - }: { 21 21 - statusReportUpdates: StatusReportUpdate[]; 22 22 - editable?: boolean; 23 23 - collabsible?: boolean; 24 24 - }) { 25 25 - const [open, toggle] = React.useReducer((open) => !open, false); 26 26 - 27 27 - const sortedArray = statusReportUpdates.sort((a, b) => { 28 28 - return b.date.getTime() - a.date.getTime(); 29 29 - }); 30 30 - 31 31 - const slicedArray = 32 32 - open || !collabsible 33 33 - ? sortedArray 34 34 - : sortedArray.length > 0 35 35 - ? [sortedArray[0]] 36 36 - : []; 37 37 - // 38 38 - 39 39 - return ( 40 40 - <div className="grid gap-3"> 41 41 - {slicedArray?.map((update, i) => { 42 42 - const { icon, label } = statusDict[update.status]; 43 43 - const StatusIcon = Icons[icon]; 44 44 - return ( 45 45 - <div 46 46 - key={update.id} 47 47 - className={cn( 48 48 - "group -m-2 relative flex gap-4 border border-transparent p-2", 49 49 - editable && "hover:rounded-lg hover:bg-accent/40", 50 50 - )} 51 51 - > 52 52 - <div className="relative"> 53 53 - <div className="rounded-full border border-border bg-background p-2"> 54 54 - <StatusIcon className="h-4 w-4" /> 55 55 - </div> 56 56 - {i !== sortedArray.length - 1 ? ( 57 57 - <div className="absolute inset-x-0 mx-auto h-full w-[2px] bg-muted" /> 58 58 - ) : null} 59 59 - </div> 60 60 - <div className="mt-1 grid flex-1"> 61 61 - {editable ? ( 62 62 - <div className="absolute top-2 right-2 hidden gap-2 group-hover:flex group-active:flex"> 63 63 - <EditStatusReportUpdateIconButton 64 64 - statusReportId={update.statusReportId} 65 65 - statusReportUpdate={update} 66 66 - /> 67 67 - <DeleteStatusReportUpdateButtonIcon id={update.id} /> 68 68 - </div> 69 69 - ) : undefined} 70 70 - <div className="flex items-center gap-2"> 71 71 - <p className="font-medium text-sm">{label}</p> 72 72 - <p className="mt-px text-muted-foreground text-xs"> 73 73 - <code> 74 74 - {format(new Date(update.date), "LLL dd, y HH:mm")} 75 75 - </code> 76 76 - </p> 77 77 - </div> 78 78 - {/* <p className="max-w-3xl text-sm">{update.message}</p> */} 79 79 - <EventMessage message={update.message} /> 80 80 - </div> 81 81 - </div> 82 82 - ); 83 83 - })} 84 84 - {collabsible && statusReportUpdates.length > 1 ? ( 85 85 - <div className="text-center"> 86 86 - <Button variant="ghost" onClick={toggle}> 87 87 - {open ? "Close" : "More"} 88 88 - </Button> 89 89 - </div> 90 90 - ) : null} 91 91 - </div> 92 92 - ); 93 93 - } 94 94 - 95 95 - function EventMessage({ 96 96 - message, 97 97 - className, 98 98 - }: { 99 99 - message: string; 100 100 - className?: string; 101 101 - }) { 102 102 - const Component = useProcessor(message); // FIXME: make it work with markdown without hook! 103 103 - return ( 104 104 - <div 105 105 - className={cn( 106 106 - "prose dark:prose-invert prose-sm overflow-hidden text-ellipsis prose-headings:font-cal", // fixes very long words 107 107 - className, 108 108 - )} 109 109 - > 110 110 - {Component} 111 111 - </div> 112 112 - ); 113 113 - }

-23

apps/web/src/components/status-update/status-badge.tsx

reviewed

··· 1 1 - import type { StatusReport } from "@openstatus/db/src/schema"; 2 2 - import { Badge } from "@openstatus/ui/src/components/badge"; 3 3 - 4 4 - import { statusDict } from "@/data/incidents-dictionary"; 5 5 - import { cn } from "@/lib/utils"; 6 6 - import { Icons } from "../icons"; 7 7 - 8 8 - export function StatusBadge({ 9 9 - status, 10 10 - className, 11 11 - }: { 12 12 - status: StatusReport["status"]; 13 13 - className?: string; 14 14 - }) { 15 15 - const { label, icon, color } = statusDict[status]; 16 16 - const Icon = Icons[icon]; 17 17 - return ( 18 18 - <Badge variant="outline" className={cn("font-normal", color, className)}> 19 19 - <Icon className="mr-1 h-3 w-3" /> 20 20 - {label} 21 21 - </Badge> 22 22 - ); 23 23 - }

-54

apps/web/src/components/status-update/summary.tsx

reviewed

··· 1 1 - import { format, formatDistanceStrict } from "date-fns"; 2 2 - 3 3 - import type { 4 4 - Monitor, 5 5 - StatusReport, 6 6 - StatusReportUpdate, 7 7 - } from "@openstatus/db/src/schema"; 8 8 - import { Badge } from "@openstatus/ui/src/components/badge"; 9 9 - 10 10 - import { StatusBadge } from "./status-badge"; 11 11 - 12 12 - export function Summary({ 13 13 - report, 14 14 - monitors, 15 15 - }: { 16 16 - report: StatusReport & { statusReportUpdates: StatusReportUpdate[] }; 17 17 - monitors: Pick<Monitor, "name" | "id">[]; 18 18 - }) { 19 19 - const firstUpdate = report.statusReportUpdates?.[0]; 20 20 - const lastUpdate = 21 21 - report.statusReportUpdates?.[report.statusReportUpdates.length - 1]; 22 22 - 23 23 - return ( 24 24 - <div className="grid grid-cols-5 gap-3 text-sm"> 25 25 - <p className="col-start-1 text-muted-foreground">Started</p> 26 26 - <p className="col-span-4"> 27 27 - {firstUpdate ? ( 28 28 - <code>{format(new Date(firstUpdate.date), "LLL dd, y HH:mm")}</code> 29 29 - ) : null} 30 30 - </p> 31 31 - <p className="col-start-1 text-muted-foreground">Status</p> 32 32 - <div className="col-span-4 flex items-center gap-2"> 33 33 - <StatusBadge status={report.status} /> 34 34 - {firstUpdate && lastUpdate && report.status === "resolved" ? ( 35 35 - <span className="text-muted-foreground text-xs"> 36 36 - after {formatDistanceStrict(firstUpdate.date, lastUpdate.date)} 37 37 - </span> 38 38 - ) : null} 39 39 - </div> 40 40 - <p className="col-start-1 text-muted-foreground">Affected</p> 41 41 - <ul className="col-span-4 flex gap-2"> 42 42 - {monitors.length > 0 ? ( 43 43 - monitors.map(({ name, id }) => ( 44 44 - <li key={id} className="text-xs"> 45 45 - <Badge variant="outline">{name}</Badge> 46 46 - </li> 47 47 - )) 48 48 - ) : ( 49 49 - <li>-</li> 50 50 - )} 51 51 - </ul> 52 52 - </div> 53 53 - ); 54 54 - }

-116

apps/web/src/components/workspace/select-workspace.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { Check, ChevronsUpDown, Copy, CopyCheck, Plus } from "lucide-react"; 4 4 - import Link from "next/link"; 5 5 - import { usePathname } from "next/navigation"; 6 6 - import * as React from "react"; 7 7 - 8 8 - import type { Workspace } from "@openstatus/db/src/schema"; 9 9 - import { Button } from "@openstatus/ui/src/components/button"; 10 10 - import { 11 11 - DropdownMenu, 12 12 - DropdownMenuContent, 13 13 - DropdownMenuItem, 14 14 - DropdownMenuLabel, 15 15 - DropdownMenuSeparator, 16 16 - DropdownMenuTrigger, 17 17 - } from "@openstatus/ui/src/components/dropdown-menu"; 18 18 - import { Skeleton } from "@openstatus/ui/src/components/skeleton"; 19 19 - 20 20 - import { copyToClipboard } from "@/lib/utils"; 21 21 - import { api } from "@/trpc/client"; 22 22 - 23 23 - export function SelectWorkspace() { 24 24 - const [workspaces, setWorkspaces] = React.useState<Workspace[]>([]); 25 25 - const [active, setActive] = React.useState<string>(); 26 26 - const pathname = usePathname(); 27 27 - const [hasCopied, setHasCopied] = React.useState(false); 28 28 - 29 29 - React.useEffect(() => { 30 30 - if (hasCopied) { 31 31 - setTimeout(() => { 32 32 - setHasCopied(false); 33 33 - }, 2000); 34 34 - } 35 35 - }, [hasCopied]); 36 36 - 37 37 - React.useEffect(() => { 38 38 - if (pathname?.split("/")?.[2] && workspaces.length > 0) { 39 39 - setActive(pathname?.split("/")?.[2]); 40 40 - } 41 41 - }, [pathname, workspaces]); 42 42 - 43 43 - React.useEffect(() => { 44 44 - // REMINDER: avoid prop drilling to get data from the layout.tsx component. instead use client trpc 45 45 - async function fetchWorkspaces() { 46 46 - const _workspaces = await api.workspace.getUserWorkspaces.query(); 47 47 - setWorkspaces(_workspaces); 48 48 - } 49 49 - fetchWorkspaces(); 50 50 - }, []); 51 51 - 52 52 - return ( 53 53 - <DropdownMenu> 54 54 - <DropdownMenuTrigger asChild> 55 55 - <Button 56 56 - variant="ghost" 57 57 - className="flex w-full items-center justify-between" 58 58 - > 59 59 - {active ? ( 60 60 - <span className="truncate">{active}</span> 61 61 - ) : ( 62 62 - <Skeleton className="h-5 w-full" /> 63 63 - )} 64 64 - <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> 65 65 - </Button> 66 66 - </DropdownMenuTrigger> 67 67 - <DropdownMenuContent 68 68 - style={{ width: "var(--radix-dropdown-menu-trigger-width)" }} 69 69 - > 70 70 - <DropdownMenuLabel>Workspaces</DropdownMenuLabel> 71 71 - <DropdownMenuSeparator /> 72 72 - {workspaces.map((workspace) => ( 73 73 - <DropdownMenuItem key={workspace.id} asChild> 74 74 - <a 75 75 - href={`/app/${workspace.slug}/monitors`} 76 76 - className="group justify-between" 77 77 - > 78 78 - <span className="truncate">{workspace.slug}</span> 79 79 - <Button 80 80 - type="button" 81 81 - variant="ghost" 82 82 - size="icon" 83 83 - className="mx-0.5 hidden h-5 w-5 group-hover:block" 84 84 - onClick={(e) => { 85 85 - e.stopPropagation(); 86 86 - e.preventDefault(); 87 87 - copyToClipboard(workspace.slug); 88 88 - setHasCopied(true); 89 89 - }} 90 90 - > 91 91 - {!hasCopied ? ( 92 92 - <Copy className="h-3 w-3" /> 93 93 - ) : ( 94 94 - <CopyCheck className="h-3 w-3" /> 95 95 - )} 96 96 - </Button> 97 97 - {active === workspace.slug ? ( 98 98 - <Check className="ml-2 h-4 w-4 shrink-0" /> 99 99 - ) : null} 100 100 - </a> 101 101 - </DropdownMenuItem> 102 102 - ))} 103 103 - <DropdownMenuSeparator /> 104 104 - <DropdownMenuItem asChild> 105 105 - <Link 106 106 - href={`/app/${active}/settings/team`} 107 107 - className="flex items-center justify-between" 108 108 - > 109 109 - Invite Members 110 110 - <Plus className="ml-2 h-4 w-4" /> 111 111 - </Link> 112 112 - </DropdownMenuItem> 113 113 - </DropdownMenuContent> 114 114 - </DropdownMenu> 115 115 - ); 116 116 - }