add cell filter for and filter out buttons

Signed-off-by: abbyhu2000 <[email protected]>

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;
     }
   }
+
 

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 = ({
           />
         </thead>
         <tbody>
-          {rows.map((row: OpenSearchSearchHit) => {
+          {rows.map((row: OpenSearchSearchHit, index: number) => {
             return (
               <TableRow
                 key={row._id}
                 row={row}
+                rowIndex={index}
                 columns={displayedTableColumns}
                 indexPattern={indexPattern}
               />

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<string, unknown>;
   // const flattenedRows = dataRows ? dataRows.map((hit) => idxPattern.flattenHit(hit)) : [];
   // const flattenedRow = flattenedRows
   //   ? (flattenedRows[rowIndex] as Record<string, unknown>)
   //   : 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 (
       <td
         data-test-subj="docTableField"
-        className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+        className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
       >
         <span>-</span>
       </td>
@@ -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 (
       <td
         data-test-subj="docTableField"
-        className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+        className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
       >
         <span>-</span>
       </td>
     );
   } 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 (
+        <EuiToolTip content={filterForValueText}>
+          <EuiButtonIcon
+            onClick={() => {
+              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"
+          />
+        </EuiToolTip>
+      );
+    };
+
+    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 (
+        <EuiToolTip content={filterOutValueText}>
+          <EuiButtonIcon
+            onClick={() => {
+              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"
+          />
+        </EuiToolTip>
+      );
+    };
+
     return (
       // eslint-disable-next-line react/no-danger
       <td
         data-test-subj="docTableField"
-        className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+        className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
       >
         <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
+        <span>
+          {fieldInfo?.filterable ? filterForButton() : null}
+          {fieldInfo?.filterable ? filterOutButton() : null}
+        </span>
       </td>
     );
   }

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 (
     <th data-test-subj="docTableHeaderField" className="docTableHeaderField">
       <span data-test-subj={`docTableHeader-${name}`}>
@@ -178,7 +176,6 @@ export function TableHeaderColumn({
           .map((button, idx) => (
             <EuiToolTip
               id={`docTableHeader-${name}-tt`}
-              delay="long"
               content={button.tooltip}
               key={`button-${idx}`}
             >

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}
           />
         );