Display full height of data tables in reports (3.2)

graylog2-web-interface/src/views/bindings.enterpriseWidgets.test.jsx

@@ -0,0 +1,32 @@
+// @flow strict
+import AggregationWidget from 'views/logic/aggregationbuilder/AggregationWidget';
+import AggregationWidgetConfig from 'views/logic/aggregationbuilder/AggregationWidgetConfig';
+import Widget from 'views/logic/widgets/Widget';
+import DataTable from 'views/components/datatable/DataTable';
+import bindings from './bindings';
+
+describe('Views bindings enterprise widgets', () => {
+  const { enterpriseWidgets } = bindings;
+  type WidgetCondig = {
+    needsControlledHeight: (widget?: Widget) => boolean
+  }
+  const findWidgetConfig = type => enterpriseWidgets.find(widgetConfig => widgetConfig.type === type);
+
+  describe('Aggregations', () => {
+    // $FlowFixMe: We are assuming here it is generally present
+    const aggregationConfig: WidgetCondig = findWidgetConfig('AGGREGATION');
+    it('is present', () => {
+      expect(aggregationConfig).toBeDefined();
+    });
+    it('need a controlled height by default', () => {
+      expect(aggregationConfig.needsControlledHeight()).toBe(true);
+    });
+    it('do not need controlled height when visualization has type data table', () => {
+      const widget = AggregationWidget.builder()
+        .id('widget1')
+        .config(AggregationWidgetConfig.builder().visualization(DataTable.type).build())
+        .build();
+      expect(aggregationConfig.needsControlledHeight(widget)).toBe(false);
+    });
+  });
+});

graylog2-web-interface/src/views/bindings.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import Routes from 'routing/Routes';
 import * as Permissions from 'views/Permissions';
+import { get } from 'lodash';
 
 import { MessageListHandler } from 'views/logic/searchtypes';
 import { MessageList } from 'views/components/widgets';
@@ -131,7 +132,7 @@ export default {
       defaultWidth: 6,
       visualizationComponent: MessageList,
       editComponent: EditMessageList,
-      needsControlledHeight: false,
+      needsControlledHeight: () => false,
       searchResultTransformer: (data: Array<*>) => data[0],
       searchTypes: MessageConfigGenerator,
       titleGenerator: () => 'Untitled Message Table',
@@ -143,7 +144,13 @@ export default {
       defaultWidth: 4,
       visualizationComponent: AggregationBuilder,
       editComponent: AggregationControls,
-      needsControlledHeight: true,
+      needsControlledHeight: (widget: Widget) => {
+        const widgetVisualization = get(widget, 'config.visualization');
+        const flexibleHeightWidgets = [
+          DataTable.type,
+        ];
+        return !flexibleHeightWidgets.find(visualization => visualization === widgetVisualization);
+      },
       searchResultTransformer: PivotTransformer,
       searchTypes: PivotConfigGenerator,
       titleGenerator: (widget: Widget) => {
@@ -159,7 +166,7 @@ export default {
     {
       type: 'default',
       visualizationComponent: UnknownWidget,
-      needsControlledHeight: true,
+      needsControlledHeight: () => true,
       editComponent: UnknownWidget,
       searchTypes: () => [],
     },