Cloudwatch: Fix annotation query serialization issue (#54884)

* pass period as string and let backend handle conversion

* adding unit test

* adding unit test

public/app/plugins/datasource/cloudwatch/datasource.test.ts

@@ -5,6 +5,7 @@ import {
   ArrayVector,
   DataFrame,
   dataFrameToJSON,
+  DataQueryRequest,
   dateTime,
   Field,
   FieldType,
@@ -28,6 +29,7 @@ import {
 import { validLogsQuery, validMetricsQuery } from './__mocks__/queries';
 import { LOGSTREAM_IDENTIFIER_INTERNAL, LOG_IDENTIFIER_INTERNAL } from './datasource';
 import {
+  CloudWatchAnnotationQuery,
   CloudWatchLogsQueryStatus,
   CloudWatchMetricsQuery,
   CloudWatchQuery,
@@ -35,6 +37,15 @@ import {
   MetricQueryType,
 } from './types';
 
+const mockTimeRange = {
+  from: dateTime(1546372800000),
+  to: dateTime(1546380000000),
+  raw: {
+    from: dateTime(1546372800000),
+    to: dateTime(1546380000000),
+  },
+};
+
 describe('datasource', () => {
   describe('query', () => {
     it('should return error if log query and log groups is not specified', async () => {
@@ -310,6 +321,53 @@ describe('datasource', () => {
     });
   });
 
+  describe('annotation query', () => {
+    const query: DataQueryRequest<CloudWatchAnnotationQuery> = {
+      range: mockTimeRange,
+      rangeRaw: mockTimeRange.raw,
+      targets: [
+        {
+          actionPrefix: '',
+          alarmNamePrefix: '',
+          datasource: { type: 'cloudwatch' },
+          dimensions: { InstanceId: 'i-12345678' },
+          matchExact: true,
+          metricName: 'CPUUtilization',
+          period: '300',
+          prefixMatching: false,
+          queryMode: 'Annotations',
+          refId: 'Anno',
+          namespace: `$${namespaceVariable.name}`,
+          region: `$${regionVariable.name}`,
+          statistic: 'Average',
+        },
+      ],
+      requestId: '',
+      interval: '',
+      intervalMs: 0,
+      scopedVars: {},
+      timezone: '',
+      app: '',
+      startTime: 0,
+    };
+
+    it('should issue the correct query', async () => {
+      const { datasource, fetchMock } = setupMockedDataSource({ variables: [namespaceVariable, regionVariable] });
+      await expect(datasource.query(query)).toEmitValuesWith(() => {
+        expect(fetchMock.mock.calls[0][0].data.queries[0]).toMatchObject(
+          expect.objectContaining({
+            region: regionVariable.current.value,
+            namespace: namespaceVariable.current.value,
+            metricName: query.targets[0].metricName,
+            dimensions: { InstanceId: ['i-12345678'] },
+            statistic: query.targets[0].statistic,
+            period: query.targets[0].period,
+          })
+        );
+      });
+    });
+  });
+
   describe('resource requests', () => {
     it('should map resource response to metric response', async () => {
       const datasource = setupMockedDataSource().datasource;

public/app/plugins/datasource/cloudwatch/datasource.ts

@@ -339,7 +339,7 @@ export class CloudWatchDatasource
         namespace: this.templateSrv.replace(query.namespace),
         metricName: this.templateSrv.replace(query.metricName),
         dimensions: this.convertDimensionFormat(query.dimensions ?? {}, {}),
-        period: query.period ? parseInt(query.period, 10) : 300,
+        period: query.period ?? '',
         actionPrefix: query.actionPrefix ?? '',
         alarmNamePrefix: query.alarmNamePrefix ?? '',
         type: 'annotationQuery',