feat(aws-cloudwatch): query results widget

Add a `QueryWidget` to generate a dashboard widget
showing the results of a query from Logs Insights.
This was a missing feature which is available in
the console.

closes aws#3681

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

@@ -258,6 +258,18 @@ dashboard.addWidgets(new TextWidget({
 }));
 ```
 
+### Query results widget
+
+A query results widget shows the results of a query from Logs Insights:
+
+```ts
+dashboard.addWidgets(new QueryWidget({
+  logGroup: 'my-log-group',
+  query: `fields @message
+          | filter @message like /Error/`
+}));
+```
+
 ### Dashboard Layout
 
 The widgets on a dashboard are visually laid out in a grid that is 24 columns

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

@@ -5,6 +5,7 @@ export * from './graph';
 export * from './layout';
 export * from './metric';
 export * from './metric-types';
+export * from './query';
 export * from './text';
 export * from './widget';
 

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

@@ -0,0 +1,75 @@
+import * as cdk from '@aws-cdk/core';
+import { ConcreteWidget } from "./widget";
+
+/**
+ * Properties for a Query widget
+ */
+export interface QueryWidgetProps {
+  /**
+   * Title for the graph
+   *
+   * @default No title
+   */
+  readonly title?: string;
+
+  /**
+   * Log group to query
+   */
+  readonly logGroup: string;
+
+  /**
+   * Query for log insights
+   */
+  readonly query: string;
+
+  /**
+   * The region the metrics of this graph should be taken from
+   *
+   * @default Current region
+   */
+  readonly region?: string;
+
+  /**
+   * Width of the widget, in a grid of 24 units wide
+   *
+   * @default 6
+   */
+  readonly width?: number;
+
+  /**
+   * Height of the widget
+   *
+   * @default 6
+   */
+  readonly height?: number;
+}
+
+/**
+ * Display query results from Logs Insights
+ */
+export class QueryWidget extends ConcreteWidget {
+  private readonly props: QueryWidgetProps;
+
+  constructor(props: QueryWidgetProps) {
+    super(props.width || 6, props.height || 6);
+    this.props = props;
+  }
+
+  public toJson(): any[] {
+    return [{
+      type: 'log',
+      width: this.width,
+      height: this.height,
+      x: this.x,
+      y: this.y,
+      properties: {
+        view: 'table',
+        title: this.props.title,
+        region: this.props.region || cdk.Aws.REGION,
+        query: cdk.Fn.join('', [
+          "SOURCE '", this.props.logGroup, "' | ", this.props.query
+        ])
+      }
+    }];
+  }
+}

packages/@aws-cdk/aws-cloudwatch/test/integ.alarm-and-dashboard.expected.json

@@ -67,7 +67,11 @@
                   "QueueName"
                 ]
               },
-              "\"]]}}]}"
+              "\"]]}},{\"type\":\"log\",\"width\":6,\"height\":6,\"x\":0,\"y\":17,\"properties\":{\"view\":\"table\",\"title\":\"Errors in my log group\",\"region\":\"",
+              {
+                "Ref": "AWS::Region"
+              },
+              "\",\"query\":\"SOURCE 'my-log-group' | fields @message\\n          | filter @message like /Error/\"}}]}"
             ]
           ]
         },

packages/@aws-cdk/aws-cloudwatch/test/integ.alarm-and-dashboard.ts

@@ -48,5 +48,11 @@ dashboard.addWidgets(new cloudwatch.SingleValueWidget({
   title: 'Current messages in queue',
   metrics: [metric]
 }));
+dashboard.addWidgets(new cloudwatch.QueryWidget({
+  title: 'Errors in my log group',
+  logGroup: 'my-log-group',
+  query: `fields @message
+          | filter @message like /Error/`
+}));
 
 app.synth();

packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts

@@ -1,6 +1,6 @@
 import { Stack } from '@aws-cdk/core';
 import { Test } from 'nodeunit';
-import { Alarm, AlarmWidget, Color, GraphWidget, Metric, Shading, SingleValueWidget } from '../lib';
+import { Alarm, AlarmWidget, Color, GraphWidget, Metric, QueryWidget, Shading, SingleValueWidget } from '../lib';
 
 export = {
   'add stacked property to graphs'(test: Test) {
@@ -113,6 +113,34 @@ export = {
     test.done();
   },
 
+  'query result widget'(test: Test) {
+    // GIVEN
+    const stack = new Stack();
+    const logGroup = 'my-log-group';
+    const query = `fields @message
+                  | filter @message like /Error/`;
+
+    // WHEN
+    const widget = new QueryWidget({
+      logGroup,
+      query
+    });
+
+    // THEN
+    test.deepEqual(stack.resolve(widget.toJson()), [{
+      type: 'log',
+      width: 6,
+      height: 6,
+      properties: {
+        view: 'table',
+        region: { Ref: 'AWS::Region' },
+        query: `SOURCE '${logGroup}' | ${query}`
+      }
+    }]);
+
+    test.done();
+  },
+
   'alarm widget'(test: Test) {
     // GIVEN
     const stack = new Stack();