Dashboard TextWidget background support

aws · Nov 30, 2022 · 3c4d923 · 3c4d923
1 parent 9d8f69e
commit 3c4d923
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 4 deletions.
diff --git 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
@@ -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,17 +36,26 @@ export interface TextWidgetProps {
    * @default 2
    */
   readonly height?: number;
+
+  /**
+   * Background for the widget
+   *
+   * @default solid
+   */
+  readonly background?: TextWidgetBackground;
 }
 
 /**
  * A dashboard widget that displays MarkDown
  */
 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
@@ -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/...s-cloudwatch/test/integ.dashboard.js.snapshot/DashboardIntegrationTestStack.template.json b/...s-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
@@ -1,13 +1,19 @@
 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();
 
 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,
 });