cloudwatch: GaugeWidget with annotations produces invalid JSON

[jSherz]

Describe the bug

Hey folks,

Consider the following GaugeWidget:

new GaugeWidget({
  title: "My gauge widget",
  metrics: new Metric({
    namespace: "AWS/VPN",
    metricName: "TunnelState",
    dimensionsMap: {
      TunnelIpAddress: "123.123.123.123",
    },
    statistic: "Minimum",
  }),
  leftYAxis: {
    min: 0,
    max: 1,
  },
  annotations: [
    {
      color: "#b2df8d",
      label: "Up",
      value: 1,
      fill: Shading.ABOVE,
    },
  ],
  statistic: "Minimum",
  period: Duration.minutes(1),
  width: 6,
  height: 6,
});

This will be converted to the following JSON:

{
  "type": "metric",
  "width": 6,
  "height": 6,
  "x": 0,
  "y": 0,
  "properties": {
    "view": "gauge",
    "title": "My gauge widget",
    "region": "eu-west-1",
    "metrics": [["AWS/VPN", "TunnelState", "TunnelIpAddress", "123.123.123.123"]],
    "annotations": {
      "horizontal": [
        {
          "color": "#b2df8d",
          "label": "Up",
          "value": 1,
          "fill": "above",
          "yAxis": "annotations"
        }
      ]
    },
    "yAxis": { "left": { "min": 0, "max": 1 } },
    "period": 60,
    "stat": "Minimum"
  }
}

The "yAxis" value is "annotations" as a result of:

aws-cdk/packages/aws-cdk-lib/aws-cloudwatch/lib/graph.ts

Line 237 in 4038274

...(this.props.annotations || []).map(mapAnnotation('annotations')),

- this is invalid and yields the following error (in this case, the error was three separate gauge charts):

The dashboard body is invalid, there are 3 validation errors: [ { "dataPath": "/widgets/0/properties", "message": "Should match exactly one schema in oneOf" }, { "dataPath": "/widgets/1/properties", "message": "Should match exactly one schema in oneOf" }, { "dataPath": "/widgets/2/properties", "message": "Should match exactly one schema in oneOf" } ]

Expected Behavior

The JSON should've been generated with a value that's accepted by CloudWatch.

Current Behavior

See above - the annotations contain an invalid yAxis.

Reproduction Steps

See snippet above.

Possible Solution

Add test cases for GauageWidget with annotations. Emit a valid yAxis.

Additional Information/Context

No response

CDK CLI Version

2.75.0 (build 37c53d6)

Framework Version

No response

Node.js Version

v18.16.0

OS

MacOS 13.3.1

Language

Typescript

Language Version

No response

Other information

#22213

[pahud]

Yes I can reproduce this with the following code:

export class Demo2Stack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const dashboard = new cloudwatch.Dashboard(this, 'Dashboard');

    const widget = new cloudwatch.GaugeWidget({
      title: "My gauge widget",
      metrics: [ new cloudwatch.Metric({
        namespace: "AWS/VPN",
        metricName: "TunnelState",
        dimensionsMap: {
          TunnelIpAddress: "123.123.123.123",
        },
        statistic: "Minimum",
      })],
      leftYAxis: {
        min: 0,
        max: 1,
      },
      annotations: [
        {
          color: "#b2df8d",
          label: "Up",
          value: 1,
          fill: cloudwatch.Shading.ABOVE,
        },
      ],
      statistic: "Minimum",
      period: Duration.minutes(1),
      width: 6,
      height: 6,
    });
    dashboard.addWidgets(widget);
  }
}

And I got the error on cdk deploy:

The dashboard body is invalid, there are 1 validation errors:
[
  {
    "dataPath": "/widgets/0/properties",
    "message": "Should match exactly one schema in oneOf"
  }
] (Service: AmazonCloudWatch; Status Code: 400; Error Code: InvalidParameterInput; Request ID: b0be3ca4-3ffe-4d71-904d-5add3a8f9173; Proxy: null)

[hotmori]

Yep, the same for me when I add horizontal annotations for gauge widget: AWS support team confirmed the bug as well.

[fokkobucys]

Same for me. If you drop the annotations everything works fine. But this gives us not the possibility to add areas for a DevOps dashboard.

[anjapsson]

Same for me!

[brentcetinich]

Same for me, its broken.

[scanlonp]

Creating a gauge widget on the console and looking at the source shows that the annotations do not have a yAxis property. This looks like it should not have been added in the first place. Will open a PR to fix this.

[kellertk]

Hi there! Thanks to all the people that commented, but if your comment is just that you are having a similar problem, please instead use the 👍 reaction on the top comment. Sorting by reactions is one data point we use to prioritize our issue backlog.

We're working on this one now :)

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.