From 8ddf6de6e7b95ad2e2c5614b66adc31f441de6af Mon Sep 17 00:00:00 2001
From: Marcus Andersson <marcus.andersson@grafana.com>
Date: Wed, 19 May 2021 16:24:27 +0200
Subject: [PATCH] Alerting: app specific query editors for Loki and Prometheus
 (#34365)

* Adding simplified version of query editor based on app flag.

* cleaned up the absolute time range.

* changing placeholder text.

* updated snapshot.

* added some tests.

* adding loki query editor tests.

* updating snapshots.
---
 packages/grafana-data/src/types/app.ts        |  1 +
 packages/grafana-data/src/types/datasource.ts |  1 +
 .../rule-editor/ExpressionEditor.tsx          | 68 +++++++++++++++++--
 .../components/AnnotationsQueryEditor.tsx     |  7 --
 .../components/LokiExploreQueryEditor.tsx     |  4 +-
 .../loki/components/LokiQueryEditor.tsx       | 19 +++---
 .../components/LokiQueryEditorByApp.test.tsx  | 59 ++++++++++++++++
 .../loki/components/LokiQueryEditorByApp.tsx  | 18 +++++
 .../components/LokiQueryEditorForAlerting.tsx | 25 +++++++
 .../loki/components/LokiQueryField.tsx        | 20 ++++--
 .../LokiExploreQueryEditor.test.tsx.snap      |  6 --
 .../LokiQueryEditor.test.tsx.snap             | 14 +---
 .../datasource/loki/components/types.ts       |  5 ++
 public/app/plugins/datasource/loki/module.ts  |  4 +-
 .../prometheus/components/PromQueryEditor.tsx | 17 +++--
 .../components/PromQueryEditorByApp.test.tsx  | 64 +++++++++++++++++
 .../components/PromQueryEditorByApp.tsx       | 18 +++++
 .../components/PromQueryEditorForAlerting.tsx | 25 +++++++
 .../prometheus/components/PromQueryField.tsx  | 11 ++-
 .../PromQueryEditor.test.tsx.snap             |  1 +
 .../datasource/prometheus/components/types.ts |  5 ++
 .../plugins/datasource/prometheus/module.ts   |  4 +-
 .../plugins/datasource/tempo/QueryField.tsx   |  5 +-
 23 files changed, 333 insertions(+), 68 deletions(-)
 create mode 100644 public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.test.tsx
 create mode 100644 public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.tsx
 create mode 100644 public/app/plugins/datasource/loki/components/LokiQueryEditorForAlerting.tsx
 create mode 100644 public/app/plugins/datasource/loki/components/types.ts
 create mode 100644 public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx
 create mode 100644 public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx
 create mode 100644 public/app/plugins/datasource/prometheus/components/PromQueryEditorForAlerting.tsx
 create mode 100644 public/app/plugins/datasource/prometheus/components/types.ts

diff --git a/packages/grafana-data/src/types/app.ts b/packages/grafana-data/src/types/app.ts
index 4f0c9ff4cec..2324eb3c741 100644
--- a/packages/grafana-data/src/types/app.ts
+++ b/packages/grafana-data/src/types/app.ts
@@ -7,6 +7,7 @@ export enum CoreApp {
   Dashboard = 'dashboard',
   Explore = 'explore',
   Unknown = 'unknown',
+  CloudAlerting = 'cloud-alerting',
 }
 
 export interface AppRootProps<T = KeyValue> {
diff --git a/packages/grafana-data/src/types/datasource.ts b/packages/grafana-data/src/types/datasource.ts
index b0474f75acc..e314518bf54 100644
--- a/packages/grafana-data/src/types/datasource.ts
+++ b/packages/grafana-data/src/types/datasource.ts
@@ -367,6 +367,7 @@ export interface QueryEditorProps<
   exploreId?: any;
   history?: HistoryItem[];
   queries?: DataQuery[];
+  app?: CoreApp;
 }
 
 // TODO: not really needed but used as type in some data sources and in DataQueryRequest
diff --git a/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx b/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
index bd9e04dc907..7d7906a1c7b 100644
--- a/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/ExpressionEditor.tsx
@@ -1,5 +1,10 @@
-import { TextArea } from '@grafana/ui';
-import React, { FC } from 'react';
+import React, { FC, useCallback, useMemo, useState } from 'react';
+import { noop } from 'lodash';
+import { CoreApp, DataQuery } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
+import { useAsync } from 'react-use';
+import { PromQuery } from 'app/plugins/datasource/prometheus/types';
+import { LokiQuery } from 'app/plugins/datasource/loki/types';
 
 interface Props {
   value?: string;
@@ -7,13 +12,62 @@ interface Props {
   dataSourceName: string; // will be a prometheus or loki datasource
 }
 
-// @TODO implement proper prom/loki query editor here
 export const ExpressionEditor: FC<Props> = ({ value, onChange, dataSourceName }) => {
+  const { mapToValue, mapToQuery } = useQueryMappers(dataSourceName);
+  const [query, setQuery] = useState(mapToQuery({ refId: 'A', hide: false }, value));
+  const { error, loading, value: dataSource } = useAsync(() => {
+    return getDataSourceSrv().get(dataSourceName);
+  }, [dataSourceName]);
+
+  const onChangeQuery = useCallback(
+    (query: DataQuery) => {
+      setQuery(query);
+      onChange(mapToValue(query));
+    },
+    [onChange, mapToValue]
+  );
+
+  if (loading || dataSource?.name !== dataSourceName) {
+    return null;
+  }
+
+  if (error || !dataSource || !dataSource?.components?.QueryEditor) {
+    const errorMessage = error?.message || 'Data source plugin does not export any Query Editor component';
+    return <div>Could not load query editor due to: {errorMessage}</div>;
+  }
+
+  const QueryEditor = dataSource?.components?.QueryEditor;
+
   return (
-    <TextArea
-      placeholder="Enter a promql expression"
-      value={value}
-      onChange={(evt) => onChange((evt.target as HTMLTextAreaElement).value)}
+    <QueryEditor
+      query={query}
+      queries={[query]}
+      app={CoreApp.CloudAlerting}
+      onChange={onChangeQuery}
+      onRunQuery={noop}
+      datasource={dataSource}
     />
   );
 };
+
+type QueryMappers<T extends DataQuery = DataQuery> = {
+  mapToValue: (query: T) => string;
+  mapToQuery: (existing: T, value: string | undefined) => T;
+};
+
+function useQueryMappers(dataSourceName: string): QueryMappers {
+  return useMemo(() => {
+    const settings = getDataSourceSrv().getInstanceSettings(dataSourceName);
+
+    switch (settings?.type) {
+      case 'loki':
+      case 'prometheus':
+        return {
+          mapToValue: (query: PromQuery | LokiQuery) => query.expr,
+          mapToQuery: (existing: DataQuery, value: string | undefined) => ({ ...existing, expr: value }),
+        };
+      default:
+        throw new Error(`${dataSourceName} is not supported as an expression editor`);
+    }
+  }, [dataSourceName]);
+}
diff --git a/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx b/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
index e401eb8bcc6..824c197b367 100644
--- a/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/AnnotationsQueryEditor.tsx
@@ -17,12 +17,6 @@ interface Props {
 export const LokiAnnotationsQueryEditor = memo(function LokiAnnotationQueryEditor(props: Props) {
   const { expr, maxLines, instant, datasource, onChange } = props;
 
-  // Timerange to get existing labels from. Hard coding like this seems to be good enough right now.
-  const absoluteRange = {
-    from: Date.now() - 10000,
-    to: Date.now(),
-  };
-
   const queryWithRefId: LokiQuery = {
     refId: '',
     expr,
@@ -38,7 +32,6 @@ export const LokiAnnotationsQueryEditor = memo(function LokiAnnotationQueryEdito
         onRunQuery={() => {}}
         onBlur={() => {}}
         history={[]}
-        absoluteRange={absoluteRange}
         ExtraFieldElement={
           <LokiOptionFields
             queryType={queryWithRefId.instant ? 'instant' : 'range'}
diff --git a/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.tsx b/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.tsx
index ab8e20098c4..925f2150249 100644
--- a/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiExploreQueryEditor.tsx
@@ -11,8 +11,7 @@ import { LokiOptionFields } from './LokiOptionFields';
 type Props = ExploreQueryFieldProps<LokiDatasource, LokiQuery, LokiOptions>;
 
 export function LokiExploreQueryEditor(props: Props) {
-  const { range, query, data, datasource, history, onChange, onRunQuery } = props;
-  const absoluteTimeRange = { from: range!.from!.valueOf(), to: range!.to!.valueOf() }; // Range here is never optional
+  const { query, data, datasource, history, onChange, onRunQuery } = props;
 
   return (
     <LokiQueryField
@@ -23,7 +22,6 @@ export function LokiExploreQueryEditor(props: Props) {
       onRunQuery={onRunQuery}
       history={history}
       data={data}
-      absoluteRange={absoluteTimeRange}
       ExtraFieldElement={
         <LokiOptionFields
           queryType={query.instant ? 'instant' : 'range'}
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
index fc1afe27570..a6f719369a7 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryEditor.tsx
@@ -1,19 +1,14 @@
 // Libraries
-import React, { memo } from 'react';
+import React from 'react';
 
 // Types
-import { QueryEditorProps } from '@grafana/data';
 import { InlineFormLabel } from '@grafana/ui';
-import { LokiDatasource } from '../datasource';
-import { LokiQuery, LokiOptions } from '../types';
 import { LokiQueryField } from './LokiQueryField';
 import { LokiOptionFields } from './LokiOptionFields';
+import { LokiQueryEditorProps } from './types';
 
-type Props = QueryEditorProps<LokiDatasource, LokiQuery, LokiOptions>;
-
-export function LokiQueryEditor(props: Props) {
-  const { range, query, data, datasource, onChange, onRunQuery } = props;
-  const absoluteTimeRange = { from: range!.from!.valueOf(), to: range!.to!.valueOf() }; // Range here is never optional
+export function LokiQueryEditor(props: LokiQueryEditorProps) {
+  const { query, data, datasource, onChange, onRunQuery } = props;
 
   const onLegendChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
     const nextQuery = { ...query, legendFormat: e.currentTarget.value };
@@ -51,7 +46,7 @@ export function LokiQueryEditor(props: Props) {
       onBlur={onRunQuery}
       history={[]}
       data={data}
-      absoluteRange={absoluteTimeRange}
+      data-testid={testIds.editor}
       ExtraFieldElement={
         <>
           <LokiOptionFields
@@ -69,4 +64,6 @@ export function LokiQueryEditor(props: Props) {
   );
 }
 
-export default memo(LokiQueryEditor);
+export const testIds = {
+  editor: 'loki-editor',
+};
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.test.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.test.tsx
new file mode 100644
index 00000000000..89ee4c65728
--- /dev/null
+++ b/public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.test.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import { CoreApp } from '@grafana/data';
+import { noop } from 'lodash';
+import { LokiDatasource } from '../datasource';
+import { testIds as alertingTestIds } from './LokiQueryEditorForAlerting';
+import { testIds as regularTestIds } from './LokiQueryEditor';
+import LokiQueryEditorByApp from './LokiQueryEditorByApp';
+
+function setup(app: CoreApp): RenderResult {
+  const dataSource = ({
+    languageProvider: {
+      start: () => Promise.resolve([]),
+      getSyntax: () => {},
+      getLabelKeys: () => [],
+      metrics: [],
+    },
+  } as unknown) as LokiDatasource;
+
+  return render(
+    <LokiQueryEditorByApp
+      app={app}
+      onChange={noop}
+      onRunQuery={noop}
+      datasource={dataSource}
+      query={{ refId: 'A', expr: '' }}
+    />
+  );
+}
+
+describe('LokiQueryEditorByApp', () => {
+  it('should render simplified query editor for cloud alerting', () => {
+    const { getByTestId, queryByTestId } = setup(CoreApp.CloudAlerting);
+
+    expect(getByTestId(alertingTestIds.editor)).toBeInTheDocument();
+    expect(queryByTestId(regularTestIds.editor)).toBeNull();
+  });
+
+  it('should render regular query editor for unkown apps', () => {
+    const { getByTestId, queryByTestId } = setup(CoreApp.Unknown);
+
+    expect(getByTestId(regularTestIds.editor)).toBeInTheDocument();
+    expect(queryByTestId(alertingTestIds.editor)).toBeNull();
+  });
+
+  it('should render regular query editor for explore', () => {
+    const { getByTestId, queryByTestId } = setup(CoreApp.Explore);
+
+    expect(getByTestId(regularTestIds.editor)).toBeInTheDocument();
+    expect(queryByTestId(alertingTestIds.editor)).toBeNull();
+  });
+
+  it('should render regular query editor for dashboard', () => {
+    const { getByTestId, queryByTestId } = setup(CoreApp.Dashboard);
+
+    expect(getByTestId(regularTestIds.editor)).toBeInTheDocument();
+    expect(queryByTestId(alertingTestIds.editor)).toBeNull();
+  });
+});
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.tsx
new file mode 100644
index 00000000000..c1a1efb499b
--- /dev/null
+++ b/public/app/plugins/datasource/loki/components/LokiQueryEditorByApp.tsx
@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import { CoreApp } from '@grafana/data';
+import { LokiQueryEditorProps } from './types';
+import { LokiQueryEditor } from './LokiQueryEditor';
+import { LokiQueryEditorForAlerting } from './LokiQueryEditorForAlerting';
+
+export function LokiQueryEditorByApp(props: LokiQueryEditorProps) {
+  const { app } = props;
+
+  switch (app) {
+    case CoreApp.CloudAlerting:
+      return <LokiQueryEditorForAlerting {...props} />;
+    default:
+      return <LokiQueryEditor {...props} />;
+  }
+}
+
+export default memo(LokiQueryEditorByApp);
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryEditorForAlerting.tsx b/public/app/plugins/datasource/loki/components/LokiQueryEditorForAlerting.tsx
new file mode 100644
index 00000000000..c7878af05a3
--- /dev/null
+++ b/public/app/plugins/datasource/loki/components/LokiQueryEditorForAlerting.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { LokiQueryField } from './LokiQueryField';
+import { LokiQueryEditorProps } from './types';
+
+export function LokiQueryEditorForAlerting(props: LokiQueryEditorProps) {
+  const { query, data, datasource, onChange, onRunQuery } = props;
+
+  return (
+    <LokiQueryField
+      datasource={datasource}
+      query={query}
+      onChange={onChange}
+      onRunQuery={onRunQuery}
+      onBlur={onRunQuery}
+      history={[]}
+      data={data}
+      placeholder="Enter a Loki query"
+      data-testid={testIds.editor}
+    />
+  );
+}
+
+export const testIds = {
+  editor: 'loki-editor-cloud-alerting',
+};
diff --git a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
index e25f750c16d..bc00bdc897d 100644
--- a/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiQueryField.tsx
@@ -18,7 +18,7 @@ import { Plugin, Node } from 'slate';
 import { LokiLabelBrowser } from './LokiLabelBrowser';
 
 // Types
-import { ExploreQueryFieldProps, AbsoluteTimeRange } from '@grafana/data';
+import { ExploreQueryFieldProps } from '@grafana/data';
 import { LokiQuery, LokiOptions } from '../types';
 import { LanguageMap, languages as prismLanguages } from 'prismjs';
 import LokiLanguageProvider, { LokiHistoryItem } from '../language_provider';
@@ -63,8 +63,9 @@ function willApplySuggestion(suggestion: string, { typeaheadContext, typeaheadTe
 
 export interface LokiQueryFieldProps extends ExploreQueryFieldProps<LokiDatasource, LokiQuery, LokiOptions> {
   history: LokiHistoryItem[];
-  absoluteRange: AbsoluteTimeRange;
   ExtraFieldElement?: ReactNode;
+  placeholder?: string;
+  'data-testid'?: string;
 }
 
 interface LokiQueryFieldState {
@@ -138,7 +139,13 @@ export class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, Lok
   };
 
   render() {
-    const { ExtraFieldElement, query, datasource } = this.props;
+    const {
+      ExtraFieldElement,
+      query,
+      datasource,
+      placeholder = 'Enter a Loki query (run with Shift+Enter)',
+    } = this.props;
+
     const { labelsLoaded, labelBrowserVisible } = this.state;
     const lokiLanguageProvider = datasource.languageProvider as LokiLanguageProvider;
     const cleanText = datasource.languageProvider ? lokiLanguageProvider.cleanText : undefined;
@@ -148,7 +155,10 @@ export class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, Lok
 
     return (
       <>
-        <div className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1">
+        <div
+          className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1"
+          data-testid={this.props['data-testid']}
+        >
           <button
             className="gf-form-label query-keyword pointer"
             onClick={this.onClickChooserButton}
@@ -167,7 +177,7 @@ export class LokiQueryField extends React.PureComponent<LokiQueryFieldProps, Lok
               onChange={this.onChangeQuery}
               onBlur={this.props.onBlur}
               onRunQuery={this.props.onRunQuery}
-              placeholder="Enter a Loki query (run with Shift+Enter)"
+              placeholder={placeholder}
               portalOrigin="loki"
             />
           </div>
diff --git a/public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreQueryEditor.test.tsx.snap b/public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreQueryEditor.test.tsx.snap
index a192fdc9e40..69927720b25 100644
--- a/public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/loki/components/__snapshots__/LokiExploreQueryEditor.test.tsx.snap
@@ -17,12 +17,6 @@ exports[`LokiExploreQueryEditor should render component 1`] = `
       queryType="range"
     />
   }
-  absoluteRange={
-    Object {
-      "from": 1577836800000,
-      "to": 1577923200000,
-    }
-  }
   data={
     Object {
       "request": Object {
diff --git a/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap b/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap
index a42bb5b248c..c9f66598edc 100644
--- a/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/loki/components/__snapshots__/LokiQueryEditor.test.tsx.snap
@@ -43,12 +43,7 @@ exports[`Render LokiQueryEditor with legend should render 1`] = `
       </div>
     </React.Fragment>
   }
-  absoluteRange={
-    Object {
-      "from": 1577836800000,
-      "to": 1577923200000,
-    }
-  }
+  data-testid="loki-editor"
   datasource={Object {}}
   history={Array []}
   onBlur={[MockFunction]}
@@ -107,12 +102,7 @@ exports[`Render LokiQueryEditor with legend should update timerange 1`] = `
       </div>
     </React.Fragment>
   }
-  absoluteRange={
-    Object {
-      "from": 1546300800000,
-      "to": 1577923200000,
-    }
-  }
+  data-testid="loki-editor"
   datasource={Object {}}
   history={Array []}
   onBlur={[MockFunction]}
diff --git a/public/app/plugins/datasource/loki/components/types.ts b/public/app/plugins/datasource/loki/components/types.ts
new file mode 100644
index 00000000000..13cd22d15f3
--- /dev/null
+++ b/public/app/plugins/datasource/loki/components/types.ts
@@ -0,0 +1,5 @@
+import { QueryEditorProps } from '@grafana/data';
+import LokiDatasource from '../datasource';
+import { LokiOptions, LokiQuery } from '../types';
+
+export type LokiQueryEditorProps = QueryEditorProps<LokiDatasource, LokiQuery, LokiOptions>;
diff --git a/public/app/plugins/datasource/loki/module.ts b/public/app/plugins/datasource/loki/module.ts
index a32760427ac..225a12097ca 100644
--- a/public/app/plugins/datasource/loki/module.ts
+++ b/public/app/plugins/datasource/loki/module.ts
@@ -3,12 +3,12 @@ import Datasource from './datasource';
 
 import LokiCheatSheet from './components/LokiCheatSheet';
 import LokiExploreQueryEditor from './components/LokiExploreQueryEditor';
-import LokiQueryEditor from './components/LokiQueryEditor';
+import LokiQueryEditorByApp from './components/LokiQueryEditorByApp';
 import { LokiAnnotationsQueryCtrl } from './LokiAnnotationsQueryCtrl';
 import { ConfigEditor } from './configuration/ConfigEditor';
 
 export const plugin = new DataSourcePlugin(Datasource)
-  .setQueryEditor(LokiQueryEditor)
+  .setQueryEditor(LokiQueryEditorByApp)
   .setConfigEditor(ConfigEditor)
   .setExploreQueryField(LokiExploreQueryEditor)
   .setQueryEditorHelp(LokiCheatSheet)
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
index ce08d3774f7..ca655fa8ffb 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
@@ -3,18 +3,16 @@ import React, { PureComponent } from 'react';
 
 // Types
 import { InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
-import { QueryEditorProps, SelectableValue } from '@grafana/data';
-import { PrometheusDatasource } from '../datasource';
-import { PromOptions, PromQuery } from '../types';
+import { SelectableValue } from '@grafana/data';
+import { PromQuery } from '../types';
 
 import PromQueryField from './PromQueryField';
 import PromLink from './PromLink';
 import { PromExemplarField } from './PromExemplarField';
+import { PromQueryEditorProps } from './types';
 
 const { Switch } = LegacyForms;
 
-export type Props = QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions>;
-
 const FORMAT_OPTIONS: Array<SelectableValue<string>> = [
   { label: 'Time series', value: 'time_series' },
   { label: 'Table', value: 'table' },
@@ -35,11 +33,11 @@ interface State {
   exemplar: boolean;
 }
 
-export class PromQueryEditor extends PureComponent<Props, State> {
+export class PromQueryEditor extends PureComponent<PromQueryEditorProps, State> {
   // Query target to be modified and used for queries
   query: PromQuery;
 
-  constructor(props: Props) {
+  constructor(props: PromQueryEditorProps) {
     super(props);
     // Use default query to prevent undefined input values
     const defaultQuery: Partial<PromQuery> = { expr: '', legendFormat: '', interval: '', exemplar: true };
@@ -118,6 +116,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
         onChange={this.onFieldChange}
         history={[]}
         data={data}
+        data-testid={testIds.editor}
         ExtraFieldElement={
           <div className="gf-form-inline">
             <div className="gf-form">
@@ -198,3 +197,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
     );
   }
 }
+
+export const testIds = {
+  editor: 'prom-editor',
+};
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx
new file mode 100644
index 00000000000..754d588269e
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.test.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, RenderResult } from '@testing-library/react';
+import { PromQueryEditorByApp } from './PromQueryEditorByApp';
+import { CoreApp } from '@grafana/data';
+import { noop } from 'lodash';
+import { Observable } from 'rxjs';
+import { first } from 'rxjs/operators';
+import { PrometheusDatasource } from '../datasource';
+import { testIds as alertingTestIds } from './PromQueryEditorForAlerting';
+import { testIds as regularTestIds } from './PromQueryEditor';
+
+function setup(app: CoreApp): RenderResult {
+  const dataSource = ({
+    createQuery: jest.fn((q) => q),
+    getPrometheusTime: jest.fn((date, roundup) => 123),
+    languageProvider: {
+      start: () => Promise.resolve([]),
+      syntax: () => {},
+      getLabelKeys: () => [],
+      metrics: [],
+    },
+    exemplarErrors: new Observable().pipe(first()),
+  } as unknown) as PrometheusDatasource;
+
+  return render(
+    <PromQueryEditorByApp
+      app={app}
+      onChange={noop}
+      onRunQuery={noop}
+      datasource={dataSource}
+      query={{ refId: 'A', expr: '' }}
+    />
+  );
+}
+
+describe('PromQueryEditorByApp', () => {
+  it('should render simplified query editor for cloud alerting', () => {
+    const { getByTestId, queryByTestId } = setup(CoreApp.CloudAlerting);
+
+    expect(getByTestId(alertingTestIds.editor)).toBeInTheDocument();
+    expect(queryByTestId(regularTestIds.editor)).toBeNull();
+  });
+
+  it('should render regular query editor for unkown apps', () => {
+    const { getByTestId, queryByTestId } = setup(CoreApp.Unknown);
+
+    expect(getByTestId(regularTestIds.editor)).toBeInTheDocument();
+    expect(queryByTestId(alertingTestIds.editor)).toBeNull();
+  });
+
+  it('should render regular query editor for explore', () => {
+    const { getByTestId, queryByTestId } = setup(CoreApp.Explore);
+
+    expect(getByTestId(regularTestIds.editor)).toBeInTheDocument();
+    expect(queryByTestId(alertingTestIds.editor)).toBeNull();
+  });
+
+  it('should render regular query editor for dashboard', () => {
+    const { getByTestId, queryByTestId } = setup(CoreApp.Dashboard);
+
+    expect(getByTestId(regularTestIds.editor)).toBeInTheDocument();
+    expect(queryByTestId(alertingTestIds.editor)).toBeNull();
+  });
+});
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx
new file mode 100644
index 00000000000..f3c5c56373b
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditorByApp.tsx
@@ -0,0 +1,18 @@
+import React, { memo } from 'react';
+import { CoreApp } from '@grafana/data';
+import { PromQueryEditorProps } from './types';
+import { PromQueryEditor } from './PromQueryEditor';
+import { PromQueryEditorForAlerting } from './PromQueryEditorForAlerting';
+
+export function PromQueryEditorByApp(props: PromQueryEditorProps) {
+  const { app } = props;
+
+  switch (app) {
+    case CoreApp.CloudAlerting:
+      return <PromQueryEditorForAlerting {...props} />;
+    default:
+      return <PromQueryEditor {...props} />;
+  }
+}
+
+export default memo(PromQueryEditorByApp);
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditorForAlerting.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditorForAlerting.tsx
new file mode 100644
index 00000000000..ab81037e949
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditorForAlerting.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PromQueryField from './PromQueryField';
+import { PromQueryEditorProps } from './types';
+
+export function PromQueryEditorForAlerting(props: PromQueryEditorProps) {
+  const { datasource, query, range, data, onChange, onRunQuery } = props;
+
+  return (
+    <PromQueryField
+      datasource={datasource}
+      query={query}
+      onRunQuery={onRunQuery}
+      onChange={onChange}
+      history={[]}
+      range={range}
+      data={data}
+      placeholder="Enter a PromQL query"
+      data-testid={testIds.editor}
+    />
+  );
+}
+
+export const testIds = {
+  editor: 'prom-editor-cloud-alerting',
+};
diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
index 3b4da651b87..c1e25cb6a39 100644
--- a/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
@@ -77,6 +77,8 @@ export function willApplySuggestion(suggestion: string, { typeaheadContext, type
 interface PromQueryFieldProps extends ExploreQueryFieldProps<PrometheusDatasource, PromQuery, PromOptions> {
   history: Array<HistoryItem<PromQuery>>;
   ExtraFieldElement?: ReactNode;
+  placeholder?: string;
+  'data-testid'?: string;
 }
 
 interface PromQueryFieldState {
@@ -271,7 +273,9 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
       datasource: { languageProvider },
       query,
       ExtraFieldElement,
+      placeholder = 'Enter a PromQL query (run with Shift+Enter)',
     } = this.props;
+
     const { labelBrowserVisible, syntaxLoaded, hint } = this.state;
     const cleanText = languageProvider ? languageProvider.cleanText : undefined;
     const hasMetrics = languageProvider.metrics.length > 0;
@@ -280,7 +284,10 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
 
     return (
       <>
-        <div className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1">
+        <div
+          className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1"
+          data-testid={this.props['data-testid']}
+        >
           <button
             className="gf-form-label query-keyword pointer"
             onClick={this.onClickChooserButton}
@@ -300,7 +307,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
               onBlur={this.props.onBlur}
               onChange={this.onChangeQuery}
               onRunQuery={this.props.onRunQuery}
-              placeholder="Enter a PromQL query (run with Shift+Enter)"
+              placeholder={placeholder}
               portalOrigin="prometheus"
               syntaxLoaded={syntaxLoaded}
             />
diff --git a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
index a3f1dffa559..96f1460ba5f 100644
--- a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
@@ -178,6 +178,7 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
       />
     </div>
   }
+  data-testid="prom-editor"
   datasource={
     Object {
       "createQuery": [MockFunction],
diff --git a/public/app/plugins/datasource/prometheus/components/types.ts b/public/app/plugins/datasource/prometheus/components/types.ts
new file mode 100644
index 00000000000..b7bb280cafb
--- /dev/null
+++ b/public/app/plugins/datasource/prometheus/components/types.ts
@@ -0,0 +1,5 @@
+import { QueryEditorProps } from '@grafana/data';
+import { PrometheusDatasource } from '../datasource';
+import { PromOptions, PromQuery } from '../types';
+
+export type PromQueryEditorProps = QueryEditorProps<PrometheusDatasource, PromQuery, PromOptions>;
diff --git a/public/app/plugins/datasource/prometheus/module.ts b/public/app/plugins/datasource/prometheus/module.ts
index 60d48c0b7dd..34daca87835 100644
--- a/public/app/plugins/datasource/prometheus/module.ts
+++ b/public/app/plugins/datasource/prometheus/module.ts
@@ -1,7 +1,7 @@
 import { DataSourcePlugin } from '@grafana/data';
 import { ANNOTATION_QUERY_STEP_DEFAULT, PrometheusDatasource } from './datasource';
 
-import { PromQueryEditor } from './components/PromQueryEditor';
+import PromQueryEditorByApp from './components/PromQueryEditorByApp';
 import PromCheatSheet from './components/PromCheatSheet';
 import PromExploreQueryEditor from './components/PromExploreQueryEditor';
 
@@ -13,7 +13,7 @@ class PrometheusAnnotationsQueryCtrl {
 }
 
 export const plugin = new DataSourcePlugin(PrometheusDatasource)
-  .setQueryEditor(PromQueryEditor)
+  .setQueryEditor(PromQueryEditorByApp)
   .setConfigEditor(ConfigEditor)
   .setExploreMetricsQueryField(PromExploreQueryEditor)
   .setAnnotationQueryCtrl(PrometheusAnnotationsQueryCtrl)
diff --git a/public/app/plugins/datasource/tempo/QueryField.tsx b/public/app/plugins/datasource/tempo/QueryField.tsx
index f8b96a4abec..9b77dde296f 100644
--- a/public/app/plugins/datasource/tempo/QueryField.tsx
+++ b/public/app/plugins/datasource/tempo/QueryField.tsx
@@ -50,11 +50,9 @@ export class TempoQueryField extends React.PureComponent<Props, State> {
   };
 
   render() {
-    const { query, onChange, range } = this.props;
+    const { query, onChange } = this.props;
     const { linkedDatasource } = this.state;
 
-    const absoluteTimeRange = { from: range!.from!.valueOf(), to: range!.to!.valueOf() }; // Range here is never optional
-
     return (
       <>
         <InlineFieldRow>
@@ -87,7 +85,6 @@ export class TempoQueryField extends React.PureComponent<Props, State> {
               onRunQuery={this.onRunLinkedQuery}
               query={this.linkedQuery as any}
               history={[]}
-              absoluteRange={absoluteTimeRange}
             />
           </>
         )}