)
- // : undefined;
-
- const fieldInfo = indexPattern.fields.getByName(column.id);
- const fieldMapping = flattened[column.id];
-
- if (typeof singleRow === 'undefined') {
- return (
- |
- -
- |
- );
- }
-
- // TODO: when the cell is a object
- // if (!fieldInfo?.type && typeof flattenedRow?.[columnId] === 'object') {
- // return {stringify(flattenedRow[columnId])};
- // }
-
- if (fieldInfo?.type === '_source') {
- return (
-
- {fetchSourceTypeDataCell(indexPattern, singleRow, column.id, false)}
- |
- );
- }
-
- const formattedValue = indexPattern.formatField(singleRow, column.id);
-
if (typeof formattedValue === 'undefined') {
return (
onFilter(column.id, fieldMapping, '+')}
+ onClick={() => onFilter(columnId, fieldMapping, '+')}
iconType="plusInCircle"
aria-label={i18n.translate('discover.filterForValueLabel', {
defaultMessage: 'Filter for value',
@@ -114,7 +67,7 @@ export const TableCell = ({
})}
>
onFilter(column.id, fieldMapping, '-')}
+ onClick={() => onFilter(columnId, fieldMapping, '-')}
iconType="minusInCircle"
aria-label={i18n.translate('discover.filterOutValueLabel', {
defaultMessage: 'Filter out value',
@@ -133,7 +86,7 @@ export const TableCell = ({
className="osdDocTableCell eui-textBreakAll eui-textBreakWord"
>
- {fieldInfo?.filterable && filters}
+ {filterable && filters}
|
);
}
diff --git a/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx b/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx
index e2039fac5a74..60b765f9a9d3 100644
--- a/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx
+++ b/src/plugins/discover/public/application/components/default_discover_table/table_header.tsx
@@ -27,6 +27,7 @@ interface Props {
onChangeSortOrder?: (cols: EuiDataGridSorting['columns']) => void;
onMoveColumn?: (name: string, index: number) => void;
onRemoveColumn?: (name: string) => void;
+ onReorderColumn?: (col: string, source: number, destination: number) => void;
sortOrder: Array<{
id: string;
direction: 'desc' | 'asc';
@@ -34,7 +35,6 @@ interface Props {
}
export function TableHeader({
- // columns,
displayedTableColumns,
defaultSortOrder,
// hideTimeColumn,
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 6826be1dc6db..a9359807da83 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
@@ -13,8 +13,7 @@ import './_table_header.scss';
import React, { ReactNode } from 'react';
import { i18n } from '@osd/i18n';
-import { EuiButtonIcon, EuiDataGridSorting, EuiFieldText, EuiIcon, EuiToolTip } from '@elastic/eui';
-import { SortOrder } from '../../view_components/utils/get_default_sort';
+import { EuiButtonIcon, EuiDataGridSorting, EuiToolTip } from '@elastic/eui';
interface Props {
currentIdx: number;
@@ -26,11 +25,12 @@ interface Props {
name: string;
onChangeSortOrder?: (cols: EuiDataGridSorting['columns']) => void;
onMoveColumn?: (name: string, idx: number) => void;
+ onReorderColumn?: (col: string, source: number, destination: number) => void;
onRemoveColumn?: (name: string) => void;
- sortOrder: {
+ sortOrder: Array<{
id: string;
- direction: "desc" | "asc";
-}[];
+ direction: 'desc' | 'asc';
+ }>;
}
const sortDirectionToIcon: Record = {
@@ -52,14 +52,15 @@ export function TableHeaderColumn({
onRemoveColumn,
sortOrder,
}: Props) {
- //const [, sortDirection = ''] = sortOrder.find((sortPair) => name === sortPair.id) || [];
const currentSortWithoutColumn = sortOrder.filter((pair) => pair.id !== name);
const currentColumnSort = sortOrder.find((pair) => pair.id === name);
const currentColumnSortDirection = (currentColumnSort && currentColumnSort.direction) || '';
const btnSortIcon = sortDirectionToIcon[currentColumnSortDirection];
const btnSortClassName =
- currentColumnSortDirection !== '' ? btnSortIcon : `osdDocTableHeader__sortChange ${btnSortIcon}`;
+ currentColumnSortDirection !== ''
+ ? btnSortIcon
+ : `osdDocTableHeader__sortChange ${btnSortIcon}`;
const handleChangeSortOrder = () => {
if (!onChangeSortOrder) return;
@@ -67,31 +68,31 @@ export function TableHeaderColumn({
let currentSortOrder;
let newSortOrder: {
id: string;
- direction: "desc" | "asc";
- };
+ direction: 'desc' | 'asc';
+ };
// Cycle goes Unsorted -> Asc -> Desc -> Unsorted
if (currentColumnSort === undefined) {
newSortOrder = {
id: name,
- direction: "asc"
- }
- currentSortOrder = [...currentSortWithoutColumn, newSortOrder]
+ direction: 'asc',
+ };
+ currentSortOrder = [...currentSortWithoutColumn, newSortOrder];
onChangeSortOrder(currentSortOrder);
} else if (currentColumnSortDirection === 'asc') {
newSortOrder = {
id: name,
- direction: "desc"
- }
- currentSortOrder = [...currentSortWithoutColumn, newSortOrder]
+ direction: 'desc',
+ };
+ currentSortOrder = [...currentSortWithoutColumn, newSortOrder];
onChangeSortOrder(currentSortOrder);
} else if (currentColumnSortDirection === 'desc' && currentSortWithoutColumn.length === 0) {
// If we're at the end of the cycle and this is the only existing sort, we switch
// back to ascending sort instead of removing it.
newSortOrder = {
id: name,
- direction: "asc"
- }
- currentSortOrder = [...currentSortWithoutColumn, newSortOrder]
+ direction: 'asc',
+ };
+ currentSortOrder = [...currentSortWithoutColumn, newSortOrder];
onChangeSortOrder(currentSortOrder);
} else {
onChangeSortOrder(currentSortWithoutColumn);
@@ -142,7 +143,7 @@ export function TableHeaderColumn({
onClick: handleChangeSortOrder,
testSubject: `docTableHeaderFieldSort_${name}`,
tooltip: getSortButtonAriaLabel(),
- iconType: "sortable"
+ iconType: 'sortable',
},
// Remove Button
{
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
index ad1384b3f6a5..2b0a5fd4e78f 100644
--- 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
@@ -9,20 +9,18 @@
* GitHub history for details.
*/
-import React, { useState, useMemo, useCallback } from 'react';
-import { EuiButtonIcon, EuiDataGridColumn, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
-import { AnyAction } from '@reduxjs/toolkit';
-import { fatalErrorsServiceMock } from 'src/core/public/mocks';
+import React, { useState } from 'react';
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
import { TableCell } from './table_cell';
import { DocViewerLinks } from '../doc_viewer_links/doc_viewer_links';
import { DocViewer } from '../doc_viewer/doc_viewer';
import { DocViewFilterFn, OpenSearchSearchHit } from '../../doc_views/doc_views_types';
import { IndexPattern } from '../../../opensearch_dashboards_services';
+import { fetchSourceTypeDataCell } from '../data_grid/data_grid_table_cell_value';
export interface TableRowProps {
row: OpenSearchSearchHit;
- rowIndex: number;
- displayedTableColumns: EuiDataGridColumn[];
+ columnIds: string[];
columns: string[];
indexPattern: IndexPattern;
onRemoveColumn: (column: string) => void;
@@ -33,8 +31,7 @@ export interface TableRowProps {
export const TableRow = ({
row,
- rowIndex,
- displayedTableColumns,
+ columnIds,
columns,
indexPattern,
onRemoveColumn,
@@ -56,16 +53,38 @@ export const TableRow = ({
className="osdDocTableCell__toggleDetails"
/>
- {displayedTableColumns.map((column) => {
+ {columnIds.map((columnId) => {
+ const fieldInfo = indexPattern.fields.getByName(columnId);
+ const fieldMapping = flattened[columnId];
+
+ if (typeof row === 'undefined') {
+ return (
+
+ -
+ |
+ );
+ }
+
+ if (fieldInfo?.type === '_source') {
+ return (
+
+ {fetchSourceTypeDataCell(indexPattern, row, columnId, false)}
+ |
+ );
+ }
+
+ const formattedValue = indexPattern.formatField(row, columnId);
return (
);
})}
@@ -76,11 +95,11 @@ export const TableRow = ({
- {displayedTableColumns.size}
+ {columnIds.length}
{}}
onFilter={onAddFilter}
onRemoveColumn={() => {}}
+ onReorderColumn={() => {}}
onSetColumns={() => {}}
onSort={() => {}}
sort={sort}
diff --git a/src/plugins/discover/public/embeddable/search_embeddable.tsx b/src/plugins/discover/public/embeddable/search_embeddable.tsx
index a37a001ad798..fd4c1761ad52 100644
--- a/src/plugins/discover/public/embeddable/search_embeddable.tsx
+++ b/src/plugins/discover/public/embeddable/search_embeddable.tsx
@@ -80,6 +80,7 @@ export interface SearchProps {
onRemoveColumn?: (column: string) => void;
onAddColumn?: (column: string) => void;
onMoveColumn?: (column: string, index: number) => void;
+ onReorderColumn?: (col: string, source: number, destination: number) => void;
onFilter?: (field: IFieldType, value: string[], operator: string) => void;
rows?: any[];
indexPattern?: IndexPattern;
diff --git a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx b/src/plugins/discover/public/embeddable/search_embeddable_component.tsx
index ebf8bb778026..8fb13b3d215c 100644
--- a/src/plugins/discover/public/embeddable/search_embeddable_component.tsx
+++ b/src/plugins/discover/public/embeddable/search_embeddable_component.tsx
@@ -34,6 +34,7 @@ export function SearchEmbeddableComponent({ searchProps }: SearchEmbeddableProps
onAddColumn: searchProps.onAddColumn,
onFilter: searchProps.onFilter,
onRemoveColumn: searchProps.onRemoveColumn,
+ onReorderColumn: searchProps.onReorderColumn,
onSort: searchProps.onSort,
rows: searchProps.rows,
onSetColumns: searchProps.onSetColumns,
|