From ed0c96b2753aa8909ed2b81c74efc4d6c400be17 Mon Sep 17 00:00:00 2001 From: Eugene Cheung Date: Thu, 9 May 2024 13:52:20 -0400 Subject: [PATCH] feat(custom): add graphWidgetWidth to allow for custom widths in CustomMetricGroup objects Closes #487 --- API.md | 21 ++++++++++++++-- lib/common/widget/size.ts | 1 + lib/monitoring/custom/CustomMonitoring.ts | 25 +++++++++++++------ .../custom/CustomMonitoring.test.ts | 2 ++ .../CustomMonitoring.test.ts.snap | 8 +++--- 5 files changed, 43 insertions(+), 14 deletions(-) diff --git a/API.md b/API.md index b5d45df3..568812ba 100644 --- a/API.md +++ b/API.md @@ -12170,6 +12170,7 @@ const customMetricGroup: CustomMetricGroup = { ... } | graphWidgetRightAxis | aws-cdk-lib.aws_cloudwatch.YAxisProps | optional right axis. | | graphWidgetSetPeriodToTimeRange | boolean | *No description.* | | graphWidgetType | GraphWidgetType | type of the widget. | +| graphWidgetWidth | number | Width of graph widget. | | horizontalAnnotations | aws-cdk-lib.aws_cloudwatch.HorizontalAnnotation[] | Optional custom horizontal annotations which will be displayed over the metrics on the left axis (if there are any alarms, any existing annotations will be merged together). | | horizontalRightAnnotations | aws-cdk-lib.aws_cloudwatch.HorizontalAnnotation[] | Optional custom horizontal annotations which will be displayed over the metrics on the right axis (if there are any alarms, any existing annotations will be merged together). | | important | boolean | *No description.* | @@ -12278,6 +12279,22 @@ type of the widget. --- +##### `graphWidgetWidth`Optional + +```typescript +public readonly graphWidgetWidth: number; +``` + +- *Type:* number +- *Default:* Automatically calculcated width, generally as wide as possible considering all metrics' widgets. + +Width of graph widget. + +Note that widgets will overflow into new rows if the summed width +exceeds 24. + +--- + ##### `horizontalAnnotations`Optional ```typescript @@ -12704,7 +12721,7 @@ const customMonitoringProps: CustomMonitoringProps = { ... } | metricGroups | CustomMetricGroup[] | define metric groups and metrics inside them (each metric group represents a widget). | | description | string | optional description of the whole section, in markdown. | | descriptionWidgetHeight | number | optional height of the description widget, so the content fits. | -| height | number | height override. | +| height | number | Height override. | --- @@ -12853,7 +12870,7 @@ public readonly height: number; - *Type:* number - *Default:* default height -height override. +Height override. --- diff --git a/lib/common/widget/size.ts b/lib/common/widget/size.ts index fb11f0d6..074cc177 100644 --- a/lib/common/widget/size.ts +++ b/lib/common/widget/size.ts @@ -20,6 +20,7 @@ export const DefaultLogWidgetHeight = 7; /** * Suggests the best widget width, given the total number of widgets. * The main point is to make widgets as wide as possible, while saving vertical space and minimizing number of gaps. + * * @param numTotalWidgets total number of widgets to be placed */ export function recommendedWidgetWidth(numTotalWidgets: number) { diff --git a/lib/monitoring/custom/CustomMonitoring.ts b/lib/monitoring/custom/CustomMonitoring.ts index 933758ae..908b2090 100644 --- a/lib/monitoring/custom/CustomMonitoring.ts +++ b/lib/monitoring/custom/CustomMonitoring.ts @@ -174,6 +174,13 @@ export interface CustomMetricGroup { * @see {GraphWidgetProps.setPeriodToTimeRange} */ readonly graphWidgetSetPeriodToTimeRange?: boolean; + /** + * Width of graph widget. Note that widgets will overflow into new rows if the summed width + * exceeds 24. + * + * @default - Automatically calculcated width, generally as wide as possible considering all metrics' widgets. + */ + readonly graphWidgetWidth?: number; /** * @deprecated use addToSummaryDashboard. addToSummaryDashboard will take precedence over important. * @see addToSummaryDashboard @@ -207,17 +214,20 @@ export interface CustomMetricGroup { export interface CustomMonitoringProps extends BaseMonitoringProps { /** * optional description of the whole section, in markdown - * @default no description + * + * @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) + * + * @default - minimum height (should fit one or two lines of text) */ readonly descriptionWidgetHeight?: number; /** - * height override - * @default default height + * Height override. + * + * @default - default height */ readonly height?: number; /** @@ -380,9 +390,6 @@ export class CustomMonitoring extends Monitoring { summary: boolean ) { const widgets: IWidget[] = []; - const metricGroupWidgetWidth = recommendedWidgetWidth( - annotatedGroups.length - ); const metricGroupWidgetHeightDefault = summary ? DefaultSummaryWidgetHeight : DefaultGraphWidgetHeight; @@ -416,7 +423,9 @@ export class CustomMonitoring extends Monitoring { const graphWidgetProps: GraphWidgetProps = { title, - width: metricGroupWidgetWidth, + width: + annotatedGroup.metricGroup.graphWidgetWidth ?? + recommendedWidgetWidth(annotatedGroups.length), height: metricGroupWidgetHeight, left, right, diff --git a/test/monitoring/custom/CustomMonitoring.test.ts b/test/monitoring/custom/CustomMonitoring.test.ts index a246bf3f..76318bcd 100644 --- a/test/monitoring/custom/CustomMonitoring.test.ts +++ b/test/monitoring/custom/CustomMonitoring.test.ts @@ -39,6 +39,7 @@ test("snapshot test", () => { { title: "DummyGroup1", addToSummaryDashboard: true, + graphWidgetWidth: 6, metrics: [ // regular metric new Metric({ metricName: "DummyMetric1", namespace, dimensionsMap }), @@ -75,6 +76,7 @@ test("snapshot test", () => { { title: "DummyGroup2", graphWidgetType: GraphWidgetType.BAR, + graphWidgetWidth: 2, metrics: [ // regular metric new Metric({ metricName: "DummyMetric10", namespace, dimensionsMap }), diff --git a/test/monitoring/custom/__snapshots__/CustomMonitoring.test.ts.snap b/test/monitoring/custom/__snapshots__/CustomMonitoring.test.ts.snap index 2f14002f..efa55fc6 100644 --- a/test/monitoring/custom/__snapshots__/CustomMonitoring.test.ts.snap +++ b/test/monitoring/custom/__snapshots__/CustomMonitoring.test.ts.snap @@ -652,15 +652,15 @@ Object { Object { "Ref": "AWS::Region", }, - "\\",\\"metrics\\":[[\\"DummyCustomNamespace\\",\\"DummyMetric1\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric2\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric3\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[{\\"label\\":\\" \\",\\"expression\\":\\"SEARCH('{DummyCustomNamespace,CustomDimension} CustomDimension=\\\\\\"CustomDimensionValue\\\\\\" DummyMetric4-', 'Sum', 300)\\"}]],\\"annotations\\":{\\"horizontal\\":[{\\"label\\":\\"DummyMetric3 < 90 for 3 datapoints within 15 minutes\\",\\"value\\":90,\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyMetric3 < 50 for 3 datapoints within 15 minutes\\",\\"value\\":50,\\"yAxis\\":\\"left\\"}]},\\"yAxis\\":{}}},{\\"type\\":\\"metric\\",\\"width\\":6,\\"height\\":100,\\"x\\":6,\\"y\\":3,\\"properties\\":{\\"view\\":\\"bar\\",\\"title\\":\\"DummyGroup2\\",\\"region\\":\\"", + "\\",\\"metrics\\":[[\\"DummyCustomNamespace\\",\\"DummyMetric1\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric2\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric3\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[{\\"label\\":\\" \\",\\"expression\\":\\"SEARCH('{DummyCustomNamespace,CustomDimension} CustomDimension=\\\\\\"CustomDimensionValue\\\\\\" DummyMetric4-', 'Sum', 300)\\"}]],\\"annotations\\":{\\"horizontal\\":[{\\"label\\":\\"DummyMetric3 < 90 for 3 datapoints within 15 minutes\\",\\"value\\":90,\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyMetric3 < 50 for 3 datapoints within 15 minutes\\",\\"value\\":50,\\"yAxis\\":\\"left\\"}]},\\"yAxis\\":{}}},{\\"type\\":\\"metric\\",\\"width\\":2,\\"height\\":100,\\"x\\":6,\\"y\\":3,\\"properties\\":{\\"view\\":\\"bar\\",\\"title\\":\\"DummyGroup2\\",\\"region\\":\\"", Object { "Ref": "AWS::Region", }, - "\\",\\"metrics\\":[[\\"DummyCustomNamespace\\",\\"DummyMetric10\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric11\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric12\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"]],\\"annotations\\":{\\"horizontal\\":[{\\"label\\":\\"DummyAnnotation1\\",\\"value\\":30,\\"fill\\":\\"above\\",\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyAnnotation2\\",\\"value\\":20,\\"fill\\":\\"below\\",\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyMetric12 > 10 for 3 datapoints within 15 minutes\\",\\"value\\":10,\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyMetric12 > 50 for 3 datapoints within 15 minutes\\",\\"value\\":50,\\"yAxis\\":\\"left\\"}]},\\"yAxis\\":{}}},{\\"type\\":\\"metric\\",\\"width\\":6,\\"height\\":100,\\"x\\":12,\\"y\\":3,\\"properties\\":{\\"view\\":\\"pie\\",\\"title\\":\\"DummyGroup3\\",\\"region\\":\\"", + "\\",\\"metrics\\":[[\\"DummyCustomNamespace\\",\\"DummyMetric10\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric11\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric12\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"]],\\"annotations\\":{\\"horizontal\\":[{\\"label\\":\\"DummyAnnotation1\\",\\"value\\":30,\\"fill\\":\\"above\\",\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyAnnotation2\\",\\"value\\":20,\\"fill\\":\\"below\\",\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyMetric12 > 10 for 3 datapoints within 15 minutes\\",\\"value\\":10,\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyMetric12 > 50 for 3 datapoints within 15 minutes\\",\\"value\\":50,\\"yAxis\\":\\"left\\"}]},\\"yAxis\\":{}}},{\\"type\\":\\"metric\\",\\"width\\":6,\\"height\\":100,\\"x\\":8,\\"y\\":3,\\"properties\\":{\\"view\\":\\"pie\\",\\"title\\":\\"DummyGroup3\\",\\"region\\":\\"", Object { "Ref": "AWS::Region", }, - "\\",\\"metrics\\":[[\\"DummyCustomNamespace\\",\\"DummyMetric20\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric21\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric22\\",\\"CustomDimension\\",\\"CustomDimensionValue\\",{\\"yAxis\\":\\"right\\"}]],\\"annotations\\":{\\"horizontal\\":[{\\"label\\":\\"DummyAnnotation1\\",\\"value\\":30,\\"fill\\":\\"above\\",\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyAnnotation2\\",\\"value\\":20,\\"fill\\":\\"below\\",\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyAnnotation3\\",\\"value\\":20,\\"fill\\":\\"below\\",\\"yAxis\\":\\"right\\"},{\\"label\\":\\"DummyMetric22 > 10 for 3 datapoints within 15 minutes\\",\\"value\\":10,\\"yAxis\\":\\"right\\"},{\\"label\\":\\"DummyMetric22 > 50 for 3 datapoints within 15 minutes\\",\\"value\\":50,\\"yAxis\\":\\"right\\"}],\\"vertical\\":[{\\"value\\":\\"2021-07-29T02:31:09.890Z\\",\\"color\\":\\"667788\\",\\"fill\\":\\"after\\",\\"label\\":\\"this is a vertical annotation\\"}]},\\"yAxis\\":{\\"right\\":{\\"label\\":\\"CustomValue\\"}},\\"legend\\":{\\"position\\":\\"right\\"},\\"setPeriodToTimeRange\\":true}},{\\"type\\":\\"metric\\",\\"width\\":6,\\"height\\":100,\\"x\\":18,\\"y\\":3,\\"properties\\":{\\"view\\":\\"singleValue\\",\\"title\\":\\"DummyGroup4\\",\\"region\\":\\"", + "\\",\\"metrics\\":[[\\"DummyCustomNamespace\\",\\"DummyMetric20\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric21\\",\\"CustomDimension\\",\\"CustomDimensionValue\\"],[\\"DummyCustomNamespace\\",\\"DummyMetric22\\",\\"CustomDimension\\",\\"CustomDimensionValue\\",{\\"yAxis\\":\\"right\\"}]],\\"annotations\\":{\\"horizontal\\":[{\\"label\\":\\"DummyAnnotation1\\",\\"value\\":30,\\"fill\\":\\"above\\",\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyAnnotation2\\",\\"value\\":20,\\"fill\\":\\"below\\",\\"yAxis\\":\\"left\\"},{\\"label\\":\\"DummyAnnotation3\\",\\"value\\":20,\\"fill\\":\\"below\\",\\"yAxis\\":\\"right\\"},{\\"label\\":\\"DummyMetric22 > 10 for 3 datapoints within 15 minutes\\",\\"value\\":10,\\"yAxis\\":\\"right\\"},{\\"label\\":\\"DummyMetric22 > 50 for 3 datapoints within 15 minutes\\",\\"value\\":50,\\"yAxis\\":\\"right\\"}],\\"vertical\\":[{\\"value\\":\\"2021-07-29T02:31:09.890Z\\",\\"color\\":\\"667788\\",\\"fill\\":\\"after\\",\\"label\\":\\"this is a vertical annotation\\"}]},\\"yAxis\\":{\\"right\\":{\\"label\\":\\"CustomValue\\"}},\\"legend\\":{\\"position\\":\\"right\\"},\\"setPeriodToTimeRange\\":true}},{\\"type\\":\\"metric\\",\\"width\\":6,\\"height\\":100,\\"x\\":14,\\"y\\":3,\\"properties\\":{\\"view\\":\\"singleValue\\",\\"title\\":\\"DummyGroup4\\",\\"region\\":\\"", Object { "Ref": "AWS::Region", }, @@ -903,7 +903,7 @@ Min number of samples to alarm: 5", "Fn::Join": Array [ "", Array [ - "{\\"widgets\\":[{\\"type\\":\\"text\\",\\"width\\":24,\\"height\\":1,\\"x\\":0,\\"y\\":0,\\"properties\\":{\\"markdown\\":\\"### DummyName\\"}},{\\"type\\":\\"metric\\",\\"width\\":24,\\"height\\":100,\\"x\\":0,\\"y\\":1,\\"properties\\":{\\"view\\":\\"timeSeries\\",\\"title\\":\\"DummyGroup1\\",\\"region\\":\\"", + "{\\"widgets\\":[{\\"type\\":\\"text\\",\\"width\\":24,\\"height\\":1,\\"x\\":0,\\"y\\":0,\\"properties\\":{\\"markdown\\":\\"### DummyName\\"}},{\\"type\\":\\"metric\\",\\"width\\":6,\\"height\\":100,\\"x\\":0,\\"y\\":1,\\"properties\\":{\\"view\\":\\"timeSeries\\",\\"title\\":\\"DummyGroup1\\",\\"region\\":\\"", Object { "Ref": "AWS::Region", },