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) => (
|