Alerting: notification template group (#96447)

Co-authored-by: brendamuir <100768211+brendamuir@users.noreply.github.com>
Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
This commit is contained in:
Pepe Cano 2024-11-22 13:40:20 +01:00 committed by GitHub
parent 451b226644
commit 706300e9b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
21 changed files with 208 additions and 178 deletions

View File

@ -1227,17 +1227,8 @@ exports[`better eslint`] = {
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"]
],
"public/app/features/alerting/unified/components/receivers/TemplateForm.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"]
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"],
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "12"]
],
"public/app/features/alerting/unified/components/receivers/TemplatePreview.tsx:5381": [
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]

View File

@ -99,7 +99,7 @@ The notification template is assigned to the contact point to determine the noti
{{< figure src="/media/docs/alerting/how-notification-templates-works.png" max-width="1200px" caption="A flow of the alert notification process, from querying the alert rule to sending the alert notification message." >}}
By default, Grafana provides default templates, such as `default.title` and `default.message`, to format notification messages.
By default, Grafana provides default templates, such as `{{define "default.title"}}` and `{{define "default.message"}}`, to format notification messages.
## More information

View File

@ -64,7 +64,7 @@ Notification templates allows you to change the default notification messages.
You can modify the content and format of notification messages. For example, you can customize the content to show only specific information or adjust the format to suit a particular contact point, such as Slack or Email.
{{% admonition type="note" %}}
Avoid adding extra information about alert instances in notification templates, as this information is only be visible in the notification message.
Avoid adding extra information about alert instances in notification templates, as this information is only visible in the notification message.
Instead, you should [use annotations or labels](ref:template-annotations-and-labels) to add information directly to the alert, ensuring it's also visible in the alert state and alert history within Grafana. You can then print the new alert annotation or label in notification templates.
{{% /admonition %}}

View File

@ -34,11 +34,11 @@ refs:
In contact points, you can select notification templates to customize the notification messages sent.
By default, Grafana provides a template for the notification title (`default.title`) and a template for the notification message (`default.message`). Both default templates display common alert details.
By default, Grafana provides a template for the notification title (`{{define "default.title"}}`) and a template for the notification message (`{{define "default.message"}}`). Both default templates display common alert details.
You can also create custom templates to customize the content and format of notification messages, which can then be applied to one or more contact points.
You can also create custom templates to customize the content and format of notification messages, which can then be applied to one or more contact points. In Grafana, a custom notification template is created within a notification template group.
This documentation provides step-by-step instructions for selecting templates in contact points, previewing templates, and creating custom templates using the Grafana UI.
This documentation provides step-by-step instructions for selecting templates in contact points, previewing templates, and creating notification template groups using the Grafana UI.
## Select a notification template for a contact point
@ -50,29 +50,28 @@ To add an existing notification template to your contact point, complete the fol
For example, if you are creating an email contact point integration, click **Message** or **Subject**.
1. Click **Edit**.
A dialog box opens where you can select templates.
1. Click **Select existing template** to select a template and [preview](#preview-a-notification-template) it using the default payload.
A dialog box opens where you can select notification templates.
1. Click **Select notification template** or **Enter custom message** to customize a template or message
You can also copy the selected template and use it in the custom tab.
1. Click **Enter custom message** to customize and edit the field directly. Note that the title changes depending on the field you are editing.
1. You can switch between the two tabs to access the list of available templates and copy them across to the customized version.
- You can select an existing notification template and [preview](#preview-a-notification-template) it using the default payload.
- You can also copy the notification template and use it in the **Enter custom message** tab.
1. Click **Save contact point**.
## Create a notification template
## Create a notification template and notification template group
Create notification templates to customize notification messages and reuse them in contact points.
Your notification template name must be unique. You cannot have two templates with the same name in the same notification template or in different notification templates. Avoid defining templates with the same name as default templates, such as: `__subject`, `__text_values_list`, `__text_alert_list`, `default.title` and `default.message`.
In Grafana, custom notification templates (`{{define "<NAME>"}}`) are created within a notification template group, allowing you to test and implement multiple templates together.
Your notification template name (`{{define "<NAME>"}}`) must be unique. You cannot have two templates with the same name in the same notification template group or in different notification template groups. Therefore, avoid using names already defined as default templates, such as: `__subject`, `__text_values_list`, `__text_alert_list`, `default.title` and `default.message`.
To create a notification template in Grafana, complete the following steps.
1. Click **Alerts & IRM** -> **Contact points**.
1. Click the **Notification Templates** tab and then **+ Add notification template**.
1. Click the **Notification Templates** tab and then **+ Add notification template group**.
1. Enter a name for the notification template.
1. Enter a name for the notification template group.
1. Write the content of the template in the content field.
@ -80,13 +79,13 @@ To create a notification template in Grafana, complete the following steps.
If `{{ define }}` is not included in the content, `{{ define "<NOTIFICATION_TEMPLATE_NAME>" }}` and `{{ end }}` is automatically added to the start and end.
To create a notification template that contains more than one template, complete the following steps.
To create a notification template group that contains more than one notification template, complete the following steps.
1. Click **+ Add notification template**.
1. Click **+ Add notification template group**.
1. Enter a name for the notification template.
1. Enter a name for the notification template group.
1. Write each template in the Content field, including `{{ define "name-of-template" }}` and `{{ end }}` at the start and end of each template.
1. Write each template in the Content field, including `{{ define "<NOTIFICATION_TEMPLATE_NAME>" }}` and `{{ end }}` at the start and end of each template.
1. Save your changes.
@ -103,7 +102,7 @@ Notification template preview is only for Grafana Alertmanager.
To preview your notification templates:
1. Navigate to **Alerts&IRM** -> **Alerting** -> **Contact points** -> **Notification Templates**.
1. Click **+ Add notification template** or edit an existing template.
1. Click **+ Add notification template group** or edit an existing template group.
1. Add or update your template content.
Default data is provided and you can add or edit alert data to it as well as alert instances. You can add alert data directly in the Payload data window itself or click **Select alert instances** or **Add custom alerts**.

View File

@ -69,9 +69,9 @@ refs:
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/set-up/provision-alerting-resources/http-api-provisioning/#span-idroute-get-alert-rule-exportspan-export-an-alert-rule-in-provisioning-file-format-_routegetalertruleexport_
alerting_http_templates:
- pattern: /docs/grafana/
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/set-up/provision-alerting-resources/http-api-provisioning/#templates
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/set-up/provision-alerting-resources/http-api-provisioning/#notification-template-groups
- pattern: /docs/grafana-cloud/
destination: /docs/grafana-cloud/alerting-and-irm/alerting/set-up/provision-alerting-resources/http-api-provisioning/#templates
destination: /docs/grafana-cloud/alerting-and-irm/alerting/set-up/provision-alerting-resources/http-api-provisioning/#notification-template-groups
alerting_http_contactpoints:
- pattern: /docs/grafana/
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/set-up/provision-alerting-resources/http-api-provisioning/#contact-points
@ -165,15 +165,15 @@ To export contact points from the Grafana UI, complete the following steps.
1. Click **Copy Code** or **Download**.
### Export templates
### Export notification template groups
Grafana currently doesn't offer an Export UI or [Export endpoint](#export-api-endpoints) for notification templates, unlike other Alerting resources presented in this documentation.
Grafana currently doesn't offer an Export UI or [Export endpoint](#export-api-endpoints) for notification template groups, unlike other Alerting resources presented in this documentation.
However, you can export it by manually copying the content template and title directly from the Grafana UI.
However, you can export it by manually copying the content and name of the notification template group from the Grafana UI.
1. Click **Alerts & IRM** -> **Contact points** -> **Notification templates** tab.
1. Find the template you want to export.
1. Copy the content and title.
1. Find the notification template group you want to export.
1. Copy the content and name.
1. Adjust it for the [file provisioning format](ref:alerting_file_provisioning_template) or [Terraform resource](ref:alerting_tf_provisioning_template).
### Export the notification policy tree
@ -217,8 +217,8 @@ You can use the [Alerting HTTP API](ref:alerting_http_provisioning) to return ex
| [Alert rules](ref:alerting_http_alertrules) | /api/v1/provisioning/alert-rules |
| [Contact points](ref:alerting_http_contactpoints) | /api/v1/provisioning/contact-points |
| [Notification policy tree](ref:alerting_http_notificationpolicies) | /api/v1/provisioning/policies |
| [Notification template groups](ref:alerting_http_templates) | /api/v1/provisioning/templates |
| [Mute timings](ref:alerting_http_mutetimings) | /api/v1/provisioning/mute-timings |
| [Templates](ref:alerting_http_templates) | /api/v1/provisioning/templates |
However, note the standard endpoints return a JSON format that is not compatible for provisioning through configuration files or Terraform, except the `/export` endpoints listed below.

View File

@ -46,9 +46,9 @@ refs:
destination: /docs/grafana/<GRAFANA_VERSION>/administration/provisioning/
export_templates:
- pattern: /docs/grafana/
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/set-up/provision-alerting-resources/export-alerting-resources/#export-templates
destination: /docs/grafana/<GRAFANA_VERSION>/alerting/set-up/provision-alerting-resources/export-alerting-resources/#export-notification-template-groups
- pattern: /docs/grafana-cloud/
destination: /docs/grafana-cloud/alerting-and-irm/alerting/set-up/provision-alerting-resources/export-alerting-resources/#export-templates
destination: /docs/grafana-cloud/alerting-and-irm/alerting/set-up/provision-alerting-resources/export-alerting-resources/#export-notification-template-groups
---
# Use configuration files to provision alerting resources
@ -649,19 +649,19 @@ settings:
{{< /collapse >}}
## Import templates
## Import notification template groups
Create or delete templates using provisioning files in your Grafana instance(s).
Create or delete notification template groups using provisioning files in your Grafana instance(s).
1. Find the notification template in Grafana.
1. [Export](ref:export_templates) a template by copying the template content and title.
1. Find the notification template group in Grafana.
1. [Export](ref:export_templates) a template group by copying the template content and name.
1. Copy the contents into a YAML or JSON configuration file and add it to the `provisioning/alerting` directory of the Grafana instance you want to import the alerting resources to.
Example configuration files can be found below.
1. Restart your Grafana instance (or reload the provisioned files using the Admin API).
Here is an example of a configuration file for creating templates.
Here is an example of a configuration file for creating notification template groups.
```yaml
# config file version
@ -671,16 +671,16 @@ apiVersion: 1
templates:
# <int> organization ID, default = 1
- orgId: 1
# <string, required> name of the template, must be unique
# <string, required> name of the template group, must be unique
name: my_first_template
# <string, required> content of the template
# <string, required> content of the template group
template: |
{{ define "my_first_template" }}
Custom notification message
{{ end }}
```
Here is an example of a configuration file for deleting templates.
Here is an example of a configuration file for deleting notification template groups.
```yaml
# config file version
@ -690,7 +690,7 @@ apiVersion: 1
deleteTemplates:
# <int> organization ID, default = 1
- orgId: 1
# <string, required> name of the template, must be unique
# <string, required> name of the template group, must be unique
name: my_first_template
```
@ -863,8 +863,8 @@ In alerting resources, most properties support template variable interpolation,
- Alert rule query model: `groups[].rules[].data.model`
- Mute timings name: `muteTimes[].name`
- Mute timings time intervals: `muteTimes[].time_intervals[]`
- Notification template name: `templates[].name`
- Notification template content: `templates[].template`
- Notification template group name: `templates[].name`
- Notification template group content: `templates[].template`
Note for properties that support interpolation, you may unexpectedly substitute template variables when not intended. To avoid this, you can escape the `$variable` with `$$variable`.

View File

@ -272,19 +272,19 @@ In this section, we'll create Terraform configurations for each alerting resourc
1. Continue to add more Grafana resources or [use the Terraform CLI for provisioning](#provision-grafana-resources-with-terraform).
### Add and enable templates
### Add and enable notification templates
[Notification templates](ref:notification-template) allow customization of alert notifications across multiple contact points.
1. Create or find the notification template you want to import in Grafana. Alternatively, consider writing the resource in code as demonstrated in the example below.
1. Create or find the notification template group you want to import in Grafana. Alternatively, consider writing the resource in code as demonstrated in the example below.
1. [Export](ref:alerting_export) the template as [`grafana_message_template` Terraform resource](https://registry.terraform.io/providers/grafana/grafana/latest/docs/resources/message_template).
1. [Export](ref:alerting_export) the notification template group as [`grafana_message_template` Terraform resource](https://registry.terraform.io/providers/grafana/grafana/latest/docs/resources/message_template).
This example is a simple demo template defined as `custom_email.message`.
This example creates a notification template group named `custom_emails` that defines a `custom_email.message` template.
```terraform
resource "grafana_message_template" "<terraform_message_template_name>" {
name = "custom_email.message"
name = "custom_emails"
template = <<EOT
{{ define "custom_email.message" }}
@ -294,6 +294,8 @@ In this section, we'll create Terraform configurations for each alerting resourc
}
```
This enables contact points to use the notification templates (`{{ define "<NAME>"}}`) within the notification template group.
1. In the previous contact point, enable the template by setting the `email.message` property as follows.
```terraform
@ -384,9 +386,9 @@ resource "grafana_contact_point" "my_contact_point" {
disable_provenance = true
}
resource "grafana_message_template" "my_template" {
name = "My Reusable Template"
template = "{{define \"My Reusable Template\" }}\n template content\n{{ end }}"
resource "grafana_message_template" "custom_notification_template_group" {
name = "custom_notification_template_group"
template = "{{define \"template1\" }}Say{{ end }}{{define \"template2\" }}Hi!{{ end }}"
disable_provenance = true
}

View File

@ -287,6 +287,46 @@ policies:
- weekends
```
### Notification template groups
Template groups enable you to define multiple notification templates (`{{ define "" }}`) within a single group. They can be managed from the Grafana Alerting UI.
| Method | URI | Name | Summary |
| ------ | ------------------------------------ | ----------------------------------------------- | ----------------------------------------------- |
| DELETE | /api/v1/provisioning/templates/:name | [route delete template](#route-delete-template) | Delete a notification template group. |
| GET | /api/v1/provisioning/templates/:name | [route get template](#route-get-template) | Get a notification template group. |
| GET | /api/v1/provisioning/templates | [route get template](#route-get-templates) | Get all notification template groups. |
| PUT | /api/v1/provisioning/templates/:name | [route put template](#route-put-template) | Create or update a notification template group. |
**Example Request for all notification template groups:**
```http
GET /api/v1/provisioning/templates
Accept: application/json
Content-Type: application/json
Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk
```
**Example Response:**
```http
HTTP/1.1 200 OK
Content-Type: application/json
[
{
"name": "custom_email.message",
"template": "{{ define \"custom_email.message\" }}\n Custom alert!\n{{ end }}",
"provenance": "file"
},
{
"name": "custom_email.subject",
"template": "{{ define \"custom_email.subject\" }}\n{{ len .Alerts.Firing }} firing alert(s), {{ len .Alerts.Resolved }} resolved alert(s)\n{{ end }}",
"provenance": "file"
}
]
```
### Mute timings
| Method | URI | Name | Summary |
@ -331,44 +371,6 @@ Content-Type: application/json
]
```
### Templates
| Method | URI | Name | Summary |
| ------ | ------------------------------------ | ----------------------------------------------- | ----------------------------------------- |
| DELETE | /api/v1/provisioning/templates/:name | [route delete template](#route-delete-template) | Delete a template. |
| GET | /api/v1/provisioning/templates/:name | [route get template](#route-get-template) | Get a notification template. |
| GET | /api/v1/provisioning/templates | [route get templates](#route-get-templates) | Get all notification templates. |
| PUT | /api/v1/provisioning/templates/:name | [route put template](#route-put-template) | Create or update a notification template. |
**Example Request for all notification templates:**
```http
GET /api/v1/provisioning/templates
Accept: application/json
Content-Type: application/json
Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk
```
**Example Response:**
```http
HTTP/1.1 200 OK
Content-Type: application/json
[
{
"name": "custom_email.message",
"template": "{{ define \"custom_email.message\" }}\n Custom alert!\n{{ end }}",
"provenance": "file"
},
{
"name": "custom_email.subject",
"template": "{{ define \"custom_email.subject\" }}\n{{ len .Alerts.Firing }} firing alert(s), {{ len .Alerts.Resolved }} resolved alert(s)\n{{ end }}",
"provenance": "file"
}
]
```
### Edit resources in the Grafana UI
By default, you cannot edit API-provisioned alerting resources in Grafana. To enable editing these resources in the Grafana UI, add the `X-Disable-Provenance` header to the following requests in the API:
@ -489,7 +491,7 @@ Status: Conflict
[GenericPublicError](#generic-public-error)
### <span id="route-delete-template"></span> Delete a template. (_RouteDeleteTemplate_)
### <span id="route-delete-template"></span> Delete a notification template group. (_RouteDeleteTemplate_)
```
DELETE /api/v1/provisioning/templates/:name
@ -499,7 +501,7 @@ DELETE /api/v1/provisioning/templates/:name
| Name | Source | Type | Go type | Separator | Required | Default | Description |
| ------- | ------- | ------ | -------- | --------- | :------: | ------- | ------------------------------------------------------------------------------------------------------------- |
| name | `path` | string | `string` | | ✓ | | Template Name |
| name | `path` | string | `string` | | ✓ | | Name of the template group |
| version | `query` | string | `string` | | | | Current version of the resource. Used for optimistic concurrency validation. Keep empty to bypass validation. |
#### All responses
@ -1047,7 +1049,7 @@ Status: Not Found
[NotFound](#not-found)
### <span id="route-get-template"></span> Get a notification template. (_RouteGetTemplate_)
### <span id="route-get-template"></span> Get a notification template group. (_RouteGetTemplate_)
```
GET /api/v1/provisioning/templates/:name
@ -1055,9 +1057,9 @@ GET /api/v1/provisioning/templates/:name
#### Parameters
| Name | Source | Type | Go type | Separator | Required | Default | Description |
| ---- | ------ | ------ | -------- | --------- | :------: | ------- | ------------- |
| name | `path` | string | `string` | | ✓ | | Template Name |
| Name | Source | Type | Go type | Separator | Required | Default | Description |
| ---- | ------ | ------ | -------- | --------- | :------: | ------- | -------------------------- |
| name | `path` | string | `string` | | ✓ | | Name of the template group |
#### All responses
@ -1082,7 +1084,7 @@ Status: OK
###### <span id="route-get-template-404-schema"></span> Schema
### <span id="route-get-templates"></span> Get all notification templates. (_RouteGetTemplates_)
### <span id="route-get-templates"></span> Get all notification template groups. (_RouteGetTemplates_)
```
GET /api/v1/provisioning/templates
@ -1456,7 +1458,7 @@ Status: Bad Request
[ValidationError](#validation-error)
### <span id="route-put-template"></span> Create or update a notification template. (_RoutePutTemplate_)
### <span id="route-put-template"></span> Create or update a notification template group. (_RoutePutTemplate_)
```
PUT /api/v1/provisioning/templates/:name
@ -1468,7 +1470,7 @@ PUT /api/v1/provisioning/templates/:name
| Name | Source | Type | Go type | Separator | Required | Default | Description |
| -------------------------- | -------- | ------------------------------------------------------------- | ------------------------------------ | --------- | :------: | ------- | --------------------------------------------------------- |
| name | `path` | string | `string` | | ✓ | | Template Name |
| name | `path` | string | `string` | | ✓ | | Name of the template group |
| X-Disable-Provenance: true | `header` | string | `string` | | | | Allows editing of provisioned resources in the Grafana UI |
| Body | `body` | [NotificationTemplateContent](#notification-template-content) | `models.NotificationTemplateContent` | | | | |

View File

@ -2,14 +2,14 @@ package definitions
// swagger:route GET /v1/provisioning/templates provisioning stable RouteGetTemplates
//
// Get all notification templates.
// Get all notification template groups.
//
// Responses:
// 200: NotificationTemplates
// swagger:route GET /v1/provisioning/templates/{name} provisioning stable RouteGetTemplate
//
// Get a notification template.
// Get a notification template group.
//
// Responses:
// 200: NotificationTemplate
@ -17,7 +17,7 @@ package definitions
// swagger:route PUT /v1/provisioning/templates/{name} provisioning stable RoutePutTemplate
//
// Updates an existing notification template.
// Updates an existing notification template group.
//
// Consumes:
// - application/json
@ -29,7 +29,7 @@ package definitions
// swagger:route DELETE /v1/provisioning/templates/{name} provisioning stable RouteDeleteTemplate
//
// Delete a template.
// Delete a notification template group.
//
// Responses:
// 204: description: The template was deleted successfully.
@ -37,14 +37,14 @@ package definitions
// swagger:parameters RouteGetTemplate RoutePutTemplate RouteDeleteTemplate
type RouteGetTemplateParam struct {
// Template Name
// Template group name
// in:path
Name string `json:"name"`
}
// swagger:parameters stable RouteDeleteTemplate
type RouteDeleteTemplateParam struct {
// Template name
// Template group name
// in:path
Name string `json:"name"`

View File

@ -43,7 +43,7 @@ jest.mock('@grafana/ui', () => ({
const ui = {
templateForm: byRole('form', { name: 'Template form' }),
form: {
title: byLabelText(/Template name/),
title: byLabelText(/Template group name/),
saveButton: byRole('button', { name: 'Save' }),
},
};
@ -93,7 +93,7 @@ describe('Templates routes', () => {
const form = await ui.templateForm.find();
expect(form).toBeInTheDocument();
expect(within(form).getByRole('textbox', { name: /Template name/ })).toHaveValue('');
expect(within(form).getByRole('textbox', { name: /Template group name/ })).toHaveValue('');
});
it('should pass name validation when editing existing template', async () => {
@ -134,7 +134,7 @@ describe('Templates K8s API', () => {
const form = await ui.templateForm.find();
expect(form).toBeInTheDocument();
expect(within(form).getByRole('textbox', { name: /Template name/ })).toHaveValue('custom-email');
expect(within(form).getByRole('textbox', { name: /Template group name/ })).toHaveValue('custom-email');
expect(within(form).getAllByTestId('code-editor')[0]).toHaveValue(
'{{ define "custom-email" }} Custom email template {{ end }}'
);
@ -146,7 +146,7 @@ describe('Templates K8s API', () => {
const form = await ui.templateForm.find();
expect(form).toBeInTheDocument();
expect(within(form).getByRole('textbox', { name: /Template name/ })).toHaveValue('custom-email (copy)');
expect(within(form).getByRole('textbox', { name: /Template group name/ })).toHaveValue('custom-email (copy)');
expect(within(form).getAllByTestId('code-editor')[0]).toHaveTextContent(
'{{ define "custom-email_NEW" }} Custom email template {{ end }}'
);

View File

@ -11,7 +11,11 @@ const NotificationTemplates = (): JSX.Element => (
<AlertmanagerPageWrapper
navId="receivers"
accessType="notification"
pageNav={{ id: 'templates', text: 'Notification templates', subTitle: 'Create and edit notification templates' }}
pageNav={{
id: 'templates',
text: 'Notification templates',
subTitle: 'Create and edit a group of notification templates',
}}
>
<Routes>
<Route path=":name/edit" element={<EditMessageTemplate />} />

View File

@ -225,7 +225,10 @@ describe('contact points', () => {
// check buttons in Notification Templates
const notificationTemplatesTab = screen.getByRole('tab', { name: 'Notification Templates' });
await user.click(notificationTemplatesTab);
expect(screen.getByRole('link', { name: 'Add notification template' })).toHaveAttribute('aria-disabled', 'true');
expect(screen.getByRole('link', { name: 'Add notification template group' })).toHaveAttribute(
'aria-disabled',
'true'
);
});
it('allows deleting when not disabled', async () => {
@ -423,7 +426,7 @@ describe('contact points', () => {
// check buttons in Notification Templates
const notificationTemplatesTab = screen.getByRole('tab', { name: 'Notification Templates' });
await user.click(notificationTemplatesTab);
expect(screen.queryByRole('link', { name: 'Add notification template' })).not.toBeInTheDocument();
expect(screen.queryByRole('link', { name: 'Add notification template group' })).not.toBeInTheDocument();
});
});

View File

@ -155,7 +155,7 @@ const NotificationTemplatesTab = () => {
href="/alerting/notifications/templates/new"
disabled={!createTemplateAllowed}
>
Add notification template
Add notification template group
</LinkButton>
)}
</Stack>

View File

@ -59,7 +59,7 @@ describe('Edit contact point', () => {
// If this isn't correct, then we haven't set the correct initial state for the radio buttons/tabs
expect(await screen.findByLabelText(/custom template value/i)).toHaveValue('some custom value');
await user.click(screen.getByRole('radio', { name: /select existing template/i }));
await user.click(screen.getByRole('radio', { name: /select notification template/i }));
await clickSelectOption(screen.getByTestId(templatesSelectorTestId), 'slack-template');
expect(await getTemplatePreviewContent()).toHaveTextContent(/some example preview for slack-template/i);

View File

@ -31,7 +31,11 @@ export function TemplateDataDocs() {
return (
<Stack gap={2}>
<TemplateDataTable
caption={<h4 className={styles.header}>Template Data</h4>}
caption={
<h4 className={styles.header}>
Notification template data <span>Available in the context of a notification.</span>{' '}
</h4>
}
dataItems={GlobalTemplateData}
typeRenderer={(type) =>
type === '[]Alert' ? (

View File

@ -5,7 +5,7 @@ export interface TemplateExampleItem {
export const GlobalTemplateDataExamples: TemplateExampleItem[] = [
{
description: 'Default template for notification titles',
description: 'Default templates for notification titles',
example: `{{- /* This is a copy of the "default.title" template. */ -}}
{{- /* Edit the template name and template content as needed. */ -}}
{{ define "default.title.copy" }}
@ -13,7 +13,7 @@ export const GlobalTemplateDataExamples: TemplateExampleItem[] = [
{{ end }}`,
},
{
description: 'Default template for notification messages',
description: 'Default templates for notification messages',
example: `{{- /* This is a copy of the "default.message" template. */ -}}
{{- /* Edit the template name and template content as needed. */ -}}
{{ define "default.message.copy" }}{{ if gt (len .Alerts.Firing) 0 }}**Firing**

View File

@ -20,11 +20,13 @@ import {
LinkButton,
Menu,
Stack,
Text,
useSplitter,
useStyles2,
} from '@grafana/ui';
import { useAppNotification } from 'app/core/copy/appNotification';
import { useCleanup } from 'app/core/hooks/useCleanup';
import { t, Trans } from 'app/core/internationalization';
import { ActiveTab as ContactPointsActiveTabs } from 'app/features/alerting/unified/components/contact-points/ContactPoints';
import { TestTemplateAlert } from 'app/plugins/datasource/alertmanager/types';
@ -169,7 +171,7 @@ export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props)
const actionButtons = (
<Stack>
<Button onClick={() => formRef.current?.requestSubmit()} variant="primary" size="sm" disabled={isSubmitting}>
Save
<Trans i18nKey="common.save">Save</Trans>
</Button>
<LinkButton
disabled={isSubmitting}
@ -179,7 +181,7 @@ export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props)
variant="secondary"
size="sm"
>
Cancel
<Trans i18nKey="common.cancel">Cancel</Trans>
</LinkButton>
</Stack>
);
@ -205,7 +207,7 @@ export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props)
{/* name field for the template */}
<FieldSet disabled={isProvisioned} className={styles.fieldset}>
<InlineField
label="Template name"
label="Template group name"
error={errors?.title?.message}
invalid={!!errors.title?.message}
required
@ -216,7 +218,7 @@ export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props)
required: { value: true, message: 'Required.' },
validate: { titleIsUnique },
})}
placeholder="Give your template a title"
placeholder="Give your template group a name"
width={42}
autoFocus={true}
id="new-template-name"
@ -234,7 +236,7 @@ export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props)
<div className={cx(styles.flexColumn, styles.containerWithBorderAndRadius, styles.minEditorSize)}>
<div>
<EditorColumnHeader
label="Template"
label="Template group"
actions={
<>
{/* examples dropdown only available for Grafana Alertmanager */}
@ -260,7 +262,7 @@ export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props)
}
>
<Button variant="secondary" size="sm" icon="angle-down">
Add example
<Trans i18nKey="alerting.templates.editor.add-example">Add example</Trans>
</Button>
</Dropdown>
)}
@ -271,7 +273,7 @@ export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props)
variant="secondary"
onClick={toggleCheatsheetOpened}
>
Reference
<Trans i18nKey="common.help">Help</Trans>
</Button>
</>
}
@ -349,34 +351,43 @@ export const TemplateForm = ({ originalTemplate, prefill, alertmanager }: Props)
function TemplatingBasics() {
const styles = useStyles2(getStyles);
return (
<Alert title="How to" severity="info">
<Stack direction="row">
<div>
Grafana uses Go templating language to create notification messages.
<br />
To find out more about templating please visit our documentation.
</div>
<div>
<LinkButton
href="https://grafana.com/docs/grafana/latest/alerting/manage-notifications/template-notifications/"
target="_blank"
icon="external-link-alt"
variant="secondary"
>
Templating documentation
</LinkButton>
</div>
</Stack>
const intro = t(
'alerting.templates.help.intro',
`Notification templates use Go templating language to create notification messages.
<div className={styles.snippets}>
For auto-completion of common templating code, type the following keywords in the content editor:
<div className={styles.code}>
{Object.values(snippets)
.map((s) => s.label)
.join(', ')}
</div>
</div>
In Grafana, a template group can define multiple notification templates using {{ define "<NAME>" }}.
These templates can then be used in contact points and within other notification templates by calling {{ template "<NAME>" }}.
For detailed information about notification templates, refer to our documentation.`
);
return (
<Alert title="" severity="info">
<Stack direction="column" gap={2}>
<Stack direction="row">
<div style={{ whiteSpace: 'pre' }}>{intro}</div>
<div>
<LinkButton
href="https://grafana.com/docs/grafana/latest/alerting/manage-notifications/template-notifications/"
target="_blank"
icon="external-link-alt"
variant="secondary"
>
<Trans i18nKey="alerting.templates.editor.goto-docs">Notification templates documentation</Trans>
</LinkButton>
</div>
</Stack>
<Text variant="bodySmall">
<Trans i18nKey="alerting.templates.editor.auto-complete">
For auto-completion of common templating code, type the following keywords in the content editor:
</Trans>
<div className={styles.code}>
{Object.values(snippets)
.map((s) => s.label)
.join(', ')}
</div>
</Text>
</Stack>
</Alert>
);
}
@ -460,10 +471,6 @@ export const getStyles = (theme: GrafanaTheme2) => {
display: 'none',
},
}),
snippets: css({
marginTop: theme.spacing(2),
fontSize: theme.typography.bodySmall.fontSize,
}),
code: css({
color: theme.colors.text.secondary,
fontWeight: theme.typography.fontWeightBold,

View File

@ -62,7 +62,7 @@ export const TemplatesTable = ({ alertManagerName, templates }: Props) => {
<thead>
<tr>
<th></th>
<th>Template</th>
<th>Template group</th>
<Authorize
actions={[
AlertmanagerAction.CreateNotificationTemplate,
@ -95,8 +95,8 @@ export const TemplatesTable = ({ alertManagerName, templates }: Props) => {
{!!templateToDelete && (
<ConfirmModal
isOpen={true}
title="Delete template"
body={`Are you sure you want to delete template "${templateToDelete.title}"?`}
title="Delete template group"
body={`Are you sure you want to delete template group "${templateToDelete.title}"?`}
confirmText="Yes, delete"
onConfirm={onDeleteTemplate}
onDismiss={() => setTemplateToDelete(undefined)}
@ -161,7 +161,7 @@ function TemplateRow({ notificationTemplate, idx, alertManagerName, onDeleteClic
<Authorize actions={[AlertmanagerAction.UpdateNotificationTemplate]}>
<ActionIcon
to={makeAMLink(`/alerting/notifications/templates/${encodeURIComponent(uid)}/edit`, alertManagerName)}
tooltip="edit template"
tooltip="Edit template group"
icon="pen"
/>
</Authorize>
@ -172,7 +172,7 @@ function TemplateRow({ notificationTemplate, idx, alertManagerName, onDeleteClic
`/alerting/notifications/templates/${encodeURIComponent(uid)}/duplicate`,
alertManagerName
)}
tooltip="Copy template"
tooltip="Copy template group"
icon="copy"
/>
</Authorize>
@ -180,7 +180,7 @@ function TemplateRow({ notificationTemplate, idx, alertManagerName, onDeleteClic
<Authorize actions={[AlertmanagerAction.DeleteNotificationTemplate]}>
<ActionIcon
onClick={() => onDeleteClick(notificationTemplate)}
tooltip="delete template"
tooltip="Delete template group"
icon="trash-alt"
/>
</Authorize>
@ -191,7 +191,7 @@ function TemplateRow({ notificationTemplate, idx, alertManagerName, onDeleteClic
<tr className={idx % 2 === 0 ? tableStyles.evenRow : undefined}>
<td></td>
<td colSpan={2}>
<DetailsField label="Description" horizontal={true}>
<DetailsField label="" horizontal={true}>
<TemplateEditor
width={'auto'}
height={'auto'}

View File

@ -54,7 +54,7 @@ export function TemplatesPicker({ onSelect, option, valueInForm }: TemplatesPick
<>
<Button
icon="edit"
tooltip={`Edit ${option.label.toLowerCase()} using existing templates.`}
tooltip={`Edit ${option.label.toLowerCase()} using existing notification templates.`}
onClick={onClick}
variant="secondary"
size="sm"
@ -129,10 +129,10 @@ function TemplateSelector({ onSelect, onClose, option, valueInForm }: TemplateSe
const templateOptions: Array<SelectableValue<TemplateFieldOption>> = [
{
label: 'Select existing template',
ariaLabel: 'Select existing template',
label: 'Select notification template',
ariaLabel: 'Select notification template',
value: 'Existing',
description: `Select a single template and preview it, or copy it to paste it in the custom tab. ${templateOption === 'Existing' ? 'Clicking Save will save your changes to the selected template.' : ''}`,
description: `Select an existing notification template and preview it, or copy it to paste it in the custom tab. ${templateOption === 'Existing' ? 'Clicking Save saves your changes to the selected template.' : ''}`,
},
{
label: `Enter custom ${option.label.toLowerCase()}`,
@ -195,8 +195,8 @@ function TemplateSelector({ onSelect, onClose, option, valueInForm }: TemplateSe
<Stack direction="row" gap={1} alignItems="center">
<Select<Template>
data-testid="existing-templates-selector"
placeholder="Choose template"
aria-label="Choose template"
placeholder="Choose notification template"
aria-label="Choose notification template"
onChange={(value: SelectableValue<Template>, _) => {
setTemplate(value);
}}
@ -205,7 +205,7 @@ function TemplateSelector({ onSelect, onClose, option, valueInForm }: TemplateSe
defaultValue={defaultTemplateValue}
/>
<IconButton
tooltip="Copy selected template to clipboard. You can use it in the custom tab."
tooltip="Copy selected notification template to clipboard. You can use it in the custom tab."
onClick={() =>
copyToClipboard(getUseTemplateText(template?.value?.name ?? defaultTemplateValue?.value?.name ?? ''))
}

View File

@ -490,6 +490,14 @@
"alertCondition": "Alert condition"
},
"templates": {
"editor": {
"add-example": "Add example",
"auto-complete": "For auto-completion of common templating code, type the following keywords in the content editor:",
"goto-docs": "Notification templates documentation"
},
"help": {
"intro": "Notification templates use Go templating language to create notification messages.\n\nIn Grafana, a template group can define multiple notification templates using {{ define \"<NAME>\" }}.\nThese templates can then be used in contact points and within other notification templates by calling {{ template \"<NAME>\" }}.\nFor detailed information about notification templates, refer to our documentation."
},
"misconfigured-badge-text": "Misconfigured",
"misconfigured-warning": "This template is misconfigured.",
"misconfigured-warning-details": "Templates must be defined in both the <1></1> and <4></4> sections of your alertmanager configuration."
@ -665,6 +673,7 @@
"close": "Close",
"collapse": "Collapse",
"edit": "Edit",
"help": "Help",
"locale": {
"default": "Default"
},

View File

@ -490,6 +490,14 @@
"alertCondition": "Åľęřŧ čőʼnđįŧįőʼn"
},
"templates": {
"editor": {
"add-example": "Åđđ ęχämpľę",
"auto-complete": "Főř äūŧő-čőmpľęŧįőʼn őƒ čőmmőʼn ŧęmpľäŧįʼnģ čőđę, ŧypę ŧĥę ƒőľľőŵįʼnģ ĸęyŵőřđş įʼn ŧĥę čőʼnŧęʼnŧ ęđįŧőř:",
"goto-docs": "Ńőŧįƒįčäŧįőʼn ŧęmpľäŧęş đőčūmęʼnŧäŧįőʼn"
},
"help": {
"intro": "Ńőŧįƒįčäŧįőʼn ŧęmpľäŧęş ūşę Ğő ŧęmpľäŧįʼnģ ľäʼnģūäģę ŧő čřęäŧę ʼnőŧįƒįčäŧįőʼn męşşäģęş.\n\nĨʼn Ğřäƒäʼnä, ä ŧęmpľäŧę ģřőūp čäʼn đęƒįʼnę mūľŧįpľę ʼnőŧįƒįčäŧįőʼn ŧęmpľäŧęş ūşįʼnģ {{ define \"<NAME>\" }}.\nŦĥęşę ŧęmpľäŧęş čäʼn ŧĥęʼn þę ūşęđ įʼn čőʼnŧäčŧ pőįʼnŧş äʼnđ ŵįŧĥįʼn őŧĥęř ʼnőŧįƒįčäŧįőʼn ŧęmpľäŧęş þy čäľľįʼnģ {{ template \"<NAME>\" }}.\nFőř đęŧäįľęđ įʼnƒőřmäŧįőʼn äþőūŧ ʼnőŧįƒįčäŧįőʼn ŧęmpľäŧęş, řęƒęř ŧő őūř đőčūmęʼnŧäŧįőʼn."
},
"misconfigured-badge-text": "Mįşčőʼnƒįģūřęđ",
"misconfigured-warning": "Ŧĥįş ŧęmpľäŧę įş mįşčőʼnƒįģūřęđ.",
"misconfigured-warning-details": "Ŧęmpľäŧęş mūşŧ þę đęƒįʼnęđ įʼn þőŧĥ ŧĥę <1></1> äʼnđ <4></4> şęčŧįőʼnş őƒ yőūř äľęřŧmäʼnäģęř čőʼnƒįģūřäŧįőʼn."
@ -665,6 +673,7 @@
"close": "Cľőşę",
"collapse": "Cőľľäpşę",
"edit": "Ēđįŧ",
"help": "Ħęľp",
"locale": {
"default": "Đęƒäūľŧ"
},