optimize cell filter logics

Signed-off-by: abbyhu2000 <[email protected]>
abbyhu2000 · Jan 29, 2024 · d650824 · d650824
1 parent 6cbe177
commit d650824
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 52 deletions.
diff --git a/.../discover/public/application/components/default_discover_table/default_discover_table.tsx b/.../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
@@ -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,16 +32,26 @@ export interface TableCellProps {
   row: OpenSearchSearchHit;
   rowIndex: number;
   indexPattern: IndexPattern;
+  flattened: Record<string, any>;
+  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<string, unknown>;
   // const flattenedRows = dataRows ? dataRows.map((hit) => idxPattern.flattenHit(hit)) : [];
   // const flattenedRow = flattenedRows
   //   ? (flattenedRows[rowIndex] as Record<string, unknown>)
   //   : 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 (
-        <EuiToolTip content={filterForValueText}>
+    const filters = (
+      <span className="osdDocTableCell__filter">
+        <EuiToolTip
+          content={i18n.translate('discover.filterForValue', {
+            defaultMessage: 'Filter for value',
+          })}
+        >
           <EuiButtonIcon
-            onClick={() => {
-              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"
           />
         </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}>
+        <EuiToolTip
+          content={i18n.translate('discover.filterOutValue', {
+            defaultMessage: 'Filter out value',
+          })}
+        >
           <EuiButtonIcon
-            onClick={() => {
-              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"
           />
         </EuiToolTip>
-      );
-    };
+      </span>
+    );
 
     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"
       >
         <span dangerouslySetInnerHTML={{ __html: sanitizedCellValue }} />
-        <span className="osdDocTableCell__filter">
-          {fieldInfo?.filterable ? filterForButton() : null}
-          {fieldInfo?.filterable ? filterOutButton() : null}
-        </span>
+        {fieldInfo?.filterable && filters}
       </td>
     );
   }

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
@@ -42,6 +42,7 @@ export const TableRow = ({
   onFilter,
   onClose,
 }: TableRowProps) => {
+  const flattened = indexPattern.flattenHit(row);
   const [isExpanded, setIsExpanded] = useState(false);
   const tableRow = (
     <tr>
@@ -63,12 +64,13 @@ export const TableRow = ({
             row={row}
             rowIndex={rowIndex}
             indexPattern={indexPattern}
+            flattened={flattened}
+            onFilter={onFilter}
           />
         );
       })}
     </tr>
   );
-  const columnFields: string[] = displayedTableColumns.map((column: any) => column.id);
 
   const expandedTableRow = (
     <tr>