WIP

public/app/features/alerting/unified/components/rule-editor/NotificationsStep.tsx

@@ -23,7 +23,7 @@ type NotificationsStepProps = {
   alertUid?: string;
 };
 
-enum RoutingOptions {
+export enum RoutingOptions {
   NotificationPolicy = 'notification policy',
   ContactPoint = 'contact point',
 }

public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx

@@ -54,7 +54,7 @@ function NotificationPreviewByAlertManager({
           <div className={styles.secondAlertManagerLine}></div>
         </Stack>
       )}
-      <Stack gap={1} direction="column">
+      <Stack direction="column" gap={0}>
         {Array.from(matchingMap.entries()).map(([routeId, instanceMatches]) => {
           const route = routesByIdMap.get(routeId);
           const receiver = route?.receiver && receiversByName.get(route.receiver);

public/app/features/alerting/unified/components/rule-viewer/tabs/Details.tsx

@@ -7,9 +7,13 @@ import { ClipboardButton, Stack, Text, TextLink, useStyles2 } from '@grafana/ui'
 import { CombinedRule } from 'app/types/unified-alerting';
 import { Annotations } from 'app/types/unified-alerting-dto';
 
+import { useGetAlertManagerDataSourcesByPermissionAndConfig } from '../../../utils/datasource';
+import { getRoutingType } from '../../../utils/rule-form';
 import { isGrafanaRulerRule, isRecordingRulerRule } from '../../../utils/rules';
 import { MetaText } from '../../MetaText';
 import { Tokenize } from '../../Tokenize';
+import { RoutingOptions } from '../../rule-editor/NotificationsStep';
+import NotificationPreviewByAlertManager from '../../rule-editor/notificaton-preview/NotificationPreviewByAlertManager';
 
 interface DetailsProps {
   rule: CombinedRule;
@@ -23,6 +27,7 @@ enum RuleType {
 
 const Details = ({ rule }: DetailsProps) => {
   const styles = useStyles2(getStyles);
+  const alertManagerDataSources = useGetAlertManagerDataSourcesByPermissionAndConfig('notification');
 
   let ruleType: RuleType;
 
@@ -51,6 +56,7 @@ const Details = ({ rule }: DetailsProps) => {
     : undefined;
 
   const hasEvaluationDuration = Number.isFinite(evaluationDuration);
+  const routingType = getRoutingType(rule.rulerRule!);
 
   return (
     <Stack direction="column" gap={3}>
@@ -115,6 +121,26 @@ const Details = ({ rule }: DetailsProps) => {
           )}
       </div>
 
+      {/* routing info goes here */}
+      <>
+        <Text variant="h4">Notifications</Text>
+        <div className={styles.metadataWrapper}>
+          <MetaText direction="column">
+            Notification routing
+            {routingType === RoutingOptions.NotificationPolicy &&
+              alertManagerDataSources.map((source) => (
+                <NotificationPreviewByAlertManager
+                  key={source.name}
+                  alertManagerSource={source}
+                  potentialInstances={[]}
+                  onlyOneAM={alertManagerDataSources.length === 1}
+                />
+              ))}
+            {routingType === RoutingOptions.ContactPoint && <AnnotationValue value="Using a contact point" />}
+          </MetaText>
+        </div>
+      </>
+
       {/* annotations go here */}
       {annotations && (
         <>

public/app/features/alerting/unified/utils/rule-form.ts

@@ -41,6 +41,7 @@ import {
 } from 'app/types/unified-alerting-dto';
 
 import { EvalFunction } from '../../state/alertDef';
+import { RoutingOptions } from '../components/rule-editor/NotificationsStep';
 import { AlertManagerManualRouting, ContactPoint, RuleFormType, RuleFormValues } from '../types/rule-form';
 
 import { getRulesAccess } from './access-control';
@@ -259,6 +260,18 @@ export function formValuesToRulerGrafanaRuleDTO(values: RuleFormValues): Postabl
   throw new Error('Cannot create rule without specifying alert condition');
 }
 
+export function getRoutingType(ruleDefinition: RulerRuleDTO): RoutingOptions {
+  let type: RoutingOptions = RoutingOptions.NotificationPolicy;
+
+  if (isGrafanaRulerRule(ruleDefinition)) {
+    type = Boolean(ruleDefinition.grafana_alert.notification_settings)
+      ? RoutingOptions.ContactPoint
+      : RoutingOptions.NotificationPolicy;
+  }
+
+  return type;
+}
+
 export function getContactPointsFromDTO(ga: GrafanaRuleDefinition): AlertManagerManualRouting | undefined {
   const contactPoint: ContactPoint | undefined = ga.notification_settings
     ? {
@@ -311,7 +324,7 @@ export function rulerRuleToFormValues(ruleWithLocation: RuleWithLocation): RuleF
     } else if (isGrafanaRulerRule(rule)) {
       // grafana alerting rule
       const ga = rule.grafana_alert;
-      const routingSettings: AlertManagerManualRouting | undefined = getContactPointsFromDTO(ga);
+      const routingSettings = getContactPointsFromDTO(ga);
       if (ga.no_data_state !== undefined && ga.exec_err_state !== undefined) {
         return {
           ...defaultFormValues,