Alerting: Improve query types usage to prevent ts-errors (#65238)

* Improve query types usage to prevent ts errors

* Detect whether a query's model is Prom or Loki using helper function

* Fix lint errors

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

@@ -119,7 +119,7 @@ type QueryMappers<T extends DataQuery = DataQuery> = {
   mapToQuery: (existing: T, value: string | undefined) => T;
 };
 
-function useQueryMappers(dataSourceName: string): QueryMappers {
+export function useQueryMappers(dataSourceName: string): QueryMappers {
   return useMemo(() => {
     const settings = getDataSourceSrv().getInstanceSettings(dataSourceName);
 

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

@@ -11,6 +11,7 @@ import { isExpressionQuery } from 'app/features/expressions/guards';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
 
 import { TABLE, TIMESERIES } from '../../utils/constants';
+import { isPromOrLokiQuery } from '../../utils/rule-form';
 import { SupportedPanelPlugins } from '../PanelPluginsButtonGroup';
 
 import { VizWrapper } from './VizWrapper';
@@ -57,16 +58,20 @@ export const RecordingRuleEditor: FC<RecordingRuleEditorProps> = ({
   const handleChangedQuery = (changedQuery: DataQuery) => {
     const query = queries[0];
 
+    if (!isPromOrLokiQuery(query.model)) {
+      return;
+    }
+
+    const expr = query.model.expr;
+
     const merged = {
       ...query,
       refId: changedQuery.refId,
       queryType: query.model.queryType ?? '',
-      //@ts-ignore
-      expr: changedQuery?.expr,
+      expr,
       model: {
         refId: changedQuery.refId,
-        //@ts-ignore
-        expr: changedQuery?.expr,
+        expr,
         editorMode: 'code',
       },
     };

public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx

@@ -13,6 +13,7 @@ import { useRulesSourcesWithRuler } from '../../../hooks/useRuleSourcesWithRuler
 import { AlertingQueryRunner } from '../../../state/AlertingQueryRunner';
 import { RuleFormType, RuleFormValues } from '../../../types/rule-form';
 import { getDefaultOrFirstCompatibleDataSource } from '../../../utils/datasource';
+import { isPromOrLokiQuery } from '../../../utils/rule-form';
 import { ExpressionEditor } from '../ExpressionEditor';
 import { ExpressionsEditor } from '../ExpressionsEditor';
 import { QueryEditor } from '../QueryEditor';
@@ -169,13 +170,19 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P
   );
 
   const onChangeRecordingRulesQueries = useCallback(
-    (updatedQueries) => {
-      const dataSourceSettings = getDataSourceSrv().getInstanceSettings(updatedQueries[0].datasourceUid);
+    (updatedQueries: AlertQuery[]) => {
+      const query = updatedQueries[0];
+
+      const dataSourceSettings = getDataSourceSrv().getInstanceSettings(query.datasourceUid);
       if (!dataSourceSettings) {
         throw new Error('The Data source has not been defined.');
       }
 
-      const expression = updatedQueries[0].model?.expr || '';
+      if (!isPromOrLokiQuery(query.model)) {
+        return;
+      }
+
+      const expression = query.model.expr;
 
       setValue('dataSourceName', dataSourceSettings.name);
       setValue('expression', expression);

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

@@ -15,6 +15,7 @@ import { DataSourceJsonData } from '@grafana/schema';
 import { getNextRefIdChar } from 'app/core/utils/query';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { ExpressionQuery, ExpressionQueryType, ExpressionDatasourceUID } from 'app/features/expressions/types';
+import { LokiQuery } from 'app/plugins/datasource/loki/types';
 import { PromQuery } from 'app/plugins/datasource/prometheus/types';
 import { RuleWithLocation } from 'app/types/unified-alerting';
 import {
@@ -40,6 +41,8 @@ import { arrayToRecord, recordToArray } from './misc';
 import { isAlertingRulerRule, isGrafanaRulerRule, isRecordingRulerRule } from './rules';
 import { parseInterval } from './time';
 
+export type PromOrLokiQuery = PromQuery | LokiQuery;
+
 export const getDefaultFormValues = (): RuleFormValues => {
   const { canCreateGrafanaRules, canCreateCloudRules } = getRulesAccess();
 
@@ -476,3 +479,7 @@ export function fixBothInstantAndRangeQuery(query: AlertQuery) {
 function isPromQuery(model: AlertDataQuery): model is PromQuery {
   return 'expr' in model && 'instant' in model && 'range' in model;
 }
+
+export function isPromOrLokiQuery(model: AlertDataQuery): model is PromOrLokiQuery {
+  return 'expr' in model;
+}