feat(cloudwatch): add methods for lazy addition of graph metrics (#11380

)

Resolves #11305 

----

*By submitting this pull request, I confirm that my contribution is made under the terms of the Apache-2.0 license*

packages/@aws-cdk/aws-cloudwatch/README.md

@@ -251,6 +251,8 @@ dashboard.addWidgets(new GraphWidget({
 }));
 ```
 
+Using the methods `addLeftMetric()` and `addRightMetric()` you can add metrics to a graph widget later on.
+
 Graph widgets can also display annotations attached to the left or the right y-axis.
 
 ```ts

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

@@ -219,11 +219,35 @@ export interface GraphWidgetProps extends MetricWidgetProps {
  * A dashboard widget that displays metrics
  */
 export class GraphWidget extends ConcreteWidget {
+
   private readonly props: GraphWidgetProps;
 
+  private readonly leftMetrics: IMetric[];
+  private readonly rightMetrics: IMetric[];
+
   constructor(props: GraphWidgetProps) {
     super(props.width || 6, props.height || 6);
     this.props = props;
+    this.leftMetrics = props.left ?? [];
+    this.rightMetrics = props.right ?? [];
+  }
+
+  /**
+   * Add another metric to the left Y axis of the GraphWidget
+   *
+   * @param metric the metric to add
+   */
+  public addLeftMetric(metric: IMetric) {
+    this.leftMetrics.push(metric);
+  }
+
+  /**
+   * Add another metric to the right Y axis of the GraphWidget
+   *
+   * @param metric the metric to add
+   */
+  public addRightMetric(metric: IMetric) {
+    this.rightMetrics.push(metric);
   }
 
   public toJson(): any[] {
@@ -232,7 +256,7 @@ export class GraphWidget extends ConcreteWidget {
       ...(this.props.rightAnnotations || []).map(mapAnnotation('right')),
     ];
 
-    const metrics = allMetricsGraphJson(this.props.left || [], this.props.right || []);
+    const metrics = allMetricsGraphJson(this.leftMetrics, this.rightMetrics);
     return [{
       type: 'metric',
       width: this.width,

packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts

@@ -61,6 +61,35 @@ export = {
     test.done();
   },
 
+  'add metrics to graphs on either axis lazily'(test: Test) {
+    // WHEN
+    const stack = new Stack();
+    const widget = new GraphWidget({
+      title: 'My fancy graph',
+    });
+    widget.addLeftMetric(new Metric({ namespace: 'CDK', metricName: 'Test' }));
+    widget.addRightMetric(new Metric({ namespace: 'CDK', metricName: 'Tast' }));
+
+    // THEN
+    test.deepEqual(stack.resolve(widget.toJson()), [{
+      type: 'metric',
+      width: 6,
+      height: 6,
+      properties: {
+        view: 'timeSeries',
+        title: 'My fancy graph',
+        region: { Ref: 'AWS::Region' },
+        metrics: [
+          ['CDK', 'Test'],
+          ['CDK', 'Tast', { yAxis: 'right' }],
+        ],
+        yAxis: {},
+      },
+    }]);
+
+    test.done();
+  },
+
   'label and color are respected in constructor'(test: Test) {
     // WHEN
     const stack = new Stack();