Alerting: Alertmanager datasource support for upstream Prometheus AM implementation (#39775)

public/app/plugins/datasource/alertmanager/ConfigEditor.tsx

@@ -1,15 +1,49 @@
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { Alert, DataSourceHttpSettings } from '@grafana/ui';
+import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
+import { DataSourceHttpSettings, InlineFormLabel, Select } from '@grafana/ui';
 import React from 'react';
+import { AlertManagerDataSourceJsonData, AlertManagerImplementation } from './types';
 
-export type Props = DataSourcePluginOptionsEditorProps;
+export type Props = DataSourcePluginOptionsEditorProps<AlertManagerDataSourceJsonData>;
+
+const IMPL_OPTIONS: SelectableValue[] = [
+  {
+    value: AlertManagerImplementation.cortex,
+    label: 'Cortex',
+    description: `https://cortexmetrics.io/`,
+  },
+  {
+    value: AlertManagerImplementation.prometheus,
+    label: 'Prometheus',
+    description:
+      'https://prometheus.io/. Does not support editing configuration via API, so contact points and notification policies are read-only.',
+  },
+];
 
 export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
   return (
     <>
-      <Alert severity="info" title="Only Cortex alertmanager is supported">
-        Note that only Cortex implementation of alert manager is supported at this time.
-      </Alert>
+      <h3 className="page-heading">Alertmanager</h3>
+      <div className="gf-form-group">
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <InlineFormLabel width={13}>Implementation</InlineFormLabel>
+            <Select
+              width={40}
+              options={IMPL_OPTIONS}
+              value={options.jsonData.implementation || AlertManagerImplementation.cortex}
+              onChange={(value) =>
+                onOptionsChange({
+                  ...options,
+                  jsonData: {
+                    ...options.jsonData,
+                    implementation: value.value as AlertManagerImplementation,
+                  },
+                })
+              }
+            />
+          </div>
+        </div>
+      </div>
       <DataSourceHttpSettings
         defaultUrl={''}
         dataSourceConfig={options}