[Data Explorer][Discover 2.0] Enable sort and cell actions for table (o…

…pensearch-project#4787) * [Data Explorer][Discover 2.0] Enable sort and cell actions for table Signed-off-by: ananzh <ananzh@amazon.com> * update test snapshot Signed-off-by: ananzh <ananzh@amazon.com> --------- Signed-off-by: ananzh <ananzh@amazon.com>
ashwin-pc · Aug 26, 2023 · 8766395 · 8766395
1 parent 551e432
commit 8766395
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 122 deletions.
diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table.tsx
@@ -16,17 +16,18 @@ import { DocViewFilterFn } from '../../doc_views/doc_views_types';
 import { DiscoverServices } from '../../../build_services';
 import { OpenSearchSearchHit } from '../../doc_views/doc_views_types';
 import { usePagination } from '../utils/use_pagination';
+import { SortOrder } from '../../../saved_searches/types';
 
 export interface DataGridTableProps {
   columns: string[];
   indexPattern: IndexPattern;
   onAddColumn: (column: string) => void;
   onFilter: DocViewFilterFn;
   onRemoveColumn: (column: string) => void;
-  onSort: (sort: Array<[string, 'asc' | 'desc']>) => void;
+  onSort: (sort: SortOrder[]) => void;
   rows: OpenSearchSearchHit[];
   onSetColumns: (columns: string[]) => void;
-  sort: Array<[string, 'asc' | 'desc']>;
+  sort: SortOrder[];
   displayTimeColumn: boolean;
   services: DiscoverServices;
   isToolbarVisible?: boolean;

diff --git a/...plugins/discover/public/application/components/data_grid/data_grid_table_cell_actions.tsx b/...plugins/discover/public/application/components/data_grid/data_grid_table_cell_actions.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiDataGridColumnCellActionProps } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { IndexPatternField } from '../../../../../data/common';
+import { useDataGridContext } from './data_grid_table_context';
+
+export function getCellActions(field: IndexPatternField) {
+  const cellActions = field.filterable
+    ? [
+        ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
+          const { indexPattern, rows, onFilter } = useDataGridContext();
+
+          const filterForValueText = i18n.translate('discover.filterForValue', {
+            defaultMessage: 'Filter for value',
+          });
+          const filterForValueLabel = i18n.translate('discover.filterForValueLabel', {
+            defaultMessage: 'Filter for value: {value}',
+            values: { value: columnId },
+          });
+
+          return (
+            <Component
+              onClick={() => {
+                const row = rows[rowIndex];
+                const flattened = indexPattern.flattenHit(row);
+
+                if (flattened) {
+                  onFilter(columnId, flattened[columnId], '+');
+                }
+              }}
+              iconType="plusInCircle"
+              aria-label={filterForValueLabel}
+              data-test-subj="filterForValue"
+            >
+              {filterForValueText}
+            </Component>
+          );
+        },
+        ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => {
+          const { indexPattern, rows, onFilter } = useDataGridContext();
+
+          const filterOutValueText = i18n.translate('discover.filterOutValue', {
+            defaultMessage: 'Filter out value',
+          });
+          const filterOutValueLabel = i18n.translate('discover.filterOutValueLabel', {
+            defaultMessage: 'Filter out value: {value}',
+            values: { value: columnId },
+          });
+
+          return (
+            <Component
+              onClick={() => {
+                const row = rows[rowIndex];
+                const flattened = indexPattern.flattenHit(row);
+
+                if (flattened) {
+                  onFilter(columnId, flattened[columnId], '-');
+                }
+              }}
+              iconType="minusInCircle"
+              aria-label={filterOutValueLabel}
+              data-test-subj="filterOutValue"
+            >
+              {filterOutValueText}
+            </Component>
+          );
+        },
+      ]
+    : undefined;
+  return cellActions;
+}
diff --git a/...plugins/discover/public/application/components/data_grid/data_grid_table_columns.test.tsx b/...plugins/discover/public/application/components/data_grid/data_grid_table_columns.test.tsx
@@ -61,7 +61,7 @@ describe('Testing buildDataGridColumns function ', () => {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": Array [],
+          "cellActions": undefined,
           "display": undefined,
           "id": "name",
           "isSortable": undefined,
@@ -73,7 +73,7 @@ describe('Testing buildDataGridColumns function ', () => {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": Array [],
+          "cellActions": undefined,
           "display": undefined,
           "id": "currency",
           "isSortable": undefined,
@@ -102,7 +102,7 @@ describe('Testing buildDataGridColumns function ', () => {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": Array [],
+          "cellActions": undefined,
           "display": "Time (order_date)",
           "id": "order_date",
           "initialWidth": 200,
@@ -115,7 +115,7 @@ describe('Testing buildDataGridColumns function ', () => {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": Array [],
+          "cellActions": undefined,
           "display": undefined,
           "id": "name",
           "isSortable": undefined,
@@ -127,7 +127,7 @@ describe('Testing buildDataGridColumns function ', () => {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": Array [],
+          "cellActions": undefined,
           "display": undefined,
           "id": "currency",
           "isSortable": undefined,
@@ -139,7 +139,7 @@ describe('Testing buildDataGridColumns function ', () => {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": Array [],
+          "cellActions": undefined,
           "display": "Source",
           "id": "_source",
           "isSortable": undefined,
@@ -166,7 +166,7 @@ describe('Testing buildDataGridColumns function ', () => {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": Array [],
+          "cellActions": undefined,
           "display": undefined,
           "id": "name",
           "isSortable": undefined,
@@ -178,7 +178,7 @@ describe('Testing buildDataGridColumns function ', () => {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": Array [],
+          "cellActions": undefined,
           "display": undefined,
           "id": "currency",
           "isSortable": undefined,
@@ -190,7 +190,7 @@ describe('Testing buildDataGridColumns function ', () => {
             "showMoveLeft": false,
             "showMoveRight": false,
           },
-          "cellActions": Array [],
+          "cellActions": undefined,
           "display": "Time (order_date)",
           "id": "order_date",
           "initialWidth": 200,

diff --git a/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.tsx b/src/plugins/discover/public/application/components/data_grid/data_grid_table_columns.tsx
@@ -6,6 +6,7 @@
 import { EuiDataGridColumn } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { getCellActions } from './data_grid_table_cell_actions';
 
 export function buildDataGridColumns(
   columnNames: string[],
@@ -37,7 +38,7 @@ export function generateDataGridTableColumn(colName: string, idxPattern: IndexPa
       showMoveLeft: false,
       showMoveRight: false,
     },
-    cellActions: [],
+    cellActions: idxPatternField ? getCellActions(idxPatternField) : [],
   };
 
   if (dataGridCol.id === idxPattern.timeFieldName) {

diff --git a/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx b/src/plugins/discover/public/application/utils/state_management/discover_slice.tsx
@@ -10,6 +10,7 @@ import { DiscoverServices } from '../../../build_services';
 import { RootState, DefaultViewState } from '../../../../../data_explorer/public';
 import { buildColumns } from '../columns';
 import * as utils from './common';
+import { SortOrder } from '../../../saved_searches/types';
 
 export interface DiscoverState {
   /**
@@ -31,7 +32,7 @@ export interface DiscoverState {
   /**
    * Array of the used sorting [[field,direction],...]
    */
-  sort: Array<[string, string]>;
+  sort: SortOrder[];
   /**
    * id of the used saved search
    */
@@ -129,7 +130,7 @@ export const discoverSlice = createSlice({
         columns,
       };
     },
-    setSort(state, action: PayloadAction<Array<[string, string]>>) {
+    setSort(state, action: PayloadAction<SortOrder[]>) {
       return {
         ...state,
         sort: action.payload,

diff --git a/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx b/src/plugins/discover/public/application/view_components/canvas/discover_table.tsx
@@ -20,6 +20,7 @@ import {
 import { ResultStatus, SearchData } from '../utils/use_search';
 import { IndexPatternField, opensearchFilters } from '../../../../../data/public';
 import { DocViewFilterFn } from '../../doc_views/doc_views_types';
+import { SortOrder } from '../../../saved_searches/types';
 
 interface Props {
   history: History;
@@ -40,7 +41,7 @@ export const DiscoverTable = ({ history }: Props) => {
   const onRemoveColumn = (col: string) => dispatch(removeColumn(col));
   const onSetColumns = (cols: string[]) =>
     dispatch(setColumns({ timefield: indexPattern.timeFieldName, columns: cols }));
-  const onSetSort = (s: Array<[string, string]>) => dispatch(setSort(s));
+  const onSetSort = (s: SortOrder[]) => dispatch(setSort(s));
   const onAddFilter = useCallback(
     (field: IndexPatternField, values: string, operation: '+' | '-') => {
       const newFilters = opensearchFilters.generateFilters(