Alerting UX: copy changes in Groups view (#90173)

* UI and help copy changes in Alerting Groups view

* Alerting Groups view: change subtitle

* Rename Alerting page title: `Groups` to `Active notifications`

* Update pseudo-local

* update betterer

* Extract translation through `make i18n-extract`

.betterer.results

@@ -1664,8 +1664,7 @@ exports[`better eslint`] = {
     "public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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. Wrap text with <Trans />", "2"]
     ],
     "public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -1683,11 +1682,15 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/features/alerting/unified/components/alert-groups/AlertStateFilter.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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"]
     ],
     "public/app/features/alerting/unified/components/alert-groups/GroupBy.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "2"]
     ],
     "public/app/features/alerting/unified/components/alert-groups/MatcherFilter.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],

pkg/services/navtree/navtreeimpl/navtree.go

@@ -405,7 +405,7 @@ func (s *ServiceImpl) buildAlertNavLinks(c *contextmodel.ReqContext) *navtree.Na
 	}
 
 	if hasAccess(ac.EvalAny(ac.EvalPermission(ac.ActionAlertingInstanceRead), ac.EvalPermission(ac.ActionAlertingInstancesExternalRead))) {
-		alertChildNavs = append(alertChildNavs, &navtree.NavLink{Text: "Alert groups", SubTitle: "See grouped alerts from an Alertmanager instance", Id: "groups", Url: s.cfg.AppSubURL + "/alerting/groups", Icon: "layer-group"})
+		alertChildNavs = append(alertChildNavs, &navtree.NavLink{Text: "Alert groups", SubTitle: "See grouped alerts with active notifications", Id: "groups", Url: s.cfg.AppSubURL + "/alerting/groups", Icon: "layer-group"})
 	}
 
 	if s.features.IsEnabled(c.Req.Context(), featuremgmt.FlagAlertingCentralAlertHistory) {

public/app/core/utils/navBarItem-translations.ts

@@ -75,7 +75,7 @@ export function getNavTitle(navId: string | undefined) {
     case 'silences':
       return t('nav.alerting-silences.title', 'Silences');
     case 'groups':
-      return t('nav.alerting-groups.title', 'Groups');
+      return t('nav.alerting-groups.title', 'Active notifications');
     case 'alerting-admin':
       return t('nav.alerting-admin.title', 'Settings');
     case 'cfg':
@@ -234,7 +234,7 @@ export function getNavSubTitle(navId: string | undefined) {
     case 'silences':
       return t('nav.alerting-silences.subtitle', 'Stop notifications from one or more alerting rules');
     case 'groups':
-      return t('nav.alerting-groups.subtitle', 'See grouped alerts from an Alertmanager instance');
+      return t('nav.alerting-groups.subtitle', 'See grouped alerts with active notifications');
     case 'datasources':
       return t('nav.datasources.subtitle', 'Add and configure data sources');
     case 'correlations':

public/app/features/alerting/unified/AlertGroups.test.tsx

@@ -50,7 +50,7 @@ const ui = {
   row: byTestId('row'),
   collapseToggle: byTestId(selectors.components.AlertRules.toggle),
   silenceButton: byText('Silence'),
-  sourceButton: byText('See source'),
+  sourceButton: byText('See alert rule'),
   matcherInput: byTestId('search-query-input'),
   groupByContainer: byTestId('group-by-container'),
   groupByInput: byRole('combobox', { name: /group by label keys/i }),

public/app/features/alerting/unified/components/alert-groups/AlertDetails.tsx

@@ -59,7 +59,7 @@ export const AlertDetails = ({ alert, alertManagerSourceName }: AmNotificationsA
         )}
         {isSeeSourceButtonEnabled && alert.generatorURL && (
           <LinkButton className={styles.button} href={alert.generatorURL} icon={'chart-line'} size={'sm'}>
-            See source
+            {isGrafanaSource ? 'See alert rule' : 'See source'}
           </LinkButton>
         )}
       </div>

public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx

@@ -27,7 +27,7 @@ export const AlertGroupAlertsTable = ({ alerts, alertManagerSourceName }: Props)
     (): AlertGroupAlertsTableColumnProps[] => [
       {
         id: 'state',
-        label: 'State',
+        label: 'Notification state',
         // eslint-disable-next-line react/display-name
         renderCell: ({ data: alert }) => (
           <>
@@ -45,7 +45,7 @@ export const AlertGroupAlertsTable = ({ alerts, alertManagerSourceName }: Props)
       },
       {
         id: 'labels',
-        label: 'Labels',
+        label: 'Instance labels',
         // eslint-disable-next-line react/display-name
         renderCell: ({ data: { labels } }) => <AlertLabels labels={labels} size="sm" />,
         size: 1,

public/app/features/alerting/unified/components/alert-groups/AlertStateFilter.tsx

@@ -1,5 +1,5 @@
 import { SelectableValue } from '@grafana/data';
-import { RadioButtonGroup, Label } from '@grafana/ui';
+import { RadioButtonGroup, Label, Tooltip, Icon } from '@grafana/ui';
 import { AlertState } from 'app/plugins/datasource/alertmanager/types';
 
 interface Props {
@@ -17,7 +17,25 @@ export const AlertStateFilter = ({ onStateFilterChange, stateFilter }: Props) =>
 
   return (
     <div>
-      <Label>State</Label>
+      <Label>
+        <span>Notification state&nbsp;</span>
+        <Tooltip
+          content={
+            <div>
+              <ul>
+                <li>
+                  Active: The alert notification has been handled. The alert is still firing and continues to be
+                  managed.
+                </li>
+                <li>Suppressed: The alert has been silenced.</li>
+                <li>Unprocessed: The alert is received but its notification has not been processed yet.</li>
+              </ul>
+            </div>
+          }
+        >
+          <Icon name="info-circle" size="sm" />
+        </Tooltip>
+      </Label>
       <RadioButtonGroup options={alertStateOptions} value={stateFilter} onChange={onStateFilterChange} />
     </div>
   );

public/app/features/alerting/unified/components/alert-groups/GroupBy.tsx

@@ -1,7 +1,7 @@
 import { uniq } from 'lodash';
 
 import { SelectableValue } from '@grafana/data';
-import { Icon, Label, MultiSelect } from '@grafana/ui';
+import { Icon, Label, MultiSelect, Tooltip } from '@grafana/ui';
 import { AlertmanagerGroup } from 'app/plugins/datasource/alertmanager/types';
 
 import { isPrivateLabelKey } from '../../utils/labels';
@@ -22,7 +22,19 @@ export const GroupBy = ({ groups, groupBy, onGroupingChange }: Props) => {
 
   return (
     <div data-testid={'group-by-container'}>
-      <Label>Custom group by</Label>
+      <Label>
+        <span>Custom group by&nbsp;</span>
+        <Tooltip
+          content={
+            <div>
+              Group notifications using a different combination of labels. This option can help validate the grouping
+              settings of your notification policies.
+            </div>
+          }
+        >
+          <Icon name="info-circle" size="sm" />
+        </Tooltip>
+      </Label>
       <MultiSelect
         aria-label={'group by label keys'}
         value={groupBy}

public/app/features/connections/__mocks__/store.navIndex.mock.ts

@@ -145,7 +145,7 @@ export const navIndex: NavIndex = {
       {
         id: 'groups',
         text: 'Alert groups',
-        subTitle: 'See grouped alerts from an Alertmanager instance',
+        subTitle: 'See grouped alerts with active notifications',
         icon: 'layer-group',
         url: '/alerting/groups',
       },
@@ -210,7 +210,7 @@ export const navIndex: NavIndex = {
   groups: {
     id: 'groups',
     text: 'Alert groups',
-    subTitle: 'See grouped alerts from an Alertmanager instance',
+    subTitle: 'See grouped alerts with active notifications',
     icon: 'layer-group',
     url: '/alerting/groups',
   },

public/locales/en-US/grafana.json

@@ -1094,8 +1094,8 @@
       "title": "Notification channels"
     },
     "alerting-groups": {
-      "subtitle": "See grouped alerts from an Alertmanager instance",
-      "title": "Groups"
+      "subtitle": "See grouped alerts with active notifications",
+      "title": "Active notifications"
     },
     "alerting-home": {
       "title": "Home"

public/locales/pseudo-LOCALE/grafana.json

@@ -1094,8 +1094,8 @@
       "title": "Ńőŧįƒįčäŧįőʼn čĥäʼnʼnęľş"
     },
     "alerting-groups": {
-      "subtitle": "Ŝęę ģřőūpęđ äľęřŧş ƒřőm äʼn Åľęřŧmäʼnäģęř įʼnşŧäʼnčę",
-      "title": "Ğřőūpş"
+      "subtitle": "Ŝęę ģřőūpęđ äľęřŧş ŵįŧĥ äčŧįvę ʼnőŧįƒįčäŧįőʼnş",
+      "title": "Åčŧįvę ʼnőŧįƒįčäŧįőʼnş"
     },
     "alerting-home": {
       "title": "Ħőmę"