Alerting: add toggle in Loki/Prom datasource config to opt out of alerting ui (#36552)

* wip

* fix useIsRuleEditable

* test for detecting editable-ness of a rules datasource

* tests!

* fix lint errors

* add alerting ui opt-out toggle to loki and prom datasources

* Apply suggestions from code review

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

docs/sources/alerting/unified-alerting/alerting-rules/create-cortex-loki-managed-rule.md

@@ -63,3 +63,7 @@ Labels are key value pairs that categorize or identify an alert. Labels are  use
 ## Preview alerts
 
 To evaluate the rule and see what alerts it would produce, click **Preview alerts**. It will display a list of alerts with state and value of for each one.
+
+## Opt-out a Loki or Prometheus data source
+
+If you do not want to allow creating rules for a particular Loki or Prometheus data source, go to its settings page and clear the **Manage alerts via Alerting UI** checkbox.

docs/sources/alerting/unified-alerting/alerting-rules/rule-list.md

@@ -46,3 +46,7 @@ To edit or delete a rule:
 1. Expand this rule to reveal rule controls. 
 1. Click **Edit** to go to the rule editing form. Make changes following [instructions listed here]({{< relref "./create-grafana-managed-rule.md" >}}).
 1. Click **Delete"** to delete a rule. 
+
+## Opt-out a Loki or Prometheus data source
+
+If you do not want rules to be loaded from a Prometheus or Loki data source, go to its settings page and clear the **Manage alerts via Alerting UI** checkbox.

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

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

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

@@ -0,0 +1,33 @@
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import React from 'react';
+import { Switch } from '../Forms/Legacy/Switch/Switch';
+
+type Props<T> = Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'>;
+
+export function AlertingSettings<T extends { manageAlerts?: boolean }>({
+  options,
+  onOptionsChange,
+}: Props<T>): JSX.Element {
+  return (
+    <>
+      <h3 className="page-heading">Alerting</h3>
+      <div className="gf-form-group">
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <Switch
+              label="Manage alerts via Alerting UI"
+              labelClass="width-13"
+              checked={options.jsonData.manageAlerts !== false}
+              onChange={(event) =>
+                onOptionsChange({
+                  ...options,
+                  jsonData: { ...options.jsonData, manageAlerts: event!.currentTarget.checked },
+                })
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

packages/grafana-ui/src/components/index.ts

@@ -146,6 +146,7 @@ export {
 } from './ErrorBoundary/ErrorBoundary';
 export { ErrorWithStack } from './ErrorBoundary/ErrorWithStack';
 export { DataSourceHttpSettings } from './DataSourceSettings/DataSourceHttpSettings';
+export { AlertingSettings } from './DataSourceSettings/AlertingSettings';
 export { TLSAuthSettings } from './DataSourceSettings/TLSAuthSettings';
 export { CertificationKey } from './DataSourceSettings/CertificationKey';
 export { Spinner } from './Spinner/Spinner';

public/app/features/alerting/unified/RuleEditor.test.tsx

@@ -240,6 +240,16 @@ describe('RuleEditor', () => {
         },
         { alerting: true }
       ),
+      loki_disabled: mockDataSource(
+        {
+          type: DataSourceType.Loki,
+          name: 'loki disabled for alerting',
+          jsonData: {
+            manageAlerts: false,
+          },
+        },
+        { alerting: true }
+      ),
       // can edit rules
       prom: mockDataSource(
         {
@@ -311,6 +321,7 @@ describe('RuleEditor', () => {
     expect(byText('loki with local rule store').query(dataSourceSelect)).not.toBeInTheDocument();
     expect(byText('prom without ruler api').query(dataSourceSelect)).not.toBeInTheDocument();
     expect(byText('splunk').query(dataSourceSelect)).not.toBeInTheDocument();
+    expect(byText('loki disabled for alerting').query(dataSourceSelect)).not.toBeInTheDocument();
   });
 });
 

public/app/features/alerting/unified/RuleList.test.tsx

@@ -51,6 +51,13 @@ const dataSources = {
     name: 'Prometheus',
     type: DataSourceType.Prometheus,
   }),
+  promdisabled: mockDataSource({
+    name: 'Prometheus-disabled',
+    type: DataSourceType.Prometheus,
+    jsonData: {
+      manageAlerts: false,
+    },
+  }),
   loki: mockDataSource({
     name: 'Loki',
     type: DataSourceType.Loki,

public/app/features/alerting/unified/utils/datasource.ts

@@ -14,7 +14,7 @@ export const RulesDataSourceTypes: string[] = [DataSourceType.Loki, DataSourceTy
 
 export function getRulesDataSources() {
   return getAllDataSources()
-    .filter((ds) => RulesDataSourceTypes.includes(ds.type))
+    .filter((ds) => RulesDataSourceTypes.includes(ds.type) && ds.jsonData.manageAlerts !== false)
     .sort((a, b) => a.name.localeCompare(b.name));
 }
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { AlertingSettings, DataSourceHttpSettings } from '@grafana/ui';
 import { LokiOptions } from '../types';
 import { MaxLinesField } from './MaxLinesField';
 import { DerivedFields } from './DerivedFields';
@@ -35,6 +35,8 @@ export const ConfigEditor = (props: Props) => {
         onChange={onOptionsChange}
       />
 
+      <AlertingSettings<LokiOptions> options={options} onOptionsChange={onOptionsChange} />
+
       <div className="gf-form-group">
         <div className="gf-form-inline">
           <div className="gf-form">

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { AlertingSettings, DataSourceHttpSettings } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { PromSettings } from './PromSettings';
 import { PromOptions } from '../types';
@@ -18,6 +18,8 @@ export const ConfigEditor = (props: Props) => {
         sigV4AuthToggleEnabled={config.sigV4AuthEnabled}
       />
 
+      <AlertingSettings<PromOptions> options={options} onOptionsChange={onOptionsChange} />
+
       <PromSettings options={options} onOptionsChange={onOptionsChange} />
     </>
   );