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>
This commit is contained in:
Pepe Cano 2024-12-24 15:23:29 +01:00 committed by GitHub
parent d9f9614e1c
commit 287f3a75eb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 33 additions and 5 deletions

View File

@ -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"],

View File

@ -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}

View File

@ -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"
},

View File

@ -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"
},