Adds support for line count

Signed-off-by: Ashwin P Chandran <[email protected]>

src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx

@@ -4,7 +4,12 @@
  */
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { EuiDataGrid, EuiDataGridSorting, EuiPanel } from '@elastic/eui';
+import {
+  EuiDataGrid,
+  EuiDataGridSorting,
+  EuiDataGridToolBarVisibilityOptions,
+  EuiPanel,
+} from '@elastic/eui';
 import { IndexPattern, getServices } from '../../../opensearch_dashboards_services';
 import { fetchTableDataCell } from './data_grid_table_cell_value';
 import { buildDataGridColumns, computeVisibleColumns } from './data_grid_table_columns';
@@ -21,9 +26,9 @@ import {
 } from '../../../../common';
 import { UI_SETTINGS } from '../../../../../data/common';
 import { LegacyDiscoverTable } from '../default_discover_table/default_discover_table';
-import { toolbarVisibility } from './constants';
 import { getDataGridTableSetting } from '../utils/local_storage';
 import { SortDirection, SortOrder } from '../../../saved_searches/types';
+import { useToolbarOptions } from './data_grid_toolbar';
 
 export interface DataGridTableProps {
   columns: string[];
@@ -69,6 +74,7 @@ export const DataGridTable = ({
   const services = getServices();
   const [inspectedHit, setInspectedHit] = useState<OpenSearchSearchHit | undefined>();
   const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]);
+  const { lineCount, toolbarOptions } = useToolbarOptions();
   const [pageSizeLimit, isShortDots, hideTimeColumn, defaultSortOrder] = useMemo(() => {
     return [
       services.uiSettings.get(SAMPLE_SIZE_SETTING),
@@ -94,10 +100,10 @@ export const DataGridTable = ({
   const rowHeightsOptions = useMemo(
     () => ({
       defaultHeight: {
-        lineCount: adjustedColumns.includes('_source') ? 3 : 1,
+        lineCount,
       },
     }),
-    [adjustedColumns]
+    [lineCount]
   );
 
   const onColumnSort = useCallback(
@@ -208,7 +214,7 @@ export const DataGridTable = ({
         renderCellValue={renderCellValue}
         rowCount={rowCount}
         sorting={sorting}
-        toolbarVisibility={isToolbarVisible ? toolbarVisibility : false}
+        toolbarVisibility={isToolbarVisible ? toolbarOptions : false}
         rowHeightsOptions={rowHeightsOptions}
       />
     ),
@@ -221,6 +227,7 @@ export const DataGridTable = ({
       rowCount,
       sorting,
       isToolbarVisible,
+      toolbarOptions,
       rowHeightsOptions,
     ]
   );

src/plugins/discover/public/application/components/data_grid/data_grid_toolbar.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButtonEmpty,
+  EuiDataGridToolBarVisibilityOptions,
+  EuiFormRow,
+  EuiPopover,
+  EuiRange,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+
+const AddtitionalControls = ({
+  lineCount,
+  setLineCount,
+}: {
+  lineCount: number;
+  setLineCount: (height: number) => void;
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const onButtonClick = () => setIsPopoverOpen((open) => !open);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButtonEmpty
+      iconType="controlsHorizontal"
+      iconSide="left"
+      onClick={onButtonClick}
+      size="xs"
+      color="text"
+    >
+      Display
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
+      <EuiFormRow label="Line Count" display="rowCompressed">
+        <EuiRange
+          value={lineCount}
+          min={1}
+          max={50}
+          compressed
+          name="Line Count"
+          showInput
+          onChange={(e: any) => setLineCount(Number(e.target.value))}
+        />
+      </EuiFormRow>
+    </EuiPopover>
+  );
+};
+
+export const useToolbarOptions = () => {
+  const [lineCount, setLineCount] = useState(3);
+
+  const toolbarOptions: EuiDataGridToolBarVisibilityOptions = {
+    showColumnSelector: {
+      allowHide: false,
+      allowReorder: true,
+    },
+    showStyleSelector: false,
+    showFullScreenSelector: false,
+    additionalControls: <AddtitionalControls lineCount={lineCount} setLineCount={setLineCount} />,
+  };
+
+  return {
+    toolbarOptions,
+    lineCount,
+  };
+};