From 7b28f3fbe1636dfaa7ddef60e737558fe71f9425 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Tue, 15 Jun 2021 07:29:39 +0300 Subject: [PATCH 01/21] [Discover] replace legacy table with euiInMemoryTable --- .../application/components/table/table.scss | 7 + .../application/components/table/table.tsx | 272 +++++++++--------- .../components/table/table_actions_cell.tsx | 62 ++++ .../components/table/table_row.tsx | 112 -------- .../components/table/table_value_cell.tsx | 66 +++++ src/plugins/discover/public/plugin.tsx | 4 +- 6 files changed, 279 insertions(+), 244 deletions(-) create mode 100644 src/plugins/discover/public/application/components/table/table.scss create mode 100644 src/plugins/discover/public/application/components/table/table_actions_cell.tsx delete mode 100644 src/plugins/discover/public/application/components/table/table_row.tsx create mode 100644 src/plugins/discover/public/application/components/table/table_value_cell.tsx diff --git a/src/plugins/discover/public/application/components/table/table.scss b/src/plugins/discover/public/application/components/table/table.scss new file mode 100644 index 00000000000000..b8253b34929312 --- /dev/null +++ b/src/plugins/discover/public/application/components/table/table.scss @@ -0,0 +1,7 @@ +.docView__TableRow { + font-size: $euiFontSizeXS; +} + +.docView__fieldNameCell { + width: 100%; +} diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx index 7a100d24c386e0..704463c94f1db6 100644 --- a/src/plugins/discover/public/application/components/table/table.tsx +++ b/src/plugins/discover/public/application/components/table/table.tsx @@ -6,55 +6,120 @@ * Side Public License, v 1. */ -import React, { useState, useEffect, useCallback } from 'react'; -import { i18n } from '@kbn/i18n'; -import { DocViewTableRow } from './table_row'; -import { trimAngularSpan } from './table_helper'; +import React, { useCallback, useMemo } from 'react'; +import './table.scss'; +import { EuiBasicTableColumn, EuiInMemoryTable } from '@elastic/eui'; +import { IndexPattern, IndexPatternField } from '../../../../../data/public'; import { isNestedFieldParent } from '../../apps/main/utils/nested_fields'; -import { DocViewRenderProps } from '../../doc_views/doc_views_types'; +import { DocViewFilterFn, ElasticSearchHit } from '../../doc_views/doc_views_types'; +import { FieldName } from '../field_name/field_name'; +import { TableActions } from './table_actions_cell'; +import { TableFieldValue } from './table_value_cell'; -const COLLAPSE_LINE_LENGTH = 350; +interface DocViewerTableProps { + columns?: string[]; + filter?: DocViewFilterFn; + hit: ElasticSearchHit; + indexPattern?: IndexPattern; + onAddColumn?: (columnName: string) => void; + onRemoveColumn?: (columnName: string) => void; +} + +export interface FieldRecord { + action: { + isActive: boolean; + onFilter?: DocViewFilterFn; + onToggleColumn: (field: string) => void; + flattenedField: unknown; + }; + field: { + fieldName: string; + fieldType: string; + fieldMapping: IndexPatternField | undefined; + scripted: boolean; + }; + value: { + formattedField: unknown; + }; +} -export function DocViewTable({ +const TABLE_ROW_PROPS = { className: 'docView__TableRow' }; + +const DOC_VIEW_COLUMNS: Array> = [ + { + field: 'action', + name: 'Action', + width: '100px', + sortable: false, + render: ( + { flattenedField, isActive, onFilter, onToggleColumn }: FieldRecord['action'], + { field: { fieldName, fieldMapping }, value: { formattedField } }: FieldRecord + ) => { + return ( + onFilter && ( + + ) + ); + }, + }, + { + field: 'field', + name: 'Field', + sortable: true, + render: ({ fieldName, fieldType, fieldMapping, scripted }: FieldRecord['field']) => { + return ( + + ); + }, + }, + { + field: 'value', + name: 'Value', + truncateText: false, + render: ( + { formattedField }: FieldRecord['value'], + { field: { fieldName, fieldMapping } }: FieldRecord + ) => { + return ( + + ); + }, + }, +]; + +export const DocViewerTable = ({ + columns, hit, indexPattern, filter, - columns, onAddColumn, onRemoveColumn, -}: DocViewRenderProps) { - const [fieldRowOpen, setFieldRowOpen] = useState({} as Record); - const [multiFields, setMultiFields] = useState({} as Record); - const [fieldsWithParents, setFieldsWithParents] = useState([] as string[]); - - useEffect(() => { - if (!indexPattern) { - return; - } - const mapping = indexPattern.fields.getByName; - const flattened = indexPattern.flattenHit(hit); - const map: Record = {}; - const arr: string[] = []; +}: DocViewerTableProps) => { + const mapping = useCallback((name) => indexPattern?.fields.getByName(name), [ + indexPattern?.fields, + ]); - Object.keys(flattened).forEach((key) => { - const field = mapping(key); + const formattedHit = useMemo(() => indexPattern?.formatHit(hit, 'html'), [hit, indexPattern]); - if (field && field.spec?.subType?.multi?.parent) { - const parent = field.spec.subType.multi.parent; - if (!map[parent]) { - map[parent] = [] as string[]; - } - const value = map[parent]; - value.push(key); - map[parent] = value; - arr.push(key); - } - }); - setMultiFields(map); - setFieldsWithParents(arr); - }, [indexPattern, hit]); - - const toggleColumn = useCallback( + const onToggleColumn = useCallback( (field: string) => { if (!onRemoveColumn || !onAddColumn || !columns) { return; @@ -71,98 +136,45 @@ export function DocViewTable({ if (!indexPattern) { return null; } - const mapping = indexPattern.fields.getByName; - const flattened = indexPattern.flattenHit(hit); - const formatted = indexPattern.formatHit(hit, 'html'); - function toggleValueCollapse(field: string) { - fieldRowOpen[field] = !fieldRowOpen[field]; - setFieldRowOpen({ ...fieldRowOpen }); - } + const flattened = indexPattern.flattenHit(hit); + const items: FieldRecord[] = 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); + }) + .map((fieldName) => { + const fieldType = isNestedFieldParent(fieldName, indexPattern) + ? 'nested' + : indexPattern.fields.getByName(fieldName)?.type; + const fieldMapping = mapping(fieldName); + return { + action: { + onToggleColumn, + onFilter: filter, + isActive: !!columns?.includes(fieldName), + flattenedField: flattened[fieldName], + }, + field: { + fieldName, + fieldType: fieldType!, + scripted: Boolean(fieldMapping?.scripted), + fieldMapping, + }, + value: { formattedField: formattedHit[fieldName] }, + }; + }); return ( - - - {Object.keys(flattened) - .filter((field) => { - return !fieldsWithParents.includes(field); - }) - .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 valueRaw = flattened[field]; - const value = trimAngularSpan(String(formatted[field])); - - const isCollapsible = value.length > COLLAPSE_LINE_LENGTH; - const isCollapsed = isCollapsible && !fieldRowOpen[field]; - const displayUnderscoreWarning = !mapping(field) && field.indexOf('_') === 0; - - const fieldType = isNestedFieldParent(field, indexPattern) - ? 'nested' - : indexPattern.fields.getByName(field)?.type; - return ( - - toggleValueCollapse(field)} - onToggleColumn={() => toggleColumn(field)} - value={value} - valueRaw={valueRaw} - /> - {multiFields[field] ? ( - - - - - ) : null} - {multiFields[field] - ? multiFields[field].map((multiField) => { - return ( - { - toggleValueCollapse(multiField); - }} - onToggleColumn={() => toggleColumn(multiField)} - value={value} - valueRaw={valueRaw} - /> - ); - }) - : null} - - ); - })} - -
  - - {i18n.translate('discover.fieldChooser.discoverField.multiFields', { - defaultMessage: 'Multi fields', - })} - -
+ ); -} +}; diff --git a/src/plugins/discover/public/application/components/table/table_actions_cell.tsx b/src/plugins/discover/public/application/components/table/table_actions_cell.tsx new file mode 100644 index 00000000000000..74ee1ca25391f5 --- /dev/null +++ b/src/plugins/discover/public/application/components/table/table_actions_cell.tsx @@ -0,0 +1,62 @@ +/* + * 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, { Fragment } 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/doc_views_types'; + +interface TableActionsProps { + isActive: boolean; + fieldName: string; + formattedField: unknown; + flattenedField: unknown; + fieldMapping: IndexPatternField | undefined; + onFilter: DocViewFilterFn; + onToggleColumn: (field: string) => void; +} + +export const TableActions = ({ + isActive, + fieldName, + fieldMapping, + formattedField, + flattenedField, + onToggleColumn, + onFilter, +}: TableActionsProps) => { + const toggleColumn = () => { + onToggleColumn(fieldName); + }; + + return ( + + onFilter(fieldMapping, flattenedField, '+')} + /> + onFilter(fieldMapping, flattenedField, '-')} + /> + + onFilter('_exists_', fieldName, '+')} + scripted={fieldMapping && fieldMapping.scripted} + /> + + ); +}; diff --git a/src/plugins/discover/public/application/components/table/table_row.tsx b/src/plugins/discover/public/application/components/table/table_row.tsx deleted file mode 100644 index e8977fda8576a8..00000000000000 --- a/src/plugins/discover/public/application/components/table/table_row.tsx +++ /dev/null @@ -1,112 +0,0 @@ -/* - * 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 classNames from 'classnames'; -import React, { ReactNode } from 'react'; -import { FieldMapping, DocViewFilterFn } from '../../doc_views/doc_views_types'; -import { DocViewTableRowBtnFilterAdd } from './table_row_btn_filter_add'; -import { DocViewTableRowBtnFilterRemove } from './table_row_btn_filter_remove'; -import { DocViewTableRowBtnToggleColumn } from './table_row_btn_toggle_column'; -import { DocViewTableRowBtnCollapse } from './table_row_btn_collapse'; -import { DocViewTableRowBtnFilterExists } from './table_row_btn_filter_exists'; -import { DocViewTableRowIconUnderscore } from './table_row_icon_underscore'; -import { FieldName } from '../field_name/field_name'; - -export interface Props { - field?: string; - fieldMapping?: FieldMapping; - fieldType: string; - displayUnderscoreWarning: boolean; - isCollapsible: boolean; - isColumnActive: boolean; - isCollapsed: boolean; - onToggleCollapse: () => void; - onFilter?: DocViewFilterFn; - onToggleColumn?: () => void; - value: string | ReactNode; - valueRaw: unknown; -} - -export function DocViewTableRow({ - field, - fieldMapping, - fieldType, - displayUnderscoreWarning, - isCollapsible, - isCollapsed, - isColumnActive, - onFilter, - onToggleCollapse, - onToggleColumn, - value, - valueRaw, -}: Props) { - const valueClassName = classNames({ - // eslint-disable-next-line @typescript-eslint/naming-convention - kbnDocViewer__value: true, - 'truncate-by-height': isCollapsible && isCollapsed, - }); - const key = field ? field : fieldMapping?.displayName; - return ( - - {typeof onFilter === 'function' && ( - - onFilter(fieldMapping, valueRaw, '+')} - /> - onFilter(fieldMapping, valueRaw, '-')} - /> - {typeof onToggleColumn === 'function' && ( - - )} - onFilter('_exists_', field, '+')} - scripted={fieldMapping && fieldMapping.scripted} - /> - - )} - - {field ? ( - - ) : ( -   - )} - - - {isCollapsible && ( - - )} - {displayUnderscoreWarning && } - {field ? null :
{key}: 
} -
- - - ); -} diff --git a/src/plugins/discover/public/application/components/table/table_value_cell.tsx b/src/plugins/discover/public/application/components/table/table_value_cell.tsx new file mode 100644 index 00000000000000..c145ce4f82d8a8 --- /dev/null +++ b/src/plugins/discover/public/application/components/table/table_value_cell.tsx @@ -0,0 +1,66 @@ +/* + * 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 classNames from 'classnames'; +import React, { useCallback, useState } from 'react'; +import { IndexPatternField } from '../../../../../data/public'; +import { FieldRecord } from './newTable'; +import { trimAngularSpan } from './table_helper'; +import { DocViewTableRowBtnCollapse } from './table_row_btn_collapse'; +import { DocViewTableRowIconUnderscore } from './table_row_icon_underscore'; + +const COLLAPSE_LINE_LENGTH = 350; + +type TableFieldValueProps = FieldRecord['value'] & { + fieldName: string; + fieldMapping: IndexPatternField | undefined; +}; + +export const TableFieldValue = ({ + formattedField, + fieldName, + fieldMapping, +}: TableFieldValueProps) => { + const [fieldOpen, setFieldOpen] = useState(false); + + const value = trimAngularSpan(String(formattedField)); + const isCollapsible = value.length > COLLAPSE_LINE_LENGTH; + const isCollapsed = isCollapsible && !fieldOpen; + const displayUnderscoreWarning = !fieldMapping && fieldName.indexOf('_') === 0; + + const valueClassName = classNames({ + // eslint-disable-next-line @typescript-eslint/naming-convention + kbnDocViewer__value: true, + 'truncate-by-height': isCollapsible && isCollapsed, + }); + + const onToggleCollapse = useCallback( + () => setFieldOpen((fieldOpenPrev: boolean) => !fieldOpenPrev), + [] + ); + + return ( +
+ {isCollapsible && ( + + )} + {displayUnderscoreWarning && } + {fieldName ? null :
{fieldName}: 
} +
+
+ ); +}; diff --git a/src/plugins/discover/public/plugin.tsx b/src/plugins/discover/public/plugin.tsx index 139b23d28a1d43..2e093e38476257 100644 --- a/src/plugins/discover/public/plugin.tsx +++ b/src/plugins/discover/public/plugin.tsx @@ -36,7 +36,7 @@ import { DEFAULT_APP_CATEGORIES } from '../../../core/public'; import { UrlGeneratorState } from '../../share/public'; import { DocViewInput, DocViewInputFn } from './application/doc_views/doc_views_types'; import { DocViewsRegistry } from './application/doc_views/doc_views_registry'; -import { DocViewTable } from './application/components/table/table'; +import { DocViewerTable } from './application/components/table/newTable'; import { JsonCodeEditor } from './application/components/json_code_editor/json_code_editor'; import { setDocViewsRegistry, @@ -186,7 +186,7 @@ export class DiscoverPlugin defaultMessage: 'Table', }), order: 10, - component: DocViewTable, + component: DocViewerTable, }); this.docViewsRegistry.addDocView({ title: i18n.translate('discover.docViews.json.jsonTitle', { From 4305e4214f0143b778e4fadd1bdfd37063f087e8 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Wed, 16 Jun 2021 19:25:33 +0300 Subject: [PATCH 02/21] [Discover] update styles, add badge --- .../components/doc_viewer/doc_viewer.scss | 75 ++++----------- .../components/field_name/field_name.tsx | 26 +++++- .../application/components/table/table.scss | 7 -- .../application/components/table/table.tsx | 74 ++------------- ...ctions_cell.tsx => table_cell_actions.tsx} | 8 +- ...le_value_cell.tsx => table_cell_value.tsx} | 2 +- .../components/table/table_columns.tsx | 92 +++++++++++++++++++ src/plugins/discover/public/plugin.tsx | 2 +- 8 files changed, 145 insertions(+), 141 deletions(-) delete mode 100644 src/plugins/discover/public/application/components/table/table.scss rename src/plugins/discover/public/application/components/table/{table_actions_cell.tsx => table_cell_actions.tsx} (94%) rename src/plugins/discover/public/application/components/table/{table_value_cell.tsx => table_cell_value.tsx} (98%) create mode 100644 src/plugins/discover/public/application/components/table/table_columns.tsx diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index f5a4180207c331..7ed39c5ea3c015 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -1,58 +1,36 @@ -.kbnDocViewerTable { - @include euiBreakpoint('xs', 's','m') { - table-layout: fixed; - } -} - .kbnDocViewer { - pre, - .kbnDocViewer__value { - display: inline-block; - word-break: break-all; - word-wrap: break-word; - white-space: pre-wrap; - color: $euiColorFullShade; - vertical-align: top; - padding-top: $euiSizeXS * .5; - } - .kbnDocViewer__field { - padding-top: $euiSizeS; + tr:first-child th { + border-bottom-color: transparent; } +} - .kbnDocViewer__multifield_row:hover td { - background-color: transparent; - } +.kbnDocViewer_TableRow { + font-size: $euiFontSizeXS; + font-family: $euiCodeFontFamily; - .kbnDocViewer__multifield_title { - font-family: $euiFontFamily; - } - - .dscFieldName { - color: $euiColorDarkShade; + &:first-child th { + border-top-color: transparent; } - td, - pre { - font-family: $euiCodeFontFamily; + &:hover { + .kbnDocViewer__actionButton { + opacity: 1; + } } - tr:first-child td { - border-top-color: transparent; - } + .kbnDocViewer__actionButton { + @include euiBreakpoint('m', 'l', 'xl') { + opacity: 0; + } - tr:hover { - .kbnDocViewer__actionButton { + &:focus { opacity: 1; } } } -.kbnDocViewer__buttons, -.kbnDocViewer__field { - white-space: nowrap; -} .kbnDocViewer__buttons { - width: 108px; + white-space: nowrap; // Show all icons if one is focused, &:focus-within { @@ -62,21 +40,8 @@ } } -.kbnDocViewer__field { - width: $euiSize * 10; - @include euiBreakpoint('xs', 's', 'm') { - width: $euiSize * 6; - } -} - -.kbnDocViewer__actionButton { - @include euiBreakpoint('m', 'l', 'xl') { - opacity: 0; - } - - &:focus { - opacity: 1; - } +.kbnDocViewer__fieldNameCell { + width: 100%; } .kbnDocViewer__warning { diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index d89ce7eb051ee1..70ba5d58bacf90 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -7,17 +7,19 @@ */ import React from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; +import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { i18n } from '@kbn/i18n'; import { FieldIcon, FieldIconProps } from '../../../../../kibana_react/public'; import { getFieldTypeName } from './field_type_name'; -import { FieldMapping } from '../../doc_views/doc_views_types'; +import { IndexPatternField } from '../../../../../data/public'; // properties fieldType and fieldName are provided in kbn_doc_view // this should be changed when both components are deangularized interface Props { fieldName: string; fieldType: string; - fieldMapping?: FieldMapping; + fieldMapping?: IndexPatternField; fieldIconProps?: Omit; scripted?: boolean; className?: string; @@ -35,13 +37,14 @@ export function FieldName({ const displayName = fieldMapping && fieldMapping.displayName ? fieldMapping.displayName : fieldName; const tooltip = displayName !== fieldName ? `${fieldName} (${displayName})` : fieldName; + const isMultiField = !!fieldMapping?.spec?.subType?.multi; return ( - + {displayName} + {isMultiField && ( + + + + + + )} ); } diff --git a/src/plugins/discover/public/application/components/table/table.scss b/src/plugins/discover/public/application/components/table/table.scss deleted file mode 100644 index b8253b34929312..00000000000000 --- a/src/plugins/discover/public/application/components/table/table.scss +++ /dev/null @@ -1,7 +0,0 @@ -.docView__TableRow { - font-size: $euiFontSizeXS; -} - -.docView__fieldNameCell { - width: 100%; -} diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx index 704463c94f1db6..33192ce78ae7dc 100644 --- a/src/plugins/discover/public/application/components/table/table.tsx +++ b/src/plugins/discover/public/application/components/table/table.tsx @@ -7,14 +7,11 @@ */ import React, { useCallback, useMemo } from 'react'; -import './table.scss'; -import { EuiBasicTableColumn, EuiInMemoryTable } from '@elastic/eui'; +import { EuiInMemoryTable } from '@elastic/eui'; import { IndexPattern, IndexPatternField } from '../../../../../data/public'; import { isNestedFieldParent } from '../../apps/main/utils/nested_fields'; import { DocViewFilterFn, ElasticSearchHit } from '../../doc_views/doc_views_types'; -import { FieldName } from '../field_name/field_name'; -import { TableActions } from './table_actions_cell'; -import { TableFieldValue } from './table_value_cell'; +import { DOC_VIEW_COLUMNS } from './table_columns'; interface DocViewerTableProps { columns?: string[]; @@ -43,67 +40,8 @@ export interface FieldRecord { }; } -const TABLE_ROW_PROPS = { className: 'docView__TableRow' }; - -const DOC_VIEW_COLUMNS: Array> = [ - { - field: 'action', - name: 'Action', - width: '100px', - sortable: false, - render: ( - { flattenedField, isActive, onFilter, onToggleColumn }: FieldRecord['action'], - { field: { fieldName, fieldMapping }, value: { formattedField } }: FieldRecord - ) => { - return ( - onFilter && ( - - ) - ); - }, - }, - { - field: 'field', - name: 'Field', - sortable: true, - render: ({ fieldName, fieldType, fieldMapping, scripted }: FieldRecord['field']) => { - return ( - - ); - }, - }, - { - field: 'value', - name: 'Value', - truncateText: false, - render: ( - { formattedField }: FieldRecord['value'], - { field: { fieldName, fieldMapping } }: FieldRecord - ) => { - return ( - - ); - }, - }, -]; +const TABLE_ROW_PROPS = { className: 'kbnDocViewer_TableRow' }; +const PAGINATION = { pageSize: 50 }; export const DocViewerTable = ({ columns, @@ -170,10 +108,10 @@ export const DocViewerTable = ({ return ( ); diff --git a/src/plugins/discover/public/application/components/table/table_actions_cell.tsx b/src/plugins/discover/public/application/components/table/table_cell_actions.tsx similarity index 94% rename from src/plugins/discover/public/application/components/table/table_actions_cell.tsx rename to src/plugins/discover/public/application/components/table/table_cell_actions.tsx index 74ee1ca25391f5..3344797b4d32ad 100644 --- a/src/plugins/discover/public/application/components/table/table_actions_cell.tsx +++ b/src/plugins/discover/public/application/components/table/table_cell_actions.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { Fragment } from 'react'; +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'; @@ -17,7 +17,6 @@ import { DocViewFilterFn } from '../../doc_views/doc_views_types'; interface TableActionsProps { isActive: boolean; fieldName: string; - formattedField: unknown; flattenedField: unknown; fieldMapping: IndexPatternField | undefined; onFilter: DocViewFilterFn; @@ -28,7 +27,6 @@ export const TableActions = ({ isActive, fieldName, fieldMapping, - formattedField, flattenedField, onToggleColumn, onFilter, @@ -38,7 +36,7 @@ export const TableActions = ({ }; return ( - +
onFilter(fieldMapping, flattenedField, '+')} @@ -57,6 +55,6 @@ export const TableActions = ({ onClick={() => onFilter('_exists_', fieldName, '+')} scripted={fieldMapping && fieldMapping.scripted} /> - +
); }; diff --git a/src/plugins/discover/public/application/components/table/table_value_cell.tsx b/src/plugins/discover/public/application/components/table/table_cell_value.tsx similarity index 98% rename from src/plugins/discover/public/application/components/table/table_value_cell.tsx rename to src/plugins/discover/public/application/components/table/table_cell_value.tsx index c145ce4f82d8a8..de29068a827188 100644 --- a/src/plugins/discover/public/application/components/table/table_value_cell.tsx +++ b/src/plugins/discover/public/application/components/table/table_cell_value.tsx @@ -9,7 +9,7 @@ import classNames from 'classnames'; import React, { useCallback, useState } from 'react'; import { IndexPatternField } from '../../../../../data/public'; -import { FieldRecord } from './newTable'; +import { FieldRecord } from './table'; import { trimAngularSpan } from './table_helper'; import { DocViewTableRowBtnCollapse } from './table_row_btn_collapse'; import { DocViewTableRowIconUnderscore } from './table_row_icon_underscore'; diff --git a/src/plugins/discover/public/application/components/table/table_columns.tsx b/src/plugins/discover/public/application/components/table/table_columns.tsx new file mode 100644 index 00000000000000..056bd0e20900c1 --- /dev/null +++ b/src/plugins/discover/public/application/components/table/table_columns.tsx @@ -0,0 +1,92 @@ +/* + * 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 { EuiBasicTableColumn, EuiText } from '@elastic/eui'; +import React from 'react'; +import { FormattedMessage } from '@kbn/i18n/react'; +import { FieldName } from '../field_name/field_name'; +import { FieldRecord } from './table'; +import { TableActions } from './table_cell_actions'; +import { TableFieldValue } from './table_cell_value'; + +export const DOC_VIEW_COLUMNS: Array> = [ + { + field: 'field', + name: ( + + + + + + ), + render: ({ fieldName, fieldType, fieldMapping, scripted }: FieldRecord['field']) => { + return ( + + ); + }, + }, + { + field: 'value', + name: ( + + + + + + ), + render: ( + { formattedField }: FieldRecord['value'], + { field: { fieldName, fieldMapping } }: FieldRecord + ) => { + return ( + + ); + }, + }, + { + field: 'action', + width: '108px', + name: ( + + + + + + ), + render: ( + { flattenedField, isActive, onFilter, onToggleColumn }: FieldRecord['action'], + { field: { fieldName, fieldMapping } }: FieldRecord + ) => { + return ( + onFilter && ( + + ) + ); + }, + }, +]; diff --git a/src/plugins/discover/public/plugin.tsx b/src/plugins/discover/public/plugin.tsx index 2e093e38476257..dbd6c0171e19d1 100644 --- a/src/plugins/discover/public/plugin.tsx +++ b/src/plugins/discover/public/plugin.tsx @@ -36,7 +36,7 @@ import { DEFAULT_APP_CATEGORIES } from '../../../core/public'; import { UrlGeneratorState } from '../../share/public'; import { DocViewInput, DocViewInputFn } from './application/doc_views/doc_views_types'; import { DocViewsRegistry } from './application/doc_views/doc_views_registry'; -import { DocViewerTable } from './application/components/table/newTable'; +import { DocViewerTable } from './application/components/table/table'; import { JsonCodeEditor } from './application/components/json_code_editor/json_code_editor'; import { setDocViewsRegistry, From bd00895ea3909c349bb1532988a1850ac7e4feec Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Wed, 16 Jun 2021 20:26:05 -0700 Subject: [PATCH 03/21] fix font in badge and adjust line height --- .../application/components/doc_viewer/doc_viewer.scss | 7 +++++++ .../application/components/field_name/field_name.tsx | 1 + 2 files changed, 8 insertions(+) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index 7ed39c5ea3c015..7248e446aeca81 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -42,6 +42,13 @@ .kbnDocViewer__fieldNameCell { width: 100%; + .dscMultiFieldBadge { + @include euiFont; + } +} + +.kbnDocViewer__value { + line-height: $euiLineHeight; } .kbnDocViewer__warning { diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 70ba5d58bacf90..ac24f03cdbd69f 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -58,6 +58,7 @@ export function FieldName({ Date: Wed, 16 Jun 2021 20:34:15 -0700 Subject: [PATCH 04/21] add tooltip --- .../components/field_name/field_name.tsx | 26 +++++++++++-------- .../components/table/table_columns.tsx | 2 +- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index ac24f03cdbd69f..53d1389e50c982 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -56,18 +56,22 @@ export function FieldName({ {isMultiField && ( - - - + + + + )} diff --git a/src/plugins/discover/public/application/components/table/table_columns.tsx b/src/plugins/discover/public/application/components/table/table_columns.tsx index 056bd0e20900c1..05e17f9a594c8b 100644 --- a/src/plugins/discover/public/application/components/table/table_columns.tsx +++ b/src/plugins/discover/public/application/components/table/table_columns.tsx @@ -66,7 +66,7 @@ export const DOC_VIEW_COLUMNS: Array> = [ From b1a87ea7f45dea938b933229ee0ff145ce2ca031 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 17 Jun 2021 19:10:48 +0300 Subject: [PATCH 05/21] [Discover] update unit tests, return actions column to left side --- .../components/doc_viewer/doc_viewer.scss | 2 +- .../components/field_name/field_name.tsx | 11 +++- .../components/table/table.test.tsx | 46 +++++++++----- .../application/components/table/table.tsx | 18 ++++-- .../components/table/table_columns.tsx | 62 +++++++++---------- 5 files changed, 81 insertions(+), 58 deletions(-) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index 7248e446aeca81..524c8142115e24 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -4,7 +4,7 @@ } } -.kbnDocViewer_TableRow { +.kbnDocViewer_tableRow { font-size: $euiFontSizeXS; font-family: $euiCodeFontFamily; diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 53d1389e50c982..3a4d4a8ab42b91 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -62,10 +62,15 @@ export function FieldName({ 'discover.fieldChooser.discoverField.multiFieldTooltipContent', { defaultMessage: 'Multifields can have multiple values per field', - }) - } + } + )} > - + { indexPattern.flattenHit = indexPatterns.flattenHitWrapper(indexPattern, indexPattern.metaFields); +const mountComponent = (props: DocViewerTableProps) => { + return mount( + + + + ); +}; + describe('DocViewTable at Discover', () => { // At Discover's main view, all buttons are rendered // check for existence of action buttons and warnings @@ -98,7 +107,7 @@ describe('DocViewTable at Discover', () => { onAddColumn: jest.fn(), onRemoveColumn: jest.fn(), }; - const component = mount(); + const component = mountComponent(props); [ { _property: '_index', @@ -194,7 +203,7 @@ describe('DocViewTable at Discover Context', () => { filter: jest.fn(), }; - const component = mount(); + const component = mountComponent(props); it(`renders no toggleColumnButton`, () => { const foundLength = findTestSubject(component, 'toggleColumnButtons').length; @@ -237,7 +246,7 @@ describe('DocViewTable at Discover Doc', () => { hit, indexPattern, }; - const component = mount(); + const component = mountComponent(props); const foundLength = findTestSubject(component, 'addInclusiveFilterButton').length; it(`renders no action buttons`, () => { @@ -365,26 +374,29 @@ describe('DocViewTable at Discover Doc with Fields API', () => { onAddColumn: jest.fn(), onRemoveColumn: jest.fn(), }; - const component = mount(); + const component = mountComponent(props); it('renders multifield rows', () => { - const categoryMultifieldRow = findTestSubject( - component, - 'tableDocViewRow-multifieldsTitle-category' - ); - expect(categoryMultifieldRow.length).toBe(1); - const categoryKeywordRow = findTestSubject(component, 'tableDocViewRow-category.keyword'); - expect(categoryKeywordRow.length).toBe(1); + expect(findTestSubject(component, 'tableDocViewRow-category.keyword').length).toBe(1); - const customerNameMultiFieldRow = findTestSubject( - component, - 'tableDocViewRow-multifieldsTitle-customer_first_name' - ); - expect(customerNameMultiFieldRow.length).toBe(1); expect(findTestSubject(component, 'tableDocViewRow-customer_first_name.keyword').length).toBe( 1 ); expect(findTestSubject(component, 'tableDocViewRow-customer_first_name.nickname').length).toBe( 1 ); + + expect( + findTestSubject(component, 'tableDocViewRow-category.keyword-multifieldBadge').length + ).toBe(1); + + expect( + findTestSubject(component, 'tableDocViewRow-customer_first_name.keyword-multifieldBadge') + .length + ).toBe(1); + + expect( + findTestSubject(component, 'tableDocViewRow-customer_first_name.nickname-multifieldBadge') + .length + ).toBe(1); }); }); diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx index 33192ce78ae7dc..a00c22e922af2d 100644 --- a/src/plugins/discover/public/application/components/table/table.tsx +++ b/src/plugins/discover/public/application/components/table/table.tsx @@ -13,7 +13,7 @@ import { isNestedFieldParent } from '../../apps/main/utils/nested_fields'; import { DocViewFilterFn, ElasticSearchHit } from '../../doc_views/doc_views_types'; import { DOC_VIEW_COLUMNS } from './table_columns'; -interface DocViewerTableProps { +export interface DocViewerTableProps { columns?: string[]; filter?: DocViewFilterFn; hit: ElasticSearchHit; @@ -40,7 +40,6 @@ export interface FieldRecord { }; } -const TABLE_ROW_PROPS = { className: 'kbnDocViewer_TableRow' }; const PAGINATION = { pageSize: 50 }; export const DocViewerTable = ({ @@ -71,6 +70,13 @@ export const DocViewerTable = ({ [onRemoveColumn, onAddColumn, columns] ); + const onSetRowProps = useCallback(({ field: { fieldName } }: FieldRecord) => { + return { + className: 'kbnDocViewer_tableRow', + 'data-test-subj': `tableDocViewRow-${fieldName}`, + }; + }, []); + if (!indexPattern) { return null; } @@ -85,10 +91,11 @@ export const DocViewerTable = ({ return nameA.localeCompare(nameB); }) .map((fieldName) => { + const fieldMapping = mapping(fieldName); const fieldType = isNestedFieldParent(fieldName, indexPattern) ? 'nested' - : indexPattern.fields.getByName(fieldName)?.type; - const fieldMapping = mapping(fieldName); + : fieldMapping?.type; + return { action: { onToggleColumn, @@ -108,11 +115,10 @@ export const DocViewerTable = ({ return ( ); }; diff --git a/src/plugins/discover/public/application/components/table/table_columns.tsx b/src/plugins/discover/public/application/components/table/table_columns.tsx index 05e17f9a594c8b..08bf2a165a82c3 100644 --- a/src/plugins/discover/public/application/components/table/table_columns.tsx +++ b/src/plugins/discover/public/application/components/table/table_columns.tsx @@ -15,6 +15,37 @@ import { TableActions } from './table_cell_actions'; import { TableFieldValue } from './table_cell_value'; export const DOC_VIEW_COLUMNS: Array> = [ + { + field: 'action', + width: '108px', + name: ( + + + + + + ), + render: ( + { flattenedField, isActive, onFilter, onToggleColumn }: FieldRecord['action'], + { field: { fieldName, fieldMapping } }: FieldRecord + ) => { + return ( + onFilter && ( + + ) + ); + }, + }, { field: 'field', name: ( @@ -58,35 +89,4 @@ export const DOC_VIEW_COLUMNS: Array> = [ ); }, }, - { - field: 'action', - width: '108px', - name: ( - - - - - - ), - render: ( - { flattenedField, isActive, onFilter, onToggleColumn }: FieldRecord['action'], - { field: { fieldName, fieldMapping } }: FieldRecord - ) => { - return ( - onFilter && ( - - ) - ); - }, - }, ]; From 79feadb1ac60e9a1d66bbe83bf9c1f2547fcafdd Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 17 Jun 2021 19:14:26 +0300 Subject: [PATCH 06/21] [Discover] update field name test snapshot --- .../field_name/__snapshots__/field_name.test.tsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap b/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap index 6b5e45f8a04488..1820e5d532fa29 100644 --- a/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap +++ b/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap @@ -18,7 +18,7 @@ exports[`FieldName renders a geo field 1`] = `
Date: Fri, 18 Jun 2021 17:34:24 +0300 Subject: [PATCH 07/21] [Discover] update wording --- .../public/application/components/field_name/field_name.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 3a4d4a8ab42b91..1962330c1be0a4 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -61,7 +61,7 @@ export function FieldName({ content={i18n.translate( 'discover.fieldChooser.discoverField.multiFieldTooltipContent', { - defaultMessage: 'Multifields can have multiple values per field', + defaultMessage: 'Multi-fields can have multiple values per field', } )} > @@ -73,7 +73,7 @@ export function FieldName({ > From 92d4c58a136c9e8eba132d9fca3d0685ffe24267 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Fri, 18 Jun 2021 19:31:00 +0300 Subject: [PATCH 08/21] [Discover] handle pagination, return formatting value styles --- .../components/doc_viewer/doc_viewer.scss | 7 +++++++ .../components/field_name/field_name.tsx | 1 + .../application/components/table/table.tsx | 17 ++++++++++++----- 3 files changed, 20 insertions(+), 5 deletions(-) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index 524c8142115e24..e9ced8f89cf7d8 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -48,7 +48,14 @@ } .kbnDocViewer__value { + display: inline-block; + word-break: break-all; + word-wrap: break-word; + white-space: pre-wrap; line-height: $euiLineHeight; + color: $euiColorFullShade; + vertical-align: top; + padding-top: $euiSizeXS * 0.5; } .kbnDocViewer__warning { diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 1962330c1be0a4..9e23d8e1e225a3 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -58,6 +58,7 @@ export function FieldName({ { + const [pagination, setPagination] = useState({ pageSize: 50, pageIndex: 0 }); const showMultiFields = getServices().uiSettings.get(SHOW_MULTIFIELDS); const mapping = useCallback((name) => indexPattern?.fields.getByName(name), [ @@ -85,6 +84,13 @@ export const DocViewerTable = ({ }; }, []); + const onTableChange = useCallback(({ page }: CriteriaWithPagination) => { + setPagination({ + pageSize: page.size, + pageIndex: page.index, + }); + }, []); + if (!indexPattern) { return null; } @@ -130,7 +136,8 @@ export const DocViewerTable = ({ From 3343b765d8b3de2766f162b10858d30f2b53a7a8 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Fri, 18 Jun 2021 23:58:03 +0300 Subject: [PATCH 09/21] [Discover] fix failing stylelint error --- .../public/application/components/doc_viewer/doc_viewer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index e9ced8f89cf7d8..503db823b0e77e 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -55,7 +55,7 @@ line-height: $euiLineHeight; color: $euiColorFullShade; vertical-align: top; - padding-top: $euiSizeXS * 0.5; + padding-top: $euiSizeXS * .5; } .kbnDocViewer__warning { From 7d8b54e58ed583bd583b71289346d853be59527a Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Mon, 21 Jun 2021 13:56:44 +0300 Subject: [PATCH 10/21] [Discover] return responsive prop, update classes --- .../components/doc_viewer/doc_viewer.scss | 13 ++-- .../components/field_name/field_name.tsx | 74 ++++++++++--------- .../application/components/table/table.tsx | 14 ++-- .../components/table/table_columns.tsx | 1 - 4 files changed, 54 insertions(+), 48 deletions(-) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index 503db823b0e77e..a7492e48c36dcd 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -4,7 +4,7 @@ } } -.kbnDocViewer_tableRow { +.kbnDocViewer__tableRow { font-size: $euiFontSizeXS; font-family: $euiCodeFontFamily; @@ -40,11 +40,12 @@ } } -.kbnDocViewer__fieldNameCell { - width: 100%; - .dscMultiFieldBadge { - @include euiFont; - } +.kbnDocViewer__fieldIcon { + padding: $euiSizeS; +} + +.kbnDocViewer__multiFieldBadge { + @include euiFont; } .kbnDocViewer__value { diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 9e23d8e1e225a3..29158c70569da2 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React from 'react'; +import React, { Fragment } from 'react'; import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; @@ -22,7 +22,6 @@ interface Props { fieldMapping?: IndexPatternField; fieldIconProps?: Omit; scripted?: boolean; - className?: string; } export function FieldName({ @@ -30,7 +29,6 @@ export function FieldName({ fieldMapping, fieldType, fieldIconProps, - className, scripted = false, }: Props) { const typeName = getFieldTypeName(fieldType); @@ -40,46 +38,50 @@ export function FieldName({ const isMultiField = !!fieldMapping?.spec?.subType?.multi; return ( - - + + - - - {displayName} - - - {isMultiField && ( - + + + - - - + {displayName} - )} - + + {isMultiField && ( + + + + + + + + )} + + ); } diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx index cb9ae67ef5be61..e2680813c121e3 100644 --- a/src/plugins/discover/public/application/components/table/table.tsx +++ b/src/plugins/discover/public/application/components/table/table.tsx @@ -54,7 +54,11 @@ export const DocViewerTable = ({ onAddColumn, onRemoveColumn, }: DocViewRenderProps) => { - const [pagination, setPagination] = useState({ pageSize: 50, pageIndex: 0 }); + const [pagination, setPagination] = useState({ + pageSize: 50, + pageIndex: 0, + pageSizeOptions: [25, 50, 75], + }); const showMultiFields = getServices().uiSettings.get(SHOW_MULTIFIELDS); const mapping = useCallback((name) => indexPattern?.fields.getByName(name), [ @@ -79,16 +83,17 @@ export const DocViewerTable = ({ const onSetRowProps = useCallback(({ field: { fieldName } }: FieldRecord) => { return { - className: 'kbnDocViewer_tableRow', + className: 'kbnDocViewer__tableRow', 'data-test-subj': `tableDocViewRow-${fieldName}`, }; }, []); const onTableChange = useCallback(({ page }: CriteriaWithPagination) => { - setPagination({ + setPagination((prevPagination) => ({ + ...prevPagination, pageSize: page.size, pageIndex: page.index, - }); + })); }, []); if (!indexPattern) { @@ -139,7 +144,6 @@ export const DocViewerTable = ({ pagination={pagination} onTableChange={onTableChange} rowProps={onSetRowProps} - responsive={false} /> ); }; diff --git a/src/plugins/discover/public/application/components/table/table_columns.tsx b/src/plugins/discover/public/application/components/table/table_columns.tsx index 08bf2a165a82c3..464ce114e1b921 100644 --- a/src/plugins/discover/public/application/components/table/table_columns.tsx +++ b/src/plugins/discover/public/application/components/table/table_columns.tsx @@ -62,7 +62,6 @@ export const DOC_VIEW_COLUMNS: Array> = [ fieldType={fieldType} fieldMapping={fieldMapping} scripted={scripted} - className="kbnDocViewer__fieldNameCell" /> ); }, From 72886c807142b552eff00f2381d5742ffba25533 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Mon, 21 Jun 2021 16:01:56 +0300 Subject: [PATCH 11/21] [Discover] update test and meet formatting rules --- .../components/doc_viewer/doc_viewer.scss | 2 +- .../__snapshots__/field_name.test.tsx.snap | 84 ++++++++++--------- 2 files changed, 46 insertions(+), 40 deletions(-) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index a7492e48c36dcd..fb1045f3656911 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -41,7 +41,7 @@ } .kbnDocViewer__fieldIcon { - padding: $euiSizeS; + padding: $euiSizeS; } .kbnDocViewer__multiFieldBadge { diff --git a/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap b/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap index 1820e5d532fa29..b1e0118bde3600 100644 --- a/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap +++ b/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap @@ -1,11 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`FieldName renders a geo field 1`] = ` -
+Array [
-
+
,
- - - test.test.test + + + test.test.test + - -
-
+
+ , +] `; exports[`FieldName renders a number field by providing a field record 1`] = ` -
+Array [
-
+
,
- - - test.test.test + + + test.test.test + - -
- + + , +] `; exports[`FieldName renders a string field by providing fieldType and fieldName 1`] = ` -
+Array [
-
+
,
- - - test + + + test + - -
- + + , +] `; From 8940b6c2a94606eb80b7f80ed4beec788d6a8aeb Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 21 Jun 2021 12:19:56 -0700 Subject: [PATCH 12/21] improve table view on medium --- .../application/components/doc_viewer/doc_viewer.scss | 3 +++ .../application/components/field_name/field_name.scss | 3 +++ .../application/components/field_name/field_name.tsx | 3 ++- .../components/source_viewer/source_viewer.scss | 9 +++++++++ 4 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 src/plugins/discover/public/application/components/field_name/field_name.scss create mode 100644 src/plugins/discover/public/application/components/source_viewer/source_viewer.scss diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index fb1045f3656911..390d5e19b938d3 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -42,6 +42,9 @@ .kbnDocViewer__fieldIcon { padding: $euiSizeS; + @include euiBreakpoint('m') { + align-self: flex-start; + } } .kbnDocViewer__multiFieldBadge { diff --git a/src/plugins/discover/public/application/components/field_name/field_name.scss b/src/plugins/discover/public/application/components/field_name/field_name.scss new file mode 100644 index 00000000000000..24c619cbdb3363 --- /dev/null +++ b/src/plugins/discover/public/application/components/field_name/field_name.scss @@ -0,0 +1,3 @@ +.kbnDocViewer__fieldName { + line-height: $euiLineHeight; +} \ No newline at end of file diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 29158c70569da2..52fca754a3d407 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import './field_name.scss'; import React, { Fragment } from 'react'; import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -49,7 +50,7 @@ export function FieldName({ position="top" content={tooltip} delay="long" - anchorClassName="eui-textBreakAll" + anchorClassName="kbnDocViewer__fieldName eui-textBreakAll" > {displayName} diff --git a/src/plugins/discover/public/application/components/source_viewer/source_viewer.scss b/src/plugins/discover/public/application/components/source_viewer/source_viewer.scss new file mode 100644 index 00000000000000..290413106e1b3e --- /dev/null +++ b/src/plugins/discover/public/application/components/source_viewer/source_viewer.scss @@ -0,0 +1,9 @@ +.dscSourceViewer__loading { + display: flex; + flex-direction: column; + justify-content: center; + flex: 1 0 100%; + text-align: center; + height: 100%; + width: 100%; +} \ No newline at end of file From 3ae0c1f6310e761c0448bd3ee2a44016d760b301 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 21 Jun 2021 12:49:54 -0700 Subject: [PATCH 13/21] remove extra file --- .../components/source_viewer/source_viewer.scss | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 src/plugins/discover/public/application/components/source_viewer/source_viewer.scss diff --git a/src/plugins/discover/public/application/components/source_viewer/source_viewer.scss b/src/plugins/discover/public/application/components/source_viewer/source_viewer.scss deleted file mode 100644 index 290413106e1b3e..00000000000000 --- a/src/plugins/discover/public/application/components/source_viewer/source_viewer.scss +++ /dev/null @@ -1,9 +0,0 @@ -.dscSourceViewer__loading { - display: flex; - flex-direction: column; - justify-content: center; - flex: 1 0 100%; - text-align: center; - height: 100%; - width: 100%; -} \ No newline at end of file From fba29b5c5d5d712cc89a7cf7d34fb4f27e5b4f52 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Tue, 22 Jun 2021 15:08:29 +0300 Subject: [PATCH 14/21] [Discover] fix unit test --- .../components/doc_viewer/doc_viewer.scss | 11 ----------- .../__snapshots__/field_name.test.tsx.snap | 6 +++--- .../components/field_name/field_name.scss | 13 ++++++++++++- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index 390d5e19b938d3..428780c2d0efc1 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -40,17 +40,6 @@ } } -.kbnDocViewer__fieldIcon { - padding: $euiSizeS; - @include euiBreakpoint('m') { - align-self: flex-start; - } -} - -.kbnDocViewer__multiFieldBadge { - @include euiFont; -} - .kbnDocViewer__value { display: inline-block; word-break: break-all; diff --git a/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap b/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap index b1e0118bde3600..17497afd1557f3 100644 --- a/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap +++ b/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap @@ -22,7 +22,7 @@ Array [ class="euiFlexItem euiFlexItem--flexGrowZero eui-textBreakAll" > test.test.test @@ -55,7 +55,7 @@ Array [ class="euiFlexItem euiFlexItem--flexGrowZero eui-textBreakAll" > test.test.test @@ -88,7 +88,7 @@ Array [ class="euiFlexItem euiFlexItem--flexGrowZero eui-textBreakAll" > test diff --git a/src/plugins/discover/public/application/components/field_name/field_name.scss b/src/plugins/discover/public/application/components/field_name/field_name.scss index 24c619cbdb3363..2770f63e5918ed 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.scss +++ b/src/plugins/discover/public/application/components/field_name/field_name.scss @@ -1,3 +1,14 @@ .kbnDocViewer__fieldName { line-height: $euiLineHeight; -} \ No newline at end of file +} + +.kbnDocViewer__fieldIcon { + padding: $euiSizeS; + @include euiBreakpoint('m') { + align-self: flex-start; + } +} + +.kbnDocViewer__multiFieldBadge { + @include euiFont; +} From 4980b71ddcc4416b23b327c5856dd518fd23779c Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Wed, 23 Jun 2021 22:35:14 +0300 Subject: [PATCH 15/21] [Discover] align top vertically field name and action cells, disable table responsive design --- .../components/doc_viewer/doc_viewer.scss | 45 ++++++++++++---- .../components/field_name/field_name.scss | 14 ----- .../components/field_name/field_name.tsx | 51 +++++++++---------- .../application/components/table/table.tsx | 2 + .../components/table/table_columns.tsx | 2 + 5 files changed, 63 insertions(+), 51 deletions(-) delete mode 100644 src/plugins/discover/public/application/components/field_name/field_name.scss diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index 428780c2d0efc1..719807ffbe04fa 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -1,15 +1,33 @@ .kbnDocViewer { + table, + tbody { + height: 100%; + } + tr:first-child th { border-bottom-color: transparent; } } .kbnDocViewer__tableRow { + height: 100%; font-size: $euiFontSizeXS; font-family: $euiCodeFontFamily; +} + +.kbnDocViewer__tableActionsCell { + align-items: flex-start; + height: 100%; - &:first-child th { - border-top-color: transparent; + .kbnDocViewer__buttons { + white-space: nowrap; + + // Show all icons if one is focused, + &:focus-within { + .kbnDocViewer__actionButton { + opacity: 1; + } + } } &:hover { @@ -29,14 +47,21 @@ } } -.kbnDocViewer__buttons { - white-space: nowrap; +.kbnDocViewer__tableFieldNameCell { + align-items: flex-start; + height: 100%; - // Show all icons if one is focused, - &:focus-within { - .kbnDocViewer__actionButton { - opacity: 1; - } + .kbnDocViewer__fieldIcon { + padding: $euiSizeXS * 1.5; + } + + .kbnDocViewer__fieldName { + padding-top: $euiSizeXS; + line-height: $euiLineHeight; + } + + .kbnDocViewer__multiFieldBadge { + @include euiFont; } } @@ -48,7 +73,7 @@ line-height: $euiLineHeight; color: $euiColorFullShade; vertical-align: top; - padding-top: $euiSizeXS * .5; + padding-top: $euiSizeXS; } .kbnDocViewer__warning { diff --git a/src/plugins/discover/public/application/components/field_name/field_name.scss b/src/plugins/discover/public/application/components/field_name/field_name.scss deleted file mode 100644 index 2770f63e5918ed..00000000000000 --- a/src/plugins/discover/public/application/components/field_name/field_name.scss +++ /dev/null @@ -1,14 +0,0 @@ -.kbnDocViewer__fieldName { - line-height: $euiLineHeight; -} - -.kbnDocViewer__fieldIcon { - padding: $euiSizeS; - @include euiBreakpoint('m') { - align-self: flex-start; - } -} - -.kbnDocViewer__multiFieldBadge { - @include euiFont; -} diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 52fca754a3d407..cde5a466758515 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -6,7 +6,6 @@ * Side Public License, v 1. */ -import './field_name.scss'; import React, { Fragment } from 'react'; import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -44,43 +43,41 @@ export function FieldName({ - - + + {displayName} {isMultiField && ( - - + - - - - - + + + )} diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx index e2680813c121e3..acd4e5d3b009d3 100644 --- a/src/plugins/discover/public/application/components/table/table.tsx +++ b/src/plugins/discover/public/application/components/table/table.tsx @@ -139,11 +139,13 @@ export const DocViewerTable = ({ return ( ); }; diff --git a/src/plugins/discover/public/application/components/table/table_columns.tsx b/src/plugins/discover/public/application/components/table/table_columns.tsx index 464ce114e1b921..3b1f93c8f47918 100644 --- a/src/plugins/discover/public/application/components/table/table_columns.tsx +++ b/src/plugins/discover/public/application/components/table/table_columns.tsx @@ -17,6 +17,7 @@ import { TableFieldValue } from './table_cell_value'; export const DOC_VIEW_COLUMNS: Array> = [ { field: 'action', + className: 'kbnDocViewer__tableActionsCell', width: '108px', name: ( @@ -48,6 +49,7 @@ export const DOC_VIEW_COLUMNS: Array> = [ }, { field: 'field', + className: 'kbnDocViewer__tableFieldNameCell', name: ( From 080425468a57bb2ab5e642604207f463ecbad49d Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 24 Jun 2021 16:19:36 +0300 Subject: [PATCH 16/21] [Discover] adjust styles for cross browser compatibility --- .../components/doc_viewer/doc_viewer.scss | 20 +++++++++++++------ .../components/field_name/field_name.tsx | 2 +- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index 719807ffbe04fa..a561c7763530a0 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -1,9 +1,19 @@ +@mixin docViewerCell { + align-items: flex-start; + padding: $euiSizeXS; + height: 100%; +} + .kbnDocViewer { table, tbody { height: 100%; } + .euiTableRowCell { + vertical-align: top; + } + tr:first-child th { border-bottom-color: transparent; } @@ -16,8 +26,7 @@ } .kbnDocViewer__tableActionsCell { - align-items: flex-start; - height: 100%; + @include docViewerCell; .kbnDocViewer__buttons { white-space: nowrap; @@ -48,16 +57,15 @@ } .kbnDocViewer__tableFieldNameCell { - align-items: flex-start; - height: 100%; + @include docViewerCell; .kbnDocViewer__fieldIcon { - padding: $euiSizeXS * 1.5; + padding-top: $euiSizeXS * 1.5; } .kbnDocViewer__fieldName { - padding-top: $euiSizeXS; line-height: $euiLineHeight; + padding: $euiSizeXS; } .kbnDocViewer__multiFieldBadge { diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index cde5a466758515..3b91081cf0c404 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -43,7 +43,7 @@ export function FieldName({ - + Date: Thu, 24 Jun 2021 18:00:09 +0300 Subject: [PATCH 17/21] [Discover] remove pagination optimize styles, update test --- .../components/doc_viewer/doc_viewer.scss | 13 ------------ .../__snapshots__/field_name.test.tsx.snap | 18 ++++++++--------- .../components/field_name/field_name.scss | 12 +++++++++++ .../components/field_name/field_name.tsx | 1 + .../application/components/table/table.tsx | 20 +++---------------- 5 files changed, 25 insertions(+), 39 deletions(-) create mode 100644 src/plugins/discover/public/application/components/field_name/field_name.scss diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index a561c7763530a0..73f0a2b3211296 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -58,19 +58,6 @@ .kbnDocViewer__tableFieldNameCell { @include docViewerCell; - - .kbnDocViewer__fieldIcon { - padding-top: $euiSizeXS * 1.5; - } - - .kbnDocViewer__fieldName { - line-height: $euiLineHeight; - padding: $euiSizeXS; - } - - .kbnDocViewer__multiFieldBadge { - @include euiFont; - } } .kbnDocViewer__value { diff --git a/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap b/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap index 17497afd1557f3..284c77c96db786 100644 --- a/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap +++ b/src/plugins/discover/public/application/components/field_name/__snapshots__/field_name.test.tsx.snap @@ -16,13 +16,13 @@ Array [ ,
test.test.test @@ -49,13 +49,13 @@ Array [
,
test.test.test @@ -82,13 +82,13 @@ Array [
,
test diff --git a/src/plugins/discover/public/application/components/field_name/field_name.scss b/src/plugins/discover/public/application/components/field_name/field_name.scss new file mode 100644 index 00000000000000..8137c13fe52c3e --- /dev/null +++ b/src/plugins/discover/public/application/components/field_name/field_name.scss @@ -0,0 +1,12 @@ +.kbnDocViewer__fieldIcon { + padding-top: $euiSizeXS * 1.5; +} + +.kbnDocViewer__fieldName { + line-height: $euiLineHeight; + padding: $euiSizeXS; +} + +.kbnDocViewer__multiFieldBadge { + @include euiFont; +} diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 3b91081cf0c404..e8b6765b738a53 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -7,6 +7,7 @@ */ import React, { Fragment } from 'react'; +import './field_name.scss'; import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx index acd4e5d3b009d3..6844ba19d7bcd1 100644 --- a/src/plugins/discover/public/application/components/table/table.tsx +++ b/src/plugins/discover/public/application/components/table/table.tsx @@ -6,8 +6,8 @@ * Side Public License, v 1. */ -import React, { useCallback, useMemo, useState } from 'react'; -import { CriteriaWithPagination, EuiInMemoryTable } from '@elastic/eui'; +import React, { useCallback, useMemo } from 'react'; +import { EuiInMemoryTable } from '@elastic/eui'; import { IndexPattern, IndexPatternField } from '../../../../../data/public'; import { SHOW_MULTIFIELDS } from '../../../../common'; import { getServices } from '../../../kibana_services'; @@ -54,11 +54,6 @@ export const DocViewerTable = ({ onAddColumn, onRemoveColumn, }: DocViewRenderProps) => { - const [pagination, setPagination] = useState({ - pageSize: 50, - pageIndex: 0, - pageSizeOptions: [25, 50, 75], - }); const showMultiFields = getServices().uiSettings.get(SHOW_MULTIFIELDS); const mapping = useCallback((name) => indexPattern?.fields.getByName(name), [ @@ -88,14 +83,6 @@ export const DocViewerTable = ({ }; }, []); - const onTableChange = useCallback(({ page }: CriteriaWithPagination) => { - setPagination((prevPagination) => ({ - ...prevPagination, - pageSize: page.size, - pageIndex: page.index, - })); - }, []); - if (!indexPattern) { return null; } @@ -142,9 +129,8 @@ export const DocViewerTable = ({ className="kbnDocViewer__table" items={items} columns={DOC_VIEW_COLUMNS} - pagination={pagination} - onTableChange={onTableChange} rowProps={onSetRowProps} + pagination={false} responsive={false} /> ); From d5c65f5dbecd6e6a437e09d2d26e2b607c73e086 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Thu, 24 Jun 2021 20:31:01 +0300 Subject: [PATCH 18/21] [Discover] fix eslint --- .../application/components/field_name/field_name.scss | 8 ++++---- .../public/application/components/table/table.test.tsx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/plugins/discover/public/application/components/field_name/field_name.scss b/src/plugins/discover/public/application/components/field_name/field_name.scss index 8137c13fe52c3e..edc4ea270d7554 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.scss +++ b/src/plugins/discover/public/application/components/field_name/field_name.scss @@ -1,12 +1,12 @@ .kbnDocViewer__fieldIcon { - padding-top: $euiSizeXS * 1.5; + padding-top: $euiSizeXS * 1.5; } .kbnDocViewer__fieldName { - line-height: $euiLineHeight; - padding: $euiSizeXS; + line-height: $euiLineHeight; + padding: $euiSizeXS; } .kbnDocViewer__multiFieldBadge { - @include euiFont; + @include euiFont; } diff --git a/src/plugins/discover/public/application/components/table/table.test.tsx b/src/plugins/discover/public/application/components/table/table.test.tsx index b7081f3ff7cb69..ad0b60637354ff 100644 --- a/src/plugins/discover/public/application/components/table/table.test.tsx +++ b/src/plugins/discover/public/application/components/table/table.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { findTestSubject } from '@elastic/eui/lib/test'; -import { IntlProvider } from 'react-intl'; +import { I18nProvider } from '@kbn/i18n/react'; import { DocViewerTable, DocViewerTableProps } from './table'; import { indexPatterns, IndexPattern } from '../../../../../data/public'; import { ElasticSearchHit } from '../../doc_views/doc_views_types'; @@ -78,9 +78,9 @@ indexPattern.flattenHit = indexPatterns.flattenHitWrapper(indexPattern, indexPat const mountComponent = (props: DocViewerTableProps) => { return mount( - + - + ); }; From 3ab15f3df684d2cf404991457e2ac3be3cd5034c Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Fri, 25 Jun 2021 15:49:27 +0300 Subject: [PATCH 19/21] [Discover] clean up styles --- .../components/doc_viewer/doc_viewer.scss | 23 +++---------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss index 73f0a2b3211296..12d56d564b8559 100644 --- a/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss +++ b/src/plugins/discover/public/application/components/doc_viewer/doc_viewer.scss @@ -1,15 +1,4 @@ -@mixin docViewerCell { - align-items: flex-start; - padding: $euiSizeXS; - height: 100%; -} - .kbnDocViewer { - table, - tbody { - height: 100%; - } - .euiTableRowCell { vertical-align: top; } @@ -20,17 +9,10 @@ } .kbnDocViewer__tableRow { - height: 100%; font-size: $euiFontSizeXS; font-family: $euiCodeFontFamily; -} - -.kbnDocViewer__tableActionsCell { - @include docViewerCell; .kbnDocViewer__buttons { - white-space: nowrap; - // Show all icons if one is focused, &:focus-within { .kbnDocViewer__actionButton { @@ -56,8 +38,10 @@ } } +.kbnDocViewer__tableActionsCell, .kbnDocViewer__tableFieldNameCell { - @include docViewerCell; + align-items: flex-start; + padding: $euiSizeXS; } .kbnDocViewer__value { @@ -68,7 +52,6 @@ line-height: $euiLineHeight; color: $euiColorFullShade; vertical-align: top; - padding-top: $euiSizeXS; } .kbnDocViewer__warning { From 37b5b41c7043941da2fe25a4442fe00ec9a73c25 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Mon, 28 Jun 2021 19:30:08 +0300 Subject: [PATCH 20/21] [Discover] fix single doc view --- .../application/components/table/table.tsx | 8 ++- .../components/table/table_columns.tsx | 63 +++++++++---------- 2 files changed, 37 insertions(+), 34 deletions(-) diff --git a/src/plugins/discover/public/application/components/table/table.tsx b/src/plugins/discover/public/application/components/table/table.tsx index 6844ba19d7bcd1..065b146105a651 100644 --- a/src/plugins/discover/public/application/components/table/table.tsx +++ b/src/plugins/discover/public/application/components/table/table.tsx @@ -17,7 +17,7 @@ import { ElasticSearchHit, DocViewRenderProps, } from '../../doc_views/doc_views_types'; -import { DOC_VIEW_COLUMNS } from './table_columns'; +import { ACTIONS_COLUMN, MAIN_COLUMNS } from './table_columns'; export interface DocViewerTableProps { columns?: string[]; @@ -62,6 +62,10 @@ export const DocViewerTable = ({ const formattedHit = useMemo(() => indexPattern?.formatHit(hit, 'html'), [hit, indexPattern]); + const tableColumns = useMemo(() => { + return filter ? [ACTIONS_COLUMN, ...MAIN_COLUMNS] : MAIN_COLUMNS; + }, [filter]); + const onToggleColumn = useCallback( (field: string) => { if (!onRemoveColumn || !onAddColumn || !columns) { @@ -128,7 +132,7 @@ export const DocViewerTable = ({ > = [ - { - field: 'action', - className: 'kbnDocViewer__tableActionsCell', - width: '108px', - name: ( - - - - - - ), - render: ( - { flattenedField, isActive, onFilter, onToggleColumn }: FieldRecord['action'], - { field: { fieldName, fieldMapping } }: FieldRecord - ) => { - return ( - onFilter && ( - - ) - ); - }, +export const ACTIONS_COLUMN: EuiBasicTableColumn = { + field: 'action', + className: 'kbnDocViewer__tableActionsCell', + width: '108px', + name: ( + + + + + + ), + render: ( + { flattenedField, isActive, onFilter, onToggleColumn }: FieldRecord['action'], + { field: { fieldName, fieldMapping } }: FieldRecord + ) => { + return ( + + ); }, +}; + +export const MAIN_COLUMNS: Array> = [ { field: 'field', className: 'kbnDocViewer__tableFieldNameCell', From d4b5ad31c88d135a2380b457265c9e5294078340 Mon Sep 17 00:00:00 2001 From: Dzmitry Tamashevich Date: Tue, 29 Jun 2021 11:38:47 +0300 Subject: [PATCH 21/21] [Discover] add check lack of multifieldBadge --- .../application/components/table/table.test.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/plugins/discover/public/application/components/table/table.test.tsx b/src/plugins/discover/public/application/components/table/table.test.tsx index ad0b60637354ff..a38a9e41aa242f 100644 --- a/src/plugins/discover/public/application/components/table/table.test.tsx +++ b/src/plugins/discover/public/application/components/table/table.test.tsx @@ -435,8 +435,19 @@ describe('DocViewTable at Discover Doc with Fields API', () => { expect(findTestSubject(component, 'tableDocViewRow-customer_first_name.keyword').length).toBe( 0 ); + expect(findTestSubject(component, 'tableDocViewRow-customer_first_name.nickname').length).toBe( 0 ); + + expect( + findTestSubject(component, 'tableDocViewRow-customer_first_name.keyword-multifieldBadge') + .length + ).toBe(0); + + expect( + findTestSubject(component, 'tableDocViewRow-customer_first_name.nickname-multifieldBadge') + .length + ).toBe(0); }); });