Alerting: Show receiver in groups view to avoid duplication in the list (#77109)

.betterer.results

@@ -1963,16 +1963,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "1"],
       [0, 0, 0, "Styles should be written using objects.", "2"]
     ],
-    "public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"]
-    ],
     "public/app/features/alerting/unified/components/alert-groups/AlertGroupAlertsTable.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]

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

@@ -2,11 +2,14 @@ import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
 import { useStyles2 } from '@grafana/ui';
 import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types';
 
 import { AlertLabels } from '../AlertLabels';
 import { CollapseToggle } from '../CollapseToggle';
+import { MetaText } from '../MetaText';
+import { Strong } from '../Strong';
 
 import { AlertGroupAlertsTable } from './AlertGroupAlertsTable';
 import { AlertGroupHeader } from './AlertGroupHeader';
@@ -19,7 +22,8 @@ interface Props {
 export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
   const [isCollapsed, setIsCollapsed] = useState<boolean>(true);
   const styles = useStyles2(getStyles);
-
+  // When group is grouped, receiver.name is 'NONE' as it can contain multiple receivers
+  const receiverInGroup = group.receiver.name !== 'NONE';
   return (
     <div className={styles.wrapper}>
       <div className={styles.header}>
@@ -31,7 +35,14 @@ export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
             data-testid="alert-group-collapse-toggle"
           />
           {Object.keys(group.labels).length ? (
-            <AlertLabels labels={group.labels} size="sm" />
+            <Stack direction="row" alignItems="center">
+              <AlertLabels labels={group.labels} size="sm" />
+              {receiverInGroup && (
+                <MetaText icon="at">
+                  Delivered to <Strong>{group.receiver.name}</Strong>
+                </MetaText>
+              )}
+            </Stack>
           ) : (
             <span>No grouping</span>
           )}
@@ -44,37 +55,34 @@ export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
-    & + & {
-      margin-top: ${theme.spacing(2)};
-    }
-  `,
-  header: css`
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: ${theme.spacing(1, 1, 1, 0)};
-    background-color: ${theme.colors.background.secondary};
-    width: 100%;
-  `,
-  group: css`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  `,
-  summary: css``,
-  spanElement: css`
-    margin-left: ${theme.spacing(0.5)};
-  `,
-  [AlertState.Active]: css`
-    color: ${theme.colors.error.main};
-  `,
-  [AlertState.Suppressed]: css`
-    color: ${theme.colors.primary.main};
-  `,
-  [AlertState.Unprocessed]: css`
-    color: ${theme.colors.secondary.main};
-  `,
+  wrapper: css({
+    '& + &': {
+      marginTop: theme.spacing(2),
+    },
+  }),
+  header: css({
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: `${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)} 0`,
+    backgroundColor: theme.colors.background.secondary,
+    width: '100%',
+  }),
+  group: css({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  }),
+  summary: css({}),
+  [AlertState.Active]: css({
+    color: theme.colors.error.main,
+  }),
+  [AlertState.Suppressed]: css({
+    color: theme.colors.primary.main,
+  }),
+  [AlertState.Unprocessed]: css({
+    color: theme.colors.secondary.main,
+  }),
 });