Alerting: Skip the default data source if incompatible (#51452)

.betterer.results

@@ -4446,8 +4446,8 @@ exports[`better eslint`] = {
       [28, 4, 25, "Do not use any type assertions.", "2565039386"],
       [106, 22, 82, "Do not use any type assertions.", "713417051"]
     ],
-    "public/app/features/alerting/unified/utils/datasource.ts:2520335938": [
-      [136, 5, 69, "Do not use any type assertions.", "2540015575"]
+    "public/app/features/alerting/unified/utils/datasource.ts:3850518020": [
+      [137, 5, 69, "Do not use any type assertions.", "2540015575"]
     ],
     "public/app/features/alerting/unified/utils/misc.test.ts:962758579": [
       [19, 29, 3, "Unexpected any. Specify a different type.", "193409811"],

public/app/features/alerting/unified/components/rule-editor/QueryEditor.tsx

@@ -11,7 +11,7 @@ import {
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
-import { Button, HorizontalGroup, stylesFactory } from '@grafana/ui';
+import { Button, HorizontalGroup, stylesFactory, Tooltip } from '@grafana/ui';
 import { getNextRefIdChar } from 'app/core/utils/query';
 import {
   dataSource as expressionDatasource,
@@ -20,10 +20,10 @@ import {
 import { isExpressionQuery } from 'app/features/expressions/guards';
 import { ExpressionQueryType } from 'app/features/expressions/types';
 import { defaultCondition } from 'app/features/expressions/utils/expressionTypes';
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
 
 import { AlertingQueryRunner } from '../../state/AlertingQueryRunner';
+import { getDefaultOrFirstCompatibleDataSource } from '../../utils/datasource';
 
 import { QueryRows } from './QueryRows';
 
@@ -77,20 +77,20 @@ export class QueryEditor extends PureComponent<Props, State> {
 
   onNewAlertingQuery = () => {
     const { queries } = this;
-    const defaultDataSource = getDatasourceSrv().getInstanceSettings('default');
+    const datasource = getDefaultOrFirstCompatibleDataSource();
 
-    if (!defaultDataSource) {
+    if (!datasource) {
       return;
     }
 
     this.onChangeQueries(
       addQuery(queries, {
-        datasourceUid: defaultDataSource.uid,
+        datasourceUid: datasource.uid,
         model: {
           refId: '',
           datasource: {
-            type: defaultDataSource.type,
-            uid: defaultDataSource.uid,
+            type: datasource.type,
+            uid: datasource.uid,
           },
         },
       })
@@ -139,6 +139,8 @@ export class QueryEditor extends PureComponent<Props, State> {
     const { panelDataByRefId } = this.state;
     const styles = getStyles(config.theme2);
 
+    const noCompatibleDataSources = getDefaultOrFirstCompatibleDataSource() === undefined;
+
     return (
       <div className={styles.container}>
         <QueryRows
@@ -149,15 +151,18 @@ export class QueryEditor extends PureComponent<Props, State> {
           onRunQueries={this.onRunQueries}
         />
         <HorizontalGroup spacing="sm" align="flex-start">
-          <Button
-            type="button"
-            icon="plus"
-            onClick={this.onNewAlertingQuery}
-            variant="secondary"
-            aria-label={selectors.components.QueryTab.addQuery}
-          >
-            Add query
-          </Button>
+          <Tooltip content={'You appear to have no compatible data sources'} show={noCompatibleDataSources}>
+            <Button
+              type="button"
+              icon="plus"
+              onClick={this.onNewAlertingQuery}
+              variant="secondary"
+              aria-label={selectors.components.QueryTab.addQuery}
+              disabled={noCompatibleDataSources}
+            >
+              Add query
+            </Button>
+          </Tooltip>
           {config.expressionsEnabled && (
             <Button type="button" icon="plus" onClick={this.onNewExpressionQuery} variant="secondary">
               Add expression

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

@@ -1,4 +1,5 @@
 import { DataSourceInstanceSettings, DataSourceJsonData } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AlertManagerDataSourceJsonData, AlertManagerImplementation } from 'app/plugins/datasource/alertmanager/types';
 import { AccessControlAction } from 'app/types';
@@ -177,3 +178,14 @@ export function getDatasourceAPIUid(dataSourceName: string) {
   }
   return ds.uid;
 }
+
+export function getFirstCompatibleDataSource(): DataSourceInstanceSettings<DataSourceJsonData> | undefined {
+  return getRulesDataSources()[0];
+}
+
+export function getDefaultOrFirstCompatibleDataSource(): DataSourceInstanceSettings<DataSourceJsonData> | undefined {
+  const defaultDataSource = getDataSourceSrv().getInstanceSettings('default');
+  const defaultIsCompatible = defaultDataSource?.meta.alerting ?? false;
+
+  return defaultIsCompatible ? defaultDataSource : getFirstCompatibleDataSource();
+}

public/app/features/alerting/unified/utils/rule-form.ts

@@ -29,7 +29,7 @@ import { RuleFormType, RuleFormValues } from '../types/rule-form';
 
 import { getRulesAccess } from './access-control';
 import { Annotation } from './constants';
-import { isGrafanaRulesSource } from './datasource';
+import { getDefaultOrFirstCompatibleDataSource, isGrafanaRulesSource } from './datasource';
 import { arrayToRecord, recordToArray } from './misc';
 import { isAlertingRulerRule, isGrafanaRulerRule, isRecordingRulerRule } from './rules';
 import { parseInterval } from './time';
@@ -170,7 +170,7 @@ export function rulerRuleToFormValues(ruleWithLocation: RuleWithLocation): RuleF
 }
 
 export const getDefaultQueries = (): AlertQuery[] => {
-  const dataSource = getDataSourceSrv().getInstanceSettings('default');
+  const dataSource = getDefaultOrFirstCompatibleDataSource();
 
   if (!dataSource) {
     return [getDefaultExpression('A')];