From e6671e5210b44e723de52353d2d2da74e6451e57 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 14 Jan 2020 16:40:27 -0500 Subject: [PATCH 01/23] initial discover DataGrid proof of concept --- src/core/public/chrome/ui/header/_index.scss | 4 + .../public/discover/get_inner_angular.ts | 4 +- .../public/discover/np_ready/_discover.scss | 15 - .../np_ready/angular/directives/_index.scss | 2 +- .../discover/np_ready/angular/discover.html | 60 +-- .../discover/np_ready/angular/discover.js | 31 +- .../public/discover/np_ready/angular/doc.ts | 1 - .../discover/np_ready/components/_index.scss | 1 + .../components/discover_grid/_index.scss | 1 + .../components/discover_grid/_table.scss | 10 + .../create_discover_grid_directive.tsx | 24 ++ .../discover_grid/discover_grid.tsx | 404 ++++++++++++++++++ .../_collapsible_sidebar.scss | 11 +- .../public/index_patterns/fields/field.ts | 3 +- .../index_patterns/index_pattern.ts | 4 +- 15 files changed, 503 insertions(+), 72 deletions(-) create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_index.scss create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_table.scss create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/create_discover_grid_directive.tsx create mode 100644 src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx diff --git a/src/core/public/chrome/ui/header/_index.scss b/src/core/public/chrome/ui/header/_index.scss index f19728a52dd7..1ab1885fe01d 100644 --- a/src/core/public/chrome/ui/header/_index.scss +++ b/src/core/public/chrome/ui/header/_index.scss @@ -8,6 +8,10 @@ z-index: 10; } +.euiDataGrid__restrictBody .chrHeaderWrapper { + z-index: 0; +} + .chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) { top: $euiHeaderChildSize; left: $euiHeaderChildSize; diff --git a/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts b/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts index 1cefabe08c2d..351b52f8b032 100644 --- a/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts +++ b/src/legacy/core_plugins/kibana/public/discover/get_inner_angular.ts @@ -82,6 +82,7 @@ import { createDocViewerDirective } from './np_ready/angular/doc_viewer'; import { createFieldSearchDirective } from './np_ready/components/field_chooser/discover_field_search_directive'; import { createIndexPatternSelectDirective } from './np_ready/components/field_chooser/discover_index_pattern_directive'; import { createStringFieldProgressBarDirective } from './np_ready/components/field_chooser/string_progress_bar'; +import { createDiscoverGridDirective } from './np_ready/components/discover_grid/create_discover_grid_directive'; // @ts-ignore import { createFieldChooserDirective } from './np_ready/components/field_chooser/field_chooser'; @@ -329,5 +330,6 @@ function createDocTableModule() { .directive('kbnTableRow', createTableRowDirective) .directive('toolBarPagerButtons', createToolBarPagerButtonsDirective) .directive('kbnInfiniteScroll', createInfiniteScrollDirective) - .directive('docViewer', createDocViewerDirective); + .directive('docViewer', createDocViewerDirective) + .directive('discoverGrid', createDiscoverGridDirective); } diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss index 0da28e41579a..534c95f460d7 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss @@ -28,11 +28,9 @@ discover-app { padding-right: $euiSizeS; } -// SASSTODO: replace the z-index value with a variable .dscWrapper { padding-right: $euiSizeS; padding-left: 21px; - z-index: 1; } @include euiPanel('.dscWrapper__content'); @@ -94,19 +92,6 @@ discover-app { .dscTable { overflow: auto; - - // SASSTODO: add a monospace modifier to the doc-table component - .kbnDocTable__row { - font-family: $euiCodeFontFamily; - font-size: $euiFontSizeXS; - } -} - -// SASSTODO: replace the padding value with a variable -.dscTable__footer { - background-color: $euiColorLightShade; - padding: 5px 10px; - text-align: center; } /** diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/_index.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/_index.scss index c65243d99c8f..d4b365547b40 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/_index.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/_index.scss @@ -1,2 +1,2 @@ @import 'no_results'; -@import 'histogram'; \ No newline at end of file +@import 'histogram'; diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html index 45490ac7adc0..66125b9eace0 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html @@ -161,7 +161,6 @@

{{screenTitle}}

- {{screenTitle}} > -
-

+

- - - - -
- - + on-sort="setSortOrder" + >
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js index 78ac99567d10..99b63b6abd73 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js @@ -17,6 +17,7 @@ * under the License. */ +import rison from 'rison-node'; import _ from 'lodash'; import React from 'react'; import { Subscription } from 'rxjs'; @@ -73,7 +74,7 @@ const { } = getServices(); import { getRootBreadcrumbs, getSavedSearchBreadcrumbs } from '../helpers/breadcrumbs'; -import { generateFilters } from '../../../../../../../plugins/data/public'; +import { esFilters, generateFilters } from '../../../../../../../plugins/data/public'; import { getIndexPatternId } from '../helpers/get_index_pattern_id'; import { FilterStateManager } from '../../../../../data/public'; @@ -186,8 +187,8 @@ function discoverController( $scope, $timeout, $window, + $httpParamSerializer, AppState, - Private, Promise, config, kbnUrl, @@ -220,6 +221,7 @@ function discoverController( $scope.fetchStatus = fetchStatuses.UNINITIALIZED; $scope.refreshInterval = timefilter.getRefreshInterval(); $scope.showSaveQuery = uiCapabilities.discover.saveQuery; + $scope.useShortDots = config.get('shortDots:enable'); $scope.$watch( () => uiCapabilities.discover.saveQuery, @@ -553,10 +555,33 @@ function discoverController( }); }; - $scope.$watchCollection('state.columns', function() { + $scope.$watchCollection('state.columns', function(columns) { + const tableColumns = [...columns]; + const { timeFieldName } = $scope.indexPattern; + + if (!config.get('doc_table:hideTimeColumn') && timeFieldName) { + tableColumns.unshift(timeFieldName); + } + + $scope.tableColumns = tableColumns; $state.save(); }); + $scope.getContextAppHref = anchorId => { + const path = kbnUrl.eval('#/context/{{ indexPattern }}/{{ anchorId }}', { + anchorId, + indexPattern: $scope.indexPattern.id, + }); + + const hash = $httpParamSerializer({ + _a: rison.encode({ + columns: $state.columns, + filters: ($scope.filters || []).map(esFilters.disableFilter), + }), + }); + return `${path}?${hash}`; + }; + $scope.opts = { // number of records to fetch, then paginate through sampleSize: config.get('discover:sampleSize'), diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc.ts b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc.ts index 459dcfb30d17..39bdbc93ab7c 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc.ts +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc.ts @@ -17,7 +17,6 @@ * under the License. */ import { getAngularModule, wrapInI18nContext, getServices } from '../../kibana_services'; -// @ts-ignore import { getRootBreadcrumbs } from '../helpers/breadcrumbs'; import html from './doc.html'; import { Doc } from '../components/doc/doc'; diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/_index.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/_index.scss index 0491430e5fdd..4097ad6fb95f 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/_index.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/_index.scss @@ -1,3 +1,4 @@ @import 'fetch_error/index'; @import 'field_chooser/index'; @import 'doc_viewer/index'; +@import 'data_grid/index'; diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_index.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_index.scss new file mode 100644 index 000000000000..999e0d69e248 --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_index.scss @@ -0,0 +1 @@ +@import 'table'; diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_table.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_table.scss new file mode 100644 index 000000000000..23823ab78fa9 --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_table.scss @@ -0,0 +1,10 @@ +.dscTable__footer { + background-color: $euiColorLightShade; + padding: $euiSize / 2 $euiSize; + margin-top: $euiSize / 4; + text-align: center; +} + +.dscTable__flyoutHeader { + white-space: nowrap; +} diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/create_discover_grid_directive.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/create_discover_grid_directive.tsx new file mode 100644 index 000000000000..c861ed9ec18f --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/create_discover_grid_directive.tsx @@ -0,0 +1,24 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { wrapInI18nContext } from '../../../kibana_services'; +import { DiscoverGrid } from './discover_grid'; + +export function createDiscoverGridDirective(reactDirective: any) { + return reactDirective(wrapInI18nContext(DiscoverGrid)); +} diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx new file mode 100644 index 000000000000..b06d9e657056 --- /dev/null +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx @@ -0,0 +1,404 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { useMemo, useState, useCallback, ReactNode } from 'react'; +import { i18n } from '@kbn/i18n'; +import { + EuiButtonToggle, + EuiDataGrid, + EuiFlexGroup, + EuiFlexItem, + EuiFlyout, + EuiFlyoutBody, + EuiFlyoutHeader, + EuiIcon, + EuiLink, + EuiPortal, + EuiTitle, + useRenderToText, + htmlIdGenerator, + EuiButtonEmpty, + EuiSpacer, + EuiDataGridColumn, + EuiDataGridCellValueElementProps, +} from '@elastic/eui'; +import { DocViewer } from '../doc_viewer/doc_viewer'; +import { IndexPattern } from '../../../kibana_services'; +import { ElasticSearchHit, DocViewFilterFn } from '../../doc_views/doc_views_types'; +import { shortenDottedString } from '../../../../../../../../plugins/data/common/utils/shorten_dotted_string'; + +type Direction = 'asc' | 'desc'; +type SortArr = [string, Direction]; +interface SortObj { + id: string; + direction: Direction; +} + +interface Props { + rows: ElasticSearchHit[]; + columns: string[]; + sort: SortArr[]; + ariaLabelledBy: string; + indexPattern: IndexPattern; + searchTitle?: string; + searchDescription?: string; + sampleSize: number; + onFilter: DocViewFilterFn; + useShortDots: boolean; + onSort: Function; + getContextAppHref: (id: string | number | Record) => string; + onRemoveColumn: (column: string) => void; + onAddColumn: (column: string) => void; +} + +const cellPopoverRenderer = ( + value: string | ReactNode, + positiveFilterClick: () => void, + negativeFilterClick: () => void +) => { + return ( + <> + {value} + + + + + Filter on value + + + + + Filter without value + + + + + ); +}; + +export function DiscoverGrid({ + rows, + columns, + sort, + indexPattern, + ariaLabelledBy, + searchTitle, + searchDescription, + useShortDots, + onSort, + sampleSize, + onFilter, + getContextAppHref, + onRemoveColumn, + onAddColumn, +}: Props) { + const actionColumnId = 'uniqueString'; // TODO should be guaranteed unique... + const lowestPageSize = 50; + const timeNode = useMemo( + () => ( + + {i18n.translate('kbn.discover.timeLabel', { + defaultMessage: 'Time', + })} + + ), + [] + ); + const timeString = useRenderToText(timeNode, 'Time'); + const [flyoutRow, setFlyoutRow] = useState(undefined); + + const dataGridColumns = columns.map( + (columnName, i): EuiDataGridColumn => { + // Discover always injects a Time column as the first item (unless advance settings turned it off) + // Have to guard against this to allow users to request the same column again later + if (columnName === indexPattern.timeFieldName && i === 0) { + return { id: timeString, schema: 'datetime' }; + } + + const column: EuiDataGridColumn = { + id: columnName, + schema: indexPattern.getFieldByName(columnName)?.type, + }; + + // Default DataGrid schemas: boolean, numeric, datetime, json, currency + // Default indexPattern types: KBN_FIELD_TYPES in src/plugins/data/common/kbn_field_types/types.ts + switch (column.schema) { + case 'date': + column.schema = 'datetime'; + break; + case 'numeric': + column.schema = 'number'; + break; + case '_source': + case 'object': + column.schema = 'json'; + break; + } + + if (useShortDots) { + column.display = <>{shortenDottedString(columnName)}; + } + + return column; + } + ); + + dataGridColumns.unshift({ id: actionColumnId, isExpandable: false, display: <> }); + + /** + * Pagination + */ + const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: lowestPageSize }); + const onChangeItemsPerPage = useCallback( + pageSize => setPagination(paginationData => ({ ...paginationData, pageSize })), + [setPagination] + ); + const onChangePage = useCallback( + pageIndex => setPagination(paginationData => ({ ...paginationData, pageIndex })), + [setPagination] + ); + + /** + * Sorting + */ + const sortingColumns = useMemo(() => sort.map(([id, direction]) => ({ id, direction })), [sort]); + const onTableSort = useCallback( + sortingColumnsData => { + onSort(sortingColumnsData.map(({ id, direction }: SortObj) => [id, direction])); + }, + [onSort] + ); + + /** + * Visibility and order + */ + const [visibleColumns, setVisibleColumns] = useState(dataGridColumns.map(obj => obj.id)); + + /** + * Cell rendering + */ + const renderCellValue = useMemo(() => { + const showFilterActions = (isDetails: boolean, fieldName: string) => { + return isDetails && indexPattern.fields.getByName(fieldName)?.filterable; + }; + const createFilter = (fieldName: string, row: any, type: '-' | '+') => { + return onFilter( + indexPattern.fields.getByName(fieldName), + indexPattern.flattenHit(row)[fieldName], + type + ); + }; + const formattedField = function(row: any, columnId: string) { + const formattedValue = indexPattern.formatField(row, columnId); + + // TODO Field formatters need to be fixed + // eslint-disable-next-line react/no-danger + return ; + }; + + return ({ rowIndex, columnId, isDetails }: EuiDataGridCellValueElementProps) => { + const adjustedRowIndex = rowIndex - pagination.pageIndex * pagination.pageSize; + const row = rows[adjustedRowIndex]; + let value: string | ReactNode; + value = '-'; + + if (typeof row === 'undefined') { + return value; + } + + if (columnId === actionColumnId) { + const showFlyout = typeof flyoutRow === 'undefined'; + + return ( + setFlyoutRow(row)} + isSelected={showFlyout} + isEmpty + isIconOnly + /> + ); + } + + const fieldName = columnId === timeString ? indexPattern.timeFieldName! : columnId; + value = formattedField(row, fieldName); + + if (showFilterActions(isDetails, fieldName)) { + return cellPopoverRenderer( + value, + () => createFilter(fieldName, rows[rowIndex], '+'), + () => createFilter(fieldName, rows[rowIndex], '-') + ); + } + + return value; + }; + }, [ + indexPattern, + onFilter, + pagination.pageIndex, + pagination.pageSize, + rows, + timeString, + flyoutRow, + ]); + + /** + * Render variables + */ + const pageCount = Math.ceil(rows.length / pagination.pageSize); + const isOnLastPage = pagination.pageIndex === pageCount - 1; + const showDisclaimer = rows.length === sampleSize && isOnLastPage; + const randomId = htmlIdGenerator()(); + let searchString: ReactNode = <>; + if (searchTitle) { + if (searchDescription) { + searchString = i18n.translate('kbn.discover.timeLabel', { + defaultMessage: 'Table generated by search {searchTitle} ({searchDescription})', + values: { searchTitle, searchDescription }, + }); + } else { + searchString = i18n.translate('kbn.discover.timeLabel', { + defaultMessage: 'Table generated by search {searchTitle}', + values: { searchTitle }, + }); + } + } + + return ( + <> + + {showDisclaimer && ( + <> +

+ {i18n.translate('kbn.discover.howToSeeOtherMatchingDocumentsDescription', { + defaultMessage: + 'These are the first {sampleSize} documents matching your search, refine your search to see others. ', + values: { sampleSize }, + })} + + {i18n.translate('kbn.discover.backToTopLinkText', { + defaultMessage: 'Back to top.', + })} + +

+ + )} + {searchString &&

{searchString}

} + {typeof flyoutRow !== 'undefined' && ( + + setFlyoutRow(undefined)} size="l" ownFocus> + + + + + + + + + +

+ {i18n.translate('kbn.docTable.tableRow.detailHeading', { + defaultMessage: 'Expanded document', + })} +

+ + + + + + + {indexPattern.isTimeBased() && ( + + + {i18n.translate( + 'kbn.docTable.tableRow.viewSurroundingDocumentsLinkText', + { + defaultMessage: 'View surrounding documents', + } + )} + + + )} + + + {i18n.translate('kbn.docTable.tableRow.viewSingleDocumentLinkText', { + defaultMessage: 'View single document', + })} + + + + + + + + + + + + )} + + ); +} diff --git a/src/legacy/ui/public/collapsible_sidebar/_collapsible_sidebar.scss b/src/legacy/ui/public/collapsible_sidebar/_collapsible_sidebar.scss index 68594cbe538c..5840ebc92578 100644 --- a/src/legacy/ui/public/collapsible_sidebar/_collapsible_sidebar.scss +++ b/src/legacy/ui/public/collapsible_sidebar/_collapsible_sidebar.scss @@ -1,15 +1,12 @@ // SASSTODO: Can't rename main class // because it's also the name of the angular directive .collapsible-sidebar { - position: relative; - z-index: $kbnDiscoverSidebarDepth; - .kbnCollapsibleSidebar__collapseButton { position: absolute; top: 0; right: -21px; cursor: pointer; - z-index: -1; + z-index: 1; } &.closed { @@ -25,12 +22,16 @@ visibility: visible; .chevron-cont:before { - content: "\F138"; + content: '\F138'; } } } } +.visEditor__content .collapsible-sidebar { + position: relative; +} + @include euiBreakpoint('xs', 's', 'm') { .collapsible-sidebar { &.closed { diff --git a/src/plugins/data/public/index_patterns/fields/field.ts b/src/plugins/data/public/index_patterns/fields/field.ts index 6ed3c2be8f96..ee14f4bb76e8 100644 --- a/src/plugins/data/public/index_patterns/fields/field.ts +++ b/src/plugins/data/public/index_patterns/fields/field.ts @@ -28,13 +28,14 @@ import { IFieldSubType, FieldFormat, shortenDottedString, + KBN_FIELD_TYPES, } from '../../../common'; export type FieldSpec = Record; export class Field implements IFieldType { name: string; - type: string; + type: KBN_FIELD_TYPES; script?: string; lang?: string; count?: number; diff --git a/src/plugins/data/public/index_patterns/index_patterns/index_pattern.ts b/src/plugins/data/public/index_patterns/index_patterns/index_pattern.ts index e3482dd48303..a6a880661695 100644 --- a/src/plugins/data/public/index_patterns/index_patterns/index_pattern.ts +++ b/src/plugins/data/public/index_patterns/index_patterns/index_pattern.ts @@ -331,8 +331,8 @@ export class IndexPattern implements IIndexPattern { return this.fields.getByName(this.timeFieldName); } - getFieldByName(name: string): Field | void { - if (!this.fields || !this.fields.getByName) return; + getFieldByName(name: string): Field | undefined { + if (!this.fields || !this.fields.getByName) return undefined; return this.fields.getByName(name); } From cd000cf0e4d7472e363f40919edb14f7a31f716f Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Wed, 15 Jan 2020 12:47:57 -0500 Subject: [PATCH 02/23] fixing scss import --- .../kibana/public/discover/np_ready/components/_index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/_index.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/_index.scss index 4097ad6fb95f..56703ebf595d 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/_index.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/_index.scss @@ -1,4 +1,4 @@ @import 'fetch_error/index'; @import 'field_chooser/index'; @import 'doc_viewer/index'; -@import 'data_grid/index'; +@import 'discover_grid/index'; From c13b349bd5cde6d2c640fcfcb500c11b39f58011 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Wed, 29 Jan 2020 14:10:13 -0500 Subject: [PATCH 03/23] bringing back old table with advanced setting --- .../public/discover/np_ready/_discover.scss | 13 ++++++ .../discover/np_ready/angular/discover.html | 43 ++++++++++++++++++- .../discover/np_ready/angular/discover.js | 1 + .../kibana/ui_setting_defaults.js | 11 +++++ 4 files changed, 66 insertions(+), 2 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss index 534c95f460d7..43cb937c5b4a 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss @@ -92,6 +92,19 @@ discover-app { .dscTable { overflow: auto; + + // TODO: Delete when old Discover table is removed + .kbnDocTable__row { + font-family: $euiCodeFontFamily; + font-size: $euiFontSizeXS; + } + + // TODO: Delete when old Discover table is removed + .dscTable__footer { + background-color: $euiColorLightShade; + padding: 5px 10px; + text-align: center; + } } /** diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html index 66125b9eace0..35eee2b8f265 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html @@ -116,7 +116,8 @@

{{screenTitle}}

id="reload_saved_search" ng-click="resetQuery()" > - {{::'kbn.discover.reloadSavedSearchButton' | i18n: {defaultMessage: 'Reset search'} }} + {{::'kbn.discover.reloadSavedSearchButton' | i18n: {defaultMessage: 'Reset search'} + }} @@ -181,7 +182,7 @@

{{screenTitle}}

i18n-default-message="Documents" > {{screenTitle}} on-remove-column="removeColumn" on-sort="setSortOrder" > +
+ + + + +
+ + +
diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js index 6d1b7a7f33d2..bcd757461521 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js @@ -224,6 +224,7 @@ function discoverController( $scope.refreshInterval = timefilter.getRefreshInterval(); $scope.showSaveQuery = uiCapabilities.discover.saveQuery; $scope.useShortDots = config.get('shortDots:enable'); + $scope.useNewGrid = config.get('doc_table:legacyTable'); $scope.$watch( () => uiCapabilities.discover.saveQuery, diff --git a/src/legacy/core_plugins/kibana/ui_setting_defaults.js b/src/legacy/core_plugins/kibana/ui_setting_defaults.js index 02a4f10a543c..c5bf6ef8353a 100644 --- a/src/legacy/core_plugins/kibana/ui_setting_defaults.js +++ b/src/legacy/core_plugins/kibana/ui_setting_defaults.js @@ -1190,5 +1190,16 @@ export function getUiSettingDefaults() { }), }, }, + 'doc_table:legacyTable': { + name: i18n.translate('kbn.advancedSettings.context.tieBreakerFieldsTitle', { + defaultMessage: 'Use legacy table', + }), + value: false, + description: i18n.translate('kbn.advancedSettings.docTableVersion', { + defaultMessage: + 'Prefer the legacy version of the documents table in Discover while available', + }), + category: ['discover'], + }, }; } From 5f19bf2fc418cea688419d4c88a6b0c36d11e04d Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Wed, 29 Jan 2020 18:51:43 -0500 Subject: [PATCH 04/23] fixing old tests --- .../public/discover/np_ready/_discover.scss | 12 ++++----- .../discover_grid/discover_grid.tsx | 27 ++++++++++++++----- test/accessibility/apps/discover.ts | 1 + .../apps/context/_discover_navigation.js | 3 ++- .../apps/dashboard/dashboard_time_picker.js | 1 + test/functional/apps/discover/_discover.js | 1 + .../apps/management/_scripted_fields.js | 2 +- test/functional/page_objects/settings_page.ts | 6 +++++ .../apps/security/doc_level_security_roles.js | 2 +- 9 files changed, 40 insertions(+), 15 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss index 43cb937c5b4a..5f5d2c3f22d8 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss @@ -98,13 +98,13 @@ discover-app { font-family: $euiCodeFontFamily; font-size: $euiFontSizeXS; } +} - // TODO: Delete when old Discover table is removed - .dscTable__footer { - background-color: $euiColorLightShade; - padding: 5px 10px; - text-align: center; - } +// TODO: Delete when old Discover table is removed +.dscTable__footer { + background-color: $euiColorLightShade; + padding: 5px 10px; + text-align: center; } /** diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx index b06d9e657056..0ecef05559d0 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx @@ -74,26 +74,39 @@ const cellPopoverRenderer = ( ) => { return ( <> - {value} + {value} - Filter on value + {i18n.translate('kbn.discover.grid.filterOn', { + defaultMessage: 'Filter on value', + })} - Filter without value + {i18n.translate('kbn.discover.grid.filterOut', { + defaultMessage: 'Filter without value', + })} @@ -236,7 +249,9 @@ export function DiscoverGrid({ return ( setFlyoutRow(row)} isSelected={showFlyout} diff --git a/test/accessibility/apps/discover.ts b/test/accessibility/apps/discover.ts index e25d29551597..f9ca006ec0cf 100644 --- a/test/accessibility/apps/discover.ts +++ b/test/accessibility/apps/discover.ts @@ -33,6 +33,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) { await esArchiver.loadIfNeeded('logstash_functional'); await kibanaServer.uiSettings.update({ defaultIndex: 'logstash-*', + 'doc_table:legacyTable': true, }); await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setDefaultAbsoluteRange(); diff --git a/test/functional/apps/context/_discover_navigation.js b/test/functional/apps/context/_discover_navigation.js index aabce6baa878..b405f85571e6 100644 --- a/test/functional/apps/context/_discover_navigation.js +++ b/test/functional/apps/context/_discover_navigation.js @@ -29,11 +29,12 @@ export default function({ getService, getPageObjects }) { const retry = getService('retry'); const docTable = getService('docTable'); const filterBar = getService('filterBar'); - const PageObjects = getPageObjects(['common', 'discover', 'timePicker']); + const PageObjects = getPageObjects(['common', 'discover', 'timePicker', 'settings']); describe('context link in discover', function contextSize() { this.tags('smoke'); before(async function() { + await PageObjects.settings.toggleDiscoverDataGrid(); await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setDefaultAbsoluteRange(); await Promise.all( diff --git a/test/functional/apps/dashboard/dashboard_time_picker.js b/test/functional/apps/dashboard/dashboard_time_picker.js index b99de9fee6db..74bfeac786b0 100644 --- a/test/functional/apps/dashboard/dashboard_time_picker.js +++ b/test/functional/apps/dashboard/dashboard_time_picker.js @@ -30,6 +30,7 @@ export default function({ getService, getPageObjects }) { describe('dashboard time picker', function describeIndexTests() { before(async function() { + await PageObjects.settings.toggleDiscoverDataGrid(); await PageObjects.dashboard.initTests(); await PageObjects.dashboard.preserveCrossAppState(); }); diff --git a/test/functional/apps/discover/_discover.js b/test/functional/apps/discover/_discover.js index 432e83891aa9..db8d98f6934a 100644 --- a/test/functional/apps/discover/_discover.js +++ b/test/functional/apps/discover/_discover.js @@ -29,6 +29,7 @@ export default function({ getService, getPageObjects }) { const PageObjects = getPageObjects(['common', 'discover', 'header', 'timePicker']); const defaultSettings = { defaultIndex: 'logstash-*', + 'doc_table:legacyTable': true, }; describe('discover test', function describeIndexTests() { diff --git a/test/functional/apps/management/_scripted_fields.js b/test/functional/apps/management/_scripted_fields.js index 65291c3c4772..4c43468c8f0b 100644 --- a/test/functional/apps/management/_scripted_fields.js +++ b/test/functional/apps/management/_scripted_fields.js @@ -58,7 +58,7 @@ export default function({ getService, getPageObjects }) { before(async function() { await browser.setWindowSize(1200, 800); // delete .kibana index and then wait for Kibana to re-create it - await kibanaServer.uiSettings.replace({}); + await kibanaServer.uiSettings.replace({ 'doc_table:legacyTable': true }); await PageObjects.settings.createIndexPattern(); await kibanaServer.uiSettings.update({}); }); diff --git a/test/functional/page_objects/settings_page.ts b/test/functional/page_objects/settings_page.ts index e92780143f09..27391c5678c2 100644 --- a/test/functional/page_objects/settings_page.ts +++ b/test/functional/page_objects/settings_page.ts @@ -739,6 +739,12 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider await this.clickKibanaSettings(); await this.setAdvancedSettingsSelect('pageNavigation', navType); } + + async toggleDiscoverDataGrid(legacyTable: boolean) { + await PageObjects.common.navigateToApp('settings'); + await this.clickKibanaSettings(); + await this.toggleAdvancedSettingCheckbox('doc_table:legacyTable'); + } } return new SettingsPage(); diff --git a/x-pack/test/functional/apps/security/doc_level_security_roles.js b/x-pack/test/functional/apps/security/doc_level_security_roles.js index 5761369f9e46..dde4d8ab846b 100644 --- a/x-pack/test/functional/apps/security/doc_level_security_roles.js +++ b/x-pack/test/functional/apps/security/doc_level_security_roles.js @@ -20,7 +20,7 @@ export default function({ getService, getPageObjects }) { await esArchiver.load('empty_kibana'); await esArchiver.loadIfNeeded('security/dlstest'); await browser.setWindowSize(1600, 1000); - + await PageObjects.settings.toggleDiscoverDataGrid(); await PageObjects.settings.createIndexPattern('dlstest', null); await PageObjects.settings.navigateTo(); From 6543d263d57bfdd86793d786937d0dc3721ba4ca Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Thu, 30 Jan 2020 18:17:12 -0500 Subject: [PATCH 05/23] removing hide fields action and fixing field add/sub bug --- .../components/discover_grid/discover_grid.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx index 0ecef05559d0..a3de5637fded 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx @@ -17,7 +17,7 @@ * under the License. */ -import React, { useMemo, useState, useCallback, ReactNode } from 'react'; +import React, { useMemo, useState, useEffect, useCallback, ReactNode } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiButtonToggle, @@ -211,6 +211,9 @@ export function DiscoverGrid({ * Visibility and order */ const [visibleColumns, setVisibleColumns] = useState(dataGridColumns.map(obj => obj.id)); + useEffect(() => { + setVisibleColumns(dataGridColumns.map(obj => obj.id)); + }, [dataGridColumns.length]); // eslint-disable-line react-hooks/exhaustive-deps /** * Cell rendering @@ -326,10 +329,9 @@ export function DiscoverGrid({ onChangePage, pageSizeOptions: [lowestPageSize, 100, 500], }} - // TODO - EUI feature: disable visibility but keep ability to reorder - // toolbarVisibility={{ - // showColumnSelector: false, - // }} + toolbarVisibility={{ + showColumnSelector: false, + }} gridStyle={{ border: 'horizontal', }} From f4fd8c23e8bb43caa9138dd491c675a1e0a8e2d4 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Fri, 31 Jan 2020 16:23:23 -0500 Subject: [PATCH 06/23] fixing old tests --- src/plugins/data/public/index_patterns/fields/field.ts | 3 +-- test/functional/apps/dashboard/dashboard_time_picker.js | 7 +++++-- test/functional/apps/discover/_discover.js | 7 +++++-- test/functional/apps/discover/_field_data.js | 1 + x-pack/test/functional/apps/security/secure_roles_perm.js | 5 ++++- 5 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/plugins/data/public/index_patterns/fields/field.ts b/src/plugins/data/public/index_patterns/fields/field.ts index 03945f4ed864..730a2f88c5eb 100644 --- a/src/plugins/data/public/index_patterns/fields/field.ts +++ b/src/plugins/data/public/index_patterns/fields/field.ts @@ -28,14 +28,13 @@ import { IFieldSubType, fieldFormats, shortenDottedString, - KBN_FIELD_TYPES, } from '../../../common'; export type FieldSpec = Record; export class Field implements IFieldType { name: string; - type: KBN_FIELD_TYPES; + type: string; script?: string; lang?: string; count?: number; diff --git a/test/functional/apps/dashboard/dashboard_time_picker.js b/test/functional/apps/dashboard/dashboard_time_picker.js index 74bfeac786b0..094119c87991 100644 --- a/test/functional/apps/dashboard/dashboard_time_picker.js +++ b/test/functional/apps/dashboard/dashboard_time_picker.js @@ -22,6 +22,7 @@ import expect from '@kbn/expect'; export default function({ getService, getPageObjects }) { const dashboardExpect = getService('dashboardExpect'); + const testSubjects = getService('testSubjects'); const pieChart = getService('pieChart'); const dashboardVisualizations = getService('dashboardVisualizations'); const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'timePicker']); @@ -30,7 +31,6 @@ export default function({ getService, getPageObjects }) { describe('dashboard time picker', function describeIndexTests() { before(async function() { - await PageObjects.settings.toggleDiscoverDataGrid(); await PageObjects.dashboard.initTests(); await PageObjects.dashboard.preserveCrossAppState(); }); @@ -56,13 +56,16 @@ export default function({ getService, getPageObjects }) { name: 'saved search', fields: ['bytes', 'agent'], }); - await dashboardExpect.docTableFieldCount(150); + + const tableFields = await testSubjects.findAll('docTableField', 2500); + expect(tableFields).to.greaterThan(0); // Set to time range with no data await PageObjects.timePicker.setAbsoluteRange( 'Jan 1, 2000 @ 00:00:00.000', 'Jan 1, 2000 @ 01:00:00.000' ); + await dashboardExpect.docTableFieldCount(0); }); diff --git a/test/functional/apps/discover/_discover.js b/test/functional/apps/discover/_discover.js index db8d98f6934a..6da5cab8b5d1 100644 --- a/test/functional/apps/discover/_discover.js +++ b/test/functional/apps/discover/_discover.js @@ -187,8 +187,11 @@ export default function({ getService, getPageObjects }) { }); describe('time zone switch', () => { - it('should show bars in the correct time zone after switching', async function() { - await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'America/Phoenix' }); + it('should show bars in the correct time zone after switching failing', async function() { + await kibanaServer.uiSettings.replace({ + 'dateFormat:tz': 'America/Phoenix', + 'doc_table:legacyTable': true, + }); await browser.refresh(); await PageObjects.header.awaitKibanaChrome(); await PageObjects.timePicker.setDefaultAbsoluteRange(); diff --git a/test/functional/apps/discover/_field_data.js b/test/functional/apps/discover/_field_data.js index 62d42f3da5c8..e90e05776cf9 100644 --- a/test/functional/apps/discover/_field_data.js +++ b/test/functional/apps/discover/_field_data.js @@ -35,6 +35,7 @@ export default function({ getService, getPageObjects }) { // delete .kibana index and update configDoc await kibanaServer.uiSettings.replace({ defaultIndex: 'logstash-*', + 'doc_table:legacyTable': true, }); await PageObjects.common.navigateToApp('discover'); diff --git a/x-pack/test/functional/apps/security/secure_roles_perm.js b/x-pack/test/functional/apps/security/secure_roles_perm.js index ece289b4a666..333ba96a0253 100644 --- a/x-pack/test/functional/apps/security/secure_roles_perm.js +++ b/x-pack/test/functional/apps/security/secure_roles_perm.js @@ -30,7 +30,10 @@ export default function({ getService, getPageObjects }) { await esArchiver.loadIfNeeded('logstash_functional'); log.debug('load kibana index with default index pattern'); await esArchiver.load('security/discover'); - await kibanaServer.uiSettings.replace({ defaultIndex: 'logstash-*' }); + await kibanaServer.uiSettings.replace({ + defaultIndex: 'logstash-*', + 'doc_table:legacyTable': true, + }); await PageObjects.settings.navigateTo(); }); From 472e2402993b5b8c4bac161dd8b5028436fd50bd Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Fri, 31 Jan 2020 19:01:49 -0500 Subject: [PATCH 07/23] adding tests --- .../discover_grid/discover_grid.tsx | 4 +- .../kibana/ui_setting_defaults.js | 4 +- .../apps/dashboard/dashboard_time_picker.js | 2 +- test/functional/apps/discover/_data_grid.ts | 51 +++++++++++++++++++ .../functional/apps/discover/_large_string.js | 5 +- test/functional/apps/discover/index.js | 1 + test/functional/page_objects/discover_page.js | 5 ++ .../apps/security/field_level_security.js | 1 + 8 files changed, 67 insertions(+), 6 deletions(-) create mode 100644 test/functional/apps/discover/_data_grid.ts diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx index a3de5637fded..76f7602d80a3 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx @@ -297,12 +297,12 @@ export function DiscoverGrid({ let searchString: ReactNode = <>; if (searchTitle) { if (searchDescription) { - searchString = i18n.translate('kbn.discover.timeLabel', { + searchString = i18n.translate('kbn.discover.searchGenerationWithDescription', { defaultMessage: 'Table generated by search {searchTitle} ({searchDescription})', values: { searchTitle, searchDescription }, }); } else { - searchString = i18n.translate('kbn.discover.timeLabel', { + searchString = i18n.translate('kbn.discover.searchGeneration', { defaultMessage: 'Table generated by search {searchTitle}', values: { searchTitle }, }); diff --git a/src/legacy/core_plugins/kibana/ui_setting_defaults.js b/src/legacy/core_plugins/kibana/ui_setting_defaults.js index c5bf6ef8353a..778056a9ee0e 100644 --- a/src/legacy/core_plugins/kibana/ui_setting_defaults.js +++ b/src/legacy/core_plugins/kibana/ui_setting_defaults.js @@ -1191,11 +1191,11 @@ export function getUiSettingDefaults() { }, }, 'doc_table:legacyTable': { - name: i18n.translate('kbn.advancedSettings.context.tieBreakerFieldsTitle', { + name: i18n.translate('kbn.advancedSettings.docTableVersionName', { defaultMessage: 'Use legacy table', }), value: false, - description: i18n.translate('kbn.advancedSettings.docTableVersion', { + description: i18n.translate('kbn.advancedSettings.docTableVersionDescription', { defaultMessage: 'Prefer the legacy version of the documents table in Discover while available', }), diff --git a/test/functional/apps/dashboard/dashboard_time_picker.js b/test/functional/apps/dashboard/dashboard_time_picker.js index 094119c87991..ec8c506fb7fa 100644 --- a/test/functional/apps/dashboard/dashboard_time_picker.js +++ b/test/functional/apps/dashboard/dashboard_time_picker.js @@ -58,7 +58,7 @@ export default function({ getService, getPageObjects }) { }); const tableFields = await testSubjects.findAll('docTableField', 2500); - expect(tableFields).to.greaterThan(0); + expect(tableFields.length).to.greaterThan(0); // Set to time range with no data await PageObjects.timePicker.setAbsoluteRange( diff --git a/test/functional/apps/discover/_data_grid.ts b/test/functional/apps/discover/_data_grid.ts new file mode 100644 index 000000000000..75d8980e7e94 --- /dev/null +++ b/test/functional/apps/discover/_data_grid.ts @@ -0,0 +1,51 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import expect from '@kbn/expect'; + +export default function({ + getService, + getPageObjects, +}: { + getService: (service: string) => any; + getPageObjects: (pageObjects: string[]) => any; +}) { + describe('discover data grid tests', function describeDiscoverDataGrid() { + const esArchiver = getService('esArchiver'); + const PageObjects = getPageObjects(['common', 'discover', 'timePicker']); + const kibanaServer = getService('kibanaServer'); + const defaultSettings = { defaultIndex: 'logstash-*' }; + + before(async function() { + await esArchiver.load('discover'); + await esArchiver.loadIfNeeded('logstash_functional'); + await kibanaServer.uiSettings.replace(defaultSettings); + await PageObjects.common.navigateToApp('discover'); + await PageObjects.timePicker.setDefaultAbsoluteRange(); + }); + + // TODO@myasonik unskip + it.skip('can add fields to the table', async function() { + const defaultColumnsCount = await PageObjects.discover.getDataGridHeaders().length; + await PageObjects.discover.clickFieldListItemAdd('bytes'); + const updatedColumnsCount = await PageObjects.discover.getDataGridHeaders().length; + expect(defaultColumnsCount + 1).to.be(updatedColumnsCount); + }); + }); +} diff --git a/test/functional/apps/discover/_large_string.js b/test/functional/apps/discover/_large_string.js index a5052b240307..9fb73e6020d7 100644 --- a/test/functional/apps/discover/_large_string.js +++ b/test/functional/apps/discover/_large_string.js @@ -31,7 +31,10 @@ export default function({ getService, getPageObjects }) { before(async function() { await esArchiver.load('empty_kibana'); await esArchiver.loadIfNeeded('hamlet'); - await kibanaServer.uiSettings.replace({ defaultIndex: 'testlargestring' }); + await kibanaServer.uiSettings.replace({ + defaultIndex: 'testlargestring', + 'doc_table:legacyTable': true, + }); }); it('verify the large string book present', async function() { diff --git a/test/functional/apps/discover/index.js b/test/functional/apps/discover/index.js index 64a5a6133536..82b94fafc8af 100644 --- a/test/functional/apps/discover/index.js +++ b/test/functional/apps/discover/index.js @@ -46,5 +46,6 @@ export default function({ getService, loadTestFile }) { loadTestFile(require.resolve('./_doc_navigation')); loadTestFile(require.resolve('./_date_nanos')); loadTestFile(require.resolve('./_date_nanos_mixed')); + loadTestFile(require.resolve('./_data_grid')); }); } diff --git a/test/functional/page_objects/discover_page.js b/test/functional/page_objects/discover_page.js index 85d8cff675f2..310dc7dba4bc 100644 --- a/test/functional/page_objects/discover_page.js +++ b/test/functional/page_objects/discover_page.js @@ -327,6 +327,11 @@ export function DiscoverPageProvider({ getService, getPageObjects }) { async waitForChartLoadingComplete(renderCount) { await elasticChart.waitForRenderingCount('discoverChart', renderCount); } + + async getDataGridHeaders() { + const $ = await (await testSubjects.find('dataGridHeader')).parseDomContent(); + return await $('[role="columnheader"]').toArray(); + } } return new DiscoverPage(); diff --git a/x-pack/test/functional/apps/security/field_level_security.js b/x-pack/test/functional/apps/security/field_level_security.js index 16e9d755bf26..a39f6ea3c958 100644 --- a/x-pack/test/functional/apps/security/field_level_security.js +++ b/x-pack/test/functional/apps/security/field_level_security.js @@ -19,6 +19,7 @@ export default function({ getService, getPageObjects }) { await esArchiver.loadIfNeeded('security/flstest/data'); //( data) await esArchiver.load('security/flstest/kibana'); //(savedobject) await browser.setWindowSize(1600, 1000); + await PageObjects.settings.toggleDiscoverDataGrid(); }); it('should add new role a_viewssnrole', async function() { From 6105c05c62e9d02498015f04884f99b17dd4eae2 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 3 Feb 2020 15:40:38 -0500 Subject: [PATCH 08/23] added new test --- test/functional/apps/dashboard/dashboard_state.js | 8 +++++--- test/functional/apps/discover/_data_grid.ts | 9 ++++----- test/functional/apps/discover/_doc_navigation.js | 3 ++- test/functional/page_objects/discover_page.js | 2 +- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.js index b9172990c501..9f31112a83ef 100644 --- a/test/functional/apps/dashboard/dashboard_state.js +++ b/test/functional/apps/dashboard/dashboard_state.js @@ -22,9 +22,7 @@ import expect from '@kbn/expect'; import { PIE_CHART_VIS_NAME, AREA_CHART_VIS_NAME } from '../../page_objects/dashboard_page'; // eslint-disable-next-line -import { - DEFAULT_PANEL_WIDTH -} from '../../../../src/plugins/dashboard_embeddable_container/public/embeddable/dashboard_constants'; +import { DEFAULT_PANEL_WIDTH } from '../../../../src/plugins/dashboard_embeddable_container/public/embeddable/dashboard_constants'; export default function({ getService, getPageObjects }) { const PageObjects = getPageObjects([ @@ -35,6 +33,8 @@ export default function({ getService, getPageObjects }) { 'tileMap', 'visChart', 'timePicker', + 'settings', + 'common', ]); const testSubjects = getService('testSubjects'); const browser = getService('browser'); @@ -49,6 +49,8 @@ export default function({ getService, getPageObjects }) { before(async function() { await PageObjects.dashboard.initTests(); await PageObjects.dashboard.preserveCrossAppState(); + await PageObjects.settings.toggleDiscoverDataGrid(); + await PageObjects.common.navigateToApp('dashboard'); }); after(async function() { diff --git a/test/functional/apps/discover/_data_grid.ts b/test/functional/apps/discover/_data_grid.ts index 75d8980e7e94..64391d2e2c68 100644 --- a/test/functional/apps/discover/_data_grid.ts +++ b/test/functional/apps/discover/_data_grid.ts @@ -40,12 +40,11 @@ export default function({ await PageObjects.timePicker.setDefaultAbsoluteRange(); }); - // TODO@myasonik unskip - it.skip('can add fields to the table', async function() { - const defaultColumnsCount = await PageObjects.discover.getDataGridHeaders().length; + it('can add fields to the table', async function() { + const defaultColumnsCount = await PageObjects.discover.getDataGridHeaders(); await PageObjects.discover.clickFieldListItemAdd('bytes'); - const updatedColumnsCount = await PageObjects.discover.getDataGridHeaders().length; - expect(defaultColumnsCount + 1).to.be(updatedColumnsCount); + const updatedColumnsCount = await PageObjects.discover.getDataGridHeaders(); + expect(defaultColumnsCount.length + 1).to.be(updatedColumnsCount.length); }); }); } diff --git a/test/functional/apps/discover/_doc_navigation.js b/test/functional/apps/discover/_doc_navigation.js index d7fc267ab1d5..e6f6838f1efa 100644 --- a/test/functional/apps/discover/_doc_navigation.js +++ b/test/functional/apps/discover/_doc_navigation.js @@ -28,13 +28,14 @@ const TEST_FILTER_COLUMN_NAMES = [ export default function({ getService, getPageObjects }) { const docTable = getService('docTable'); const testSubjects = getService('testSubjects'); - const PageObjects = getPageObjects(['common', 'discover', 'timePicker']); + const PageObjects = getPageObjects(['common', 'discover', 'timePicker', 'settings']); const esArchiver = getService('esArchiver'); describe('doc link in discover', function contextSize() { this.tags('smoke'); before(async function() { await esArchiver.loadIfNeeded('logstash_functional'); + await PageObjects.settings.toggleDiscoverDataGrid(); await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setDefaultAbsoluteRange(); await Promise.all( diff --git a/test/functional/page_objects/discover_page.js b/test/functional/page_objects/discover_page.js index 310dc7dba4bc..b1830557b1b5 100644 --- a/test/functional/page_objects/discover_page.js +++ b/test/functional/page_objects/discover_page.js @@ -330,7 +330,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }) { async getDataGridHeaders() { const $ = await (await testSubjects.find('dataGridHeader')).parseDomContent(); - return await $('[role="columnheader"]').toArray(); + return await $('[role="columnheader"]'); } } From 4d4b63fde642b6ba712ec4597b9ae73ae1d13225 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 3 Feb 2020 17:07:48 -0500 Subject: [PATCH 09/23] json field formatter work --- .../components/discover_grid/_table.scss | 7 +++++++ .../discover_grid/discover_grid.tsx | 19 ++++++++++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_table.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_table.scss index 23823ab78fa9..2a6d3dfb3ef3 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_table.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/_table.scss @@ -1,3 +1,5 @@ +@import '../../mixins'; + .dscTable__footer { background-color: $euiColorLightShade; padding: $euiSize / 2 $euiSize; @@ -8,3 +10,8 @@ .dscTable__flyoutHeader { white-space: nowrap; } + +.euiDataGridRowCell__popover, +.euiDataGridRowCell__truncate { + @include dscDocSourceStyle(); +} diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx index 76f7602d80a3..6a23ad492f1f 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx @@ -45,6 +45,7 @@ import { shortenDottedString } from '../../../../../../../../plugins/data/common type Direction = 'asc' | 'desc'; type SortArr = [string, Direction]; +const KibanaJSON = 'kibana-json'; interface SortObj { id: string; direction: Direction; @@ -169,7 +170,7 @@ export function DiscoverGrid({ break; case '_source': case 'object': - column.schema = 'json'; + column.schema = KibanaJSON; break; } @@ -335,6 +336,22 @@ export function DiscoverGrid({ gridStyle={{ border: 'horizontal', }} + schemaDetectors={[ + { + type: KibanaJSON, + detector() { + return 0; // this schema is always explicitly defined + }, + comparator(a, b, direction) { + // Eventually this column will be non-sortable: https://github.com/elastic/eui/issues/2623 + return 1; + }, + sortTextAsc: '', // Eventually this column will be non-sortable: https://github.com/elastic/eui/issues/2623 + sortTextDesc: '', // Eventually this column will be non-sortable: https://github.com/elastic/eui/issues/2623 + icon: '', // Eventually this column will be non-sortable: https://github.com/elastic/eui/issues/2623 + color: '', // Eventually this column will be non-sortable: https://github.com/elastic/eui/issues/2623 + }, + ]} /> {showDisclaimer && ( <> From 179ee067f7a908685a39b969cc7a88e1948a0381 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Mon, 3 Feb 2020 18:18:22 -0500 Subject: [PATCH 10/23] fixing old test --- test/functional/apps/discover/_date_nanos.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/test/functional/apps/discover/_date_nanos.js b/test/functional/apps/discover/_date_nanos.js index 9b06b9ac84cf..341c47bc5595 100644 --- a/test/functional/apps/discover/_date_nanos.js +++ b/test/functional/apps/discover/_date_nanos.js @@ -26,10 +26,13 @@ export default function({ getService, getPageObjects }) { const fromTime = 'Sep 22, 2019 @ 20:31:44.000'; const toTime = 'Sep 23, 2019 @ 03:31:44.000'; - describe('date_nanos', function() { + describe('date_nanos foo', function() { before(async function() { await esArchiver.loadIfNeeded('date_nanos'); - await kibanaServer.uiSettings.replace({ defaultIndex: 'date-nanos' }); + await kibanaServer.uiSettings.replace({ + defaultIndex: 'date-nanos', + 'doc_table:legacyTable': true, + }); await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); }); From 9cf8c75e52db14a55e6ce779a7fcd7651f1adc34 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 4 Feb 2020 12:38:01 -0500 Subject: [PATCH 11/23] futzing with tests --- test/functional/apps/context/_discover_navigation.js | 2 +- test/functional/apps/dashboard/dashboard_state.js | 2 +- test/functional/apps/discover/_date_nanos.js | 2 +- test/functional/apps/discover/_date_nanos_mixed.js | 5 ++++- test/functional/apps/discover/_doc_navigation.js | 2 +- test/functional/page_objects/settings_page.ts | 7 +++++-- .../functional/apps/security/doc_level_security_roles.js | 2 +- .../test/functional/apps/security/field_level_security.js | 2 +- 8 files changed, 15 insertions(+), 9 deletions(-) diff --git a/test/functional/apps/context/_discover_navigation.js b/test/functional/apps/context/_discover_navigation.js index b405f85571e6..1a849459837b 100644 --- a/test/functional/apps/context/_discover_navigation.js +++ b/test/functional/apps/context/_discover_navigation.js @@ -34,7 +34,7 @@ export default function({ getService, getPageObjects }) { describe('context link in discover', function contextSize() { this.tags('smoke'); before(async function() { - await PageObjects.settings.toggleDiscoverDataGrid(); + await PageObjects.settings.setLegacyDiscoverTable(); await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setDefaultAbsoluteRange(); await Promise.all( diff --git a/test/functional/apps/dashboard/dashboard_state.js b/test/functional/apps/dashboard/dashboard_state.js index 9f31112a83ef..b807de205fab 100644 --- a/test/functional/apps/dashboard/dashboard_state.js +++ b/test/functional/apps/dashboard/dashboard_state.js @@ -49,7 +49,7 @@ export default function({ getService, getPageObjects }) { before(async function() { await PageObjects.dashboard.initTests(); await PageObjects.dashboard.preserveCrossAppState(); - await PageObjects.settings.toggleDiscoverDataGrid(); + await PageObjects.settings.setLegacyDiscoverTable(); await PageObjects.common.navigateToApp('dashboard'); }); diff --git a/test/functional/apps/discover/_date_nanos.js b/test/functional/apps/discover/_date_nanos.js index 341c47bc5595..06c0620b1925 100644 --- a/test/functional/apps/discover/_date_nanos.js +++ b/test/functional/apps/discover/_date_nanos.js @@ -26,7 +26,7 @@ export default function({ getService, getPageObjects }) { const fromTime = 'Sep 22, 2019 @ 20:31:44.000'; const toTime = 'Sep 23, 2019 @ 03:31:44.000'; - describe('date_nanos foo', function() { + describe('date_nanos', function() { before(async function() { await esArchiver.loadIfNeeded('date_nanos'); await kibanaServer.uiSettings.replace({ diff --git a/test/functional/apps/discover/_date_nanos_mixed.js b/test/functional/apps/discover/_date_nanos_mixed.js index 0bb6848db4d1..edaa4d03eb06 100644 --- a/test/functional/apps/discover/_date_nanos_mixed.js +++ b/test/functional/apps/discover/_date_nanos_mixed.js @@ -29,7 +29,10 @@ export default function({ getService, getPageObjects }) { describe('date_nanos_mixed', function() { before(async function() { await esArchiver.loadIfNeeded('date_nanos_mixed'); - await kibanaServer.uiSettings.replace({ defaultIndex: 'timestamp-*' }); + await kibanaServer.uiSettings.replace({ + defaultIndex: 'timestamp-*', + 'doc_table:legacyTable': true, + }); await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setAbsoluteRange(fromTime, toTime); }); diff --git a/test/functional/apps/discover/_doc_navigation.js b/test/functional/apps/discover/_doc_navigation.js index e6f6838f1efa..f9f69a2b03f5 100644 --- a/test/functional/apps/discover/_doc_navigation.js +++ b/test/functional/apps/discover/_doc_navigation.js @@ -35,7 +35,7 @@ export default function({ getService, getPageObjects }) { this.tags('smoke'); before(async function() { await esArchiver.loadIfNeeded('logstash_functional'); - await PageObjects.settings.toggleDiscoverDataGrid(); + await PageObjects.settings.setLegacyDiscoverTable(); await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setDefaultAbsoluteRange(); await Promise.all( diff --git a/test/functional/page_objects/settings_page.ts b/test/functional/page_objects/settings_page.ts index 27391c5678c2..d4ea370690b4 100644 --- a/test/functional/page_objects/settings_page.ts +++ b/test/functional/page_objects/settings_page.ts @@ -740,10 +740,13 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider await this.setAdvancedSettingsSelect('pageNavigation', navType); } - async toggleDiscoverDataGrid(legacyTable: boolean) { + async setLegacyDiscoverTable() { await PageObjects.common.navigateToApp('settings'); await this.clickKibanaSettings(); - await this.toggleAdvancedSettingCheckbox('doc_table:legacyTable'); + + if ((await this.getAdvancedSettingCheckbox('doc_table:legacyTable')) !== 'true') { + await this.toggleAdvancedSettingCheckbox('doc_table:legacyTable'); + } } } diff --git a/x-pack/test/functional/apps/security/doc_level_security_roles.js b/x-pack/test/functional/apps/security/doc_level_security_roles.js index 9acb90801ce2..94203c9bd902 100644 --- a/x-pack/test/functional/apps/security/doc_level_security_roles.js +++ b/x-pack/test/functional/apps/security/doc_level_security_roles.js @@ -20,7 +20,7 @@ export default function({ getService, getPageObjects }) { await esArchiver.load('empty_kibana'); await esArchiver.loadIfNeeded('security/dlstest'); await browser.setWindowSize(1600, 1000); - await PageObjects.settings.toggleDiscoverDataGrid(); + await PageObjects.settings.setLegacyDiscoverTable(); await PageObjects.settings.createIndexPattern('dlstest', null); await PageObjects.settings.navigateTo(); diff --git a/x-pack/test/functional/apps/security/field_level_security.js b/x-pack/test/functional/apps/security/field_level_security.js index bd90ad6e18dd..32d75c834c90 100644 --- a/x-pack/test/functional/apps/security/field_level_security.js +++ b/x-pack/test/functional/apps/security/field_level_security.js @@ -19,7 +19,7 @@ export default function({ getService, getPageObjects }) { await esArchiver.loadIfNeeded('security/flstest/data'); //( data) await esArchiver.load('security/flstest/kibana'); //(savedobject) await browser.setWindowSize(1600, 1000); - await PageObjects.settings.toggleDiscoverDataGrid(); + await PageObjects.settings.setLegacyDiscoverTable(); }); it('should add new role a_viewssnrole', async function() { From a81dc9afb0bdd5764f1e247f1205f14002e088c7 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 4 Feb 2020 13:18:03 -0500 Subject: [PATCH 12/23] i18n fix --- .../discover_grid/discover_grid.tsx | 44 +++++++++++-------- 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx index 6a23ad492f1f..ab91884f8171 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx @@ -68,14 +68,23 @@ interface Props { onAddColumn: (column: string) => void; } -const cellPopoverRenderer = ( - value: string | ReactNode, - positiveFilterClick: () => void, - negativeFilterClick: () => void -) => { +function CellPopover({ + value, + onPositiveFilterClick, + onNegativeFilterClick, +}: { + value: string | ReactNode; + onPositiveFilterClick: () => void; + onNegativeFilterClick: () => void; +}) { + const node = useMemo(() => <>{value}!, [value]); + const placeholder = i18n.translate('kbn.discover.grid.filterValuePlaceholder', { + defaultMessage: 'value', + }); + const text = useRenderToText(node, placeholder); return ( <> - {value} + {value} @@ -83,11 +92,9 @@ const cellPopoverRenderer = ( iconType="magnifyWithPlus" aria-label={i18n.translate('kbn.discover.grid.ariaFilterOn', { defaultMessage: 'Filter on {value}', - // @ts-ignore // TODO@myasonik value renders as [object Object] - values: { value }, + values: { value: text }, })} - aria-describedby="foo" - onClick={positiveFilterClick} + onClick={onPositiveFilterClick} > {i18n.translate('kbn.discover.grid.filterOn', { defaultMessage: 'Filter on value', @@ -99,11 +106,10 @@ const cellPopoverRenderer = ( iconType="magnifyWithMinus" aria-label={i18n.translate('kbn.discover.grid.ariaFilterOut', { defaultMessage: 'Filter without {value}', - // @ts-ignore // TODO@myasonik value renders as [object Object] - values: { value }, + values: { value: text }, })} color="danger" - onClick={negativeFilterClick} + onClick={onNegativeFilterClick} > {i18n.translate('kbn.discover.grid.filterOut', { defaultMessage: 'Filter without value', @@ -113,7 +119,7 @@ const cellPopoverRenderer = ( ); -}; +} export function DiscoverGrid({ rows, @@ -269,10 +275,12 @@ export function DiscoverGrid({ value = formattedField(row, fieldName); if (showFilterActions(isDetails, fieldName)) { - return cellPopoverRenderer( - value, - () => createFilter(fieldName, rows[rowIndex], '+'), - () => createFilter(fieldName, rows[rowIndex], '-') + return ( + createFilter(fieldName, rows[rowIndex], '+')} + onNegativeFilterClick={() => createFilter(fieldName, rows[rowIndex], '-')} + /> ); } From 977c6371a05d1e337b38aaa43f5a19def862ac01 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Tue, 4 Feb 2020 15:48:12 -0500 Subject: [PATCH 13/23] only show _source when no other columns are shown --- .../discover/np_ready/angular/discover.js | 8 ++++++++ .../np_ready/angular/doc_table/doc_table.ts | 17 ----------------- .../components/discover_grid/discover_grid.tsx | 1 + 3 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js index bcd757461521..d8e604460732 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js @@ -566,6 +566,14 @@ function discoverController( const tableColumns = [...columns]; const { timeFieldName } = $scope.indexPattern; + if (tableColumns.length > 1 && tableColumns.find(id => id === '_source')) { + $state.columns = tableColumns.filter(id => id !== '_source'); + $state.replace(); + } else if (tableColumns.length === 0) { + $state.columns = ['_source']; + $state.replace(); + } + if (!config.get('doc_table:hideTimeColumn') && timeFieldName) { tableColumns.unshift(timeFieldName); } diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc_table/doc_table.ts b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc_table/doc_table.ts index 3329ffc7cd10..0d199e22a02f 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc_table/doc_table.ts +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/doc_table/doc_table.ts @@ -83,23 +83,6 @@ export function createDocTableDirective( $scope.limit += 50; }; - // This exists to fix the problem of an empty initial column list not playing nice with watchCollection. - $scope.$watch('columns', function(columns: string[]) { - if (columns.length !== 0) return; - - const $state = getAppState(); - $scope.columns.push('_source'); - if ($state) $state.replace(); - }); - - $scope.$watchCollection('columns', function(columns: string[], oldColumns: string[]) { - if (oldColumns.length === 1 && oldColumns[0] === '_source' && $scope.columns.length > 1) { - _.pull($scope.columns, '_source'); - } - - if ($scope.columns.length === 0) $scope.columns.push('_source'); - }); - $scope.$watch('hits', (hits: any) => { if (!hits) return; diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx index ab91884f8171..900d9274b298 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/components/discover_grid/discover_grid.tsx @@ -219,6 +219,7 @@ export function DiscoverGrid({ */ const [visibleColumns, setVisibleColumns] = useState(dataGridColumns.map(obj => obj.id)); useEffect(() => { + // every time a column is added, make it visible setVisibleColumns(dataGridColumns.map(obj => obj.id)); }, [dataGridColumns.length]); // eslint-disable-line react-hooks/exhaustive-deps From 887bf3ab2604248848a5aa9a87a1708a18567997 Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Wed, 5 Feb 2020 16:03:50 -0500 Subject: [PATCH 14/23] more test fixes --- test/functional/apps/discover/_data_grid.ts | 19 ++++++++++++++++--- .../apps/discover/_doc_navigation.js | 5 +++-- test/functional/page_objects/discover_page.js | 5 ----- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/test/functional/apps/discover/_data_grid.ts b/test/functional/apps/discover/_data_grid.ts index 64391d2e2c68..83f40a489eca 100644 --- a/test/functional/apps/discover/_data_grid.ts +++ b/test/functional/apps/discover/_data_grid.ts @@ -31,6 +31,7 @@ export default function({ const PageObjects = getPageObjects(['common', 'discover', 'timePicker']); const kibanaServer = getService('kibanaServer'); const defaultSettings = { defaultIndex: 'logstash-*' }; + const testSubjects = getService('testSubjects'); before(async function() { await esArchiver.load('discover'); @@ -41,10 +42,22 @@ export default function({ }); it('can add fields to the table', async function() { - const defaultColumnsCount = await PageObjects.discover.getDataGridHeaders(); + const getTitles = async () => + (await testSubjects.getVisibleText('dataGridHeader')).replace(/\s|\r?\n|\r/g, ' '); + + expect(await getTitles()).to.be('Time _source'); + + await PageObjects.discover.clickFieldListItemAdd('bytes'); + expect(await getTitles()).to.be('Time bytes'); + + await PageObjects.discover.clickFieldListItemAdd('agent'); + expect(await getTitles()).to.be('Time bytes agent'); + await PageObjects.discover.clickFieldListItemAdd('bytes'); - const updatedColumnsCount = await PageObjects.discover.getDataGridHeaders(); - expect(defaultColumnsCount.length + 1).to.be(updatedColumnsCount.length); + expect(await getTitles()).to.be('Time agent'); + + await PageObjects.discover.clickFieldListItemAdd('agent'); + expect(await getTitles()).to.be('Time _source'); }); }); } diff --git a/test/functional/apps/discover/_doc_navigation.js b/test/functional/apps/discover/_doc_navigation.js index f9f69a2b03f5..9c52664f5cf8 100644 --- a/test/functional/apps/discover/_doc_navigation.js +++ b/test/functional/apps/discover/_doc_navigation.js @@ -28,14 +28,15 @@ const TEST_FILTER_COLUMN_NAMES = [ export default function({ getService, getPageObjects }) { const docTable = getService('docTable'); const testSubjects = getService('testSubjects'); - const PageObjects = getPageObjects(['common', 'discover', 'timePicker', 'settings']); + const PageObjects = getPageObjects(['common', 'discover', 'timePicker']); const esArchiver = getService('esArchiver'); + const kibanaServer = getService('kibanaServer'); describe('doc link in discover', function contextSize() { this.tags('smoke'); before(async function() { await esArchiver.loadIfNeeded('logstash_functional'); - await PageObjects.settings.setLegacyDiscoverTable(); + await kibanaServer.uiSettings.replace({ 'doc_table:legacyTable': true }); await PageObjects.common.navigateToApp('discover'); await PageObjects.timePicker.setDefaultAbsoluteRange(); await Promise.all( diff --git a/test/functional/page_objects/discover_page.js b/test/functional/page_objects/discover_page.js index b1830557b1b5..85d8cff675f2 100644 --- a/test/functional/page_objects/discover_page.js +++ b/test/functional/page_objects/discover_page.js @@ -327,11 +327,6 @@ export function DiscoverPageProvider({ getService, getPageObjects }) { async waitForChartLoadingComplete(renderCount) { await elasticChart.waitForRenderingCount('discoverChart', renderCount); } - - async getDataGridHeaders() { - const $ = await (await testSubjects.find('dataGridHeader')).parseDomContent(); - return await $('[role="columnheader"]'); - } } return new DiscoverPage(); From 70c6a33db0d56c0d20592b0dd8db4cad5e20208d Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Thu, 6 Feb 2020 18:05:56 -0500 Subject: [PATCH 15/23] add docs for new legacyTable advanced setting --- docs/management/advanced-options.asciidoc | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc index 8a10a2bde3b4..3cac100a25bd 100644 --- a/docs/management/advanced-options.asciidoc +++ b/docs/management/advanced-options.asciidoc @@ -144,6 +144,7 @@ This setting does not have an effect when loading a saved search. `doc_table:highlight`:: Highlights results in Discover and saved searches on dashboards. Highlighting slows requests when working on big documents. +`doc_table:legacyTable`:: Control the way the Discover's table looks and works. Set this property to `true` to revert to the legacy implementation. From 7ac7f9b7fdd2151745b5bf2e99adf14579d0cb12 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Wed, 5 Feb 2020 13:02:25 -0800 Subject: [PATCH 16/23] basic layout --- .../public/discover/np_ready/_discover.scss | 36 +- .../discover/np_ready/angular/discover.html | 385 +++++++++--------- .../field_chooser/_field_chooser.scss | 5 +- 3 files changed, 222 insertions(+), 204 deletions(-) diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss index 5f5d2c3f22d8..fbe0fcfea625 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/_discover.scss @@ -1,14 +1,44 @@ -discover-app { - flex-grow: 1; +.dscApp { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; .sidebar-container { background-color: transparent; } } +.dscApp__header { + border-bottom: $euiBorderThin; + margin-bottom: $euiSize; +} + +.dscApp__frame { + position: relative; + flex-grow: 1; + display: flex; +} + +.dscApp__sidebar { + flex-grow: 0; + flex-basis: auto; + min-width: 304px; + padding: 0 $euiSizeS; +} + +.dscApp__content { + flex-grow: 1; +} + .dscHistogram { display: flex; - height: 200px; + height: $euiSize * 8; padding: $euiSizeS; } diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html index f8a3e67a0f5f..08710ea19db2 100644 --- a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html +++ b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.html @@ -1,4 +1,4 @@ - +

{{screenTitle}}

@@ -9,231 +9,220 @@

{{screenTitle}}

show-search-bar="true" show-date-picker="enableTimeRangeSelector" index-patterns="[indexPattern]" - query="state.query" on-query-submit="updateQuery" - show-save-query="showSaveQuery" saved-query-id="state.savedQuery" on-saved-query-id-change="updateSavedQueryId" - + class="dscApp__header" use-default-behaviors="true" > -
-
-