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`
2025-03-17 11:28:29 +01:00
parent 91116de790
commit cacdf00067
4 changed files with 33 additions and 3 deletions
@@ -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>
@@ -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"
@@ -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"
@@ -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": {