From 23df2b933f88d6e37b48328518fd7403e7916e4d Mon Sep 17 00:00:00 2001 From: Nick Lynch Date: Wed, 12 May 2021 12:04:06 +0100 Subject: [PATCH] feat(cloudwatch): time range support for GraphWidget 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 #4649, but was never added to `GraphWidget`. --- packages/@aws-cdk/aws-cloudwatch/lib/graph.ts | 13 +++++++- ...teg.math-alarm-and-dashboard.expected.json | 20 ++++++++++++- .../test/integ.math-alarm-and-dashboard.ts | 7 +++++ .../aws-cloudwatch/test/test.graphs.ts | 30 ++++++++++++++++++- 4 files changed, 67 insertions(+), 3 deletions(-) diff --git a/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts b/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts index 98f8980db4f4b..bc6407a52f8e6 100644 --- 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 }; }; -} \ No newline at end of file +} 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 index 8e9b235bb2b65..9d6d0b5b1c4bc 100644 --- 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 index 9de88e6bc729a..5a3285d873fe8 100644 --- 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 index 7e306e2bf0691..e6420bbec1955 100644 --- 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(); }, -}; \ No newline at end of file + + '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(); + }, +};