Alerting: Add custom grouping for alert groups (#37378)

* Group alertmangaer alerts by custom grouping

* Filter am groups

* Style filter components

* Style filter bar and add clear functionality

* rename components to alert group

* use query params for group filters

* filter style improvements

* add tests for group by

* Add grouping banner to better highlight groupings

* clean up hook logic
This commit is contained in:
Nathan Rodman
2021-08-19 09:22:52 -07:00
committed by GitHub
parent 6ed60c0bec
commit df791ae2af
22 changed files with 547 additions and 185 deletions

View File

@@ -5,7 +5,7 @@ import { useStyles2, LinkButton } from '@grafana/ui';
import { css } from '@emotion/css';
import { AlertLabels } from 'app/features/alerting/unified/components/AlertLabels';
import { AmNotificationsGroupHeader } from 'app/features/alerting/unified/components/amnotifications/AmNotificationsGroupHeader';
import { AlertGroupHeader } from 'app/features/alerting/unified/components/alert-groups/AlertGroupHeader';
import { CollapseToggle } from 'app/features/alerting/unified/components/CollapseToggle';
import { getNotificationsTextColors } from 'app/features/alerting/unified/styles/notifications';
import { makeAMLink } from 'app/features/alerting/unified/utils/misc';
@@ -33,7 +33,7 @@ export const AlertGroup = ({ alertManagerSourceName, group, expandAll }: Props)
)}
<div className={styles.row}>
<CollapseToggle isCollapsed={!showAlerts} onToggle={() => setShowAlerts(!showAlerts)} />{' '}
<AmNotificationsGroupHeader group={group} />
<AlertGroupHeader group={group} />
</div>
{showAlerts && (
<div className={styles.alerts}>