feat(cloudwatch): time range support for GraphWidget (aws#14659)

The `setPeriodToTimeRange` property affects number (SingleValue), bar, and pie charts. If set, it displays all data points in the time range in the bar/pie chart, instead of only the most recent value. Support for this property for `SingleValueWidget` was introduced way back in aws#4649, but was never added to `GraphWidget`. ---- *By submitting this pull request, I confirm that my contribution is made under the terms of the Apache-2.0 license*
hollanddd · Aug 26, 2021 · 3fccfe6 · 3fccfe6
1 parent 2b16e43
commit 3fccfe6
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 3 deletions.
diff --git a/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts b/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts
@@ -213,6 +213,16 @@ export interface GraphWidgetProps extends MetricWidgetProps {
    * @default TimeSeries
    */
   readonly view?: GraphWidgetView;
+
+  /**
+   * Whether to show the value from the entire time range. Only applicable for Bar and Pie charts.
+   *
+   * If false, values will be from the most recent period of your chosen time range;
+   * if true, shows the value from the entire time range.
+   *
+   * @default false
+   */
+  readonly setPeriodToTimeRange?: boolean;
 }
 
 /**
@@ -276,6 +286,7 @@ export class GraphWidget extends ConcreteWidget {
         },
         legend: this.props.legendPosition !== undefined ? { position: this.props.legendPosition } : undefined,
         liveData: this.props.liveData,
+        setPeriodToTimeRange: this.props.setPeriodToTimeRange,
       },
     }];
   }
@@ -447,4 +458,4 @@ function mapAnnotation(yAxis: string): ((x: HorizontalAnnotation) => any) {
   return (a: HorizontalAnnotation) => {
     return { ...a, yAxis };
   };
-}
+}
diff --git a/packages/@aws-cdk/aws-cloudwatch/test/integ.math-alarm-and-dashboard.expected.json b/packages/@aws-cdk/aws-cloudwatch/test/integ.math-alarm-and-dashboard.expected.json
@@ -116,7 +116,25 @@
                   "QueueName"
                 ]
               },
-              "\",{\"label\":\"NotVisible Messages\",\"period\":30,\"yAxis\":\"right\"}]],\"annotations\":{\"horizontal\":[{\"label\":\"Total Messages >= 100 for 3 datapoints within 3 minutes\",\"value\":100,\"yAxis\":\"left\"}]},\"yAxis\":{}}},{\"type\":\"metric\",\"width\":6,\"height\":3,\"x\":0,\"y\":12,\"properties\":{\"view\":\"singleValue\",\"title\":\"Current total messages in queue\",\"region\":\"",
+              "\",{\"label\":\"NotVisible Messages\",\"period\":30,\"yAxis\":\"right\"}]],\"annotations\":{\"horizontal\":[{\"label\":\"Total Messages >= 100 for 3 datapoints within 3 minutes\",\"value\":100,\"yAxis\":\"left\"}]},\"yAxis\":{}}},{\"type\":\"metric\",\"width\":6,\"height\":6,\"x\":0,\"y\":12,\"properties\":{\"view\":\"pie\",\"title\":\"Percentage of messages in each queue as pie chart\",\"region\":\"",
+              {
+                "Ref": "AWS::Region"
+              },
+              "\",\"metrics\":[[\"AWS/SQS\",\"ApproximateNumberOfMessagesVisible\",\"QueueName\",\"",
+              {
+                "Fn::GetAtt": [
+                  "queue",
+                  "QueueName"
+                ]
+              },
+              "\",{\"label\":\"Visible Messages\",\"period\":10}],[\"AWS/SQS\",\"ApproximateNumberOfMessagesNotVisible\",\"QueueName\",\"",
+              {
+                "Fn::GetAtt": [
+                  "queue",
+                  "QueueName"
+                ]
+              },
+              "\",{\"label\":\"NotVisible Messages\",\"period\":30}]],\"yAxis\":{},\"setPeriodToTimeRange\":true}},{\"type\":\"metric\",\"width\":6,\"height\":3,\"x\":0,\"y\":18,\"properties\":{\"view\":\"singleValue\",\"title\":\"Current total messages in queue\",\"region\":\"",
               {
                 "Ref": "AWS::Region"
               },

diff --git a/packages/@aws-cdk/aws-cloudwatch/test/integ.math-alarm-and-dashboard.ts b/packages/@aws-cdk/aws-cloudwatch/test/integ.math-alarm-and-dashboard.ts
@@ -59,6 +59,13 @@ dashboard.addWidgets(new cloudwatch.GraphWidget({
   leftAnnotations: [alarm.toAnnotation()],
 }));
 
+dashboard.addWidgets(new cloudwatch.GraphWidget({
+  title: 'Percentage of messages in each queue as pie chart',
+  left: [metricA, metricB],
+  view: cloudwatch.GraphWidgetView.PIE,
+  setPeriodToTimeRange: true,
+}));
+
 dashboard.addWidgets(new cloudwatch.SingleValueWidget({
   title: 'Current total messages in queue',
   metrics: [sumExpression],

diff --git a/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts b/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts
@@ -660,4 +660,32 @@ export = {
 
     test.done();
   },
-};
+
+  'add setPeriodToTimeRange to GraphWidget'(test: Test) {
+    // GIVEN
+    const stack = new Stack();
+    const widget = new GraphWidget({
+      left: [new Metric({ namespace: 'CDK', metricName: 'Test' })],
+      view: GraphWidgetView.PIE,
+      setPeriodToTimeRange: true,
+    });
+
+    // THEN
+    test.deepEqual(stack.resolve(widget.toJson()), [{
+      type: 'metric',
+      width: 6,
+      height: 6,
+      properties: {
+        view: 'pie',
+        region: { Ref: 'AWS::Region' },
+        metrics: [
+          ['CDK', 'Test'],
+        ],
+        yAxis: {},
+        setPeriodToTimeRange: true,
+      },
+    }]);
+
+    test.done();
+  },
+};