Explore: Unification of logs/metrics/traces user interface (#25890)

Removes "Metrics"/"Logs" mode switcher from Explore, allowing for both
metrics and logs queries at the same time.

Co-authored-by: kay delaney <kay@grafana.com>

public/app/plugins/datasource/cloudwatch/components/LogsCheatSheet.tsx

@@ -1,13 +1,11 @@
 import React, { PureComponent } from 'react';
 import { stripIndent, stripIndents } from 'common-tags';
-import { ExploreStartPageProps, ExploreMode } from '@grafana/data';
+import { ExploreStartPageProps } from '@grafana/data';
 import Prism from 'prismjs';
 import tokenizer from '../syntax';
 import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
 import { css, cx } from 'emotion';
 import { CloudWatchLogsQuery } from '../types';
-import { changeModeAction } from 'app/features/explore/state/actionTypes';
-import { dispatch } from 'app/store/store';
 
 interface QueryExample {
   category: string;
@@ -217,19 +215,8 @@ const exampleCategory = css`
 `;
 
 export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps, { userExamples: string[] }> {
-  switchToMetrics = (query: CloudWatchLogsQuery) => {
-    const { onClickExample, exploreId } = this.props;
-
-    dispatch(changeModeAction({ exploreId, mode: ExploreMode.Metrics }));
-    onClickExample(query);
-  };
-
   onClickExample(query: CloudWatchLogsQuery) {
-    if (query.expression?.includes('stats')) {
-      this.switchToMetrics(query);
-    } else {
-      this.props.onClickExample(query);
-    }
+    this.props.onClickExample(query);
   }
 
   renderExpression(expr: string, keyPrefix: string) {

public/app/plugins/datasource/cloudwatch/components/LogsQueryEditor.tsx

@@ -20,7 +20,7 @@ const labelClass = css`
 `;
 
 export const CloudWatchLogsQueryEditor = memo(function CloudWatchLogsQueryEditor(props: Props) {
-  const { query, data, datasource, onRunQuery, onChange, exploreId, exploreMode, allowCustomValue = false } = props;
+  const { query, data, datasource, onRunQuery, onChange, exploreId, allowCustomValue = false } = props;
 
   let absolute: AbsoluteTimeRange;
   if (data?.request?.range?.from) {
@@ -44,7 +44,6 @@ export const CloudWatchLogsQueryEditor = memo(function CloudWatchLogsQueryEditor
   return (
     <CloudWatchLogsQueryField
       exploreId={exploreId}
-      exploreMode={exploreMode}
       datasource={datasource}
       query={query}
       onBlur={() => {}}

public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx

@@ -14,23 +14,20 @@ import {
   Select,
   MultiSelect,
 } from '@grafana/ui';
-import Plain from 'slate-plain-serializer';
 
 // Utils & Services
 // dom also includes Element polyfills
-import { Plugin, Node, Editor, Value } from 'slate';
+import { Plugin, Node, Editor } from 'slate';
 import syntax from '../syntax';
 
 // Types
-import { ExploreQueryFieldProps, AbsoluteTimeRange, SelectableValue, ExploreMode, AppEvents } from '@grafana/data';
+import { ExploreQueryFieldProps, AbsoluteTimeRange, SelectableValue, AppEvents } from '@grafana/data';
 import { CloudWatchQuery, CloudWatchLogsQuery } from '../types';
 import { CloudWatchDatasource } from '../datasource';
 import Prism, { Grammar } from 'prismjs';
 import { CloudWatchLanguageProvider } from '../language_provider';
 import { css } from 'emotion';
 import { ExploreId } from 'app/types';
-import { dispatch } from 'app/store/store';
-import { changeModeAction } from 'app/features/explore/state/actionTypes';
 import { appEvents } from 'app/core/core';
 import { InputActionMeta } from '@grafana/ui/src/components/Select/types';
 import { getStatsGroups } from '../utils/query/getStatsGroups';
@@ -274,11 +271,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
     );
   };
 
-  switchToMetrics = () => {
-    const { exploreId } = this.props;
-    dispatch(changeModeAction({ exploreId, mode: ExploreMode.Metrics }));
-  };
-
   onQueryFieldClick = (_event: Event, _editor: Editor, next: () => any) => {
     const { selectedLogGroups, loadingLogGroups } = this.state;
 
@@ -299,34 +291,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
     });
   };
 
-  /**
-   * Check if query is stats query in logs mode and shows a hint to switch to metrics mode. Needs to be done
-   * on update of the rich Value because standard onChange is not called on load for example.
-   */
-  checkForStatsQuery = debounce((value: Value) => {
-    const { datasource } = this.props;
-    // TEMP: Remove when logs/metrics unification is complete
-    if (datasource.languageProvider && this.props.exploreMode === ExploreMode.Logs) {
-      const cloudwatchLanguageProvider = datasource.languageProvider as CloudWatchLanguageProvider;
-      const queryUsesStatsCommand = cloudwatchLanguageProvider.isStatsQuery(Plain.serialize(value));
-      if (queryUsesStatsCommand) {
-        this.setState({
-          hint: {
-            message: 'You are trying to run a stats query in Logs mode. ',
-            fix: {
-              label: 'Switch to Metrics mode.',
-              action: this.switchToMetrics,
-            },
-          },
-        });
-      } else {
-        this.setState({
-          hint: undefined,
-        });
-      }
-    }
-  }, 250);
-
   render() {
     const { ExtraFieldElement, data, query, syntaxLoaded, datasource, allowCustomValue } = this.props;
     const {
@@ -411,7 +375,6 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
               portalOrigin="cloudwatch"
               syntaxLoaded={syntaxLoaded}
               disabled={loadingLogGroups || selectedLogGroups.length === 0}
-              onRichValueChange={this.checkForStatsQuery}
             />
           </div>
           {ExtraFieldElement}