([1, 2]);
+// Required for usage in React.lazy
+// eslint-disable-next-line import/no-default-export
+export default DocViewerLegacyTable;
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.test.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.test.tsx
similarity index 96%
rename from src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.test.tsx
rename to src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.test.tsx
index c956b36b62594..7fc9c16858263 100644
--- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.test.tsx
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.test.tsx
@@ -9,15 +9,16 @@
import React from 'react';
import { mountWithIntl } from '@kbn/test/jest';
import { findTestSubject } from '@elastic/eui/lib/test';
-import { DocViewerTable, DocViewerTableProps } from './table';
-import { IndexPattern } from '../../../../../../data/public';
+import { DocViewerLegacyTable } from './table';
+import { IndexPattern } from '../../../../../../../data/public';
+import { DocViewRenderProps } from '../../../doc_views_types';
-jest.mock('../../../../kibana_services', () => ({
+jest.mock('../../../../../kibana_services', () => ({
getServices: jest.fn(),
}));
-import { getServices } from '../../../../kibana_services';
-import { ElasticSearchHit } from '../../../../types';
+import { getServices } from '../../../../../kibana_services';
+import { ElasticSearchHit } from '../../../../../types';
(getServices as jest.Mock).mockImplementation(() => ({
uiSettings: {
@@ -76,8 +77,8 @@ indexPattern.fields.getByName = (name: string) => {
return indexPattern.fields.getAll().find((field) => field.name === name);
};
-const mountComponent = (props: DocViewerTableProps) => {
- return mountWithIntl();
+const mountComponent = (props: DocViewRenderProps) => {
+ return mountWithIntl();
};
describe('DocViewTable at Discover', () => {
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.tsx
new file mode 100644
index 0000000000000..517093635897e
--- /dev/null
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import '../table.scss';
+import React, { useCallback, useMemo } from 'react';
+import { EuiInMemoryTable } from '@elastic/eui';
+import { flattenHit } from '../../../../../../../data/common';
+import { SHOW_MULTIFIELDS } from '../../../../../../common';
+import { getServices } from '../../../../../kibana_services';
+import { DocViewRenderProps, FieldRecordLegacy } from '../../../doc_views_types';
+import { ACTIONS_COLUMN, MAIN_COLUMNS } from './table_columns';
+import { getFieldsToShow } from '../../../../../utils/get_fields_to_show';
+import { getIgnoredReason } from '../../../../../utils/get_ignored_reason';
+import { formatFieldValue } from '../../../../../utils/format_value';
+import { isNestedFieldParent } from '../../../../../application/main/utils/nested_fields';
+
+export const DocViewerLegacyTable = ({
+ columns,
+ hit,
+ indexPattern: dataView,
+ filter,
+ onAddColumn,
+ onRemoveColumn,
+}: DocViewRenderProps) => {
+ const showMultiFields = getServices().uiSettings.get(SHOW_MULTIFIELDS);
+
+ const mapping = useCallback((name: string) => dataView.fields.getByName(name), [dataView.fields]);
+ const tableColumns = useMemo(() => {
+ return filter ? [ACTIONS_COLUMN, ...MAIN_COLUMNS] : MAIN_COLUMNS;
+ }, [filter]);
+ const onToggleColumn = useCallback(
+ (field: string) => {
+ if (!onRemoveColumn || !onAddColumn || !columns) {
+ return;
+ }
+ if (columns.includes(field)) {
+ onRemoveColumn(field);
+ } else {
+ onAddColumn(field);
+ }
+ },
+ [onRemoveColumn, onAddColumn, columns]
+ );
+
+ const onSetRowProps = useCallback(({ field: { field } }: FieldRecordLegacy) => {
+ return {
+ key: field,
+ className: 'kbnDocViewer__tableRow',
+ 'data-test-subj': `tableDocViewRow-${field}`,
+ };
+ }, []);
+
+ const flattened = flattenHit(hit, dataView, { source: true, includeIgnoredValues: true });
+ const fieldsToShow = getFieldsToShow(Object.keys(flattened), dataView, showMultiFields);
+
+ const items: FieldRecordLegacy[] = Object.keys(flattened)
+ .filter((fieldName) => {
+ return fieldsToShow.includes(fieldName);
+ })
+ .sort((fieldA, fieldB) => {
+ const mappingA = mapping(fieldA);
+ const mappingB = mapping(fieldB);
+ const nameA = !mappingA || !mappingA.displayName ? fieldA : mappingA.displayName;
+ const nameB = !mappingB || !mappingB.displayName ? fieldB : mappingB.displayName;
+ return nameA.localeCompare(nameB);
+ })
+ .map((field) => {
+ const fieldMapping = mapping(field);
+ const displayName = fieldMapping?.displayName ?? field;
+ const fieldType = isNestedFieldParent(field, dataView) ? 'nested' : fieldMapping?.type;
+ const ignored = getIgnoredReason(fieldMapping ?? field, hit._ignored);
+ return {
+ action: {
+ onToggleColumn,
+ onFilter: filter,
+ isActive: !!columns?.includes(field),
+ flattenedField: flattened[field],
+ },
+ field: {
+ field,
+ displayName,
+ fieldMapping,
+ fieldType,
+ scripted: Boolean(fieldMapping?.scripted),
+ },
+ value: {
+ formattedValue: formatFieldValue(flattened[field], hit, dataView, fieldMapping),
+ ignored,
+ },
+ };
+ });
+
+ return (
+
+ );
+};
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table_cell_actions.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table_cell_actions.tsx
new file mode 100644
index 0000000000000..782a889637e70
--- /dev/null
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table_cell_actions.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { DocViewTableRowBtnFilterRemove } from './table_row_btn_filter_remove';
+import { DocViewTableRowBtnFilterExists } from './table_row_btn_filter_exists';
+import { DocViewTableRowBtnToggleColumn } from './table_row_btn_toggle_column';
+import { DocViewTableRowBtnFilterAdd } from './table_row_btn_filter_add';
+import { IndexPatternField } from '../../../../../../../data/public';
+import { DocViewFilterFn } from '../../../doc_views_types';
+
+interface TableActionsProps {
+ field: string;
+ isActive: boolean;
+ flattenedField: unknown;
+ fieldMapping?: IndexPatternField;
+ onFilter: DocViewFilterFn;
+ onToggleColumn: (field: string) => void;
+ ignoredValue: boolean;
+}
+
+export const TableActions = ({
+ isActive,
+ field,
+ fieldMapping,
+ flattenedField,
+ onToggleColumn,
+ onFilter,
+ ignoredValue,
+}: TableActionsProps) => {
+ return (
+
+ onFilter(fieldMapping, flattenedField, '+')}
+ />
+ onFilter(fieldMapping, flattenedField, '-')}
+ />
+ onToggleColumn(field)}
+ />
+ onFilter('_exists_', field, '+')}
+ scripted={fieldMapping && fieldMapping.scripted}
+ />
+
+ );
+};
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_columns.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table_columns.tsx
similarity index 82%
rename from src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_columns.tsx
rename to src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table_columns.tsx
index a95db63af00b1..121187761b2c6 100644
--- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_columns.tsx
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/legacy/table_columns.tsx
@@ -9,12 +9,12 @@
import { EuiBasicTableColumn, EuiText } from '@elastic/eui';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
-import { FieldName } from '../../../../components/field_name/field_name';
-import { FieldRecord } from './table';
+import { FieldName } from '../../../../../components/field_name/field_name';
import { TableActions } from './table_cell_actions';
-import { TableFieldValue } from './table_cell_value';
+import { TableFieldValue } from '../table_cell_value';
+import { FieldRecordLegacy } from '../../../doc_views_types';
-export const ACTIONS_COLUMN: EuiBasicTableColumn = {
+export const ACTIONS_COLUMN: EuiBasicTableColumn = {
field: 'action',
className: 'kbnDocViewer__tableActionsCell',
width: '108px',
@@ -30,8 +30,8 @@ export const ACTIONS_COLUMN: EuiBasicTableColumn = {
),
render: (
- { flattenedField, isActive, onFilter, onToggleColumn }: FieldRecord['action'],
- { field: { field, fieldMapping }, value: { ignored } }: FieldRecord
+ { flattenedField, isActive, onFilter, onToggleColumn }: FieldRecordLegacy['action'],
+ { field: { field, fieldMapping }, value: { ignored } }: FieldRecordLegacy
) => {
return (
= {
);
},
};
-
-export const MAIN_COLUMNS: Array> = [
+export const MAIN_COLUMNS: Array> = [
{
field: 'field',
className: 'kbnDocViewer__tableFieldNameCell',
@@ -60,7 +59,13 @@ export const MAIN_COLUMNS: Array> = [
),
- render: ({ field, fieldType, displayName, fieldMapping, scripted }: FieldRecord['field']) => {
+ render: ({
+ field,
+ fieldType,
+ displayName,
+ fieldMapping,
+ scripted,
+ }: FieldRecordLegacy['field']) => {
return field ? (
> = [
),
render: (
- { formattedValue, ignored }: FieldRecord['value'],
- { field: { field }, action: { flattenedField } }: FieldRecord
+ { formattedValue, ignored }: FieldRecordLegacy['value'],
+ { field: { field }, action: { flattenedField } }: FieldRecordLegacy
) => {
return (
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.scss b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.scss
index df8498449aa59..c3d3631177c4e 100644
--- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.scss
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.scss
@@ -2,10 +2,6 @@
.euiTableRowCell {
vertical-align: top;
}
-
- tr:first-child th {
- border-bottom-color: transparent;
- }
}
.kbnDocViewer__tableRow {
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx
index 433227133370e..65806bb03a0bd 100644
--- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table.tsx
@@ -7,67 +7,125 @@
*/
import './table.scss';
-import React, { useCallback, useMemo } from 'react';
-import { EuiInMemoryTable } from '@elastic/eui';
-import { IndexPattern, IndexPatternField } from '../../../../../../data/public';
+import React, { useCallback, useState } from 'react';
+import {
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFieldSearch,
+ EuiSpacer,
+ EuiTable,
+ EuiTableBody,
+ EuiTableRowCell,
+ EuiTableRow,
+ EuiTableHeader,
+ EuiTableHeaderCell,
+ EuiText,
+ EuiTablePagination,
+ EuiSelectableMessage,
+ EuiI18n,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { debounce } from 'lodash';
+import { Storage } from '../../../../../../kibana_utils/public';
+import { usePager } from '../../../../utils/use_pager';
+import { FieldName } from '../../../../components/field_name/field_name';
import { flattenHit } from '../../../../../../data/common';
import { SHOW_MULTIFIELDS } from '../../../../../common';
import { getServices } from '../../../../kibana_services';
-import { DocViewFilterFn, DocViewRenderProps } from '../../doc_views_types';
-import { ACTIONS_COLUMN, MAIN_COLUMNS } from './table_columns';
+import { DocViewRenderProps, FieldRecordLegacy } from '../../doc_views_types';
import { getFieldsToShow } from '../../../../utils/get_fields_to_show';
-import { getIgnoredReason, IgnoredReason } from '../../../../utils/get_ignored_reason';
+import { getIgnoredReason } from '../../../../utils/get_ignored_reason';
import { formatFieldValue } from '../../../../utils/format_value';
import { isNestedFieldParent } from '../../../../application/main/utils/nested_fields';
-import { ElasticSearchHit } from '../../../../types';
-
-export interface DocViewerTableProps {
- columns?: string[];
- filter?: DocViewFilterFn;
- hit: ElasticSearchHit;
- indexPattern: IndexPattern;
- onAddColumn?: (columnName: string) => void;
- onRemoveColumn?: (columnName: string) => void;
-}
+import { TableFieldValue } from './table_cell_value';
+import { TableActions } from './table_cell_actions';
export interface FieldRecord {
- action: {
- isActive: boolean;
- onFilter?: DocViewFilterFn;
- onToggleColumn: (field: string) => void;
- flattenedField: unknown;
- };
+ action: Omit;
field: {
- displayName: string;
- field: string;
- scripted: boolean;
- fieldType?: string;
- fieldMapping?: IndexPatternField;
- };
- value: {
- formattedValue: string;
- ignored?: IgnoredReason;
- };
+ pinned: boolean;
+ onTogglePinned: (field: string) => void;
+ } & FieldRecordLegacy['field'];
+ value: FieldRecordLegacy['value'];
+}
+
+interface ItemsEntry {
+ pinnedItems: FieldRecord[];
+ restItems: FieldRecord[];
}
+const MOBILE_OPTIONS = { header: false };
+const PAGE_SIZE_OPTIONS = [25, 50, 100];
+const DEFAULT_PAGE_SIZE = 25;
+const PINNED_FIELDS_KEY = 'discover:pinnedFields';
+const PAGE_SIZE = 'discover:pageSize';
+const SEARCH_TEXT = 'discover:searchText';
+
+const getPinnedFields = (dataViewId: string, storage: Storage): string[] => {
+ const pinnedFieldsEntry = storage.get(PINNED_FIELDS_KEY);
+ if (
+ typeof pinnedFieldsEntry === 'object' &&
+ pinnedFieldsEntry !== null &&
+ Array.isArray(pinnedFieldsEntry[dataViewId])
+ ) {
+ return pinnedFieldsEntry[dataViewId].filter((cur: unknown) => typeof cur === 'string');
+ }
+ return [];
+};
+const updatePinnedFieldsState = (newFields: string[], dataViewId: string, storage: Storage) => {
+ let pinnedFieldsEntry = storage.get(PINNED_FIELDS_KEY);
+ pinnedFieldsEntry =
+ typeof pinnedFieldsEntry === 'object' && pinnedFieldsEntry !== null ? pinnedFieldsEntry : {};
+
+ storage.set(PINNED_FIELDS_KEY, {
+ ...pinnedFieldsEntry,
+ [dataViewId]: newFields,
+ });
+};
+
+const getPageSize = (storage: Storage): number => {
+ const pageSize = Number(storage.get(PAGE_SIZE));
+ return pageSize && PAGE_SIZE_OPTIONS.includes(pageSize) ? pageSize : DEFAULT_PAGE_SIZE;
+};
+const updatePageSize = (newPageSize: number, storage: Storage) => {
+ storage.set(PAGE_SIZE, newPageSize);
+};
+
+const getSearchText = (storage: Storage) => {
+ return storage.get(SEARCH_TEXT) || '';
+};
+const updateSearchText = debounce(
+ (newSearchText: string, storage: Storage) => storage.set(SEARCH_TEXT, newSearchText),
+ 500
+);
+
export const DocViewerTable = ({
columns,
hit,
- indexPattern,
+ indexPattern: dataView,
filter,
onAddColumn,
onRemoveColumn,
}: DocViewRenderProps) => {
- const showMultiFields = getServices().uiSettings.get(SHOW_MULTIFIELDS);
+ const { storage, uiSettings } = getServices();
+ const showMultiFields = uiSettings.get(SHOW_MULTIFIELDS);
+ const currentDataViewId = dataView.id!;
+ const isSingleDocView = !filter;
- const mapping = useCallback(
- (name: string) => indexPattern?.fields.getByName(name),
- [indexPattern?.fields]
+ const [searchText, setSearchText] = useState(getSearchText(storage));
+ const [pinnedFields, setPinnedFields] = useState(
+ getPinnedFields(currentDataViewId, storage)
);
- const tableColumns = useMemo(() => {
- return filter ? [ACTIONS_COLUMN, ...MAIN_COLUMNS] : MAIN_COLUMNS;
- }, [filter]);
+ const flattened = flattenHit(hit, dataView, { source: true, includeIgnoredValues: true });
+ const fieldsToShow = getFieldsToShow(Object.keys(flattened), dataView, showMultiFields);
+
+ const searchPlaceholder = i18n.translate('discover.docView.table.searchPlaceHolder', {
+ defaultMessage: 'Search field names',
+ });
+
+ const mapping = useCallback((name: string) => dataView.fields.getByName(name), [dataView.fields]);
const onToggleColumn = useCallback(
(field: string) => {
@@ -83,36 +141,23 @@ export const DocViewerTable = ({
[onRemoveColumn, onAddColumn, columns]
);
- const onSetRowProps = useCallback(({ field: { field } }: FieldRecord) => {
- return {
- key: field,
- className: 'kbnDocViewer__tableRow',
- 'data-test-subj': `tableDocViewRow-${field}`,
- };
- }, []);
-
- if (!indexPattern) {
- return null;
- }
+ const onTogglePinned = useCallback(
+ (field: string) => {
+ const newPinned = pinnedFields.includes(field)
+ ? pinnedFields.filter((curField) => curField !== field)
+ : [...pinnedFields, field];
- const flattened = flattenHit(hit, indexPattern, { source: true, includeIgnoredValues: true });
- const fieldsToShow = getFieldsToShow(Object.keys(flattened), indexPattern, showMultiFields);
+ updatePinnedFieldsState(newPinned, currentDataViewId, storage);
+ setPinnedFields(newPinned);
+ },
+ [currentDataViewId, pinnedFields, storage]
+ );
- const items: FieldRecord[] = Object.keys(flattened)
- .filter((fieldName) => {
- return fieldsToShow.includes(fieldName);
- })
- .sort((fieldA, fieldB) => {
- const mappingA = mapping(fieldA);
- const mappingB = mapping(fieldB);
- const nameA = !mappingA || !mappingA.displayName ? fieldA : mappingA.displayName;
- const nameB = !mappingB || !mappingB.displayName ? fieldB : mappingB.displayName;
- return nameA.localeCompare(nameB);
- })
- .map((field) => {
+ const fieldToItem = useCallback(
+ (field: string) => {
const fieldMapping = mapping(field);
const displayName = fieldMapping?.displayName ?? field;
- const fieldType = isNestedFieldParent(field, indexPattern) ? 'nested' : fieldMapping?.type;
+ const fieldType = isNestedFieldParent(field, dataView) ? 'nested' : fieldMapping?.type;
const ignored = getIgnoredReason(fieldMapping ?? field, hit._ignored);
@@ -129,23 +174,234 @@ export const DocViewerTable = ({
fieldMapping,
fieldType,
scripted: Boolean(fieldMapping?.scripted),
+ pinned: pinnedFields.includes(displayName),
+ onTogglePinned,
},
value: {
- formattedValue: formatFieldValue(flattened[field], hit, indexPattern, fieldMapping),
+ formattedValue: formatFieldValue(flattened[field], hit, dataView, fieldMapping),
ignored,
},
};
+ },
+ [
+ columns,
+ filter,
+ flattened,
+ hit,
+ dataView,
+ mapping,
+ onToggleColumn,
+ onTogglePinned,
+ pinnedFields,
+ ]
+ );
+
+ const handleOnChange = useCallback(
+ (event: React.ChangeEvent) => {
+ const newSearchText = event.currentTarget.value;
+ updateSearchText(newSearchText, storage);
+ setSearchText(newSearchText);
+ },
+ [storage]
+ );
+
+ const { pinnedItems, restItems } = Object.keys(flattened)
+ .sort((fieldA, fieldB) => {
+ const mappingA = mapping(fieldA);
+ const mappingB = mapping(fieldB);
+ const nameA = !mappingA || !mappingA.displayName ? fieldA : mappingA.displayName;
+ const nameB = !mappingB || !mappingB.displayName ? fieldB : mappingB.displayName;
+ return nameA.localeCompare(nameB);
+ })
+ .reduce(
+ (acc, curFieldName) => {
+ if (!fieldsToShow.includes(curFieldName)) {
+ return acc;
+ }
+
+ if (pinnedFields.includes(curFieldName)) {
+ acc.pinnedItems.push(fieldToItem(curFieldName));
+ } else {
+ const fieldMapping = mapping(curFieldName);
+ const displayName = fieldMapping?.displayName ?? curFieldName;
+ if (displayName.includes(searchText)) {
+ // filter only unpinned fields
+ acc.restItems.push(fieldToItem(curFieldName));
+ }
+ }
+
+ return acc;
+ },
+ {
+ pinnedItems: [],
+ restItems: [],
+ }
+ );
+
+ const { curPageIndex, pageSize, totalPages, startIndex, changePageIndex, changePageSize } =
+ usePager({
+ initialPageSize: getPageSize(storage),
+ totalItems: restItems.length,
});
+ const showPagination = totalPages !== 0;
+
+ const onChangePageSize = useCallback(
+ (newPageSize: number) => {
+ updatePageSize(newPageSize, storage);
+ changePageSize(newPageSize);
+ },
+ [changePageSize, storage]
+ );
+
+ const headers = [
+ !isSingleDocView && (
+
+
+
+
+
+
+
+ ),
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+ ,
+ ];
+
+ const renderRows = useCallback(
+ (items: FieldRecord[]) => {
+ return items.map(
+ ({
+ action: { flattenedField, onFilter },
+ field: { field, fieldMapping, displayName, fieldType, scripted, pinned },
+ value: { formattedValue, ignored },
+ }: FieldRecord) => {
+ return (
+
+ {!isSingleDocView && (
+
+
+
+ )}
+
+
+
+
+
+
+
+ );
+ }
+ );
+ },
+ [onToggleColumn, onTogglePinned, isSingleDocView]
+ );
+
+ const rowElements = [
+ ...renderRows(pinnedItems),
+ ...renderRows(restItems.slice(startIndex, pageSize + startIndex)),
+ ];
return (
-
+
+
+
+
+
+
+
+
+
+ {rowElements.length === 0 ? (
+
+
+
+
+
+ ) : (
+
+
+ {headers}
+ {rowElements}
+
+
+ )}
+
+
+
+
+
+ {showPagination && (
+
+
+
+ )}
+
);
};
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_actions.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_actions.tsx
index 05a7056cf07e6..5e528d01d84c4 100644
--- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_actions.tsx
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_actions.tsx
@@ -6,53 +6,183 @@
* Side Public License, v 1.
*/
-import React from 'react';
-import { DocViewTableRowBtnFilterRemove } from './table_row_btn_filter_remove';
-import { DocViewTableRowBtnFilterExists } from './table_row_btn_filter_exists';
-import { DocViewTableRowBtnToggleColumn } from './table_row_btn_toggle_column';
-import { DocViewTableRowBtnFilterAdd } from './table_row_btn_filter_add';
+import React, { useCallback, useState } from 'react';
+import { EuiButtonIcon, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
import { IndexPatternField } from '../../../../../../data/public';
import { DocViewFilterFn } from '../../doc_views_types';
interface TableActionsProps {
field: string;
- isActive: boolean;
+ pinned: boolean;
flattenedField: unknown;
fieldMapping?: IndexPatternField;
onFilter: DocViewFilterFn;
onToggleColumn: (field: string) => void;
ignoredValue: boolean;
+ onTogglePinned: (field: string) => void;
}
export const TableActions = ({
- isActive,
+ pinned,
field,
fieldMapping,
flattenedField,
onToggleColumn,
onFilter,
ignoredValue,
+ onTogglePinned,
}: TableActionsProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const openActionsLabel = i18n.translate('discover.docView.table.actions.open', {
+ defaultMessage: 'Open actions',
+ });
+ const actionsLabel = i18n.translate('discover.docView.table.actions.label', {
+ defaultMessage: 'Actions',
+ });
+
+ // Filters pair
+ const filtersPairDisabled = !fieldMapping || !fieldMapping.filterable || ignoredValue;
+ const filterAddLabel = i18n.translate('discover.docViews.table.filterForValueButtonTooltip', {
+ defaultMessage: 'Filter for value',
+ });
+ const filterAddAriaLabel = i18n.translate(
+ 'discover.docViews.table.filterForValueButtonAriaLabel',
+ { defaultMessage: 'Filter for value' }
+ );
+ const filterOutLabel = i18n.translate('discover.docViews.table.filterOutValueButtonTooltip', {
+ defaultMessage: 'Filter out value',
+ });
+ const filterOutAriaLabel = i18n.translate(
+ 'discover.docViews.table.filterOutValueButtonAriaLabel',
+ { defaultMessage: 'Filter out value' }
+ );
+ const filtersPairToolTip =
+ (filtersPairDisabled &&
+ i18n.translate('discover.docViews.table.unindexedFieldsCanNotBeSearchedTooltip', {
+ defaultMessage: 'Unindexed fields or ignored values cannot be searched',
+ })) ||
+ undefined;
+
+ // Filter exists
+ const filterExistsLabel = i18n.translate(
+ 'discover.docViews.table.filterForFieldPresentButtonTooltip',
+ { defaultMessage: 'Filter for field present' }
+ );
+ const filterExistsAriaLabel = i18n.translate(
+ 'discover.docViews.table.filterForFieldPresentButtonAriaLabel',
+ { defaultMessage: 'Filter for field present' }
+ );
+ const filtersExistsDisabled = !fieldMapping || !fieldMapping.filterable;
+ const filtersExistsToolTip =
+ (filtersExistsDisabled &&
+ (fieldMapping && fieldMapping.scripted
+ ? i18n.translate(
+ 'discover.docViews.table.unableToFilterForPresenceOfScriptedFieldsTooltip',
+ {
+ defaultMessage: 'Unable to filter for presence of scripted fields',
+ }
+ )
+ : i18n.translate('discover.docViews.table.unableToFilterForPresenceOfMetaFieldsTooltip', {
+ defaultMessage: 'Unable to filter for presence of meta fields',
+ }))) ||
+ undefined;
+
+ // Toggle columns
+ const toggleColumnsLabel = i18n.translate(
+ 'discover.docViews.table.toggleColumnInTableButtonTooltip',
+ { defaultMessage: 'Toggle column in table' }
+ );
+ const toggleColumnsAriaLabel = i18n.translate(
+ 'discover.docViews.table.toggleColumnInTableButtonAriaLabel',
+ { defaultMessage: 'Toggle column in table' }
+ );
+
+ // Pinned
+ const pinnedLabel = pinned
+ ? i18n.translate('discover.docViews.table.unpinFieldLabel', { defaultMessage: 'Unpin field' })
+ : i18n.translate('discover.docViews.table.pinFieldLabel', { defaultMessage: 'Pin field' });
+ const pinnedAriaLabel = pinned
+ ? i18n.translate('discover.docViews.table.unpinFieldAriaLabel', {
+ defaultMessage: 'Unpin field',
+ })
+ : i18n.translate('discover.docViews.table.pinFieldAriaLabel', { defaultMessage: 'Pin field' });
+ const pinnedIconType = pinned ? 'pinFilled' : 'pin';
+
+ const openPopover = useCallback(() => setIsOpen(true), [setIsOpen]);
+ const closePopover = useCallback(() => setIsOpen(false), [setIsOpen]);
+ const togglePinned = useCallback(() => onTogglePinned(field), [field, onTogglePinned]);
+ const onClickAction = useCallback(
+ (callback: () => void) => () => {
+ callback();
+ closePopover();
+ },
+ [closePopover]
+ );
+
+ const panels = [
+ {
+ id: 0,
+ title: actionsLabel,
+ items: [
+ {
+ name: filterAddLabel,
+ 'aria-label': filterAddAriaLabel,
+ toolTipContent: filtersPairToolTip,
+ icon: 'plusInCircle',
+ disabled: filtersPairDisabled,
+ onClick: onClickAction(onFilter.bind({}, fieldMapping, flattenedField, '+')),
+ },
+ {
+ name: filterOutLabel,
+ 'aria-label': filterOutAriaLabel,
+ toolTipContent: filtersPairToolTip,
+ icon: 'minusInCircle',
+ disabled: filtersPairDisabled,
+ onClick: onClickAction(onFilter.bind({}, fieldMapping, flattenedField, '-')),
+ },
+ {
+ name: filterExistsLabel,
+ 'aria-label': filterExistsAriaLabel,
+ toolTipContent: filtersExistsToolTip,
+ icon: 'filter',
+ disabled: filtersExistsDisabled,
+ onClick: onClickAction(onFilter.bind({}, fieldMapping, flattenedField, '-')),
+ },
+ {
+ name: toggleColumnsLabel,
+ 'aria-label': toggleColumnsAriaLabel,
+ 'data-test-subj': `toggleColumnButton-${field}`,
+ icon: 'listAdd',
+ onClick: onClickAction(onToggleColumn.bind({}, field)),
+ },
+ {
+ name: pinnedLabel,
+ 'aria-label': pinnedAriaLabel,
+ icon: pinnedIconType,
+ onClick: onClickAction(togglePinned),
+ },
+ ],
+ },
+ ];
+
return (
-
- onFilter(fieldMapping, flattenedField, '+')}
- />
- onFilter(fieldMapping, flattenedField, '-')}
- />
- onToggleColumn(field)}
- />
- onFilter('_exists_', field, '+')}
- scripted={fieldMapping && fieldMapping.scripted}
- />
-
+
+ }
+ isOpen={isOpen}
+ closePopover={closePopover}
+ display="block"
+ panelPaddingSize="none"
+ >
+
+
);
};
diff --git a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_value.tsx b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_value.tsx
index 88d6b30cc633e..d539155ada632 100644
--- a/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_value.tsx
+++ b/src/plugins/discover/public/services/doc_views/components/doc_viewer_table/table_cell_value.tsx
@@ -13,7 +13,7 @@ import React, { Fragment, useState } from 'react';
import { i18n } from '@kbn/i18n';
import { IgnoredReason } from '../../../../utils/get_ignored_reason';
import { FieldRecord } from './table';
-import { DocViewTableRowBtnCollapse } from './table_row_btn_collapse';
+import { DocViewTableRowBtnCollapse } from './legacy/table_row_btn_collapse';
const COLLAPSE_LINE_LENGTH = 350;
diff --git a/src/plugins/discover/public/services/doc_views/doc_views_types.ts b/src/plugins/discover/public/services/doc_views/doc_views_types.ts
index ef2600b4d04df..3832cfa0c0eca 100644
--- a/src/plugins/discover/public/services/doc_views/doc_views_types.ts
+++ b/src/plugins/discover/public/services/doc_views/doc_views_types.ts
@@ -7,8 +7,9 @@
*/
import { ComponentType } from 'react';
-import { IndexPattern } from '../../../../data/public';
+import { IndexPattern, IndexPatternField } from '../../../../data/public';
import { ElasticSearchHit } from '../../types';
+import { IgnoredReason } from '../../utils/get_ignored_reason';
export interface FieldMapping {
filterable?: boolean;
@@ -26,10 +27,10 @@ export type DocViewFilterFn = (
) => void;
export interface DocViewRenderProps {
- columns?: string[];
- filter?: DocViewFilterFn;
hit: ElasticSearchHit;
indexPattern: IndexPattern;
+ columns?: string[];
+ filter?: DocViewFilterFn;
onAddColumn?: (columnName: string) => void;
onRemoveColumn?: (columnName: string) => void;
}
@@ -64,3 +65,23 @@ export type DocView = DocViewInput & {
};
export type DocViewInputFn = () => DocViewInput;
+
+export interface FieldRecordLegacy {
+ action: {
+ isActive: boolean;
+ onFilter?: DocViewFilterFn;
+ onToggleColumn: (field: string) => void;
+ flattenedField: unknown;
+ };
+ field: {
+ displayName: string;
+ field: string;
+ scripted: boolean;
+ fieldType?: string;
+ fieldMapping?: IndexPatternField;
+ };
+ value: {
+ formattedValue: string;
+ ignored?: IgnoredReason;
+ };
+}
diff --git a/src/plugins/discover/public/components/doc_table/lib/use_pager.test.tsx b/src/plugins/discover/public/utils/use_pager.test.tsx
similarity index 65%
rename from src/plugins/discover/public/components/doc_table/lib/use_pager.test.tsx
rename to src/plugins/discover/public/utils/use_pager.test.tsx
index e94600b5d1725..92dfe59c05c2b 100644
--- a/src/plugins/discover/public/components/doc_table/lib/use_pager.test.tsx
+++ b/src/plugins/discover/public/utils/use_pager.test.tsx
@@ -11,7 +11,8 @@ import { usePager } from './use_pager';
describe('usePager', () => {
const defaultProps = {
- totalItems: 745,
+ initialPageSize: 50,
+ totalItems: 750,
};
test('should initialize the first page', () => {
@@ -19,7 +20,7 @@ describe('usePager', () => {
return usePager(defaultProps);
});
- expect(result.current.currentPage).toEqual(0);
+ expect(result.current.curPageIndex).toEqual(0);
expect(result.current.pageSize).toEqual(50);
expect(result.current.totalPages).toEqual(15);
expect(result.current.startIndex).toEqual(0);
@@ -32,10 +33,10 @@ describe('usePager', () => {
});
act(() => {
- result.current.changePage(5);
+ result.current.changePageIndex(5);
});
- expect(result.current.currentPage).toEqual(5);
+ expect(result.current.curPageIndex).toEqual(5);
expect(result.current.pageSize).toEqual(50);
expect(result.current.totalPages).toEqual(15);
expect(result.current.startIndex).toEqual(250);
@@ -48,13 +49,34 @@ describe('usePager', () => {
});
act(() => {
- result.current.changePage(15);
+ result.current.changePageIndex(14);
});
- expect(result.current.currentPage).toEqual(15);
+ expect(result.current.curPageIndex).toEqual(14);
expect(result.current.pageSize).toEqual(50);
expect(result.current.totalPages).toEqual(15);
- expect(result.current.startIndex).toEqual(750);
+ expect(result.current.startIndex).toEqual(700);
+ expect(result.current.hasNextPage).toEqual(false);
+ });
+
+ test('should go to the first page if current is no longer available', () => {
+ const { result } = renderHook(() => {
+ return usePager({
+ initialPageSize: 50,
+ totalItems: 100,
+ });
+ });
+
+ act(() => {
+ // go to the second page
+ result.current.changePageIndex(1);
+ result.current.changePageSize(100);
+ });
+
+ expect(result.current.curPageIndex).toEqual(0);
+ expect(result.current.pageSize).toEqual(100);
+ expect(result.current.totalPages).toEqual(1);
+ expect(result.current.startIndex).toEqual(0);
expect(result.current.hasNextPage).toEqual(false);
});
@@ -62,11 +84,11 @@ describe('usePager', () => {
const { result } = renderHook(() => usePager(defaultProps));
act(() => {
- result.current.changePage(5);
+ result.current.changePageIndex(5);
result.current.changePageSize(100);
});
- expect(result.current.currentPage).toEqual(5);
+ expect(result.current.curPageIndex).toEqual(5);
expect(result.current.pageSize).toEqual(100);
expect(result.current.totalPages).toEqual(8);
expect(result.current.startIndex).toEqual(500);
diff --git a/src/plugins/discover/public/utils/use_pager.ts b/src/plugins/discover/public/utils/use_pager.ts
new file mode 100644
index 0000000000000..da87e37a0cd2e
--- /dev/null
+++ b/src/plugins/discover/public/utils/use_pager.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+interface MetaParams {
+ totalPages: number;
+ startIndex: number;
+ hasNextPage: boolean;
+}
+
+export const usePager = ({
+ initialPageSize,
+ totalItems,
+}: {
+ totalItems: number;
+ initialPageSize: number;
+}) => {
+ const [pageSize, setPageSize] = useState(initialPageSize);
+ // zero based index, if curPageIndex is set to 1, it will represent the second page.
+ const [curPageIndex, setCurPageIndex] = useState(0);
+
+ const meta: MetaParams = useMemo(() => {
+ const totalPages = Math.ceil(totalItems / pageSize);
+ return {
+ totalPages,
+ startIndex: pageSize * curPageIndex,
+ hasNextPage: curPageIndex + 1 < totalPages,
+ };
+ }, [curPageIndex, pageSize, totalItems]);
+
+ const changePageIndex = useCallback((pageIndex: number) => setCurPageIndex(pageIndex), []);
+
+ const changePageSize = useCallback((newPageSize: number) => setPageSize(newPageSize), []);
+
+ /**
+ * Go to the first page if the current is no longer available
+ */
+ useEffect(() => {
+ if (meta.totalPages < curPageIndex + 1) {
+ changePageIndex(0);
+ }
+ }, [curPageIndex, meta.totalPages, changePageIndex]);
+
+ return useMemo(
+ () => ({
+ ...meta,
+ curPageIndex,
+ pageSize,
+ changePageIndex,
+ changePageSize,
+ }),
+ [changePageIndex, changePageSize, curPageIndex, meta, pageSize]
+ );
+};
diff --git a/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx b/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx
index 7da6735c6ce86..e837932b9469a 100644
--- a/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx
+++ b/src/plugins/expression_repeat_image/public/components/repeat_image_component.tsx
@@ -49,7 +49,7 @@ function createImageJSX(img: HTMLImageElement | null) {
if (!img) {
return null;
}
- const params = img.width > img.height ? { heigth: img.height } : { width: img.width };
+ const params = img.width > img.height ? { height: img.height } : { width: img.width };
return 
;
}
@@ -82,12 +82,14 @@ function RepeatImageComponent({
if (image) {
setImageSize(image, size);
- times(count, () => imagesToRender.push(createImageJSX(image)));
+ const imgJSX = createImageJSX(image);
+ times(count, () => imagesToRender.push(imgJSX));
}
if (emptyImage) {
setImageSize(emptyImage, size);
- times(max - count, () => imagesToRender.push(createImageJSX(emptyImage)));
+ const imgJSX = createImageJSX(emptyImage);
+ times(max - count, () => imagesToRender.push(imgJSX));
}
return (
diff --git a/src/plugins/expressions/common/execution/execution.ts b/src/plugins/expressions/common/execution/execution.ts
index f355710698b69..6c0b1cf9fa2c0 100644
--- a/src/plugins/expressions/common/execution/execution.ts
+++ b/src/plugins/expressions/common/execution/execution.ts
@@ -8,7 +8,7 @@
import { i18n } from '@kbn/i18n';
import { isPromise } from '@kbn/std';
-import { ObservableLike, UnwrapObservable, UnwrapPromiseOrReturn } from '@kbn/utility-types';
+import { ObservableLike, UnwrapObservable } from '@kbn/utility-types';
import { keys, last, mapValues, reduce, zipObject } from 'lodash';
import {
combineLatest,
@@ -47,7 +47,7 @@ import { createDefaultInspectorAdapters } from '../util/create_default_inspector
type UnwrapReturnType unknown> =
ReturnType extends ObservableLike
? UnwrapObservable>
- : UnwrapPromiseOrReturn>;
+ : Awaited>;
/**
* The result returned after an expression function execution.
diff --git a/src/plugins/expressions/common/types/common.ts b/src/plugins/expressions/common/types/common.ts
index b28ff27a79ac1..712424fe333b0 100644
--- a/src/plugins/expressions/common/types/common.ts
+++ b/src/plugins/expressions/common/types/common.ts
@@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
-import { ObservableLike, UnwrapObservable, UnwrapPromiseOrReturn } from '@kbn/utility-types';
+import { ObservableLike, UnwrapObservable } from '@kbn/utility-types';
/**
* This can convert a type into a known Expression string representation of
@@ -37,7 +37,7 @@ export type KnownTypeToString =
* `someArgument: Promise` results in `types: ['boolean', 'string']`
*/
export type TypeString = KnownTypeToString<
- T extends ObservableLike ? UnwrapObservable : UnwrapPromiseOrReturn