diff --git a/src/plugins/discover/public/application/components/data_grid/constants.ts b/src/plugins/discover/public/application/components/data_grid/constants.ts deleted file mode 100644 index be96468a3a09..000000000000 --- a/src/plugins/discover/public/application/components/data_grid/constants.ts +++ /dev/null @@ -1,13 +0,0 @@ -/* - * Copyright OpenSearch Contributors - * SPDX-License-Identifier: Apache-2.0 - */ - -export const toolbarVisibility = { - showColumnSelector: { - allowHide: false, - allowReorder: true, - }, - showStyleSelector: false, - showFullScreenSelector: false, -}; diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx index f64e42dd4015..58eb1e10befe 100644 --- a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx +++ b/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(); 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, ] ); diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_toolbar.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_toolbar.tsx new file mode 100644 index 000000000000..41eb30eafa28 --- /dev/null +++ b/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 = ( + + Display + + ); + + return ( + + + setLineCount(Number(e.target.value))} + /> + + + ); +}; + +export const useToolbarOptions = () => { + const [lineCount, setLineCount] = useState(3); + + const toolbarOptions: EuiDataGridToolBarVisibilityOptions = { + showColumnSelector: { + allowHide: false, + allowReorder: true, + }, + showStyleSelector: false, + showFullScreenSelector: false, + additionalControls: , + }; + + return { + toolbarOptions, + lineCount, + }; +};