feat(cloudwatch): alarm status widget (#9456)

Add support for the alarm status widget. This widget allows you to see the status of multiple alarms in a grid view.

----

*By submitting this pull request, I confirm that my contribution is made under the terms of the Apache-2.0 license*

packages/@aws-cdk/aws-cloudwatch/README.md

@@ -230,6 +230,7 @@ The following widgets are available:
 - `AlarmWidget` -- shows the graph and alarm line for a single alarm.
 - `SingleValueWidget` -- shows the current value of a set of metrics.
 - `TextWidget` -- shows some static Markdown.
+- `AlarmStatusWidget` -- shows the status of your alarms in a grid view.
 
 ### Graph widget
 
@@ -319,6 +320,19 @@ dashboard.addWidgets(new TextWidget({
 }));
 ```
 
+### Alarm Status widget
+
+An alarm status widget displays instantly the status of any type of alarms and gives the
+ability to aggregate one or more alarms together in a small surface.
+
+```ts
+dashboard.addWidgets(
+  new AlarmStatusWidget({
+    alarms: [errorAlarm],
+  })
+);
+```
+
 ### Query results widget
 
 A `LogQueryWidget` shows the results of a query from Logs Insights:

packages/@aws-cdk/aws-cloudwatch/lib/alarm-status-widget.ts

@@ -0,0 +1,63 @@
+import { IAlarm } from './alarm-base';
+import { ConcreteWidget } from './widget';
+
+/**
+ * Properties for an Alarm Status Widget
+ */
+export interface AlarmStatusWidgetProps {
+  /**
+   * CloudWatch Alarms to show in widget
+   */
+  readonly alarms: IAlarm[];
+  /**
+   * The title of the widget
+   *
+   * @default 'Alarm Status'
+   */
+  readonly title?: string;
+  /**
+   * Width of the widget, in a grid of 24 units wide
+   *
+   * @default 6
+   */
+  readonly width?: number;
+  /**
+   * Height of the widget
+   *
+   * @default 3
+   */
+  readonly height?: number;
+}
+
+/**
+ * A dashboard widget that displays alarms in a grid view
+ */
+export class AlarmStatusWidget extends ConcreteWidget {
+  private readonly props: AlarmStatusWidgetProps;
+
+  constructor(props: AlarmStatusWidgetProps) {
+    super(props.width || 6, props.height || 3);
+    this.props = props;
+  }
+
+  public position(x: number, y: number): void {
+    this.x = x;
+    this.y = y;
+  }
+
+  public toJson(): any[] {
+    return [
+      {
+        type: 'alarm',
+        width: this.width,
+        height: this.height,
+        x: this.x,
+        y: this.y,
+        properties: {
+          title: this.props.title ? this.props.title : 'Alarm Status',
+          alarms: this.props.alarms.map((alarm) => alarm.alarmArn),
+        },
+      },
+    ];
+  }
+}

packages/@aws-cdk/aws-cloudwatch/lib/index.ts

@@ -11,6 +11,7 @@ export * from './metric-types';
 export * from './log-query';
 export * from './text';
 export * from './widget';
+export * from './alarm-status-widget';
 
 // AWS::CloudWatch CloudFormation Resources:
 export * from './cloudwatch.generated';

packages/@aws-cdk/aws-cloudwatch/test/test.alarm-status-widget.ts

@@ -0,0 +1,35 @@
+import { Stack } from '@aws-cdk/core';
+import { Test } from 'nodeunit';
+import { Metric, Alarm, AlarmStatusWidget } from '../lib';
+export = {
+  'alarm status widget'(test: Test) {
+    // GIVEN
+    const stack = new Stack();
+    const metric = new Metric({ namespace: 'CDK', metricName: 'Test' });
+    const alarm = new Alarm(stack, 'Alarm', {
+      metric,
+      threshold: 1,
+      evaluationPeriods: 1,
+    });
+
+    // WHEN
+    const widget = new AlarmStatusWidget({
+      alarms: [alarm],
+    });
+
+    // THEN
+    test.deepEqual(stack.resolve(widget.toJson()), [
+      {
+        type: 'alarm',
+        width: 6,
+        height: 3,
+        properties: {
+          title: 'Alarm Status',
+          alarms: [{ 'Fn::GetAtt': ['Alarm7103F465', 'Arn'] }],
+        },
+      },
+    ]);
+
+    test.done();
+  },
+};