+9 -1

apps/dashboard/src/app/(dashboard)/status-pages/[id]/breadcrumb.tsx

··· 3 3 import { NavBreadcrumb } from "@/components/nav/nav-breadcrumb"; 4 4 import { useTRPC } from "@/lib/trpc/client"; 5 5 import { useQuery } from "@tanstack/react-query"; 6 6 - import { Cog, Hammer, Megaphone, PanelTop, Users } from "lucide-react"; 6 6 + import { 7 7 + Cog, 8 8 + Hammer, 9 9 + LayoutTemplate, 10 10 + Megaphone, 11 11 + PanelTop, 12 12 + Users, 13 13 + } from "lucide-react"; 7 14 import { useParams } from "next/navigation"; 8 15 9 16 export function Breadcrumb() { ··· 35 42 }, 36 43 { value: "maintenances", label: "Maintenances", icon: Hammer }, 37 44 { value: "subscribers", label: "Subscribers", icon: Users }, 45 45 + { value: "components", label: "Components", icon: LayoutTemplate }, 38 46 { value: "edit", label: "Settings", icon: Cog }, 39 47 ], 40 48 },

+35

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

··· 1 1 + import { SidebarProvider } from "@/components/ui/sidebar"; 2 2 + import { HydrateClient, getQueryClient, trpc } from "@/lib/trpc/server"; 3 3 + import { Sidebar } from "../sidebar"; 4 4 + 5 5 + export default async function Layout({ 6 6 + children, 7 7 + params, 8 8 + }: { 9 9 + children: React.ReactNode; 10 10 + params: Promise<{ id: string }>; 11 11 + }) { 12 12 + const { id } = await params; 13 13 + const queryClient = getQueryClient(); 14 14 + 15 15 + await Promise.all([ 16 16 + queryClient.prefetchQuery( 17 17 + trpc.page.get.queryOptions({ id: Number.parseInt(id) }), 18 18 + ), 19 19 + queryClient.prefetchQuery(trpc.monitor.list.queryOptions()), 20 20 + queryClient.prefetchQuery( 21 21 + trpc.pageComponent.list.queryOptions({ pageId: Number.parseInt(id) }), 22 22 + ), 23 23 + ]); 24 24 + 25 25 + return ( 26 26 + <HydrateClient> 27 27 + <SidebarProvider defaultOpen={false}> 28 28 + <div className="w-full flex-1">{children}</div> 29 29 + <div className="hidden lg:block"> 30 30 + <Sidebar /> 31 31 + </div> 32 32 + </SidebarProvider> 33 33 + </HydrateClient> 34 34 + ); 35 35 + }

+37

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

··· 1 1 + "use client"; 2 2 + 3 3 + import { 4 4 + Section, 5 5 + SectionDescription, 6 6 + SectionGroup, 7 7 + SectionHeader, 8 8 + SectionTitle, 9 9 + } from "@/components/content/section"; 10 10 + import { FormComponentsUpdate } from "@/components/forms/components/update"; 11 11 + import { useTRPC } from "@/lib/trpc/client"; 12 12 + import { useQuery } from "@tanstack/react-query"; 13 13 + import { useParams } from "next/navigation"; 14 14 + 15 15 + export default function Page() { 16 16 + const { id } = useParams<{ id: string }>(); 17 17 + const trpc = useTRPC(); 18 18 + const { data: statusPage } = useQuery( 19 19 + trpc.page.get.queryOptions({ id: Number.parseInt(id) }), 20 20 + ); 21 21 + 22 22 + if (!statusPage) return null; 23 23 + 24 24 + return ( 25 25 + <SectionGroup> 26 26 + <Section> 27 27 + <SectionHeader> 28 28 + <SectionTitle>{statusPage.title}</SectionTitle> 29 29 + <SectionDescription> 30 30 + Configure your page components. 31 31 + </SectionDescription> 32 32 + </SectionHeader> 33 33 + <FormComponentsUpdate /> 34 34 + </Section> 35 35 + </SectionGroup> 36 36 + ); 37 37 + }

+57

apps/dashboard/src/components/data-table/page-components/columns.tsx

··· 1 1 + "use client"; 2 2 + 3 3 + import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header"; 4 4 + import type { RouterOutputs } from "@openstatus/api"; 5 5 + import type { ColumnDef } from "@tanstack/react-table"; 6 6 + import { DataTableRowActions } from "./data-table-row-actions"; 7 7 + 8 8 + type PageComponent = RouterOutputs["pageComponent"]["list"][number]; 9 9 + 10 10 + export const columns: ColumnDef<PageComponent>[] = [ 11 11 + { 12 12 + accessorKey: "name", 13 13 + header: "Name", 14 14 + enableSorting: false, 15 15 + enableHiding: false, 16 16 + }, 17 17 + { 18 18 + accessorKey: "description", 19 19 + header: "Description", 20 20 + enableSorting: false, 21 21 + cell: ({ row }) => { 22 22 + const value = row.getValue("description"); 23 23 + return ( 24 24 + <span className="max-w-[200px] truncate text-muted-foreground"> 25 25 + {value ? String(value) : "-"} 26 26 + </span> 27 27 + ); 28 28 + }, 29 29 + }, 30 30 + { 31 31 + accessorKey: "type", 32 32 + header: ({ column }) => ( 33 33 + <DataTableColumnHeader column={column} title="Type" /> 34 34 + ), 35 35 + cell: ({ row }) => { 36 36 + const value = row.getValue("type"); 37 37 + return <span className="capitalize">{String(value)}</span>; 38 38 + }, 39 39 + }, 40 40 + { 41 41 + accessorKey: "order", 42 42 + header: ({ column }) => ( 43 43 + <DataTableColumnHeader column={column} title="Order" /> 44 44 + ), 45 45 + cell: ({ row }) => { 46 46 + const value = row.getValue("order"); 47 47 + return <span>{value != null ? String(value) : "-"}</span>; 48 48 + }, 49 49 + }, 50 50 + { 51 51 + id: "actions", 52 52 + cell: ({ row }) => <DataTableRowActions row={row} />, 53 53 + meta: { 54 54 + cellClassName: "w-8", 55 55 + }, 56 56 + }, 57 57 + ];

+46

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

··· 1 1 + "use client"; 2 2 + 3 3 + import { QuickActions } from "@/components/dropdowns/quick-actions"; 4 4 + import { getActions } from "@/data/page-components.client"; 5 5 + import { useTRPC } from "@/lib/trpc/client"; 6 6 + import type { RouterOutputs } from "@openstatus/api"; 7 7 + import { useMutation, useQueryClient } from "@tanstack/react-query"; 8 8 + import type { Row } from "@tanstack/react-table"; 9 9 + 10 10 + type PageComponent = RouterOutputs["pageComponent"]["list"][number]; 11 11 + 12 12 + interface DataTableRowActionsProps { 13 13 + row: Row<PageComponent>; 14 14 + } 15 15 + 16 16 + export function DataTableRowActions({ row }: DataTableRowActionsProps) { 17 17 + const trpc = useTRPC(); 18 18 + const actions = getActions({}); 19 19 + const queryClient = useQueryClient(); 20 20 + 21 21 + const deletePageComponentMutation = useMutation( 22 22 + trpc.pageComponent.delete.mutationOptions({ 23 23 + onSuccess: () => { 24 24 + queryClient.refetchQueries({ 25 25 + queryKey: trpc.pageComponent.list.queryKey({ 26 26 + pageId: row.original.pageId ?? undefined, 27 27 + }), 28 28 + }); 29 29 + }, 30 30 + }), 31 31 + ); 32 32 + 33 33 + return ( 34 34 + <QuickActions 35 35 + actions={actions} 36 36 + deleteAction={{ 37 37 + confirmationValue: row.original.name ?? "component", 38 38 + submitAction: async () => { 39 39 + await deletePageComponentMutation.mutateAsync({ 40 40 + id: row.original.id, 41 41 + }); 42 42 + }, 43 43 + }} 44 44 + /> 45 45 + ); 46 46 + }

+1175

apps/dashboard/src/components/forms/components/form-components.tsx

··· 1 1 + "use client"; 2 2 + 3 3 + import { Link } from "@/components/common/link"; 4 4 + import { 5 5 + EmptyStateContainer, 6 6 + EmptyStateTitle, 7 7 + } from "@/components/content/empty-state"; 8 8 + import { 9 9 + FormCard, 10 10 + FormCardContent, 11 11 + FormCardDescription, 12 12 + FormCardFooter, 13 13 + FormCardFooterInfo, 14 14 + FormCardHeader, 15 15 + FormCardSeparator, 16 16 + FormCardTitle, 17 17 + } from "@/components/forms/form-card"; 18 18 + import { STATUS } from "@/components/nav/nav-monitors"; 19 19 + import { 20 20 + AlertDialog, 21 21 + AlertDialogAction, 22 22 + AlertDialogCancel, 23 23 + AlertDialogContent, 24 24 + AlertDialogDescription, 25 25 + AlertDialogFooter, 26 26 + AlertDialogHeader, 27 27 + AlertDialogTitle, 28 28 + AlertDialogTrigger, 29 29 + } from "@/components/ui/alert-dialog"; 30 30 + import { Button } from "@/components/ui/button"; 31 31 + import { 32 32 + Command, 33 33 + CommandEmpty, 34 34 + CommandGroup, 35 35 + CommandInput, 36 36 + CommandItem, 37 37 + CommandList, 38 38 + } from "@/components/ui/command"; 39 39 + import { 40 40 + DropdownMenu, 41 41 + DropdownMenuContent, 42 42 + DropdownMenuGroup, 43 43 + DropdownMenuItem, 44 44 + DropdownMenuSub, 45 45 + DropdownMenuSubContent, 46 46 + DropdownMenuSubTrigger, 47 47 + DropdownMenuTrigger, 48 48 + } from "@/components/ui/dropdown-menu"; 49 49 + import { 50 50 + Form, 51 51 + FormControl, 52 52 + FormField, 53 53 + FormItem, 54 54 + FormLabel, 55 55 + FormMessage, 56 56 + } from "@/components/ui/form"; 57 57 + import { Input } from "@/components/ui/input"; 58 58 + import { 59 59 + Sortable, 60 60 + SortableContent, 61 61 + SortableItem, 62 62 + SortableItemHandle, 63 63 + SortableOverlay, 64 64 + } from "@/components/ui/sortable"; 65 65 + import { 66 66 + Tooltip, 67 67 + TooltipContent, 68 68 + TooltipProvider, 69 69 + TooltipTrigger, 70 70 + } from "@/components/ui/tooltip"; 71 71 + import { cn } from "@/lib/utils"; 72 72 + import type { UniqueIdentifier } from "@dnd-kit/core"; 73 73 + import { zodResolver } from "@hookform/resolvers/zod"; 74 74 + import type { RouterOutputs } from "@openstatus/api"; 75 75 + import { isTRPCClientError } from "@trpc/client"; 76 76 + import { 77 77 + Check, 78 78 + Eye, 79 79 + EyeOff, 80 80 + GripVertical, 81 81 + Link2, 82 82 + Link2Off, 83 83 + Plus, 84 84 + Trash2, 85 85 + } from "lucide-react"; 86 86 + import { useCallback, useEffect, useState, useTransition } from "react"; 87 87 + import { type UseFormReturn, useForm } from "react-hook-form"; 88 88 + import { toast } from "sonner"; 89 89 + import { z } from "zod"; 90 90 + 91 91 + type PageComponent = RouterOutputs["pageComponent"]["list"][number]; 92 92 + type Monitor = RouterOutputs["monitor"]["list"][number]; 93 93 + 94 94 + type ComponentGroup = { 95 95 + id: number; 96 96 + name: string; 97 97 + components: PageComponent[]; 98 98 + }; 99 99 + 100 100 + const componentSchema = z.object({ 101 101 + id: z.number(), 102 102 + monitorId: z.number().nullish(), 103 103 + order: z.number(), 104 104 + name: z.string().min(1, { message: "Name is required" }), 105 105 + description: z.string().optional(), 106 106 + type: z.enum(["monitor", "external"]), 107 107 + }); 108 108 + 109 109 + const schema = z.object({ 110 110 + components: z.array(componentSchema), 111 111 + groups: z.array( 112 112 + z.object({ 113 113 + id: z.number(), 114 114 + order: z.number(), 115 115 + name: z.string(), 116 116 + components: z.array(componentSchema).min(1, { 117 117 + message: "At least one component is required", 118 118 + }), 119 119 + }), 120 120 + ), 121 121 + }); 122 122 + 123 123 + const getSortedComponents = ( 124 124 + components: PageComponent[], 125 125 + componentData: { 126 126 + id: number; 127 127 + order: number; 128 128 + name?: string; 129 129 + type?: "monitor" | "external"; 130 130 + monitorId?: number | null; 131 131 + }[], 132 132 + monitors: Monitor[], 133 133 + ) => { 134 134 + const orderMap = new Map(componentData?.map((c) => [c.id, c.order]) ?? []); 135 135 + 136 136 + // Create a map of existing components 137 137 + const componentMap = new Map(components.map((c) => [c.id, c])); 138 138 + 139 139 + // Create a map of monitors for lookup 140 140 + const monitorMap = new Map(monitors.map((m) => [m.id, m])); 141 141 + 142 142 + // Create synthetic components for any in componentData that don't exist in components 143 143 + componentData.forEach((c) => { 144 144 + if (!componentMap.has(c.id)) { 145 145 + // Look up monitor data if this is a monitor component 146 146 + const monitor = c.monitorId ? monitorMap.get(c.monitorId) : null; 147 147 + 148 148 + // Create synthetic PageComponent 149 149 + componentMap.set(c.id, { 150 150 + id: c.id, 151 151 + name: c.name ?? "", 152 152 + type: c.type ?? "external", 153 153 + monitorId: c.monitorId ?? null, 154 154 + monitor: monitor ?? null, 155 155 + groupId: null, 156 156 + groupOrder: null, 157 157 + order: c.order, 158 158 + } as PageComponent); 159 159 + } 160 160 + }); 161 161 + 162 162 + return Array.from(componentMap.values()) 163 163 + .filter((component) => orderMap.has(component.id)) 164 164 + .sort((a, b) => { 165 165 + const aOrder = orderMap.get(a.id) ?? 0; 166 166 + const bOrder = orderMap.get(b.id) ?? 0; 167 167 + return aOrder - bOrder; 168 168 + }); 169 169 + }; 170 170 + 171 171 + const getSortedItems = ( 172 172 + components: PageComponent[], 173 173 + componentData: { 174 174 + id: number; 175 175 + order: number; 176 176 + name?: string; 177 177 + type?: "monitor" | "external"; 178 178 + monitorId?: number | null; 179 179 + }[], 180 180 + groups: Array<{ 181 181 + id: number; 182 182 + order: number; 183 183 + name: string; 184 184 + components: Array<{ 185 185 + id: number; 186 186 + order: number; 187 187 + name?: string; 188 188 + type?: "monitor" | "external"; 189 189 + monitorId?: number | null; 190 190 + }>; 191 191 + }>, 192 192 + monitors: Monitor[], 193 193 + ): (PageComponent | ComponentGroup)[] => { 194 194 + // Create map of component orders 195 195 + const componentOrderMap = new Map(componentData.map((c) => [c.id, c.order])); 196 196 + 197 197 + // Create a map of existing components 198 198 + const componentMap = new Map(components.map((c) => [c.id, c])); 199 199 + 200 200 + // Create a map of monitors for lookup 201 201 + const monitorMap = new Map(monitors.map((m) => [m.id, m])); 202 202 + 203 203 + // Create synthetic components for any in componentData that don't exist in components 204 204 + componentData.forEach((c) => { 205 205 + if (!componentMap.has(c.id)) { 206 206 + // Look up monitor data if this is a monitor component 207 207 + const monitor = c.monitorId ? monitorMap.get(c.monitorId) : null; 208 208 + 209 209 + // Create synthetic PageComponent 210 210 + componentMap.set(c.id, { 211 211 + id: c.id, 212 212 + name: c.name ?? "", 213 213 + type: c.type ?? "external", 214 214 + monitorId: c.monitorId ?? null, 215 215 + monitor: monitor ?? null, 216 216 + groupId: null, 217 217 + groupOrder: null, 218 218 + order: c.order, 219 219 + } as PageComponent); 220 220 + } 221 221 + }); 222 222 + 223 223 + // Get all enhanced components (including synthetic ones) 224 224 + const enhancedComponents = Array.from(componentMap.values()); 225 225 + 226 226 + // Create array of components with their orders 227 227 + const componentsWithOrder = enhancedComponents 228 228 + .filter((component) => componentOrderMap.has(component.id)) 229 229 + .map((component) => ({ 230 230 + item: component, 231 231 + order: componentOrderMap.get(component.id) ?? 0, 232 232 + })); 233 233 + 234 234 + // Create array of groups with their orders 235 235 + const groupsWithOrder = groups.map((group) => ({ 236 236 + item: { 237 237 + id: group.id, 238 238 + name: group.name, 239 239 + components: getSortedComponents( 240 240 + enhancedComponents, 241 241 + group.components, 242 242 + monitors, 243 243 + ), 244 244 + } as ComponentGroup, 245 245 + order: group.order, 246 246 + })); 247 247 + 248 248 + // Combine and sort by order 249 249 + return [...componentsWithOrder, ...groupsWithOrder] 250 250 + .sort((a, b) => a.order - b.order) 251 251 + .map((entry) => entry.item); 252 252 + }; 253 253 + 254 254 + type FormValues = z.infer<typeof schema>; 255 255 + 256 256 + export function FormComponents({ 257 257 + defaultValues, 258 258 + onSubmit, 259 259 + pageComponents, 260 260 + allPageComponents, 261 261 + monitors, 262 262 + legacy, 263 263 + ...props 264 264 + }: Omit<React.ComponentProps<"form">, "onSubmit"> & { 265 265 + defaultValues?: FormValues; 266 266 + /** Page components available for selection (standalone, not in groups) */ 267 267 + pageComponents: PageComponent[]; 268 268 + /** All page components for the page (including those in groups) */ 269 269 + allPageComponents: PageComponent[]; 270 270 + /** Monitors available for selection */ 271 271 + monitors: Monitor[]; 272 272 + /** 273 273 + * Whether the status page is legacy or new 274 274 + */ 275 275 + legacy: boolean; 276 276 + onSubmit: (values: FormValues) => Promise<void>; 277 277 + }) { 278 278 + const form = useForm<FormValues>({ 279 279 + resolver: zodResolver(schema), 280 280 + defaultValues: defaultValues ?? { components: [], groups: [] }, 281 281 + }); 282 282 + const [isPending, startTransition] = useTransition(); 283 283 + const watchComponents = form.watch("components"); 284 284 + const watchGroups = form.watch("groups"); 285 285 + const [data, setData] = useState<(PageComponent | ComponentGroup)[]>( 286 286 + getSortedItems( 287 287 + allPageComponents, 288 288 + defaultValues?.components ?? [], 289 289 + defaultValues?.groups ?? [], 290 290 + monitors, 291 291 + ), 292 292 + ); 293 293 + 294 294 + // Get all monitor IDs that are already used (in standalone components or groups) 295 295 + const usedMonitorIds = new Set([ 296 296 + ...(watchComponents ?? []) 297 297 + .filter((c) => c.monitorId) 298 298 + .map((c) => c.monitorId), 299 299 + ...(watchGroups ?? []) 300 300 + .flatMap((g) => g.components) 301 301 + .filter((c) => c.monitorId) 302 302 + .map((c) => c.monitorId), 303 303 + ]); 304 304 + 305 305 + useEffect(() => { 306 306 + const sortedItems = getSortedItems( 307 307 + allPageComponents, 308 308 + watchComponents, 309 309 + watchGroups ?? [], 310 310 + monitors, 311 311 + ); 312 312 + setData(sortedItems); 313 313 + }, [watchComponents, watchGroups, allPageComponents, monitors]); 314 314 + 315 315 + const onValueChange = useCallback( 316 316 + (newItems: (PageComponent | ComponentGroup)[]) => { 317 317 + setData(newItems); 318 318 + 319 319 + // Update components with their position in the overall list 320 320 + const existingComponents = form.getValues("components") ?? []; 321 321 + const components = newItems 322 322 + .map((item, index) => ({ item, index })) 323 323 + .filter( 324 324 + (entry): entry is { item: PageComponent; index: number } => 325 325 + "type" in entry.item, 326 326 + ) 327 327 + .map(({ item, index }) => { 328 328 + const existingComponent = existingComponents.find( 329 329 + (c) => c.id === item.id, 330 330 + ); 331 331 + return { 332 332 + id: item.id, 333 333 + monitorId: item.monitorId, 334 334 + order: index, 335 335 + name: existingComponent?.name ?? item.name, 336 336 + description: existingComponent?.description ?? "", 337 337 + type: item.type, 338 338 + }; 339 339 + }); 340 340 + form.setValue("components", components); 341 341 + 342 342 + // Update groups with their position in the overall list 343 343 + const existingGroups = form.getValues("groups") ?? []; 344 344 + const groups = newItems 345 345 + .map((item, index) => ({ item, index })) 346 346 + .filter( 347 347 + (entry): entry is { item: ComponentGroup; index: number } => 348 348 + "components" in entry.item && !("type" in entry.item), 349 349 + ) 350 350 + .map(({ item, index }) => { 351 351 + const existingGroup = existingGroups.find((g) => g.id === item.id); 352 352 + return existingGroup 353 353 + ? { 354 354 + ...existingGroup, 355 355 + order: index, 356 356 + } 357 357 + : { 358 358 + id: item.id, 359 359 + order: index, 360 360 + name: item.name, 361 361 + components: [], 362 362 + }; 363 363 + }); 364 364 + form.setValue("groups", groups); 365 365 + }, 366 366 + [form], 367 367 + ); 368 368 + 369 369 + const getItemValue = useCallback( 370 370 + (item: PageComponent | ComponentGroup) => item.id, 371 371 + [], 372 372 + ); 373 373 + 374 374 + const handleAddGroup = useCallback(() => { 375 375 + const newGroupId = Date.now(); 376 376 + const existingGroups = form.getValues("groups") ?? []; 377 377 + const existingComponents = form.getValues("components") ?? []; 378 378 + const order = existingGroups.length + existingComponents.length; 379 379 + const newGroups = [ 380 380 + ...existingGroups, 381 381 + { id: newGroupId, order, name: "", components: [] }, 382 382 + ]; 383 383 + form.setValue("groups", newGroups); 384 384 + setData((prev) => [...prev, { id: newGroupId, name: "", components: [] }]); 385 385 + }, [form]); 386 386 + 387 387 + const handleDeleteGroup = useCallback( 388 388 + (groupId: number) => { 389 389 + const existingGroups = form.getValues("groups") ?? []; 390 390 + form.setValue( 391 391 + "groups", 392 392 + existingGroups.filter((g) => g.id !== groupId), 393 393 + ); 394 394 + setData((prev) => prev.filter((item) => item.id !== groupId)); 395 395 + }, 396 396 + [form], 397 397 + ); 398 398 + 399 399 + const handleDeleteComponent = useCallback( 400 400 + (componentId: number) => { 401 401 + const existingComponents = form.getValues("components") ?? []; 402 402 + form.setValue( 403 403 + "components", 404 404 + existingComponents.filter((c) => c.id !== componentId), 405 405 + ); 406 406 + setData((prev) => prev.filter((item) => item.id !== componentId)); 407 407 + }, 408 408 + [form], 409 409 + ); 410 410 + 411 411 + const renderOverlay = useCallback( 412 412 + ({ value }: { value: UniqueIdentifier }) => { 413 413 + const index = data.findIndex((item) => item.id === value); 414 414 + if (index === -1) return null; 415 415 + const item = data[index]; 416 416 + 417 417 + if ("type" in item) { 418 418 + return ( 419 419 + <ComponentRow 420 420 + component={item} 421 421 + form={form} 422 422 + className="border-transparent border-x px-2" 423 423 + onDelete={handleDeleteComponent} 424 424 + // FIXME: this is used to show an input instead of the name when dragging a component 425 425 + // fieldNamePrefix={`components.${index}`} 426 426 + /> 427 427 + ); 428 428 + } 429 429 + 430 430 + const groups = form.getValues("groups") ?? []; 431 431 + const groupIndex = groups.findIndex((g) => g.id === item.id); 432 432 + return ( 433 433 + <ComponentGroupRow 434 434 + group={item} 435 435 + groupIndex={groupIndex} 436 436 + onDeleteGroup={handleDeleteGroup} 437 437 + form={form} 438 438 + allPageComponents={allPageComponents} 439 439 + monitors={monitors} 440 440 + /> 441 441 + ); 442 442 + }, 443 443 + [ 444 444 + data, 445 445 + handleDeleteGroup, 446 446 + form, 447 447 + allPageComponents, 448 448 + monitors, 449 449 + handleDeleteComponent, 450 450 + ], 451 451 + ); 452 452 + 453 453 + function submitAction(values: FormValues) { 454 454 + if (isPending) return; 455 455 + 456 456 + startTransition(async () => { 457 457 + try { 458 458 + const promise = onSubmit(values); 459 459 + toast.promise(promise, { 460 460 + loading: "Saving...", 461 461 + success: "Saved", 462 462 + error: (error) => { 463 463 + if (isTRPCClientError(error)) { 464 464 + return error.message; 465 465 + } 466 466 + return "Failed to save"; 467 467 + }, 468 468 + }); 469 469 + await promise; 470 470 + } catch (error) { 471 471 + console.error(error); 472 472 + } 473 473 + }); 474 474 + } 475 475 + 476 476 + return ( 477 477 + <Form {...form}> 478 478 + <form onSubmit={form.handleSubmit(submitAction)} {...props}> 479 479 + <FormCard> 480 480 + <FormCardHeader> 481 481 + <FormCardTitle>Components</FormCardTitle> 482 482 + <FormCardDescription> 483 483 + Manage your page components 484 484 + </FormCardDescription> 485 485 + </FormCardHeader> 486 486 + <FormCardContent className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4"> 487 487 + <FormField 488 488 + control={form.control} 489 489 + name="components" 490 490 + render={({ field }) => ( 491 491 + <FormItem className="flex flex-col"> 492 492 + <FormLabel className="sr-only">Components</FormLabel> 493 493 + <DropdownMenu> 494 494 + <DropdownMenuTrigger asChild> 495 495 + <Button variant="outline" className="w-full"> 496 496 + <Plus /> 497 497 + Add Component 498 498 + </Button> 499 499 + </DropdownMenuTrigger> 500 500 + <DropdownMenuContent 501 501 + align="end" 502 502 + className="w-[var(--radix-dropdown-menu-trigger-width)]" 503 503 + > 504 504 + <DropdownMenuGroup> 505 505 + <DropdownMenuItem 506 506 + disabled 507 507 + onClick={() => { 508 508 + form.setValue("components", [ 509 509 + ...field.value, 510 510 + { 511 511 + id: Date.now(), 512 512 + monitorId: null, 513 513 + order: watchComponents.length, 514 514 + name: "", 515 515 + description: "", 516 516 + type: "external" as const, 517 517 + }, 518 518 + ]); 519 519 + }} 520 520 + > 521 521 + <Link2Off className="text-muted-foreground" /> 522 522 + Add External (soon) 523 523 + </DropdownMenuItem> 524 524 + <DropdownMenuSub> 525 525 + <DropdownMenuSubTrigger className="gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0"> 526 526 + <Link2 className="text-muted-foreground" /> 527 527 + Add Monitor 528 528 + </DropdownMenuSubTrigger> 529 529 + <DropdownMenuSubContent className="p-0"> 530 530 + <Command> 531 531 + <CommandInput 532 532 + placeholder="Search monitors..." 533 533 + className="h-9" 534 534 + /> 535 535 + <CommandList> 536 536 + <CommandEmpty>No monitors found.</CommandEmpty> 537 537 + <CommandGroup> 538 538 + {monitors.map((monitor) => { 539 539 + const isUsed = usedMonitorIds.has( 540 540 + monitor.id, 541 541 + ); 542 542 + const isSelected = field.value.some( 543 543 + (c) => c.monitorId === monitor.id, 544 544 + ); 545 545 + return ( 546 546 + <CommandItem 547 547 + value={monitor.name} 548 548 + key={monitor.id} 549 549 + disabled={isUsed} 550 550 + onSelect={() => { 551 551 + if (isSelected) { 552 552 + form.setValue( 553 553 + "components", 554 554 + field.value.filter( 555 555 + (c) => 556 556 + c.monitorId !== monitor.id, 557 557 + ), 558 558 + ); 559 559 + } else { 560 560 + form.setValue("components", [ 561 561 + ...field.value, 562 562 + { 563 563 + id: Date.now(), 564 564 + monitorId: monitor.id, 565 565 + order: watchComponents.length, 566 566 + name: monitor.name, 567 567 + description: 568 568 + monitor.description, 569 569 + type: "monitor" as const, 570 570 + }, 571 571 + ]); 572 572 + } 573 573 + }} 574 574 + > 575 575 + {monitor.name} 576 576 + <Check 577 577 + className={cn( 578 578 + "ml-auto", 579 579 + isSelected 580 580 + ? "opacity-100" 581 581 + : "opacity-0", 582 582 + )} 583 583 + /> 584 584 + </CommandItem> 585 585 + ); 586 586 + })} 587 587 + </CommandGroup> 588 588 + </CommandList> 589 589 + </Command> 590 590 + </DropdownMenuSubContent> 591 591 + </DropdownMenuSub> 592 592 + </DropdownMenuGroup> 593 593 + </DropdownMenuContent> 594 594 + </DropdownMenu> 595 595 + <FormMessage /> 596 596 + </FormItem> 597 597 + )} 598 598 + /> 599 599 + <Button 600 600 + variant="outline" 601 601 + type="button" 602 602 + className="w-full" 603 603 + onClick={handleAddGroup} 604 604 + > 605 605 + <Plus /> 606 606 + Add Component Group 607 607 + </Button> 608 608 + </FormCardContent> 609 609 + <FormCardSeparator /> 610 610 + <FormCardContent> 611 611 + <Sortable 612 612 + value={data} 613 613 + onValueChange={onValueChange} 614 614 + getItemValue={getItemValue} 615 615 + orientation="vertical" 616 616 + > 617 617 + {data.length ? ( 618 618 + <SortableContent className="grid gap-2"> 619 619 + {data.map((item) => { 620 620 + if ("type" in item) { 621 621 + const components = form.getValues("components") ?? []; 622 622 + const componentIndex = components.findIndex( 623 623 + (c) => c.id === item.id, 624 624 + ); 625 625 + return ( 626 626 + <ComponentRow 627 627 + key={`${item.id}-component`} 628 628 + className="border-transparent border-x px-2" 629 629 + component={item} 630 630 + form={form} 631 631 + onDelete={handleDeleteComponent} 632 632 + fieldNamePrefix={ 633 633 + componentIndex >= 0 634 634 + ? `components.${componentIndex}` 635 635 + : undefined 636 636 + } 637 637 + /> 638 638 + ); 639 639 + } 640 640 + const groups = form.getValues("groups") ?? []; 641 641 + const groupIndex = groups.findIndex( 642 642 + (g) => g.id === item.id, 643 643 + ); 644 644 + return ( 645 645 + <ComponentGroupRow 646 646 + key={`${item.id}-group`} 647 647 + group={item} 648 648 + groupIndex={groupIndex} 649 649 + onDeleteGroup={handleDeleteGroup} 650 650 + form={form} 651 651 + allPageComponents={allPageComponents} 652 652 + monitors={monitors} 653 653 + /> 654 654 + ); 655 655 + })} 656 656 + <SortableOverlay>{renderOverlay}</SortableOverlay> 657 657 + </SortableContent> 658 658 + ) : ( 659 659 + <EmptyStateContainer> 660 660 + <EmptyStateTitle>No components selected</EmptyStateTitle> 661 661 + </EmptyStateContainer> 662 662 + )} 663 663 + </Sortable> 664 664 + </FormCardContent> 665 665 + <FormCardFooter> 666 666 + <FormCardFooterInfo> 667 667 + Learn more about{" "} 668 668 + <Link href="https://docs.openstatus.dev/reference/status-page/#page-components"> 669 669 + page components 670 670 + </Link> 671 671 + . 672 672 + </FormCardFooterInfo> 673 673 + <Button type="submit" disabled={isPending}> 674 674 + {isPending ? "Submitting..." : "Submit"} 675 675 + </Button> 676 676 + </FormCardFooter> 677 677 + </FormCard> 678 678 + </form> 679 679 + </Form> 680 680 + ); 681 681 + } 682 682 + 683 683 + interface ComponentRowProps 684 684 + extends Omit<React.ComponentPropsWithoutRef<typeof SortableItem>, "value"> { 685 685 + component: PageComponent; 686 686 + form: UseFormReturn<FormValues>; 687 687 + onDelete: (componentId: number) => void; 688 688 + /** The form field name prefix, e.g. "components.0" or "groups.0.components.1" */ 689 689 + fieldNamePrefix?: string; 690 690 + } 691 691 + 692 692 + function ComponentRow({ 693 693 + component, 694 694 + className, 695 695 + onDelete, 696 696 + form, 697 697 + fieldNamePrefix, 698 698 + ...props 699 699 + }: ComponentRowProps) { 700 700 + return ( 701 701 + <SortableItem 702 702 + value={component.id} 703 703 + asChild 704 704 + className={cn("rounded-md", className)} 705 705 + {...props} 706 706 + > 707 707 + <div className="grid h-9 grid-cols-4 gap-2"> 708 708 + <div className="flex flex-row items-center gap-1 self-center"> 709 709 + <SortableItemHandle> 710 710 + <GripVertical 711 711 + size={16} 712 712 + aria-hidden="true" 713 713 + className="text-muted-foreground" 714 714 + /> 715 715 + </SortableItemHandle> 716 716 + {fieldNamePrefix ? ( 717 717 + <FormField 718 718 + control={form.control} 719 719 + name={`${fieldNamePrefix}.name` as "components.0.name"} 720 720 + render={({ field }) => ( 721 721 + <FormItem className="w-full"> 722 722 + <FormLabel className="sr-only">Component name</FormLabel> 723 723 + <FormControl> 724 724 + <Input 725 725 + placeholder="Name" 726 726 + className="w-full bg-background" 727 727 + {...field} 728 728 + /> 729 729 + </FormControl> 730 730 + <FormMessage /> 731 731 + </FormItem> 732 732 + )} 733 733 + /> 734 734 + ) : ( 735 735 + <span className="truncate rounded-md border border-transparent px-3 py-1 text-sm"> 736 736 + {component.name} 737 737 + </span> 738 738 + )} 739 739 + </div> 740 740 + <div className="flex flex-row items-center gap-1 self-center"> 741 741 + {fieldNamePrefix ? ( 742 742 + <FormField 743 743 + control={form.control} 744 744 + name={ 745 745 + `${fieldNamePrefix}.description` as "components.0.description" 746 746 + } 747 747 + render={({ field }) => ( 748 748 + <FormItem className="w-full"> 749 749 + <FormLabel className="sr-only"> 750 750 + Component description 751 751 + </FormLabel> 752 752 + <FormControl> 753 753 + <Input 754 754 + placeholder="Description" 755 755 + className="w-full bg-background" 756 756 + {...field} 757 757 + /> 758 758 + </FormControl> 759 759 + <FormMessage /> 760 760 + </FormItem> 761 761 + )} 762 762 + /> 763 763 + ) : ( 764 764 + <span className="truncate rounded-md border border-transparent px-3 py-1 text-sm"> 765 765 + {component.description} 766 766 + </span> 767 767 + )} 768 768 + </div> 769 769 + <div className="flex items-center gap-2 self-center text-muted-foreground text-sm"> 770 770 + {component.monitor && component.type === "monitor" ? ( 771 771 + <Link 772 772 + href={`/monitors/${component.monitorId}/overview`} 773 773 + onClick={(e) => e.stopPropagation()} 774 774 + className="flex w-full items-center gap-2 truncate text-sm" 775 775 + > 776 776 + <Link2 className="size-4 shrink-0" />{" "} 777 777 + <span className="truncate">{component.monitor.name}</span> 778 778 + </Link> 779 779 + ) : ( 780 780 + <span className="flex items-center gap-2 text-muted-foreground text-sm"> 781 781 + <Link2Off className="size-4 shrink-0" />{" "} 782 782 + <span className="truncate">External Component</span> 783 783 + </span> 784 784 + )} 785 785 + </div> 786 786 + <div className="flex justify-between"> 787 787 + <div className="flex flex-1 items-center gap-2.5"> 788 788 + {component.monitor && component.type === "monitor" ? ( 789 789 + <div className="flex items-center gap-2"> 790 790 + <TooltipProvider delayDuration={0}> 791 791 + {component.monitor.public ? ( 792 792 + <Tooltip> 793 793 + <TooltipTrigger> 794 794 + <Eye className="size-4 text-muted-foreground" /> 795 795 + </TooltipTrigger> 796 796 + <TooltipContent>Public</TooltipContent> 797 797 + </Tooltip> 798 798 + ) : ( 799 799 + <Tooltip> 800 800 + <TooltipTrigger> 801 801 + <EyeOff className="size-4 text-muted-foreground" /> 802 802 + </TooltipTrigger> 803 803 + <TooltipContent>Private</TooltipContent> 804 804 + </Tooltip> 805 805 + )} 806 806 + </TooltipProvider> 807 807 + </div> 808 808 + ) : null} 809 809 + {component.monitor && component.type === "monitor" ? ( 810 810 + <div 811 811 + className={cn( 812 812 + "size-2 rounded-full", 813 813 + STATUS[ 814 814 + component.monitor.active 815 815 + ? component.monitor.status 816 816 + : "inactive" 817 817 + ], 818 818 + )} 819 819 + /> 820 820 + ) : null} 821 821 + </div> 822 822 + <AlertDialog> 823 823 + <AlertDialogTrigger asChild> 824 824 + <Button 825 825 + type="button" 826 826 + variant="ghost" 827 827 + size="icon" 828 828 + className="text-destructive hover:bg-destructive/10 hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:size-4 [&_svg]:text-destructive" 829 829 + > 830 830 + <Trash2 /> 831 831 + </Button> 832 832 + </AlertDialogTrigger> 833 833 + <AlertDialogContent> 834 834 + <AlertDialogHeader> 835 835 + <AlertDialogTitle>Are you sure?</AlertDialogTitle> 836 836 + <AlertDialogDescription> 837 837 + You are about to delete this component. 838 838 + </AlertDialogDescription> 839 839 + </AlertDialogHeader> 840 840 + <AlertDialogFooter> 841 841 + <AlertDialogCancel>Cancel</AlertDialogCancel> 842 842 + <AlertDialogAction 843 843 + className="bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40" 844 844 + onClick={() => onDelete(component.id)} 845 845 + > 846 846 + Delete 847 847 + </AlertDialogAction> 848 848 + </AlertDialogFooter> 849 849 + </AlertDialogContent> 850 850 + </AlertDialog> 851 851 + </div> 852 852 + </div> 853 853 + </SortableItem> 854 854 + ); 855 855 + } 856 856 + 857 857 + interface ComponentGroupRowProps 858 858 + extends Omit<React.ComponentPropsWithoutRef<typeof SortableItem>, "value"> { 859 859 + group: ComponentGroup; 860 860 + groupIndex: number; 861 861 + onDeleteGroup: (groupId: number) => void; 862 862 + form: UseFormReturn<FormValues>; 863 863 + allPageComponents: PageComponent[]; 864 864 + monitors: Monitor[]; 865 865 + } 866 866 + 867 867 + function ComponentGroupRow({ 868 868 + group, 869 869 + groupIndex, 870 870 + onDeleteGroup, 871 871 + form, 872 872 + allPageComponents, 873 873 + monitors, 874 874 + }: ComponentGroupRowProps) { 875 875 + const watchGroup = form.watch(`groups.${groupIndex}`); 876 876 + const watchComponents = form.watch("components"); 877 877 + const watchGroups = form.watch("groups"); 878 878 + const [data, setData] = useState<PageComponent[]>(group.components); 879 879 + 880 880 + // Calculate taken monitor IDs (in main list or other groups) 881 881 + const takenMonitorIds = new Set([ 882 882 + ...watchComponents.filter((c) => c.monitorId).map((c) => c.monitorId), 883 883 + ...watchGroups 884 884 + .filter((g) => g.id !== group.id) 885 885 + .flatMap((g) => 886 886 + g.components.filter((c) => c.monitorId).map((c) => c.monitorId), 887 887 + ), 888 888 + ]); 889 889 + 890 890 + // FIXME: order is not being updated in the form 891 891 + const onValueChange = useCallback( 892 892 + (newComponents: PageComponent[]) => { 893 893 + setData(newComponents); 894 894 + // Update the form with the new component order 895 895 + const existingComponents = 896 896 + form.getValues(`groups.${groupIndex}.components`) ?? []; 897 897 + form.setValue( 898 898 + `groups.${groupIndex}.components`, 899 899 + newComponents.map((c, index) => { 900 900 + const existingComponent = existingComponents.find( 901 901 + (ec) => ec.id === c.id, 902 902 + ); 903 903 + return { 904 904 + id: c.id, 905 905 + monitorId: c.monitorId, 906 906 + order: index, 907 907 + name: existingComponent?.name ?? c.name, 908 908 + description: existingComponent?.description ?? "", 909 909 + type: c.type, 910 910 + }; 911 911 + }), 912 912 + ); 913 913 + }, 914 914 + [form, groupIndex], 915 915 + ); 916 916 + 917 917 + useEffect(() => { 918 918 + setData( 919 919 + getSortedComponents(allPageComponents, watchGroup.components, monitors), 920 920 + ); 921 921 + }, [watchGroup.components, allPageComponents, monitors]); 922 922 + 923 923 + const getItemValue = useCallback((item: PageComponent) => item.id, []); 924 924 + 925 925 + const handleDeleteComponent = useCallback( 926 926 + (componentId: number) => { 927 927 + const existingComponents = 928 928 + form.getValues(`groups.${groupIndex}.components`) ?? []; 929 929 + form.setValue( 930 930 + `groups.${groupIndex}.components`, 931 931 + existingComponents.filter((c) => c.id !== componentId), 932 932 + ); 933 933 + setData((prev) => prev.filter((item) => item.id !== componentId)); 934 934 + }, 935 935 + [form, groupIndex], 936 936 + ); 937 937 + 938 938 + const renderOverlay = useCallback( 939 939 + ({ value }: { value: UniqueIdentifier }) => { 940 940 + const component = data.find((item) => item.id === value); 941 941 + if (!component) return null; 942 942 + 943 943 + return ( 944 944 + <ComponentRow 945 945 + component={component} 946 946 + form={form} 947 947 + onDelete={handleDeleteComponent} 948 948 + /> 949 949 + ); 950 950 + }, 951 951 + [data, form, handleDeleteComponent], 952 952 + ); 953 953 + 954 954 + return ( 955 955 + <SortableItem value={group.id} className="rounded-md border bg-muted"> 956 956 + <div className="grid grid-cols-4 gap-2 px-2 pt-2"> 957 957 + <div className="flex flex-row items-center gap-1 self-center"> 958 958 + <SortableItemHandle> 959 959 + <GripVertical 960 960 + size={16} 961 961 + aria-hidden="true" 962 962 + className="text-muted-foreground" 963 963 + /> 964 964 + </SortableItemHandle> 965 965 + <FormField 966 966 + key={`${group.id}-name-${groupIndex}`} 967 967 + control={form.control} 968 968 + name={`groups.${groupIndex}.name` as const} 969 969 + render={({ field }) => ( 970 970 + <FormItem className="w-full"> 971 971 + <FormLabel className="sr-only">Group name</FormLabel> 972 972 + <FormControl> 973 973 + <Input 974 974 + placeholder="Group Name" 975 975 + className="w-full bg-background" 976 976 + {...field} 977 977 + /> 978 978 + </FormControl> 979 979 + <FormMessage /> 980 980 + </FormItem> 981 981 + )} 982 982 + /> 983 983 + </div> 984 984 + <FormField 985 985 + key={`${group.id}-components-${groupIndex}`} 986 986 + control={form.control} 987 987 + name={`groups.${groupIndex}.components` as const} 988 988 + render={({ field }) => ( 989 989 + <FormItem className="flex flex-col"> 990 990 + <FormLabel className="sr-only">Components</FormLabel> 991 991 + <DropdownMenu> 992 992 + <DropdownMenuTrigger asChild> 993 993 + <Button variant="outline" className="w-full"> 994 994 + <Plus /> 995 995 + Add Component 996 996 + </Button> 997 997 + </DropdownMenuTrigger> 998 998 + <DropdownMenuContent 999 999 + align="end" 1000 1000 + className="w-[var(--radix-dropdown-menu-trigger-width)]" 1001 1001 + > 1002 1002 + <DropdownMenuGroup> 1003 1003 + <DropdownMenuItem 1004 1004 + disabled 1005 1005 + onClick={() => { 1006 1006 + const current = field.value ?? []; 1007 1007 + form.setValue(`groups.${groupIndex}.components`, [ 1008 1008 + ...current, 1009 1009 + { 1010 1010 + id: Date.now(), 1011 1011 + monitorId: null, 1012 1012 + order: current.length, 1013 1013 + name: "", 1014 1014 + description: "", 1015 1015 + type: "external" as const, 1016 1016 + }, 1017 1017 + ]); 1018 1018 + }} 1019 1019 + > 1020 1020 + <Link2Off className="text-muted-foreground" /> 1021 1021 + Add External (soon) 1022 1022 + </DropdownMenuItem> 1023 1023 + <DropdownMenuSub> 1024 1024 + <DropdownMenuSubTrigger className="gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0"> 1025 1025 + <Link2 className="text-muted-foreground" /> 1026 1026 + Add Monitor 1027 1027 + </DropdownMenuSubTrigger> 1028 1028 + <DropdownMenuSubContent className="p-0"> 1029 1029 + <Command> 1030 1030 + <CommandInput 1031 1031 + placeholder="Search monitors..." 1032 1032 + className="h-9" 1033 1033 + /> 1034 1034 + <CommandList> 1035 1035 + <CommandEmpty>No monitors found.</CommandEmpty> 1036 1036 + <CommandGroup> 1037 1037 + {monitors.map((monitor) => { 1038 1038 + const current = field.value ?? []; 1039 1039 + const isTaken = takenMonitorIds.has(monitor.id); 1040 1040 + const isSelected = current.some( 1041 1041 + (c) => c.monitorId === monitor.id, 1042 1042 + ); 1043 1043 + return ( 1044 1044 + <CommandItem 1045 1045 + value={monitor.name} 1046 1046 + key={monitor.id} 1047 1047 + disabled={isTaken} 1048 1048 + onSelect={() => { 1049 1049 + if (isSelected) { 1050 1050 + form.setValue( 1051 1051 + `groups.${groupIndex}.components`, 1052 1052 + current.filter( 1053 1053 + (c) => c.monitorId !== monitor.id, 1054 1054 + ), 1055 1055 + ); 1056 1056 + } else { 1057 1057 + form.setValue( 1058 1058 + `groups.${groupIndex}.components`, 1059 1059 + [ 1060 1060 + ...current, 1061 1061 + { 1062 1062 + id: Date.now(), 1063 1063 + monitorId: monitor.id, 1064 1064 + order: current.length, 1065 1065 + name: monitor.name, 1066 1066 + description: monitor.description, 1067 1067 + type: "monitor" as const, 1068 1068 + }, 1069 1069 + ], 1070 1070 + ); 1071 1071 + } 1072 1072 + }} 1073 1073 + > 1074 1074 + {monitor.name} 1075 1075 + <Check 1076 1076 + className={cn( 1077 1077 + "ml-auto", 1078 1078 + isSelected 1079 1079 + ? "opacity-100" 1080 1080 + : "opacity-0", 1081 1081 + )} 1082 1082 + /> 1083 1083 + </CommandItem> 1084 1084 + ); 1085 1085 + })} 1086 1086 + </CommandGroup> 1087 1087 + </CommandList> 1088 1088 + </Command> 1089 1089 + </DropdownMenuSubContent> 1090 1090 + </DropdownMenuSub> 1091 1091 + </DropdownMenuGroup> 1092 1092 + </DropdownMenuContent> 1093 1093 + </DropdownMenu> 1094 1094 + <FormMessage /> 1095 1095 + </FormItem> 1096 1096 + )} 1097 1097 + /> 1098 1098 + <div /> 1099 1099 + <div className="flex justify-end"> 1100 1100 + <AlertDialog> 1101 1101 + <AlertDialogTrigger asChild> 1102 1102 + <Button 1103 1103 + type="button" 1104 1104 + variant="ghost" 1105 1105 + size="icon" 1106 1106 + className="text-destructive hover:bg-destructive/10 hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:size-4 [&_svg]:text-destructive" 1107 1107 + // NOTE: delete directly if no components are in the group 1108 1108 + {...(data.length === 0 1109 1109 + ? { onClick: () => onDeleteGroup(group.id) } 1110 1110 + : {})} 1111 1111 + > 1112 1112 + <Trash2 /> 1113 1113 + </Button> 1114 1114 + </AlertDialogTrigger> 1115 1115 + <AlertDialogContent> 1116 1116 + <AlertDialogHeader> 1117 1117 + <AlertDialogTitle>Are you sure?</AlertDialogTitle> 1118 1118 + <AlertDialogDescription> 1119 1119 + You are about to delete this group and all its components. 1120 1120 + </AlertDialogDescription> 1121 1121 + </AlertDialogHeader> 1122 1122 + <AlertDialogFooter> 1123 1123 + <AlertDialogCancel>Cancel</AlertDialogCancel> 1124 1124 + <AlertDialogAction 1125 1125 + className="bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40" 1126 1126 + onClick={() => onDeleteGroup(group.id)} 1127 1127 + > 1128 1128 + Delete 1129 1129 + </AlertDialogAction> 1130 1130 + </AlertDialogFooter> 1131 1131 + </AlertDialogContent> 1132 1132 + </AlertDialog> 1133 1133 + </div> 1134 1134 + </div> 1135 1135 + <div className="mt-2 border-t px-2 pt-2 pb-2"> 1136 1136 + <Sortable 1137 1137 + value={data} 1138 1138 + onValueChange={onValueChange} 1139 1139 + getItemValue={getItemValue} 1140 1140 + orientation="vertical" 1141 1141 + > 1142 1142 + {data.length ? ( 1143 1143 + <SortableContent className="grid gap-2"> 1144 1144 + {data.map((item, _index) => { 1145 1145 + const groupComponents = 1146 1146 + form.getValues(`groups.${groupIndex}.components`) ?? []; 1147 1147 + const componentIndex = groupComponents.findIndex( 1148 1148 + (c) => c.id === item.id, 1149 1149 + ); 1150 1150 + return ( 1151 1151 + <ComponentRow 1152 1152 + key={`${item.id}-component`} 1153 1153 + component={item} 1154 1154 + form={form} 1155 1155 + onDelete={handleDeleteComponent} 1156 1156 + fieldNamePrefix={ 1157 1157 + componentIndex >= 0 1158 1158 + ? `groups.${groupIndex}.components.${componentIndex}` 1159 1159 + : undefined 1160 1160 + } 1161 1161 + /> 1162 1162 + ); 1163 1163 + })} 1164 1164 + <SortableOverlay>{renderOverlay}</SortableOverlay> 1165 1165 + </SortableContent> 1166 1166 + ) : ( 1167 1167 + <EmptyStateContainer> 1168 1168 + <EmptyStateTitle>No components selected</EmptyStateTitle> 1169 1169 + </EmptyStateContainer> 1170 1170 + )} 1171 1171 + </Sortable> 1172 1172 + </div> 1173 1173 + </SortableItem> 1174 1174 + ); 1175 1175 + }

+91

apps/dashboard/src/components/forms/components/update.tsx

··· 1 1 + "use client"; 2 2 + 3 3 + import { FormComponents } from "@/components/forms/components/form-components"; 4 4 + import { useTRPC } from "@/lib/trpc/client"; 5 5 + import { useMutation, useQuery } from "@tanstack/react-query"; 6 6 + import { useParams } from "next/navigation"; 7 7 + import { FormCardGroup } from "../form-card"; 8 8 + 9 9 + export function FormComponentsUpdate() { 10 10 + const { id } = useParams<{ id: string }>(); 11 11 + const trpc = useTRPC(); 12 12 + const { data: statusPage, refetch } = useQuery( 13 13 + trpc.page.get.queryOptions({ id: Number.parseInt(id) }), 14 14 + ); 15 15 + const { data: pageComponents, refetch: refetchComponents } = useQuery( 16 16 + trpc.pageComponent.list.queryOptions({ pageId: Number.parseInt(id) }), 17 17 + ); 18 18 + const { data: monitors } = useQuery(trpc.monitor.list.queryOptions()); 19 19 + 20 20 + const updateComponentsMutation = useMutation( 21 21 + trpc.pageComponent.updateOrder.mutationOptions({ 22 22 + onSuccess: () => { 23 23 + refetch(); 24 24 + refetchComponents(); 25 25 + }, 26 26 + }), 27 27 + ); 28 28 + 29 29 + if (!statusPage || !pageComponents || !monitors) return null; 30 30 + 31 31 + // Separate standalone components from grouped components 32 32 + const standaloneComponents = pageComponents.filter((c) => !c.groupId); 33 33 + const groupedComponents = pageComponents.filter((c) => c.groupId); 34 34 + 35 35 + // Build groups from pageComponentGroups 36 36 + const groups = statusPage.pageComponentGroups.map((group) => { 37 37 + const componentsInGroup = groupedComponents.filter( 38 38 + (c) => c.groupId === group.id, 39 39 + ); 40 40 + // Find the order of the group (use the first component's order) 41 41 + const firstComponent = componentsInGroup[0]; 42 42 + return { 43 43 + id: group.id, 44 44 + order: firstComponent?.order ?? 0, 45 45 + name: group.name, 46 46 + components: componentsInGroup.map((c) => ({ 47 47 + id: c.id, 48 48 + monitorId: c.monitorId, 49 49 + order: c.groupOrder ?? 0, 50 50 + name: c.name, 51 51 + description: c.description ?? "", 52 52 + type: c.type, 53 53 + })), 54 54 + }; 55 55 + }); 56 56 + 57 57 + // Build default values for the form 58 58 + const defaultValues = { 59 59 + components: standaloneComponents.map((c) => ({ 60 60 + id: c.id, 61 61 + monitorId: c.monitorId, 62 62 + order: c.order ?? 0, 63 63 + name: c.name, 64 64 + description: c.description ?? "", 65 65 + type: c.type, 66 66 + })), 67 67 + groups, 68 68 + }; 69 69 + 70 70 + return ( 71 71 + <FormCardGroup> 72 72 + <FormComponents 73 73 + pageComponents={standaloneComponents} 74 74 + monitors={monitors} 75 75 + allPageComponents={pageComponents} 76 76 + defaultValues={defaultValues} 77 77 + legacy={statusPage.legacyPage} 78 78 + onSubmit={async (values) => { 79 79 + await updateComponentsMutation.mutateAsync({ 80 80 + pageId: Number.parseInt(id), 81 81 + components: values.components.map(({ id, ...rest }) => rest), 82 82 + groups: values.groups.map(({ id, components, ...rest }) => ({ 83 83 + ...rest, 84 84 + components: components.map(({ id, ...c }) => c), 85 85 + })), 86 86 + }); 87 87 + }} 88 88 + /> 89 89 + </FormCardGroup> 90 90 + ); 91 91 + }

-23

apps/dashboard/src/components/forms/monitor/update.tsx

··· 16 16 import { FormResponseTime } from "./form-response-time"; 17 17 import { FormRetry, RETRY_DEFAULT } from "./form-retry"; 18 18 import { FormSchedulingRegions } from "./form-scheduling-regions"; 19 19 - import { FormStatusPages } from "./form-status-pages"; 20 19 import { FormTags } from "./form-tags"; 21 20 import { FormVisibility } from "./form-visibility"; 22 21 ··· 85 84 // TODO: open dialog 86 85 console.error(err); 87 86 }, 88 88 - }), 89 89 - ); 90 90 - 91 91 - const updateStatusPagesMutation = useMutation( 92 92 - trpc.monitor.updateStatusPages.mutationOptions({ 93 93 - onSuccess: () => refetch(), 94 87 }), 95 88 ); 96 89 ··· 191 184 regions: values.regions, 192 185 periodicity: values.periodicity, 193 186 privateLocations: values.privateLocations, 194 194 - }); 195 195 - }} 196 196 - /> 197 197 - <FormStatusPages 198 198 - statusPages={statusPages} 199 199 - defaultValues={{ 200 200 - statusPages: monitor.pages.map(({ id }) => id), 201 201 - description: monitor.description, 202 202 - externalName: monitor.externalName ?? "", 203 203 - }} 204 204 - onSubmit={async (values) => { 205 205 - await updateStatusPagesMutation.mutateAsync({ 206 206 - id: Number.parseInt(id), 207 207 - statusPages: values.statusPages, 208 208 - description: values.description, 209 209 - externalName: values.externalName, 210 187 }); 211 188 }} 212 189 />

+4 -54

apps/dashboard/src/components/forms/status-page/update.tsx

··· 11 11 import { FormDangerZone } from "./form-danger-zone"; 12 12 import { FormGeneral } from "./form-general"; 13 13 import { FormLinks } from "./form-links"; 14 14 - import { FormMonitors } from "./form-monitors"; 15 14 import { FormPageAccess } from "./form-page-access"; 16 15 17 16 export function FormStatusPageUpdate() { ··· 38 37 39 38 const updatePasswordProtectionMutation = useMutation( 40 39 trpc.page.updatePasswordProtection.mutationOptions({ 41 41 - onSuccess: () => refetch(), 42 42 - }), 43 43 - ); 44 44 - 45 45 - const updateMonitorsMutation = useMutation( 46 46 - trpc.page.updateMonitors.mutationOptions({ 47 40 onSuccess: () => refetch(), 48 41 }), 49 42 ); ··· 96 89 97 90 return ( 98 91 <FormCardGroup> 99 99 - <Note color="info"> 92 92 + <Note color="warning"> 100 93 <Info /> 101 94 <p className="text-sm"> 102 102 - We've enabled the new version of the status page. Read more about the{" "} 103 103 - <Link 104 104 - href="https://docs.openstatus.dev/tutorial/how-to-configure-status-page/" 105 105 - rel="noreferrer" 106 106 - target="_blank" 107 107 - > 108 108 - configuration 109 109 - </Link> 110 110 - . 95 95 + Looking to connect monitors to your status page? The setup now has a 96 96 + separate components page{" "} 97 97 + <Link href={`/status-pages/${id}/components`}>components</Link>. 111 98 </p> 112 99 </Note> 113 100 <FormGeneral ··· 124 111 slug: values.slug, 125 112 description: values.description ?? "", 126 113 icon: values.icon ?? "", 127 127 - }); 128 128 - }} 129 129 - /> 130 130 - <FormMonitors 131 131 - monitors={monitors ?? []} 132 132 - defaultValues={{ 133 133 - monitors: statusPage.monitors 134 134 - .filter((m) => !m.groupId) 135 135 - .map((monitor) => ({ 136 136 - id: monitor.id, 137 137 - order: monitor.order, 138 138 - active: monitor.active ?? null, 139 139 - })), 140 140 - groups: statusPage.monitorGroups.map((group) => { 141 141 - const order = 142 142 - statusPage.monitors.find((m) => m.groupId === group.id)?.order ?? 143 143 - 0; 144 144 - return { 145 145 - id: -1 * group.id, // negative id to avoid conflicts with monitors 146 146 - order, 147 147 - name: group.name, 148 148 - monitors: statusPage.monitors 149 149 - .filter((m) => m.groupId === group.id) 150 150 - .map((monitor) => ({ 151 151 - id: monitor.id, 152 152 - order: monitor.groupOrder, 153 153 - active: monitor.active ?? null, 154 154 - })), 155 155 - }; 156 156 - }), 157 157 - }} 158 158 - legacy={statusPage.legacyPage} 159 159 - onSubmit={async (values) => { 160 160 - await updateMonitorsMutation.mutateAsync({ 161 161 - id: Number.parseInt(id), 162 162 - monitors: values.monitors, 163 163 - groups: values.groups, 164 114 }); 165 115 }} 166 116 />

+1 -1

apps/dashboard/src/components/nav/nav-monitors.tsx

··· 33 33 import { usePathname, useRouter } from "next/navigation"; 34 34 import { toast } from "sonner"; 35 35 36 36 - const STATUS = { 36 36 + export const STATUS = { 37 37 degraded: "bg-warning border border-warning", 38 38 error: "bg-destructive border border-destructive", 39 39 inactive: "bg-muted-foreground/70 border border-muted-foreground/70",

+21

apps/dashboard/src/data/page-components.client.ts

··· 1 1 + import { Trash2 } from "lucide-react"; 2 2 + 3 3 + export const actions = [ 4 4 + { 5 5 + id: "delete", 6 6 + label: "Delete", 7 7 + icon: Trash2, 8 8 + variant: "destructive" as const, 9 9 + }, 10 10 + ] as const; 11 11 + 12 12 + export type PageComponentAction = (typeof actions)[number]; 13 13 + 14 14 + export const getActions = ( 15 15 + props: Partial<Record<PageComponentAction["id"], () => Promise<void> | void>>, 16 16 + ): (PageComponentAction & { onClick?: () => Promise<void> | void })[] => { 17 17 + return actions.map((action) => ({ 18 18 + ...action, 19 19 + onClick: props[action.id as keyof typeof props], 20 20 + })); 21 21 + };

+2

packages/api/src/edge.ts

··· 11 11 import { monitorTagRouter } from "./router/monitorTag"; 12 12 import { notificationRouter } from "./router/notification"; 13 13 import { pageRouter } from "./router/page"; 14 14 + import { pageComponentRouter } from "./router/pageComponent"; 14 15 import { pageSubscriberRouter } from "./router/pageSubscriber"; 15 16 import { privateLocationRouter } from "./router/privateLocation"; 16 17 import { statusPageRouter } from "./router/statusPage"; ··· 25 26 workspace: workspaceRouter, 26 27 monitor: monitorRouter, 27 28 page: pageRouter, 29 29 + pageComponent: pageComponentRouter, 28 30 statusReport: statusReportRouter, 29 31 domain: domainRouter, 30 32 integration: integrationRouter,

+46 -7

packages/api/src/router/page.ts

··· 12 12 syncMonitorGroupDeleteMany, 13 13 syncMonitorGroupInsert, 14 14 syncMonitorsToPageDelete, 15 15 - syncMonitorsToPageInsertMany, 16 15 syncMonitorsToPageUpsertMany, 16 16 + syncPageComponentToMonitorsToPageInsertMany, 17 17 } from "@openstatus/db"; 18 18 import { 19 19 incidentTable, ··· 25 25 monitorsToPages, 26 26 page, 27 27 pageAccessTypes, 28 28 + pageComponent, 28 29 selectMaintenanceSchema, 29 30 selectMonitorGroupSchema, 30 31 selectMonitorSchema, 32 32 + selectPageComponentGroupSchema, 31 33 selectPageComponentSchema, 32 34 selectPageSchema, 33 35 statusReport, ··· 122 124 .get(); 123 125 124 126 if (monitorIds.length) { 125 125 - // We should make sure the user has access to the monitors 127 127 + // We should make sure the user has access to the monitors AND they are active 126 128 const allMonitors = await opts.ctx.db.query.monitor.findMany({ 127 129 where: and( 128 130 inArray(monitor.id, monitorIds), 129 131 eq(monitor.workspaceId, opts.ctx.workspace.id), 132 132 + eq(monitor.active, true), // Only allow active monitors 130 133 isNull(monitor.deletedAt), 131 134 ), 132 135 }); ··· 134 137 if (allMonitors.length !== monitorIds.length) { 135 138 throw new TRPCError({ 136 139 code: "FORBIDDEN", 137 137 - message: "You don't have access to all the monitors.", 140 140 + message: 141 141 + "You don't have access to all the monitors or some monitors are inactive.", 138 142 }); 139 143 } 140 144 141 141 - const values = monitors.map(({ monitorId }, index) => ({ 145 145 + // Build a map for quick lookup 146 146 + const monitorMap = new Map(allMonitors.map((m) => [m.id, m])); 147 147 + 148 148 + // Build pageComponent values (primary table) 149 149 + const pageComponentValues = monitors 150 150 + .map(({ monitorId }, index) => { 151 151 + const m = monitorMap.get(monitorId); 152 152 + if (!m || !m.workspaceId) return null; 153 153 + return { 154 154 + workspaceId: m.workspaceId, 155 155 + pageId: newPage.id, 156 156 + type: "monitor" as const, 157 157 + monitorId, 158 158 + name: m.externalName || m.name, 159 159 + order: index, 160 160 + groupId: null, 161 161 + groupOrder: 0, 162 162 + }; 163 163 + }) 164 164 + .filter((v): v is NonNullable<typeof v> => v !== null); 165 165 + 166 166 + // Insert into pageComponents (primary table) 167 167 + await opts.ctx.db 168 168 + .insert(pageComponent) 169 169 + .values(pageComponentValues) 170 170 + .run(); 171 171 + 172 172 + // Build values for reverse sync to monitorsToPages 173 173 + const monitorsToPageValues = monitors.map(({ monitorId }, index) => ({ 142 174 pageId: newPage.id, 143 175 order: index, 144 176 monitorId, 145 177 })); 146 178 147 147 - await opts.ctx.db.insert(monitorsToPages).values(values).run(); 148 148 - // Sync to page components 149 149 - await syncMonitorsToPageInsertMany(opts.ctx.db, values); 179 179 + // Reverse sync to monitorsToPages (for backwards compatibility) 180 180 + await syncPageComponentToMonitorsToPageInsertMany( 181 181 + opts.ctx.db, 182 182 + monitorsToPageValues, 183 183 + ); 150 184 } 151 185 152 186 return newPage; ··· 353 387 monitorsToPages: { with: { monitor: true, monitorGroup: true } }, 354 388 maintenances: true, 355 389 pageComponents: true, 390 390 + pageComponentGroups: true, 356 391 }, 357 392 }); 358 393 ··· 368 403 ) 369 404 .prefault([]), 370 405 monitorGroups: z.array(selectMonitorGroupSchema).prefault([]), 406 406 + pageComponentGroups: z 407 407 + .array(selectPageComponentGroupSchema) 408 408 + .prefault([]), 371 409 maintenances: z.array(selectMaintenanceSchema).prefault([]), 372 410 pageComponents: z.array(selectPageComponentSchema).prefault([]), 373 411 }) ··· 386 424 .map((m) => [m.monitorGroup?.id, m.monitorGroup]), 387 425 ).values(), 388 426 ), 427 427 + pageComponentGroups: data?.pageComponentGroups ?? [], 389 428 maintenances: data?.maintenances, 390 429 pageComponents: data?.pageComponents, 391 430 });

+423

packages/api/src/router/pageComponent.ts

··· 1 1 + import { z } from "zod"; 2 2 + 3 3 + import { type SQL, and, asc, desc, eq, inArray, sql } from "@openstatus/db"; 4 4 + import { 5 5 + page, 6 6 + pageComponent, 7 7 + pageComponentGroup, 8 8 + } from "@openstatus/db/src/schema"; 9 9 + 10 10 + import { TRPCError } from "@trpc/server"; 11 11 + import { createTRPCRouter, protectedProcedure } from "../trpc"; 12 12 + 13 13 + export const pageComponentRouter = createTRPCRouter({ 14 14 + list: protectedProcedure 15 15 + .input( 16 16 + z 17 17 + .object({ 18 18 + pageId: z.number().optional(), 19 19 + order: z.enum(["asc", "desc"]).optional(), 20 20 + }) 21 21 + .optional(), 22 22 + ) 23 23 + .query(async (opts) => { 24 24 + const whereConditions: SQL[] = [ 25 25 + eq(pageComponent.workspaceId, opts.ctx.workspace.id), 26 26 + ]; 27 27 + 28 28 + if (opts.input?.pageId) { 29 29 + whereConditions.push(eq(pageComponent.pageId, opts.input.pageId)); 30 30 + } 31 31 + 32 32 + const query = opts.ctx.db.query.pageComponent.findMany({ 33 33 + where: and(...whereConditions), 34 34 + orderBy: 35 35 + opts.input?.order === "desc" 36 36 + ? desc(pageComponent.order) 37 37 + : asc(pageComponent.order), 38 38 + with: { 39 39 + monitor: true, 40 40 + group: true, 41 41 + }, 42 42 + }); 43 43 + 44 44 + const result = await query; 45 45 + 46 46 + return result; 47 47 + }), 48 48 + 49 49 + delete: protectedProcedure 50 50 + .input(z.object({ id: z.number() })) 51 51 + .mutation(async (opts) => { 52 52 + return await opts.ctx.db 53 53 + .delete(pageComponent) 54 54 + .where( 55 55 + and( 56 56 + eq(pageComponent.id, opts.input.id), 57 57 + eq(pageComponent.workspaceId, opts.ctx.workspace.id), 58 58 + ), 59 59 + ) 60 60 + .returning(); 61 61 + }), 62 62 + 63 63 + new: protectedProcedure 64 64 + .input( 65 65 + z.object({ 66 66 + pageId: z.number(), 67 67 + name: z.string().min(1), 68 68 + description: z.string().optional(), 69 69 + type: z.enum(["external", "monitor"]).default("monitor"), 70 70 + monitorId: z.number().optional(), 71 71 + order: z.number().optional(), 72 72 + groupId: z.number().optional(), 73 73 + }), 74 74 + ) 75 75 + .mutation(async (opts) => { 76 76 + const _page = await opts.ctx.db.query.page.findFirst({ 77 77 + where: and( 78 78 + eq(page.id, opts.input.pageId), 79 79 + eq(page.workspaceId, opts.ctx.workspace.id), 80 80 + ), 81 81 + }); 82 82 + 83 83 + if (!_page) { 84 84 + throw new TRPCError({ code: "NOT_FOUND", message: "Page not found" }); 85 85 + } 86 86 + 87 87 + const newPageComponent = await opts.ctx.db 88 88 + .insert(pageComponent) 89 89 + .values({ 90 90 + pageId: opts.input.pageId, 91 91 + workspaceId: opts.ctx.workspace.id, 92 92 + name: opts.input.name, 93 93 + description: opts.input.description, 94 94 + type: opts.input.type, 95 95 + monitorId: opts.input.monitorId, 96 96 + order: opts.input.order, 97 97 + groupId: opts.input.groupId, 98 98 + }) 99 99 + .returning() 100 100 + .get(); 101 101 + 102 102 + return newPageComponent; 103 103 + }), 104 104 + 105 105 + update: protectedProcedure 106 106 + .input( 107 107 + z.object({ 108 108 + id: z.number(), 109 109 + name: z.string().min(1), 110 110 + description: z.string().optional(), 111 111 + type: z.enum(["external", "monitor"]).optional(), 112 112 + monitorId: z.number().optional(), 113 113 + order: z.number().optional(), 114 114 + groupId: z.number().optional(), 115 115 + }), 116 116 + ) 117 117 + .mutation(async (opts) => { 118 118 + const whereConditions: SQL[] = [ 119 119 + eq(pageComponent.id, opts.input.id), 120 120 + eq(pageComponent.workspaceId, opts.ctx.workspace.id), 121 121 + ]; 122 122 + 123 123 + const _pageComponent = await opts.ctx.db 124 124 + .update(pageComponent) 125 125 + .set({ 126 126 + name: opts.input.name, 127 127 + description: opts.input.description, 128 128 + type: opts.input.type, 129 129 + monitorId: opts.input.monitorId, 130 130 + order: opts.input.order, 131 131 + groupId: opts.input.groupId, 132 132 + updatedAt: new Date(), 133 133 + }) 134 134 + .where(and(...whereConditions)) 135 135 + .returning() 136 136 + .get(); 137 137 + 138 138 + return _pageComponent; 139 139 + }), 140 140 + 141 141 + updateOrder: protectedProcedure 142 142 + .input( 143 143 + z.object({ 144 144 + pageId: z.number(), 145 145 + components: z.array( 146 146 + z.object({ 147 147 + id: z.number().optional(), // Optional for new components 148 148 + monitorId: z.number().nullish(), 149 149 + order: z.number(), 150 150 + name: z.string(), 151 151 + description: z.string().nullish(), 152 152 + type: z.enum(["monitor", "external"]), 153 153 + }), 154 154 + ), 155 155 + groups: z.array( 156 156 + z.object({ 157 157 + order: z.number(), 158 158 + name: z.string(), 159 159 + components: z.array( 160 160 + z.object({ 161 161 + id: z.number().optional(), // Optional for new components 162 162 + monitorId: z.number().nullish(), 163 163 + order: z.number(), 164 164 + name: z.string(), 165 165 + description: z.string().nullish(), 166 166 + type: z.enum(["monitor", "external"]), 167 167 + }), 168 168 + ), 169 169 + }), 170 170 + ), 171 171 + }), 172 172 + ) 173 173 + .mutation(async (opts) => { 174 174 + await opts.ctx.db.transaction(async (tx) => { 175 175 + // Get existing state 176 176 + const existingComponents = await tx 177 177 + .select() 178 178 + .from(pageComponent) 179 179 + .where( 180 180 + and( 181 181 + eq(pageComponent.pageId, opts.input.pageId), 182 182 + eq(pageComponent.workspaceId, opts.ctx.workspace.id), 183 183 + ), 184 184 + ) 185 185 + .all(); 186 186 + 187 187 + const existingGroups = await tx 188 188 + .select() 189 189 + .from(pageComponentGroup) 190 190 + .where( 191 191 + and( 192 192 + eq(pageComponentGroup.pageId, opts.input.pageId), 193 193 + eq(pageComponentGroup.workspaceId, opts.ctx.workspace.id), 194 194 + ), 195 195 + ) 196 196 + .all(); 197 197 + 198 198 + const existingGroupIds = existingGroups.map((g) => g.id); 199 199 + 200 200 + // Collect all monitorIds from input (for monitor-type components) 201 201 + const inputMonitorIds = [ 202 202 + ...opts.input.components 203 203 + .filter((c) => c.type === "monitor" && c.monitorId) 204 204 + .map((c) => c.monitorId), 205 205 + ...opts.input.groups.flatMap((g) => 206 206 + g.components 207 207 + .filter((c) => c.type === "monitor" && c.monitorId) 208 208 + .map((c) => c.monitorId), 209 209 + ), 210 210 + ] as number[]; 211 211 + 212 212 + // Collect IDs for external components that have IDs in input 213 213 + const inputExternalComponentIds = [ 214 214 + ...opts.input.components 215 215 + .filter((c) => c.type === "external" && c.id) 216 216 + .map((c) => c.id), 217 217 + ...opts.input.groups.flatMap((g) => 218 218 + g.components 219 219 + .filter((c) => c.type === "external" && c.id) 220 220 + .map((c) => c.id), 221 221 + ), 222 222 + ] as number[]; 223 223 + 224 224 + // Find components that are being removed 225 225 + // For monitor components: those with monitorIds not in the input 226 226 + // For external components with IDs: those with IDs not in the input 227 227 + // For external components without IDs in input: delete all existing external components 228 228 + const removedMonitorComponents = existingComponents.filter( 229 229 + (c) => 230 230 + c.type === "monitor" && 231 231 + c.monitorId && 232 232 + !inputMonitorIds.includes(c.monitorId), 233 233 + ); 234 234 + 235 235 + const hasExternalComponentsInInput = 236 236 + opts.input.components.some((c) => c.type === "external") || 237 237 + opts.input.groups.some((g) => 238 238 + g.components.some((c) => c.type === "external"), 239 239 + ); 240 240 + 241 241 + // If input has external components but they don't have IDs, we need to delete old ones 242 242 + // If input has external components with IDs, only delete those not in input 243 243 + const removedExternalComponents = existingComponents.filter((c) => { 244 244 + if (c.type !== "external") return false; 245 245 + // If we have external components in input 246 246 + if (hasExternalComponentsInInput) { 247 247 + // If the input has IDs, only remove those not in the list 248 248 + if (inputExternalComponentIds.length > 0) { 249 249 + return !inputExternalComponentIds.includes(c.id); 250 250 + } 251 251 + // If input doesn't have IDs, remove all existing external components 252 252 + return true; 253 253 + } 254 254 + // If no external components in input at all, remove existing ones 255 255 + return true; 256 256 + }); 257 257 + 258 258 + const removedComponentIds = [ 259 259 + ...removedMonitorComponents.map((c) => c.id), 260 260 + ...removedExternalComponents.map((c) => c.id), 261 261 + ]; 262 262 + 263 263 + // Delete removed components 264 264 + if (removedComponentIds.length > 0) { 265 265 + await tx 266 266 + .delete(pageComponent) 267 267 + .where( 268 268 + and( 269 269 + eq(pageComponent.pageId, opts.input.pageId), 270 270 + eq(pageComponent.workspaceId, opts.ctx.workspace.id), 271 271 + inArray(pageComponent.id, removedComponentIds), 272 272 + ), 273 273 + ); 274 274 + } 275 275 + 276 276 + // Clear groupId from all components before deleting groups 277 277 + // This prevents foreign key constraint errors 278 278 + if (existingGroupIds.length > 0) { 279 279 + await tx 280 280 + .update(pageComponent) 281 281 + .set({ groupId: null }) 282 282 + .where( 283 283 + and( 284 284 + eq(pageComponent.pageId, opts.input.pageId), 285 285 + eq(pageComponent.workspaceId, opts.ctx.workspace.id), 286 286 + inArray(pageComponent.groupId, existingGroupIds), 287 287 + ), 288 288 + ); 289 289 + } 290 290 + 291 291 + // Delete old groups and create new ones 292 292 + if (existingGroupIds.length > 0) { 293 293 + await tx 294 294 + .delete(pageComponentGroup) 295 295 + .where( 296 296 + and( 297 297 + eq(pageComponentGroup.pageId, opts.input.pageId), 298 298 + eq(pageComponentGroup.workspaceId, opts.ctx.workspace.id), 299 299 + ), 300 300 + ); 301 301 + } 302 302 + 303 303 + // Create new groups 304 304 + const newGroups: Array<{ id: number; name: string }> = []; 305 305 + if (opts.input.groups.length > 0) { 306 306 + const createdGroups = await tx 307 307 + .insert(pageComponentGroup) 308 308 + .values( 309 309 + opts.input.groups.map((g) => ({ 310 310 + pageId: opts.input.pageId, 311 311 + workspaceId: opts.ctx.workspace.id, 312 312 + name: g.name, 313 313 + })), 314 314 + ) 315 315 + .returning(); 316 316 + newGroups.push(...createdGroups); 317 317 + } 318 318 + 319 319 + // Prepare values for upsert - both grouped and ungrouped components 320 320 + const groupComponentValues = opts.input.groups.flatMap((g, i) => 321 321 + g.components.map((c) => ({ 322 322 + id: c.id, // Will be undefined for new components 323 323 + pageId: opts.input.pageId, 324 324 + workspaceId: opts.ctx.workspace.id, 325 325 + name: c.name, 326 326 + description: c.description, 327 327 + type: c.type, 328 328 + monitorId: c.monitorId, 329 329 + order: g.order, 330 330 + groupId: newGroups[i].id, 331 331 + groupOrder: c.order, 332 332 + })), 333 333 + ); 334 334 + 335 335 + const standaloneComponentValues = opts.input.components.map((c) => ({ 336 336 + id: c.id, // Will be undefined for new components 337 337 + pageId: opts.input.pageId, 338 338 + workspaceId: opts.ctx.workspace.id, 339 339 + name: c.name, 340 340 + description: c.description, 341 341 + type: c.type, 342 342 + monitorId: c.monitorId, 343 343 + order: c.order, 344 344 + groupId: null as number | null, 345 345 + groupOrder: null as number | null, 346 346 + })); 347 347 + 348 348 + const allComponentValues = [ 349 349 + ...groupComponentValues, 350 350 + ...standaloneComponentValues, 351 351 + ]; 352 352 + 353 353 + // Separate monitor and external components for different upsert strategies 354 354 + const monitorComponents = allComponentValues.filter( 355 355 + (c) => c.type === "monitor" && c.monitorId, 356 356 + ); 357 357 + const externalComponents = allComponentValues.filter( 358 358 + (c) => c.type === "external", 359 359 + ); 360 360 + 361 361 + // Upsert monitor components using SQL-level conflict resolution 362 362 + // This uses the (pageId, monitorId) unique constraint to preserve component IDs 363 363 + if (monitorComponents.length > 0) { 364 364 + await tx 365 365 + .insert(pageComponent) 366 366 + .values(monitorComponents) 367 367 + .onConflictDoUpdate({ 368 368 + target: [pageComponent.pageId, pageComponent.monitorId], 369 369 + set: { 370 370 + name: sql.raw("excluded.`name`"), 371 371 + description: sql.raw("excluded.`description`"), 372 372 + order: sql.raw("excluded.`order`"), 373 373 + groupId: sql.raw("excluded.`group_id`"), 374 374 + groupOrder: sql.raw("excluded.`group_order`"), 375 375 + updatedAt: sql`(strftime('%s', 'now'))`, 376 376 + }, 377 377 + }); 378 378 + } 379 379 + 380 380 + // Handle external components 381 381 + // If they have IDs, update them; otherwise insert new ones 382 382 + for (const componentValue of externalComponents) { 383 383 + if (componentValue.id) { 384 384 + // Update existing external component (preserves ID and relationships) 385 385 + await tx 386 386 + .update(pageComponent) 387 387 + .set({ 388 388 + name: componentValue.name, 389 389 + description: componentValue.description, 390 390 + type: componentValue.type, 391 391 + monitorId: componentValue.monitorId, 392 392 + order: componentValue.order, 393 393 + groupId: componentValue.groupId, 394 394 + groupOrder: componentValue.groupOrder, 395 395 + updatedAt: new Date(), 396 396 + }) 397 397 + .where( 398 398 + and( 399 399 + eq(pageComponent.id, componentValue.id), 400 400 + eq(pageComponent.pageId, opts.input.pageId), 401 401 + eq(pageComponent.workspaceId, opts.ctx.workspace.id), 402 402 + ), 403 403 + ); 404 404 + } else { 405 405 + // Insert new external component 406 406 + await tx.insert(pageComponent).values({ 407 407 + pageId: componentValue.pageId, 408 408 + workspaceId: componentValue.workspaceId, 409 409 + name: componentValue.name, 410 410 + description: componentValue.description, 411 411 + type: componentValue.type, 412 412 + monitorId: componentValue.monitorId, 413 413 + order: componentValue.order, 414 414 + groupId: componentValue.groupId, 415 415 + groupOrder: componentValue.groupOrder, 416 416 + }); 417 417 + } 418 418 + } 419 419 + }); 420 420 + 421 421 + return { success: true }; 422 422 + }), 423 423 + });

+4 -4

packages/api/src/router/sync.test.ts

··· 105 105 .get(); 106 106 testPageId = testPage.id; 107 107 108 108 - // Create test monitor using tRPC 108 108 + // Create test monitor using tRPC (must be active for sync to work) 109 109 const ctx = getTestContext(); 110 110 const caller = appRouter.createCaller(ctx); 111 111 const createdMonitor = await caller.monitor.new({ ··· 115 115 method: monitorData.method, 116 116 headers: [], 117 117 assertions: [], 118 118 - active: false, 118 118 + active: true, // Changed to true - sync functions only sync active monitors 119 119 skipCheck: true, 120 120 }); 121 121 testMonitorId = createdMonitor.id; ··· 594 594 const ctx = getTestContext(); 595 595 const caller = appRouter.createCaller(ctx); 596 596 597 597 - // Create a monitor specifically for deletion tests 597 597 + // Create a monitor specifically for deletion tests (must be active for sync) 598 598 const deletableMonitor = await caller.monitor.new({ 599 599 name: `${TEST_PREFIX}-deletable-monitor`, 600 600 url: "https://delete-test.example.com", ··· 602 602 method: "GET" as const, 603 603 headers: [], 604 604 assertions: [], 605 605 - active: false, 605 605 + active: true, // Changed to true - sync functions only sync active monitors 606 606 skipCheck: true, 607 607 }); 608 608 deletableMonitorId = deletableMonitor.id;

+45 -8

packages/db/src/sync.ts

··· 6 6 maintenancesToMonitors, 7 7 maintenancesToPageComponents, 8 8 monitor, 9 9 + monitorsToPages, 9 10 monitorsToStatusReport, 10 11 pageComponent, 11 12 pageComponentGroup, ··· 90 91 groupOrder?: number; 91 92 }, 92 93 ) { 93 93 - // Get monitor data for name and workspace_id 94 94 + // Get monitor data for name and workspace_id (only active monitors) 94 95 const monitorData = await db 95 96 .select({ 96 97 id: monitor.id, 97 98 name: monitor.name, 98 99 externalName: monitor.externalName, 99 100 workspaceId: monitor.workspaceId, 101 101 + active: monitor.active, 100 102 }) 101 103 .from(monitor) 102 104 .where(eq(monitor.id, data.monitorId)) 103 105 .get(); 104 106 105 105 - if (!monitorData || !monitorData.workspaceId) return; 107 107 + // Skip if monitor doesn't exist, has no workspace, or is inactive 108 108 + if (!monitorData || !monitorData.workspaceId || !monitorData.active) return; 106 109 107 110 await db 108 111 .insert(pageComponent) ··· 134 137 ) { 135 138 if (items.length === 0) return; 136 139 137 137 - // Get all monitor data in one query 140 140 + // Get all monitor data in one query (only active monitors) 138 141 const monitorIds = [...new Set(items.map((item) => item.monitorId))]; 139 142 const monitors = await db 140 143 .select({ ··· 142 145 name: monitor.name, 143 146 externalName: monitor.externalName, 144 147 workspaceId: monitor.workspaceId, 148 148 + active: monitor.active, 145 149 }) 146 150 .from(monitor) 147 147 - .where(inArray(monitor.id, monitorIds)); 151 151 + .where(and(inArray(monitor.id, monitorIds), eq(monitor.active, true))); 148 152 149 153 const monitorMap = new Map(monitors.map((m) => [m.id, m])); 150 154 151 155 const values = items 152 156 .map((item) => { 153 157 const m = monitorMap.get(item.monitorId); 154 154 - if (!m || !m.workspaceId) return null; 158 158 + // Skip if monitor doesn't exist, has no workspace, or is inactive 159 159 + if (!m || !m.workspaceId || !m.active) return null; 155 160 return { 156 161 workspaceId: m.workspaceId, 157 162 pageId: item.pageId, ··· 186 191 ) { 187 192 if (items.length === 0) return; 188 193 189 189 - // Get all monitor data in one query 194 194 + // Get all monitor data in one query (only active monitors) 190 195 const monitorIds = [...new Set(items.map((item) => item.monitorId))]; 191 196 const monitors = await db 192 197 .select({ ··· 194 199 name: monitor.name, 195 200 externalName: monitor.externalName, 196 201 workspaceId: monitor.workspaceId, 202 202 + active: monitor.active, 197 203 }) 198 204 .from(monitor) 199 199 - .where(inArray(monitor.id, monitorIds)); 205 205 + .where(and(inArray(monitor.id, monitorIds), eq(monitor.active, true))); 200 206 201 207 const monitorMap = new Map(monitors.map((m) => [m.id, m])); 202 208 203 209 const values = items 204 210 .map((item) => { 205 211 const m = monitorMap.get(item.monitorId); 206 206 - if (!m || !m.workspaceId) return null; 212 212 + // Skip if monitor doesn't exist, has no workspace, or is inactive 213 213 + if (!m || !m.workspaceId || !m.active) return null; 207 214 return { 208 215 workspaceId: m.workspaceId, 209 216 pageId: item.pageId, ··· 276 283 await db 277 284 .delete(pageComponent) 278 285 .where(inArray(pageComponent.monitorId, monitorIds)); 286 286 + } 287 287 + 288 288 + /** 289 289 + * REVERSE SYNC: Syncs page_component inserts to monitors_to_pages 290 290 + * Used when pageComponents is the primary table and monitorsToPages is kept for backwards compatibility 291 291 + */ 292 292 + export async function syncPageComponentToMonitorsToPageInsertMany( 293 293 + db: DB | Transaction, 294 294 + items: Array<{ 295 295 + monitorId: number; 296 296 + pageId: number; 297 297 + order?: number; 298 298 + monitorGroupId?: number | null; 299 299 + groupOrder?: number; 300 300 + }>, 301 301 + ) { 302 302 + if (items.length === 0) return; 303 303 + 304 304 + await db 305 305 + .insert(monitorsToPages) 306 306 + .values( 307 307 + items.map((item) => ({ 308 308 + monitorId: item.monitorId, 309 309 + pageId: item.pageId, 310 310 + order: item.order ?? 0, 311 311 + monitorGroupId: item.monitorGroupId ?? null, 312 312 + groupOrder: item.groupOrder ?? 0, 313 313 + })), 314 314 + ) 315 315 + .onConflictDoNothing(); 279 316 } 280 317 281 318 // ============================================================================