diff --git a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/[maintenanceId]/layout.tsx b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/[maintenanceId]/layout.tsx new file mode 100644 index 000000000..83162b737 --- /dev/null +++ b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/[maintenanceId]/layout.tsx @@ -0,0 +1,22 @@ +import { HydrateClient, fetchQueryOrNotFound, trpc } from "@/lib/trpc/server"; + +export default async function Layout({ + children, + params, +}: { + children: React.ReactNode; + params: Promise<{ id: string; maintenanceId: string }>; +}) { + const { id, maintenanceId } = await params; + await Promise.all([ + fetchQueryOrNotFound( + trpc.maintenance.get.queryOptions({ + id: Number.parseInt(maintenanceId), + }), + ), + fetchQueryOrNotFound( + trpc.page.get.queryOptions({ id: Number.parseInt(id) }), + ), + ]); + return {children}; +} diff --git a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/[maintenanceId]/page.tsx b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/[maintenanceId]/page.tsx new file mode 100644 index 000000000..7c56a19aa --- /dev/null +++ b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/[maintenanceId]/page.tsx @@ -0,0 +1,140 @@ +"use client"; + +import { Add } from "@openstatus/icons"; +import { Button } from "@openstatus/ui/components/ui/button"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { format } from "date-fns"; +import { useParams } from "next/navigation"; + +import { + EmptyStateContainer, + EmptyStateDescription, +} from "@/components/content/empty-state"; +import { + Section, + SectionDescription, + SectionGroup, + SectionHeader, + SectionHeaderRow, + SectionTitle, +} from "@/components/content/section"; +import { FormCardGroup } from "@/components/forms/form-card"; +import { FormSheetWithDirtyProtection } from "@/components/forms/form-sheet"; +import { FormMaintenanceUpdateCard } from "@/components/forms/maintenance-update/card"; +import { FormSheetMaintenanceUpdate } from "@/components/forms/maintenance-update/sheet"; +import { useTRPC } from "@/lib/trpc/client"; + +export default function Page() { + const { maintenanceId } = useParams<{ + id: string; + maintenanceId: string; + }>(); + const trpc = useTRPC(); + const queryClient = useQueryClient(); + const input = { id: Number.parseInt(maintenanceId) }; + const { data: maintenance, refetch } = useQuery( + trpc.maintenance.get.queryOptions(input), + ); + + const invalidateMaintenanceQueries = () => { + refetch(); + queryClient.invalidateQueries({ + queryKey: trpc.maintenance.list.queryKey(), + }); + queryClient.invalidateQueries({ + queryKey: trpc.page.list.queryKey(), + }); + }; + + const notifyMutation = useMutation( + trpc.subscriberNotification.maintenance.mutationOptions(), + ); + const createMutation = useMutation( + trpc.maintenance.createUpdate.mutationOptions({ + onSuccess: (update) => { + if (update?.notifySubscribers) { + notifyMutation.mutate({ id: update.id }); + } + invalidateMaintenanceQueries(); + }, + }), + ); + const updateMutation = useMutation( + trpc.maintenance.updateUpdate.mutationOptions({ + onSuccess: invalidateMaintenanceQueries, + }), + ); + const deleteMutation = useMutation( + trpc.maintenance.deleteUpdate.mutationOptions({ + onSuccess: invalidateMaintenanceQueries, + }), + ); + + if (!maintenance) return null; + + const updates = [...maintenance.updates].sort( + (a, b) => b.date.getTime() - a.date.getTime() || b.id - a.id, + ); + const affected = maintenance.pageComponents + .map((component) => component.name) + .join(", "); + + return ( + +
+ + + {maintenance.title} + + {format(maintenance.from, "PPP 'at' p")} –{" "} + {format(maintenance.to, "PPP 'at' p")}. Affects{" "} + {affected || "zero"}{" "} + component(s). + + + + + + Maintenance Updates + { + await createMutation.mutateAsync({ + maintenanceId: maintenance.id, + message: values.message, + date: values.date, + notifySubscribers: values.notifySubscribers, + }); + }} + > + + + + + + {updates.map((update, index) => ( + + { + await updateMutation.mutateAsync({ + id: update.id, + message: values.message, + date: values.date, + }); + }} + onDelete={async () => { + await deleteMutation.mutateAsync({ id: update.id }); + }} + /> + + ))} + +
+ + ); +} diff --git a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/page.tsx b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/page.tsx index 65930a078..84a2e136f 100644 --- a/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/page.tsx +++ b/apps/dashboard/src/app/(dashboard)/status-pages/[id]/maintenances/page.tsx @@ -2,8 +2,8 @@ import { Add } from "@openstatus/icons"; import { Button } from "@openstatus/ui/components/ui/button"; -import { useMutation, useQuery } from "@tanstack/react-query"; -import { useParams } from "next/navigation"; +import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { useParams, useRouter } from "next/navigation"; import { Link } from "@/components/common/link"; import { @@ -22,7 +22,9 @@ import { useTRPC } from "@/lib/trpc/client"; export default function Page() { const { id } = useParams<{ id: string }>(); + const router = useRouter(); const trpc = useTRPC(); + const queryClient = useQueryClient(); const { data: statusPage } = useQuery( trpc.page.get.queryOptions({ id: Number.parseInt(id) }), ); @@ -38,9 +40,12 @@ export default function Page() { trpc.maintenance.new.mutationOptions({ onSuccess: (maintenance) => { refetch(); + queryClient.invalidateQueries({ + queryKey: trpc.page.list.queryKey(), + }); if (maintenance.notifySubscribers) { sendMaintenanceUpdateMutation.mutate({ - id: maintenance.id, + id: maintenance.initialUpdateId, }); } }, @@ -88,7 +93,13 @@ export default function Page() { - + + router.push(`/status-pages/${id}/maintenances/${row.original.id}`) + } + /> ); diff --git a/apps/dashboard/src/components/chat/tool-renderers/index.tsx b/apps/dashboard/src/components/chat/tool-renderers/index.tsx index 5c584622b..0cfa97140 100644 --- a/apps/dashboard/src/components/chat/tool-renderers/index.tsx +++ b/apps/dashboard/src/components/chat/tool-renderers/index.tsx @@ -28,6 +28,11 @@ import { listPrivateLocationsTable } from "./list-private-locations"; import { listResponseLogsTable } from "./list-response-logs"; import { listStatusPagesTable } from "./list-status-pages"; import { listStatusReportsTable } from "./list-status-reports"; +import { + addMaintenanceUpdateChanges, + deleteMaintenanceUpdateChanges, + updateMaintenanceUpdateChanges, +} from "./maintenance-update"; import { resolveStatusReportChanges } from "./resolve-status-report"; import { ResultTable } from "./result-table"; import { searchDocsTable } from "./search-docs"; @@ -140,6 +145,32 @@ export const toolRenderers: ToolRendererRegistry = { ), summary: (o) => `ID ${o.id}`, }, + add_maintenance_update: { + renderDraft: (input) => addMaintenanceUpdateChanges(input), + renderResult: ({ input, output }) => ( + + ), + summary: (o) => `update #${o.id}`, + }, + update_maintenance_update: { + renderDraft: (input) => updateMaintenanceUpdateChanges(input), + renderResult: ({ input }) => ( + + ), + summary: (o) => `update #${o.id}`, + }, + delete_maintenance_update: { + renderDraft: (input) => deleteMaintenanceUpdateChanges(input), + renderResult: ({ input }) => ( + + ), + summary: (o) => `deleted #${o.id}`, + }, list_monitors: { renderResult: ({ output }) => ( diff --git a/apps/dashboard/src/components/chat/tool-renderers/maintenance-update.tsx b/apps/dashboard/src/components/chat/tool-renderers/maintenance-update.tsx new file mode 100644 index 000000000..76edf647b --- /dev/null +++ b/apps/dashboard/src/components/chat/tool-renderers/maintenance-update.tsx @@ -0,0 +1,32 @@ +import type { AgentToolInput } from "@openstatus/services/agent-tools"; + +import type { ChangeRow } from "@/components/common/changes-table"; + +export function addMaintenanceUpdateChanges( + input: AgentToolInput<"add_maintenance_update">, + applied?: { id: number; notified: boolean }, +): ChangeRow[] { + return [ + ...(applied ? [{ field: "id", after: applied.id }] : []), + { field: "maintenanceId", after: input.maintenanceId }, + { field: "message", after: input.message }, + { field: "date", after: input.date }, + { field: "notify", after: applied?.notified ?? input.notify }, + ]; +} + +export function updateMaintenanceUpdateChanges( + input: AgentToolInput<"update_maintenance_update">, +): ChangeRow[] { + return [ + { field: "id", after: input.id }, + ...(input.message ? [{ field: "message", after: input.message }] : []), + ...(input.date ? [{ field: "date", after: input.date }] : []), + ]; +} + +export function deleteMaintenanceUpdateChanges( + input: AgentToolInput<"delete_maintenance_update">, +): ChangeRow[] { + return [{ field: "id", before: input.id, after: undefined }]; +} diff --git a/apps/dashboard/src/components/data-table/maintenances/data-table-row-actions.tsx b/apps/dashboard/src/components/data-table/maintenances/data-table-row-actions.tsx index 051c54bf2..c6ebdffaa 100644 --- a/apps/dashboard/src/components/data-table/maintenances/data-table-row-actions.tsx +++ b/apps/dashboard/src/components/data-table/maintenances/data-table-row-actions.tsx @@ -50,7 +50,7 @@ export function MaintenanceRowActions({ ); return ( - <> +
event.stopPropagation()}> - +
); } diff --git a/apps/dashboard/src/components/forms/maintenance-update/card.tsx b/apps/dashboard/src/components/forms/maintenance-update/card.tsx new file mode 100644 index 000000000..93f0edeeb --- /dev/null +++ b/apps/dashboard/src/components/forms/maintenance-update/card.tsx @@ -0,0 +1,61 @@ +"use client"; + +import type { RouterOutputs } from "@openstatus/api"; +import { Button } from "@openstatus/ui/components/ui/button"; + +import { FormAlertDialog } from "@/components/forms/form-alert-dialog"; +import { + FormCard, + FormCardFooter, + FormCardHeader, + FormCardTitle, +} from "@/components/forms/form-card"; +import { + FormMaintenanceUpdate, + type FormValues, +} from "@/components/forms/maintenance-update/form"; + +type MaintenanceUpdate = RouterOutputs["maintenance"]["get"]["updates"][number]; + +export function FormMaintenanceUpdateCard({ + index, + total, + update, + onSubmit, + onDelete, +}: { + index: number; + total: number; + update: MaintenanceUpdate; + onSubmit: (values: FormValues) => Promise; + onDelete: () => Promise; +}) { + const formId = `maintenance-update-${update.id}`; + const title = `Maintenance Update #${total - index}`; + + return ( + + + {title} + + + + + + + + + + ); +} diff --git a/apps/dashboard/src/components/forms/maintenance-update/form.tsx b/apps/dashboard/src/components/forms/maintenance-update/form.tsx new file mode 100644 index 000000000..482e3cd48 --- /dev/null +++ b/apps/dashboard/src/components/forms/maintenance-update/form.tsx @@ -0,0 +1,267 @@ +"use client"; + +import { Calendar as CalendarIcon, Clock } from "@openstatus/icons"; +import { Button } from "@openstatus/ui/components/ui/button"; +import { Calendar } from "@openstatus/ui/components/ui/calendar"; +import { Checkbox } from "@openstatus/ui/components/ui/checkbox"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@openstatus/ui/components/ui/form"; +import { Input } from "@openstatus/ui/components/ui/input"; +import { Label } from "@openstatus/ui/components/ui/label"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@openstatus/ui/components/ui/popover"; +import { + Tabs, + TabsContent, + TabsList, + TabsTrigger, +} from "@openstatus/ui/components/ui/tabs"; +import { Textarea } from "@openstatus/ui/components/ui/textarea"; +import { useIsMobile } from "@openstatus/ui/hooks/use-mobile"; +import { cn } from "@openstatus/ui/lib/utils"; +import { useQuery } from "@tanstack/react-query"; +import { isTRPCClientError } from "@trpc/client"; +import { format } from "date-fns"; +import React, { useTransition } from "react"; +import { useForm } from "react-hook-form"; +import { toast } from "sonner"; + +import { ProcessMessage } from "@/components/content/process-message"; +import { + FormCardContent, + FormCardSeparator, +} from "@/components/forms/form-card"; +import { useFormSheetDirty } from "@/components/forms/form-sheet"; +import { useTRPC } from "@/lib/trpc/client"; + +export type FormValues = { + message: string; + date: Date; + notifySubscribers?: boolean; +}; + +export function FormMaintenanceUpdate({ + defaultValues, + onSubmit, + showNotifySubscribers = false, + className, + id, + ...props +}: Omit, "onSubmit"> & { + defaultValues?: Partial; + onSubmit: (values: FormValues) => Promise; + showNotifySubscribers?: boolean; +}) { + const trpc = useTRPC(); + const { data: workspace } = useQuery(trpc.workspace.get.queryOptions()); + const mobile = useIsMobile(); + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + const form = useForm({ + defaultValues: { + message: defaultValues?.message ?? "", + date: defaultValues?.date ?? new Date(), + notifySubscribers: + defaultValues?.notifySubscribers ?? + !!workspace?.limits["status-subscribers"], + }, + }); + const message = form.watch("message"); + const [isPending, startTransition] = useTransition(); + const { setIsDirty } = useFormSheetDirty(); + + React.useEffect(() => { + setIsDirty(form.formState.isDirty); + }, [form.formState.isDirty, setIsDirty]); + + function submitAction(values: FormValues) { + if (isPending) return; + startTransition(async () => { + const promise = onSubmit(values); + toast.promise(promise, { + loading: "Saving...", + success: "Saved", + error: (error) => + isTRPCClientError(error) ? error.message : "Failed to save", + }); + try { + await promise; + } catch (error) { + console.error(error); + } + }); + } + + const timeInputId = `${id ?? "maintenance-update"}-time`; + + return ( +
+ + + ( + + Date + + + + + + + + { + if (!date) return; + date.setHours( + field.value.getHours(), + field.value.getMinutes(), + field.value.getSeconds(), + field.value.getMilliseconds(), + ); + field.onChange(date); + }} + disabled={(date) => + date > new Date() || date < new Date("1900-01-01") + } + initialFocus + /> +
+
+ +
+ { + const [hours, minutes, seconds] = + event.target.value.split(":").map(Number); + if (hours === undefined || minutes === undefined) + return; + const date = new Date(field.value); + date.setHours(hours, minutes, seconds ?? 0, 0); + field.onChange(date); + }} + /> +
+
+
+
+
+ + + + Shown in your timezone ( + + {timezone} + + ) and saved as UTC. + + + + )} + /> + + + + + + Writing + Preview + + + ( + + Message + +