diff --git a/.betterer.results b/.betterer.results index 75f00fb1529..95e276339e3 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1918,7 +1918,7 @@ exports[`better eslint`] = { ], "public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx:5381": [ [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] + [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "1"] ], "public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx:5381": [ [0, 0, 0, "No untranslated strings in text props. Wrap text with or use t()", "0"], diff --git a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx index 7d1d429b312..e36e91febb5 100644 --- a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx @@ -270,22 +270,16 @@ function NeedHelpInfoForContactpoint() { <> Select a contact point to notify all recipients in it.
+ Muting, grouping, and timings options allow you to customize how notifications are sent.
- Notifications for firing alert instances are grouped based on folder and alert rule name.
- The wait time before sending the first notification for a new group of alerts is 30 seconds. -
- The waiting time before sending a notification about changes in the alert group after the first notification - has been sent is 5 minutes. -
- The wait time before resending a notification that has already been sent successfully is 4 hours. -
- Grouping and wait time values are defined in your default notification policy. + Alternatively, toggle the Advanced options button to route notifications using notification policies + for greater flexibility. } externalLink="https://grafana.com/docs/grafana/latest/alerting/fundamentals/notifications/" linkText="Read more about notifications" - title="Notify contact points" + title="Notify by selecting a contact point" /> ); } diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx index de3cb8bfcc8..3d86b3e33cb 100644 --- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx @@ -3,12 +3,14 @@ import { useEffect, useState } from 'react'; import { useFormContext } from 'react-hook-form'; import { GrafanaTheme2 } from '@grafana/data'; -import { CollapsableSection, Stack, useStyles2 } from '@grafana/ui'; +import { CollapsableSection, Stack, Text, useStyles2 } from '@grafana/ui'; +import { Trans, t } from 'app/core/internationalization'; import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form'; import { AlertManagerDataSource } from 'app/features/alerting/unified/utils/datasource'; import { useContactPointsWithStatus } from '../../../contact-points/useContactPoints'; import { ContactPointWithMetadata } from '../../../contact-points/utils'; +import { NeedHelpInfo } from '../../NeedHelpInfo'; import { ContactPointDetails } from './contactPoint/ContactPointDetails'; import { ContactPointSelector } from './contactPoint/ContactPointSelector'; @@ -57,7 +59,7 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo
- Alertmanager: + Alertmanager: Alert manager logo {alertManagerName}
@@ -74,8 +76,37 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo label="Muting, grouping and timings (optional)" isOpen={hasRouteSettings} className={styles.collapsableSection} + contentClassName={styles.collapsableSectionContent} > + + + + Configure how notifications for this alert rule are sent. + + + +

+ {t( + 'alerting.rule-form.simple-routing.optional-settings.help-info1', + 'Mute timings allows you to temporarily pause notifications for a specific recurring period, such as a regular maintenance window or weekends.' + )} +

+ {t( + 'alerting.rule-form.simple-routing.optional-settings.help-info2', + 'Grouping and timing options combine multiple alerts within a specific period into a single notification, allowing you to customize default options.' + )} + + } + /> +
@@ -110,6 +141,9 @@ const getStyles = (theme: GrafanaTheme2) => ({ width: 'fit-content', fontSize: theme.typography.body.fontSize, }), + collapsableSectionContent: css({ + padding: '0', + }), routingSection: css({ display: 'flex', flexDirection: 'column', diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx index 86608e72112..0a7810a37a4 100644 --- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/MuteTimingFields.tsx @@ -1,6 +1,8 @@ +import { css } from '@emotion/css'; import { Controller, useFormContext } from 'react-hook-form'; -import { Field } from '@grafana/ui'; +import { GrafanaTheme2 } from '@grafana/data'; +import { Field, useStyles2 } from '@grafana/ui'; import MuteTimingsSelector from 'app/features/alerting/unified/components/alertmanager-entities/MuteTimingsSelector'; import { BaseAlertmanagerArgs } from 'app/features/alerting/unified/types/hooks'; import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form'; @@ -8,6 +10,7 @@ import { mapMultiSelectValueToStrings } from 'app/features/alerting/unified/util /** Provides a form field for use in simplified routing, for selecting appropriate mute timings */ export function MuteTimingFields({ alertmanager }: BaseAlertmanagerArgs) { + const styles = useStyles2(getStyles); const { control, formState: { errors }, @@ -18,6 +21,7 @@ export function MuteTimingFields({ alertmanager }: BaseAlertmanagerArgs) { label="Mute timings" data-testid="am-mute-timing-select" description="Select a mute timing to define when not to send notifications for this alert rule" + className={styles.muteTimingField} invalid={!!errors.contactPoints?.[alertmanager]?.muteTimeIntervals} > ); } +const getStyles = (theme: GrafanaTheme2) => ({ + muteTimingField: css({ + marginTop: theme.spacing(1), + }), +}); diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 0f8c5c3fac9..48e03c5a9d6 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -730,6 +730,14 @@ "pause": { "label": "Pause evaluation" }, + "simple-routing": { + "alertmanager-label": "Alertmanager:", + "optional-settings": { + "description": "Configure how notifications for this alert rule are sent.", + "help-info1": "Mute timings allows you to temporarily pause notifications for a specific recurring period, such as a regular maintenance window or weekends.", + "help-info2": "Grouping and timing options combine multiple alerts within a specific period into a single notification, allowing you to customize default options." + } + }, "threshold": { "recovery": { "stop-alerting-above": "Stop alerting when above",