diff --git a/packages/grafana-data/src/types/datasource.ts b/packages/grafana-data/src/types/datasource.ts index c33328eb24e..64c4151af46 100644 --- a/packages/grafana-data/src/types/datasource.ts +++ b/packages/grafana-data/src/types/datasource.ts @@ -530,6 +530,7 @@ export interface DataSourceJsonData { defaultRegion?: string; profile?: string; manageAlerts?: boolean; + alertmanagerUid?: string; } /** diff --git a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx index 28be8654425..79135144cbd 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/AlertingSettings.tsx +++ b/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 = Pick, 'options' | 'onOptionsChange'>; +interface Props extends Pick, 'options' | 'onOptionsChange'> { + alertmanagerDataSources: Array>; +} -export function AlertingSettings({ +interface AlertingConfig extends DataSourceJsonData { + manageAlerts?: boolean; +} + +export function AlertingSettings({ + alertmanagerDataSources, options, onOptionsChange, }: Props): 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 ( <>

Alerting

@@ -27,6 +48,23 @@ export function AlertingSettings({ /> + + +