CloudWatch: Unify look of query mode select between dashboard and explore (#24648)

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

-import React, { PureComponent } from 'react';
-import { ExploreQueryFieldProps } from '@grafana/data';
-import { RadioButtonGroup } from '@grafana/ui';
-import { CloudWatchQuery } from '../types';
-import { CloudWatchDatasource } from '../datasource';
-import LogsQueryEditor from './LogsQueryEditor';
-import { MetricsQueryEditor } from './MetricsQueryEditor';
-import { cx, css } from 'emotion';
-
-export type Props = ExploreQueryFieldProps<CloudWatchDatasource, CloudWatchQuery>;
-
-export class CombinedMetricsEditor extends PureComponent<Props> {
-  renderMetricsEditor() {
-    return <MetricsQueryEditor {...this.props} />;
-  }
-
-  renderLogsEditor() {
-    return <LogsQueryEditor {...this.props} />;
-  }
-
-  render() {
-    const { query } = this.props;
-
-    const apiMode = query.apiMode ?? query.queryMode ?? 'Metrics';
-
-    return (
-      <>
-        <div
-          className={cx(
-            css`
-              margin-bottom: 4px;
-            `
-          )}
-        >
-          <RadioButtonGroup
-            options={[
-              { label: 'Metrics API', value: 'Metrics' },
-              { label: 'Logs API', value: 'Logs' },
-            ]}
-            value={apiMode}
-            onChange={(v: 'Metrics' | 'Logs') => this.props.onChange({ ...query, apiMode: v })}
-          />
-        </div>
-        {apiMode === 'Metrics' ? this.renderMetricsEditor() : this.renderLogsEditor()}
-      </>
-    );
-  }
-}

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

@@ -9,35 +9,28 @@ import LogsQueryEditor from './LogsQueryEditor';
 
 
 export type Props = ExploreQueryFieldProps<CloudWatchDatasource, CloudWatchQuery>;
 export type Props = ExploreQueryFieldProps<CloudWatchDatasource, CloudWatchQuery>;
 
 
-interface State {
-  queryMode: ExploreMode;
-}
-
-export class PanelQueryEditor extends PureComponent<Props, State> {
-  state: State = { queryMode: (this.props.query.queryMode as ExploreMode) ?? ExploreMode.Metrics };
-
-  onQueryModeChange(mode: ExploreMode) {
-    this.setState({
-      queryMode: mode,
-    });
-  }
+const apiModes = {
+  Metrics: { label: 'CloudWatch Metrics', value: 'Metrics' },
+  Logs: { label: 'CloudWatch Logs', value: 'Logs' },
+};
 
 
+export class PanelQueryEditor extends PureComponent<Props> {
   render() {
   render() {
-    const { queryMode } = this.state;
+    const { query } = this.props;
+    const apiMode = query.apiMode ?? query.queryMode ?? 'Metrics';
 
 
     return (
     return (
       <>
       <>
         <QueryInlineField label="Query Mode">
         <QueryInlineField label="Query Mode">
           <Segment
           <Segment
-            value={queryMode}
-            options={[
-              { label: 'Metrics', value: ExploreMode.Metrics },
-              { label: 'Logs', value: ExploreMode.Logs },
-            ]}
-            onChange={({ value }) => this.onQueryModeChange(value ?? ExploreMode.Metrics)}
+            value={apiModes[apiMode]}
+            options={Object.values(apiModes)}
+            onChange={({ value }) =>
+              this.props.onChange({ ...query, apiMode: (value as 'Metrics' | 'Logs') ?? 'Metrics' })
+            }
           />
           />
         </QueryInlineField>
         </QueryInlineField>
-        {queryMode === ExploreMode.Logs ? <LogsQueryEditor {...this.props} /> : <MetricsQueryEditor {...this.props} />}
+        {apiMode === ExploreMode.Logs ? <LogsQueryEditor {...this.props} /> : <MetricsQueryEditor {...this.props} />}
       </>
       </>
     );
     );
   }
   }

public/app/plugins/datasource/cloudwatch/module.tsx

@@ -7,7 +7,6 @@ import { CloudWatchJsonData, CloudWatchQuery } from './types';
 import { CloudWatchLogsQueryEditor } from './components/LogsQueryEditor';
 import { CloudWatchLogsQueryEditor } from './components/LogsQueryEditor';
 import { PanelQueryEditor } from './components/PanelQueryEditor';
 import { PanelQueryEditor } from './components/PanelQueryEditor';
 import LogsCheatSheet from './components/LogsCheatSheet';
 import LogsCheatSheet from './components/LogsCheatSheet';
-import { CombinedMetricsEditor } from './components/CombinedMetricsEditor';
 
 
 export const plugin = new DataSourcePlugin<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>(
 export const plugin = new DataSourcePlugin<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>(
   CloudWatchDatasource
   CloudWatchDatasource
@@ -15,6 +14,6 @@ export const plugin = new DataSourcePlugin<CloudWatchDatasource, CloudWatchQuery
   .setExploreStartPage(LogsCheatSheet)
   .setExploreStartPage(LogsCheatSheet)
   .setConfigEditor(ConfigEditor)
   .setConfigEditor(ConfigEditor)
   .setQueryEditor(PanelQueryEditor)
   .setQueryEditor(PanelQueryEditor)
-  .setExploreMetricsQueryField(CombinedMetricsEditor)
+  .setExploreMetricsQueryField(PanelQueryEditor)
   .setExploreLogsQueryField(CloudWatchLogsQueryEditor)
   .setExploreLogsQueryField(CloudWatchLogsQueryEditor)
   .setAnnotationQueryCtrl(CloudWatchAnnotationsQueryCtrl);
   .setAnnotationQueryCtrl(CloudWatchAnnotationsQueryCtrl);