diff --git a/packages/@aws-cdk/aws-cloudwatch/README.md b/packages/@aws-cdk/aws-cloudwatch/README.md index 275ba8cf31da9..a7e007a05df07 100644 --- a/packages/@aws-cdk/aws-cloudwatch/README.md +++ b/packages/@aws-cdk/aws-cloudwatch/README.md @@ -508,6 +508,17 @@ dashboard.addWidgets(new cloudwatch.TextWidget({ })); ``` +Optionally set the TextWidget background to be transparent + +```ts +declare const dashboard: cloudwatch.Dashboard; + +dashboard.addWidgets(new cloudwatch.TextWidget({ + markdown: '# Key Performance Indicators', + background: TextWidgetBackground.TRANSPARENT +})); +``` + ### Alarm Status widget An alarm status widget displays instantly the status of any type of alarms and gives the diff --git a/packages/@aws-cdk/aws-cloudwatch/lib/text.ts b/packages/@aws-cdk/aws-cloudwatch/lib/text.ts index 1e637cfd72eb1..d273ffa9c94d6 100644 --- a/packages/@aws-cdk/aws-cloudwatch/lib/text.ts +++ b/packages/@aws-cdk/aws-cloudwatch/lib/text.ts @@ -1,5 +1,19 @@ import { ConcreteWidget } from './widget'; +/** + * Background types available + */ +export enum TextWidgetBackground { + /** + * Solid background + */ + SOLID = 'solid', + /** + * Transparent background + */ + TRANSPARENT = 'transparent' +} + /** * Properties for a Text widget */ @@ -22,6 +36,13 @@ export interface TextWidgetProps { * @default 2 */ readonly height?: number; + + /** + * Background for the widget + * + * @default solid + */ + readonly background?: TextWidgetBackground; } /** @@ -29,10 +50,12 @@ export interface TextWidgetProps { */ export class TextWidget extends ConcreteWidget { private readonly markdown: string; + private readonly background?: TextWidgetBackground; constructor(props: TextWidgetProps) { super(props.width || 6, props.height || 2); this.markdown = props.markdown; + this.background = props.background; } public position(x: number, y: number): void { @@ -49,6 +72,7 @@ export class TextWidget extends ConcreteWidget { y: this.y, properties: { markdown: this.markdown, + background: this.background, }, }]; } diff --git a/packages/@aws-cdk/aws-cloudwatch/test/dashboard.test.ts b/packages/@aws-cdk/aws-cloudwatch/test/dashboard.test.ts index 4a805734655bd..cf4c123e0171c 100644 --- a/packages/@aws-cdk/aws-cloudwatch/test/dashboard.test.ts +++ b/packages/@aws-cdk/aws-cloudwatch/test/dashboard.test.ts @@ -1,6 +1,6 @@ import { Template, Annotations, Match } from '@aws-cdk/assertions'; import { App, Stack } from '@aws-cdk/core'; -import { Dashboard, GraphWidget, PeriodOverride, TextWidget, MathExpression } from '../lib'; +import { Dashboard, GraphWidget, PeriodOverride, TextWidget, MathExpression, TextWidgetBackground } from '../lib'; describe('Dashboard', () => { test('widgets in different adds are laid out underneath each other', () => { @@ -13,11 +13,13 @@ describe('Dashboard', () => { width: 10, height: 2, markdown: 'first', + background: TextWidgetBackground.SOLID, })); dashboard.addWidgets(new TextWidget({ width: 1, height: 4, markdown: 'second', + background: TextWidgetBackground.TRANSPARENT, })); dashboard.addWidgets(new TextWidget({ width: 4, @@ -30,8 +32,8 @@ describe('Dashboard', () => { expect(Object.keys(resources).length).toEqual(1); const key = Object.keys(resources)[0]; hasWidgets(resources[key].Properties, [ - { type: 'text', width: 10, height: 2, x: 0, y: 0, properties: { markdown: 'first' } }, - { type: 'text', width: 1, height: 4, x: 0, y: 2, properties: { markdown: 'second' } }, + { type: 'text', width: 10, height: 2, x: 0, y: 0, properties: { markdown: 'first', background: TextWidgetBackground.SOLID } }, + { type: 'text', width: 1, height: 4, x: 0, y: 2, properties: { markdown: 'second', background: TextWidgetBackground.TRANSPARENT } }, { type: 'text', width: 4, height: 1, x: 0, y: 6, properties: { markdown: 'third' } }, ]); diff --git a/packages/@aws-cdk/aws-cloudwatch/test/integ.dashboard.js.snapshot/DashboardIntegrationTestStack.template.json b/packages/@aws-cdk/aws-cloudwatch/test/integ.dashboard.js.snapshot/DashboardIntegrationTestStack.template.json index 843bd580f03ff..cce2e902ed631 100644 --- a/packages/@aws-cdk/aws-cloudwatch/test/integ.dashboard.js.snapshot/DashboardIntegrationTestStack.template.json +++ b/packages/@aws-cdk/aws-cloudwatch/test/integ.dashboard.js.snapshot/DashboardIntegrationTestStack.template.json @@ -3,7 +3,7 @@ "DashCCD7F836": { "Type": "AWS::CloudWatch::Dashboard", "Properties": { - "DashboardBody": "{\"widgets\":[]}" + "DashboardBody": "{\"widgets\":[{\"type\":\"text\",\"width\":6,\"height\":2,\"x\":0,\"y\":0,\"properties\":{\"markdown\":\"I don't have a background\",\"background\":\"transparent\"}}]}" } } }, diff --git a/packages/@aws-cdk/aws-cloudwatch/test/integ.dashboard.ts b/packages/@aws-cdk/aws-cloudwatch/test/integ.dashboard.ts index bbc8603e98045..8b54cd204e2ec 100644 --- a/packages/@aws-cdk/aws-cloudwatch/test/integ.dashboard.ts +++ b/packages/@aws-cdk/aws-cloudwatch/test/integ.dashboard.ts @@ -1,6 +1,7 @@ import * as cdk from '@aws-cdk/core'; import * as integ from '@aws-cdk/integ-tests'; import * as cloudwatch from '../lib'; +import { TextWidgetBackground } from '../lib'; const app = new cdk.App(); @@ -8,6 +9,11 @@ const stack = new cdk.Stack(app, 'DashboardIntegrationTestStack'); const dashboard = new cloudwatch.Dashboard(stack, 'Dash'); +dashboard.addWidgets(new cloudwatch.TextWidget({ + markdown: 'I don\'t have a background', + background: TextWidgetBackground.TRANSPARENT, +})); + new cdk.CfnOutput(stack, 'DashboardArn', { value: dashboard.dashboardArn, });