CloudWatch: Unify look of query mode select between dashboard and exp…

…lore (#24648)
grafana · May 14, 2020 · e754bcd · e754bcd
1 parent abfa1b5
commit e754bcd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 70 deletions.
diff --git a/public/app/plugins/datasource/cloudwatch/components/CombinedMetricsEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/CombinedMetricsEditor.tsx
diff --git a/public/app/plugins/datasource/cloudwatch/components/PanelQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/PanelQueryEditor.tsx
@@ -9,35 +9,28 @@ import LogsQueryEditor from './LogsQueryEditor';
 
 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() {
-    const { queryMode } = this.state;
+    const { query } = this.props;
+    const apiMode = query.apiMode ?? query.queryMode ?? 'Metrics';
 
     return (
       <>
         <QueryInlineField label="Query Mode">
           <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>
-        {queryMode === ExploreMode.Logs ? <LogsQueryEditor {...this.props} /> : <MetricsQueryEditor {...this.props} />}
+        {apiMode === ExploreMode.Logs ? <LogsQueryEditor {...this.props} /> : <MetricsQueryEditor {...this.props} />}
       </>
     );
   }

diff --git a/public/app/plugins/datasource/cloudwatch/module.tsx b/public/app/plugins/datasource/cloudwatch/module.tsx
@@ -7,14 +7,13 @@ import { CloudWatchJsonData, CloudWatchQuery } from './types';
 import { CloudWatchLogsQueryEditor } from './components/LogsQueryEditor';
 import { PanelQueryEditor } from './components/PanelQueryEditor';
 import LogsCheatSheet from './components/LogsCheatSheet';
-import { CombinedMetricsEditor } from './components/CombinedMetricsEditor';
 
 export const plugin = new DataSourcePlugin<CloudWatchDatasource, CloudWatchQuery, CloudWatchJsonData>(
   CloudWatchDatasource
 )
   .setExploreStartPage(LogsCheatSheet)
   .setConfigEditor(ConfigEditor)
   .setQueryEditor(PanelQueryEditor)
-  .setExploreMetricsQueryField(CombinedMetricsEditor)
+  .setExploreMetricsQueryField(PanelQueryEditor)
   .setExploreLogsQueryField(CloudWatchLogsQueryEditor)
   .setAnnotationQueryCtrl(CloudWatchAnnotationsQueryCtrl);