From d003e54489520487c749b7e4bfe3222586863e57 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Wed, 10 Sep 2025 13:52:10 +0200
Subject: [PATCH] Alerting: Enrichment per rule wip-2 (#110437)

* Add feature toggle and extension point

* Update ff name for enrichment per rule

* update translations

* wip

* remove wrong duplication after merging from main

* manage enrichments per rule drawer: add ruleUid to extension component

* remove folder

* move drawer to the list page

* update translations

* remove unused import
---
 .../rule-editor/AnnotationsStep.tsx           |  3 +-
 .../NotificationMessageSectionExtension.tsx   | 34 ---------------
 .../extensions/EnrichmentDrawerExtension.tsx  | 42 +++++++++++++++++++
 .../components/rule-viewer/AlertRuleMenu.tsx  | 30 +++++++++++++
 .../components/rules/RuleActionsButtons.tsx   |  6 +++
 .../components/RuleActionsButtons.V2.tsx      |  6 +++
 public/locales/en-US/grafana.json             |  3 +-
 7 files changed, 87 insertions(+), 37 deletions(-)
 delete mode 100644 public/app/features/alerting/unified/components/rule-editor/alert-rule-form/extensions/NotificationMessageSectionExtension.tsx
 create mode 100644 public/app/features/alerting/unified/components/rule-list/extensions/EnrichmentDrawerExtension.tsx

diff --git a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
index c03366740bc..b7ef11375f0 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AnnotationsStep.tsx
@@ -19,7 +19,6 @@ import DashboardAnnotationField from './DashboardAnnotationField';
 import { DashboardPicker, PanelDTO, getVisualPanels } from './DashboardPicker';
 import { NeedHelpInfo } from './NeedHelpInfo';
 import { RuleEditorSection } from './RuleEditorSection';
-import { NotificationMessageSectionExtension } from './alert-rule-form/extensions/NotificationMessageSectionExtension';
 import { useDashboardQuery } from './useDashboardQuery';
 
 const AnnotationsStep = () => {
@@ -212,6 +211,7 @@ const AnnotationsStep = () => {
             </div>
           );
         })}
+
         <Stack direction="row" gap={1}>
           <div className={styles.addAnnotationsButtonContainer}>
             <Button
@@ -240,7 +240,6 @@ const AnnotationsStep = () => {
             onDismiss={() => setShowPanelSelector(false)}
           />
         )}
-        <NotificationMessageSectionExtension />
       </Stack>
     </RuleEditorSection>
   );
diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/extensions/NotificationMessageSectionExtension.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/extensions/NotificationMessageSectionExtension.tsx
deleted file mode 100644
index 7c47206bff2..00000000000
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/extensions/NotificationMessageSectionExtension.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ComponentType } from 'react';
-
-import { t } from '@grafana/i18n';
-import { withErrorBoundary } from '@grafana/ui';
-
-import { logError } from '../../../../Analytics';
-
-export interface NotificationMessageSectionExtensionProps {}
-
-// Internal variable to store the extension component, for now only one component is supported
-let InternalNotificationMessageSectionExtension: ComponentType<NotificationMessageSectionExtensionProps> | null = null;
-
-// This component is used to render the notification message section extension.
-export const NotificationMessageSectionExtension: ComponentType<NotificationMessageSectionExtensionProps> = (props) => {
-  if (!InternalNotificationMessageSectionExtension) {
-    return null;
-  }
-
-  // Wrap the component with error boundary
-  const WrappedComponent = withErrorBoundary(InternalNotificationMessageSectionExtension, {
-    title: t(
-      'alerting.enrichment.error-boundary.notification-message-section-extension',
-      'Notification Message Section Extension failed to load'
-    ),
-    style: 'alertbox',
-    errorLogger: logError,
-  });
-
-  return <WrappedComponent {...props} />;
-};
-
-export function addRuleFormEnrichmentSection(component: ComponentType<NotificationMessageSectionExtensionProps>) {
-  InternalNotificationMessageSectionExtension = component;
-}
diff --git a/public/app/features/alerting/unified/components/rule-list/extensions/EnrichmentDrawerExtension.tsx b/public/app/features/alerting/unified/components/rule-list/extensions/EnrichmentDrawerExtension.tsx
new file mode 100644
index 00000000000..f6e1451b40e
--- /dev/null
+++ b/public/app/features/alerting/unified/components/rule-list/extensions/EnrichmentDrawerExtension.tsx
@@ -0,0 +1,42 @@
+import { ComponentType, memo } from 'react';
+
+import { t } from '@grafana/i18n';
+import { withErrorBoundary } from '@grafana/ui';
+
+import { logError } from '../../../Analytics';
+
+export interface EnrichmentDrawerExtensionProps {
+  ruleUid: string;
+  onClose: () => void;
+}
+
+// Internal variable to store the extension component, for now only one component is supported
+let InternalEnrichmentDrawerExtension: ComponentType<EnrichmentDrawerExtensionProps> | null = null;
+
+// This component is used to render the enrichment drawer extension.
+const EnrichmentDrawerExtensionComponent: ComponentType<EnrichmentDrawerExtensionProps> = (props) => {
+  if (!InternalEnrichmentDrawerExtension) {
+    return null;
+  }
+
+  // Wrap the component with error boundary
+  const WrappedComponent = withErrorBoundary(InternalEnrichmentDrawerExtension, {
+    title: t(
+      'alerting.enrichment.error-boundary.enrichment-drawer-extension',
+      'Enrichment Drawer Extension failed to load'
+    ),
+    style: 'alertbox',
+    errorLogger: logError,
+  });
+
+  return <WrappedComponent {...props} />;
+};
+
+export const EnrichmentDrawerExtension = memo(EnrichmentDrawerExtensionComponent, (prevProps, nextProps) => {
+  // Only re-render if ruleUid changes
+  return prevProps.ruleUid === nextProps.ruleUid;
+});
+
+export function addEnrichmentDrawerExtension(component: ComponentType<EnrichmentDrawerExtensionProps>) {
+  InternalEnrichmentDrawerExtension = component;
+}
diff --git a/public/app/features/alerting/unified/components/rule-viewer/AlertRuleMenu.tsx b/public/app/features/alerting/unified/components/rule-viewer/AlertRuleMenu.tsx
index 0ad498ebc65..711124d6270 100644
--- a/public/app/features/alerting/unified/components/rule-viewer/AlertRuleMenu.tsx
+++ b/public/app/features/alerting/unified/components/rule-viewer/AlertRuleMenu.tsx
@@ -2,6 +2,7 @@ import { PropsOf } from '@emotion/react';
 
 import { AppEvents } from '@grafana/data';
 import { t } from '@grafana/i18n';
+import { config } from '@grafana/runtime';
 import { Button, ComponentSize, Dropdown, Menu } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import MenuItemPauseRule from 'app/features/alerting/unified/components/MenuItemPauseRule';
@@ -14,7 +15,9 @@ import {
   AlertRuleAction,
   skipToken,
   useGrafanaPromRuleAbilities,
+  useGrafanaPromRuleAbility,
   useRulerRuleAbilities,
+  useRulerRuleAbility,
 } from '../../hooks/useAbilities';
 import { createShareLink, isLocalDevEnv, isOpenSourceEdition } from '../../utils/misc';
 import * as ruleId from '../../utils/rule-id';
@@ -34,6 +37,7 @@ interface Props {
   identifier: RuleIdentifier;
   groupIdentifier: RuleGroupIdentifierV2;
   handleSilence: () => void;
+  handleManageEnrichments?: () => void;
   handleDelete: (identifier: EditableRuleIdentifier, groupIdentifier: RuleGroupIdentifierV2) => void;
   handleDuplicateRule: (identifier: RuleIdentifier) => void;
   onPauseChange?: () => void;
@@ -53,6 +57,7 @@ const AlertRuleMenu = ({
   identifier,
   groupIdentifier,
   handleSilence,
+  handleManageEnrichments,
   handleDelete,
   handleDuplicateRule,
   onPauseChange,
@@ -84,6 +89,16 @@ const AlertRuleMenu = ({
     AlertRuleAction.ModifyExport,
   ]);
 
+  const [editRuleSupported, editRuleAllowed] = useRulerRuleAbility(rulerRule, groupIdentifier, AlertRuleAction.Update);
+  // If the consumer of this component comes from the alert list view, we need to use promRule to check abilities and permissions,
+  // as we have removed all requests to the ruler API in the list view.
+  const [grafanaEditRuleSupported, grafanaEditRuleAllowed] = useGrafanaPromRuleAbility(
+    prometheusRuleType.grafana.rule(promRule) ? promRule : skipToken,
+    AlertRuleAction.Update
+  );
+
+  const canEditRule = (editRuleSupported && editRuleAllowed) || (grafanaEditRuleSupported && grafanaEditRuleAllowed);
+
   const [pauseSupported, pauseAllowed] = rulerPauseAbility;
   const [grafanaPauseSupported, grafanaPauseAllowed] = grafanaPauseAbility;
   const canPause = (pauseSupported && pauseAllowed) || (grafanaPauseSupported && grafanaPauseAllowed);
@@ -131,8 +146,23 @@ const AlertRuleMenu = ({
     (rulerRuleType.grafana.rule(rulerRule) && isPausedRule(rulerRule)) ||
     (prometheusRuleType.grafana.rule(promRule) && promRule.isPaused);
 
+  // todo: make this new menu item for enrichments an extension of the alertrulemenu items. For first iteration, we'll keep it here.
+  const canManageEnrichments =
+    canEditRule &&
+    ruleUid &&
+    handleManageEnrichments &&
+    config.featureToggles.alertingEnrichmentPerRule &&
+    config.featureToggles.alertEnrichment;
+
   const menuItems = (
     <>
+      {canManageEnrichments && (
+        <Menu.Item
+          label={t('alerting.alert-menu.manage-enrichments', 'Manage enrichments')}
+          icon="edit"
+          onClick={handleManageEnrichments}
+        />
+      )}
       {canPause && ruleUid && groupIdentifier.groupOrigin === 'grafana' && (
         <MenuItemPauseRule
           uid={ruleUid}
diff --git a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx
index c6bcd640657..206d939811f 100644
--- a/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx
@@ -19,6 +19,7 @@ import { createViewLink } from '../../utils/misc';
 import * as ruleId from '../../utils/rule-id';
 import { getRuleUID, prometheusRuleType, rulerRuleType } from '../../utils/rules';
 import { createRelativeUrl } from '../../utils/url';
+import { EnrichmentDrawerExtension } from '../rule-list/extensions/EnrichmentDrawerExtension';
 
 import { RedirectToCloneRule } from './CloneRule';
 
@@ -45,6 +46,7 @@ export const RuleActionsButtons = ({ compact, showViewButton, rule, rulesSource
   const [deleteModal, showDeleteModal] = useDeleteModal(redirectToListView);
 
   const [showSilenceDrawer, setShowSilenceDrawer] = useState<boolean>(false);
+  const [showEnrichmentDrawer, setShowEnrichmentDrawer] = useState<boolean>(false);
 
   const [redirectToClone, setRedirectToClone] = useState<
     { identifier: RuleIdentifier; isProvisioned: boolean } | undefined
@@ -126,6 +128,7 @@ export const RuleActionsButtons = ({ compact, showViewButton, rule, rulesSource
           }
         }}
         handleSilence={() => setShowSilenceDrawer(true)}
+        handleManageEnrichments={() => setShowEnrichmentDrawer(true)}
         handleDuplicateRule={() => setRedirectToClone({ identifier, isProvisioned })}
         onPauseChange={() => {
           // Uses INSTANCES_DISPLAY_LIMIT + 1 here as exporting LIMIT_ALERTS from RuleList has the side effect
@@ -142,6 +145,9 @@ export const RuleActionsButtons = ({ compact, showViewButton, rule, rulesSource
       {silenceableRule && showSilenceDrawer && (
         <SilenceGrafanaRuleDrawer ruleUid={ruleUid} onClose={() => setShowSilenceDrawer(false)} />
       )}
+      {ruleUid && showEnrichmentDrawer && (
+        <EnrichmentDrawerExtension ruleUid={ruleUid} onClose={() => setShowEnrichmentDrawer(false)} />
+      )}
       {redirectToClone?.identifier && (
         <RedirectToCloneRule
           identifier={redirectToClone.identifier}
diff --git a/public/app/features/alerting/unified/rule-list/components/RuleActionsButtons.V2.tsx b/public/app/features/alerting/unified/rule-list/components/RuleActionsButtons.V2.tsx
index 4570b3dd8e9..393355ade61 100644
--- a/public/app/features/alerting/unified/rule-list/components/RuleActionsButtons.V2.tsx
+++ b/public/app/features/alerting/unified/rule-list/components/RuleActionsButtons.V2.tsx
@@ -4,6 +4,7 @@ import { RequireAtLeastOne } from 'type-fest';
 
 import { Trans, t } from '@grafana/i18n';
 import { LinkButton, Stack } from '@grafana/ui';
+import { EnrichmentDrawerExtension } from 'app/features/alerting/unified/components/rule-list/extensions/EnrichmentDrawerExtension';
 import AlertRuleMenu from 'app/features/alerting/unified/components/rule-viewer/AlertRuleMenu';
 import { useDeleteModal } from 'app/features/alerting/unified/components/rule-viewer/DeleteModal';
 import { RedirectToCloneRule } from 'app/features/alerting/unified/components/rules/CloneRule';
@@ -50,6 +51,7 @@ export function RuleActionsButtons({ compact, rule, promRule, groupIdentifier }:
   const [deleteModal, showDeleteModal] = useDeleteModal(redirectToListView);
 
   const [showSilenceDrawer, setShowSilenceDrawer] = useState<boolean>(false);
+  const [showEnrichmentDrawer, setShowEnrichmentDrawer] = useState<boolean>(false);
 
   const [redirectToClone, setRedirectToClone] = useState<
     { identifier: RuleIdentifier; isProvisioned: boolean } | undefined
@@ -111,12 +113,16 @@ export function RuleActionsButtons({ compact, rule, promRule, groupIdentifier }:
         identifier={identifier}
         handleDelete={(identifier, groupIdentifier) => showDeleteModal(identifier, groupIdentifier)}
         handleSilence={() => setShowSilenceDrawer(true)}
+        handleManageEnrichments={() => setShowEnrichmentDrawer(true)}
         handleDuplicateRule={() => setRedirectToClone({ identifier, isProvisioned })}
       />
       {deleteModal}
       {silenceableRule && showSilenceDrawer && (
         <SilenceGrafanaRuleDrawer ruleUid={ruleUid} onClose={() => setShowSilenceDrawer(false)} />
       )}
+      {ruleUid && showEnrichmentDrawer && (
+        <EnrichmentDrawerExtension ruleUid={ruleUid} onClose={() => setShowEnrichmentDrawer(false)} />
+      )}
       {redirectToClone?.identifier && (
         <RedirectToCloneRule
           identifier={redirectToClone.identifier}
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index a44e2965d25..1acffbfbfaa 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -504,6 +504,7 @@
       "copy-link": "Copy link",
       "duplicate": "Duplicate",
       "export": "Export",
+      "manage-enrichments": "Manage enrichments",
       "silence-notifications": "Silence notifications",
       "with-modifications": "With modifications"
     },
@@ -1121,7 +1122,7 @@
     },
     "enrichment": {
       "error-boundary": {
-        "notification-message-section-extension": "Notification Message Section Extension failed to load",
+        "enrichment-drawer-extension": "Enrichment Drawer Extension failed to load",
         "rule-viewer-section-extension": "Rule Viewer Enrichment Section failed to load"
       }
     },