Skip to content

Commit

Permalink
[Data Explorer][Discover 2.0] Enable sort and cell actions for table (o…
Browse files Browse the repository at this point in the history
…pensearch-project#4787)

* [Data Explorer][Discover 2.0] Enable sort and cell actions for table

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

* update test snapshot

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

---------

Signed-off-by: ananzh <[email protected]>
(cherry picked from commit 8766395)
  • Loading branch information
ananzh authored and ashwin-pc committed Aug 26, 2023
1 parent 81ad2e6 commit fcc7ef9
Show file tree
Hide file tree
Showing 8 changed files with 221 additions and 122 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ describe('Testing buildDataGridColumns function ', () => {
"showMoveLeft": false,
"showMoveRight": false,
},
"cellActions": Array [],
"cellActions": undefined,
"display": undefined,
"id": "name",
"isSortable": undefined,
Expand All @@ -73,7 +73,7 @@ describe('Testing buildDataGridColumns function ', () => {
"showMoveLeft": false,
"showMoveRight": false,
},
"cellActions": Array [],
"cellActions": undefined,
"display": undefined,
"id": "currency",
"isSortable": undefined,
Expand Down Expand Up @@ -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,
Expand All @@ -115,7 +115,7 @@ describe('Testing buildDataGridColumns function ', () => {
"showMoveLeft": false,
"showMoveRight": false,
},
"cellActions": Array [],
"cellActions": undefined,
"display": undefined,
"id": "name",
"isSortable": undefined,
Expand All @@ -127,7 +127,7 @@ describe('Testing buildDataGridColumns function ', () => {
"showMoveLeft": false,
"showMoveRight": false,
},
"cellActions": Array [],
"cellActions": undefined,
"display": undefined,
"id": "currency",
"isSortable": undefined,
Expand All @@ -139,7 +139,7 @@ describe('Testing buildDataGridColumns function ', () => {
"showMoveLeft": false,
"showMoveRight": false,
},
"cellActions": Array [],
"cellActions": undefined,
"display": "Source",
"id": "_source",
"isSortable": undefined,
Expand All @@ -166,7 +166,7 @@ describe('Testing buildDataGridColumns function ', () => {
"showMoveLeft": false,
"showMoveRight": false,
},
"cellActions": Array [],
"cellActions": undefined,
"display": undefined,
"id": "name",
"isSortable": undefined,
Expand All @@ -178,7 +178,7 @@ describe('Testing buildDataGridColumns function ', () => {
"showMoveLeft": false,
"showMoveRight": false,
},
"cellActions": Array [],
"cellActions": undefined,
"display": undefined,
"id": "currency",
"isSortable": undefined,
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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[],
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand All @@ -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
*/
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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(
Expand Down
Loading

0 comments on commit fcc7ef9

Please sign in to comment.