From 27381317e68264d08952ed5c0fa0e8a4f4b233a7 Mon Sep 17 00:00:00 2001 From: Anan Zhuang Date: Wed, 30 Aug 2023 13:31:13 -0700 Subject: [PATCH] [Data Explorer][Discover 2.0] Replace hide column and add move left/right (#4838) * disable full screen mode * customize hide column to delete column * add move left and move right Issue Resolve: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4822 https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4823 https://github.com/opensearch-project/OpenSearch-Dashboards/issues/4824 Signed-off-by: ananzh --- .../components/data_grid/constants.ts | 1 + .../components/data_grid/data_grid_table.tsx | 39 +++++++++++++++---- .../data_grid/data_grid_table_columns.tsx | 39 ++++++++++++++----- .../components/doc_views/context_app.tsx | 1 + .../utils/state_management/common.ts | 5 --- .../utils/state_management/discover_slice.tsx | 5 +-- .../view_components/canvas/discover_table.tsx | 3 +- 7 files changed, 66 insertions(+), 27 deletions(-) diff --git a/src/plugins/discover/public/application/components/data_grid/constants.ts b/src/plugins/discover/public/application/components/data_grid/constants.ts index c11f205aff1f..be96468a3a09 100644 --- a/src/plugins/discover/public/application/components/data_grid/constants.ts +++ b/src/plugins/discover/public/application/components/data_grid/constants.ts @@ -9,4 +9,5 @@ export const toolbarVisibility = { 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 d4ad4bef1b43..596e0b97ae07 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 @@ -16,6 +16,7 @@ import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_ import { DiscoverServices } from '../../../build_services'; import { usePagination } from '../utils/use_pagination'; import { SortOrder } from '../../../saved_searches/types'; +import { buildColumns } from '../../utils/columns'; export interface DataGridTableProps { columns: string[]; @@ -30,6 +31,7 @@ export interface DataGridTableProps { displayTimeColumn: boolean; services: DiscoverServices; isToolbarVisible?: boolean; + isContextView?: boolean; } export const DataGridTable = ({ @@ -44,19 +46,31 @@ export const DataGridTable = ({ rows, displayTimeColumn, isToolbarVisible = true, + isContextView = false, }: DataGridTableProps) => { const [inspectedHit, setInspectedHit] = useState(); const rowCount = useMemo(() => (rows ? rows.length : 0), [rows]); const pagination = usePagination(rowCount); + let adjustedColumns = buildColumns(columns); + // handle case where the user removes selected filed and leaves only time column + if ( + adjustedColumns.length === 1 && + indexPattern && + adjustedColumns[0] === indexPattern.timeFieldName + ) { + adjustedColumns = [...adjustedColumns, '_source']; + } + + const includeSourceInColumns = adjustedColumns.includes('_source'); const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]); const rowHeightsOptions = useMemo( () => ({ defaultHeight: { - lineCount: columns.includes('_source') ? 3 : 1, + lineCount: adjustedColumns.includes('_source') ? 3 : 1, }, }), - [columns] + [adjustedColumns] ); const onColumnSort = useCallback( @@ -72,18 +86,29 @@ export const DataGridTable = ({ ]); const dataGridTableColumns = useMemo( - () => buildDataGridColumns(columns, indexPattern, displayTimeColumn), - [columns, indexPattern, displayTimeColumn] + () => + buildDataGridColumns( + adjustedColumns, + indexPattern, + displayTimeColumn, + includeSourceInColumns, + isContextView + ), + [adjustedColumns, indexPattern, displayTimeColumn, includeSourceInColumns, isContextView] ); const dataGridTableColumnsVisibility = useMemo( () => ({ - visibleColumns: computeVisibleColumns(columns, indexPattern, displayTimeColumn) as string[], + visibleColumns: computeVisibleColumns( + adjustedColumns, + indexPattern, + displayTimeColumn + ) as string[], setVisibleColumns: (cols: string[]) => { onSetColumns(cols); }, }), - [columns, indexPattern, displayTimeColumn, onSetColumns] + [adjustedColumns, indexPattern, displayTimeColumn, onSetColumns] ); const sorting: EuiDataGridSorting = useMemo( @@ -151,7 +176,7 @@ export const DataGridTable = ({ generateDataGridTableColumn(colName, idxPattern)); + return columnsToUse.map((colName) => + generateDataGridTableColumn(colName, idxPattern, includeSourceInColumns, isContextView) + ); } -export function generateDataGridTableColumn(colName: string, idxPattern: IndexPattern) { +export function generateDataGridTableColumn( + colName: string, + idxPattern: IndexPattern, + includeSourceInColumns: boolean, + isContextView: boolean +) { const timeLabel = i18n.translate('discover.timeLabel', { defaultMessage: 'Time', }); const idxPatternField = idxPattern.getFieldByName(colName); + const shouldHide = colName === '_source' || colName === idxPattern.timeFieldName; const dataGridCol: EuiDataGridColumn = { id: colName, schema: idxPatternField?.type, isSortable: idxPatternField?.sortable, display: idxPatternField?.displayName, - actions: { - showHide: true, - showMoveLeft: false, - showMoveRight: false, - }, + actions: isContextView + ? false + : { + showHide: shouldHide + ? false + : { + label: i18n.translate('discover.removeColumn.label', { + defaultMessage: 'Remove column', + }), + iconType: 'cross', + }, + showMoveLeft: !includeSourceInColumns, + showMoveRight: !includeSourceInColumns, + }, cellActions: idxPatternField ? getCellActions(idxPatternField) : [], }; diff --git a/src/plugins/discover/public/application/components/doc_views/context_app.tsx b/src/plugins/discover/public/application/components/doc_views/context_app.tsx index 613e23a0b5b0..97df221d691e 100644 --- a/src/plugins/discover/public/application/components/doc_views/context_app.tsx +++ b/src/plugins/discover/public/application/components/doc_views/context_app.tsx @@ -103,6 +103,7 @@ export function ContextApp({ displayTimeColumn={true} services={services} isToolbarVisible={false} + isContextView={true} /> { - const newColumns = timeField && timeField === columns[0] ? columns.slice(1) : columns; - return newColumns; -}; diff --git a/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx b/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx index 727f3010032c..f7910efde91c 100644 --- a/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx +++ b/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx @@ -123,11 +123,10 @@ export const discoverSlice = createSlice({ isDirty: true, }; }, - setColumns(state, action: PayloadAction<{ timeField: string | undefined; columns: string[] }>) { - const columns = utils.setColumns(action.payload.timeField, action.payload.columns); + setColumns(state, action: PayloadAction<{ columns: string[] }>) { return { ...state, - columns, + columns: action.payload.columns, }; }, setSort(state, action: PayloadAction) { diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx index 6720bc5171ff..b228110ec9fc 100644 --- a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx +++ b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx @@ -39,8 +39,7 @@ export const DiscoverTable = ({ history }: Props) => { const dispatch = useDispatch(); const onAddColumn = (col: string) => dispatch(addColumn({ column: col })); const onRemoveColumn = (col: string) => dispatch(removeColumn(col)); - const onSetColumns = (cols: string[]) => - dispatch(setColumns({ timefield: indexPattern.timeFieldName, columns: cols })); + const onSetColumns = (cols: string[]) => dispatch(setColumns({ columns: cols })); const onSetSort = (s: SortOrder[]) => { dispatch(setSort(s)); refetch$.next();