Overview

The Webhooks feature allows users to configure HTTP callbacks that are triggered by events in the system.
This document provides a high-level overview of what the Webhooks feature does, where it lives in the UI, and how it is implemented in the frontend.

What the Webhooks Feature Does

The Webhooks UI enables users to:

• Create webhook endpoint configurations
• View a paginated list of existing webhooks
• Edit existing webhook configurations
• Delete webhooks with confirmation
• Test webhook configurations directly from the browser

Each webhook defines how the system should send an HTTP request to an external endpoint.

Typical Use Cases

Common use cases include:

• Sending alerts or notifications to external services (e.g. Slack, internal systems)
• Integrating with third-party systems via HTTP callbacks
• Triggering automation pipelines when certain events occur

Where Webhooks Live in the UI

• Route: /dashboard/webhooks
• Navigation: Appears in the dashboard sidebar
• Permission gate: Sidebar entry is shown only if the user has READ_WEBHOOK_USER_ROLE

Core Concepts

Webhook Configuration

Each webhook consists of:

• A human-readable title
• A connection definition:
  • URL
  • HTTP method
  • Headers (JSON)
  • Body template (JSON with mustache variables)
  • Timeout
  • Authentication configuration

Mustache Variables

• Headers and body templates may contain placeholders such as

{{alert_title}}

• Variables are extracted in the UI and reused in:
  • Webhook testing
  • Alert configuration flows

Important Constraints & Assumptions

• Headers and body templates are edited as JSON strings in the UI
• The frontend parses these JSON strings before sending data to the backend
• Webhook testing is executed directly from the browser using fetch()
• Browser-based testing is subject to CORS restrictions
• Authentication data is not automatically injected into test requests