How to group widgets in one line?

[larskinder]

Hi,

I am struggling to understand, how to group widgets in a way that they are displayed in one group / same dashboard line.
When trying to use monitorCustom it only allows for metrics to be added, which will return a Graph Widget, but I want to set SingleValueWidgets etc.

Would be great to get some orientation on that one.

Thank you.

What I have so far.

const metricFactory = monitoring.createMetricFactory();

monitoring.addWidget(new cloudwatch.SingleValueWidget({
  metrics: [
    new cloudwatch.Metric({
      metricName: 'Errors',
      namespace: 'AWS/Lambda',
      statistic: 'Sum',
    }),
  ],
  title: 'Lambda Error count',
}), true, false);

monitoring.addWidget(new cloudwatch.SingleValueWidget({
  metrics: [
    new cloudwatch.Metric({
      metricName: 'Invocations',
      namespace: 'AWS/Lambda',
      statistic: 'Sum',
    }),
  ],
  title: 'Lambda Invocations',
}), true, false);

[larskinder]

A colleague pointed out that addWidget contains adding a new segment. :/

addWidget(
    widget: IWidget,
    addToSummary?: boolean,
    addToAlarm?: boolean,
  ): this {
    this.addSegment(new SingleWidgetDashboardSegment(widget), {
      addToAlarmDashboard: addToAlarm ?? true,
      addToSummaryDashboard: addToSummary ?? true,
      addToDetailDashboard: true,
    });
    return this;
  }

I now managed to work around some of the issues by retrieving the dashboard object and adding my widgets there directly. I guess to actually improve the implementation, I need to create a new Monitoring class.

The workaround I have now, please ignore if the metrics make sense or not.

const summaryDashboard = monitoring.dashboardFactory?.getDashboard(DefaultDashboards.SUMMARY);
    if (summaryDashboard) {
      /**
       * Lambda Error Count Widget
       */
      const lambdaErrorCount = new cloudwatch.SingleValueWidget({
        metrics: [
          new cloudwatch.Metric({
            metricName: 'Errors',
            namespace: 'AWS/Lambda',
            statistic: 'Sum',
          }),
        ],
        title: 'Lambda Error count',
        width: QuarterWidth,
        height: DefaultGraphWidgetHeight,
        period: defaultPeriod,
      });

      /**
       * Lambda Invocation Count Widget
       */
      const lambdaInvocationCount = new cloudwatch.SingleValueWidget({
        metrics: [
          new cloudwatch.Metric({
            metricName: 'Invocations',
            namespace: 'AWS/Lambda',
            statistic: 'Sum',
          }),
        ],
        title: 'Lambda Invocations',
        width: QuarterWidth,
        height: DefaultGraphWidgetHeight,
        period: defaultPeriod,
      });

      summaryDashboard.addWidgets(new cloudwatch.TextWidget({
        markdown: '### Account Lambda Metrics **Lambda**', width: FullWidth, height: defaultHeightTextWidget,
      }));
      summaryDashboard.addWidgets(lambdaErrorCount, lambdaInvocationCount);
    }

[echeung-amzn]

You should be able to specify a widget type in monitorCustom's metricGroups. For example:

metricGroups: [
  {
    title: "Group title",
    graphWidgetType: GraphWidgetType.SINGLE_VALUE,
    metrics: [
      {
        metric: new Metric({ ... }),
        ...
      },
    ],
  },
]

Otherwise, a Row implements IWidget, so you can actually pass in a Row containing multiple widgets, although I'm not sure if the fact that it ends up as a new segment is problematic or you or not.