From 51e27200a6270d1d60c36d16114118153c4156df Mon Sep 17 00:00:00 2001
From: Pepe Cano <825430+ppcano@users.noreply.github.com>
Date: Fri, 24 May 2024 15:30:12 +0200
Subject: [PATCH] Alerting: add `NeedHelpInfo` for `Configure No data and error
 handling` (#88145)

---
 .../rule-editor/GrafanaEvaluationBehavior.tsx | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
index 75bd429495f..40251eec288 100644
--- a/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/GrafanaEvaluationBehavior.tsx
@@ -204,6 +204,25 @@ function ForInput({ evaluateEvery }: { evaluateEvery: string }) {
   );
 }
 
+function NeedHelpInfoForConfigureNoDataError() {
+  const docsLink =
+    'https://grafana.com/docs/grafana/latest/alerting/alerting-rules/create-grafana-managed-rule/#configure-no-data-and-error-handling';
+
+  return (
+    <Stack direction="row" gap={0.5} alignItems="center">
+      <Text variant="bodySmall" color="secondary">
+        Define the alert behavior when the evaluation fails or the query returns no data.
+      </Text>
+      <NeedHelpInfo
+        contentText="These settings can help mitigate temporary data source issues, preventing alerts from unintentionally firing due to lack of data, errors, or timeouts."
+        externalLink={docsLink}
+        linkText={`Read more about this option`}
+        title="Configure no data and error handling"
+      />
+    </Stack>
+  );
+}
+
 function getDescription() {
   const docsLink = 'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/rule-evaluation/';
 
@@ -283,6 +302,7 @@ export function GrafanaEvaluationBehavior({
       />
       {showErrorHandling && (
         <>
+          <NeedHelpInfoForConfigureNoDataError />
           <Field htmlFor="no-data-state-input" label="Alert state if no data or all values are null">
             <Controller
               render={({ field: { onChange, ref, ...field } }) => (