diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx index 884f9d373fd..e4a7404989f 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.tsx @@ -5,6 +5,7 @@ import { EditorField, EditorRow, InlineSelect } from '@grafana/experimental'; import { ConfirmModal, Input, RadioButtonGroup, Space } from '@grafana/ui'; import { CloudWatchDatasource } from '../../../datasource'; +import { DEFAULT_METRICS_QUERY } from '../../../defaultQueries'; import useMigratedMetricsQuery from '../../../migrations/useMigratedMetricsQuery'; import { CloudWatchJsonData, @@ -39,13 +40,13 @@ const editorModes = [ export const MetricsQueryEditor = (props: Props) => { const { query, datasource, extraHeaderElementLeft, extraHeaderElementRight, onChange } = props; const [showConfirm, setShowConfirm] = useState(false); - const [sqlCodeEditorIsDirty, setSQLCodeEditorIsDirty] = useState(false); + const [codeEditorIsDirty, setCodeEditorIsDirty] = useState(false); const migratedQuery = useMigratedMetricsQuery(query, props.onChange); const onEditorModeChange = useCallback( (newMetricEditorMode: MetricEditorMode) => { if ( - sqlCodeEditorIsDirty && + codeEditorIsDirty && query.metricQueryType === MetricQueryType.Query && query.metricEditorMode === MetricEditorMode.Code ) { @@ -54,7 +55,7 @@ export const MetricsQueryEditor = (props: Props) => { } onChange({ ...query, metricEditorMode: newMetricEditorMode }); }, - [setShowConfirm, onChange, sqlCodeEditorIsDirty, query] + [setShowConfirm, onChange, codeEditorIsDirty, query] ); useEffect(() => { @@ -64,6 +65,14 @@ export const MetricsQueryEditor = (props: Props) => { value={metricEditorModes.find((m) => m.value === query.metricQueryType)} options={metricEditorModes} onChange={({ value }) => { + if ( + codeEditorIsDirty && + query.metricQueryType === MetricQueryType.Search && + query.metricEditorMode === MetricEditorMode.Builder + ) { + setShowConfirm(true); + return; + } onChange({ ...query, metricQueryType: value }); }} /> @@ -80,13 +89,19 @@ export const MetricsQueryEditor = (props: Props) => { { setShowConfirm(false); - onChange({ ...query, metricEditorMode: MetricEditorMode.Builder }); + setCodeEditorIsDirty(false); + onChange({ + ...query, + ...DEFAULT_METRICS_QUERY, + metricQueryType: MetricQueryType.Query, + metricEditorMode: MetricEditorMode.Builder, + }); }} onDismiss={() => setShowConfirm(false)} /> @@ -99,7 +114,7 @@ export const MetricsQueryEditor = (props: Props) => { }; }, [ query, - sqlCodeEditorIsDirty, + codeEditorIsDirty, datasource, onChange, extraHeaderElementLeft, @@ -119,7 +134,12 @@ export const MetricsQueryEditor = (props: Props) => { {...props} refId={query.refId} metricStat={query} - onChange={(metricStat: MetricStat) => props.onChange({ ...query, ...metricStat })} + onChange={(metricStat: MetricStat) => { + if (!codeEditorIsDirty) { + setCodeEditorIsDirty(true); + } + props.onChange({ ...query, ...metricStat }); + }} > )} {query.metricEditorMode === MetricEditorMode.Code && ( @@ -138,8 +158,8 @@ export const MetricsQueryEditor = (props: Props) => { region={query.region} sql={query.sqlExpression ?? ''} onChange={(sqlExpression) => { - if (!sqlCodeEditorIsDirty) { - setSQLCodeEditorIsDirty(true); + if (!codeEditorIsDirty) { + setCodeEditorIsDirty(true); } props.onChange({ ...migratedQuery, sqlExpression }); }} diff --git a/public/app/plugins/datasource/cloudwatch/defaultQueries.ts b/public/app/plugins/datasource/cloudwatch/defaultQueries.ts index 62b72054e99..2f09d8db926 100644 --- a/public/app/plugins/datasource/cloudwatch/defaultQueries.ts +++ b/public/app/plugins/datasource/cloudwatch/defaultQueries.ts @@ -21,6 +21,7 @@ export const DEFAULT_METRICS_QUERY: Omit = { period: '', metricQueryType: MetricQueryType.Search, metricEditorMode: MetricEditorMode.Builder, + sql: undefined, sqlExpression: '', matchExact: true, };