Alerting: Update texts in alert rule form (#71831)

* Update texts in alert rule form

* Update default policy text
This commit is contained in:
Sonia Aguilar 2023-07-18 16:58:45 +02:00 committed by GitHub
parent ba470fb34d
commit 4a59022fe8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 62 additions and 26 deletions

View File

@ -49,7 +49,7 @@ const AlertRuleNameInput = () => {
const ruleFormType = watch('type');
return (
<RuleEditorSection stepNo={1} title="Set an alert rule name">
<RuleEditorSection stepNo={1} title="Set alert rule name">
<Field
className={styles.formInput}
label="Rule name"

View File

@ -218,7 +218,7 @@ export function GrafanaEvaluationBehavior({
return (
// TODO remove "and alert condition" for recording rules
<RuleEditorSection stepNo={3} title="Set evaluation behavior" description={getDescription()}>
<RuleEditorSection stepNo={3} title="Set alert evaluation behavior" description={getDescription()}>
<Stack direction="column" justify-content="flex-start" align-items="flex-start">
<FolderGroupAndEvaluationInterval setEvaluateEvery={setEvaluateEvery} evaluateEvery={evaluateEvery} />
<ForInput evaluateEvery={evaluateEvery} />

View File

@ -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
</Stack>
}
footer={
<a href={externalLink} target="_blank" rel="noreferrer">
<div className={styles.infoLink}>
{linkText} <Icon name="external-link-alt" />
</div>
</a>
externalLink ? (
<a href={externalLink} target="_blank" rel="noreferrer">
<div className={styles.infoLink}>
{linkText} <Icon name="external-link-alt" />
</div>
</a>
) : undefined
}
closeButton={true}
placement="bottom-start"

View File

@ -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 (
<div className={styles.stepDescription}>
<div>
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.
</div>
<div>Add custom labels to change the way your notifications are routed.</div>
<NeedHelpInfo
contentText={`Firing alert rule instances are routed to notification policies based on matching labels. Notification are sent out to the contact point specified in the notification policy.`}
externalLink={`https://grafana.com/docs/grafana/latest/alerting/fundamentals/notification-policies/notifications/`}
linkText={`Read about notification routing`}
contentText={
<Stack gap={1}>
<Stack direction="row" gap={0}>
<>
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.
</>
<a
href={`https://grafana.com/docs/grafana/latest/alerting/fundamentals/notification-policies/notifications/`}
target="_blank"
rel="noreferrer"
>
<div className={styles.infoLink}>
Read about notification routing. <Icon name="external-link-alt" />
</div>
</a>
</Stack>
<Stack direction="row" gap={0}>
<>
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.
</>
<a
href={`https://grafana.com/docs/grafana/latest/alerting/fundamentals/annotation-label/`}
target="_blank"
rel="noreferrer"
>
<div className={styles.infoLink}>
Read about Labels and annotations. <Icon name="external-link-alt" />
</div>
</a>
</Stack>
</Stack>
}
title="Notification routing"
/>
</div>
@ -55,7 +86,7 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
return (
<RuleEditorSection
stepNo={type === RuleFormType.cloudRecording ? 4 : 5}
title={type === RuleFormType.cloudRecording ? 'Labels' : 'Notifications'}
title={type === RuleFormType.cloudRecording ? 'Labels' : 'Configure notifications'}
description={
type === RuleFormType.cloudRecording ? (
'Add labels to help you better manage your recording rules'
@ -68,11 +99,11 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
<div style={{ display: 'flex', flexDirection: 'column' }}>
{!hasLabelsDefined && type !== RuleFormType.cloudRecording && (
<Card className={styles.card}>
<Card.Heading>Root route default for all alerts</Card.Heading>
<Card.Heading>Default policy</Card.Heading>
<Card.Description>
Without custom labels, your alert will be routed through the root route. To view and edit the root
route, go to <Link href="/alerting/routes">notification policies</Link> 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 <Link href="/alerting/routes">Notification Policies</Link>
&nbsp;or contact your Admin if you are using provisioning.
</Card.Description>
</Card>
)}
@ -130,4 +161,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
gap: ${theme.spacing(1)};
)};
`,
infoLink: css`
color: ${theme.colors.text.link};
`,
});

View File

@ -436,7 +436,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
/>
{/* Expression Queries */}
<H5>Expressions</H5>
<div className={styles.mutedText}>Manipulate data returned from queries with math and other operations</div>
<div className={styles.mutedText}>Manipulate data returned from queries with math and other operations.</div>
<ExpressionsEditor
queries={queries}
panelData={queryPreviewData}

View File

@ -108,14 +108,14 @@ const getContentText = (ruleFormType: RuleFormType, isEditing: boolean, dataSour
return {
contentText:
'Grafana-managed alert rules allow you to create alerts that can act on data from any of our supported data sources, including having multiple data sources in the same rule. You can also add expressions to transform your data and set alert conditions. Using images in alert notifications is also supported.',
title: `This alert rule will be managed by Grafana. The selected data source is configured to support rule creation. You can switch to data source-managed alert rule.`,
title: `This alert rule will be managed by Grafana. The selected data source is configured to support rule creation.`,
};
}
} else {
// it can be only grafana rule
return {
contentText: `Grafana-managed alert rules allow you to create alerts that can act on data from any of our supported data sources, including having multiple data sources in the same rule. You can also add expressions to transform your data and set alert conditions. Using images in alert notifications is also supported.`,
title: `Based on the selected data sources this alert rule will be managed by Grafana.`,
title: `Based on the data sources selected, this alert rule is managed by Grafana.`,
};
}
};