CloudWatch: Fix - make sure dimensions are propagated to alert query editor (#58281)

* fix(unified-alerting/cloudwatch): propagate dimensions to alert

Signed-off-by: Conor Evans <coevans@tcd.ie>

* add unit test

Signed-off-by: Conor Evans <coevans@tcd.ie>
Co-authored-by: Erik Sundell <erik.sundell87@gmail.com>

public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.test.tsx

@@ -55,6 +55,24 @@ describe('Dimensions', () => {
     });
   });
 
+  describe('when rendered with two existing dimensions and values are represented as arrays', () => {
+    it('should render two filter items', async () => {
+      props.query.dimensions = {
+        InstanceId: ['*'],
+        InstanceGroup: ['Group1'],
+      };
+      render(<Dimensions {...props} metricStat={props.query} dimensionKeys={[]} />);
+      const filterItems = screen.getAllByTestId('cloudwatch-dimensions-filter-item');
+      expect(filterItems.length).toBe(2);
+
+      expect(within(filterItems[0]).getByText('InstanceId')).toBeInTheDocument();
+      expect(within(filterItems[0]).getByText('*')).toBeInTheDocument();
+
+      expect(within(filterItems[1]).getByText('InstanceGroup')).toBeInTheDocument();
+      expect(within(filterItems[1]).getByText('Group1')).toBeInTheDocument();
+    });
+  });
+
   describe('when adding a new filter item', () => {
     it('it should add the new item but not call onChange', async () => {
       props.query.dimensions = {};

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

@@ -25,15 +25,32 @@ export interface DimensionFilterCondition {
 
 const dimensionsToFilterConditions = (dimensions: DimensionsType | undefined) =>
   Object.entries(dimensions ?? {}).reduce<DimensionFilterCondition[]>((acc, [key, value]) => {
-    if (value && typeof value === 'string') {
+    if (!value) {
+      return acc;
+    }
+
+    // Previously, we only appended to the `acc`umulated dimensions if the value was a string.
+    // However, Cloudwatch can present dimensions with single-value arrays, e.g.
+    //   k: FunctionName
+    //   v: ['MyLambdaFunction']
+    // in which case we grab the single-value from the Array and use that as the value.
+    let v = '';
+    if (typeof value === 'string') {
+      v = value;
+    } else if (Array.isArray(value) && typeof value[0] === 'string') {
+      v = value[0];
+    }
+
+    if (!v) {
+      return acc;
+    }
+
     const filter = {
-        key,
-        value,
+      key: key,
+      value: v,
       operator: '=',
     };
     return [...acc, filter];
-    }
-    return acc;
   }, []);
 
 const filterConditionsToDimensions = (filters: DimensionFilterCondition[]) => {