From 287f3a75eb63e053b1ac5c93a3494c72696b7791 Mon Sep 17 00:00:00 2001
From: Pepe Cano <825430+ppcano@users.noreply.github.com>
Date: Tue, 24 Dec 2024 15:23:29 +0100
Subject: [PATCH] Alerting: add help tooltip for the Preview silences UI
 (#98028)

* Alerting UI: add tooltip for the Preview silences UI

* fix typo

* Update translations for silences preview

---------

Co-authored-by: Tom Ratcliffe <tom.ratcliffe@grafana.com>
---
 .betterer.results                             |  5 ++--
 .../silences/SilencedInstancesPreview.tsx     | 23 +++++++++++++++++--
 public/locales/en-US/grafana.json             |  5 ++++
 public/locales/pseudo-LOCALE/grafana.json     |  5 ++++
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 9dcac9eed07..0995d55b8cb 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -2554,9 +2554,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
+      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "3"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
     ],
     "public/app/features/alerting/unified/components/silences/SilencesEditor.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
diff --git a/public/app/features/alerting/unified/components/silences/SilencedInstancesPreview.tsx b/public/app/features/alerting/unified/components/silences/SilencedInstancesPreview.tsx
index ad058d6e943..678ae5cfe2f 100644
--- a/public/app/features/alerting/unified/components/silences/SilencedInstancesPreview.tsx
+++ b/public/app/features/alerting/unified/components/silences/SilencedInstancesPreview.tsx
@@ -3,7 +3,8 @@ import { useState } from 'react';
 import { useDebounce, useDeepCompareEffect } from 'react-use';
 
 import { GrafanaTheme2, dateTime } from '@grafana/data';
-import { Alert, Badge, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { Alert, Badge, Icon, LoadingPlaceholder, Tooltip, useStyles2 } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 import { MatcherFieldValue } from 'app/features/alerting/unified/types/silence-form';
 import { matcherFieldToMatcher } from 'app/features/alerting/unified/utils/alertmanager';
 import { MATCHER_ALERT_RULE_UID } from 'app/features/alerting/unified/utils/constants';
@@ -79,7 +80,25 @@ export const SilencedInstancesPreview = ({ amSourceName, matchers: inputMatchers
   return (
     <div>
       <h4 className={styles.title}>
-        Affected alert rule instances
+        <Trans i18nKey="alerting.silences.affected-instances">Affected alert rule instances</Trans>
+        <Tooltip
+          content={
+            <div>
+              <Trans i18nKey="alerting.silences.preview-affected-instances">
+                Preview the alert instances affected by this silence.
+              </Trans>
+              <br />
+              <Trans i18nKey="alerting.silences.only-firing-instances">
+                Only alert instances in the firing state are displayed.
+              </Trans>
+            </div>
+          }
+        >
+          <span>
+            &nbsp;
+            <Icon name="info-circle" size="sm" />
+          </span>
+        </Tooltip>
         {tableItemAlerts.length > 0 ? (
           <Badge className={styles.badge} color="blue" text={tableItemAlerts.length} />
         ) : null}
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index b189cfd388b..95355002715 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -532,6 +532,11 @@
       },
       "save-query": "Save current search"
     },
+    "silences": {
+      "affected-instances": "Affected alert rule instances",
+      "only-firing-instances": "Only alert instances in the firing state are displayed.",
+      "preview-affected-instances": "Preview the alert instances affected by this silence."
+    },
     "simpleCondition": {
       "alertCondition": "Alert condition"
     },
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index 49fc10fb067..bfa13c24af1 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -532,6 +532,11 @@
       },
       "save-query": "Ŝävę čūřřęʼnŧ şęäřčĥ"
     },
+    "silences": {
+      "affected-instances": "Ńƒęčŧęđ äľęřŧ řūľę įʼnşŧäʼnčęş",
+      "only-firing-instances": "Øʼnľy äľęřŧ įʼnşŧäʼnčęş įʼn ŧĥę ƒįřįʼnģ şŧäŧę äřę đįşpľäyęđ.",
+      "preview-affected-instances": "Přęvįęŵ ŧĥę äľęřŧ įʼnşŧäʼnčęş äƒƒęčŧęđ þy ŧĥįş şįľęʼnčę."
+    },
     "simpleCondition": {
       "alertCondition": "Åľęřŧ čőʼnđįŧįőʼn"
     },