feat: Add Grafana integration#3040
Conversation
|
@mfuzailzubari thank you for submitting this one! |
Conflits are resolved, moving on to other findings. |
|
Fixed all the issues raised in the thread. |
|
@mfuzailzubari I have not managed to set this up fully - I tested the query component and it worked, but the trigger one is not good. We need to avoid user having to configure these webhooks manually if there are API endpoints through which we can do this. |
fixed it. please check. |
|
@mfuzailzubari managed to get it to work. |
|
Also, the CI tests should pass |
…shared secret input (superplanehq#1945)
…on merge, and fix mapper tsx build (superplanehq#1945)
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
web_src/src/pages/workflowv2/mappers/grafana/on_alert_firing.tsx
Outdated
Show resolved
Hide resolved
web_src/src/pages/workflowv2/mappers/grafana/on_alert_firing.tsx
Outdated
Show resolved
Hide resolved
all passed. |
|
@mfuzailzubari
Meanwhile I am testing your implementation |
| { | ||
| Name: "dataSourceUid", | ||
| Label: "Data Source UID", | ||
| Type: configuration.FieldTypeString, |
There was a problem hiding this comment.
we should use FieldTypeIntegrationResource. And we should be able to get the avaiable resources. Check dash0 or Discord integration
| return ( | ||
| <div className="border-t-1 border-gray-200 pt-4"> | ||
| <div className="space-y-3"> | ||
| <div> | ||
| <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Grafana Contact Point Setup</span> | ||
| <div className="text-xs text-gray-800 dark:text-gray-100 mt-2 border-1 border-gray-300 dark:border-gray-600 px-2.5 py-2 bg-gray-50 dark:bg-gray-800 rounded-md"> | ||
| <ol className="list-decimal ml-4 space-y-1"> | ||
| <li>Save the canvas to generate the webhook URL.</li> | ||
| <li>SuperPlane will try to auto-provision a Grafana webhook contact point.</li> | ||
| <li>If auto-provisioning fails, create/update the contact point manually using the URL below.</li> | ||
| </ol> | ||
| <div className="mt-3"> | ||
| <span className="text-xs font-medium text-gray-700 dark:text-gray-200">Webhook URL</span> | ||
| <pre className="mt-1 text-xs text-gray-800 dark:text-gray-100 border-1 border-gray-300 dark:border-gray-600 px-2.5 py-2 bg-white dark:bg-gray-900 rounded-md font-mono whitespace-pre-wrap break-all"> | ||
| {webhookUrl} | ||
| </pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
I was not able to make it automatically create a contact point. Do you know why exactly?
It should be able to create automatically, since the Sync confirmed we are connected, if it is not provisioning, then there is an error in the webhook handler. So we can remove this fallback message too, no?
There was a problem hiding this comment.
Ah, I undertood why I was not able to automatic provision
app-1 | 2026/02/18 22:09:27 [WebhookProvisioner] Webhook 0e3e8e5e-c025-4a4d-b89c-6a8f74b17c50 provisioning failed (attempt 1/3): grafana webhook setup: contact point provisioning will be retried: error listing contact points: error executing request: Get "http://host.docker.internal:3000/api/v1/provisioning/contact-points": dial tcp 192.168.65.254:3000: connection blocked: access to private IP address 192.168.65.254 is not allowed
@mfuzailzubari
Lets lets do this: lets enhance this message box, and also add a copy text button in this container, since I need to select it currently. Check webhook.tsx
| To connect Grafana: | ||
| 1. Create a Service Account token or API key in Grafana (Configuration > API Keys or Service Accounts). | ||
| 2. Set the Base URL to your Grafana instance (e.g. https://grafana.example.com). | ||
| 3. Paste the API token into SuperPlane and save. | ||
|
|
||
| For the alert trigger: | ||
| 1. SuperPlane will attempt to automatically create/update a Grafana Webhook contact point. | ||
| 2. Route your alert rule to the contact point created by SuperPlane. | ||
| 3. If auto-provisioning is not available (permissions/API limitations), create a Webhook contact point manually using the webhook URL from SuperPlane. | ||
| ` |
There was a problem hiding this comment.
I think this docs is currently incorrect, since grafana now has service accounts,
so the docs should be like:
Steps to Create Service Accounts and Tokens (UI)
- Navigate: Go to Administration > Users and access > Service accounts.
- Create Account: Click Add Service Account, enter a name, and assign a role (e.g., Viewer, Editor, Admin).
- Generate Token: Click the new service account, select Add service account token, name it, and optionally set an expiration date.
- Secure Token: Click Generate token and copy the token immediately; it will not be displayed again.

Implements #1945
This PR implements the Grafana integration with:
Authorization:
Implementation notes:
Demo video: https://drive.google.com/file/d/117GAjLWyp2pic79nzOqDvvDm64-qA094/view?usp=sharing