diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
index 08ec1ca88ec..afaa9281219 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
@@ -70,6 +70,37 @@ describe('QueryEditor', () => {
});
});
+ it('normalizes query on mount', async () => {
+ const { act } = renderer;
+ const props = setup();
+ // This does not actually even conform to the prop type but this happens on initialisation somehow
+ props.query = {
+ queryMode: 'Metrics',
+ apiMode: 'Metrics',
+ refId: '',
+ expression: '',
+ matchExact: true,
+ } as any;
+ await act(async () => {
+ renderer.create();
+ });
+ expect((props.onChange as jest.Mock).mock.calls[0][0]).toEqual({
+ namespace: '',
+ metricName: '',
+ expression: '',
+ dimensions: {},
+ region: 'default',
+ id: '',
+ alias: '',
+ statistics: ['Average'],
+ period: '',
+ queryMode: 'Metrics',
+ apiMode: 'Metrics',
+ refId: '',
+ matchExact: true,
+ });
+ });
+
describe('should use correct default values', () => {
it('when region is null is display default in the label', async () => {
// @ts-ignore strict null error TS2345: Argument of type '() => Promise' is not assignable to parameter of type '() => void | undefined'.
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx
index 4bc4ec29421..114e0603b6e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.tsx
@@ -53,6 +53,12 @@ export const normalizeQuery = ({
export class MetricsQueryEditor extends PureComponent {
state: State = { showMeta: false };
+ componentDidMount(): void {
+ const metricsQuery = this.props.query as CloudWatchMetricsQuery;
+ const query = normalizeQuery(metricsQuery);
+ this.props.onChange(query);
+ }
+
onChange(query: CloudWatchMetricsQuery) {
const { onChange, onRunQuery } = this.props;
onChange(query);