diff --git a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx index 993c1060fad..799b89f67cf 100644 --- a/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/DetailsStep.tsx @@ -7,6 +7,42 @@ import AnnotationsField from './AnnotationsField'; import { GroupAndNamespaceFields } from './GroupAndNamespaceFields'; import { RuleEditorSection } from './RuleEditorSection'; +function getDescription(ruleType: RuleFormType | undefined) { + if (ruleType === RuleFormType.cloudRecording) { + return 'Select the Namespace and Group for your recording rule.'; + } + const docsLink = + 'https://grafana.com/docs/grafana/latest/alerting/fundamentals/annotation-label/variables-label-annotation/#the-values-variable'; + const LinkToDocs = () => ( + + Click{' '} + + here{' '} + + for documentation on how to template annotations and labels. + + ); + if (ruleType === RuleFormType.grafana) { + return ( + + {' '} + Write a summary to help you better manage your alerts. + + + ); + } + if (ruleType === RuleFormType.cloudAlerting) { + return ( + + {' '} + Select the Namespace and evaluation group for your alert. Write a summary to help you better manage your alerts.{' '} + + + ); + } + return ''; +} + export function DetailsStep() { const { watch } = useFormContext(); @@ -18,11 +54,7 @@ export function DetailsStep() { {(ruleFormType === RuleFormType.cloudRecording || ruleFormType === RuleFormType.cloudAlerting) && dataSourceName && } diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx index 8fe6d96113d..46fcd00641d 100644 --- a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/css'; -import React from 'react'; +import React, { ReactElement } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { FieldSet, useStyles2 } from '@grafana/ui'; @@ -7,7 +7,7 @@ import { FieldSet, useStyles2 } from '@grafana/ui'; export interface RuleEditorSectionProps { title: string; stepNo: number; - description?: string; + description?: string | ReactElement; } export const RuleEditorSection = ({