Alerting: Support alertingDisableSendAlertsExternal feature toggle (#88384)

2025-02-25 18:55:37 -06:00 · 2024-05-29 13:54:07 +02:00 · 2024-05-29 13:54:07 +02:00 · 781f67dfb6
commit 781f67dfb6
parent e93169b66c
8 changed files with 74 additions and 29 deletions
--- a/public/app/core/utils/navBarItem-translations.ts
+++ b/public/app/core/utils/navBarItem-translations.ts
@ -221,10 +221,7 @@ export function getNavSubTitle(navId: string | undefined) {
        'Upgrade your existing legacy alerts and notification channels to the new Grafana Alerting'
      );
    case 'alerting-admin':
-      return t(
-        'nav.alerting-admin.subtitle',
-        'Manage Alertmanager configurations and configure where alert instances generated from Grafana managed alert rules are sent'
-      );
+      return t('nav.alerting-admin.subtitle', 'Manage Alertmanager configurations');
    case 'alert-list':
      return t('nav.alerting-list.subtitle', 'Rules that determine whether an alert will fire');
    case 'receivers':
--- a/public/app/features/alerting/unified/components/settings/AlertmanagerCard.test.tsx
+++ b/public/app/features/alerting/unified/components/settings/AlertmanagerCard.test.tsx
@ -147,6 +147,24 @@ describe('Alertmanager card', () => {
    render(cardWithStatus('inconclusive'));
    expect(screen.getByText(/Inconclusive/)).toBeInTheDocument();
  });
+
+  it('should not render the enable / disable buttons or status when disabled', () => {
+    render(
+      <AlertmanagerCard
+        name="Foo"
+        receiving={true}
+        status="active"
+        showStatus={false}
+        onEditConfiguration={jest.fn()}
+      />
+    );
+
+    const enableButton = screen.queryByRole('button', { name: 'Enable' });
+    expect(enableButton).not.toBeInTheDocument();
+
+    // should also not show the status for external alertmanagers
+    expect(screen.queryByText(/Receiving/)).not.toBeInTheDocument();
+  });
 });

 const cardWithStatus = (status: ConnectionStatus) => (
--- a/public/app/features/alerting/unified/components/settings/AlertmanagerCard.tsx
+++ b/public/app/features/alerting/unified/components/settings/AlertmanagerCard.tsx
@ -1,7 +1,7 @@
 import { capitalize } from 'lodash';
 import React from 'react';

-import { Card, Badge, Button, Stack, Text, TextLink } from '@grafana/ui';
+import { Badge, Button, Card, Stack, Text, TextLink } from '@grafana/ui';

 import { ConnectionStatus } from '../../hooks/useExternalAmSelector';
 import { ProvisioningBadge } from '../Provisioning';
@ -14,13 +14,14 @@ interface Props {
  logo?: string;
  provisioned?: boolean;
  readOnly?: boolean;
+  showStatus?: boolean;
  implementation?: string;
  receiving?: boolean;
  status?: ConnectionStatus;
  // functions
  onEditConfiguration: () => void;
-  onDisable: () => void;
-  onEnable: () => void;
+  onDisable?: () => void;
+  onEnable?: () => void;
 }

 export function AlertmanagerCard({
@ -30,6 +31,7 @@ export function AlertmanagerCard({
  logo = 'public/app/plugins/datasource/alertmanager/img/logo.svg',
  provisioned = false,
  readOnly = provisioned,
+  showStatus = true,
  implementation,
  receiving = false,
  status = 'unknown',
@ -37,6 +39,8 @@ export function AlertmanagerCard({
  onEnable,
  onDisable,
 }: Props) {
+  const showActions = !provisioned && Boolean(onEnable) && Boolean(onDisable);
+
  return (
    <Card data-testid={`alertmanager-card-${name}`}>
      <Card.Heading>
@ -60,16 +64,21 @@ export function AlertmanagerCard({
            {implementation && capitalize(implementation)}
            {url && url}
          </Card.Meta>
-          {!receiving ? (
-            <Text variant="bodySmall">Not receiving Grafana managed alerts</Text>
-          ) : (
+          {/* if forwarding is diabled, still show status for the "canonical" Alertmanager */}
+          {showStatus ? (
            <>
-              {status === 'pending' && <Badge text="Activation in progress" color="orange" />}
-              {status === 'active' && <Badge text="Receiving Grafana-managed alerts" color="green" />}
-              {status === 'dropped' && <Badge text="Failed to adopt Alertmanager" color="red" />}
-              {status === 'inconclusive' && <Badge text="Inconclusive" color="orange" />}
+              {!receiving ? (
+                <Text variant="bodySmall">Not receiving Grafana managed alerts</Text>
+              ) : (
+                <>
+                  {status === 'pending' && <Badge text="Activation in progress" color="orange" />}
+                  {status === 'active' && <Badge text="Receiving Grafana-managed alerts" color="green" />}
+                  {status === 'dropped' && <Badge text="Failed to adopt Alertmanager" color="red" />}
+                  {status === 'inconclusive' && <Badge text="Inconclusive" color="orange" />}
+                </>
+              )}
            </>
-          )}
+          ) : null}
        </Stack>
      </Card.Meta>

@ -80,7 +89,7 @@ export function AlertmanagerCard({
          <Button onClick={onEditConfiguration} icon={readOnly ? 'eye' : 'edit'} variant="secondary" fill="outline">
            {readOnly ? 'View configuration' : 'Edit configuration'}
          </Button>
-          {provisioned ? null : (
+          {showActions ? (
            <>
              {receiving ? (
                <Button icon="times" variant="destructive" fill="outline" onClick={onDisable}>
@ -92,7 +101,7 @@ export function AlertmanagerCard({
                </Button>
              )}
            </>
-          )}
+          ) : null}
        </Stack>
      </Card.Tags>
    </Card>
--- a/public/app/features/alerting/unified/components/settings/ExternalAlertmanagers.tsx
+++ b/public/app/features/alerting/unified/components/settings/ExternalAlertmanagers.tsx
@ -20,8 +20,13 @@ interface Props {
 }

 export const ExternalAlertmanagers = ({ onEditConfiguration }: Props) => {
-  const { externalAlertmanagerDataSourcesWithStatus, configuration, enableAlertmanager, disableAlertmanager } =
-    useSettings();
+  const {
+    externalAlertmanagerDataSourcesWithStatus,
+    configuration,
+    enableAlertmanager,
+    disableAlertmanager,
+    forwardingDisabled,
+  } = useSettings();

  // determine if the alertmanger is receiving alerts
  // this is true if Grafana is configured to send to either "both" or "external" and the Alertmanager datasource _wants_ to receive alerts.
@ -51,6 +56,8 @@ export const ExternalAlertmanagers = ({ onEditConfiguration }: Props) => {
        const detailHref = createUrl(DATASOURCES_ROUTES.Edit.replace(/:uid/gi, uid));

        const handleEditConfiguration = () => onEditConfiguration(name);
+        const handleEnable = forwardingDisabled ? undefined : () => enableAlertmanager(uid);
+        const handleDisable = forwardingDisabled ? undefined : () => disableAlertmanager(uid);

        return (
          <AlertmanagerCard
@ -60,12 +67,13 @@ export const ExternalAlertmanagers = ({ onEditConfiguration }: Props) => {
            url={url}
            provisioned={isProvisioned}
            readOnly={isReadOnly}
+            showStatus={!forwardingDisabled}
            implementation={jsonData.implementation ?? 'Prometheus'}
            receiving={isReceiving}
            status={status}
            onEditConfiguration={handleEditConfiguration}
-            onDisable={() => disableAlertmanager(uid)}
-            onEnable={() => enableAlertmanager(uid)}
+            onDisable={handleDisable}
+            onEnable={handleEnable}
          />
        );
      })}
--- a/public/app/features/alerting/unified/components/settings/InternalAlertmanager.tsx
+++ b/public/app/features/alerting/unified/components/settings/InternalAlertmanager.tsx
@ -11,22 +11,27 @@ interface Props {
  onEditConfiguration: (dataSourceName: string) => void;
 }

+const BUILTIN_ALERTMANAGER_NAME = 'Grafana built-in';
+
 export default function InternalAlertmanager({ onEditConfiguration }: Props) {
-  const { configuration, enableAlertmanager, disableAlertmanager } = useSettings();
+  const { configuration, enableAlertmanager, disableAlertmanager, forwardingDisabled } = useSettings();

  const isReceiving = isInternalAlertmanagerInterestedInAlerts(configuration);
  const status: ConnectionStatus = isReceiving ? 'active' : 'uninterested';
+
  const handleEditConfiguration = () => onEditConfiguration(GRAFANA_RULES_SOURCE_NAME);
+  const handleEnable = forwardingDisabled ? undefined : () => enableAlertmanager(GRAFANA_RULES_SOURCE_NAME);
+  const handleDisable = forwardingDisabled ? undefined : () => disableAlertmanager(GRAFANA_RULES_SOURCE_NAME);

  return (
    <AlertmanagerCard
-      name="Grafana built-in"
+      name={BUILTIN_ALERTMANAGER_NAME}
      logo="public/img/grafana_icon.svg"
      status={status}
      receiving={isReceiving}
      onEditConfiguration={handleEditConfiguration}
-      onEnable={() => enableAlertmanager(GRAFANA_RULES_SOURCE_NAME)}
-      onDisable={() => disableAlertmanager(GRAFANA_RULES_SOURCE_NAME)}
+      onEnable={handleEnable}
+      onDisable={handleDisable}
    />
  );
 }
--- a/public/app/features/alerting/unified/components/settings/SettingsContext.tsx
+++ b/public/app/features/alerting/unified/components/settings/SettingsContext.tsx
@ -1,8 +1,8 @@
-import { union, without, debounce } from 'lodash';
+import { debounce, union, without } from 'lodash';
 import React, { PropsWithChildren, useEffect, useRef } from 'react';

 import { AppEvents } from '@grafana/data';
-import { getAppEvents } from '@grafana/runtime';
+import { config, getAppEvents } from '@grafana/runtime';
 import { AlertmanagerChoice, GrafanaAlertingConfiguration } from 'app/plugins/datasource/alertmanager/types';
 import { dispatch } from 'app/store/store';

@ -34,6 +34,9 @@ interface Context {
  // for updating or resetting the configuration for an Alertmanager
  updateAlertmanagerSettings: (name: string, oldConfig: string, newConfig: string) => void;
  resetAlertmanagerSettings: (name: string) => void;
+
+  // this feature toggle is for disabling the "send to external Alertmanagers" feature
+  forwardingDisabled: boolean;
 }

 const SettingsContext = React.createContext<Context | undefined>(undefined);
@ -44,6 +47,8 @@ export const SettingsProvider = (props: PropsWithChildren) => {
  // this will be used to infer the correct "delivery mode" and update the correct list of datasources with "wantsAlertsReceived"
  let interestedAlertmanagers: string[] = [];

+  const forwardingDisabled = config.featureToggles.alertingDisableSendAlertsExternal === true;
+
  const { currentData: configuration, isLoading: isLoadingConfiguration } =
    alertmanagerApi.endpoints.getGrafanaAlertingConfiguration.useQuery();

@ -115,9 +120,12 @@ export const SettingsProvider = (props: PropsWithChildren) => {

  const value: Context = {
    configuration,
+    forwardingDisabled,
    externalAlertmanagerDataSourcesWithStatus: externalAlertmanagersWithStatus,
+
    enableAlertmanager,
    disableAlertmanager,
+
    isLoading: isLoadingConfiguration,
    isUpdating: updateConfigurationState.isLoading || enableOrDisableHandlingGrafanaManagedAlertsState.isLoading,

--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@ -894,7 +894,7 @@
      "title": "Alerting"
    },
    "alerting-admin": {
-      "subtitle": "Manage Alertmanager configurations and configure where alert instances generated from Grafana managed alert rules are sent",
+      "subtitle": "Manage Alertmanager configurations",
      "title": "Settings"
    },
    "alerting-am-routes": {
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@ -894,7 +894,7 @@
      "title": "Åľęřŧįŉģ"
    },
    "alerting-admin": {
-      "subtitle": "Mäŉäģę Åľęřŧmäŉäģęř čőŉƒįģūřäŧįőŉş äŉđ čőŉƒįģūřę ŵĥęřę äľęřŧ įŉşŧäŉčęş ģęŉęřäŧęđ ƒřőm Ğřäƒäŉä mäŉäģęđ äľęřŧ řūľęş äřę şęŉŧ",
+      "subtitle": "Mäŉäģę Åľęřŧmäŉäģęř čőŉƒįģūřäŧįőŉş",
      "title": "Ŝęŧŧįŉģş"
    },
    "alerting-am-routes": {