(null)
+ const trpc = useTRPC()
+ const eventTypeFilter = eventType.trim() || undefined
+ const deliveriesQuery = useInfiniteQuery(
+ trpc.webhooks.listDeliveries.infiniteQueryOptions(
+ {
+ teamSlug,
+ webhookId,
+ limit: 25,
+ deliveryStatus,
+ eventType: eventTypeFilter,
+ },
+ {
+ getNextPageParam: (page) => page.nextCursor ?? undefined,
+ placeholderData: keepPreviousData,
+ }
+ )
+ )
+ const groups = useMemo(
+ () => deliveriesQuery.data?.pages.flatMap((page) => page.groups) ?? [],
+ [deliveriesQuery.data]
+ )
+ const selectedGroup = useMemo(
+ () =>
+ groups.find((group) => group.eventId === selectedEventId) ?? groups[0],
+ [groups, selectedEventId]
+ )
+ const selectedAttempt = selectedGroup?.latestAttempt ?? null
+ const deliveryDetailQuery = useQuery(
+ trpc.webhooks.getDelivery.queryOptions(
+ {
+ teamSlug,
+ webhookId,
+ deliveryId: selectedAttempt?.id ?? EMPTY_UUID,
+ },
+ {
+ enabled: Boolean(selectedAttempt),
+ }
+ )
+ )
+ const detailedAttempt = deliveryDetailQuery.data?.delivery ?? selectedAttempt
+ const hasActiveFilters = deliveryStatus !== 'all' || Boolean(eventTypeFilter)
+
+ return (
+
+
+ {
+ setDeliveryStatus(value)
+ setSelectedEventId(null)
+ }}
+ />
+ {
+ setEventType(event.target.value)
+ setSelectedEventId(null)
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Event
+ Status
+ HTTP
+ Attempts
+ Duration
+ Last attempt
+
+
+
+ {deliveriesQuery.isLoading ? (
+
+ ) : groups.length === 0 ? (
+
+
+
+ {hasActiveFilters
+ ? 'No deliveries match these filters'
+ : 'No deliveries yet'}
+
+
+ ) : (
+ groups.map((group) => {
+ const attempt = group.latestAttempt
+ const isSelected = group.eventId === selectedGroup?.eventId
+
+ return (
+ setSelectedEventId(group.eventId)}
+ >
+
+
+
+ {getEventLabel(group.eventType)}
+
+
+ {group.sandboxId}
+
+
+
+
+
+
+
+
+
+ Showing {groups.length.toLocaleString()} grouped events
+
+
+
+
+
+
+ {webhook.url}
+
+
+
+
+
+
+
+
+
+
+
+ {latestAttempt ? (
+
+ ) : (
+ -
+ )}
+
+
+
+ )
+}
diff --git a/src/features/dashboard/settings/webhooks/detail/index.ts b/src/features/dashboard/settings/webhooks/detail/index.ts
new file mode 100644
index 000000000..c8b5997ac
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/index.ts
@@ -0,0 +1,3 @@
+export { WebhookDeliveriesContent } from './deliveries-content'
+export { WebhookDetailLayout } from './layout'
+export { WebhookOverviewContent } from './overview-content'
diff --git a/src/features/dashboard/settings/webhooks/detail/layout.tsx b/src/features/dashboard/settings/webhooks/detail/layout.tsx
new file mode 100644
index 000000000..55efba0a2
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/layout.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { PROTECTED_URLS } from '@/configs/urls'
+import { DashboardTabsList } from '@/ui/dashboard-tabs'
+import { ListIcon, TrendIcon } from '@/ui/primitives/icons'
+import { WebhookDetailHeader } from './header'
+
+type WebhookDetailLayoutProps = {
+ children: React.ReactNode
+ teamSlug: string
+ webhookId: string
+}
+
+export const WebhookDetailLayout = ({
+ children,
+ teamSlug,
+ webhookId,
+}: WebhookDetailLayoutProps) => (
+
+
+ ,
+ },
+ {
+ id: 'deliveries',
+ label: 'Event deliveries',
+ href: PROTECTED_URLS.WEBHOOK_DELIVERIES(teamSlug, webhookId),
+ icon: ,
+ },
+ ]}
+ />
+ {children}
+
+)
diff --git a/src/features/dashboard/settings/webhooks/detail/overview-content.tsx b/src/features/dashboard/settings/webhooks/detail/overview-content.tsx
new file mode 100644
index 000000000..aed45d0fc
--- /dev/null
+++ b/src/features/dashboard/settings/webhooks/detail/overview-content.tsx
@@ -0,0 +1,240 @@
+'use client'
+
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useQueryStates } from 'nuqs'
+import { useMemo } from 'react'
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
+import { useTRPC } from '@/trpc/client'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from '@/ui/primitives/card'
+import {
+ type ChartConfig,
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from '@/ui/primitives/chart'
+import { WebhookRangeSelector } from './range-selector'
+import {
+ getValidWebhookStatsBounds,
+ getWebhookStatsApiBounds,
+ getWebhookStatsRange,
+ getWebhookStatsRangeFromBounds,
+ type WebhookStatsRange,
+ type WebhookStatsRangeBounds,
+ webhookStatsTimeframeParams,
+} from './stats-range'
+
+type WebhookOverviewContentProps = {
+ teamSlug: string
+ webhookId: string
+ initialRangeBounds: WebhookStatsRangeBounds
+}
+
+type MetricCardProps = {
+ label: string
+ value: string
+ description: string
+}
+
+const deliveryChartConfig = {
+ total: {
+ label: 'Total deliveries',
+ color: 'var(--accent-info-highlight)',
+ },
+ failed: {
+ label: 'Failed deliveries',
+ color: 'var(--accent-error-highlight)',
+ },
+} satisfies ChartConfig
+
+const latencyChartConfig = {
+ avgDurationMs: {
+ label: 'Average duration',
+ color: 'var(--accent-positive-highlight)',
+ },
+} satisfies ChartConfig
+
+const formatBucketLabel = (value: string) =>
+ new Date(value).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ hour: 'numeric',
+ })
+
+const MetricCard = ({ label, value, description }: MetricCardProps) => (
+
+
+
+ {label}
+
+
+ {value}
+
+
+
+ {description}
+
+
+)
+
+const EmptyChartState = ({ label }: { label: string }) => (
+
+ {label}
+
+)
+
+export const WebhookOverviewContent = ({
+ teamSlug,
+ webhookId,
+ initialRangeBounds,
+}: WebhookOverviewContentProps) => {
+ const [timeframeParams, setTimeframeParams] = useQueryStates(
+ webhookStatsTimeframeParams,
+ {
+ history: 'push',
+ shallow: true,
+ }
+ )
+ const rangeBounds = useMemo(
+ () =>
+ getValidWebhookStatsBounds({
+ start: timeframeParams.start ?? initialRangeBounds.start,
+ end: timeframeParams.end ?? initialRangeBounds.end,
+ }),
+ [timeframeParams.start, timeframeParams.end, initialRangeBounds]
+ )
+ const apiRangeBounds = useMemo(
+ () => getWebhookStatsApiBounds(rangeBounds),
+ [rangeBounds]
+ )
+ const range = getWebhookStatsRangeFromBounds(rangeBounds)
+ const trpc = useTRPC()
+ const { data } = useSuspenseQuery(
+ trpc.webhooks.getDeliveryStats.queryOptions({
+ teamSlug,
+ webhookId,
+ ...apiRangeBounds,
+ })
+ )
+ const { stats } = data
+ const successful = Math.max(stats.total - stats.failed, 0)
+ const failureRate =
+ stats.total > 0
+ ? `${((stats.failed / stats.total) * 100).toFixed(1)}%`
+ : '0%'
+ const hasBuckets = stats.buckets.length > 0
+ const handleRangeChange = (nextRange: WebhookStatsRange) => {
+ setTimeframeParams(getWebhookStatsRange(nextRange))
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {hasBuckets ? (
+
+
+
+
+
+ } />
+
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {hasBuckets ? (
+
+
+
+
+
+ } />
+
+
+
+ ) : (
+
+ )}
+
+
+
+
+ {SandboxLifecycleEventTypeSchema.options.map((event, index) => (
+
+ {index > 0 && (
+
+ ·
+
+ )}
+ {WEBHOOK_EVENT_LABELS[event]}
+
+ ))}
+
+
+
+ )
+ }
+
+ return events.map((event) => (
+ {getWebhookEventLabel(event)}
+ ))
+}
diff --git a/src/features/dashboard/settings/webhooks/table-row.tsx b/src/features/dashboard/settings/webhooks/table-row.tsx
index c0b9c824b..c8ef13b0a 100644
--- a/src/features/dashboard/settings/webhooks/table-row.tsx
+++ b/src/features/dashboard/settings/webhooks/table-row.tsx
@@ -1,11 +1,11 @@
'use client'
-import { Fragment, useState } from 'react'
-import { SandboxLifecycleEventTypeSchema } from '@/core/modules/sandboxes/lifecycle-event-types'
+import Link from 'next/link'
+import { useState } from 'react'
+import { PROTECTED_URLS } from '@/configs/urls'
import { useClipboard } from '@/lib/hooks/use-clipboard'
import { defaultSuccessToast, toast } from '@/lib/hooks/use-toast'
import { cn } from '@/lib/utils'
-import { Badge } from '@/ui/primitives/badge'
import { Button } from '@/ui/primitives/button'
import {
DropdownMenu,
@@ -25,15 +25,10 @@ import {
WebhookIcon,
} from '@/ui/primitives/icons'
import { TableCell, TableRow } from '@/ui/primitives/table'
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from '@/ui/primitives/tooltip'
import { useDashboard } from '../../context'
import { UserAvatar } from '../../shared'
-import { WEBHOOK_EVENT_LABELS } from './constants'
import { DeleteWebhookDialog } from './delete-webhook-dialog'
+import { WebhookEventBadges } from './event-badges'
import type { Webhook } from './types'
import { UpdateWebhookSecretDialog } from './update-webhook-secret-dialog'
import { UpsertWebhookDialog } from './upsert-webhook-dialog'
@@ -47,6 +42,7 @@ type WebhookRowActionsProps = {
}
type WebhookNameAndUrlProps = {
+ href: string
name: string
url: string
}
@@ -59,7 +55,7 @@ const urlIconMap: Record = {
idle: WebhookIcon,
}
-const WebhookNameAndUrl = ({ name, url }: WebhookNameAndUrlProps) => {
+const WebhookNameAndUrl = ({ href, name, url }: WebhookNameAndUrlProps) => {
const [wasCopied, copy] = useClipboard(1500)
const [isUrlHovered, setIsUrlHovered] = useState(false)
const iconState: UrlIconState = wasCopied
@@ -85,7 +81,13 @@ const WebhookNameAndUrl = ({ name, url }: WebhookNameAndUrlProps) => {