Alerting: Link prometheus and loki datasources to an alertmanager (#39887)

* add config option for alertmanager linking

* Add button for silencing a rule

* use uid for alertmanager

* move alertmanager link to separate function

packages/grafana-data/src/types/datasource.ts

@@ -530,6 +530,7 @@ export interface DataSourceJsonData {
   defaultRegion?: string;
   profile?: string;
   manageAlerts?: boolean;
+  alertmanagerUid?: string;
 }
 
 /**

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

@@ -1,13 +1,34 @@
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import React from 'react';
+import { DataSourceInstanceSettings, DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import React, { useMemo } from 'react';
 import { Switch } from '../Forms/Legacy/Switch/Switch';
+import { InlineField } from '../Forms/InlineField';
+import { InlineFieldRow } from '../Forms/InlineFieldRow';
+import { Select } from '../Select/Select';
 
-type Props<T> = Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'>;
+interface Props<T> extends Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'> {
+  alertmanagerDataSources: Array<DataSourceInstanceSettings<DataSourceJsonData>>;
+}
 
-export function AlertingSettings<T extends { manageAlerts?: boolean }>({
+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]
+  );
+
   return (
     <>
       <h3 className="page-heading">Alerting</h3>
@@ -27,6 +48,23 @@ export function AlertingSettings<T extends { manageAlerts?: boolean }>({
             />
           </div>
         </div>
+        <InlineFieldRow>
+          <InlineField
+            tooltip="The alertmanager that manages alerts for this data source"
+            label="Alertmanager data source"
+            labelWidth={26}
+          >
+            <Select
+              width={29}
+              menuShouldPortal
+              options={alertmanagerOptions}
+              onChange={(value) =>
+                onOptionsChange({ ...options, jsonData: { ...options.jsonData, alertmanagerUid: value?.value } })
+              }
+              value={options.jsonData.alertmanagerUid}
+            />
+          </InlineField>
+        </InlineFieldRow>
       </div>
     </>
   );