mirror of https://github.com/grafana/grafana
Alerting: Add alertmanager notifications tab (#35759)
* Add alertmanager notifications tab * Link to silences page from am alert * Include summary for alertmanager group * Fix colors for am state * Add horizontal dividing line * PR feedback * Add basic unit test for alert notificaitons * Rename Notificaitons component file * Polling interval to groups * Add alertmanager notifications tab * Link to silences page from am alert * Include summary for alertmanager group * PR feedback * Add basic unit test for alert notificaitons * Rename Notificaitons component file * Alerting: make alertmanager notifications view responsive (#36067) * refac DynamicTableWithGuidelines * more responsiveness fixes * Add more to tests * Add loading and alert state for notifications Co-authored-by: Domas <domas.lapinskas@grafana.com>pull/36536/head^2
Nathan Rodman
4 years ago
committed by
GitHub
parent
d9e500b654
commit
a0dac9c6d9
@ -0,0 +1,84 @@ |
||||
import React from 'react'; |
||||
import { locationService, setDataSourceSrv } from '@grafana/runtime'; |
||||
import { render, waitFor } from '@testing-library/react'; |
||||
import { Provider } from 'react-redux'; |
||||
import { Router } from 'react-router-dom'; |
||||
import { fetchAlertGroups } from './api/alertmanager'; |
||||
import { byTestId, byText } from 'testing-library-selector'; |
||||
import { configureStore } from 'app/store/configureStore'; |
||||
import { typeAsJestMock } from 'test/helpers/typeAsJestMock'; |
||||
import AmNotifications from './AmNotifications'; |
||||
import { mockAlertGroup, mockAlertmanagerAlert, mockDataSource, MockDataSourceSrv } from './mocks'; |
||||
import { DataSourceType } from './utils/datasource'; |
||||
import userEvent from '@testing-library/user-event'; |
||||
|
||||
jest.mock('./api/alertmanager'); |
||||
|
||||
const mocks = { |
||||
api: { |
||||
fetchAlertGroups: typeAsJestMock(fetchAlertGroups), |
||||
}, |
||||
}; |
||||
|
||||
const renderAmNotifications = () => { |
||||
const store = configureStore(); |
||||
|
||||
return render( |
||||
<Provider store={store}> |
||||
<Router history={locationService.getHistory()}> |
||||
<AmNotifications /> |
||||
</Router> |
||||
</Provider> |
||||
); |
||||
}; |
||||
|
||||
const dataSources = { |
||||
am: mockDataSource({ |
||||
name: 'Alert Manager', |
||||
type: DataSourceType.Alertmanager, |
||||
}), |
||||
}; |
||||
|
||||
const ui = { |
||||
group: byTestId('notifications-group'), |
||||
groupCollapseToggle: byTestId('notifications-group-collapse-toggle'), |
||||
notificationsTable: byTestId('notifications-table'), |
||||
row: byTestId('row'), |
||||
collapseToggle: byTestId('collapse-toggle'), |
||||
silenceButton: byText('Silence'), |
||||
sourceButton: byText('See source'), |
||||
}; |
||||
|
||||
describe('AmNotifications', () => { |
||||
beforeAll(() => { |
||||
mocks.api.fetchAlertGroups.mockImplementation(() => { |
||||
return Promise.resolve([ |
||||
mockAlertGroup({ labels: {}, alerts: [mockAlertmanagerAlert({ labels: { foo: 'bar' } })] }), |
||||
mockAlertGroup(), |
||||
]); |
||||
}); |
||||
}); |
||||
|
||||
beforeEach(() => { |
||||
setDataSourceSrv(new MockDataSourceSrv(dataSources)); |
||||
}); |
||||
|
||||
it('loads and shows groups', async () => { |
||||
await renderAmNotifications(); |
||||
|
||||
await waitFor(() => expect(mocks.api.fetchAlertGroups).toHaveBeenCalled()); |
||||
|
||||
const groups = await ui.group.getAll(); |
||||
|
||||
expect(groups).toHaveLength(2); |
||||
expect(groups[0]).toHaveTextContent('No grouping'); |
||||
expect(groups[1]).toHaveTextContent('severity=warningregion=US-Central'); |
||||
|
||||
userEvent.click(ui.groupCollapseToggle.get(groups[0])); |
||||
expect(ui.notificationsTable.get()).toBeDefined(); |
||||
|
||||
userEvent.click(ui.collapseToggle.get(ui.notificationsTable.get())); |
||||
expect(ui.silenceButton.get(ui.notificationsTable.get())).toBeDefined(); |
||||
expect(ui.sourceButton.get(ui.notificationsTable.get())).toBeDefined(); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,62 @@ |
||||
import { AlertmanagerGroup } from 'app/plugins/datasource/alertmanager/types'; |
||||
import React, { useEffect } from 'react'; |
||||
|
||||
import { useDispatch } from 'react-redux'; |
||||
|
||||
import { AlertingPageWrapper } from './components/AlertingPageWrapper'; |
||||
import { AlertManagerPicker } from './components/AlertManagerPicker'; |
||||
import { useAlertManagerSourceName } from './hooks/useAlertManagerSourceName'; |
||||
import { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector'; |
||||
import { fetchAlertGroupsAction } from './state/actions'; |
||||
import { initialAsyncRequestState } from './utils/redux'; |
||||
|
||||
import { AmNotificationsGroup } from './components/amnotifications/AmNotificationsGroup'; |
||||
import { NOTIFICATIONS_POLL_INTERVAL_MS } from './utils/constants'; |
||||
import { Alert, LoadingPlaceholder } from '../../../../../packages/grafana-ui/src'; |
||||
|
||||
const AlertManagerNotifications = () => { |
||||
const [alertManagerSourceName, setAlertManagerSourceName] = useAlertManagerSourceName(); |
||||
const dispatch = useDispatch(); |
||||
|
||||
const alertGroups = useUnifiedAlertingSelector((state) => state.amAlertGroups) || initialAsyncRequestState; |
||||
const loading = alertGroups[alertManagerSourceName || '']?.loading; |
||||
const error = alertGroups[alertManagerSourceName || '']?.error; |
||||
const results: AlertmanagerGroup[] = alertGroups[alertManagerSourceName || '']?.result || []; |
||||
|
||||
useEffect(() => { |
||||
function fetchNotifications() { |
||||
if (alertManagerSourceName) { |
||||
dispatch(fetchAlertGroupsAction(alertManagerSourceName)); |
||||
} |
||||
} |
||||
fetchNotifications(); |
||||
const interval = setInterval(() => fetchNotifications, NOTIFICATIONS_POLL_INTERVAL_MS); |
||||
return () => { |
||||
clearInterval(interval); |
||||
}; |
||||
}, [dispatch, alertManagerSourceName]); |
||||
|
||||
return ( |
||||
<AlertingPageWrapper pageId="notifications"> |
||||
<AlertManagerPicker current={alertManagerSourceName} onChange={setAlertManagerSourceName} /> |
||||
{loading && <LoadingPlaceholder text="Loading notifications" />} |
||||
{error && !loading && ( |
||||
<Alert title={'Error loading notifications'} severity={'error'}> |
||||
{error.message || 'Unknown error'} |
||||
</Alert> |
||||
)} |
||||
{results && |
||||
results.map((group, index) => { |
||||
return ( |
||||
<AmNotificationsGroup |
||||
alertManagerSourceName={alertManagerSourceName || ''} |
||||
key={`${JSON.stringify(group.labels)}-group-${index}`} |
||||
group={group} |
||||
/> |
||||
); |
||||
})} |
||||
</AlertingPageWrapper> |
||||
); |
||||
}; |
||||
|
||||
export default AlertManagerNotifications; |
||||
@ -0,0 +1,76 @@ |
||||
import { css, cx } from '@emotion/css'; |
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
import React from 'react'; |
||||
import { DynamicTable, DynamicTableProps } from './DynamicTable'; |
||||
|
||||
export type DynamicTableWithGuidelinesProps<T> = Omit<DynamicTableProps<T>, 'renderPrefixHeader, renderPrefixCell'>; |
||||
|
||||
// DynamicTable, but renders visual guidelines on the left, for larger screen widths
|
||||
export const DynamicTableWithGuidelines = <T extends object>({ |
||||
renderExpandedContent, |
||||
...props |
||||
}: DynamicTableWithGuidelinesProps<T>) => { |
||||
const styles = useStyles2(getStyles); |
||||
return ( |
||||
<DynamicTable |
||||
renderExpandedContent={ |
||||
renderExpandedContent |
||||
? (item, index, items) => ( |
||||
<> |
||||
{!(index === items.length - 1) && <div className={cx(styles.contentGuideline, styles.guideline)} />} |
||||
{renderExpandedContent(item, index, items)} |
||||
</> |
||||
) |
||||
: undefined |
||||
} |
||||
renderPrefixHeader={() => ( |
||||
<div className={styles.relative}> |
||||
<div className={cx(styles.headerGuideline, styles.guideline)} /> |
||||
</div> |
||||
)} |
||||
renderPrefixCell={(_, index, items) => ( |
||||
<div className={styles.relative}> |
||||
<div className={cx(styles.topGuideline, styles.guideline)} /> |
||||
{!(index === items.length - 1) && <div className={cx(styles.bottomGuideline, styles.guideline)} />} |
||||
</div> |
||||
)} |
||||
{...props} |
||||
/> |
||||
); |
||||
}; |
||||
|
||||
export const getStyles = (theme: GrafanaTheme2) => ({ |
||||
relative: css` |
||||
position: relative; |
||||
height: 100%; |
||||
`,
|
||||
guideline: css` |
||||
left: -19px; |
||||
border-left: 1px solid ${theme.colors.border.medium}; |
||||
position: absolute; |
||||
|
||||
${theme.breakpoints.down('md')} { |
||||
display: none; |
||||
} |
||||
`,
|
||||
topGuideline: css` |
||||
width: 18px; |
||||
border-bottom: 1px solid ${theme.colors.border.medium}; |
||||
top: 0; |
||||
bottom: 50%; |
||||
`,
|
||||
bottomGuideline: css` |
||||
top: 50%; |
||||
bottom: 0; |
||||
`,
|
||||
contentGuideline: css` |
||||
top: 0; |
||||
bottom: 0; |
||||
left: -49px !important; |
||||
`,
|
||||
headerGuideline: css` |
||||
top: -25px; |
||||
bottom: 0; |
||||
`,
|
||||
}); |
||||
@ -0,0 +1,92 @@ |
||||
import { css } from '@emotion/css'; |
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { LinkButton, useStyles2 } from '@grafana/ui'; |
||||
import { AlertmanagerAlert, AlertState } from 'app/plugins/datasource/alertmanager/types'; |
||||
import { Labels } from 'app/types/unified-alerting-dto'; |
||||
import React, { FC } from 'react'; |
||||
import { makeAMLink } from '../../utils/misc'; |
||||
import { AnnotationDetailsField } from '../AnnotationDetailsField'; |
||||
|
||||
interface AmNotificationsAlertDetailsProps { |
||||
alertManagerSourceName: string; |
||||
alert: AlertmanagerAlert; |
||||
} |
||||
|
||||
export const AmNotificationsAlertDetails: FC<AmNotificationsAlertDetailsProps> = ({ |
||||
alert, |
||||
alertManagerSourceName, |
||||
}) => { |
||||
const styles = useStyles2(getStyles); |
||||
return ( |
||||
<> |
||||
<div className={styles.actionsRow}> |
||||
{alert.status.state === AlertState.Suppressed && ( |
||||
<LinkButton |
||||
href={`${makeAMLink( |
||||
'/alerting/silences', |
||||
alertManagerSourceName |
||||
)}&silenceIds=${alert.status.silencedBy.join(',')}`}
|
||||
className={styles.button} |
||||
icon={'bell'} |
||||
size={'sm'} |
||||
> |
||||
Manage silences |
||||
</LinkButton> |
||||
)} |
||||
{alert.status.state === AlertState.Active && ( |
||||
<LinkButton |
||||
href={`${makeAMLink('/alerting/silence/new', alertManagerSourceName)}&${getMatcherQueryParams( |
||||
alert.labels |
||||
)}`}
|
||||
className={styles.button} |
||||
icon={'bell-slash'} |
||||
size={'sm'} |
||||
> |
||||
Silence |
||||
</LinkButton> |
||||
)} |
||||
{alert.generatorURL && ( |
||||
<LinkButton className={styles.button} href={alert.generatorURL} icon={'chart-line'} size={'sm'}> |
||||
See source |
||||
</LinkButton> |
||||
)} |
||||
</div> |
||||
{Object.entries(alert.annotations).map(([annotationKey, annotationValue]) => ( |
||||
<AnnotationDetailsField key={annotationKey} annotationKey={annotationKey} value={annotationValue} /> |
||||
))} |
||||
<div className={styles.receivers}> |
||||
Receivers:{' '} |
||||
{alert.receivers |
||||
.map(({ name }) => name) |
||||
.filter((name) => !!name) |
||||
.join(', ')} |
||||
</div> |
||||
</> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
button: css` |
||||
& + & { |
||||
margin-left: ${theme.spacing(1)}; |
||||
} |
||||
`,
|
||||
actionsRow: css` |
||||
padding: ${theme.spacing(2, 0)} !important; |
||||
border-bottom: 1px solid ${theme.colors.border.medium}; |
||||
`,
|
||||
receivers: css` |
||||
padding: ${theme.spacing(1, 0)}; |
||||
`,
|
||||
}); |
||||
|
||||
const getMatcherQueryParams = (labels: Labels) => { |
||||
return `matchers=${encodeURIComponent( |
||||
Object.entries(labels) |
||||
.filter(([labelKey]) => !(labelKey.startsWith('__') && labelKey.endsWith('__'))) |
||||
.map(([labelKey, labelValue]) => { |
||||
return `${labelKey}=${labelValue}`; |
||||
}) |
||||
.join(',') |
||||
)}`;
|
||||
}; |
||||
@ -0,0 +1,91 @@ |
||||
import { AlertmanagerAlert } from 'app/plugins/datasource/alertmanager/types'; |
||||
import React, { useMemo } from 'react'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
import { GrafanaTheme2, intervalToAbbreviatedDurationString } from '@grafana/data'; |
||||
import { css } from '@emotion/css'; |
||||
import { DynamicTableColumnProps, DynamicTableItemProps } from '../DynamicTable'; |
||||
import { AmAlertStateTag } from '../silences/AmAlertStateTag'; |
||||
import { AlertLabels } from '../AlertLabels'; |
||||
import { DynamicTableWithGuidelines } from '../DynamicTableWithGuidelines'; |
||||
import { AmNotificationsAlertDetails } from './AmNotificationsAlertDetails'; |
||||
|
||||
interface Props { |
||||
alerts: AlertmanagerAlert[]; |
||||
alertManagerSourceName: string; |
||||
} |
||||
|
||||
type AmNotificationsAlertsTableColumnProps = DynamicTableColumnProps<AlertmanagerAlert>; |
||||
type AmNotificationsAlertsTableItemProps = DynamicTableItemProps<AlertmanagerAlert>; |
||||
|
||||
export const AmNotificationsAlertsTable = ({ alerts, alertManagerSourceName }: Props) => { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
const columns = useMemo( |
||||
(): AmNotificationsAlertsTableColumnProps[] => [ |
||||
{ |
||||
id: 'state', |
||||
label: 'State', |
||||
// eslint-disable-next-line react/display-name
|
||||
renderCell: ({ data: alert }) => ( |
||||
<> |
||||
<AmAlertStateTag state={alert.status.state} /> |
||||
<span className={styles.duration}> |
||||
for{' '} |
||||
{intervalToAbbreviatedDurationString({ |
||||
start: new Date(alert.startsAt), |
||||
end: new Date(alert.endsAt), |
||||
})} |
||||
</span> |
||||
</> |
||||
), |
||||
size: '190px', |
||||
}, |
||||
{ |
||||
id: 'labels', |
||||
label: 'Labels', |
||||
// eslint-disable-next-line react/display-name
|
||||
renderCell: ({ data: { labels } }) => <AlertLabels className={styles.labels} labels={labels} />, |
||||
size: 1, |
||||
}, |
||||
], |
||||
[styles] |
||||
); |
||||
|
||||
const items = useMemo( |
||||
(): AmNotificationsAlertsTableItemProps[] => |
||||
alerts.map((alert) => ({ |
||||
id: alert.fingerprint, |
||||
data: alert, |
||||
})), |
||||
[alerts] |
||||
); |
||||
|
||||
return ( |
||||
<div className={styles.tableWrapper} data-testid="notifications-table"> |
||||
<DynamicTableWithGuidelines |
||||
cols={columns} |
||||
items={items} |
||||
isExpandable={true} |
||||
renderExpandedContent={({ data: alert }) => ( |
||||
<AmNotificationsAlertDetails alert={alert} alertManagerSourceName={alertManagerSourceName} /> |
||||
)} |
||||
/> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
tableWrapper: css` |
||||
margin-top: ${theme.spacing(3)}; |
||||
${theme.breakpoints.up('md')} { |
||||
margin-left: ${theme.spacing(4.5)}; |
||||
} |
||||
`,
|
||||
duration: css` |
||||
margin-left: ${theme.spacing(1)}; |
||||
font-size: ${theme.typography.bodySmall.fontSize}; |
||||
`,
|
||||
labels: css` |
||||
padding-bottom: 0; |
||||
`,
|
||||
}); |
||||
@ -0,0 +1,82 @@ |
||||
import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types'; |
||||
import React, { useState } from 'react'; |
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
import { css } from '@emotion/css'; |
||||
import { AlertLabels } from '../AlertLabels'; |
||||
import { AmNotificationsAlertsTable } from './AmNotificationsAlertsTable'; |
||||
import { CollapseToggle } from '../CollapseToggle'; |
||||
import { AmNotificationsGroupHeader } from './AmNotificationsGroupHeader'; |
||||
|
||||
interface Props { |
||||
group: AlertmanagerGroup; |
||||
alertManagerSourceName: string; |
||||
} |
||||
|
||||
export const AmNotificationsGroup = ({ alertManagerSourceName, group }: Props) => { |
||||
const [isCollapsed, setIsCollapsed] = useState<boolean>(true); |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
return ( |
||||
<div className={styles.wrapper}> |
||||
<div className={styles.header}> |
||||
<div className={styles.group} data-testid="notifications-group"> |
||||
<CollapseToggle |
||||
isCollapsed={isCollapsed} |
||||
onToggle={() => setIsCollapsed(!isCollapsed)} |
||||
data-testid="notifications-group-collapse-toggle" |
||||
/> |
||||
{Object.keys(group.labels).length ? ( |
||||
<AlertLabels className={styles.headerLabels} labels={group.labels} /> |
||||
) : ( |
||||
<span>No grouping</span> |
||||
)} |
||||
</div> |
||||
<AmNotificationsGroupHeader group={group} /> |
||||
</div> |
||||
{!isCollapsed && ( |
||||
<AmNotificationsAlertsTable alertManagerSourceName={alertManagerSourceName} alerts={group.alerts} /> |
||||
)} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
wrapper: css` |
||||
& + & { |
||||
margin-top: ${theme.spacing(2)}; |
||||
} |
||||
`,
|
||||
headerLabels: css` |
||||
padding-bottom: 0 !important; |
||||
margin-bottom: -${theme.spacing(0.5)}; |
||||
`,
|
||||
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}; |
||||
`,
|
||||
}); |
||||
@ -0,0 +1,49 @@ |
||||
import { AlertmanagerGroup, AlertState } from 'app/plugins/datasource/alertmanager/types'; |
||||
import React from 'react'; |
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
import { css } from '@emotion/css'; |
||||
|
||||
interface Props { |
||||
group: AlertmanagerGroup; |
||||
} |
||||
|
||||
export const AmNotificationsGroupHeader = ({ group }: Props) => { |
||||
const styles = useStyles2(getStyles); |
||||
const total = group.alerts.length; |
||||
const countByStatus = group.alerts.reduce((statusObj, alert) => { |
||||
if (statusObj[alert.status.state]) { |
||||
statusObj[alert.status.state] += 1; |
||||
} else { |
||||
statusObj[alert.status.state] = 1; |
||||
} |
||||
return statusObj; |
||||
}, {} as Record<AlertState, number>); |
||||
|
||||
return ( |
||||
<div className={styles.summary}> |
||||
{`${total} alerts: `} |
||||
{Object.entries(countByStatus).map(([state, count], index) => { |
||||
return ( |
||||
<span key={`${JSON.stringify(group.labels)}-notifications-${index}`} className={styles[state as AlertState]}> |
||||
{index > 0 && ', '} |
||||
{`${count} ${state}`} |
||||
</span> |
||||
); |
||||
})} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
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}; |
||||
`,
|
||||
}); |
||||
Loading…
Reference in new issue