Alerting: Warn about missing contact-point in notification policy (#60728)

* initial simplistic version
still need to figure out what to do with child policies

* adds test

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(
+      <AmRoutesTable
+        onChange={noop}
+        onCancelAdd={noop}
+        routes={routes}
+        isAddMode={false}
+        alertManagerSourceName={'grafana'}
+        receivers={[]}
+      />
+    );
+    expect(screen.getByText('None')).toBeInTheDocument();
+    expect(screen.getByText('TestContactPoint')).toBeInTheDocument();
+  });
 });

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<AmRoutesTableProps> = ({
   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<AmRoutesTableProps> = ({
       label: 'Contact point',
       renderCell: (item) => {
         const type = getGrafanaAppReceiverType(receivers, item.data.receiver);
-        return item.data.receiver ? (
+
+        if (!missingReceiver(item.data)) {
+          return (
             <>
               {item.data.receiver} {type && <GrafanaAppBadge grafanaAppType={type} />}
             </>
-        ) : (
-          '-'
+          );
+        }
+
+        return (
+          <Tooltip
+            content={'No notifications will be delivered for this policy until a contact point is configured.'}
+            placement="top"
+          >
+            <span>
+              <Badge color="orange" icon="exclamation-triangle" text="None" />
+            </span>
+          </Tooltip>
         );
       },
       size: 5,