diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.tsx similarity index 88% rename from public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts rename to public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.tsx index a0ced048f8f..197145f8dd4 100644 --- a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.ts +++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.test.tsx @@ -1,9 +1,13 @@ +import { render, screen } from '@testing-library/react'; +import { noop } from 'lodash'; +import React from 'react'; + import { MatcherOperator } from 'app/plugins/datasource/alertmanager/types'; import { FormAmRoute } from '../../types/amroutes'; import { MatcherFieldValue } from '../../types/silence-form'; -import { deleteRoute, getFilteredRoutes, updatedRoute } from './AmRoutesTable'; +import { AmRoutesTable, deleteRoute, getFilteredRoutes, updatedRoute } from './AmRoutesTable'; const defaultAmRoute: FormAmRoute = { id: '', @@ -189,4 +193,24 @@ describe('deleteRoute', () => { expect(updatedRoutes[1].id).toBe('2'); expect(updatedRoutes[2].id).toBe('3'); }); + + it('Should warn about policies with no contact point', () => { + const routes: FormAmRoute[] = [ + buildAmRoute({ id: 'no-contact-point' }), + buildAmRoute({ id: 'with-contact-point', receiver: 'TestContactPoint' }), + ]; + + render( + + ); + expect(screen.getByText('None')).toBeInTheDocument(); + expect(screen.getByText('TestContactPoint')).toBeInTheDocument(); + }); }); diff --git a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx index 9f34dbffd26..d6c17ff3965 100644 --- a/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx +++ b/public/app/features/alerting/unified/components/amroutes/AmRoutesTable.tsx @@ -1,7 +1,7 @@ import { intersectionWith, isEqual } from 'lodash'; import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'; -import { Button, ConfirmModal, HorizontalGroup, IconButton } from '@grafana/ui'; +import { Badge, Button, ConfirmModal, HorizontalGroup, IconButton, Tooltip } from '@grafana/ui'; import { contextSrv } from 'app/core/services/context_srv'; import { FormAmRoute } from '../../types/amroutes'; @@ -95,6 +95,10 @@ export const AmRoutesTable: FC = ({ const expandItem = useCallback((item: RouteTableItemProps) => setExpandedId(item.id), []); const collapseItem = useCallback(() => setExpandedId(undefined), []); + const missingReceiver = (route: FormAmRoute) => { + return Boolean(route.receiver) === false; + }; + const cols: RouteTableColumnProps[] = [ { id: 'matchingCriteria', @@ -120,12 +124,24 @@ export const AmRoutesTable: FC = ({ label: 'Contact point', renderCell: (item) => { const type = getGrafanaAppReceiverType(receivers, item.data.receiver); - return item.data.receiver ? ( - <> - {item.data.receiver} {type && } - - ) : ( - '-' + + if (!missingReceiver(item.data)) { + return ( + <> + {item.data.receiver} {type && } + + ); + } + + return ( + + + + + ); }, size: 5,