From d650824cc9a8782bf0ca220006f8e8e0aebb64ba Mon Sep 17 00:00:00 2001 From: abbyhu2000 Date: Mon, 29 Jan 2024 22:53:14 +0000 Subject: [PATCH] optimize cell filter logics Signed-off-by: abbyhu2000 --- .../default_discover_table.tsx | 3 +- .../default_discover_table/table_cell.tsx | 84 ++++++++----------- .../default_discover_table/table_rows.tsx | 4 +- 3 files changed, 39 insertions(+), 52 deletions(-) diff --git a/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx b/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx index 0bd3c5d0c022..38233e63976f 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/default_discover_table.tsx @@ -5,13 +5,12 @@ import './_doc_table.scss'; -import React, { useState, useMemo, useCallback } from 'react'; +import React from 'react'; import { EuiDataGridColumn, EuiDataGridSorting } from '@elastic/eui'; import { TableHeader } from './table_header'; import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types'; import { TableRow } from './table_rows'; import { IndexPattern } from '../../../opensearch_dashboards_services'; -import { SortOrder } from '../../../saved_searches/types'; export interface DefaultDiscoverTableProps { displayedTableColumns: EuiDataGridColumn[]; diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx index 67adce50a82f..f1202be79059 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_cell.tsx @@ -23,7 +23,7 @@ import { import { i18n } from '@osd/i18n'; import { indexPatternField } from '../../../../../opensearch_ui_shared/static/forms/helpers/field_validators/index_pattern_field'; import { fetchSourceTypeDataCell } from '../data_grid/data_grid_table_cell_value'; -import { OpenSearchSearchHit } from '../../doc_views/doc_views_types'; +import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types'; import { IndexPattern } from '../../../opensearch_dashboards_services'; import { useDataGridContext } from '../data_grid/data_grid_table_context'; @@ -32,9 +32,18 @@ export interface TableCellProps { row: OpenSearchSearchHit; rowIndex: number; indexPattern: IndexPattern; + flattened: Record; + onFilter: DocViewFilterFn; } -export const TableCell = ({ column, row, rowIndex, indexPattern }: TableCellProps) => { +export const TableCell = ({ + column, + row, + rowIndex, + indexPattern, + flattened, + onFilter, +}: TableCellProps) => { const singleRow = row as Record; // const flattenedRows = dataRows ? dataRows.map((hit) => idxPattern.flattenHit(hit)) : []; // const flattenedRow = flattenedRows @@ -42,6 +51,7 @@ export const TableCell = ({ column, row, rowIndex, indexPattern }: TableCellProp // : undefined; const fieldInfo = indexPattern.fields.getByName(column.id); + const fieldMapping = flattened[column.id]; if (typeof singleRow === 'undefined') { return ( @@ -68,7 +78,6 @@ export const TableCell = ({ column, row, rowIndex, indexPattern }: TableCellProp } const formattedValue = indexPattern.formatField(singleRow, column.id); - // const filterFor = column.cellActions ? column.cellActions[0] if (typeof formattedValue === 'undefined') { return ( @@ -81,61 +90,41 @@ export const TableCell = ({ column, row, rowIndex, indexPattern }: TableCellProp ); } else { const sanitizedCellValue = dompurify.sanitize(formattedValue); - const { onFilter } = useDataGridContext(); - const filterForButton = () => { - const filterForValueText = i18n.translate('discover.filterForValue', { - defaultMessage: 'Filter for value', - }); - const filterForValueLabel = i18n.translate('discover.filterForValueLabel', { - defaultMessage: 'Filter for value: {value}', - values: { value: column.id }, - }); - return ( - + const filters = ( + + { - const flattened = indexPattern.flattenHit(row); - - if (flattened) { - onFilter(column.id, flattened[column.id], '+'); - } - }} + onClick={() => onFilter(column.id, fieldMapping, '+')} iconType="plusInCircle" - aria-label={filterForValueLabel} + aria-label={i18n.translate('discover.filterForValueLabel', { + defaultMessage: 'Filter for value', + })} data-test-subj="filterForValue" className="osdDocTableCell__filterButton" /> - ); - }; - - const filterOutButton = () => { - const filterOutValueText = i18n.translate('discover.filterOutValue', { - defaultMessage: 'Filter out value', - }); - const filterOutValueLabel = i18n.translate('discover.filterOutValueLabel', { - defaultMessage: 'Filter out value: {value}', - values: { value: column.id }, - }); - return ( - + { - const flattened = indexPattern.flattenHit(row); - - if (flattened) { - onFilter(column.id, flattened[column.id], '-'); - } - }} + onClick={() => onFilter(column.id, fieldMapping, '-')} iconType="minusInCircle" - aria-label={filterOutValueLabel} + aria-label={i18n.translate('discover.filterOutValueLabel', { + defaultMessage: 'Filter out value', + })} data-test-subj="filterOutValue" className="osdDocTableCell__filterButton" /> - ); - }; + + ); return ( // eslint-disable-next-line react/no-danger @@ -144,10 +133,7 @@ export const TableCell = ({ column, row, rowIndex, indexPattern }: TableCellProp className="osdDocTableCell eui-textBreakAll eui-textBreakWord" > - - {fieldInfo?.filterable ? filterForButton() : null} - {fieldInfo?.filterable ? filterOutButton() : null} - + {fieldInfo?.filterable && filters} ); } diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx index 6a3665eaeabf..ad1384b3f6a5 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_rows.tsx @@ -42,6 +42,7 @@ export const TableRow = ({ onFilter, onClose, }: TableRowProps) => { + const flattened = indexPattern.flattenHit(row); const [isExpanded, setIsExpanded] = useState(false); const tableRow = ( @@ -63,12 +64,13 @@ export const TableRow = ({ row={row} rowIndex={rowIndex} indexPattern={indexPattern} + flattened={flattened} + onFilter={onFilter} /> ); })} ); - const columnFields: string[] = displayedTableColumns.map((column: any) => column.id); const expandedTableRow = (