Skip to content

Commit

Permalink
feat(cloudwatch): support all Y-Axis properties (#2406)
Browse files Browse the repository at this point in the history 
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`.
  • Loading branch information
@kpiljoong @rix0rrr
kpiljoong authored and rix0rrr committed May 24, 2019
1 parent 7fa68fa commit 8904c3e
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 44 deletions.
76 changes: 42 additions & 34 deletions packages/@aws-cdk/aws-cloudwatch/lib/graph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -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;
}

/**
Expand Down Expand Up @@ -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
}
}
}];
Expand Down Expand Up @@ -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;
}

/**
Expand Down Expand Up @@ -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,
}
}
}];
Expand Down Expand Up @@ -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
*/
Expand Down
4 changes: 2 additions & 2 deletions packages/@aws-cdk/aws-cloudwatch/test/integ.alarm-and-dashboard.expected.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/@aws-cdk/aws-cloudwatch/test/test.dashboard.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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\":{}}}]}"
]]}
}));

Expand Down Expand Up @@ -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\":{}}}]}"
]]}
}));

Expand Down
57 changes: 51 additions & 6 deletions packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export = {
['CDK', 'Tast', { yAxis: 'right', period: 300, stat: 'Average' }]
],
annotations: { horizontal: [] },
yAxis: { left: { min: 0 }, right: { min: 0 } }
yAxis: {}
}
}]);

Expand All @@ -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: {}
}
}]);

Expand All @@ -83,7 +83,7 @@ export = {
region: { Ref: 'AWS::Region' },
metrics: [
['CDK', 'Test', { yAxis: 'left', period: 300, stat: 'Average' }],
],
]
}
}]);

Expand Down Expand Up @@ -115,7 +115,7 @@ export = {
annotations: {
alarms: [{ 'Fn::GetAtt': [ 'Alarm7103F465', 'Arn' ] }]
},
yAxis: { left: { min: 0 } }
yAxis: {}
}
}]);

Expand Down Expand Up @@ -157,7 +157,7 @@ export = {
fill: 'below',
label: 'this is the annotation',
}] },
yAxis: { left: { min: 0 }, right: { min: 0 } }
yAxis: {}
}
}]);

Expand Down Expand Up @@ -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 } }
}
}]);

Expand Down

0 comments on commit 8904c3e

Please sign in to comment.