diff --git a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss index 54e248e9152..7e96f8d1a6f 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss +++ b/src/plugins/discover/public/application/components/default_discover_table/_table_cell.scss @@ -1,7 +1,4 @@ -.osdDocTableCell__dataField { - white-space: pre-wrap; - } - + .osdDocTableCell__toggleDetails { padding: 4px 0 0 !important; } @@ -18,18 +15,22 @@ * 3. Show on focus to enable keyboard accessibility. */ - .osdDocTableRowFilterButton { - appearance: none; - background-color: $euiColorEmptyShade; - border: none; - padding: 0 $euiSizeXS; - font-size: $euiFontSizeS; - line-height: 1; /* 1 */ - display: inline-block; - opacity: 0; /* 2 */ - - &:focus { - opacity: 1; /* 3 */ + .osdDocTableCell { + white-space: pre-wrap; + + &__filterButton { + opacity: 0; + transition: opacity $euiAnimSpeedFast; + + @include ouiBreakpoint("xs", "s", "m") { + opacity: 1; + } + } + + &:hover &__filterButton, + &:focus &__filterButton { + opacity: 1; } } + \ No newline at end of file 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 877a2cae8ee..28f78d4a6ae 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 @@ -6,9 +6,22 @@ import './_doc_table.scss'; import React, { useState, useMemo, useCallback } from 'react'; +import { EuiDataGridColumn } from '@elastic/eui'; import { TableHeader } from './table_header'; import { 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[]; + rows: OpenSearchSearchHit[]; + indexPattern: IndexPattern; + sortOrder: SortOrder[]; + onChangeSortOrder: (sort: SortOrder[]) => void; + onRemoveColumn: (column: string) => void; + onReorderColumn: (col: string, source: number, destination: number) => void; +} export const DefaultDiscoverTable = ({ displayedTableColumns, @@ -18,7 +31,7 @@ export const DefaultDiscoverTable = ({ onChangeSortOrder, onRemoveColumn, onReorderColumn, -}) => { +}: DefaultDiscoverTableProps) => { // console.log("sorting", sorting) return ( indexPattern && ( @@ -37,11 +50,12 @@ export const DefaultDiscoverTable = ({ /> - {rows.map((row: OpenSearchSearchHit) => { + {rows.map((row: OpenSearchSearchHit, index: number) => { return ( 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 d2355367cc5..33404d1d38d 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 @@ -13,22 +13,44 @@ import './_table_cell.scss'; import React, { useState, useMemo, useCallback } from 'react'; import dompurify from 'dompurify'; +import { + EuiButton, + EuiButtonEmpty, + EuiButtonIcon, + EuiDataGridColumn, + EuiToolTip, +} from '@elastic/eui'; +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 { IndexPattern } from '../../../opensearch_dashboards_services'; +import { useDataGridContext } from '../data_grid/data_grid_table_context'; -export const TableCell = ({ column, row, indexPattern }) => { +export interface TableCellProps { + column: EuiDataGridColumn; + row: OpenSearchSearchHit; + rowIndex: number; + indexPattern: IndexPattern; +} + +export const TableCell = ({ column, row, rowIndex, indexPattern }: TableCellProps) => { const singleRow = row as Record; // const flattenedRows = dataRows ? dataRows.map((hit) => idxPattern.flattenHit(hit)) : []; // const flattenedRow = flattenedRows // ? (flattenedRows[rowIndex] as Record) // : undefined; + // console.log("column", column) + // console.log("row", row) + const fieldInfo = indexPattern.fields.getByName(column.id); + // console.log("fieldInfo", fieldInfo) if (typeof singleRow === 'undefined') { return ( - @@ -49,24 +71,86 @@ export const TableCell = ({ column, row, indexPattern }) => { } const formattedValue = indexPattern.formatField(singleRow, column.id); + // const filterFor = column.cellActions ? column.cellActions[0] + if (typeof formattedValue === 'undefined') { return ( - ); } 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 flattened = indexPattern.flattenHit(row); + + if (flattened) { + onFilter(column.id, flattened[column.id], '+'); + } + }} + iconType="plusInCircle" + aria-label={filterForValueLabel} + 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], '-'); + } + }} + iconType="minusInCircle" + aria-label={filterOutValueLabel} + data-test-subj="filterOutValue" + className="osdDocTableCell__filterButton" + /> + + ); + }; + return ( // eslint-disable-next-line react/no-danger + + {fieldInfo?.filterable ? filterForButton() : null} + {fieldInfo?.filterable ? filterOutButton() : null} + ); } diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx index f9a5abb122e..06e746f0d8f 100644 --- a/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx +++ b/src/plugins/discover/public/application/components/default_discover_table/table_header_column.tsx @@ -167,8 +167,6 @@ export function TableHeaderColumn({ }, ]; - console.log('column head buttons', buttons); - return ( @@ -178,7 +176,6 @@ export function TableHeaderColumn({ .map((button, idx) => ( 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 b41a04ed557..6dafcb03b00 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 @@ -10,14 +10,23 @@ */ import React, { useState, useMemo, useCallback } from 'react'; -import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'; +import { EuiButtonIcon, EuiDataGridColumn, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'; import { AnyAction } from '@reduxjs/toolkit'; import { fatalErrorsServiceMock } from 'src/core/public/mocks'; import { TableCell } from './table_cell'; import { DocViewerLinks } from '../doc_viewer_links/doc_viewer_links'; import { DocViewer } from '../doc_viewer/doc_viewer'; +import { OpenSearchSearchHit } from '../../doc_views/doc_views_types'; +import { IndexPattern } from '../../../opensearch_dashboards_services'; -export const TableRow = ({ row, columns, indexPattern }) => { +export interface TableRowProps { + row: OpenSearchSearchHit; + rowIndex: number; + columns: EuiDataGridColumn[]; + indexPattern: IndexPattern; +} + +export const TableRow = ({ row, rowIndex, columns, indexPattern }: TableRowProps) => { const [isExpanded, setIsExpanded] = useState(false); console.log('row', row); const tableRow = ( @@ -38,6 +47,7 @@ export const TableRow = ({ row, columns, indexPattern }) => { key={row._id + column.id} column={column} row={row} + rowIndex={rowIndex} indexPattern={indexPattern} /> );