Datasource/CloudWatch: Switch to metrics mode, logs API, when choosing stats…

Datasource/CloudWatch: Switch to metrics mode, logs API, when choosing stats query from cheatsheet (#24398)

* Datasource/CloudWatch: Switch to metrics mode, logs API, when choosing stats query from cheatsheet

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

@@ -340,6 +340,7 @@ export interface ExploreStartPageProps {
   datasource?: DataSourceApi;
   datasource?: DataSourceApi;
   exploreMode: ExploreMode;
   exploreMode: ExploreMode;
   onClickExample: (query: DataQuery) => void;
   onClickExample: (query: DataQuery) => void;
+  exploreId?: any;
 }
 }
 
 
 /**
 /**

public/app/features/explore/Explore.tsx

@@ -342,6 +342,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                             onClickExample={this.onClickExample}
                             onClickExample={this.onClickExample}
                             datasource={datasourceInstance}
                             datasource={datasourceInstance}
                             exploreMode={mode}
                             exploreMode={mode}
+                            exploreId={exploreId}
                           />
                           />
                         </div>
                         </div>
                       )}
                       )}

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import { stripIndent, stripIndents } from 'common-tags';
 import { stripIndent, stripIndents } from 'common-tags';
-import { ExploreStartPageProps, DataQuery, ExploreMode } from '@grafana/data';
+import { ExploreStartPageProps, ExploreMode } from '@grafana/data';
 import Prism from 'prismjs';
 import Prism from 'prismjs';
 import tokenizer from '../syntax';
 import tokenizer from '../syntax';
 import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
 import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
 import { css, cx } from 'emotion';
 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 {
 interface QueryExample {
   category: string;
   category: string;
@@ -214,14 +217,33 @@ const exampleCategory = css`
 `;
 `;
 
 
 export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps, { userExamples: string[] }> {
 export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps, { userExamples: string[] }> {
-  renderExpression(expr: string, keyPrefix: string) {
-    const { onClickExample } = this.props;
+  switchToMetrics = (query: CloudWatchLogsQuery) => {
+    const { onClickExample, exploreId } = this.props;
+
+    const nextQuery: CloudWatchLogsQuery = {
+      ...(query as CloudWatchLogsQuery),
+      apiMode: 'Logs',
+      queryMode: 'Logs',
+    };
+
+    dispatch(changeModeAction({ exploreId, mode: ExploreMode.Metrics }));
+    onClickExample(nextQuery);
+  };
 
 
+  onClickExample(query: CloudWatchLogsQuery) {
+    if (query.expression.includes('stats')) {
+      this.switchToMetrics(query);
+    } else {
+      this.props.onClickExample(query);
+    }
+  }
+
+  renderExpression(expr: string, keyPrefix: string) {
     return (
     return (
       <div
       <div
         className="cheat-sheet-item__example"
         className="cheat-sheet-item__example"
         key={expr}
         key={expr}
-        onClick={e => onClickExample({ refId: 'A', expression: expr } as DataQuery)}
+        onClick={e => this.onClickExample({ refId: 'A', expression: expr } as CloudWatchLogsQuery)}
       >
       >
         <pre>{renderHighlightedMarkup(expr, keyPrefix)}</pre>
         <pre>{renderHighlightedMarkup(expr, keyPrefix)}</pre>
       </div>
       </div>
@@ -248,8 +270,21 @@ export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps,
   }
   }
 
 
   render() {
   render() {
-    const { exploreMode } = this.props;
-
-    return exploreMode === ExploreMode.Logs && this.renderLogsCheatSheet();
+    return (
+      <div>
+        <h2>CloudWatch Logs Cheat Sheet</h2>
+        {CLIQ_EXAMPLES.map(cat => (
+          <div>
+            <div className={`cheat-sheet-item__title ${cx(exampleCategory)}`}>{cat.category}</div>
+            {cat.examples.map((item, i) => (
+              <div className="cheat-sheet-item" key={`item-${i}`}>
+                <h4>{item.title}</h4>
+                {this.renderExpression(item.expr, `item-${i}`)}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
   }
   }
 }
 }