[Discover] Integration of EuiDataGrid (#67259)

Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co>
Co-authored-by: Marta Bondyra <marta.bondyra@elastic.co>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>
Co-authored-by: cchaos <caroline.horn@elastic.co>

docs/management/advanced-options.asciidoc

@@ -262,6 +262,10 @@ Hides the "Time" column in *Discover* and in all saved searches on dashboards.
 Highlights results in *Discover* and saved searches on dashboards. Highlighting
 slows requests when working on big documents.
 
+[[doctable-legacy]]`doc_table:legacy`:: 
+Control the way the Discover's table looks and works. Set this property to `true` to revert to the legacy implementation.
+
+
 [float]
 [[kibana-ml-settings]]
 ==== Machine learning

src/core/public/chrome/ui/header/_index.scss

@@ -1,5 +1,19 @@
 @include euiHeaderAffordForFixed;
 
+.euiDataGrid__restrictBody {
+  .headerGlobalNav,
+  .kbnQueryBar {
+    display: none;
+  }
+}
+
+.euiDataGrid__restrictBody.euiBody--headerIsFixed {
+  .euiFlyout {
+    top: 0;
+    height: 100%;
+  }
+}
+
 .chrHeaderHelpMenu__version {
   text-transform: none;
 }

src/plugins/discover/common/index.ts

@@ -27,4 +27,5 @@ export const FIELDS_LIMIT_SETTING = 'fields:popularLimit';
 export const CONTEXT_DEFAULT_SIZE_SETTING = 'context:defaultSize';
 export const CONTEXT_STEP_SETTING = 'context:step';
 export const CONTEXT_TIE_BREAKER_FIELDS_SETTING = 'context:tieBreakerFields';
+export const DOC_TABLE_LEGACY = 'doc_table:legacy';
 export const MODIFY_COLUMNS_ON_SWITCH = 'discover:modifyColumnsOnSwitch';

src/plugins/discover/public/__mocks__/index_pattern.ts

@@ -22,29 +22,40 @@ import { IndexPattern } from '../../../data/common';
 import { indexPatterns } from '../../../data/public';
 
 const fields = [
+  {
+    name: '_source',
+    type: '_source',
+    scripted: false,
+    filterable: false,
+    aggregatable: false,
+  },
   {
     name: '_index',
     type: 'string',
     scripted: false,
     filterable: true,
+    aggregatable: false,
   },
   {
     name: 'message',
     type: 'string',
     scripted: false,
     filterable: false,
+    aggregatable: false,
   },
   {
     name: 'extension',
     type: 'string',
     scripted: false,
     filterable: true,
+    aggregatable: true,
   },
   {
     name: 'bytes',
     type: 'number',
     scripted: false,
     filterable: true,
+    aggregatable: true,
   },
   {
     name: 'scripted',
@@ -62,16 +73,21 @@ const indexPattern = ({
   id: 'the-index-pattern-id',
   title: 'the-index-pattern-title',
   metaFields: ['_index', '_score'],
+  formatField: jest.fn(),
   flattenHit: undefined,
   formatHit: jest.fn((hit) => hit._source),
   fields,
-  getComputedFields: () => ({}),
+  getComputedFields: () => ({ docvalueFields: [], scriptFields: {}, storedFields: ['*'] }),
   getSourceFiltering: () => ({}),
   getFieldByName: () => ({}),
   timeFieldName: '',
+  docvalueFields: [],
 } as unknown) as IndexPattern;
 
 indexPattern.flattenHit = indexPatterns.flattenHitWrapper(indexPattern, indexPattern.metaFields);
 indexPattern.isTimeBased = () => !!indexPattern.timeFieldName;
+indexPattern.formatField = (hit: Record<string, any>, fieldName: string) => {
+  return fieldName === '_source' ? hit._source : indexPattern.flattenHit(hit)[fieldName];
+};
 
 export const indexPatternMock = indexPattern;

src/plugins/discover/public/application/angular/discover.js

@@ -24,7 +24,6 @@ import moment from 'moment';
 import dateMath from '@elastic/datemath';
 import { i18n } from '@kbn/i18n';
 import { createSearchSessionRestorationDataProvider, getState, splitState } from './discover_state';
-
 import { RequestAdapter } from '../../../../inspector/public';
 import {
   connectToQueryState,
@@ -35,6 +34,7 @@ import {
 import { getSortArray } from './doc_table';
 import * as columnActions from './doc_table/actions/columns';
 import indexTemplateLegacy from './discover_legacy.html';
+import indexTemplateGrid from './discover_datagrid.html';
 import { addHelpMenuToAppChrome } from '../components/help_menu/help_menu_util';
 import { discoverResponseHandler } from './response_handler';
 import {
@@ -124,7 +124,9 @@ app.config(($routeProvider) => {
   };
   const discoverRoute = {
     ...defaults,
-    template: indexTemplateLegacy,
+    template: getServices().uiSettings.get('doc_table:legacy', true)
+      ? indexTemplateLegacy
+      : indexTemplateGrid,
     reloadOnSearch: false,
     resolve: {
       savedObjects: function ($route, Promise) {
@@ -340,6 +342,8 @@ function discoverController($element, $route, $scope, $timeout, Promise, uiCapab
   $scope.minimumVisibleRows = 50;
   $scope.fetchStatus = fetchStatuses.UNINITIALIZED;
   $scope.showSaveQuery = uiCapabilities.discover.saveQuery;
+  $scope.showTimeCol =
+    !config.get('doc_table:hideTimeColumn', false) && $scope.indexPattern.timeFieldName;
 
   let abortController;
   $scope.$on('$destroy', () => {
@@ -414,7 +418,7 @@ function discoverController($element, $route, $scope, $timeout, Promise, uiCapab
     const query = $scope.searchSource.getField('query') || data.query.queryString.getDefaultQuery();
     const sort = getSortArray(savedSearch.sort, $scope.indexPattern);
 
-    return {
+    const defaultState = {
       query,
       sort: !sort.length
         ? getDefaultSort($scope.indexPattern, config.get(SORT_DEFAULT_ORDER_SETTING, 'desc'))
@@ -427,6 +431,11 @@ function discoverController($element, $route, $scope, $timeout, Promise, uiCapab
       interval: 'auto',
       filters: _.cloneDeep($scope.searchSource.getOwnField('filter')),
     };
+    if (savedSearch.grid) {
+      defaultState.grid = savedSearch.grid;
+    }
+
+    return defaultState;
   }
 
   $scope.state.index = $scope.indexPattern.id;
@@ -440,6 +449,8 @@ function discoverController($element, $route, $scope, $timeout, Promise, uiCapab
     indexPatternList: $route.current.locals.savedObjects.ip.list,
     config: config,
     setHeaderActionMenu: getHeaderActionMenuMounter(),
+    filterManager,
+    setAppState,
     data,
   };
 
@@ -783,6 +794,17 @@ function discoverController($element, $route, $scope, $timeout, Promise, uiCapab
     const columns = columnActions.moveColumn($scope.state.columns, columnName, newIndex);
     setAppState({ columns });
   };
+
+  $scope.setColumns = function setColumns(columns) {
+    // remove first element of columns if it's the configured timeFieldName, which is prepended automatically
+    const actualColumns =
+      $scope.indexPattern.timeFieldName && $scope.indexPattern.timeFieldName === columns[0]
+        ? columns.slice(1)
+        : columns;
+    $scope.state = { ...$scope.state, columns: actualColumns };
+    setAppState({ columns: actualColumns });
+  };
+
   async function setupVisualization() {
     // If no timefield has been specified we don't create a histogram of messages
     if (!getTimeField()) return;

src/plugins/discover/public/application/angular/discover_datagrid.html

@@ -0,0 +1,31 @@
+<discover-app>
+  <discover
+    fetch="fetch"
+    fetch-counter="fetchCounter"
+    fetch-error="fetchError"
+    field-counts="fieldCounts"
+    histogram-data="histogramData"
+    hits="hits"
+    index-pattern="indexPattern"
+    on-add-column="addColumn"
+    on-add-filter="filterQuery"
+    on-change-interval="changeInterval"
+    on-remove-column="removeColumn"
+    on-set-columns="setColumns"
+    on-sort="setSortOrder"
+    opts="opts"
+    reset-query="resetQuery"
+    result-state="resultState"
+    rows="rows"
+    search-source="searchSource"
+    set-index-pattern="setIndexPattern"
+    show-save-query="showSaveQuery"
+    state="state"
+    time-filter-update-handler="timefilterUpdateHandler"
+    time-range="timeRange"
+    top-nav-menu="topNavMenu"
+    update-query="updateQuery"
+    update-saved-query-id="updateSavedQueryId"
+  >
+  </discover>
+</discover-app>

src/plugins/discover/public/application/angular/discover_legacy.html

@@ -1,6 +1,5 @@
 <discover-app>
   <discover-legacy
-    add-column="addColumn"
     fetch="fetch"
     fetch-counter="fetchCounter"
     fetch-error="fetchError"
@@ -9,6 +8,7 @@
     hits="hits"
     index-pattern="indexPattern"
     minimum-visible-rows="minimumVisibleRows"
+    on-add-column="addColumn"
     on-add-filter="filterQuery"
     on-move-column="moveColumn"
     on-change-interval="changeInterval"
@@ -20,7 +20,6 @@
     reset-query="resetQuery"
     result-state="resultState"
     rows="rows"
-    saved-search="savedSearch"
     search-source="searchSource"
     set-index-pattern="setIndexPattern"
     show-save-query="showSaveQuery"

src/plugins/discover/public/application/angular/discover_state.ts

@@ -36,6 +36,7 @@ import {
   SearchSessionInfoProvider,
 } from '../../../../data/public';
 import { migrateLegacyQuery } from '../helpers/migrate_legacy_query';
+import { DiscoverGridSettings } from '../components/discover_grid/types';
 import { DISCOVER_APP_URL_GENERATOR, DiscoverUrlGeneratorState } from '../../url_generator';
 
 export interface AppState {
@@ -47,6 +48,10 @@ export interface AppState {
    * Array of applied filters
    */
   filters?: Filter[];
+  /**
+   * Data Grid related state
+   */
+  grid?: DiscoverGridSettings;
   /**
    * id of the used index pattern
    */

src/plugins/discover/public/application/components/create_discover_directive.ts

@@ -0,0 +1,52 @@
+/*
+ * 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 { Discover } from './discover';
+
+export function createDiscoverDirective(reactDirective: any) {
+  return reactDirective(Discover, [
+    ['fetch', { watchDepth: 'reference' }],
+    ['fetchCounter', { watchDepth: 'reference' }],
+    ['fetchError', { watchDepth: 'reference' }],
+    ['fieldCounts', { watchDepth: 'reference' }],
+    ['histogramData', { watchDepth: 'reference' }],
+    ['hits', { watchDepth: 'reference' }],
+    ['indexPattern', { watchDepth: 'reference' }],
+    ['onAddColumn', { watchDepth: 'reference' }],
+    ['onAddFilter', { watchDepth: 'reference' }],
+    ['onChangeInterval', { watchDepth: 'reference' }],
+    ['onRemoveColumn', { watchDepth: 'reference' }],
+    ['onSetColumns', { watchDepth: 'reference' }],
+    ['onSort', { watchDepth: 'reference' }],
+    ['opts', { watchDepth: 'reference' }],
+    ['resetQuery', { watchDepth: 'reference' }],
+    ['resultState', { watchDepth: 'reference' }],
+    ['rows', { watchDepth: 'reference' }],
+    ['searchSource', { watchDepth: 'reference' }],
+    ['setColumns', { watchDepth: 'reference' }],
+    ['setIndexPattern', { watchDepth: 'reference' }],
+    ['showSaveQuery', { watchDepth: 'reference' }],
+    ['state', { watchDepth: 'reference' }],
+    ['timefilterUpdateHandler', { watchDepth: 'reference' }],
+    ['timeRange', { watchDepth: 'reference' }],
+    ['topNavMenu', { watchDepth: 'reference' }],
+    ['updateQuery', { watchDepth: 'reference' }],
+    ['updateSavedQueryId', { watchDepth: 'reference' }],
+  ]);
+}

src/plugins/discover/public/application/components/create_discover_grid_directive.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 * as React from 'react';
+import { I18nProvider } from '@kbn/i18n/react';
+import { DiscoverGrid, DiscoverGridProps } from './discover_grid/discover_grid';
+import { getServices } from '../../kibana_services';
+
+export const DataGridMemoized = React.memo((props: DiscoverGridProps) => (
+  <DiscoverGrid {...props} />
+));
+
+export function DiscoverGridEmbeddable(props: DiscoverGridProps) {
+  return (
+    <I18nProvider>
+      <DataGridMemoized {...props} services={getServices()} />
+    </I18nProvider>
+  );
+}
+
+/**
+ * this is just needed for the embeddable
+ */
+export function createDiscoverGridDirective(reactDirective: any) {
+  return reactDirective(DiscoverGridEmbeddable, [
+    ['columns', { watchDepth: 'collection' }],
+    ['indexPattern', { watchDepth: 'reference' }],
+    ['onAddColumn', { watchDepth: 'reference', wrapApply: false }],
+    ['onFilter', { watchDepth: 'reference', wrapApply: false }],
+    ['onRemoveColumn', { watchDepth: 'reference', wrapApply: false }],
+    ['onSetColumns', { watchDepth: 'reference', wrapApply: false }],
+    ['onSort', { watchDepth: 'reference', wrapApply: false }],
+    ['rows', { watchDepth: 'collection' }],
+    ['sampleSize', { watchDepth: 'reference' }],
+    ['searchDescription', { watchDepth: 'reference' }],
+    ['searchTitle', { watchDepth: 'reference' }],
+    ['settings', { watchDepth: 'reference' }],
+    ['showTimeCol', { watchDepth: 'value' }],
+    ['sort', { watchDepth: 'value' }],
+  ]);
+}

src/plugins/discover/public/application/components/create_discover_legacy_directive.ts

@@ -21,7 +21,6 @@ import { DiscoverLegacy } from './discover_legacy';
 
 export function createDiscoverLegacyDirective(reactDirective: any) {
   return reactDirective(DiscoverLegacy, [
-    ['addColumn', { watchDepth: 'reference' }],
     ['fetch', { watchDepth: 'reference' }],
     ['fetchCounter', { watchDepth: 'reference' }],
     ['fetchError', { watchDepth: 'reference' }],
@@ -30,6 +29,7 @@ export function createDiscoverLegacyDirective(reactDirective: any) {
     ['hits', { watchDepth: 'reference' }],
     ['indexPattern', { watchDepth: 'reference' }],
     ['minimumVisibleRows', { watchDepth: 'reference' }],
+    ['onAddColumn', { watchDepth: 'reference' }],
     ['onAddFilter', { watchDepth: 'reference' }],
     ['onChangeInterval', { watchDepth: 'reference' }],
     ['onMoveColumn', { watchDepth: 'reference' }],