diff --git a/.betterer.results b/.betterer.results index ab718639324..00598e6a077 100644 --- a/.betterer.results +++ b/.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"] diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx index 62b27ad8e4f..f85d126d7c8 100644 --- a/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx +++ b/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(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 (
@@ -31,7 +35,14 @@ export const AlertGroup = ({ alertManagerSourceName, group }: Props) => { data-testid="alert-group-collapse-toggle" /> {Object.keys(group.labels).length ? ( - + + + {receiverInGroup && ( + + Delivered to {group.receiver.name} + + )} + ) : ( No grouping )} @@ -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, + }), });