Datasource/CloudWatch: More robust handling of different query modes (#25691)

* Datasource/CloudWatch: More robust handling of different query modes
A small refactor which changes how the CloudWatch datasource handles
multiple queries with different query modes. Groundwork for future
Logs/Metrics unification work.

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

@@ -46,9 +46,9 @@ export default class CloudWatchLink extends Component<Props, State> {
       start,
       timeType: 'ABSOLUTE',
       tz: 'UTC',
-      editorString: query.expression,
+      editorString: query.expression ?? '',
       isLiveTail: false,
-      source: query.logGroupNames,
+      source: query.logGroupNames ?? [],
     };
 
     return encodeUrl(urlProps, datasource.getActualRegion(query.region));

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

@@ -220,18 +220,12 @@ export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps,
   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);
   };
 
   onClickExample(query: CloudWatchLogsQuery) {
-    if (query.expression.includes('stats')) {
+    if (query.expression?.includes('stats')) {
       this.switchToMetrics(query);
     } else {
       this.props.onClickExample(query);
@@ -243,7 +237,9 @@ export default class LogsCheatSheet extends PureComponent<ExploreStartPageProps,
       <div
         className="cheat-sheet-item__example"
         key={expr}
-        onClick={e => this.onClickExample({ refId: 'A', expression: expr } as CloudWatchLogsQuery)}
+        onClick={e =>
+          this.onClickExample({ refId: 'A', expression: expr, queryMode: 'Logs', region: 'default', id: 'A' })
+        }
       >
         <pre>{renderHighlightedMarkup(expr, keyPrefix)}</pre>
       </div>

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

@@ -275,16 +275,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
   };
 
   switchToMetrics = () => {
-    const { query, onChange, exploreId } = this.props;
-
-    if (onChange) {
-      const nextQuery: CloudWatchLogsQuery = {
-        ...(query as CloudWatchLogsQuery),
-        apiMode: 'Logs',
-      };
-      onChange(nextQuery);
-    }
-
+    const { exploreId } = this.props;
     dispatch(changeModeAction({ exploreId, mode: ExploreMode.Metrics }));
   };
 
@@ -409,7 +400,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
           <div className="gf-form gf-form--grow flex-shrink-1">
             <QueryField
               additionalPlugins={this.plugins}
-              query={query.expression}
+              query={query.expression ?? ''}
               onChange={this.onChangeQuery}
               onBlur={this.props.onBlur}
               onClick={this.onQueryFieldClick}

public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx

@@ -41,7 +41,6 @@ const setup = () => {
   const props: Props = {
     query: {
       queryMode: 'Metrics',
-      apiMode: 'Metrics',
       refId: '',
       id: '',
       region: 'us-east-1',

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

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { Segment, SegmentAsync } from '@grafana/ui';
-import { CloudWatchQuery, SelectableStrings, CloudWatchMetricsQuery } from '../types';
+import { SelectableStrings, CloudWatchMetricsQuery } from '../types';
 import { CloudWatchDatasource } from '../datasource';
 import { Stats, Dimensions, QueryInlineField } from '.';
 
 export type Props = {
-  query: CloudWatchQuery;
+  query: CloudWatchMetricsQuery;
   datasource: CloudWatchDatasource;
   onRunQuery?: () => void;
-  onChange: (value: CloudWatchQuery) => void;
+  onChange: (value: CloudWatchMetricsQuery) => void;
 };
 
 interface State {
@@ -66,7 +66,7 @@ export function MetricsQueryFieldsEditor({
 
   const toOption = (value: any) => ({ label: value, value });
 
-  const onQueryChange = (query: CloudWatchQuery) => {
+  const onQueryChange = (query: CloudWatchMetricsQuery) => {
     onChange(query);
     onRunQuery();
   };
@@ -98,7 +98,7 @@ export function MetricsQueryFieldsEditor({
         />
       </QueryInlineField>
 
-      {query.expression.length === 0 && (
+      {query.expression?.length === 0 && (
         <>
           <QueryInlineField label="Namespace">
             <Segment

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

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import pick from 'lodash/pick';
 import { ExploreQueryFieldProps, ExploreMode } from '@grafana/data';
 import { Segment } from '@grafana/ui';
 import { CloudWatchQuery } from '../types';
@@ -17,7 +18,7 @@ const apiModes = {
 export class PanelQueryEditor extends PureComponent<Props> {
   render() {
     const { query } = this.props;
-    const apiMode = query.apiMode ?? query.queryMode ?? 'Metrics';
+    const apiMode = query.queryMode ?? 'Metrics';
 
     return (
       <>
@@ -25,9 +26,27 @@ export class PanelQueryEditor extends PureComponent<Props> {
           <Segment
             value={apiModes[apiMode]}
             options={Object.values(apiModes)}
-            onChange={({ value }) =>
-              this.props.onChange({ ...query, apiMode: (value as 'Metrics' | 'Logs') ?? 'Metrics' })
-            }
+            onChange={({ value }) => {
+              const newMode = (value as 'Metrics' | 'Logs') ?? 'Metrics';
+              if (newMode !== apiModes[apiMode].value) {
+                const commonProps = pick(
+                  query,
+                  'id',
+                  'region',
+                  'namespace',
+                  'refId',
+                  'hide',
+                  'key',
+                  'queryType',
+                  'datasource'
+                );
+
+                this.props.onChange({
+                  ...commonProps,
+                  queryMode: newMode,
+                } as CloudWatchQuery);
+              }
+            }}
           />
         </QueryInlineField>
         {apiMode === ExploreMode.Logs ? (