Alerting: Remove the alert manager selection from the data source configuration (#57369)

* Remove alertmanager dropdown from datasource config

* Avoid sending alertmanagers from loki/prom config editors

* Add test

* Remove unneeded param

packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { AlertingSettings } from '@grafana/ui';
+
+import { Props, AlertingConfig } from './AlertingSettings';
+
+const setup = () => {
+  const onOptionsChange = jest.fn();
+  const props: Props<AlertingConfig> = {
+    options: {
+      id: 4,
+      uid: 'x',
+      orgId: 1,
+      name: 'test',
+      type: 'test',
+      typeName: 'test',
+      typeLogoUrl: '',
+      access: 'direct',
+      url: 'http://localhost:8086',
+      user: 'grafana',
+      database: 'site',
+      basicAuth: false,
+      basicAuthUser: '',
+      withCredentials: false,
+      isDefault: false,
+      jsonData: {},
+      secureJsonData: {
+        password: true,
+      },
+      secureJsonFields: {},
+      readOnly: true,
+    },
+    onOptionsChange,
+  };
+
+  render(<AlertingSettings {...props} />);
+};
+
+describe('Alerting Settings', () => {
+  //see https://github.com/grafana/grafana/issues/51417
+  it('should not show the option to select alertmanager data sources', () => {
+    setup();
+    expect(screen.queryByText('Alertmanager data source')).toBeNull();
+  });
+
+  it('should show the option to Manage alerts via Alerting UI', () => {
+    setup();
+    expect(screen.getByText('Manage alerts via Alerting UI')).toBeVisible();
+  });
+});

packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx

@@ -1,37 +1,18 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 
-import { DataSourceInstanceSettings, DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
 
 import { InlineSwitch } from '../../components/Switch/Switch';
 import { InlineField } from '../Forms/InlineField';
-import { InlineFieldRow } from '../Forms/InlineFieldRow';
-import { Select } from '../Select/Select';
 
-interface Props<T extends DataSourceJsonData>
-  extends Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'> {
-  alertmanagerDataSources: Array<DataSourceInstanceSettings<DataSourceJsonData>>;
-}
+export interface Props<T extends DataSourceJsonData>
+  extends Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'> {}
 
-interface AlertingConfig extends DataSourceJsonData {
+export interface AlertingConfig extends DataSourceJsonData {
   manageAlerts?: boolean;
 }
 
-export function AlertingSettings<T extends AlertingConfig>({
-  alertmanagerDataSources,
-  options,
-  onOptionsChange,
-}: Props<T>): JSX.Element {
-  const alertmanagerOptions = useMemo(
-    () =>
-      alertmanagerDataSources.map((ds) => ({
-        label: ds.name,
-        value: ds.uid,
-        imgUrl: ds.meta.info.logos.small,
-        meta: ds.meta,
-      })),
-    [alertmanagerDataSources]
-  );
-
+export function AlertingSettings<T extends AlertingConfig>({ options, onOptionsChange }: Props<T>): JSX.Element {
   return (
     <>
       <h3 className="page-heading">Alerting</h3>
@@ -51,22 +32,6 @@ export function AlertingSettings<T extends AlertingConfig>({
             </InlineField>
           </div>
         </div>
-        <InlineFieldRow>
-          <InlineField
-            tooltip="The alertmanager that manages alerts for this data source"
-            label="Alertmanager data source"
-            labelWidth={26}
-          >
-            <Select
-              width={29}
-              options={alertmanagerOptions}
-              onChange={(value) =>
-                onOptionsChange({ ...options, jsonData: { ...options.jsonData, alertmanagerUid: value?.value } })
-              }
-              value={options.jsonData.alertmanagerUid}
-            />
-          </InlineField>
-        </InlineFieldRow>
       </div>
     </>
   );

public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
 import { AlertingSettings, DataSourceHttpSettings } from '@grafana/ui';
-import { getAllAlertmanagerDataSources } from 'app/features/alerting/unified/utils/alertmanager';
 
 import { LokiOptions } from '../types';
 
@@ -28,7 +27,6 @@ const setDerivedFields = makeJsonUpdater('derivedFields');
 
 export const ConfigEditor = (props: Props) => {
   const { options, onOptionsChange } = props;
-  const alertmanagers = getAllAlertmanagerDataSources();
 
   return (
     <>
@@ -39,11 +37,7 @@ export const ConfigEditor = (props: Props) => {
         onChange={onOptionsChange}
       />
 
-      <AlertingSettings<LokiOptions>
-        alertmanagerDataSources={alertmanagers}
-        options={options}
-        onOptionsChange={onOptionsChange}
-      />
+      <AlertingSettings<LokiOptions> options={options} onOptionsChange={onOptionsChange} />
 
       <div className="gf-form-group">
         <div className="gf-form-inline">

public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx

@@ -4,7 +4,6 @@ import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
 import { AlertingSettings, DataSourceHttpSettings, Alert } from '@grafana/ui';
 import { config } from 'app/core/config';
-import { getAllAlertmanagerDataSources } from 'app/features/alerting/unified/utils/alertmanager';
 
 import { PromOptions } from '../types';
 
@@ -15,7 +14,6 @@ import { PromSettings } from './PromSettings';
 export type Props = DataSourcePluginOptionsEditorProps<PromOptions>;
 export const ConfigEditor = (props: Props) => {
   const { options, onOptionsChange } = props;
-  const alertmanagers = getAllAlertmanagerDataSources();
   // use ref so this is evaluated only first time it renders and the select does not disappear suddenly.
   const showAccessOptions = useRef(props.options.access === 'direct');
 
@@ -45,11 +43,7 @@ export const ConfigEditor = (props: Props) => {
         renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
       />
 
-      <AlertingSettings<PromOptions>
-        alertmanagerDataSources={alertmanagers}
-        options={options}
-        onOptionsChange={onOptionsChange}
-      />
+      <AlertingSettings<PromOptions> options={options} onOptionsChange={onOptionsChange} />
 
       <PromSettings options={options} onOptionsChange={onOptionsChange} />
     </>