-11

apps/web/src/app/(pages)/app/(auth)/login/_components/actions.ts

··· 1 1 - "use server"; 2 2 - 3 3 - import { signIn } from "@/lib/auth"; 4 4 - 5 5 - export async function signInWithResendAction(formData: FormData) { 6 6 - try { 7 7 - await signIn("resend", formData); 8 8 - } catch (_e) { 9 9 - // console.error(e); 10 10 - } 11 11 - }

-38

apps/web/src/app/(pages)/app/(auth)/login/_components/magic-link-form.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useFormStatus } from "react-dom"; 4 4 - 5 5 - import { Button, Input, Label } from "@openstatus/ui"; 6 6 - 7 7 - import { LoadingAnimation } from "@/components/loading-animation"; 8 8 - import { toast, toastAction } from "@/lib/toast"; 9 9 - import { signInWithResendAction } from "./actions"; 10 10 - 11 11 - /** 12 12 - * @deprecated - only to be used in development mode 13 13 - */ 14 14 - export default function MagicLinkForm() { 15 15 - const { pending } = useFormStatus(); 16 16 - 17 17 - return ( 18 18 - <form 19 19 - action={async (formData) => { 20 20 - try { 21 21 - await signInWithResendAction(formData); 22 22 - toast.success("Check your terminal for the magic link."); 23 23 - } catch (_e) { 24 24 - toastAction("error"); 25 25 - } 26 26 - }} 27 27 - className="grid gap-2" 28 28 - > 29 29 - <div className="grid gap-1.5"> 30 30 - <Label htmlFor="email">Email</Label> 31 31 - <Input id="email" name="email" type="email" required /> 32 32 - </div> 33 33 - <Button variant="secondary" className="w-full"> 34 34 - {pending ? <LoadingAnimation /> : "Console magic link"} 35 35 - </Button> 36 36 - </form> 37 37 - ); 38 38 - }

-56

apps/web/src/app/(pages)/app/(auth)/login/layout.tsx

··· 1 1 - import Image from "next/image"; 2 2 - import Link from "next/link"; 3 3 - import { redirect } from "next/navigation"; 4 4 - 5 5 - import { auth } from "@/lib/auth"; 6 6 - 7 7 - export default async function AuthLayout({ 8 8 - children, 9 9 - }: { 10 10 - children: React.ReactNode; 11 11 - }) { 12 12 - const session = await auth(); 13 13 - if (session) redirect("/app"); 14 14 - 15 15 - return ( 16 16 - <div className="grid min-h-screen grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-5"> 17 17 - <aside className="col-span-1 flex w-full flex-col gap-4 border border-border p-4 backdrop-blur-[2px] md:p-8 xl:col-span-2"> 18 18 - <Link href="/" className="relative h-8 w-8"> 19 19 - <Image 20 20 - src="/icon.png" 21 21 - alt="OpenStatus" 22 22 - height={32} 23 23 - width={32} 24 24 - className="rounded-full border border-border" 25 25 - /> 26 26 - </Link> 27 27 - <div className="mx-auto flex w-full max-w-lg flex-1 flex-col justify-center gap-8 text-center md:text-left"> 28 28 - <div className="mx-auto grid gap-3"> 29 29 - <h1 className="font-cal text-3xl text-foreground"> 30 30 - Open Source Monitoring Service 31 31 - </h1> 32 32 - <p className="text-muted-foreground text-sm"> 33 33 - Monitor your website or API and create your own status page within 34 34 - a couple of minutes. Want to know how it works? <br /> 35 35 - <br /> 36 36 - Check out{" "} 37 37 - <a 38 38 - href="https://github.com/openstatushq/openstatus" 39 39 - target="_blank" 40 40 - rel="noreferrer" 41 41 - className="text-foreground underline underline-offset-4 hover:no-underline" 42 42 - > 43 43 - GitHub 44 44 - </a>{" "} 45 45 - and let us know your use case! 46 46 - </p> 47 47 - </div> 48 48 - </div> 49 49 - <div className="md:h-8" /> 50 50 - </aside> 51 51 - <main className="container col-span-1 mx-auto flex items-center justify-center md:col-span-1 xl:col-span-3"> 52 52 - {children} 53 53 - </main> 54 54 - </div> 55 55 - ); 56 56 - }

-77

apps/web/src/app/(pages)/app/(auth)/login/page.tsx

··· 1 1 - import Link from "next/link"; 2 2 - 3 3 - import { Button, Separator } from "@openstatus/ui"; 4 4 - 5 5 - import { Shell } from "@/components/dashboard/shell"; 6 6 - import DevModeContainer from "@/components/dev-mode-container"; 7 7 - import { Icons } from "@/components/icons"; 8 8 - import { signIn } from "@/lib/auth"; 9 9 - import MagicLinkForm from "./_components/magic-link-form"; 10 10 - import { searchParamsCache } from "./search-params"; 11 11 - 12 12 - const isDev = process.env.NODE_ENV === "development"; 13 13 - 14 14 - export default async function Page(props: { 15 15 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 16 16 - }) { 17 17 - const searchParams = await props.searchParams; 18 18 - const { redirectTo } = searchParamsCache.parse(searchParams); 19 19 - 20 20 - return ( 21 21 - <Shell className="my-4 grid w-full max-w-xl gap-6 md:p-10"> 22 22 - <div className="flex flex-col gap-2 text-center"> 23 23 - <h1 className="font-semibold text-3xl tracking-tight">Sign In</h1> 24 24 - <p className="text-muted-foreground text-sm"> 25 25 - Get started now. No credit card required. 26 26 - </p> 27 27 - </div> 28 28 - <div className="grid gap-3"> 29 29 - {isDev ? ( 30 30 - <DevModeContainer className="grid gap-3"> 31 31 - <MagicLinkForm /> 32 32 - <Separator /> 33 33 - </DevModeContainer> 34 34 - ) : null} 35 35 - <form 36 36 - action={async () => { 37 37 - "use server"; 38 38 - await signIn("github", { redirectTo }); 39 39 - }} 40 40 - className="w-full" 41 41 - > 42 42 - <Button type="submit" className="w-full"> 43 43 - Sign in with GitHub <Icons.github className="ml-2 h-4 w-4" /> 44 44 - </Button> 45 45 - </form> 46 46 - <form 47 47 - action={async () => { 48 48 - "use server"; 49 49 - await signIn("google", { redirectTo }); 50 50 - }} 51 51 - className="w-full" 52 52 - > 53 53 - <Button type="submit" className="w-full" variant="outline"> 54 54 - Sign in with Google <Icons.google className="ml-2 h-4 w-4" /> 55 55 - </Button> 56 56 - </form> 57 57 - </div> 58 58 - <p className="px-8 text-center text-muted-foreground text-sm"> 59 59 - By clicking continue, you agree to our{" "} 60 60 - <Link 61 61 - href="/legal/terms" 62 62 - className="underline underline-offset-4 hover:text-primary hover:no-underline" 63 63 - > 64 64 - Terms of Service 65 65 - </Link>{" "} 66 66 - and{" "} 67 67 - <Link 68 68 - href="/legal/privacy" 69 69 - className="underline underline-offset-4 hover:text-primary hover:no-underline" 70 70 - > 71 71 - Privacy Policy 72 72 - </Link> 73 73 - . 74 74 - </p> 75 75 - </Shell> 76 76 - ); 77 77 - }

-7

apps/web/src/app/(pages)/app/(auth)/login/search-params.ts

··· 1 1 - import { createSearchParamsCache, parseAsString } from "nuqs/server"; 2 2 - 3 3 - export const searchParamsParsers = { 4 4 - redirectTo: parseAsString.withDefault("/app"), 5 5 - }; 6 6 - 7 7 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-5

apps/web/src/app/(pages)/app/(auth)/sign-in/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - export default function Page() { 4 4 - return redirect("/app/login"); 5 5 - }

-5

apps/web/src/app/(pages)/app/(auth)/sign-up/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - export default function Page() { 4 4 - return redirect("/app/login"); 5 5 - }

-17

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/incidents/(overview)/layout.tsx

··· 1 1 - import type { ReactNode } from "react"; 2 2 - 3 3 - import { Header } from "@/components/dashboard/header"; 4 4 - import AppPageLayout from "@/components/layout/app-page-layout"; 5 5 - 6 6 - export default async function Layout({ children }: { children: ReactNode }) { 7 7 - return ( 8 8 - <AppPageLayout> 9 9 - <Header 10 10 - title="Incidents" 11 11 - description="Overview of all your incidents." 12 12 - actions={undefined} 13 13 - /> 14 14 - {children} 15 15 - </AppPageLayout> 16 16 - ); 17 17 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/incidents/(overview)/loading.tsx

··· 1 1 - import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <DataTableSkeleton />; 5 5 - }

-32

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/incidents/(overview)/page.tsx

··· 1 1 - import { EmptyState } from "@/components/dashboard/empty-state"; 2 2 - import { columns } from "@/components/data-table/incident/columns"; 3 3 - import { DataTable } from "@/components/data-table/incident/data-table"; 4 4 - import { api } from "@/trpc/server"; 5 5 - import { ReportInfoBanner } from "./report-info-banner"; 6 6 - 7 7 - export default async function IncidentPage() { 8 8 - const [incidents, statusReports] = await Promise.all([ 9 9 - api.incident.getIncidentsByWorkspace.query(), 10 10 - api.statusReport.getStatusReportByWorkspace.query(), 11 11 - ]); 12 12 - 13 13 - if (incidents?.length === 0) 14 14 - return ( 15 15 - <> 16 16 - <EmptyState 17 17 - icon="siren" 18 18 - title="No incidents" 19 19 - description="Hopefully you will see this screen for a long time." 20 20 - action={undefined} 21 21 - /> 22 22 - {!statusReports.length ? <ReportInfoBanner /> : null} 23 23 - </> 24 24 - ); 25 25 - 26 26 - return ( 27 27 - <> 28 28 - <DataTable columns={columns} data={incidents} /> 29 29 - {!statusReports.length ? <ReportInfoBanner /> : null} 30 30 - </> 31 31 - ); 32 32 - }

-24

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/incidents/(overview)/report-info-banner.tsx

··· 1 1 - import { Alert, AlertDescription, AlertTitle } from "@openstatus/ui"; 2 2 - import { Megaphone } from "lucide-react"; 3 3 - import Link from "next/link"; 4 4 - 5 5 - export function ReportInfoBanner() { 6 6 - return ( 7 7 - <Alert className="max-w-4xl"> 8 8 - <Megaphone className="h-4 w-4" /> 9 9 - <AlertTitle>Looking for Status Reports?</AlertTitle> 10 10 - <AlertDescription> 11 11 - The incidents will be created automatically if an endpoint fails. If you 12 12 - want to inform your users about a planned maintenance, or a current 13 13 - issue you can create a status report. Go to{" "} 14 14 - <Link 15 15 - className="underline underline-offset-4 hover:text-primary hover:no-underline" 16 16 - href="./status-pages" 17 17 - > 18 18 - Status Pages 19 19 - </Link>{" "} 20 20 - and select a page you want to report on. 21 21 - </AlertDescription> 22 22 - </Alert> 23 23 - ); 24 24 - }

-36

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/incidents/[id]/layout.tsx

··· 1 1 - import { notFound } from "next/navigation"; 2 2 - 3 3 - import { Header } from "@/components/dashboard/header"; 4 4 - import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout"; 5 5 - import { api } from "@/trpc/server"; 6 6 - 7 7 - export default async function Layout(props: { 8 8 - children: React.ReactNode; 9 9 - params: Promise<{ workspaceSlug: string; id: string }>; 10 10 - }) { 11 11 - const params = await props.params; 12 12 - 13 13 - const { children } = props; 14 14 - 15 15 - const id = params.id; 16 16 - 17 17 - const [incidents, incident] = await Promise.all([ 18 18 - api.incident.getIncidentsByWorkspace.query(), 19 19 - api.incident.getIncidentById.query({ 20 20 - id: Number(id), 21 21 - }), 22 22 - ]); 23 23 - 24 24 - if (!incident) { 25 25 - return notFound(); 26 26 - } 27 27 - 28 28 - const incidentIndex = incidents.findIndex((item) => item.id === incident.id); 29 29 - 30 30 - return ( 31 31 - <AppPageWithSidebarLayout id="incidents"> 32 32 - <Header title={`Incident #${incidentIndex + 1}`} /> 33 33 - {children} 34 34 - </AppPageWithSidebarLayout> 35 35 - ); 36 36 - }

-37

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/incidents/[id]/overview/_components/event.tsx

··· 1 1 - import { format } from "date-fns"; 2 2 - 3 3 - import type { ValidIcon } from "@/components/icons"; 4 4 - import { Icons } from "@/components/icons"; 5 5 - 6 6 - export function Event({ 7 7 - label, 8 8 - date, 9 9 - icon, 10 10 - children, 11 11 - }: { 12 12 - label: string; 13 13 - date: Date; 14 14 - icon: ValidIcon; 15 15 - children?: React.ReactNode; 16 16 - }) { 17 17 - const Icon = Icons[icon]; 18 18 - return ( 19 19 - <div className="group -m-2 relative flex gap-4 border border-transparent p-2"> 20 20 - <div className="relative"> 21 21 - <div className="rounded-full border bg-background p-2"> 22 22 - <Icon className="h-4 w-4" /> 23 23 - </div> 24 24 - <div className="absolute inset-x-0 mx-auto h-full w-[2px] bg-muted" /> 25 25 - </div> 26 26 - <div className="mt-1 flex flex-1 flex-col gap-1"> 27 27 - <div className="flex items-center justify-between gap-4"> 28 28 - <p className="font-semibold text-sm">{label}</p> 29 29 - <p className="mt-px text-right text-[10px] text-muted-foreground"> 30 30 - <code>{format(new Date(date), "LLL dd, y HH:mm:ss")}</code> 31 31 - </p> 32 32 - </div> 33 33 - {children} 34 34 - </div> 35 35 - </div> 36 36 - ); 37 37 - }

-113

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/incidents/[id]/overview/page.tsx

··· 1 1 - import { formatDistanceStrict } from "date-fns"; 2 2 - import { ArrowUpRight } from "lucide-react"; 3 3 - import Image from "next/image"; 4 4 - import Link from "next/link"; 5 5 - 6 6 - import { api } from "@/trpc/server"; 7 7 - import { Event } from "./_components/event"; 8 8 - 9 9 - /** 10 10 - * MetricCards (Like: Duration, Monitor Name, Autoresolved,...) 11 11 - * 12 12 - * Start Date + (can we include the response details?) 13 13 - * Screenshot 14 14 - * Acknowledged 15 15 - * Resolved 16 16 - * 17 17 - */ 18 18 - 19 19 - export default async function IncidentPage(props: { 20 20 - params: Promise<{ workspaceSlug: string; id: string }>; 21 21 - }) { 22 22 - const params = await props.params; 23 23 - const incident = await api.incident.getIncidentById.query({ 24 24 - id: Number(params.id), 25 25 - }); 26 26 - 27 27 - const duration = formatDistanceStrict( 28 28 - new Date(incident.startedAt), 29 29 - incident?.resolvedAt ? new Date(incident.resolvedAt) : new Date(), 30 30 - ); 31 31 - 32 32 - return ( 33 33 - <div className="grid gap-6"> 34 34 - <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 md:gap-6"> 35 35 - <div className="flex flex-col gap-2 rounded-lg border px-3 py-2"> 36 36 - <p className="font-light text-muted-foreground text-sm uppercase"> 37 37 - Monitor 38 38 - </p> 39 39 - <div className="flex flex-row items-end gap-2"> 40 40 - <p className="font-semibold text-xl">{incident.monitorName}</p> 41 41 - <Link 42 42 - href={`/app/${params.workspaceSlug}/monitors/${incident.monitorId}/overview`} 43 43 - className="text-muted-foreground hover:text-foreground" 44 44 - > 45 45 - <ArrowUpRight /> 46 46 - </Link> 47 47 - </div> 48 48 - </div> 49 49 - <div className="flex flex-col gap-2 rounded-lg border px-3 py-2"> 50 50 - <p className="font-light text-muted-foreground text-sm uppercase"> 51 51 - Duration 52 52 - </p> 53 53 - <p className="font-semibold text-xl">{duration}</p> 54 54 - </div> 55 55 - <div className="flex flex-col gap-2 rounded-lg border px-3 py-2"> 56 56 - <p className="font-light text-muted-foreground text-sm uppercase"> 57 57 - Auto-resolved 58 58 - </p> 59 59 - <p className="font-mono font-semibold text-xl"> 60 60 - {incident.autoResolved ? "true" : "false"} 61 61 - </p> 62 62 - </div> 63 63 - </div> 64 64 - <div className="max-w-xl"> 65 65 - <Event label="Started" icon="alert-triangle" date={incident.startedAt}> 66 66 - {incident.incidentScreenshotUrl ? ( 67 67 - <div className="relative h-64 w-full overflow-hidden rounded-xl border border-border bg-background"> 68 68 - <a 69 69 - href={incident.incidentScreenshotUrl} 70 70 - target="_blank" 71 71 - rel="noreferrer" 72 72 - > 73 73 - <Image 74 74 - src={incident.incidentScreenshotUrl} 75 75 - fill={true} 76 76 - alt="incident screenshot" 77 77 - className="object-contain" 78 78 - /> 79 79 - </a> 80 80 - </div> 81 81 - ) : null} 82 82 - </Event> 83 83 - {incident?.acknowledgedAt ? ( 84 84 - <Event 85 85 - label="Acknowledged" 86 86 - icon="eye" 87 87 - date={incident.acknowledgedAt} 88 88 - /> 89 89 - ) : null} 90 90 - {incident?.resolvedAt ? ( 91 91 - <Event label="Resolved" icon="check" date={incident.resolvedAt}> 92 92 - {incident.recoveryScreenshotUrl ? ( 93 93 - <div className="relative h-64 w-full overflow-hidden rounded-xl border border-border bg-background"> 94 94 - <a 95 95 - href={incident.recoveryScreenshotUrl} 96 96 - target="_blank" 97 97 - rel="noreferrer" 98 98 - > 99 99 - <Image 100 100 - src={incident.recoveryScreenshotUrl} 101 101 - fill={true} 102 102 - alt="recovery screenshot" 103 103 - className="object-contain" 104 104 - /> 105 105 - </a> 106 106 - </div> 107 107 - ) : null} 108 108 - </Event> 109 109 - ) : null} 110 110 - </div> 111 111 - </div> 112 112 - ); 113 113 - }

-8

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/incidents/[id]/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - export default async function Page(props: { 4 4 - params: Promise<{ workspaceSlug: string; id: string }>; 5 5 - }) { 6 6 - const params = await props.params; 7 7 - return redirect(`./${params.id}/overview`); 8 8 - }

-33

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/layout.tsx

··· 1 1 - import { AppHeader } from "@/components/layout/header/app-header"; 2 2 - import { api } from "@/trpc/server"; 3 3 - import { notFound } from "next/navigation"; 4 4 - import type { ReactNode } from "react"; 5 5 - import { WorkspaceClientCookie } from "../worskpace-client-cookie"; 6 6 - 7 7 - // TODO: make the container min-h-screen and the footer below! 8 8 - export default async function AppLayout(props: { 9 9 - children: ReactNode; 10 10 - params: Promise<{ workspaceSlug: string }>; 11 11 - }) { 12 12 - const params = await props.params; 13 13 - 14 14 - const { children } = props; 15 15 - 16 16 - const { workspaceSlug } = params; 17 17 - const workspaces = await api.workspace.getUserWorkspaces.query(); 18 18 - 19 19 - if (workspaces.length === 0) return notFound(); 20 20 - if (workspaces.find((w) => w.slug === workspaceSlug) === undefined) 21 21 - return notFound(); 22 22 - 23 23 - // TODO: create a WorkspaceContext to store the `Workspace` object including the `slug` and `plan.limits` 24 24 - return ( 25 25 - <div className="container relative mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-6 p-4"> 26 26 - <AppHeader /> 27 27 - <main className="z-10 flex w-full flex-1 flex-col items-start justify-center"> 28 28 - {children} 29 29 - </main> 30 30 - <WorkspaceClientCookie {...{ workspaceSlug }} /> 31 31 - </div> 32 32 - ); 33 33 - }

-34

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/(overview)/layout.tsx

··· 1 1 - import { ButtonWithDisableTooltip } from "@openstatus/ui"; 2 2 - import Link from "next/link"; 3 3 - import type { ReactNode } from "react"; 4 4 - 5 5 - import { Header } from "@/components/dashboard/header"; 6 6 - import AppPageLayout from "@/components/layout/app-page-layout"; 7 7 - import { api } from "@/trpc/server"; 8 8 - 9 9 - export const revalidate = 0; // revalidate the data at most every hour 10 10 - export const dynamic = "force-dynamic"; 11 11 - export const fetchCache = "force-no-store"; 12 12 - 13 13 - export default async function Layout({ children }: { children: ReactNode }) { 14 14 - const isLimitReached = await api.monitor.isMonitorLimitReached.query(); 15 15 - 16 16 - return ( 17 17 - <AppPageLayout> 18 18 - <Header 19 19 - title="Monitors" 20 20 - description="Overview of all your monitors." 21 21 - actions={ 22 22 - <ButtonWithDisableTooltip 23 23 - tooltip="You reached the limits" 24 24 - asChild={!isLimitReached} 25 25 - disabled={isLimitReached} 26 26 - > 27 27 - <Link href="./monitors/new">Create</Link> 28 28 - </ButtonWithDisableTooltip> 29 29 - } 30 30 - /> 31 31 - {children} 32 32 - </AppPageLayout> 33 33 - ); 34 34 - }

-11

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/(overview)/loading.tsx

··· 1 1 - import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; 2 2 - import { DataTableToolbarSkeleton } from "@/components/data-table/data-table-toolbar-skeleton"; 3 3 - 4 4 - export default function Loading() { 5 5 - return ( 6 6 - <div className="space-y-4"> 7 7 - <DataTableToolbarSkeleton /> 8 8 - <DataTableSkeleton /> 9 9 - </div> 10 10 - ); 11 11 - }

-101

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/(overview)/page.tsx

··· 1 1 - import Link from "next/link"; 2 2 - 3 3 - import { Button } from "@openstatus/ui/src/components/button"; 4 4 - 5 5 - import { EmptyState } from "@/components/dashboard/empty-state"; 6 6 - import { Limit } from "@/components/dashboard/limit"; 7 7 - import { columns } from "@/components/data-table/monitor/columns"; 8 8 - import { DataTable } from "@/components/data-table/monitor/data-table"; 9 9 - import { prepareMetricsByPeriod, prepareStatusByPeriod } from "@/lib/tb"; 10 10 - import { api } from "@/trpc/server"; 11 11 - import { searchParamsCache } from "./search-params"; 12 12 - 13 13 - export default async function MonitorPage(props: { 14 14 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 15 15 - }) { 16 16 - const searchParams = await props.searchParams; 17 17 - const search = searchParamsCache.parse(searchParams); 18 18 - 19 19 - const monitors = await api.monitor.getMonitorsByWorkspace.query(); 20 20 - if (monitors?.length === 0) 21 21 - return ( 22 22 - <EmptyState 23 23 - icon="activity" 24 24 - title="No monitors" 25 25 - description="Create your first monitor" 26 26 - action={ 27 27 - <Button asChild> 28 28 - <Link href="./monitors/new">Create</Link> 29 29 - </Button> 30 30 - } 31 31 - /> 32 32 - ); 33 33 - 34 34 - const [_incidents, tags, _maintenances, isLimitReached] = await Promise.all([ 35 35 - api.incident.getIncidentsByWorkspace.query(), 36 36 - api.monitorTag.getMonitorTagsByWorkspace.query(), 37 37 - api.maintenance.getLast7DaysByWorkspace.query(), 38 38 - api.monitor.isMonitorLimitReached.query(), 39 39 - ]); 40 40 - 41 41 - // maybe not very efficient? 42 42 - // use Suspense and Client call instead? 43 43 - const monitorsWithData = await Promise.all( 44 44 - monitors.map(async (monitor) => { 45 45 - const type = monitor.jobType as "http" | "tcp"; 46 46 - const [metrics, data] = await Promise.all([ 47 47 - prepareMetricsByPeriod("1d", type).getData({ 48 48 - monitorId: String(monitor.id), 49 49 - }), 50 50 - prepareStatusByPeriod("7d", type).getData({ 51 51 - monitorId: String(monitor.id), 52 52 - }), 53 53 - ]); 54 54 - 55 55 - const [current] = metrics.data?.sort((a, b) => 56 56 - (a.lastTimestamp || 0) - (b.lastTimestamp || 0) < 0 ? 1 : -1, 57 57 - ) || [undefined]; 58 58 - 59 59 - const incidents = _incidents.filter( 60 60 - (incident) => incident.monitorId === monitor.id, 61 61 - ); 62 62 - 63 63 - const tags = monitor.monitorTagsToMonitors.map( 64 64 - ({ monitorTag }) => monitorTag, 65 65 - ); 66 66 - 67 67 - const maintenances = _maintenances.filter((maintenance) => 68 68 - maintenance.monitors.includes(monitor.id), 69 69 - ); 70 70 - 71 71 - return { 72 72 - monitor, 73 73 - metrics: current, 74 74 - data: data.data, 75 75 - incidents, 76 76 - maintenances, 77 77 - tags, 78 78 - isLimitReached, 79 79 - }; 80 80 - }), 81 81 - ); 82 82 - 83 83 - return ( 84 84 - <> 85 85 - <DataTable 86 86 - defaultColumnFilters={[ 87 87 - { id: "tags", value: search.tags }, 88 88 - { id: "public", value: search.public }, 89 89 - ].filter((v) => v.value !== null)} 90 90 - columns={columns} 91 91 - data={monitorsWithData} 92 92 - tags={tags} 93 93 - defaultPagination={{ 94 94 - pageIndex: search.pageIndex, 95 95 - pageSize: search.pageSize, 96 96 - }} 97 97 - /> 98 98 - {isLimitReached ? <Limit /> : null} 99 99 - </> 100 100 - ); 101 101 - }

-16

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/(overview)/search-params.ts

··· 1 1 - import { 2 2 - createSearchParamsCache, 3 3 - parseAsArrayOf, 4 4 - parseAsBoolean, 5 5 - parseAsInteger, 6 6 - parseAsString, 7 7 - } from "nuqs/server"; 8 8 - 9 9 - export const searchParamsParsers = { 10 10 - tags: parseAsArrayOf(parseAsString), 11 11 - public: parseAsArrayOf(parseAsBoolean), 12 12 - pageSize: parseAsInteger.withDefault(10), 13 13 - pageIndex: parseAsInteger.withDefault(0), 14 14 - }; 15 15 - 16 16 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-106

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/_components/data-table-wrapper.tsx

··· 1 1 - // HACK: because the `getRowCanExpand` `renderSubComponent` functions 2 2 - // have to be in a Client Component 3 3 - 4 4 - "use client"; 5 5 - 6 6 - import type { 7 7 - ColumnFiltersState, 8 8 - PaginationState, 9 9 - Row, 10 10 - } from "@tanstack/react-table"; 11 11 - 12 12 - import * as assertions from "@openstatus/assertions"; 13 13 - 14 14 - import { CopyToClipboardButton } from "@/components/dashboard/copy-to-clipboard-button"; 15 15 - import { columns } from "@/components/data-table/columns"; 16 16 - import { DataTable } from "@/components/data-table/data-table"; 17 17 - import { LoadingAnimation } from "@/components/loading-animation"; 18 18 - import { ResponseDetailTabs } from "@/components/ping-response-analysis/response-detail-tabs"; 19 19 - import type { Trigger } from "@/lib/monitor/utils"; 20 20 - import { api } from "@/trpc/rq-client"; 21 21 - import type { monitorRegionSchema } from "@openstatus/db/src/schema/constants"; 22 22 - import type { z } from "zod"; 23 23 - 24 24 - // FIXME: use proper type 25 25 - export type Monitor = { 26 26 - type: "http" | "tcp"; 27 27 - monitorId: string; 28 28 - latency: number; 29 29 - region: z.infer<typeof monitorRegionSchema>; 30 30 - statusCode?: number | null; 31 31 - timestamp: number; 32 32 - workspaceId: string; 33 33 - cronTimestamp: number | null; 34 34 - error: boolean; 35 35 - trigger: Trigger | null; 36 36 - }; 37 37 - 38 38 - export function DataTableWrapper({ 39 39 - data, 40 40 - filters, 41 41 - pagination, 42 42 - }: { 43 43 - data: Monitor[]; 44 44 - filters?: ColumnFiltersState; 45 45 - pagination?: PaginationState; 46 46 - }) { 47 47 - return ( 48 48 - <DataTable 49 49 - columns={columns} 50 50 - data={data} 51 51 - // REMINDER: we currently only support HTTP monitors with more details 52 52 - getRowCanExpand={(row) => row.original.type === "http"} 53 53 - renderSubComponent={renderSubComponent} 54 54 - defaultColumnFilters={filters} 55 55 - defaultPagination={pagination} 56 56 - defaultVisibility={ 57 57 - data.length && data[0].type === "tcp" ? { statusCode: false } : {} 58 58 - } 59 59 - /> 60 60 - ); 61 61 - } 62 62 - 63 63 - function renderSubComponent({ row }: { row: Row<Monitor> }) { 64 64 - return <Details row={row} />; 65 65 - } 66 66 - 67 67 - // REMINDER: only HTTP monitors have more details 68 68 - function Details({ row }: { row: Row<Monitor> }) { 69 69 - const { data, isLoading } = api.tinybird.httpGetMonthly.useQuery({ 70 70 - monitorId: row.original.monitorId, 71 71 - region: row.original.region, 72 72 - cronTimestamp: row.original.cronTimestamp || undefined, 73 73 - }); 74 74 - 75 75 - if (isLoading) 76 76 - return ( 77 77 - <div className="py-4"> 78 78 - <LoadingAnimation variant="inverse" /> 79 79 - </div> 80 80 - ); 81 81 - 82 82 - if (!data) return <p>Something went wrong</p>; 83 83 - 84 84 - const first = data.data?.[0]; 85 85 - 86 86 - // FIXME: ugly hack 87 87 - const url = new URL(window.location.href.replace("/data", "/details")); 88 88 - url.searchParams.set("monitorId", row.original.monitorId); 89 89 - url.searchParams.set("region", row.original.region); 90 90 - url.searchParams.set("cronTimestamp", String(row.original.cronTimestamp)); 91 91 - 92 92 - return ( 93 93 - <div className="relative"> 94 94 - <div className="absolute top-1 right-0"> 95 95 - <CopyToClipboardButton text={url.toString()} tooltipText="Copy link" /> 96 96 - </div> 97 97 - <ResponseDetailTabs 98 98 - timing={first.timing} 99 99 - headers={first.headers} 100 100 - status={first.statusCode} 101 101 - message={first.message} 102 102 - assertions={assertions.deserialize(first.assertions || "[]")} 103 103 - /> 104 104 - </div> 105 105 - ); 106 106 - }

-74

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/_components/download-csv-button.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { Download } from "lucide-react"; 4 4 - 5 5 - import { 6 6 - Button, 7 7 - Tooltip, 8 8 - TooltipContent, 9 9 - TooltipProvider, 10 10 - TooltipTrigger, 11 11 - } from "@openstatus/ui"; 12 12 - 13 13 - import type { Monitor } from "./data-table-wrapper"; 14 14 - 15 15 - function jsonToCsv(jsonData: Record<string, unknown>[]): string { 16 16 - const csvRows: string[] = []; 17 17 - const headers = Object.keys(jsonData[0]); 18 18 - 19 19 - // Add header row 20 20 - csvRows.push(headers.join(",")); 21 21 - 22 22 - // Add data rows 23 23 - for (const row of jsonData) { 24 24 - const values = headers.map((header) => { 25 25 - const escaped = `${row[header]}`.replace(/"/g, '\\"'); 26 26 - return `"${escaped}"`; 27 27 - }); 28 28 - csvRows.push(values.join(",")); 29 29 - } 30 30 - 31 31 - return csvRows.join("\n"); 32 32 - } 33 33 - 34 34 - function downloadCsv(data: string, filename: string) { 35 35 - const blob = new Blob([data], { type: "text/csv" }); 36 36 - const link = document.createElement("a"); 37 37 - link.href = window.URL.createObjectURL(blob); 38 38 - link.setAttribute("download", filename); 39 39 - document.body.appendChild(link); 40 40 - link.click(); 41 41 - document.body.removeChild(link); 42 42 - } 43 43 - 44 44 - export function DownloadCSVButton({ 45 45 - data, 46 46 - filename, 47 47 - }: { 48 48 - data: Monitor[]; 49 49 - filename: string; 50 50 - }) { 51 51 - return ( 52 52 - <TooltipProvider> 53 53 - <Tooltip> 54 54 - <TooltipTrigger asChild> 55 55 - <Button 56 56 - variant="outline" 57 57 - size="icon" 58 58 - onClick={() => { 59 59 - const content = jsonToCsv(data); 60 60 - downloadCsv(content, filename); 61 61 - }} 62 62 - > 63 63 - <Download className="h-4 w-4" /> 64 64 - </Button> 65 65 - </TooltipTrigger> 66 66 - <TooltipContent> 67 67 - <p> 68 68 - Download <code>csv</code> file 69 69 - </p> 70 70 - </TooltipContent> 71 71 - </Tooltip> 72 72 - </TooltipProvider> 73 73 - ); 74 74 - }

-23

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/loading.tsx

··· 1 1 - import { Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; 4 4 - 5 5 - export default function Loading() { 6 6 - return ( 7 7 - <div className="grid gap-4"> 8 8 - <div className="flex flex-row items-center justify-between"> 9 9 - <Skeleton className="h-10 w-[150px]" /> 10 10 - <Skeleton className="h-9 w-9" /> 11 11 - </div> 12 12 - <div className="grid gap-3"> 13 13 - <div className="flex items-center gap-2"> 14 14 - <Skeleton className="h-8 w-32" /> 15 15 - <Skeleton className="h-8 w-32" /> 16 16 - <Skeleton className="h-8 w-32" /> 17 17 - <Skeleton className="h-8 w-16" /> 18 18 - </div> 19 19 - <DataTableSkeleton rows={7} /> 20 20 - </div> 21 21 - </div> 22 22 - ); 23 23 - }

-63

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/page.tsx

··· 1 1 - import { notFound } from "next/navigation"; 2 2 - 3 3 - import { DatePickerPreset } from "@/components/monitor-dashboard/date-picker-preset"; 4 4 - import { prepareListByPeriod } from "@/lib/tb"; 5 5 - import { api } from "@/trpc/server"; 6 6 - import { DataTableWrapper } from "./_components/data-table-wrapper"; 7 7 - import { searchParamsCache } from "./search-params"; 8 8 - 9 9 - export default async function Page(props: { 10 10 - params: Promise<{ workspaceSlug: string; id: string }>; 11 11 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 12 12 - }) { 13 13 - const searchParams = await props.searchParams; 14 14 - const params = await props.params; 15 15 - const id = params.id; 16 16 - const search = searchParamsCache.parse(searchParams); 17 17 - 18 18 - const monitor = await api.monitor.getMonitorById.query({ 19 19 - id: Number(id), 20 20 - }); 21 21 - 22 22 - if (!monitor) return notFound(); 23 23 - 24 24 - const type = monitor.jobType as "http" | "tcp"; 25 25 - 26 26 - // FIXME: make it dynamic based on the workspace plan 27 27 - const allowedPeriods = ["1d", "7d", "14d"] as const; 28 28 - const period = allowedPeriods.find((i) => i === search.period) || "1d"; 29 29 - 30 30 - const res = await prepareListByPeriod(period, type).getData({ 31 31 - monitorId: id, 32 32 - }); 33 33 - 34 34 - if (!res.data || res.data.length === 0) return null; 35 35 - 36 36 - return ( 37 37 - <div className="grid gap-4"> 38 38 - <div className="flex flex-row items-center justify-between gap-4"> 39 39 - <DatePickerPreset defaultValue={period} values={allowedPeriods} /> 40 40 - {/* <DownloadCSVButton 41 41 - data={data} 42 42 - filename={`${format(new Date(), "yyyy-mm-dd")}-${period}-${ 43 43 - monitor.name 44 44 - }`} 45 45 - /> */} 46 46 - </div> 47 47 - {/* FIXME: we display all the regions even though a user might not have all supported in their plan */} 48 48 - <DataTableWrapper 49 49 - data={res.data} 50 50 - filters={[ 51 51 - { id: "statusCode", value: search.statusCode }, 52 52 - { id: "region", value: search.regions }, 53 53 - { id: "error", value: search.error }, 54 54 - { id: "trigger", value: search.trigger }, 55 55 - ].filter((v) => v.value !== null)} 56 56 - pagination={{ 57 57 - pageIndex: search.pageIndex, 58 58 - pageSize: search.pageSize, 59 59 - }} 60 60 - /> 61 61 - </div> 62 62 - ); 63 63 - }

-23

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/data/search-params.ts

··· 1 1 - import { periods, triggers } from "@/lib/monitor/utils"; 2 2 - import { monitorRegions } from "@openstatus/db/src/schema/constants"; 3 3 - import { 4 4 - createSearchParamsCache, 5 5 - parseAsArrayOf, 6 6 - parseAsBoolean, 7 7 - parseAsInteger, 8 8 - parseAsStringLiteral, 9 9 - } from "nuqs/server"; 10 10 - 11 11 - export const DEFAULT_PERIOD = "1d"; 12 12 - 13 13 - export const searchParamsParsers = { 14 14 - statusCode: parseAsArrayOf(parseAsInteger), 15 15 - cronTimestamp: parseAsInteger, 16 16 - error: parseAsArrayOf(parseAsBoolean), 17 17 - period: parseAsStringLiteral(periods).withDefault(DEFAULT_PERIOD), 18 18 - regions: parseAsArrayOf(parseAsStringLiteral(monitorRegions)), 19 19 - pageSize: parseAsInteger.withDefault(10), 20 20 - pageIndex: parseAsInteger.withDefault(0), 21 21 - trigger: parseAsArrayOf(parseAsStringLiteral(triggers)), 22 22 - }; 23 23 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-42

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/details/page.tsx

··· 1 1 - import Link from "next/link"; 2 2 - 3 3 - import { Button } from "@openstatus/ui/src/components/button"; 4 4 - 5 5 - import { EmptyState } from "@/components/dashboard/empty-state"; 6 6 - import { ResponseDetails } from "@/components/monitor-dashboard/response-details"; 7 7 - import { api } from "@/trpc/server"; 8 8 - import { searchParamsCache } from "./search-params"; 9 9 - 10 10 - export default async function Details(props: { 11 11 - params: Promise<{ id: string; workspaceSlug: string }>; 12 12 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 13 13 - }) { 14 14 - const searchParams = await props.searchParams; 15 15 - const search = searchParamsCache.parse(searchParams); 16 16 - 17 17 - if (!search.monitorId) return <PageEmptyState />; 18 18 - 19 19 - try { 20 20 - await api.monitor.getMonitorById.query({ 21 21 - id: Number.parseInt(search.monitorId), 22 22 - }); 23 23 - return <ResponseDetails type="http" {...search} />; 24 24 - } catch (_e) { 25 25 - return <PageEmptyState />; 26 26 - } 27 27 - } 28 28 - 29 29 - function PageEmptyState() { 30 30 - return ( 31 31 - <EmptyState 32 32 - title="No log found" 33 33 - description="Seems like we couldn't find what you are looking for." 34 34 - icon="alert-triangle" 35 35 - action={ 36 36 - <Button asChild> 37 37 - <Link href="./data">Response Logs</Link> 38 38 - </Button> 39 39 - } 40 40 - /> 41 41 - ); 42 42 - }

-15

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/details/search-params.ts

··· 1 1 - import { monitorRegions } from "@openstatus/db/src/schema/constants"; 2 2 - import { 3 3 - createSearchParamsCache, 4 4 - parseAsInteger, 5 5 - parseAsString, 6 6 - parseAsStringLiteral, 7 7 - } from "nuqs/server"; 8 8 - 9 9 - export const searchParamsParsers = { 10 10 - monitorId: parseAsString.withDefault(""), 11 11 - url: parseAsString.withDefault(""), 12 12 - region: parseAsStringLiteral(monitorRegions).withDefault("ams"), 13 13 - cronTimestamp: parseAsInteger.withDefault(0), 14 14 - }; 15 15 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/edit/loading.tsx

··· 1 1 - import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <SkeletonForm />; 5 5 - }

-53

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/edit/page.tsx

··· 1 1 - import { MonitorForm } from "@/components/forms/monitor/form"; 2 2 - import { api } from "@/trpc/server"; 3 3 - import { searchParamsCache } from "./search-params"; 4 4 - 5 5 - export default async function EditPage(props: { 6 6 - params: Promise<{ workspaceSlug: string; id: string }>; 7 7 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 8 8 - }) { 9 9 - const searchParams = await props.searchParams; 10 10 - const params = await props.params; 11 11 - const id = Number(params.id); 12 12 - const monitor = await api.monitor.getMonitorById.query({ id }); 13 13 - const workspace = await api.workspace.getWorkspace.query(); 14 14 - 15 15 - const monitorNotifications = 16 16 - await api.monitor.getAllNotificationsForMonitor.query({ id }); 17 17 - 18 18 - const notifications = 19 19 - await api.notification.getNotificationsByWorkspace.query(); 20 20 - 21 21 - const pages = await api.page.getPagesByWorkspace.query(); 22 22 - 23 23 - const tags = await api.monitorTag.getMonitorTagsByWorkspace.query(); 24 24 - 25 25 - const { section } = searchParamsCache.parse(searchParams); 26 26 - 27 27 - return ( 28 28 - <MonitorForm 29 29 - defaultSection={section} 30 30 - defaultValues={{ 31 31 - ...monitor, 32 32 - // FIXME - Why is this not working? 33 33 - degradedAfter: monitor.degradedAfter ?? undefined, 34 34 - pages: pages 35 35 - .filter((page) => 36 36 - page.monitorsToPages.map(({ monitorId }) => monitorId).includes(id), 37 37 - ) 38 38 - .map(({ id }) => id), 39 39 - notifications: monitorNotifications?.map(({ id }) => id), 40 40 - tags: tags 41 41 - .filter((tag) => 42 42 - tag.monitor.map(({ monitorId }) => monitorId).includes(id), 43 43 - ) 44 44 - .map(({ id }) => id), 45 45 - }} 46 46 - limits={workspace.limits} 47 47 - notifications={notifications} 48 48 - tags={tags} 49 49 - pages={pages} 50 50 - plan={workspace.plan} 51 51 - /> 52 52 - ); 53 53 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/edit/search-params.ts

··· 1 1 - import { createSearchParamsCache, parseAsString } from "nuqs/server"; 2 2 - 3 3 - export const searchParamsParsers = { 4 4 - section: parseAsString.withDefault("request"), 5 5 - }; 6 6 - 7 7 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-91

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/layout.tsx

··· 1 1 - import { notFound } from "next/navigation"; 2 2 - 3 3 - import { Badge } from "@openstatus/ui/src/components/badge"; 4 4 - 5 5 - import { Header } from "@/components/dashboard/header"; 6 6 - import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout"; 7 7 - import { CopyButton } from "@/components/layout/header/copy-button"; 8 8 - import { JobTypeIconWithTooltip } from "@/components/monitor/job-type-icon-with-tooltip"; 9 9 - import { NotificationIconWithTooltip } from "@/components/monitor/notification-icon-with-tooltip"; 10 10 - import { StatusDotWithTooltip } from "@/components/monitor/status-dot-with-tooltip"; 11 11 - import { TagBadgeWithTooltip } from "@/components/monitor/tag-badge-with-tooltip"; 12 12 - import { api } from "@/trpc/server"; 13 13 - 14 14 - export const revalidate = 0; // revalidate the data at most every hour 15 15 - export const dynamic = "force-dynamic"; 16 16 - export const fetchCache = "force-no-store"; 17 17 - 18 18 - export default async function Layout(props: { 19 19 - children: React.ReactNode; 20 20 - params: Promise<{ workspaceSlug: string; id: string }>; 21 21 - }) { 22 22 - const params = await props.params; 23 23 - 24 24 - const { children } = props; 25 25 - 26 26 - const id = params.id; 27 27 - 28 28 - const monitor = await api.monitor.getMonitorById.query({ 29 29 - id: Number(id), 30 30 - }); 31 31 - 32 32 - if (!monitor) { 33 33 - return notFound(); 34 34 - } 35 35 - 36 36 - return ( 37 37 - <AppPageWithSidebarLayout id="monitors"> 38 38 - <Header 39 39 - title={monitor.name} 40 40 - description={ 41 41 - <div className="flex flex-wrap items-center gap-2 text-muted-foreground"> 42 42 - <a 43 43 - href={monitor.url} 44 44 - target="_blank" 45 45 - rel="noreferrer" 46 46 - className="max-w-xs truncate text-base text-muted-foreground md:max-w-md" 47 47 - > 48 48 - {monitor.url} 49 49 - </a> 50 50 - <span className="text-muted-foreground/50 text-xs">•</span> 51 51 - <StatusDotWithTooltip 52 52 - active={monitor.active} 53 53 - status={monitor.status} 54 54 - maintenance={monitor.maintenance} 55 55 - /> 56 56 - {monitor.monitorTagsToMonitors.length > 0 ? ( 57 57 - <> 58 58 - <span className="text-muted-foreground/50 text-xs">•</span> 59 59 - <TagBadgeWithTooltip 60 60 - tags={monitor.monitorTagsToMonitors.map( 61 61 - ({ monitorTag }) => monitorTag, 62 62 - )} 63 63 - /> 64 64 - </> 65 65 - ) : null} 66 66 - <span className="text-muted-foreground/50 text-xs">•</span> 67 67 - <span className="text-sm"> 68 68 - every <code>{monitor.periodicity}</code> 69 69 - </span> 70 70 - <span className="text-muted-foreground/50 text-xs">•</span> 71 71 - <JobTypeIconWithTooltip jobType={monitor.jobType} /> 72 72 - {monitor.public ? ( 73 73 - <> 74 74 - <span className="text-muted-foreground/50 text-xs">•</span> 75 75 - <Badge variant="secondary">public</Badge> 76 76 - </> 77 77 - ) : null} 78 78 - <span className="text-muted-foreground/50 text-xs">•</span> 79 79 - <NotificationIconWithTooltip 80 80 - notifications={monitor.monitorsToNotifications.map( 81 81 - ({ notification }) => notification, 82 82 - )} 83 83 - /> 84 84 - </div> 85 85 - } 86 86 - actions={<CopyButton key="copy" id={monitor.id} />} 87 87 - /> 88 88 - {children} 89 89 - </AppPageWithSidebarLayout> 90 90 - ); 91 91 - }

-42

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/loading.tsx

··· 1 1 - import { Separator, Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - export default function Loading() { 4 4 - return ( 5 5 - <div className="grid gap-4"> 6 6 - <Skeleton className="h-10 w-[150px]" /> 7 7 - <div className="grid gap-6"> 8 8 - <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 md:gap-6"> 9 9 - {new Array(4).fill(0).map((_, i) => ( 10 10 - <Skeleton key={i} className="h-16 w-full" /> 11 11 - ))} 12 12 - </div> 13 13 - <div className="grid gap-4"> 14 14 - <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 md:grid-cols-5 md:gap-6"> 15 15 - {new Array(5).fill(0).map((_, i) => ( 16 16 - <Skeleton key={i} className="h-16 w-full" /> 17 17 - ))} 18 18 - </div> 19 19 - <Skeleton className="h-3 w-40" /> 20 20 - </div> 21 21 - </div> 22 22 - <Separator className="my-8" /> 23 23 - <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between"> 24 24 - <div className="flex w-full gap-2 sm:flex-row sm:justify-between"> 25 25 - <Skeleton className="h-10 w-[150px]" /> 26 26 - <Skeleton className="h-10 w-[150px]" /> 27 27 - </div> 28 28 - <div className="flex gap-2"> 29 29 - <div className="grid gap-1"> 30 30 - <Skeleton className="h-4 w-12" /> 31 31 - <Skeleton className="h-10 w-[150px]" /> 32 32 - </div> 33 33 - <div className="grid gap-1"> 34 34 - <Skeleton className="h-4 w-12" /> 35 35 - <Skeleton className="h-10 w-[150px]" /> 36 36 - </div> 37 37 - </div> 38 38 - </div> 39 39 - <Skeleton className="h-[396px] w-full" /> 40 40 - </div> 41 41 - ); 42 42 - }

-106

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/page.tsx

··· 1 1 - import { notFound } from "next/navigation"; 2 2 - 3 3 - import { 4 4 - type Region, 5 5 - monitorRegions, 6 6 - } from "@openstatus/db/src/schema/constants"; 7 7 - import { Separator } from "@openstatus/ui"; 8 8 - 9 9 - import { CombinedChartWrapper } from "@/components/monitor-charts/combined-chart-wrapper"; 10 10 - import { ButtonReset } from "@/components/monitor-dashboard/button-reset"; 11 11 - import { DatePickerPreset } from "@/components/monitor-dashboard/date-picker-preset"; 12 12 - import { Metrics } from "@/components/monitor-dashboard/metrics"; 13 13 - import { getMinutesByInterval, periods } from "@/lib/monitor/utils"; 14 14 - import { getPreferredSettings } from "@/lib/preferred-settings/server"; 15 15 - import { 16 16 - prepareMetricByIntervalByPeriod, 17 17 - prepareMetricByRegionByPeriod, 18 18 - prepareMetricsByPeriod, 19 19 - } from "@/lib/tb"; 20 20 - import { api } from "@/trpc/server"; 21 21 - import { 22 22 - DEFAULT_INTERVAL, 23 23 - DEFAULT_PERIOD, 24 24 - DEFAULT_QUANTILE, 25 25 - searchParamsCache, 26 26 - } from "./search-params"; 27 27 - 28 28 - export default async function Page(props: { 29 29 - params: Promise<{ workspaceSlug: string; id: string }>; 30 30 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 31 31 - }) { 32 32 - const searchParams = await props.searchParams; 33 33 - const params = await props.params; 34 34 - const id = params.id; 35 35 - const search = searchParamsCache.parse(searchParams); 36 36 - 37 37 - const preferredSettings = getPreferredSettings(); 38 38 - 39 39 - const monitor = await api.monitor.getMonitorById.query({ 40 40 - id: Number(id), 41 41 - }); 42 42 - 43 43 - if (!monitor) return notFound(); 44 44 - 45 45 - const { period, quantile, interval, regions } = search; 46 46 - const type = monitor.jobType as "http" | "tcp"; 47 47 - 48 48 - // TODO: work it out easier 49 49 - const intervalMinutes = getMinutesByInterval(interval); 50 50 - const periodicityMinutes = getMinutesByInterval(monitor.periodicity); 51 51 - 52 52 - const isQuantileDisabled = intervalMinutes <= periodicityMinutes; 53 53 - const minutes = isQuantileDisabled ? periodicityMinutes : intervalMinutes; 54 54 - 55 55 - const [metrics, data, metricsByRegion] = await Promise.all([ 56 56 - prepareMetricsByPeriod(period, type).getData({ 57 57 - monitorId: id, 58 58 - }), 59 59 - prepareMetricByIntervalByPeriod(period, type).getData({ 60 60 - monitorId: id, 61 61 - interval: minutes, 62 62 - }), 63 63 - prepareMetricByRegionByPeriod(period, type).getData({ 64 64 - monitorId: id, 65 65 - }), 66 66 - ]); 67 67 - 68 68 - if (!data || !metrics || !metricsByRegion) return null; 69 69 - 70 70 - const isDirty = 71 71 - period !== DEFAULT_PERIOD || 72 72 - quantile !== DEFAULT_QUANTILE || 73 73 - interval !== DEFAULT_INTERVAL || 74 74 - monitorRegions.length !== regions.length; 75 75 - 76 76 - // GET VALUES FOR BLOG POST 77 77 - // console.log( 78 78 - // JSON.stringify({ 79 79 - // regions, 80 80 - // data: groupDataByTimestamp(data, period, quantile), 81 81 - // metricsByRegion, 82 82 - // }), 83 83 - // ); 84 84 - 85 85 - return ( 86 86 - <div className="grid gap-4"> 87 87 - <div className="flex justify-between gap-2"> 88 88 - <DatePickerPreset defaultValue={period} values={periods} /> 89 89 - {isDirty ? <ButtonReset /> : null} 90 90 - </div> 91 91 - <Metrics metrics={metrics.data} period={period} showErrorLink /> 92 92 - <Separator className="my-8" /> 93 93 - <CombinedChartWrapper 94 94 - data={data.data} 95 95 - period={period} 96 96 - quantile={quantile} 97 97 - interval={interval} 98 98 - regions={regions.length ? (regions as Region[]) : monitor.regions} // FIXME: not properly reseted after filtered 99 99 - monitor={monitor} 100 100 - isQuantileDisabled={isQuantileDisabled} 101 101 - metricsByRegion={metricsByRegion.data} 102 102 - preferredSettings={preferredSettings} 103 103 - /> 104 104 - </div> 105 105 - ); 106 106 - }

-24

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/overview/search-params.ts

··· 1 1 - import { intervals, periods, quantiles } from "@/lib/monitor/utils"; 2 2 - import { monitorRegions } from "@openstatus/db/src/schema/constants"; 3 3 - import { 4 4 - createSearchParamsCache, 5 5 - parseAsArrayOf, 6 6 - parseAsInteger, 7 7 - parseAsStringLiteral, 8 8 - } from "nuqs/server"; 9 9 - 10 10 - export const DEFAULT_QUANTILE = "p95"; 11 11 - export const DEFAULT_INTERVAL = "30m"; 12 12 - export const DEFAULT_PERIOD = "1d"; 13 13 - 14 14 - export const searchParamsParsers = { 15 15 - statusCode: parseAsInteger, 16 16 - cronTimestamp: parseAsInteger, 17 17 - quantile: parseAsStringLiteral(quantiles).withDefault(DEFAULT_QUANTILE), 18 18 - interval: parseAsStringLiteral(intervals).withDefault(DEFAULT_INTERVAL), 19 19 - period: parseAsStringLiteral(periods).withDefault(DEFAULT_PERIOD), 20 20 - regions: parseAsArrayOf(parseAsStringLiteral(monitorRegions)).withDefault([ 21 21 - ...monitorRegions, 22 22 - ]), 23 23 - }; 24 24 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-8

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/[id]/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - export default async function Page(props: { 4 4 - params: Promise<{ workspaceSlug: string; id: string }>; 5 5 - }) { 6 6 - const params = await props.params; 7 7 - return redirect(`./${params.id}/overview`); 8 8 - }

-15

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/new/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import AppPageLayout from "@/components/layout/app-page-layout"; 3 3 - 4 4 - export default async function Layout({ 5 5 - children, 6 6 - }: { 7 7 - children: React.ReactNode; 8 8 - }) { 9 9 - return ( 10 10 - <AppPageLayout> 11 11 - <Header title="Monitor" description="Create your monitor" /> 12 12 - {children} 13 13 - </AppPageLayout> 14 14 - ); 15 15 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/new/loading.tsx

··· 1 1 - import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <SkeletonForm />; 5 5 - }

-34

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/new/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - import { MonitorForm } from "@/components/forms/monitor/form"; 4 4 - import { api } from "@/trpc/server"; 5 5 - import { searchParamsCache } from "./search-params"; 6 6 - 7 7 - export default async function Page(props: { 8 8 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 9 9 - }) { 10 10 - const searchParams = await props.searchParams; 11 11 - const workspace = await api.workspace.getWorkspace.query(); 12 12 - const notifications = 13 13 - await api.notification.getNotificationsByWorkspace.query(); 14 14 - const isLimitReached = await api.monitor.isMonitorLimitReached.query(); 15 15 - const tags = await api.monitorTag.getMonitorTagsByWorkspace.query(); 16 16 - 17 17 - const pages = await api.page.getPagesByWorkspace.query(); 18 18 - 19 19 - if (isLimitReached) return redirect("./"); 20 20 - 21 21 - const { section } = searchParamsCache.parse(searchParams); 22 22 - 23 23 - return ( 24 24 - <MonitorForm 25 25 - defaultSection={section} 26 26 - notifications={notifications} 27 27 - pages={pages} 28 28 - tags={tags} 29 29 - limits={workspace.limits} 30 30 - nextUrl="./" // back to the overview page 31 31 - plan={workspace.plan} 32 32 - /> 33 33 - ); 34 34 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/monitors/new/search-params.ts

··· 1 1 - import { createSearchParamsCache, parseAsString } from "nuqs/server"; 2 2 - 3 3 - export const searchParamsParsers = { 4 4 - section: parseAsString.withDefault("request"), 5 5 - }; 6 6 - 7 7 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-105

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/(overview)/_components/channel-table.tsx

··· 1 1 - import { env } from "@/env"; 2 2 - import type { Workspace } from "@openstatus/db/src/schema"; 3 3 - 4 4 - import { Button, Separator } from "@openstatus/ui"; 5 5 - import Link from "next/link"; 6 6 - 7 7 - // FIXME: create a Channel Component within the file to avoid code duplication 8 8 - 9 9 - interface ChannelTable { 10 10 - workspace: Workspace; 11 11 - disabled?: boolean; 12 12 - } 13 13 - 14 14 - export default function ChannelTable({ workspace, disabled }: ChannelTable) { 15 15 - return ( 16 16 - <div className="col-span-full w-full rounded-lg border border-border border-dashed bg-background p-8"> 17 17 - <h2 className="font-cal text-2xl">Channels</h2> 18 18 - <h3 className="text-muted-foreground">Connect all your channels</h3> 19 19 - <div className="mt-4 rounded-md border"> 20 20 - <Channel 21 21 - title="Discord" 22 22 - description="Send notifications to discord." 23 23 - href="./notifications/new/discord" 24 24 - disabled={disabled} 25 25 - /> 26 26 - <Separator /> 27 27 - <Channel 28 28 - title="Email" 29 29 - description="Send notifications by email." 30 30 - href="./notifications/new/email" 31 31 - disabled={disabled} 32 32 - /> 33 33 - <Separator /> 34 34 - <Channel 35 35 - title="ntfy.sh" 36 36 - description="Send notifications by ntfy.sh." 37 37 - href="./notifications/new/ntfy" 38 38 - disabled={disabled} 39 39 - /> 40 40 - <Separator /> 41 41 - <Channel 42 42 - title="OpsGenie" 43 43 - description="Send notifications to OpsGenie." 44 44 - href="./notifications/new/opsgenie" 45 45 - disabled={disabled || !workspace.limits.opsgenie} 46 46 - /> 47 47 - <Separator /> 48 48 - <Channel 49 49 - title="PagerDuty" 50 50 - description="Send notifications to PagerDuty." 51 51 - href={`https://app.pagerduty.com/install/integration?app_id=${env.PAGERDUTY_APP_ID}&redirect_url=${ 52 52 - process.env.NODE_ENV === "development" // FIXME: This sucks 53 53 - ? "http://localhost:3000" 54 54 - : "https://www.openstatus.dev" 55 55 - }/api/callback/pagerduty?workspace=${workspace.slug}&version=2`} 56 56 - disabled={disabled || !workspace.limits.pagerduty} 57 57 - /> 58 58 - <Separator /> 59 59 - <Channel 60 60 - title="Slack" 61 61 - description="Send notifications to Slack." 62 62 - href="./notifications/new/slack" 63 63 - disabled={disabled} 64 64 - /> 65 65 - <Separator /> 66 66 - <Channel 67 67 - title="SMS" 68 68 - description="Send notifications to your phones." 69 69 - href="./notifications/new/sms" 70 70 - disabled={disabled || !workspace.limits.sms} 71 71 - /> 72 72 - <Separator /> 73 73 - <Channel 74 74 - title="Webhook" 75 75 - description="Send notifications to your webhook." 76 76 - href="./notifications/new/webhook" 77 77 - disabled={disabled} 78 78 - /> 79 79 - </div> 80 80 - </div> 81 81 - ); 82 82 - } 83 83 - 84 84 - interface ChannelProps { 85 85 - title: string; 86 86 - description: string; 87 87 - href: string; 88 88 - disabled?: boolean; 89 89 - } 90 90 - 91 91 - function Channel({ title, description, href, disabled }: ChannelProps) { 92 92 - return ( 93 93 - <div className="flex items-center gap-4 px-4 py-3"> 94 94 - <div className="flex-1 space-y-1"> 95 95 - <p className="font-medium text-sm leading-none">{title}</p> 96 96 - <p className="text-muted-foreground text-sm">{description}</p> 97 97 - </div> 98 98 - <div> 99 99 - <Button disabled={disabled} asChild={!disabled}> 100 100 - {disabled ? "Create" : <Link href={href}>Create</Link>} 101 101 - </Button> 102 102 - </div> 103 103 - </div> 104 104 - ); 105 105 - }

-18

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/(overview)/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import AppPageLayout from "@/components/layout/app-page-layout"; 3 3 - 4 4 - export default async function Layout({ 5 5 - children, 6 6 - }: { 7 7 - children: React.ReactNode; 8 8 - }) { 9 9 - return ( 10 10 - <AppPageLayout> 11 11 - <Header 12 12 - title="Notifications" 13 13 - description="Overview of all your notification channels." 14 14 - /> 15 15 - {children} 16 16 - </AppPageLayout> 17 17 - ); 18 18 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/(overview)/loading.tsx

··· 1 1 - import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <DataTableSkeleton />; 5 5 - }

-35

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/(overview)/page.tsx

··· 1 1 - import { EmptyState } from "@/components/dashboard/empty-state"; 2 2 - import { Limit } from "@/components/dashboard/limit"; 3 3 - import { columns } from "@/components/data-table/notification/columns"; 4 4 - import { DataTable } from "@/components/data-table/notification/data-table"; 5 5 - import { api } from "@/trpc/server"; 6 6 - import ChannelTable from "./_components/channel-table"; 7 7 - 8 8 - export default async function NotificationPage() { 9 9 - const [workspace, notifications, isLimitReached] = await Promise.all([ 10 10 - api.workspace.getWorkspace.query(), 11 11 - api.notification.getNotificationsByWorkspace.query(), 12 12 - api.notification.isNotificationLimitReached.query(), 13 13 - ]); 14 14 - 15 15 - if (notifications.length === 0) { 16 16 - return ( 17 17 - <> 18 18 - <EmptyState 19 19 - icon="bell" 20 20 - title="No notifications" 21 21 - description="Create your first notification channel" 22 22 - /> 23 23 - <ChannelTable workspace={workspace} disabled={isLimitReached} /> 24 24 - </> 25 25 - ); 26 26 - } 27 27 - 28 28 - return ( 29 29 - <> 30 30 - <DataTable columns={columns} data={notifications} /> 31 31 - {isLimitReached ? <Limit /> : null} 32 32 - <ChannelTable workspace={workspace} disabled={isLimitReached} /> 33 33 - </> 34 34 - ); 35 35 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/[id]/edit/loading.tsx

··· 1 1 - import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <SkeletonForm />; 5 5 - }

-25

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/[id]/edit/page.tsx

··· 1 1 - import { NotificationForm } from "@/components/forms/notification/form"; 2 2 - import { api } from "@/trpc/server"; 3 3 - 4 4 - export default async function EditPage(props: { 5 5 - params: Promise<{ workspaceSlug: string; id: string }>; 6 6 - }) { 7 7 - const params = await props.params; 8 8 - const [workspace, monitors, notification] = await Promise.all([ 9 9 - api.workspace.getWorkspace.query(), 10 10 - api.monitor.getMonitorsByWorkspace.query(), 11 11 - api.notification.getNotificationById.query({ id: Number(params.id) }), 12 12 - ]); 13 13 - 14 14 - return ( 15 15 - <NotificationForm 16 16 - defaultValues={{ 17 17 - ...notification, 18 18 - monitors: notification.monitor.map(({ monitor }) => monitor.id), 19 19 - }} 20 20 - monitors={monitors} 21 21 - workspacePlan={workspace.plan} 22 22 - provider={notification.provider} 23 23 - /> 24 24 - ); 25 25 - }

-36

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/[id]/layout.tsx

··· 1 1 - import { notFound } from "next/navigation"; 2 2 - 3 3 - import { Header } from "@/components/dashboard/header"; 4 4 - import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout"; 5 5 - import { CopyButton } from "@/components/layout/header/copy-button"; 6 6 - import { api } from "@/trpc/server"; 7 7 - 8 8 - export default async function Layout(props: { 9 9 - children: React.ReactNode; 10 10 - params: Promise<{ workspaceSlug: string; id: string }>; 11 11 - }) { 12 12 - const params = await props.params; 13 13 - 14 14 - const { children } = props; 15 15 - 16 16 - const id = params.id; 17 17 - 18 18 - const notification = await api.notification.getNotificationById.query({ 19 19 - id: Number(id), 20 20 - }); 21 21 - 22 22 - if (!notification) { 23 23 - return notFound(); 24 24 - } 25 25 - 26 26 - return ( 27 27 - <AppPageWithSidebarLayout id="notifications"> 28 28 - <Header 29 29 - title={notification.name} 30 30 - description={<span className="font-mono">{notification.provider}</span>} 31 31 - actions={<CopyButton key="copy" id={notification.id} />} 32 32 - /> 33 33 - {children} 34 34 - </AppPageWithSidebarLayout> 35 35 - ); 36 36 - }

-8

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/[id]/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - export default async function Page(props: { 4 4 - params: Promise<{ workspaceSlug: string; id: string }>; 5 5 - }) { 6 6 - const params = await props.params; 7 7 - return redirect(`./${params.id}/edit`); 8 8 - }

-43

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/new/[channel]/page.tsx

··· 1 1 - import { ProFeatureAlert } from "@/components/billing/pro-feature-alert"; 2 2 - import { NotificationForm } from "@/components/forms/notification/form"; 3 3 - import { api } from "@/trpc/server"; 4 4 - import { notificationProviderSchema } from "@openstatus/db/src/schema"; 5 5 - import { getLimit } from "@openstatus/db/src/schema/plan/utils"; 6 6 - 7 7 - import { notFound } from "next/navigation"; 8 8 - 9 9 - export default async function ChannelPage(props: { 10 10 - params: Promise<{ channel: string }>; 11 11 - }) { 12 12 - const params = await props.params; 13 13 - const validation = notificationProviderSchema 14 14 - .exclude(["pagerduty"]) 15 15 - .safeParse(params.channel); 16 16 - 17 17 - if (!validation.success) notFound(); 18 18 - 19 19 - const workspace = await api.workspace.getWorkspace.query(); 20 20 - const monitors = await api.monitor.getMonitorsByWorkspace.query(); 21 21 - 22 22 - const provider = validation.data; 23 23 - 24 24 - const allowed = 25 25 - provider === "sms" ? getLimit(workspace.limits, provider) : true; 26 26 - 27 27 - if (!allowed) return <ProFeatureAlert feature="SMS channel notification" />; 28 28 - 29 29 - const isLimitReached = 30 30 - await api.notification.isNotificationLimitReached.query(); 31 31 - 32 32 - if (isLimitReached) { 33 33 - return <ProFeatureAlert feature="More notification channel" />; 34 34 - } 35 35 - return ( 36 36 - <NotificationForm 37 37 - workspacePlan={workspace.plan} 38 38 - nextUrl="../" 39 39 - provider={provider} 40 40 - monitors={monitors} 41 41 - /> 42 42 - ); 43 43 - }

-18

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/new/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import AppPageLayout from "@/components/layout/app-page-layout"; 3 3 - 4 4 - export default async function Layout({ 5 5 - children, 6 6 - }: { 7 7 - children: React.ReactNode; 8 8 - }) { 9 9 - return ( 10 10 - <AppPageLayout> 11 11 - <Header 12 12 - title="Notifications" 13 13 - description="Add your a new notification channel " 14 14 - /> 15 15 - {children} 16 16 - </AppPageLayout> 17 17 - ); 18 18 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/new/loading.tsx

··· 1 1 - import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <SkeletonForm />; 5 5 - }

-43

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/new/pagerduty/page.tsx

··· 1 1 - import { ProFeatureAlert } from "@/components/billing/pro-feature-alert"; 2 2 - import { NotificationForm } from "@/components/forms/notification/form"; 3 3 - import { api } from "@/trpc/server"; 4 4 - import { getLimit } from "@openstatus/db/src/schema/plan/utils"; 5 5 - import { PagerDutySchema } from "@openstatus/notification-pagerduty"; 6 6 - 7 7 - import { searchParamsCache } from "./search-params"; 8 8 - 9 9 - // REMINDER: PagerDuty requires a different workflow, thus the separate page 10 10 - 11 11 - export default async function PagerDutyPage(props: { 12 12 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 13 13 - }) { 14 14 - const searchParams = await props.searchParams; 15 15 - const workspace = await api.workspace.getWorkspace.query(); 16 16 - const monitors = await api.monitor.getMonitorsByWorkspace.query(); 17 17 - const params = searchParamsCache.parse(searchParams); 18 18 - 19 19 - if (!params.config) { 20 20 - return <div>Invalid data</div>; 21 21 - } 22 22 - 23 23 - const data = PagerDutySchema.parse(JSON.parse(params.config)); 24 24 - if (!data) { 25 25 - return <div>Invalid data</div>; 26 26 - } 27 27 - 28 28 - const allowed = getLimit(workspace.limits, "pagerduty"); 29 29 - if (!allowed) 30 30 - return <ProFeatureAlert feature="PagerDuty channel notification" />; 31 31 - 32 32 - return ( 33 33 - <> 34 34 - <NotificationForm 35 35 - workspacePlan={workspace.plan} 36 36 - nextUrl="../" 37 37 - provider="pagerduty" 38 38 - callbackData={params.config} 39 39 - monitors={monitors} 40 40 - /> 41 41 - </> 42 42 - ); 43 43 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/notifications/new/pagerduty/search-params.ts

··· 1 1 - import { createSearchParamsCache, parseAsString } from "nuqs/server"; 2 2 - 3 3 - export const searchParamsParsers = { 4 4 - config: parseAsString, 5 5 - }; 6 6 - 7 7 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-8

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - export default async function DashboardRedirect(props: { 4 4 - params: Promise<{ workspaceSlug: string }>; 5 5 - }) { 6 6 - const params = await props.params; 7 7 - return redirect(`/app/${params.workspaceSlug}/monitors`); 8 8 - }

-50

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/api-token/_components/actions.ts

··· 1 1 - "use server"; 2 2 - 3 3 - import { Unkey } from "@unkey/api"; 4 4 - 5 5 - import { db, eq } from "@openstatus/db"; 6 6 - import { user, usersToWorkspaces, workspace } from "@openstatus/db/src/schema"; 7 7 - 8 8 - import { env } from "@/env"; 9 9 - import { auth } from "@/lib/auth"; 10 10 - import { revalidatePath } from "next/cache"; 11 11 - 12 12 - const unkey = new Unkey({ token: env.UNKEY_TOKEN, cache: "no-cache" }); 13 13 - 14 14 - // REMINDER: server actions should have middlewares to do auth checks 15 15 - 16 16 - export async function create(ownerId: number) { 17 17 - const session = await auth(); 18 18 - 19 19 - if (!session?.user?.id) return; 20 20 - 21 21 - const allowedWorkspaces = await db 22 22 - .select() 23 23 - .from(usersToWorkspaces) 24 24 - .innerJoin(user, eq(user.id, usersToWorkspaces.userId)) 25 25 - .innerJoin(workspace, eq(workspace.id, usersToWorkspaces.workspaceId)) 26 26 - .where(eq(user.id, Number.parseInt(session.user.id))) 27 27 - .all(); 28 28 - 29 29 - const allowedIds = allowedWorkspaces.map((i) => i.workspace.id); 30 30 - 31 31 - if (!allowedIds.includes(ownerId)) return; 32 32 - 33 33 - const key = await unkey.keys.create({ 34 34 - apiId: env.UNKEY_API_ID, 35 35 - ownerId: String(ownerId), 36 36 - prefix: "os", 37 37 - }); 38 38 - 39 39 - revalidatePath("/app/[workspaceSlug]/(dashboard)/settings/api-token"); 40 40 - 41 41 - return key; 42 42 - } 43 43 - 44 44 - export async function revoke(keyId: string) { 45 45 - const res = await unkey.keys.delete({ keyId }); 46 46 - 47 47 - revalidatePath("/app/[workspaceSlug]/(dashboard)/settings/api-token"); 48 48 - 49 49 - return res; 50 50 - }

-57

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/api-token/_components/card.tsx

··· 1 1 - import { Container } from "@/components/dashboard/container"; 2 2 - import { formatDate } from "@/lib/utils"; 3 3 - import { CreateForm } from "./create-form"; 4 4 - import { RevokeButton } from "./revoke-button"; 5 5 - 6 6 - export async function ApiKeys({ 7 7 - ownerId, 8 8 - value, 9 9 - }: { 10 10 - ownerId: number; 11 11 - value?: { id: string; start: string; createdAt: number }; 12 12 - }) { 13 13 - return ( 14 14 - <> 15 15 - <Container 16 16 - title="API Token" 17 17 - description="Use our API endpoints to create your monitors programmatically." 18 18 - actions={ 19 19 - <> 20 20 - {value ? ( 21 21 - <RevokeButton keyId={value.id} /> 22 22 - ) : ( 23 23 - <CreateForm ownerId={ownerId} /> 24 24 - )} 25 25 - </> 26 26 - } 27 27 - > 28 28 - {value ? ( 29 29 - <dl className="grid gap-2 *:text-sm [&_dt]:font-light [&_dt]:text-muted-foreground"> 30 30 - <div className="flex min-w-0 items-center justify-between gap-3"> 31 31 - <dt>Token</dt> 32 32 - <dd className="font-mono">{value.start}...</dd> 33 33 - </div> 34 34 - <div className="flex min-w-0 items-center justify-between gap-3"> 35 35 - <dt>Created At</dt> 36 36 - <dd> 37 37 - {value.createdAt && formatDate(new Date(value.createdAt))} 38 38 - </dd> 39 39 - </div> 40 40 - </dl> 41 41 - ) : null} 42 42 - </Container> 43 43 - <p className="text-foreground text-sm"> 44 44 - Read more about API in our{" "} 45 45 - <a 46 46 - className="text-foreground underline underline-offset-4 hover:no-underline" 47 47 - href="https://api.openstatus.dev/v1" 48 48 - target="_blank" 49 49 - rel="noreferrer" 50 50 - > 51 51 - docs 52 52 - </a> 53 53 - . 54 54 - </p> 55 55 - </> 56 56 - ); 57 57 - }

-95

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/api-token/_components/create-form.tsx

··· 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 - AlertDialogContent, 10 10 - AlertDialogDescription, 11 11 - AlertDialogFooter, 12 12 - AlertDialogHeader, 13 13 - AlertDialogTitle, 14 14 - } from "@openstatus/ui"; 15 15 - 16 16 - import { Icons } from "@/components/icons"; 17 17 - import { toastAction } from "@/lib/toast"; 18 18 - import { copyToClipboard } from "@/lib/utils"; 19 19 - import { create } from "./actions"; 20 20 - import { SubmitButton } from "./submit-button"; 21 21 - 22 22 - export function CreateForm({ ownerId }: { ownerId: number }) { 23 23 - const [rawKey, setRawKey] = React.useState<string | undefined>(); 24 24 - const router = useRouter(); 25 25 - const [hasCopied, setHasCopied] = React.useState(false); 26 26 - 27 27 - React.useEffect(() => { 28 28 - if (hasCopied) { 29 29 - setTimeout(() => { 30 30 - setHasCopied(false); 31 31 - }, 2000); 32 32 - } 33 33 - }, [hasCopied]); 34 34 - 35 35 - async function onCreate() { 36 36 - try { 37 37 - const res = await create(ownerId); 38 38 - if (!res) toastAction("error"); 39 39 - if (res?.result) { 40 40 - setRawKey(res.result.key); 41 41 - } 42 42 - } catch { 43 43 - toastAction("error"); 44 44 - } 45 45 - } 46 46 - 47 47 - return ( 48 48 - <> 49 49 - <form action={onCreate}> 50 50 - <SubmitButton>Create</SubmitButton> 51 51 - </form> 52 52 - <AlertDialog 53 53 - open={Boolean(rawKey)} 54 54 - onOpenChange={() => setRawKey(undefined)} 55 55 - > 56 56 - <AlertDialogContent> 57 57 - <AlertDialogHeader> 58 58 - <AlertDialogTitle>Api Key</AlertDialogTitle> 59 59 - <AlertDialogDescription> 60 60 - Please make sure to store the API key safely. You will only be 61 61 - able to see it once. If you forgot to safe it, you will need to 62 62 - revoke and recreate a key. 63 63 - </AlertDialogDescription> 64 64 - </AlertDialogHeader> 65 65 - <div> 66 66 - <button 67 67 - type="button" 68 68 - className="group inline-flex items-center p-2" 69 69 - onClick={() => { 70 70 - copyToClipboard(String(rawKey)); 71 71 - setHasCopied(true); 72 72 - }} 73 73 - > 74 74 - <span className="ph-no-capture font-mono">{rawKey}</span> 75 75 - {!hasCopied ? ( 76 76 - <Icons.copy className="ml-2 hidden h-4 w-4 group-hover:block" /> 77 77 - ) : ( 78 78 - <Icons.check className="ml-2 h-4 w-4" /> 79 79 - )} 80 80 - </button> 81 81 - </div> 82 82 - <AlertDialogFooter> 83 83 - <AlertDialogAction 84 84 - onClick={() => { 85 85 - router.refresh(); 86 86 - }} 87 87 - > 88 88 - Continue 89 89 - </AlertDialogAction> 90 90 - </AlertDialogFooter> 91 91 - </AlertDialogContent> 92 92 - </AlertDialog> 93 93 - </> 94 94 - ); 95 95 - }

-70

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/api-token/_components/revoke-button.tsx

··· 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 - Button, 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 { revoke } from "./actions"; 22 22 - 23 23 - export function RevokeButton({ keyId }: { keyId: string }) { 24 24 - const [open, setOpen] = React.useState(false); 25 25 - const [isPending, startTransition] = React.useTransition(); 26 26 - const router = useRouter(); 27 27 - 28 28 - async function onRevoke() { 29 29 - startTransition(async () => { 30 30 - try { 31 31 - await revoke(keyId); 32 32 - router.refresh(); 33 33 - setOpen(false); 34 34 - toastAction("deleted"); 35 35 - } catch { 36 36 - toastAction("error"); 37 37 - } 38 38 - }); 39 39 - } 40 40 - 41 41 - return ( 42 42 - <AlertDialog open={open} onOpenChange={(value) => setOpen(value)}> 43 43 - <AlertDialogTrigger asChild> 44 44 - <Button variant="destructive">Revoke</Button> 45 45 - </AlertDialogTrigger> 46 46 - <AlertDialogContent> 47 47 - <AlertDialogHeader> 48 48 - <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> 49 49 - <AlertDialogDescription> 50 50 - This action cannot be undone. This will permanently revoke the API 51 51 - key. 52 52 - </AlertDialogDescription> 53 53 - </AlertDialogHeader> 54 54 - <AlertDialogFooter> 55 55 - <AlertDialogCancel>Cancel</AlertDialogCancel> 56 56 - <AlertDialogAction 57 57 - onClick={async (e) => { 58 58 - e.preventDefault(); 59 59 - await onRevoke(); 60 60 - }} 61 61 - className="bg-destructive text-destructive-foreground hover:bg-destructive/90" 62 62 - disabled={isPending} 63 63 - > 64 64 - {!isPending ? "Delete" : <LoadingAnimation />} 65 65 - </AlertDialogAction> 66 66 - </AlertDialogFooter> 67 67 - </AlertDialogContent> 68 68 - </AlertDialog> 69 69 - ); 70 70 - }

-16

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/api-token/_components/submit-button.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useFormStatus } from "react-dom"; 4 4 - 5 5 - import { Button } from "@openstatus/ui/src/components/button"; 6 6 - 7 7 - import { LoadingAnimation } from "@/components/loading-animation"; 8 8 - 9 9 - export function SubmitButton({ children }: { children?: React.ReactNode }) { 10 10 - const { pending } = useFormStatus(); 11 11 - return ( 12 12 - <Button type="submit" disabled={pending} className="disabled:opacity-100"> 13 13 - {pending ? <LoadingAnimation /> : children} 14 14 - </Button> 15 15 - ); 16 16 - }

-13

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/api-token/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import { getPageBySegment } from "@/config/pages"; 3 3 - 4 4 - const page = getPageBySegment(["settings", "api-token"]); 5 5 - 6 6 - export default function Layout({ children }: { children: React.ReactNode }) { 7 7 - return ( 8 8 - <> 9 9 - <Header title={page?.title} description={page?.description} /> 10 10 - {children} 11 11 - </> 12 12 - ); 13 13 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/api-token/loading.tsx

··· 1 1 - import { Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - // TODO: can be improved... 4 4 - 5 5 - export default function Loading() { 6 6 - return <Skeleton className="h-72 w-full" />; 7 7 - }

-26

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/api-token/page.tsx

··· 1 1 - import { Unkey } from "@unkey/api"; 2 2 - 3 3 - import { env } from "@/env"; 4 4 - import { api } from "@/trpc/server"; 5 5 - import { ApiKeys } from "./_components/card"; 6 6 - 7 7 - export const revalidate = 0; 8 8 - 9 9 - const unkey = new Unkey({ token: env.UNKEY_TOKEN, cache: "no-cache" }); 10 10 - 11 11 - export default async function ApiTokenPage() { 12 12 - const workspace = await api.workspace.getWorkspace.query(); 13 13 - 14 14 - const data = await unkey.apis.listKeys({ 15 15 - apiId: env.UNKEY_API_ID, 16 16 - ownerId: String(workspace.id), 17 17 - }); 18 18 - 19 19 - if (data.error) { 20 20 - return <div>Something went wrong. Please contact us.</div>; 21 21 - } 22 22 - 23 23 - const value = data.result.keys?.[0] || undefined; 24 24 - 25 25 - return <ApiKeys ownerId={workspace.id} value={value} />; 26 26 - }

-13

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/appearance/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import { getPageBySegment } from "@/config/pages"; 3 3 - 4 4 - const page = getPageBySegment(["settings", "appearance"]); 5 5 - 6 6 - export default function Layout({ children }: { children: React.ReactNode }) { 7 7 - return ( 8 8 - <> 9 9 - <Header title={page?.title} description={page?.description} /> 10 10 - {children} 11 11 - </> 12 12 - ); 13 13 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/appearance/loading.tsx

··· 1 1 - import { Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - // TODO: can be improved... 4 4 - 5 5 - export default function Loading() { 6 6 - return <Skeleton className="h-72 w-full" />; 7 7 - }

-96

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/appearance/page.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useTheme } from "next-themes"; 4 4 - 5 5 - import { cn } from "@/lib/utils"; 6 6 - 7 7 - // TODO: improve keyboard navigation 8 8 - 9 9 - export default function AppearancePage() { 10 10 - const { setTheme, theme } = useTheme(); 11 11 - 12 12 - return ( 13 13 - <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4"> 14 14 - <button type="button" onClick={() => setTheme("light")}> 15 15 - <LightModeCard active={theme === "light"} /> 16 16 - <span className="mt-2 font-light text-muted-foreground text-sm"> 17 17 - Light 18 18 - </span> 19 19 - </button> 20 20 - <button type="button" onClick={() => setTheme("dark")}> 21 21 - <DarkModeCard active={theme === "dark"} /> 22 22 - <span className="mt-2 font-light text-muted-foreground text-sm"> 23 23 - Dark 24 24 - </span> 25 25 - </button> 26 26 - <button type="button" onClick={() => setTheme("system")}> 27 27 - <div className="relative"> 28 28 - <LightModeCard active={theme === "system"} /> 29 29 - <div 30 30 - className="absolute top-0 right-0 bottom-0 left-0" 31 31 - style={{ 32 32 - clipPath: "polygon(100% 0, 0 0, 100% 100%)", 33 33 - }} 34 34 - > 35 35 - <DarkModeCard active={theme === "system"} /> 36 36 - </div> 37 37 - </div> 38 38 - <span className="mt-2 font-light text-muted-foreground text-sm"> 39 39 - System 40 40 - </span> 41 41 - </button> 42 42 - </div> 43 43 - ); 44 44 - } 45 45 - 46 46 - function LightModeCard({ active }: { active: boolean }) { 47 47 - return ( 48 48 - <div 49 49 - className={cn( 50 50 - "items-center rounded-md border-2 border-muted p-1", 51 51 - active && "ring-2 ring-ring ring-offset-2 ring-offset-background", 52 52 - )} 53 53 - > 54 54 - <div className="space-y-2 rounded-sm bg-[#ecedef] p-2"> 55 55 - <div className="space-y-2 rounded-md bg-white p-2 shadow-xs"> 56 56 - <div className="h-2 w-[80px] rounded-lg bg-[#ecedef]" /> 57 57 - <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" /> 58 58 - </div> 59 59 - <div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-xs"> 60 60 - <div className="h-4 w-4 rounded-full bg-[#ecedef]" /> 61 61 - <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" /> 62 62 - </div> 63 63 - <div className="flex items-center space-x-2 rounded-md bg-white p-2 shadow-xs"> 64 64 - <div className="h-4 w-4 rounded-full bg-[#ecedef]" /> 65 65 - <div className="h-2 w-[100px] rounded-lg bg-[#ecedef]" /> 66 66 - </div> 67 67 - </div> 68 68 - </div> 69 69 - ); 70 70 - } 71 71 - 72 72 - function DarkModeCard({ active }: { active: boolean }) { 73 73 - return ( 74 74 - <div 75 75 - className={cn( 76 76 - "items-center rounded-md border-2 border-muted bg-popover p-1", 77 77 - active && "ring-2 ring-ring ring-offset-2 ring-offset-background", 78 78 - )} 79 79 - > 80 80 - <div className="space-y-2 rounded-sm bg-slate-950 p-2"> 81 81 - <div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-xs"> 82 82 - <div className="h-2 w-[80px] rounded-lg bg-slate-400" /> 83 83 - <div className="h-2 w-[100px] rounded-lg bg-slate-400" /> 84 84 - </div> 85 85 - <div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-xs"> 86 86 - <div className="h-4 w-4 rounded-full bg-slate-400" /> 87 87 - <div className="h-2 w-[100px] rounded-lg bg-slate-400" /> 88 88 - </div> 89 89 - <div className="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-xs"> 90 90 - <div className="h-4 w-4 rounded-full bg-slate-400" /> 91 91 - <div className="h-2 w-[100px] rounded-lg bg-slate-400" /> 92 92 - </div> 93 93 - </div> 94 94 - </div> 95 95 - ); 96 96 - }

-81

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/billing/_components/change-plan-button.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { TRPCClientError } from "@trpc/client"; 4 4 - import { useRouter } from "next/navigation"; 5 5 - import { useState, useTransition } from "react"; 6 6 - 7 7 - import { workspacePlans } from "@openstatus/db/src/schema"; 8 8 - import type { Workspace, WorkspacePlan } from "@openstatus/db/src/schema"; 9 9 - import { 10 10 - Button, 11 11 - Dialog, 12 12 - DialogContent, 13 13 - DialogDescription, 14 14 - DialogFooter, 15 15 - DialogHeader, 16 16 - DialogTitle, 17 17 - DialogTrigger, 18 18 - } from "@openstatus/ui"; 19 19 - 20 20 - import { LoadingAnimation } from "@/components/loading-animation"; 21 21 - import { toast } from "@/lib/toast"; 22 22 - import { api } from "@/trpc/client"; 23 23 - 24 24 - export function ChangePlanButton({ workspace }: { workspace: Workspace }) { 25 25 - const [open, setOpen] = useState(false); 26 26 - const [isPending, startTransition] = useTransition(); 27 27 - const router = useRouter(); 28 28 - 29 29 - function onChange(plan: WorkspacePlan) { 30 30 - startTransition(async () => { 31 31 - try { 32 32 - await api.workspace.changePlan.mutate({ plan }); 33 33 - } catch (e) { 34 34 - if (e instanceof TRPCClientError) { 35 35 - toast.error(e.message); 36 36 - } 37 37 - } finally { 38 38 - setOpen(false); 39 39 - router.refresh(); 40 40 - } 41 41 - }); 42 42 - } 43 43 - 44 44 - return ( 45 45 - <Dialog open={open} onOpenChange={setOpen}> 46 46 - <DialogTrigger asChild> 47 47 - <Button variant={workspace.plan === "free" ? "default" : "outline"}> 48 48 - Change Plan 49 49 - </Button> 50 50 - </DialogTrigger> 51 51 - <DialogContent> 52 52 - <DialogHeader> 53 53 - <DialogTitle>Change plan</DialogTitle> 54 54 - <DialogDescription> 55 55 - You are currently on the{" "} 56 56 - <span className="font-bold">{workspace.plan}</span> plan. 57 57 - </DialogDescription> 58 58 - </DialogHeader> 59 59 - <DialogFooter className="grid w-full grid-cols-4 gap-3"> 60 60 - {workspacePlans.map((plan) => { 61 61 - const isActive = plan === workspace.plan; 62 62 - return ( 63 63 - <Button 64 64 - key={plan} 65 65 - onClick={() => onChange(plan)} 66 66 - disabled={isPending || isActive} 67 67 - variant="outline" 68 68 - > 69 69 - {isPending && !isActive ? ( 70 70 - <LoadingAnimation variant="inverse" /> 71 71 - ) : ( 72 72 - plan 73 73 - )} 74 74 - </Button> 75 75 - ); 76 76 - })} 77 77 - </DialogFooter> 78 78 - </DialogContent> 79 79 - </Dialog> 80 80 - ); 81 81 - }

-40

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/billing/_components/customer-portal-button.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useRouter } from "next/navigation"; 4 4 - import { useTransition } from "react"; 5 5 - 6 6 - import { Button } from "@openstatus/ui/src/components/button"; 7 7 - 8 8 - import { LoadingAnimation } from "@/components/loading-animation"; 9 9 - import { api } from "@/trpc/client"; 10 10 - 11 11 - interface Props { 12 12 - workspaceSlug: string; 13 13 - } 14 14 - 15 15 - export function CustomerPortalButton({ workspaceSlug }: Props) { 16 16 - const router = useRouter(); 17 17 - const [isPending, startTransition] = useTransition(); 18 18 - 19 19 - const getUserCustomerPortal = () => { 20 20 - startTransition(async () => { 21 21 - const url = await api.stripeRouter.getUserCustomerPortal.mutate({ 22 22 - workspaceSlug, 23 23 - }); 24 24 - if (!url) return; 25 25 - router.push(url); 26 26 - return; 27 27 - }); 28 28 - }; 29 29 - 30 30 - return ( 31 31 - <Button 32 32 - size="sm" 33 33 - variant="secondary" 34 34 - onClick={getUserCustomerPortal} 35 35 - disabled={isPending} 36 36 - > 37 37 - {isPending ? <LoadingAnimation variant="inverse" /> : "Customer Portal"} 38 38 - </Button> 39 39 - ); 40 40 - }

-54

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/billing/_components/plan.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useRouter } from "next/navigation"; 4 4 - import { useTransition } from "react"; 5 5 - 6 6 - import type { Workspace, WorkspacePlan } from "@openstatus/db/src/schema"; 7 7 - 8 8 - import { PricingTable } from "@/components/marketing/pricing/pricing-table"; 9 9 - import { getStripe } from "@/lib/stripe/client"; 10 10 - import { api } from "@/trpc/client"; 11 11 - 12 12 - export const SettingsPlan = ({ workspace }: { workspace: Workspace }) => { 13 13 - const router = useRouter(); 14 14 - const [isPending, startTransition] = useTransition(); 15 15 - 16 16 - const getCheckoutSession = (plan: WorkspacePlan) => { 17 17 - startTransition(async () => { 18 18 - const result = await api.stripeRouter.getCheckoutSession.mutate({ 19 19 - workspaceSlug: workspace.slug, 20 20 - plan, 21 21 - }); 22 22 - if (!result) return; 23 23 - 24 24 - const stripe = await getStripe(); 25 25 - stripe?.redirectToCheckout({ 26 26 - sessionId: result.id, 27 27 - }); 28 28 - }); 29 29 - }; 30 30 - 31 31 - const getUserCustomerPortal = () => { 32 32 - startTransition(async () => { 33 33 - const url = await api.stripeRouter.getUserCustomerPortal.mutate({ 34 34 - workspaceSlug: workspace.slug, 35 35 - }); 36 36 - if (!url) return; 37 37 - router.push(url); 38 38 - return; 39 39 - }); 40 40 - }; 41 41 - 42 42 - return ( 43 43 - <PricingTable 44 44 - currentPlan={workspace.plan} 45 45 - isLoading={isPending} 46 46 - events={{ 47 47 - // REMINDER: redirecting to customer portal as a fallback because the free plan has no price 48 48 - free: getUserCustomerPortal, 49 49 - starter: () => getCheckoutSession("starter"), 50 50 - team: () => getCheckoutSession("team"), 51 51 - }} 52 52 - /> 53 53 - ); 54 54 - };

-13

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/billing/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import { getPageBySegment } from "@/config/pages"; 3 3 - 4 4 - const page = getPageBySegment(["settings", "billing"]); 5 5 - 6 6 - export default function Layout({ children }: { children: React.ReactNode }) { 7 7 - return ( 8 8 - <> 9 9 - <Header title={page?.title} description={page?.description} /> 10 10 - {children} 11 11 - </> 12 12 - ); 13 13 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/billing/loading.tsx

··· 1 1 - import { Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - // TODO: can be improved... 4 4 - 5 5 - export default function Loading() { 6 6 - return <Skeleton className="h-72 w-full" />; 7 7 - }

-42

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/billing/page.tsx

··· 1 1 - import { Progress, Separator } from "@openstatus/ui"; 2 2 - 3 3 - import { api } from "@/trpc/server"; 4 4 - import { CustomerPortalButton } from "./_components/customer-portal-button"; 5 5 - import { SettingsPlan } from "./_components/plan"; 6 6 - 7 7 - export default async function BillingPage() { 8 8 - const workspace = await api.workspace.getWorkspace.query(); 9 9 - const currentNumbers = await api.workspace.getCurrentWorkspaceNumbers.query(); 10 10 - 11 11 - return ( 12 12 - <div className="grid gap-4"> 13 13 - <div className="flex items-center justify-between gap-3"> 14 14 - <h3 className="font-medium text-lg"> 15 15 - <span className="capitalize">{workspace.plan}</span> plan 16 16 - </h3> 17 17 - <CustomerPortalButton workspaceSlug={workspace.slug} /> 18 18 - </div> 19 19 - <div className="grid max-w-lg gap-3"> 20 20 - {Object.entries(currentNumbers).map(([key, value]) => { 21 21 - const limit = workspace.limits[key as keyof typeof currentNumbers]; 22 22 - // TODO: find a better way to determine if the limit is monthly 23 23 - const isMonthly = ["synthetic-checks"].includes(key); 24 24 - return ( 25 25 - <div key={key}> 26 26 - <div className="mb-1 flex items-center justify-between text-muted-foreground"> 27 27 - <p className="text-sm capitalize">{key.replace("-", " ")}</p> 28 28 - <p className="text-xs"> 29 29 - {isMonthly ? "monthly" : null}{" "} 30 30 - <span className="text-foreground">{value}</span> / {limit} 31 31 - </p> 32 32 - </div> 33 33 - <Progress value={(value / limit) * 100} /> 34 34 - </div> 35 35 - ); 36 36 - })} 37 37 - </div> 38 38 - <Separator className="my-4" /> 39 39 - <SettingsPlan workspace={workspace} /> 40 40 - </div> 41 41 - ); 42 42 - }

-43

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/general/_components/copy-to-clipboard-button.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import * as React from "react"; 4 4 - 5 5 - import type { ButtonProps } from "@openstatus/ui"; 6 6 - import { Button } from "@openstatus/ui/src/components/button"; 7 7 - 8 8 - import { Icons } from "@/components/icons"; 9 9 - import { cn, copyToClipboard } from "@/lib/utils"; 10 10 - 11 11 - export function CopyToClipboardButton({ 12 12 - children, 13 13 - onClick, 14 14 - ...props 15 15 - }: ButtonProps) { 16 16 - const [hasCopied, setHasCopied] = React.useState(false); 17 17 - 18 18 - React.useEffect(() => { 19 19 - if (hasCopied) { 20 20 - setTimeout(() => { 21 21 - setHasCopied(false); 22 22 - }, 2000); 23 23 - } 24 24 - }, [hasCopied]); 25 25 - 26 26 - return ( 27 27 - <Button 28 28 - onClick={(e) => { 29 29 - copyToClipboard(children?.toString() || ""); 30 30 - setHasCopied(true); 31 31 - onClick?.(e); 32 32 - }} 33 33 - {...props} 34 34 - > 35 35 - {children} 36 36 - {!hasCopied ? ( 37 37 - <Icons.copy className="ml-2 hidden h-4 w-4 group-hover:block" /> 38 38 - ) : ( 39 39 - <Icons.check className={cn("ml-2 h-4 w-4")} /> 40 40 - )} 41 41 - </Button> 42 42 - ); 43 43 - }

-13

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/general/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import { getPageBySegment } from "@/config/pages"; 3 3 - 4 4 - const page = getPageBySegment(["settings", "general"]); 5 5 - 6 6 - export default function Layout({ children }: { children: React.ReactNode }) { 7 7 - return ( 8 8 - <> 9 9 - <Header title={page?.title} description={page?.description} /> 10 10 - {children} 11 11 - </> 12 12 - ); 13 13 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/general/loading.tsx

··· 1 1 - import { Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - // TODO: can be improved... 4 4 - 5 5 - export default function Loading() { 6 6 - return <Skeleton className="h-72 w-full" />; 7 7 - }

-27

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/general/page.tsx

··· 1 1 - import { Separator } from "@openstatus/ui"; 2 2 - 3 3 - import { WorkspaceForm } from "@/components/forms/workspace-form"; 4 4 - import { api } from "@/trpc/server"; 5 5 - import { CopyToClipboardButton } from "./_components/copy-to-clipboard-button"; 6 6 - 7 7 - export default async function GeneralPage() { 8 8 - const data = await api.workspace.getWorkspace.query(); 9 9 - 10 10 - return ( 11 11 - <div className="flex flex-col gap-8"> 12 12 - <WorkspaceForm defaultValues={{ name: data.name ?? "" }} /> 13 13 - <Separator /> 14 14 - <div className="flex flex-col gap-2"> 15 15 - <p>Workspace Slug</p> 16 16 - <p className="text-muted-foreground text-sm"> 17 17 - The unique identifier for your workspace. 18 18 - </p> 19 19 - <div> 20 20 - <CopyToClipboardButton variant="outline" size="sm"> 21 21 - {data.slug} 22 22 - </CopyToClipboardButton> 23 23 - </div> 24 24 - </div> 25 25 - </div> 26 26 - ); 27 27 - }

-13

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/layout.tsx

··· 1 1 - import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout"; 2 2 - 3 3 - export default function SettingsLayout({ 4 4 - children, 5 5 - }: { 6 6 - children: React.ReactNode; 7 7 - }) { 8 8 - return ( 9 9 - <AppPageWithSidebarLayout id="settings"> 10 10 - {children} 11 11 - </AppPageWithSidebarLayout> 12 12 - ); 13 13 - }

-8

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - export default async function SettingsPage(props: { 4 4 - params: Promise<{ workspaceSlug: string }>; 5 5 - }) { 6 6 - const params = await props.params; 7 7 - return redirect(`/app/${params.workspaceSlug}/settings/general`); 8 8 - }

-27

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/team/_components/info-banner.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { Info } from "lucide-react"; 4 4 - import Link from "next/link"; 5 5 - import { useParams } from "next/navigation"; 6 6 - 7 7 - import { Alert, AlertDescription, AlertTitle } from "@openstatus/ui"; 8 8 - 9 9 - export function InfoBanner() { 10 10 - const params = useParams<{ workspaceSlug: string }>(); 11 11 - return ( 12 12 - <Alert className="bg-muted/50"> 13 13 - <Info className="h-4 w-4" /> 14 14 - <AlertTitle>You&apos;re workspace name is empty</AlertTitle> 15 15 - <AlertDescription> 16 16 - To inform your team about the workspace name, please set it in the{" "} 17 17 - <Link 18 18 - href={`/app/${params.workspaceSlug}/settings/general`} 19 19 - className="inline-flex items-center font-medium text-foreground underline underline-offset-4 hover:no-underline" 20 20 - > 21 21 - general 22 22 - </Link>{" "} 23 23 - settings. 24 24 - </AlertDescription> 25 25 - </Alert> 26 26 - ); 27 27 - }

-112

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/team/_components/invite-button.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { zodResolver } from "@hookform/resolvers/zod"; 4 4 - import { useRouter } from "next/navigation"; 5 5 - import { useState, 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 - Dialog, 12 12 - DialogContent, 13 13 - DialogDescription, 14 14 - DialogHeader, 15 15 - DialogTitle, 16 16 - DialogTrigger, 17 17 - Form, 18 18 - FormControl, 19 19 - FormDescription, 20 20 - FormField, 21 21 - FormItem, 22 22 - FormLabel, 23 23 - FormMessage, 24 24 - Input, 25 25 - } from "@openstatus/ui"; 26 26 - 27 27 - import { LoadingAnimation } from "@/components/loading-animation"; 28 28 - import { toastAction } from "@/lib/toast"; 29 29 - import { api } from "@/trpc/client"; 30 30 - 31 31 - const schema = z.object({ 32 32 - email: z.string().email(), 33 33 - }); 34 34 - 35 35 - type Schema = z.infer<typeof schema>; 36 36 - 37 37 - export function InviteButton({ 38 38 - defaultValues, 39 39 - disabled, 40 40 - }: { 41 41 - defaultValues?: Schema; 42 42 - disabled?: boolean; 43 43 - }) { 44 44 - const [open, setOpen] = useState(false); 45 45 - const form = useForm<Schema>({ 46 46 - resolver: zodResolver(schema), 47 47 - defaultValues, 48 48 - }); 49 49 - const router = useRouter(); 50 50 - const [isPending, startTransition] = useTransition(); 51 51 - 52 52 - async function onSubmit(data: Schema) { 53 53 - startTransition(async () => { 54 54 - try { 55 55 - const invitation = await api.invitation.create.mutate(data); 56 56 - await api.emailRouter.sendTeamInvitation.mutate({ id: invitation.id }); 57 57 - toastAction("saved"); 58 58 - router.refresh(); 59 59 - } catch { 60 60 - toastAction("error"); 61 61 - } finally { 62 62 - setOpen(false); 63 63 - } 64 64 - }); 65 65 - } 66 66 - 67 67 - return ( 68 68 - <Dialog open={open} onOpenChange={setOpen}> 69 69 - <DialogTrigger asChild> 70 70 - <Button onClick={() => setOpen((v) => !v)} disabled={disabled}> 71 71 - Invite Member 72 72 - </Button> 73 73 - </DialogTrigger> 74 74 - <DialogContent> 75 75 - <DialogHeader> 76 76 - <DialogTitle>Invite your team members!</DialogTitle> 77 77 - <DialogDescription> 78 78 - They will receive an email invite to join your workspace. 79 79 - </DialogDescription> 80 80 - </DialogHeader> 81 81 - <Form {...form}> 82 82 - <form 83 83 - onSubmit={form.handleSubmit(onSubmit)} 84 84 - className="grid w-full grid-cols-1 items-center gap-6 sm:grid-cols-6" 85 85 - > 86 86 - <FormField 87 87 - control={form.control} 88 88 - name="email" 89 89 - render={({ field }) => ( 90 90 - <FormItem className="sm:col-span-5"> 91 91 - <FormLabel>Email</FormLabel> 92 92 - <FormControl> 93 93 - <Input {...field} /> 94 94 - </FormControl> 95 95 - <FormDescription> 96 96 - We will send an invite to this email address. 97 97 - </FormDescription> 98 98 - <FormMessage /> 99 99 - </FormItem> 100 100 - )} 101 101 - /> 102 102 - <div className="sm:col-span-full"> 103 103 - <Button className="w-full sm:w-auto" size="lg"> 104 104 - {!isPending ? "Confirm" : <LoadingAnimation />} 105 105 - </Button> 106 106 - </div> 107 107 - </form> 108 108 - </Form> 109 109 - </DialogContent> 110 110 - </Dialog> 111 111 - ); 112 112 - }

-13

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/team/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import { getPageBySegment } from "@/config/pages"; 3 3 - 4 4 - const page = getPageBySegment(["settings", "team"]); 5 5 - 6 6 - export default function Layout({ children }: { children: React.ReactNode }) { 7 7 - return ( 8 8 - <> 9 9 - <Header title={page?.title} description={page?.description} /> 10 10 - {children} 11 11 - </> 12 12 - ); 13 13 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/team/loading.tsx

··· 1 1 - import { Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - // TODO: can be improved... 4 4 - 5 5 - export default function Loading() { 6 6 - return <Skeleton className="h-72 w-full" />; 7 7 - }

-34

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/team/page.tsx

··· 1 1 - import { ProFeatureAlert } from "@/components/billing/pro-feature-alert"; 2 2 - import { columns as invitationColumns } from "@/components/data-table/invitation/columns"; 3 3 - import { DataTable as InvitationDataTable } from "@/components/data-table/invitation/data-table"; 4 4 - import { columns as userColumns } from "@/components/data-table/user/columns"; 5 5 - import { DataTable as UserDataTable } from "@/components/data-table/user/data-table"; 6 6 - import { api } from "@/trpc/server"; 7 7 - import { InfoBanner } from "./_components/info-banner"; 8 8 - import { InviteButton } from "./_components/invite-button"; 9 9 - 10 10 - export default async function TeamPage() { 11 11 - const workspace = await api.workspace.getWorkspace.query(); 12 12 - const invitations = await api.invitation.getWorkspaceOpenInvitations.query(); 13 13 - const users = await api.workspace.getWorkspaceUsers.query(); 14 14 - 15 15 - const isFreePlan = workspace.plan === "free"; 16 16 - 17 17 - return ( 18 18 - <div className="flex flex-col gap-4"> 19 19 - {isFreePlan ? <ProFeatureAlert feature="Team members" /> : null} 20 20 - {!isFreePlan && !workspace.name ? <InfoBanner /> : null} 21 21 - {/* TODO: only show if isAdmin */} 22 22 - <div className="flex justify-end"> 23 23 - <InviteButton disabled={isFreePlan} /> 24 24 - </div> 25 25 - <UserDataTable 26 26 - data={users.map(({ role, user }) => ({ role, ...user }))} 27 27 - columns={userColumns} 28 28 - /> 29 29 - {invitations.length > 0 ? ( 30 30 - <InvitationDataTable data={invitations} columns={invitationColumns} /> 31 31 - ) : null} 32 32 - </div> 33 33 - ); 34 34 - }

-13

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/user/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import { getPageBySegment } from "@/config/pages"; 3 3 - 4 4 - const page = getPageBySegment(["settings", "user"]); 5 5 - 6 6 - export default function Layout({ children }: { children: React.ReactNode }) { 7 7 - return ( 8 8 - <> 9 9 - <Header title={page?.title} description={page?.description} /> 10 10 - {children} 11 11 - </> 12 12 - ); 13 13 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/user/loading.tsx

··· 1 1 - import { Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - // TODO: can be improved... 4 4 - 5 5 - export default function Loading() { 6 6 - return <Skeleton className="h-72 w-full" />; 7 7 - }

-48

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/settings/user/page.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useSession } from "next-auth/react"; 4 4 - 5 5 - import { Input, Label } from "@openstatus/ui"; 6 6 - 7 7 - import Loading from "./loading"; 8 8 - 9 9 - export default function UserPage() { 10 10 - const session = useSession(); 11 11 - 12 12 - if (!session.data?.user) { 13 13 - return <Loading />; 14 14 - } 15 15 - 16 16 - return ( 17 17 - <div className="flex flex-col gap-8"> 18 18 - <div className="grid max-w-sm gap-3"> 19 19 - <div className="grid w-full items-center gap-1.5"> 20 20 - <Label htmlFor="fullname">Full name</Label> 21 21 - <Input id="fullname" value={`${session.data.user?.name}`} disabled /> 22 22 - </div> 23 23 - <div className="grid w-full items-center gap-1.5"> 24 24 - <Label htmlFor="email">Email</Label> 25 25 - <Input 26 26 - id="email" 27 27 - type="email" 28 28 - value={`${session.data.user?.email}`} 29 29 - disabled 30 30 - /> 31 31 - </div> 32 32 - {/* <div className="flex flex-wrap items-end gap-2"> 33 33 - <div className="grid items-center gap-1.5"> 34 34 - <Label htmlFor="avatar">Image</Label> 35 35 - <Input id="avatar" type="file" className="w-56" disabled /> 36 36 - </div> 37 37 - <Avatar className="h-10 w-10"> 38 38 - <AvatarImage 39 39 - src={session.data.user?.photoUrl || undefined} 40 40 - alt={`${session.data.user?.name}`} 41 41 - /> 42 42 - <AvatarFallback></AvatarFallback> 43 43 - </Avatar> 44 44 - </div> */} 45 45 - </div> 46 46 - </div> 47 47 - ); 48 48 - }

-53

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/(overview)/_components/status-report-button.tsx

··· 1 1 - import { cn } from "@/lib/utils"; 2 2 - import type { Page } from "@openstatus/db/src/schema"; 3 3 - import { 4 4 - Alert, 5 5 - AlertDescription, 6 6 - AlertTitle, 7 7 - } from "@openstatus/ui/src/components/alert"; 8 8 - import { buttonVariants } from "@openstatus/ui/src/components/button"; 9 9 - import { 10 10 - DropdownMenu, 11 11 - DropdownMenuContent, 12 12 - DropdownMenuItem, 13 13 - DropdownMenuLabel, 14 14 - DropdownMenuSeparator, 15 15 - DropdownMenuTrigger, 16 16 - } from "@openstatus/ui/src/components/dropdown-menu"; 17 17 - import { ChevronDown, Megaphone } from "lucide-react"; 18 18 - import Link from "next/link"; 19 19 - 20 20 - export function StatusReportButton({ pages }: { pages: Page[] }) { 21 21 - return ( 22 22 - <Alert className="max-w-xl"> 23 23 - <AlertTitle>Status Reports</AlertTitle> 24 24 - <AlertDescription> 25 25 - Start a new report. If you want to update your users about a current 26 26 - report, please hover the <em>Last Report</em> column and click on{" "} 27 27 - <em>Go to report</em>. 28 28 - </AlertDescription> 29 29 - <DropdownMenu> 30 30 - <DropdownMenuTrigger 31 31 - className={cn( 32 32 - buttonVariants({ size: "sm", variant: "secondary" }), 33 33 - "mt-2", 34 34 - )} 35 35 - > 36 36 - <Megaphone className="mr-1 h-4 w-4 pb-0.5" /> 37 37 - New Status Report 38 38 - <span className="mx-2 h-8 w-px bg-background" /> 39 39 - <ChevronDown className="h-4 w-4" /> 40 40 - </DropdownMenuTrigger> 41 41 - <DropdownMenuContent align="end"> 42 42 - <DropdownMenuLabel>Select Page</DropdownMenuLabel> 43 43 - <DropdownMenuSeparator /> 44 44 - {pages.map((page) => ( 45 45 - <Link key={page.id} href={`./status-pages/${page.id}/reports/new`}> 46 46 - <DropdownMenuItem>{page.title}</DropdownMenuItem> 47 47 - </Link> 48 48 - ))} 49 49 - </DropdownMenuContent> 50 50 - </DropdownMenu> 51 51 - </Alert> 52 52 - ); 53 53 - }

-30

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/(overview)/layout.tsx

··· 1 1 - import { ButtonWithDisableTooltip } from "@openstatus/ui"; 2 2 - import Link from "next/link"; 3 3 - import type { ReactNode } from "react"; 4 4 - 5 5 - import { Header } from "@/components/dashboard/header"; 6 6 - import AppPageLayout from "@/components/layout/app-page-layout"; 7 7 - import { api } from "@/trpc/server"; 8 8 - 9 9 - export default async function Layout({ children }: { children: ReactNode }) { 10 10 - const isLimitReached = await api.page.isPageLimitReached.query(); 11 11 - 12 12 - return ( 13 13 - <AppPageLayout> 14 14 - <Header 15 15 - title="Status Pages" 16 16 - description="Overview of all your pages." 17 17 - actions={ 18 18 - <ButtonWithDisableTooltip 19 19 - tooltip="You reached the limits" 20 20 - asChild={!isLimitReached} 21 21 - disabled={isLimitReached} 22 22 - > 23 23 - <Link href="./status-pages/new">Create</Link> 24 24 - </ButtonWithDisableTooltip> 25 25 - } 26 26 - /> 27 27 - {children} 28 28 - </AppPageLayout> 29 29 - ); 30 30 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/(overview)/loading.tsx

··· 1 1 - import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <DataTableSkeleton />; 5 5 - }

-38

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/(overview)/page.tsx

··· 1 1 - import Link from "next/link"; 2 2 - 3 3 - import { Button } from "@openstatus/ui/src/components/button"; 4 4 - 5 5 - import { EmptyState } from "@/components/dashboard/empty-state"; 6 6 - import { Limit } from "@/components/dashboard/limit"; 7 7 - import { columns } from "@/components/data-table/status-page/columns"; 8 8 - import { DataTable } from "@/components/data-table/status-page/data-table"; 9 9 - import { api } from "@/trpc/server"; 10 10 - import { StatusReportButton } from "./_components/status-report-button"; 11 11 - 12 12 - export default async function MonitorPage() { 13 13 - const pages = await api.page.getPagesByWorkspace.query(); 14 14 - 15 15 - if (pages?.length === 0) { 16 16 - return ( 17 17 - <EmptyState 18 18 - icon="panel-top" 19 19 - title="No pages" 20 20 - description="Create your first page" 21 21 - action={ 22 22 - <Button asChild> 23 23 - <Link href="./status-pages/new">Create</Link> 24 24 - </Button> 25 25 - } 26 26 - /> 27 27 - ); 28 28 - } 29 29 - const isLimitReached = await api.page.isPageLimitReached.query(); 30 30 - 31 31 - return ( 32 32 - <> 33 33 - <DataTable columns={columns} data={pages} /> 34 34 - {isLimitReached ? <Limit /> : null} 35 35 - <StatusReportButton pages={pages} /> 36 36 - </> 37 37 - ); 38 38 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/domain/loading.tsx

··· 1 1 - import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <SkeletonForm />; 5 5 - }

-29

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/domain/page.tsx

··· 1 1 - import { notFound } from "next/navigation"; 2 2 - 3 3 - import { ProFeatureAlert } from "@/components/billing/pro-feature-alert"; 4 4 - import { CustomDomainForm } from "@/components/forms/custom-domain-form"; 5 5 - import { api } from "@/trpc/server"; 6 6 - 7 7 - export default async function CustomDomainPage(props: { 8 8 - params: Promise<{ workspaceSlug: string; id: string }>; 9 9 - }) { 10 10 - const params = await props.params; 11 11 - const id = Number(params.id); 12 12 - const page = await api.page.getPageById.query({ id }); 13 13 - const workspace = await api.workspace.getWorkspace.query(); 14 14 - 15 15 - const isValid = workspace.limits["custom-domain"]; 16 16 - 17 17 - if (!page) return notFound(); 18 18 - 19 19 - if (!isValid) return <ProFeatureAlert feature="Custom domains" />; 20 20 - 21 21 - return ( 22 22 - <CustomDomainForm 23 23 - defaultValues={{ 24 24 - customDomain: page.customDomain, 25 25 - id: page.id, 26 26 - }} 27 27 - /> 28 28 - ); 29 29 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/edit/loading.tsx

··· 1 1 - import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <SkeletonForm />; 5 5 - }

-39

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/edit/page.tsx

··· 1 1 - import { notFound } from "next/navigation"; 2 2 - 3 3 - import { StatusPageForm } from "@/components/forms/status-page/form"; 4 4 - import { api } from "@/trpc/server"; 5 5 - import { searchParamsCache } from "./search-params"; 6 6 - 7 7 - export default async function EditPage(props: { 8 8 - params: Promise<{ workspaceSlug: string; id: string }>; 9 9 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 10 10 - }) { 11 11 - const searchParams = await props.searchParams; 12 12 - const params = await props.params; 13 13 - const id = Number(params.id); 14 14 - const page = await api.page.getPageById.query({ id }); 15 15 - const workspace = await api.workspace.getWorkspace.query(); 16 16 - const allMonitors = await api.monitor.getMonitorsByWorkspace.query(); 17 17 - 18 18 - if (!page) { 19 19 - return notFound(); 20 20 - } 21 21 - 22 22 - const { section } = searchParamsCache.parse(searchParams); 23 23 - 24 24 - return ( 25 25 - <StatusPageForm 26 26 - allMonitors={allMonitors} 27 27 - defaultValues={{ 28 28 - ...page, 29 29 - monitors: page.monitorsToPages.map(({ monitorId, order }) => ({ 30 30 - monitorId, 31 31 - order, 32 32 - })), 33 33 - }} 34 34 - defaultSection={section} 35 35 - plan={workspace.plan} 36 36 - workspaceSlug={params.workspaceSlug} 37 37 - /> 38 38 - ); 39 39 - }

-7

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/edit/search-params.ts

··· 1 1 - import { createSearchParamsCache, parseAsString } from "nuqs/server"; 2 2 - 3 3 - export const searchParamsParsers = { 4 4 - section: parseAsString.withDefault("monitors"), 5 5 - }; 6 6 - 7 7 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-53

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/layout.tsx

··· 1 1 - import Link from "next/link"; 2 2 - import { notFound } from "next/navigation"; 3 3 - 4 4 - import { Button } from "@openstatus/ui/src/components/button"; 5 5 - 6 6 - import { getBaseUrl } from "@/app/status-page/[domain]/utils"; 7 7 - import { Header } from "@/components/dashboard/header"; 8 8 - import AppPageWithSidebarLayout from "@/components/layout/app-page-with-sidebar-layout"; 9 9 - import { CopyButton } from "@/components/layout/header/copy-button"; 10 10 - import { api } from "@/trpc/server"; 11 11 - 12 12 - export default async function Layout(props: { 13 13 - children: React.ReactNode; 14 14 - params: Promise<{ workspaceSlug: string; id: string }>; 15 15 - }) { 16 16 - const params = await props.params; 17 17 - 18 18 - const { children } = props; 19 19 - 20 20 - const id = params.id; 21 21 - 22 22 - const page = await api.page.getPageById.query({ 23 23 - id: Number(id), 24 24 - }); 25 25 - 26 26 - if (!page) { 27 27 - return notFound(); 28 28 - } 29 29 - 30 30 - return ( 31 31 - <AppPageWithSidebarLayout id="status-pages"> 32 32 - <Header 33 33 - title={page.title} 34 34 - description={page.description} 35 35 - actions={[ 36 36 - <CopyButton key="copy" id={page.id} />, 37 37 - <Button key="visit" variant="outline" asChild> 38 38 - <Link 39 39 - target="_blank" 40 40 - href={getBaseUrl({ 41 41 - slug: page.slug, 42 42 - customDomain: page.customDomain, 43 43 - })} 44 44 - > 45 45 - Visit 46 46 - </Link> 47 47 - </Button>, 48 48 - ]} 49 49 - /> 50 50 - {children} 51 51 - </AppPageWithSidebarLayout> 52 52 - ); 53 53 - }

-40

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/maintenances/(overview)/page.tsx

··· 1 1 - import { EmptyState } from "@/components/dashboard/empty-state"; 2 2 - import { columns } from "@/components/data-table/maintenance/columns"; 3 3 - import { DataTable } from "@/components/data-table/maintenance/data-table"; 4 4 - import { api } from "@/trpc/server"; 5 5 - import { Button } from "@openstatus/ui/src/components/button"; 6 6 - import Link from "next/link"; 7 7 - 8 8 - export default async function MaintenancePage(props: { 9 9 - params: Promise<{ workspaceSlug: string; id: string }>; 10 10 - }) { 11 11 - const params = await props.params; 12 12 - const maintenances = await api.maintenance.getByPage.query({ 13 13 - id: Number(params.id), 14 14 - }); 15 15 - 16 16 - if (maintenances?.length === 0) 17 17 - return ( 18 18 - <EmptyState 19 19 - icon="hammer" 20 20 - title="No maintenances" 21 21 - description="Add a maintenance to your status page." 22 22 - action={ 23 23 - <Button asChild> 24 24 - <Link href="./maintenances/new">Create a maintenance</Link> 25 25 - </Button> 26 26 - } 27 27 - /> 28 28 - ); 29 29 - 30 30 - return ( 31 31 - <div className="flex flex-col gap-4"> 32 32 - <div> 33 33 - <Button size="sm" asChild> 34 34 - <Link href="./maintenances/new">Create a maintenance</Link> 35 35 - </Button> 36 36 - </div> 37 37 - <DataTable data={maintenances} columns={columns} /> 38 38 - </div> 39 39 - ); 40 40 - }

-23

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/maintenances/[maintenanceId]/edit/page.tsx

··· 1 1 - import { MaintenanceForm } from "@/components/forms/maintenance/form"; 2 2 - import { api } from "@/trpc/server"; 3 3 - 4 4 - export default async function MaintenancePage(props: { 5 5 - params: Promise<{ workspaceSlug: string; id: string; maintenanceId: string }>; 6 6 - }) { 7 7 - const params = await props.params; 8 8 - const monitors = await api.monitor.getMonitorsByPageId.query({ 9 9 - id: Number(params.id), 10 10 - }); 11 11 - const maintenance = await api.maintenance.getById.query({ 12 12 - id: Number(params.maintenanceId), 13 13 - }); 14 14 - 15 15 - return ( 16 16 - <MaintenanceForm 17 17 - defaultValues={maintenance} 18 18 - pageId={Number(params.id)} 19 19 - defaultSection="connect" 20 20 - monitors={monitors} 21 21 - /> 22 22 - ); 23 23 - }

-20

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/maintenances/new/page.tsx

··· 1 1 - import { MaintenanceForm } from "@/components/forms/maintenance/form"; 2 2 - import { api } from "@/trpc/server"; 3 3 - 4 4 - export default async function MaintenancePage(props: { 5 5 - params: Promise<{ workspaceSlug: string; id: string }>; 6 6 - }) { 7 7 - const params = await props.params; 8 8 - const monitors = await api.monitor.getMonitorsByPageId.query({ 9 9 - id: Number(params.id), 10 10 - }); 11 11 - 12 12 - return ( 13 13 - <MaintenanceForm 14 14 - nextUrl="./" // back to the overview page 15 15 - defaultSection="connect" 16 16 - pageId={Number(params.id)} 17 17 - monitors={monitors} 18 18 - /> 19 19 - ); 20 20 - }

-8

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - export default async function Page(props: { 4 4 - params: Promise<{ workspaceSlug: string; id: string }>; 5 5 - }) { 6 6 - const params = await props.params; 7 7 - return redirect(`./${params.id}/edit`); 8 8 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/(overview)/loading.tsx

··· 1 1 - import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <DataTableSkeleton />; 5 5 - }

-40

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/(overview)/page.tsx

··· 1 1 - import Link from "next/link"; 2 2 - 3 3 - import { Button } from "@openstatus/ui/src/components/button"; 4 4 - 5 5 - import { EmptyState } from "@/components/dashboard/empty-state"; 6 6 - import { columns } from "@/components/data-table/status-report/columns"; 7 7 - import { DataTable } from "@/components/data-table/status-report/data-table"; 8 8 - import { api } from "@/trpc/server"; 9 9 - 10 10 - export default async function MonitorPage(props: { 11 11 - params: Promise<{ id: string }>; 12 12 - }) { 13 13 - const params = await props.params; 14 14 - const reports = await api.statusReport.getStatusReportByPageId.query({ 15 15 - id: Number.parseInt(params.id), 16 16 - }); 17 17 - 18 18 - if (reports?.length === 0) 19 19 - return ( 20 20 - <EmptyState 21 21 - icon="siren" 22 22 - title="No status reports" 23 23 - description="Create your first status report" 24 24 - action={ 25 25 - <Button asChild> 26 26 - <Link href="./reports/new">Create</Link> 27 27 - </Button> 28 28 - } 29 29 - /> 30 30 - ); 31 31 - 32 32 - return ( 33 33 - <div className="space-y-3"> 34 34 - <Button size="sm" asChild> 35 35 - <Link href="./reports/new">Create Status Report</Link> 36 36 - </Button> 37 37 - <DataTable columns={columns} data={reports} /> 38 38 - </div> 39 39 - ); 40 40 - }

-42

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/[reportId]/_components/status-update-button.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useState } from "react"; 4 4 - 5 5 - import { 6 6 - Button, 7 7 - Dialog, 8 8 - DialogContent, 9 9 - DialogDescription, 10 10 - DialogHeader, 11 11 - DialogTitle, 12 12 - DialogTrigger, 13 13 - } from "@openstatus/ui"; 14 14 - 15 15 - import { StatusReportUpdateForm } from "@/components/forms/status-report-update/form"; 16 16 - 17 17 - export function StatusUpdateButton({ 18 18 - statusReportId, 19 19 - }: { 20 20 - statusReportId: number; 21 21 - }) { 22 22 - const [open, setOpen] = useState(false); 23 23 - return ( 24 24 - <Dialog open={open} onOpenChange={setOpen}> 25 25 - <DialogTrigger asChild> 26 26 - <Button>Status Update</Button> 27 27 - </DialogTrigger> 28 28 - <DialogContent className="max-h-screen overflow-y-scroll sm:max-w-[650px]"> 29 29 - <DialogHeader> 30 30 - <DialogTitle>New Status Report</DialogTitle> 31 31 - <DialogDescription> 32 32 - Provide a status update and add it to the report history. 33 33 - </DialogDescription> 34 34 - </DialogHeader> 35 35 - <StatusReportUpdateForm 36 36 - statusReportId={statusReportId} 37 37 - onSubmit={() => setOpen(false)} 38 38 - /> 39 39 - </DialogContent> 40 40 - </Dialog> 41 41 - ); 42 42 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/[reportId]/edit/loading.tsx

··· 1 1 - import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <SkeletonForm />; 5 5 - }

-34

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/[reportId]/edit/page.tsx

··· 1 1 - import { StatusReportForm } from "@/components/forms/status-report/form"; 2 2 - import { api } from "@/trpc/server"; 3 3 - 4 4 - export default async function EditPage(props: { 5 5 - params: Promise<{ workspaceSlug: string; id: string; reportId: string }>; 6 6 - }) { 7 7 - const params = await props.params; 8 8 - const statusUpdate = await api.statusReport.getStatusReportById.query({ 9 9 - id: Number.parseInt(params.reportId), 10 10 - pageId: Number.parseInt(params.id), 11 11 - }); 12 12 - 13 13 - const monitors = await api.monitor.getMonitorsByWorkspace.query(); 14 14 - 15 15 - return ( 16 16 - <StatusReportForm 17 17 - monitors={monitors} 18 18 - defaultValues={ 19 19 - // TODO: we should move the mapping to the trpc layer 20 20 - // so we don't have to do this in the UI 21 21 - // it should be something like defaultValues={statusReport} 22 22 - { 23 23 - ...statusUpdate, 24 24 - monitors: statusUpdate?.monitorsToStatusReports.map( 25 25 - ({ monitorId }) => monitorId, 26 26 - ), 27 27 - message: "", 28 28 - } 29 29 - } 30 30 - pageId={Number.parseInt(params.id)} 31 31 - defaultSection="connect" 32 32 - /> 33 33 - ); 34 34 - }

-80

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/[reportId]/overview/_components/header.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { StatusReportUpdateForm } from "@/components/forms/status-report-update/form"; 4 4 - import { StatusBadge } from "@/components/status-update/status-badge"; 5 5 - import { formatDate } from "@/lib/utils"; 6 6 - import type { 7 7 - Monitor, 8 8 - StatusReport, 9 9 - StatusReportUpdate, 10 10 - } from "@openstatus/db/src/schema"; 11 11 - import { 12 12 - Badge, 13 13 - Button, 14 14 - Dialog, 15 15 - DialogContent, 16 16 - DialogDescription, 17 17 - DialogHeader, 18 18 - DialogTitle, 19 19 - DialogTrigger, 20 20 - Separator, 21 21 - } from "@openstatus/ui"; 22 22 - import { useState } from "react"; 23 23 - 24 24 - export function Header({ 25 25 - report, 26 26 - monitors, 27 27 - }: { 28 28 - report: StatusReport & { statusReportUpdates: StatusReportUpdate[] }; 29 29 - monitors?: Pick<Monitor, "name" | "id">[]; 30 30 - }) { 31 31 - const [open, setOpen] = useState(false); 32 32 - 33 33 - const firstUpdate = report.statusReportUpdates?.[0]; 34 34 - const _lastUpdate = 35 35 - report.statusReportUpdates?.[report.statusReportUpdates?.length - 1]; 36 36 - 37 37 - return ( 38 38 - <div className="space-y-3"> 39 39 - <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"> 40 40 - <div className="space-y-2"> 41 41 - <h3 className="font-cal text-lg">{report.title}</h3> 42 42 - <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-sm"> 43 43 - <span className="font-mono"> 44 44 - {firstUpdate?.date 45 45 - ? formatDate(firstUpdate?.date) 46 46 - : "Missing date"} 47 47 - </span> 48 48 - <span className="text-muted-foreground/50 text-xs">•</span> 49 49 - <StatusBadge status={report.status} /> 50 50 - <span className="text-muted-foreground/50 text-xs">•</span> 51 51 - {monitors?.map(({ name, id }) => ( 52 52 - <Badge key={id} variant="outline"> 53 53 - {name} 54 54 - </Badge> 55 55 - ))} 56 56 - </div> 57 57 - </div> 58 58 - 59 59 - <Dialog open={open} onOpenChange={setOpen}> 60 60 - <DialogTrigger asChild> 61 61 - <Button size="sm">Create Status Update Report</Button> 62 62 - </DialogTrigger> 63 63 - <DialogContent className="max-h-screen overflow-y-scroll sm:max-w-[650px]"> 64 64 - <DialogHeader> 65 65 - <DialogTitle>Edit Status Report</DialogTitle> 66 66 - <DialogDescription> 67 67 - Update your status report with new information. 68 68 - </DialogDescription> 69 69 - </DialogHeader> 70 70 - <StatusReportUpdateForm 71 71 - statusReportId={report.id} 72 72 - onSubmit={() => setOpen(false)} 73 73 - /> 74 74 - </DialogContent> 75 75 - </Dialog> 76 76 - </div> 77 77 - <Separator /> 78 78 - </div> 79 79 - ); 80 80 - }

-26

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/[reportId]/overview/loading.tsx

··· 1 1 - import { Separator, Skeleton } from "@openstatus/ui"; 2 2 - 3 3 - export default function Loading() { 4 4 - return ( 5 5 - <div className="col-span-full flex flex-col gap-6"> 6 6 - <div className="space-y-3"> 7 7 - <div className="flex items-end justify-between"> 8 8 - <div className="flex-1 space-y-2"> 9 9 - <Skeleton className="h-7 w-full max-w-[200px]" /> 10 10 - <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-sm"> 11 11 - <Skeleton className="h-5 w-full max-w-[100px]" /> 12 12 - <span className="text-muted-foreground/50 text-xs">•</span> 13 13 - <Skeleton className="h-[22px] w-24 rounded-full" /> 14 14 - <span className="text-muted-foreground/50 text-xs">•</span> 15 15 - <Skeleton className="h-[22px] w-16 rounded-full" /> 16 16 - </div> 17 17 - </div> 18 18 - <Skeleton className="h-8 w-48" /> 19 19 - </div> 20 20 - <Separator /> 21 21 - </div> 22 22 - <Skeleton className="h-48 w-full" /> 23 23 - <Skeleton className="h-48 w-full" /> 24 24 - </div> 25 25 - ); 26 26 - }

-35

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/[reportId]/overview/page.tsx

··· 1 1 - import { notFound } from "next/navigation"; 2 2 - 3 3 - import { EmptyState } from "@/components/dashboard/empty-state"; 4 4 - import { Events } from "@/components/status-update/events"; 5 5 - import { api } from "@/trpc/server"; 6 6 - import { Header } from "./_components/header"; 7 7 - 8 8 - export default async function OverviewPage(props: { 9 9 - params: Promise<{ workspaceSlug: string; id: string; reportId: string }>; 10 10 - }) { 11 11 - const params = await props.params; 12 12 - const report = await api.statusReport.getStatusReportById.query({ 13 13 - id: Number.parseInt(params.reportId), 14 14 - pageId: Number.parseInt(params.id), 15 15 - }); 16 16 - 17 17 - if (!report) return notFound(); 18 18 - 19 19 - const monitors = report.monitorsToStatusReports.map(({ monitor }) => monitor); 20 20 - 21 21 - return ( 22 22 - <> 23 23 - <Header report={report} monitors={monitors} /> 24 24 - {report.statusReportUpdates.length > 0 ? ( 25 25 - <Events statusReportUpdates={report.statusReportUpdates} editable /> 26 26 - ) : ( 27 27 - <EmptyState 28 28 - icon="megaphone" 29 29 - title="No status report updates" 30 30 - description="Create your first update" 31 31 - /> 32 32 - )} 33 33 - </> 34 34 - ); 35 35 - }

-8

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/[reportId]/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - export default async function Page(props: { 4 4 - params: Promise<{ workspaceSlug: string; reportId: string }>; 5 5 - }) { 6 6 - const params = await props.params; 7 7 - return redirect(`./${params.reportId}/overview`); 8 8 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/new/loading.tsx

··· 1 1 - import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <SkeletonForm />; 5 5 - }

-18

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/reports/new/page.tsx

··· 1 1 - import { StatusReportForm } from "@/components/forms/status-report/form"; 2 2 - import { api } from "@/trpc/server"; 3 3 - 4 4 - export default async function NewPage(props: { 5 5 - params: Promise<{ id: string; reportId: string }>; 6 6 - }) { 7 7 - const params = await props.params; 8 8 - const monitors = await api.monitor.getMonitorsByWorkspace.query(); 9 9 - 10 10 - return ( 11 11 - <StatusReportForm 12 12 - monitors={monitors} 13 13 - nextUrl={"./"} 14 14 - defaultSection="update-message" 15 15 - pageId={Number.parseInt(params.id)} 16 16 - /> 17 17 - ); 18 18 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/subscribers/loading.tsx

··· 1 1 - import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <DataTableSkeleton />; 5 5 - }

-26

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/[id]/subscribers/page.tsx

··· 1 1 - import { notFound } from "next/navigation"; 2 2 - 3 3 - import { ProFeatureAlert } from "@/components/billing/pro-feature-alert"; 4 4 - import { columns } from "@/components/data-table/page-subscriber/columns"; 5 5 - import { DataTable } from "@/components/data-table/page-subscriber/data-table"; 6 6 - import { api } from "@/trpc/server"; 7 7 - 8 8 - export default async function CustomDomainPage(props: { 9 9 - params: Promise<{ workspaceSlug: string; id: string }>; 10 10 - }) { 11 11 - const params = await props.params; 12 12 - const id = Number(params.id); 13 13 - const page = await api.page.getPageById.query({ id }); 14 14 - const workspace = await api.workspace.getWorkspace.query(); 15 15 - 16 16 - if (!page) return notFound(); 17 17 - 18 18 - const isValid = workspace.limits["status-subscribers"]; 19 19 - if (!isValid) return <ProFeatureAlert feature={"Status page subscribers"} />; 20 20 - 21 21 - const data = await api.pageSubscriber.getPageSubscribersByPageId.query({ 22 22 - id, 23 23 - }); 24 24 - 25 25 - return <DataTable data={data} columns={columns} />; 26 26 - }

-15

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/new/layout.tsx

··· 1 1 - import { Header } from "@/components/dashboard/header"; 2 2 - import AppPageLayout from "@/components/layout/app-page-layout"; 3 3 - 4 4 - export default async function Layout({ 5 5 - children, 6 6 - }: { 7 7 - children: React.ReactNode; 8 8 - }) { 9 9 - return ( 10 10 - <AppPageLayout> 11 11 - <Header title="Pages" description="Create your page." /> 12 12 - {children} 13 13 - </AppPageLayout> 14 14 - ); 15 15 - }

-5

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/new/loading.tsx

··· 1 1 - import { SkeletonForm } from "@/components/forms/skeleton-form"; 2 2 - 3 3 - export default function Loading() { 4 4 - return <SkeletonForm />; 5 5 - }

-25

apps/web/src/app/(pages)/app/[workspaceSlug]/(dashboard)/status-pages/new/page.tsx

··· 1 1 - import { redirect } from "next/navigation"; 2 2 - 3 3 - import { StatusPageForm } from "@/components/forms/status-page/form"; 4 4 - import { api } from "@/trpc/server"; 5 5 - 6 6 - export default async function Page(props: { 7 7 - params: Promise<{ workspaceSlug: string }>; 8 8 - }) { 9 9 - const params = await props.params; 10 10 - const allMonitors = await api.monitor.getMonitorsByWorkspace.query(); 11 11 - const isLimitReached = await api.page.isPageLimitReached.query(); 12 12 - const workspace = await api.workspace.getWorkspace.query(); 13 13 - 14 14 - if (isLimitReached) return redirect("./"); 15 15 - 16 16 - return ( 17 17 - <StatusPageForm 18 18 - allMonitors={allMonitors} // FIXME: rename to just 'monitors' 19 19 - nextUrl="./" // back to the overview page 20 20 - defaultSection="monitors" 21 21 - workspaceSlug={params.workspaceSlug} 22 22 - plan={workspace.plan} 23 23 - /> 24 24 - ); 25 25 - }

-84

apps/web/src/app/(pages)/app/[workspaceSlug]/onboarding/_components/description.tsx

··· 1 1 - import { Icons } from "@/components/icons"; 2 2 - import { cn } from "@/lib/utils"; 3 3 - 4 4 - const steps = ["monitor", "status-page"] as const; 5 5 - // potentially move to `config/onboarding` 6 6 - const onboardingConfig = { 7 7 - monitor: { 8 8 - icon: "activity", 9 9 - name: "Monitor", 10 10 - description: [ 11 11 - { 12 12 - title: "What is a monitor?", 13 13 - text: "A monitor is a website or api endpoint that you are going to ping on a regular basis.", 14 14 - }, 15 15 - { 16 16 - title: "How to create monitors?", 17 17 - text: "You can create a monitor like you are about to via our dashboard or with our API. E.g. you can create a monitor for every instance you deploy programmatically.", 18 18 - }, 19 19 - ], 20 20 - }, 21 21 - "status-page": { 22 22 - icon: "panel-top", 23 23 - name: "Status Page", 24 24 - description: [ 25 25 - { 26 26 - title: "How to use status pages?", 27 27 - text: "Add the monitors you'd like to track to a status page and inform your users if your services are down.", 28 28 - }, 29 29 - { 30 30 - title: "Subdomain or custom domains?", 31 31 - text: "Start with a unique subdomain slug and move to your own custom domains afterwards by updating the DNS settings.", 32 32 - }, 33 33 - ], 34 34 - }, 35 35 - } as const; 36 36 - 37 37 - export function Description({ 38 38 - step, 39 39 - }: { 40 40 - step?: keyof typeof onboardingConfig; 41 41 - }) { 42 42 - const config = step && onboardingConfig[step]; 43 43 - return ( 44 44 - <div className="flex h-full flex-col gap-6 border-border border-l pl-6 md:pl-8"> 45 45 - <div className="flex gap-5"> 46 46 - {steps.map((item, _i) => { 47 47 - const { icon, name } = onboardingConfig[item]; 48 48 - const StepIcon = Icons[icon]; 49 49 - const active = step === item; 50 50 - return ( 51 51 - <div key={name} className="flex items-center gap-2"> 52 52 - <div 53 53 - className={cn( 54 54 - "max-w-max rounded-full border border-border p-2", 55 55 - active && "border-accent-foreground", 56 56 - )} 57 57 - > 58 58 - <StepIcon className="h-4 w-4" /> 59 59 - </div> 60 60 - <p 61 61 - className={cn( 62 62 - "text-sm", 63 63 - active 64 64 - ? "font-semibold text-foreground" 65 65 - : "text-muted-foreground", 66 66 - )} 67 67 - > 68 68 - {name} 69 69 - </p> 70 70 - </div> 71 71 - ); 72 72 - })} 73 73 - </div> 74 74 - {config?.description.map(({ title, text }) => { 75 75 - return ( 76 76 - <dl key={title} className="grid gap-1"> 77 77 - <dt className="font-medium">{title}</dt> 78 78 - <dd className="text-muted-foreground">{text}</dd> 79 79 - </dl> 80 80 - ); 81 81 - })} 82 82 - </div> 83 83 - ); 84 84 - }

-28

apps/web/src/app/(pages)/app/[workspaceSlug]/onboarding/layout.tsx

··· 1 1 - import type { ReactNode } from "react"; 2 2 - 3 3 - import { Shell } from "@/components/dashboard/shell"; 4 4 - import { AppHeader } from "@/components/layout/header/app-header"; 5 5 - import { WorkspaceClientCookie } from "../worskpace-client-cookie"; 6 6 - 7 7 - // TODO: make the container min-h-screen and the footer below! 8 8 - export default async function AppLayout(props: { 9 9 - params: Promise<{ workspaceSlug: string }>; 10 10 - children: ReactNode; 11 11 - }) { 12 12 - const params = await props.params; 13 13 - 14 14 - const { children } = props; 15 15 - 16 16 - const { workspaceSlug } = params; 17 17 - return ( 18 18 - <div className="container relative mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-6 p-4"> 19 19 - <AppHeader /> 20 20 - <div className="flex w-full flex-1 gap-6 lg:gap-8"> 21 21 - <main className="z-10 flex w-full flex-1 flex-col items-start justify-center"> 22 22 - <Shell className="relative flex-1">{children}</Shell> 23 23 - </main> 24 24 - </div> 25 25 - <WorkspaceClientCookie {...{ workspaceSlug }} /> 26 26 - </div> 27 27 - ); 28 28 - }

-84

apps/web/src/app/(pages)/app/[workspaceSlug]/onboarding/page.tsx

··· 1 1 - import Link from "next/link"; 2 2 - import { redirect } from "next/navigation"; 3 3 - 4 4 - import { Button } from "@openstatus/ui/src/components/button"; 5 5 - 6 6 - import { Header } from "@/components/dashboard/header"; 7 7 - import { MonitorForm } from "@/components/forms/monitor/form"; 8 8 - import { StatusPageForm } from "@/components/forms/status-page/form"; 9 9 - import { api } from "@/trpc/server"; 10 10 - import { Description } from "./_components/description"; 11 11 - 12 12 - export default async function Onboarding(props: { 13 13 - params: Promise<{ workspaceSlug: string }>; 14 14 - }) { 15 15 - const params = await props.params; 16 16 - const { workspaceSlug } = params; 17 17 - 18 18 - const workspace = await api.workspace.getWorkspace.query(); 19 19 - const allMonitors = await api.monitor.getMonitorsByWorkspace.query(); 20 20 - const allPages = await api.page.getPagesByWorkspace.query(); 21 21 - const allNotifications = 22 22 - await api.notification.getNotificationsByWorkspace.query(); 23 23 - 24 24 - if (allMonitors.length === 0) { 25 25 - return ( 26 26 - <div className="flex h-full w-full flex-col gap-6 md:gap-8"> 27 27 - <Header 28 28 - title="Get Started" 29 29 - description="Create your first monitor." 30 30 - actions={ 31 31 - <Button variant="link" className="text-muted-foreground" asChild> 32 32 - <Link href={`/app/${workspaceSlug}/monitors`}>Skip</Link> 33 33 - </Button> 34 34 - } 35 35 - /> 36 36 - <div className="flex flex-1 flex-col gap-6 md:grid md:grid-cols-3 md:gap-8"> 37 37 - <div className="flex flex-col md:col-span-2"> 38 38 - <MonitorForm 39 39 - notifications={allNotifications} 40 40 - defaultSection="request" 41 41 - limits={workspace.limits} 42 42 - plan={workspace.plan} 43 43 - /> 44 44 - </div> 45 45 - <div className="hidden h-full md:col-span-1 md:block"> 46 46 - <Description step="monitor" /> 47 47 - </div> 48 48 - </div> 49 49 - </div> 50 50 - ); 51 51 - } 52 52 - 53 53 - if (allPages.length === 0) { 54 54 - return ( 55 55 - <div className="flex h-full w-full flex-col gap-6 md:gap-8"> 56 56 - <Header 57 57 - title="Get Started" 58 58 - description="Create your first status page." 59 59 - actions={ 60 60 - <Button variant="link" className="text-muted-foreground"> 61 61 - <Link href={`/app/${workspaceSlug}/monitors`}>Skip</Link> 62 62 - </Button> 63 63 - } 64 64 - /> 65 65 - <div className="flex flex-1 flex-col gap-6 md:grid md:grid-cols-3 md:gap-8"> 66 66 - <div className="flex flex-col md:col-span-2"> 67 67 - <StatusPageForm 68 68 - {...{ workspaceSlug, allMonitors }} 69 69 - nextUrl={`/app/${workspaceSlug}/status-pages`} 70 70 - defaultSection="monitors" 71 71 - plan="free" // user is on free plan by default 72 72 - checkAllMonitors 73 73 - /> 74 74 - </div> 75 75 - <div className="hidden h-full md:col-span-1 md:block"> 76 76 - <Description step="status-page" /> 77 77 - </div> 78 78 - </div> 79 79 - </div> 80 80 - ); 81 81 - } 82 82 - 83 83 - return redirect(`/app/${workspaceSlug}/monitors`); 84 84 - }

-22

apps/web/src/app/(pages)/app/[workspaceSlug]/worskpace-client-cookie.ts

··· 1 1 - "use client"; 2 2 - 3 3 - import { useEffect } from "react"; 4 4 - 5 5 - /** 6 6 - * ISSUE: using the `middleware` to add a server httpOnly cookie doesn't work 7 7 - * req.nextUrl.pathname.startsWith("/app") is not true on the server as we are using the /api/trpc endpoint 8 8 - * to mutate our database. For some reasons, querying the database works fine. 9 9 - */ 10 10 - 11 11 - export function WorkspaceClientCookie({ 12 12 - workspaceSlug, 13 13 - }: { 14 14 - workspaceSlug: string; 15 15 - }) { 16 16 - useEffect(() => { 17 17 - if (document) { 18 18 - document.cookie = `workspace-slug=${workspaceSlug}; path=/`; 19 19 - } 20 20 - }, [workspaceSlug]); 21 21 - return null; 22 22 - }

-61

apps/web/src/app/(pages)/app/invite/_components/link-cards.tsx

··· 1 1 - import { ArrowRight, ArrowUpRight } from "lucide-react"; 2 2 - import Link from "next/link"; 3 3 - 4 4 - import { Card, CardDescription, CardHeader, CardTitle } from "@openstatus/ui"; 5 5 - 6 6 - const links = [ 7 7 - { 8 8 - title: "Monitors", 9 9 - description: "Create and manage monitors", 10 10 - href: "/monitors", 11 11 - }, 12 12 - { 13 13 - title: "Status Pages", 14 14 - description: "Create and manage pages", 15 15 - href: "/status-pages", 16 16 - }, 17 17 - { 18 18 - title: "Status Reports", 19 19 - description: "Create and manage reports", 20 20 - href: "/status-reports", 21 21 - }, 22 22 - { 23 23 - title: "Documentation", 24 24 - description: "Learn more about OpenStatus", 25 25 - href: "https://docs.openstatus.dev", 26 26 - }, 27 27 - ]; 28 28 - 29 29 - export function LinkCards({ slug }: { slug: string }) { 30 30 - return ( 31 31 - <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2"> 32 32 - {links.map((link) => { 33 33 - const isExternal = link.href.startsWith("http"); 34 34 - const href = isExternal ? link.href : `/app/${slug}${link.href}`; 35 35 - const target = isExternal ? "_blank" : undefined; 36 36 - return ( 37 37 - <Link 38 38 - key={link.href} 39 39 - href={href} 40 40 - target={target} 41 41 - className="group flex w-full flex-1" 42 42 - > 43 43 - <Card className="flex w-full flex-col"> 44 44 - <CardHeader className="flex-1"> 45 45 - <CardTitle>{link.title}</CardTitle> 46 46 - <div className="flex flex-1 justify-between gap-2"> 47 47 - <CardDescription>{link.description}</CardDescription> 48 48 - {isExternal ? ( 49 49 - <ArrowUpRight className="h-4 w-4 shrink-0 self-end text-muted-foreground group-hover:text-foreground" /> 50 50 - ) : ( 51 51 - <ArrowRight className="h-4 w-4 shrink-0 self-end text-muted-foreground group-hover:text-foreground" /> 52 52 - )} 53 53 - </div> 54 54 - </CardHeader> 55 55 - </Card> 56 56 - </Link> 57 57 - ); 58 58 - })} 59 59 - </div> 60 60 - ); 61 61 - }

-16

apps/web/src/app/(pages)/app/invite/layout.tsx

··· 1 1 - import { Shell } from "@/components/dashboard/shell"; 2 2 - import { AppHeader } from "@/components/layout/header/app-header"; 3 3 - import type { ReactNode } from "react"; 4 4 - 5 5 - export default async function AppLayout({ children }: { children: ReactNode }) { 6 6 - return ( 7 7 - <div className="container relative mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-6 p-4 lg:p-8"> 8 8 - <AppHeader /> 9 9 - <div className="flex w-full flex-1 gap-6 lg:gap-8"> 10 10 - <main className="z-10 flex w-full flex-1 flex-col items-start justify-center"> 11 11 - <Shell className="relative flex-1">{children}</Shell> 12 12 - </main> 13 13 - </div> 14 14 - </div> 15 15 - ); 16 16 - }

-50

apps/web/src/app/(pages)/app/invite/page.tsx

··· 1 1 - import { Alert, AlertDescription, AlertTitle, Separator } from "@openstatus/ui"; 2 2 - 3 3 - import { Icons } from "@/components/icons"; 4 4 - import { api } from "@/trpc/server"; 5 5 - import { LinkCards } from "./_components/link-cards"; 6 6 - import { searchParamsCache } from "./search-params"; 7 7 - 8 8 - const AlertTriangle = Icons["alert-triangle"]; 9 9 - 10 10 - export default async function InvitePage(props: { 11 11 - searchParams: Promise<{ [key: string]: string | string[] | undefined }>; 12 12 - }) { 13 13 - const searchParams = await props.searchParams; 14 14 - const { token } = searchParamsCache.parse(searchParams); 15 15 - const { message, data } = token 16 16 - ? await api.invitation.acceptInvitation.mutate({ token }) 17 17 - : { message: "Unavailable invitation token.", data: undefined }; 18 18 - 19 19 - const workspace = await api.workspace.getWorkspace.query(); 20 20 - 21 21 - if (!data) { 22 22 - return ( 23 23 - <div className="mx-auto flex h-full max-w-xl flex-1 flex-col items-center justify-center gap-4"> 24 24 - <h1 className="font-semibold text-2xl">Invitation</h1> 25 25 - <Alert variant="destructive"> 26 26 - <AlertTriangle className="h-4 w-4" /> 27 27 - <AlertTitle>Something went wrong</AlertTitle> 28 28 - <AlertDescription>{message}</AlertDescription> 29 29 - </Alert> 30 30 - <Separator className="my-4" /> 31 31 - <p className="text-muted-foreground">Quick Links</p> 32 32 - <LinkCards slug={workspace.slug} /> 33 33 - </div> 34 34 - ); 35 35 - } 36 36 - 37 37 - return ( 38 38 - <div className="mx-auto flex h-full max-w-xl flex-1 flex-col items-center justify-center gap-4"> 39 39 - <h1 className="font-semibold text-2xl">Invitation</h1> 40 40 - <Alert> 41 41 - <Icons.check className="h-4 w-4" /> 42 42 - <AlertTitle>Ready to go</AlertTitle> 43 43 - <AlertDescription>{message}</AlertDescription> 44 44 - </Alert> 45 45 - <Separator className="my-4" /> 46 46 - <p className="text-muted-foreground">Quick Links</p> 47 47 - <LinkCards slug={data.slug} /> 48 48 - </div> 49 49 - ); 50 50 - }

-7

apps/web/src/app/(pages)/app/invite/search-params.ts

··· 1 1 - import { createSearchParamsCache, parseAsString } from "nuqs/server"; 2 2 - 3 3 - export const searchParamsParsers = { 4 4 - token: parseAsString, 5 5 - }; 6 6 - 7 7 - export const searchParamsCache = createSearchParamsCache(searchParamsParsers);

-22

apps/web/src/app/(pages)/app/layout.tsx

··· 1 1 - import { SessionProvider } from "next-auth/react"; 2 2 - 3 3 - import { Bubble } from "@/components/support/bubble"; 4 4 - import { auth } from "@/lib/auth"; 5 5 - import { IdentifyComponent } from "@openpanel/nextjs"; 6 6 - 7 7 - export default async function AuthLayout({ 8 8 - children, // will be a page or nested layout 9 9 - }: { 10 10 - children: React.ReactNode; 11 11 - }) { 12 12 - const session = await auth(); 13 13 - return ( 14 14 - <SessionProvider session={session}> 15 15 - {children} 16 16 - <Bubble /> 17 17 - {session?.user?.id && ( 18 18 - <IdentifyComponent profileId={`usr_${session?.user?.id}`} /> 19 19 - )} 20 20 - </SessionProvider> 21 21 - ); 22 22 - }

-15

apps/web/src/app/(pages)/app/onboarding/page.tsx

··· 1 1 - import { auth } from "@/lib/auth"; 2 2 - import { api } from "@/trpc/server"; 3 3 - import { redirect } from "next/navigation"; 4 4 - 5 5 - export default async function OnboardingPage() { 6 6 - const session = await auth(); 7 7 - 8 8 - if (!session) redirect("/app/login"); 9 9 - 10 10 - const workspace = await api.workspace.getWorkspace.query(); 11 11 - 12 12 - if (!workspace) redirect("/app/login"); 13 13 - 14 14 - return redirect(`/app/${workspace.slug}/onboarding`); 15 15 - }

-55

apps/web/src/app/(pages)/app/page.tsx

··· 1 1 - "use client"; 2 2 - 3 3 - import { useRouter } from "next/navigation"; 4 4 - 5 5 - import { Shell } from "@/components/dashboard/shell"; 6 6 - import { AppHeader } from "@/components/layout/header/app-header"; 7 7 - import { LoadingAnimation } from "@/components/loading-animation"; 8 8 - 9 9 - // TODO: discuss how to make that page a bit more enjoyable 10 10 - export default function Page() { 11 11 - const router = useRouter(); 12 12 - 13 13 - // waiting for the workspace to be created 14 14 - setTimeout(() => router.refresh(), 1000); 15 15 - 16 16 - return ( 17 17 - <div className="container relative mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-6 p-4 lg:p-8"> 18 18 - <AppHeader /> 19 19 - <div className="flex w-full flex-1 gap-6 lg:gap-8"> 20 20 - <main className="z-10 flex w-full flex-1 flex-col items-start justify-center"> 21 21 - <Shell className="relative flex flex-1 flex-col items-center justify-center"> 22 22 - <div className="grid gap-4"> 23 23 - <div className="text-center"> 24 24 - <p className="mb-1 font-cal text-3xl">Creating Workspace</p> 25 25 - <p className="mb-5 text-muted-foreground text-xl"> 26 26 - Should be done in a second. 27 27 - </p> 28 28 - <p className="text-muted-foreground"> 29 29 - If you are stuck for longer, please contact us via{" "} 30 30 - <a 31 31 - href="https://openstatus.dev/discord" 32 32 - target="_blank" 33 33 - className="text-foreground underline underline-offset-4 hover:no-underline" 34 34 - rel="noreferrer" 35 35 - > 36 36 - Discord 37 37 - </a>{" "} 38 38 - or{" "} 39 39 - <a 40 40 - href="mailto:thibault@openstatus.dev" 41 41 - className="text-foreground underline underline-offset-4 hover:no-underline" 42 42 - > 43 43 - Mail 44 44 - </a> 45 45 - . 46 46 - </p> 47 47 - </div> 48 48 - <LoadingAnimation variant="inverse" size="lg" /> 49 49 - </div> 50 50 - </Shell> 51 51 - </main> 52 52 - </div> 53 53 - </div> 54 54 - ); 55 55 - }

-14

apps/web/src/app/api/ping/cold/route.ts

··· 1 1 - import { NextResponse } from "next/server"; 2 2 - 3 3 - export const dynamic = "force-dynamic"; 4 4 - 5 5 - export const maxDuration = 30; // to trick and not using the same function as the other ping route 6 6 - 7 7 - export async function GET() { 8 8 - return NextResponse.json({ ping: "pong" }, { status: 200 }); 9 9 - } 10 10 - 11 11 - export async function POST(req: Request) { 12 12 - const body = await req.json(); 13 13 - return NextResponse.json({ ping: body }, { status: 200 }); 14 14 - }

-13

apps/web/src/app/api/ping/edge/route.ts

··· 1 1 - import { NextResponse } from "next/server"; 2 2 - 3 3 - export const runtime = "edge"; 4 4 - export const dynamic = "force-dynamic"; 5 5 - 6 6 - export async function GET() { 7 7 - return NextResponse.json({ ping: "pong" }, { status: 200 }); 8 8 - } 9 9 - 10 10 - export async function POST(req: Request) { 11 11 - const body = await req.json(); 12 12 - return NextResponse.json({ ping: body }, { status: 200 }); 13 13 - }

-14

apps/web/src/app/api/ping/route.ts

··· 1 1 - import { NextResponse } from "next/server"; 2 2 - 3 3 - export const dynamic = "force-dynamic"; 4 4 - 5 5 - export const maxDuration = 25; // to trick and not using the same function as the other ping route 6 6 - 7 7 - export async function GET() { 8 8 - return NextResponse.json({ ping: "pong" }, { status: 200 }); 9 9 - } 10 10 - 11 11 - export async function POST(req: Request) { 12 12 - const body = await req.json(); 13 13 - return NextResponse.json({ ping: body }, { status: 200 }); 14 14 - }

-14

apps/web/src/app/api/ping/test/route.ts

··· 1 1 - import { NextResponse } from "next/server"; 2 2 - 3 3 - export const dynamic = "force-dynamic"; 4 4 - 5 5 - export const maxDuration = 31; // to trick and not using the same function as the other ping route 6 6 - 7 7 - export async function GET() { 8 8 - return NextResponse.json({ ping: "pong" }, { status: 200 }); 9 9 - } 10 10 - 11 11 - export async function POST(req: Request) { 12 12 - const body = await req.json(); 13 13 - return NextResponse.json({ ping: body }, { status: 200 }); 14 14 - }

-14

apps/web/src/app/api/ping/vercel/route.ts

··· 1 1 - import { NextResponse } from "next/server"; 2 2 - 3 3 - export const dynamic = "force-dynamic"; 4 4 - 5 5 - export const maxDuration = 42; // to trick and not using the same function as the other ping route 6 6 - 7 7 - export async function GET() { 8 8 - return NextResponse.json({ ping: "pong" }, { status: 200 }); 9 9 - } 10 10 - 11 11 - export async function POST(req: Request) { 12 12 - const body = await req.json(); 13 13 - return NextResponse.json({ ping: body }, { status: 200 }); 14 14 - }

-13

apps/web/src/app/api/ping/warn/route.ts

··· 1 1 - import { NextResponse } from "next/server"; 2 2 - 3 3 - export const dynamic = "force-dynamic"; 4 4 - export const maxDuration = 20; // to trick and not using the same function as the other ping route 5 5 - 6 6 - export async function GET() { 7 7 - return NextResponse.json({ ping: "pong" }, { status: 200 }); 8 8 - } 9 9 - 10 10 - export async function POST(req: Request) { 11 11 - const body = await req.json(); 12 12 - return NextResponse.json({ ping: body }, { status: 200 }); 13 13 - }