From cacdf00067cd3ada5d03d4917ebbca61b9cd1ac9 Mon Sep 17 00:00:00 2001
From: Pepe Cano <825430+ppcano@users.noreply.github.com>
Date: Mon, 17 Mar 2025 11:28:29 +0100
Subject: [PATCH] alerting(ui): add external links to read more about labels
 and annotations (#102187)

* alerting(ui): add external link to read about labels

* alerting(ui): add external link to read about annotations

* fix i18n settings

* fix i18n

* fix i18n error with `make 18n-extract`
---
 .../rule-editor/AnnotationsStep.tsx           | 27 ++++++++++++++++---
 .../rule-editor/labels/LabelsField.tsx        |  2 ++
 .../rule-editor/labels/LabelsFieldInForm.tsx  |  2 ++
 public/locales/en-US/grafana.json             |  5 ++++
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
index aabe2aed1bd..7148c0e17e7 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
@@ -98,9 +98,30 @@ const AnnotationsStep = () => {
           <Trans i18nKey="alerting.annotations.description">Add more context to your alert notifications.</Trans>
         </Text>
         <NeedHelpInfo
-          contentText={`Annotations add metadata to provide more information on the alert in your alert notification messages.
-          For example, add a Summary annotation to tell you which value caused the alert to fire or which server it happened on.
-          Annotations can contain a combination of text and template code.`}
+          externalLink={
+            'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/annotation-label/#annotations'
+          }
+          linkText={`Read about annotations`}
+          contentText={
+            <>
+              <p>
+                {t(
+                  'alerting.rule-form.annotations.description1',
+                  'Annotations add additional information to alerts, helping alert responders identify and address potential issues.'
+                )}
+              </p>
+              <p>
+                {t(
+                  'alerting.rule-form.annotations.description2',
+                  'For example, add a Summary annotation to tell you which value caused the alert to fire or which server it happened on.'
+                )}
+              </p>
+              {t(
+                'alerting.rule-form.annotations.description3',
+                'Annotations can contain a combination of text and template code, which is used to include data from queries.'
+              )}
+            </>
+          }
           title="Annotations"
         />
       </Stack>
diff --git a/public/app/features/alerting/unified/components/rule-editor/labels/LabelsField.tsx b/public/app/features/alerting/unified/components/rule-editor/labels/LabelsField.tsx
index b3d3dd81927..f3919ed0b09 100644
--- a/public/app/features/alerting/unified/components/rule-editor/labels/LabelsField.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/labels/LabelsField.tsx
@@ -404,6 +404,8 @@ function LabelsField() {
             {getLabelText(type)}
           </Text>
           <NeedHelpInfo
+            externalLink={'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/annotation-label/'}
+            linkText={`Read about labels`}
             contentText="The dropdown only displays labels that you have previously used for alerts.
             Select a label from the options below or type in a new one."
             title="Labels"
diff --git a/public/app/features/alerting/unified/components/rule-editor/labels/LabelsFieldInForm.tsx b/public/app/features/alerting/unified/components/rule-editor/labels/LabelsFieldInForm.tsx
index 99c8618b6ef..437578d117c 100644
--- a/public/app/features/alerting/unified/components/rule-editor/labels/LabelsFieldInForm.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/labels/LabelsFieldInForm.tsx
@@ -37,6 +37,8 @@ export function LabelsFieldInForm({ onEditClick }: LabelsFieldInFormProps) {
             {text}
           </Text>
           <NeedHelpInfo
+            externalLink={'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/annotation-label/'}
+            linkText={`Read about labels`}
             contentText="The dropdown only displays labels that you have previously used for alerts.
               Select a label from the options below or type in a new one."
             title="Labels"
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 693b3e5f120..1493e3f65ce 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -512,6 +512,11 @@
       "label-target-data-source": "Target data source"
     },
     "rule-form": {
+      "annotations": {
+        "description1": "Annotations add additional information to alerts, helping alert responders identify and address potential issues.",
+        "description2": "For example, add a Summary annotation to tell you which value caused the alert to fire or which server it happened on.",
+        "description3": "Annotations can contain a combination of text and template code, which is used to include data from queries."
+      },
       "evaluation": {
         "evaluation-group-and-interval": "Evaluation group and interval",
         "group": {