[7.x] [Discover] Add EUIDataGrid to surrounding documents (elastic#99447

) (elastic#101063) * [Discover] Add EUIDataGrid to surrounding documents (elastic#99447) * [Discover] migrate remaining context files from js to ts * [Discover] get rid of any types * [Discover] replace constants with enums, update imports * [Discover] use unknown instead of any, correct types * [Discover] skip any type for tests * [Discover] add euiDataGrid view * [Discover] add support dataGrid columns, provide ability to do not change sorting, highlight anchor doc, rename legacy variables * [Discover] update context_legacy test and types * [Discover] update unit tests, add context header * [Discover] update unit and functional tests * [Discover] remove docTable from context test which uses new data grid * [Discover] update EsHitRecord type, use it for context app. add no pagination support * [Discover] resolve type error in test * [Discover] add disabling control columns option, change loading feedback * [Discover] clean up, update functional tests * [Discover] remove invalid translations * [Discover] support both no results found and loading feedback * [Discover] provide loading status for discover * [Discover] fix functional test * [Discover] add useDataGridColumns test, update by comments * [Discover] fix types Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * [Discover] fix data grid row header in firefox Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
stratoula · Jun 4, 2021 · b09aeb5 · b09aeb5
1 parent 2e3b200
commit b09aeb5
Show file tree

Hide file tree

Showing 40 changed files with 601 additions and 225 deletions.
diff --git a/src/plugins/discover/public/__mocks__/ui_settings.ts b/src/plugins/discover/public/__mocks__/ui_settings.ts
@@ -7,14 +7,16 @@
  */
 
 import { IUiSettingsClient } from 'kibana/public';
-import { DEFAULT_COLUMNS_SETTING, SAMPLE_SIZE_SETTING } from '../../common';
+import { DEFAULT_COLUMNS_SETTING, DOC_TABLE_LEGACY, SAMPLE_SIZE_SETTING } from '../../common';
 
 export const uiSettingsMock = ({
   get: (key: string) => {
     if (key === SAMPLE_SIZE_SETTING) {
       return 10;
     } else if (key === DEFAULT_COLUMNS_SETTING) {
       return ['default_column'];
+    } else if (key === DOC_TABLE_LEGACY) {
+      return true;
     }
   },
 } as unknown) as IUiSettingsClient;
diff --git a/src/plugins/discover/public/application/angular/context.html b/src/plugins/discover/public/application/angular/context.html
@@ -2,8 +2,9 @@
   anchor-id="contextAppRoute.anchorId"
   columns="contextAppRoute.state.columns"
   index-pattern="contextAppRoute.indexPattern"
+  app-state="contextAppRoute.state"
+  state-container="contextAppRoute.stateContainer"
   filters="contextAppRoute.filters"
   predecessor-count="contextAppRoute.state.predecessorCount"
   successor-count="contextAppRoute.state.successorCount"
-  sort="contextAppRoute.state.sort"
-></context-app>
+  sort="contextAppRoute.state.sort"></context-app>
diff --git a/src/plugins/discover/public/application/angular/context.js b/src/plugins/discover/public/application/angular/context.js
@@ -15,19 +15,12 @@ import { getState } from './context_state';
 import contextAppRouteTemplate from './context.html';
 import { getRootBreadcrumbs } from '../helpers/breadcrumbs';
 
-const k7Breadcrumbs = ($route) => {
-  const { indexPattern } = $route.current.locals;
-  const { id } = $route.current.params;
-
+const k7Breadcrumbs = () => {
   return [
     ...getRootBreadcrumbs(),
     {
       text: i18n.translate('discover.context.breadcrumb', {
-        defaultMessage: 'Context of {indexPatternTitle}#{docId}',
-        values: {
-          indexPatternTitle: indexPattern.title,
-          docId: id,
-        },
+        defaultMessage: 'Surrounding documents',
       }),
     },
   ];
@@ -51,6 +44,14 @@ getAngularModule().config(($routeProvider) => {
 function ContextAppRouteController($routeParams, $scope, $route) {
   const filterManager = getServices().filterManager;
   const indexPattern = $route.current.locals.indexPattern.ip;
+  const stateContainer = getState({
+    defaultStepSize: getServices().uiSettings.get(CONTEXT_DEFAULT_SIZE_SETTING),
+    timeFieldName: indexPattern.timeFieldName,
+    storeInSessionStorage: getServices().uiSettings.get('state:storeInSessionStorage'),
+    history: getServices().history(),
+    toasts: getServices().core.notifications.toasts,
+    uiSettings: getServices().core.uiSettings,
+  });
   const {
     startSync: startStateSync,
     stopSync: stopStateSync,
@@ -59,14 +60,8 @@ function ContextAppRouteController($routeParams, $scope, $route) {
     setFilters,
     setAppState,
     flushToUrl,
-  } = getState({
-    defaultStepSize: getServices().uiSettings.get(CONTEXT_DEFAULT_SIZE_SETTING),
-    timeFieldName: indexPattern.timeFieldName,
-    storeInSessionStorage: getServices().uiSettings.get('state:storeInSessionStorage'),
-    history: getServices().history(),
-    toasts: getServices().core.notifications.toasts,
-    uiSettings: getServices().core.uiSettings,
-  });
+  } = stateContainer;
+  this.stateContainer = stateContainer;
   this.state = { ...appState.getState() };
   this.anchorId = $routeParams.id;
   this.indexPattern = indexPattern;

diff --git a/src/plugins/discover/public/application/angular/context/api/anchor.test.ts b/src/plugins/discover/public/application/angular/context/api/anchor.test.ts
@@ -8,22 +8,21 @@
 
 import { EsQuerySortValue, SortDirection } from '../../../../../../data/public';
 import { createIndexPatternsStub, createSearchSourceStub } from './_stubs';
-import { AnchorHitRecord, fetchAnchorProvider } from './anchor';
+import { fetchAnchorProvider } from './anchor';
+import { EsHitRecord, EsHitRecordList } from './context';
 
 describe('context app', function () {
   let fetchAnchor: (
     indexPatternId: string,
     anchorId: string,
     sort: EsQuerySortValue[]
-  ) => Promise<AnchorHitRecord>;
+  ) => Promise<EsHitRecord>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let searchSourceStub: any;
 
   describe('function fetchAnchor', function () {
     beforeEach(() => {
-      searchSourceStub = createSearchSourceStub([
-        { _id: 'hit1', fields: [], sort: [], _source: {} },
-      ]);
+      searchSourceStub = createSearchSourceStub(([{ _id: 'hit1' }] as unknown) as EsHitRecordList);
       fetchAnchor = fetchAnchorProvider(createIndexPatternsStub(), searchSourceStub);
     });
 
@@ -139,16 +138,14 @@ describe('context app', function () {
         { _doc: SortDirection.desc },
       ]).then((anchorDocument) => {
         expect(anchorDocument).toHaveProperty('property1', 'value1');
-        expect(anchorDocument).toHaveProperty('$$_isAnchor', true);
+        expect(anchorDocument).toHaveProperty('isAnchor', true);
       });
     });
   });
 
   describe('useNewFields API', () => {
     beforeEach(() => {
-      searchSourceStub = createSearchSourceStub([
-        { _id: 'hit1', fields: [], sort: [], _source: {} },
-      ]);
+      searchSourceStub = createSearchSourceStub(([{ _id: 'hit1' }] as unknown) as EsHitRecordList);
       fetchAnchor = fetchAnchorProvider(createIndexPatternsStub(), searchSourceStub, true);
     });
 

diff --git a/src/plugins/discover/public/application/angular/context/api/anchor.ts b/src/plugins/discover/public/application/angular/context/api/anchor.ts
@@ -16,11 +16,6 @@ import {
 } from '../../../../../../data/public';
 import { EsHitRecord } from './context';
 
-export interface AnchorHitRecord extends EsHitRecord {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  $$_isAnchor: boolean;
-}
-
 export function fetchAnchorProvider(
   indexPatterns: IndexPatternsContract,
   searchSource: ISearchSource,
@@ -30,7 +25,7 @@ export function fetchAnchorProvider(
     indexPatternId: string,
     anchorId: string,
     sort: EsQuerySortValue[]
-  ): Promise<AnchorHitRecord> {
+  ): Promise<EsHitRecord> {
     const indexPattern = await indexPatterns.get(indexPatternId);
     searchSource
       .setParent(undefined)
@@ -66,8 +61,7 @@ export function fetchAnchorProvider(
 
     return {
       ...get(response, ['hits', 'hits', 0]),
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      $$_isAnchor: true,
-    } as AnchorHitRecord;
+      isAnchor: true,
+    } as EsHitRecord;
   };
 }
diff --git a/src/plugins/discover/public/application/angular/context/api/context.predecessors.test.ts b/src/plugins/discover/public/application/angular/context/api/context.predecessors.test.ts
@@ -11,7 +11,7 @@ import { get, last } from 'lodash';
 import { createIndexPatternsStub, createContextSearchSourceStub } from './_stubs';
 import { EsHitRecordList, fetchContextProvider } from './context';
 import { setServices, SortDirection } from '../../../../kibana_services';
-import { AnchorHitRecord } from './anchor';
+import { EsHitRecord } from './context';
 import { Query } from '../../../../../../data/public';
 import { DiscoverServices } from '../../../../build_services';
 
@@ -75,7 +75,7 @@ describe('context app', function () {
         return fetchContextProvider(createIndexPatternsStub()).fetchSurroundingDocs(
           'predecessors',
           indexPatternId,
-          anchor as AnchorHitRecord,
+          anchor as EsHitRecord,
           timeField,
           tieBreakerField,
           sortDir,
@@ -267,7 +267,7 @@ describe('context app', function () {
         return fetchContextProvider(createIndexPatternsStub(), true).fetchSurroundingDocs(
           'predecessors',
           indexPatternId,
-          anchor as AnchorHitRecord,
+          anchor as EsHitRecord,
           timeField,
           tieBreakerField,
           sortDir,

diff --git a/src/plugins/discover/public/application/angular/context/api/context.successors.test.ts b/src/plugins/discover/public/application/angular/context/api/context.successors.test.ts
@@ -13,7 +13,7 @@ import { createIndexPatternsStub, createContextSearchSourceStub } from './_stubs
 import { setServices, SortDirection } from '../../../../kibana_services';
 import { Query } from '../../../../../../data/public';
 import { EsHitRecordList, fetchContextProvider } from './context';
-import { AnchorHitRecord } from './anchor';
+import { EsHitRecord } from './context';
 import { DiscoverServices } from '../../../../build_services';
 
 const MS_PER_DAY = 24 * 60 * 60 * 1000;
@@ -75,7 +75,7 @@ describe('context app', function () {
         return fetchContextProvider(createIndexPatternsStub()).fetchSurroundingDocs(
           'successors',
           indexPatternId,
-          anchor as AnchorHitRecord,
+          anchor as EsHitRecord,
           timeField,
           tieBreakerField,
           sortDir,
@@ -270,7 +270,7 @@ describe('context app', function () {
         return fetchContextProvider(createIndexPatternsStub(), true).fetchSurroundingDocs(
           'successors',
           indexPatternId,
-          anchor as AnchorHitRecord,
+          anchor as EsHitRecord,
           timeField,
           tieBreakerField,
           sortDir,

diff --git a/src/plugins/discover/public/application/angular/context/api/context.ts b/src/plugins/discover/public/application/angular/context/api/context.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import type { estypes } from '@elastic/elasticsearch';
 import { Filter, IndexPatternsContract, IndexPattern } from 'src/plugins/data/public';
 import { reverseSortDir, SortDirection } from './utils/sorting';
 import { extractNanos, convertIsoToMillis } from './utils/date_conversion';
@@ -14,17 +15,19 @@ import { generateIntervals } from './utils/generate_intervals';
 import { getEsQuerySearchAfter } from './utils/get_es_query_search_after';
 import { getEsQuerySort } from './utils/get_es_query_sort';
 import { getServices } from '../../../../kibana_services';
-import { AnchorHitRecord } from './anchor';
 
 export type SurrDocType = 'successors' | 'predecessors';
-export interface EsHitRecord {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  fields: Record<string, any>;
-  sort: number[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  _source: Record<string, any>;
-  _id: string;
-}
+export type EsHitRecord = Required<
+  Pick<
+    estypes.SearchResponse['hits']['hits'][number],
+    '_id' | 'fields' | 'sort' | '_index' | '_version'
+  >
+> & {
+  _source?: Record<string, unknown>;
+  _score?: number;
+  isAnchor?: boolean;
+};
+
 export type EsHitRecordList = EsHitRecord[];
 
 const DAY_MILLIS = 24 * 60 * 60 * 1000;
@@ -53,7 +56,7 @@ function fetchContextProvider(indexPatterns: IndexPatternsContract, useNewFields
   async function fetchSurroundingDocs(
     type: SurrDocType,
     indexPatternId: string,
-    anchor: AnchorHitRecord,
+    anchor: EsHitRecord,
     timeField: string,
     tieBreakerField: string,
     sortDir: SortDirection,
@@ -71,7 +74,7 @@ function fetchContextProvider(indexPatterns: IndexPatternsContract, useNewFields
     const timeValueMillis =
       nanos !== '' ? convertIsoToMillis(anchor.fields[timeField][0]) : anchor.sort[0];
 
-    const intervals = generateIntervals(LOOKUP_OFFSETS, timeValueMillis, type, sortDir);
+    const intervals = generateIntervals(LOOKUP_OFFSETS, timeValueMillis as number, type, sortDir);
     let documents: EsHitRecordList = [];
 
     for (const interval of intervals) {

diff --git a/...lugins/discover/public/application/angular/context/api/utils/get_es_query_search_after.ts b/...lugins/discover/public/application/angular/context/api/utils/get_es_query_search_after.ts
@@ -28,23 +28,23 @@ export function getEsQuerySearchAfter(
     // already surrounding docs -> first or last record  is used
     const afterTimeRecIdx = type === 'successors' && documents.length ? documents.length - 1 : 0;
     const afterTimeDoc = documents[afterTimeRecIdx];
-    let afterTimeValue: string | number = afterTimeDoc.sort[0];
+    let afterTimeValue = afterTimeDoc.sort[0] as string | number;
     if (nanoSeconds) {
       afterTimeValue = useNewFieldsApi
-        ? (afterTimeDoc.fields[timeFieldName] as Array<string | number>)[0]
-        : (afterTimeDoc._source[timeFieldName] as string | number);
+        ? afterTimeDoc.fields[timeFieldName][0]
+        : afterTimeDoc._source?.[timeFieldName];
     }
-    return [afterTimeValue, afterTimeDoc.sort[1]];
+    return [afterTimeValue, afterTimeDoc.sort[1] as string | number];
   }
   // if data_nanos adapt timestamp value for sorting, since numeric value was rounded by browser
   // ES search_after also works when number is provided as string
   const searchAfter = new Array(2) as EsQuerySearchAfter;
-  searchAfter[0] = anchor.sort[0];
+  searchAfter[0] = anchor.sort[0] as string | number;
   if (nanoSeconds) {
     searchAfter[0] = useNewFieldsApi
-      ? (anchor.fields[timeFieldName] as Array<string | number>)[0]
-      : (anchor._source[timeFieldName] as string | number);
+      ? anchor.fields[timeFieldName][0]
+      : anchor._source?.[timeFieldName];
   }
-  searchAfter[1] = anchor.sort[1];
+  searchAfter[1] = anchor.sort[1] as string | number;
   return searchAfter;
 }
diff --git a/src/plugins/discover/public/application/angular/context/query/actions.tsx b/src/plugins/discover/public/application/angular/context/query/actions.tsx
@@ -13,7 +13,7 @@ import { i18n } from '@kbn/i18n';
 import { getServices } from '../../../../kibana_services';
 import { SEARCH_FIELDS_FROM_SOURCE } from '../../../../../common';
 import { MarkdownSimple, toMountPoint } from '../../../../../../kibana_react/public';
-import { AnchorHitRecord, fetchAnchorProvider } from '../api/anchor';
+import { fetchAnchorProvider } from '../api/anchor';
 import { EsHitRecord, EsHitRecordList, fetchContextProvider, SurrDocType } from '../api/context';
 import { getQueryParameterActions } from '../query_parameters';
 import {
@@ -77,11 +77,12 @@ export function QueryActionsProvider(Promise: DiscoverPromise) {
     }
 
     setLoadingStatus(state)('anchor');
+    const [[, sortDir]] = sort;
 
     return Promise.try(() =>
-      fetchAnchor(indexPatternId, anchorId, [fromPairs([sort]), { [tieBreakerField]: sort[1] }])
+      fetchAnchor(indexPatternId, anchorId, [fromPairs(sort), { [tieBreakerField]: sortDir }])
     ).then(
-      (anchorDocument: AnchorHitRecord) => {
+      (anchorDocument: EsHitRecord) => {
         setLoadedStatus(state)('anchor');
         state.rows.anchor = anchorDocument;
         return anchorDocument;
@@ -120,7 +121,7 @@ export function QueryActionsProvider(Promise: DiscoverPromise) {
     }
 
     setLoadingStatus(state)(type);
-    const [sortField, sortDir] = sort;
+    const [[sortField, sortDir]] = sort;
 
     return Promise.try(() =>
       fetchSurroundingDocs(

diff --git a/src/plugins/discover/public/application/angular/context/query_parameters/actions.test.ts b/src/plugins/discover/public/application/angular/context/query_parameters/actions.test.ts
@@ -10,6 +10,7 @@ import { getQueryParameterActions } from './actions';
 import { FilterManager, SortDirection } from '../../../../../../data/public';
 import { coreMock } from '../../../../../../../core/public/mocks';
 import { ContextAppState, LoadingStatus, QueryParameters } from '../../context_app_state';
+import { EsHitRecord } from '../api/context';
 const setupMock = coreMock.createSetup();
 
 let state: ContextAppState;
@@ -29,7 +30,7 @@ beforeEach(() => {
       anchorId: '',
       columns: [],
       filters: [],
-      sort: ['field', SortDirection.asc],
+      sort: [['field', SortDirection.asc]],
       tieBreakerField: '',
     },
     loadingStatus: {
@@ -39,8 +40,7 @@ beforeEach(() => {
     },
     rows: {
       all: [],
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      anchor: { $$_isAnchor: true, fields: [], sort: [], _source: [], _id: '' },
+      anchor: ({ isAnchor: true, fields: [], sort: [], _id: '' } as unknown) as EsHitRecord,
       predecessors: [],
       successors: [],
     },
@@ -129,7 +129,7 @@ describe('context query_parameter actions', function () {
         indexPatternId: 'INDEX_PATTERN',
         predecessorCount: 100,
         successorCount: 100,
-        sort: ['field', SortDirection.asc],
+        sort: [['field', SortDirection.asc]],
         tieBreakerField: '',
       });
 
@@ -142,7 +142,7 @@ describe('context query_parameter actions', function () {
         indexPatternId: 'INDEX_PATTERN',
         predecessorCount: 100,
         successorCount: 100,
-        sort: ['field', SortDirection.asc],
+        sort: [['field', SortDirection.asc]],
         tieBreakerField: '',
       });
     });