Alerting: Implement template preview for Grafana AlertManager

[soniaAguilarPeiron]

What is this feature?

This PR adds the preview feature in templates form. This feature is only available for Grafana AlertManager.

Why do we need this feature?

This will help users understand the result of the template they are creating, by showing errors directly in the preview. This would prevent a lot of templating issues.
This PR also enables user to create alert data payload for the preview, not only editing it in a JSON editor but having an alert data editor, where user doesn't need to understand the exact JSON format for the payload.

Who is this feature for?

All users.

Fixes #61764

Special notes for your reviewer:

templatePreviewFE.mp4

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.
• There are no known compatibility issues with older supported versions of Grafana, or plugins.
• It passes the Hosted Grafana feature readiness review for observability, scalability, performance, and security.

[github-advanced-security]

You have successfully added a new CodeQL configuration .github/workflows/pr-codeql-analysis-javascript.yml:analyze. As part of the setup process, we have scanned this repository and found 27 existing alerts. Please check the repository Security tab to see all alerts.

[grafanabot]

This pull request was removed from the 9.5.0 milestone because 9.5.0 is currently being released.

[VikaCep]

I noticed the request is called as /templates/preview but in the design doc it's listed as /templates/test. We should get confirmation on the final form.

[soniaAguilarPeiron]

I noticed the request is called as /templates/preview but in the design doc it's listed as /templates/test. We should get confirmation on the final form.

yes, the final api is still WIP, so I decided not to update the request yet until we are sure about the final required request.

[VikaCep]

I added an alert instance selector to the preview section so that users can select from existing alert instances to build the payload. The alert instances are consumed from api/alertmanager/grafana/api/v2/alerts.

Once one or more alerts are selected, a payload like the one defined in this document is created with the alerts information and shown in the payload editor:

{
   alerts: [
        {
          annotations: ...,
          labels: ...,
          startsAt: ...,
          endsAt: ...,
        },  ...
   ]
}

Example:

[gillesdemey]

Awesome work! Just one more nit but we can change that after it's merged

[konrad147]

LGTM!