feat(custom): add height property to .monitorCustom() (#261)

Allows users to set a custom height for custom monitoring. Useful for
different graph types or very big search queries.

---

_By submitting this pull request, I confirm that my contribution is made
under the terms of the Apache-2.0 license_

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: voho

API.md

@@ -191,8 +191,24 @@ export interface CustomMetricGroup {
 }
 
 export interface CustomMonitoringProps extends BaseMonitoringProps {
+  /**
+   * optional description of the whole section, in markdown
+   * @default no description
+   */
   readonly description?: string;
+  /**
+   * optional height of the description widget, so the content fits
+   * @default minimum height (should fit one or two lines of text)
+   */
   readonly descriptionWidgetHeight?: number;
+  /**
+   * height override
+   * @default default height
+   */
+  readonly height?: number;
+  /**
+   * define metric groups and metrics inside them (each metric group represents a widget)
+   */
   readonly metricGroups: CustomMetricGroup[];
 }
 
@@ -201,6 +217,7 @@ export interface CustomMetricGroupWithAnnotations {
   readonly annotations: HorizontalAnnotation[];
   readonly rightAnnotations: HorizontalAnnotation[];
   readonly titleAddons: string[];
+  readonly height?: number;
 }
 
 /**
@@ -214,6 +231,7 @@ export class CustomMonitoring extends Monitoring {
   readonly title: string;
   readonly description?: string;
   readonly descriptionWidgetHeight?: number;
+  readonly height?: number;
   readonly customAlarmFactory: CustomAlarmFactory;
   readonly anomalyDetectingAlarmFactory: AnomalyDetectingAlarmFactory;
   readonly metricGroups: CustomMetricGroupWithAnnotations[];
@@ -226,6 +244,7 @@ export class CustomMonitoring extends Monitoring {
 
     this.description = props.description;
     this.descriptionWidgetHeight = props.descriptionWidgetHeight;
+    this.height = props.height;
 
     const alarmFactory = this.createAlarmFactory(
       namingStrategy.resolveAlarmFriendlyName()
@@ -257,7 +276,7 @@ export class CustomMonitoring extends Monitoring {
       metricGroup.metrics.forEach((metric) => {
         if (this.hasAlarm(metric) && this.hasAnomalyDetection(metric)) {
           throw new Error(
-            "Adding both a regular alarm and an anomoly detection alarm at the same time is not supported"
+            "Adding both a regular alarm and an anomaly detection alarm at the same time is not supported"
           );
         }
 
@@ -338,6 +357,11 @@ export class CustomMonitoring extends Monitoring {
     const metricGroupWidgetWidth = recommendedWidgetWidth(
       annotatedGroups.length
     );
+    const metricGroupWidgetHeightDefault = summary
+      ? DefaultSummaryWidgetHeight
+      : DefaultGraphWidgetHeight;
+    const metricGroupWidgetHeight =
+      this.height ?? metricGroupWidgetHeightDefault;
 
     annotatedGroups.forEach((annotatedGroup) => {
       const metrics = annotatedGroup.metricGroup.metrics;
@@ -367,7 +391,7 @@ export class CustomMonitoring extends Monitoring {
       const graphWidgetProps: GraphWidgetProps = {
         title,
         width: metricGroupWidgetWidth,
-        height: summary ? DefaultSummaryWidgetHeight : DefaultGraphWidgetHeight,
+        height: metricGroupWidgetHeight,
         left,
         right,
         leftAnnotations: annotatedGroup.annotations,

lib/monitoring/custom/CustomMonitoring.ts

@@ -33,6 +33,7 @@ test("snapshot test", () => {
     description:
       "This is a very long description.\nSecond line of this very long description.\nThird line of this very long description.",
     descriptionWidgetHeight: 2,
+    height: 100,
     metricGroups: [
       {
         title: "DummyGroup1",
@@ -436,6 +437,6 @@ test("throws error if attempting to add both a regular alarm and an anomoly dete
         ],
       })
   ).toThrow(
-    "Adding both a regular alarm and an anomoly detection alarm at the same time is not supported"
+    "Adding both a regular alarm and an anomaly detection alarm at the same time is not supported"
   );
 });