diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx index 17ee45d7b1c..b4c1f24c57f 100644 --- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx @@ -49,7 +49,7 @@ const AlertRuleNameInput = () => { const ruleFormType = watch('type'); return ( - + + diff --git a/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx b/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx index 7f1fc0600bd..37e3534a33b 100644 --- a/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/NeedHelpInfo.tsx @@ -6,9 +6,9 @@ import { Stack } from '@grafana/experimental'; import { Icon, Toggletip, useStyles2 } from '@grafana/ui'; interface NeedHelpInfoProps { - contentText: string; - externalLink: string; - linkText: string; + contentText: string | JSX.Element; + externalLink?: string; + linkText?: string; title: string; } export function NeedHelpInfo({ contentText, externalLink, linkText, title }: NeedHelpInfoProps) { @@ -23,11 +23,13 @@ export function NeedHelpInfo({ contentText, externalLink, linkText, title }: Nee } footer={ - -
- {linkText} -
-
+ externalLink ? ( + +
+ {linkText} +
+
+ ) : undefined } closeButton={true} placement="bottom-start" 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 f0e2d508593..0b0c6780189 100644 --- a/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx @@ -3,7 +3,8 @@ import React from 'react'; import { useFormContext } from 'react-hook-form'; import { GrafanaTheme2 } from '@grafana/data'; -import { Card, Link, useStyles2 } from '@grafana/ui'; +import { Stack } from '@grafana/experimental'; +import { Card, Icon, Link, useStyles2 } from '@grafana/ui'; import { RuleFormType, RuleFormValues } from '../../types/rule-form'; import { GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource'; @@ -37,15 +38,45 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => { const NotificationsStepDescription = () => { return (
-
- Grafana handles the notifications for alerts by assigning labels to alerts. These labels connect alerts to - contact points and silence alert instances that have matching labels. -
+
Add custom labels to change the way your notifications are routed.
+ + <> + Firing alert rule instances are routed to notification policies based on matching labels. All alert + rules and instances, irrespective of their labels, match the default notification policy. If there are + no nested policies, or no nested policies match the labels in the alert rule or alert instance, then + the default notification policy is the matching policy. + + +
+ Read about notification routing. +
+
+
+ + <> + Custom labels change the way your notifications are routed. First, add labels to your alert rule and + then connect them to your notification policy by adding label matchers. + + +
+ Read about Labels and annotations. +
+
+
+ + } title="Notification routing" />
@@ -55,7 +86,7 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => { return ( {
{!hasLabelsDefined && type !== RuleFormType.cloudRecording && ( - Root route – default for all alerts + Default policy - Without custom labels, your alert will be routed through the root route. To view and edit the root - route, go to notification policies or contact your admin in case - you are using non-Grafana alert management. + All alert instances are handled by the default policy if no other matching policies are found. To view + and edit the default policy, go to Notification Policies +  or contact your Admin if you are using provisioning. )} @@ -130,4 +161,7 @@ const getStyles = (theme: GrafanaTheme2) => ({ gap: ${theme.spacing(1)}; )}; `, + infoLink: css` + color: ${theme.colors.text.link}; + `, }); diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx index dbb5206afab..96dc4baa754 100644 --- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx @@ -436,7 +436,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P /> {/* Expression Queries */}
Expressions
-
Manipulate data returned from queries with math and other operations
+
Manipulate data returned from queries with math and other operations.