From 8904c3e57e9118b4fcac22d52a924559076927b9 Mon Sep 17 00:00:00 2001 From: Piljoong Kim Date: Fri, 24 May 2019 20:52:36 +0900 Subject: [PATCH] feat(cloudwatch): support all Y-Axis properties (#2406) Support setting for the y-axis on a graph: min, max, label, and showUnits. Fixes #2385. BREAKING CHANGE: rename `leftAxisRange` => `leftYAxis`, `rightAxisRange` => `rightYAxis`, rename `YAxisRange` => `YAxisProps`. --- packages/@aws-cdk/aws-cloudwatch/lib/graph.ts | 76 ++++++++++--------- .../integ.alarm-and-dashboard.expected.json | 4 +- .../aws-cloudwatch/test/test.dashboard.ts | 4 +- .../aws-cloudwatch/test/test.graphs.ts | 57 ++++++++++++-- 4 files changed, 97 insertions(+), 44 deletions(-) diff --git a/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts b/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts index fb28630a4bae3..249d0c0a739ed 100644 --- a/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts +++ b/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts @@ -35,6 +35,39 @@ export interface MetricWidgetProps { readonly height?: number; } +/** + * Properties for a Y-Axis + */ +export interface YAxisProps { + /** + * The min value + * + * @default 0 + */ + readonly min?: number; + + /** + * The max value + * + * @default No maximum value + */ + readonly max?: number; + + /** + * The label + * + * @default No label + */ + readonly label?: string; + + /** + * Whether to show units + * + * @default true + */ + readonly showUnits?: boolean; +} + /** * Properties for an AlarmWidget */ @@ -45,11 +78,9 @@ export interface AlarmWidgetProps extends MetricWidgetProps { readonly alarm: Alarm; /** - * Range of left Y axis - * - * @default 0..automatic + * Left Y axis */ - readonly leftAxisRange?: YAxisRange; + readonly leftYAxis?: YAxisProps; } /** @@ -78,7 +109,7 @@ export class AlarmWidget extends ConcreteWidget { alarms: [this.props.alarm.alarmArn] }, yAxis: { - left: this.props.leftAxisRange !== undefined ? this.props.leftAxisRange : { min: 0 } + left: this.props.leftYAxis !== undefined ? this.props.leftYAxis : undefined } } }]; @@ -115,18 +146,14 @@ export interface GraphWidgetProps extends MetricWidgetProps { readonly stacked?: boolean; /** - * Range of left Y axis - * - * @default 0..automatic + * Left Y axis */ - readonly leftAxisRange?: YAxisRange; + readonly leftYAxis?: YAxisProps; /** - * Range of right Y axis - * - * @default 0..automatic + * Right Y axis */ - readonly rightAxisRange?: YAxisRange; + readonly rightYAxis?: YAxisProps; } /** @@ -158,8 +185,8 @@ export class GraphWidget extends ConcreteWidget { (this.props.rightAnnotations || []).map(mapAnnotation('right'))) }, yAxis: { - left: this.props.leftAxisRange !== undefined ? this.props.leftAxisRange : { min: 0 }, - right: this.props.rightAxisRange !== undefined ? this.props.rightAxisRange : { min: 0 }, + left: this.props.leftYAxis !== undefined ? this.props.leftYAxis : undefined, + right: this.props.rightYAxis !== undefined ? this.props.rightYAxis : undefined, } } }]; @@ -204,25 +231,6 @@ export class SingleValueWidget extends ConcreteWidget { } } -/** - * A minimum and maximum value for either the left or right Y axis - */ -export interface YAxisRange { - /** - * The minimum value - * - * @default Automatic - */ - readonly min?: number; - - /** - * The maximum value - * - * @default Automatic - */ - readonly max?: number; -} - /** * Horizontal annotation to be added to a graph */ diff --git a/packages/@aws-cdk/aws-cloudwatch/test/integ.alarm-and-dashboard.expected.json b/packages/@aws-cdk/aws-cloudwatch/test/integ.alarm-and-dashboard.expected.json index 23cffe3022390..884254139bb11 100644 --- a/packages/@aws-cdk/aws-cloudwatch/test/integ.alarm-and-dashboard.expected.json +++ b/packages/@aws-cdk/aws-cloudwatch/test/integ.alarm-and-dashboard.expected.json @@ -45,7 +45,7 @@ "Arn" ] }, - "\"]},\"yAxis\":{\"left\":{\"min\":0}}}},{\"type\":\"metric\",\"width\":6,\"height\":6,\"x\":0,\"y\":8,\"properties\":{\"view\":\"timeSeries\",\"title\":\"More messages in queue with alarm annotation\",\"region\":\"", + "\"]},\"yAxis\":{}}},{\"type\":\"metric\",\"width\":6,\"height\":6,\"x\":0,\"y\":8,\"properties\":{\"view\":\"timeSeries\",\"title\":\"More messages in queue with alarm annotation\",\"region\":\"", { "Ref": "AWS::Region" }, @@ -56,7 +56,7 @@ "QueueName" ] }, - "\",{\"yAxis\":\"left\",\"period\":300,\"stat\":\"Average\"}]],\"annotations\":{\"horizontal\":[{\"label\":\"ApproximateNumberOfMessagesVisible >= 100 for 3 datapoints within 15 minutes\",\"value\":100,\"yAxis\":\"left\"}]},\"yAxis\":{\"left\":{\"min\":0},\"right\":{\"min\":0}}}},{\"type\":\"metric\",\"width\":6,\"height\":3,\"x\":0,\"y\":14,\"properties\":{\"view\":\"singleValue\",\"title\":\"Current messages in queue\",\"region\":\"", + "\",{\"yAxis\":\"left\",\"period\":300,\"stat\":\"Average\"}]],\"annotations\":{\"horizontal\":[{\"label\":\"ApproximateNumberOfMessagesVisible >= 100 for 3 datapoints within 15 minutes\",\"value\":100,\"yAxis\":\"left\"}]},\"yAxis\":{}}},{\"type\":\"metric\",\"width\":6,\"height\":3,\"x\":0,\"y\":14,\"properties\":{\"view\":\"singleValue\",\"title\":\"Current messages in queue\",\"region\":\"", { "Ref": "AWS::Region" }, diff --git a/packages/@aws-cdk/aws-cloudwatch/test/test.dashboard.ts b/packages/@aws-cdk/aws-cloudwatch/test/test.dashboard.ts index 94c91e29955d4..ca2c46f0b018d 100644 --- a/packages/@aws-cdk/aws-cloudwatch/test/test.dashboard.ts +++ b/packages/@aws-cdk/aws-cloudwatch/test/test.dashboard.ts @@ -85,7 +85,7 @@ export = { DashboardBody: { "Fn::Join": [ "", [ "{\"widgets\":[{\"type\":\"metric\",\"width\":1,\"height\":1,\"x\":0,\"y\":0,\"properties\":{\"view\":\"timeSeries\",\"region\":\"", { Ref: "AWS::Region" }, - "\",\"metrics\":[],\"annotations\":{\"horizontal\":[]},\"yAxis\":{\"left\":{\"min\":0},\"right\":{\"min\":0}}}}]}" + "\",\"metrics\":[],\"annotations\":{\"horizontal\":[]},\"yAxis\":{}}}]}" ]]} })); @@ -113,7 +113,7 @@ export = { "{\"start\":\"-9H\",\"end\":\"2018-12-17T06:00:00.000Z\",\"periodOverride\":\"inherit\",\ \"widgets\":[{\"type\":\"metric\",\"width\":1,\"height\":1,\"x\":0,\"y\":0,\"properties\":{\"view\":\"timeSeries\",\"region\":\"", { Ref: "AWS::Region" }, - "\",\"metrics\":[],\"annotations\":{\"horizontal\":[]},\"yAxis\":{\"left\":{\"min\":0},\"right\":{\"min\":0}}}}]}" + "\",\"metrics\":[],\"annotations\":{\"horizontal\":[]},\"yAxis\":{}}}]}" ]]} })); diff --git a/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts b/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts index 8a3073ffd0750..45534b3bc06a6 100644 --- a/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts +++ b/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts @@ -30,7 +30,7 @@ export = { ['CDK', 'Tast', { yAxis: 'right', period: 300, stat: 'Average' }] ], annotations: { horizontal: [] }, - yAxis: { left: { min: 0 }, right: { min: 0 } } + yAxis: {} } }]); @@ -56,7 +56,7 @@ export = { ['CDK', 'Test', { yAxis: 'left', period: 300, stat: 'Average', label: 'MyMetric', color: '000000' }], ], annotations: { horizontal: [] }, - yAxis: { left: { min: 0 }, right: { min: 0 } } + yAxis: {} } }]); @@ -83,7 +83,7 @@ export = { region: { Ref: 'AWS::Region' }, metrics: [ ['CDK', 'Test', { yAxis: 'left', period: 300, stat: 'Average' }], - ], + ] } }]); @@ -115,7 +115,7 @@ export = { annotations: { alarms: [{ 'Fn::GetAtt': [ 'Alarm7103F465', 'Arn' ] }] }, - yAxis: { left: { min: 0 } } + yAxis: {} } }]); @@ -157,7 +157,7 @@ export = { fill: 'below', label: 'this is the annotation', }] }, - yAxis: { left: { min: 0 }, right: { min: 0 } } + yAxis: {} } }]); @@ -199,7 +199,52 @@ export = { label: 'Test >= 1000 for 2 datapoints within 10 minutes', }] }, - yAxis: { left: { min: 0 }, right: { min: 0 } } + yAxis: {} + } + }]); + + test.done(); + }, + + 'add yAxis to graph'(test: Test) { + // WHEN + const stack = new Stack(); + const widget = new GraphWidget({ + title: 'My fancy graph', + left: [ + new Metric({ namespace: 'CDK', metricName: 'Test' }) + ], + right: [ + new Metric({ namespace: 'CDK', metricName: 'Tast' }) + ], + leftYAxis: ({ + label: "Left yAxis", + max: 100 + }), + rightYAxis: ({ + label: "Right yAxis", + min: 10, + showUnits: false + }) + }); + + // THEN + test.deepEqual(stack.node.resolve(widget.toJson()), [{ + type: 'metric', + width: 6, + height: 6, + properties: { + view: 'timeSeries', + title: 'My fancy graph', + region: { Ref: 'AWS::Region' }, + metrics: [ + ['CDK', 'Test', { yAxis: 'left', period: 300, stat: 'Average' }], + ['CDK', 'Tast', { yAxis: 'right', period: 300, stat: 'Average' }] + ], + annotations: { horizontal: [] }, + yAxis: { + left: { label: "Left yAxis", max: 100 }, + right: { label: "Right yAxis", min: 10, showUnits: false } } } }]);