update time field on data view switch

elastic · Sep 19, 2023 · 50ea86e · 50ea86e
1 parent b31d9b1
commit 50ea86e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/...ins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx b/...ins/event_annotation_listing/public/components/group_editor_flyout/group_preview.test.tsx
@@ -15,15 +15,19 @@ import {
   DataViewFieldMap,
   IIndexPatternFieldList,
 } from '@kbn/data-views-plugin/common';
-import { EmbeddableComponent, TypedLensByValueInput } from '@kbn/lens-plugin/public';
+import {
+  EmbeddableComponent,
+  FieldBasedIndexPatternColumn,
+  TypedLensByValueInput,
+} from '@kbn/lens-plugin/public';
 import { Datatable } from '@kbn/expressions-plugin/common';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { I18nProvider } from '@kbn/i18n-react';
 import { GroupPreview } from './group_preview';
 import { LensByValueInput } from '@kbn/lens-plugin/public/embeddable';
-import { getCurrentTimeField } from './lens_attributes';
+import { DATA_LAYER_ID, DATE_HISTOGRAM_COLUMN_ID, getCurrentTimeField } from './lens_attributes';
 import moment from 'moment';
 
 class EuiSuperDatePickerTestHarness {
@@ -137,7 +141,7 @@ describe('group editor preview', () => {
       {
         id: 'a-different-id',
         title: 'My Data View',
-        timeFieldName: '@timestamp',
+        timeFieldName: 'other-time-field',
         fields: {
           getByType: jest.fn<DataViewField[], []>(() => [
             {
@@ -230,6 +234,14 @@ describe('group editor preview', () => {
   describe('data views', () => {
     const assertDataView = (id: string, attributes: TypedLensByValueInput['attributes']) =>
       expect(attributes.references[0].id).toBe(id);
+    const assertTimeField = (fieldName: string, attributes: TypedLensByValueInput['attributes']) =>
+      expect(
+        (
+          attributes.state.datasourceStates.formBased.layers[DATA_LAYER_ID].columns[
+            DATE_HISTOGRAM_COLUMN_ID
+          ] as FieldBasedIndexPatternColumn
+        ).sourceField
+      ).toBe(fieldName);
 
     it('uses correct data view', async () => {
       assertDataView(group.indexPatternId, getLensAttributes());
@@ -242,6 +254,7 @@ describe('group editor preview', () => {
 
       await waitFor(() => {
         assertDataView('a-different-id', getLensAttributes());
+        assertTimeField('other-time-field', getLensAttributes());
       });
     });
 

diff --git a/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.tsx b/src/plugins/event_annotation_listing/public/components/group_editor_flyout/group_preview.tsx
@@ -19,7 +19,7 @@ import {
 } from '@elastic/eui';
 import { TimeRange } from '@kbn/es-query';
 import { FormattedMessage } from '@kbn/i18n-react';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import type {
   EmbeddableComponent as LensEmbeddableComponent,
@@ -104,6 +104,10 @@ export const GroupPreview = ({
     !currentDataView
   );
 
+  useEffect(() => {
+    setCurrentTimeFieldName(defaultTimeFieldName);
+  }, [defaultTimeFieldName]);
+
   useDebounce(
     () => {
       setLensAttributes(getLensAttributes(group, currentTimeFieldName));

diff --git a/...plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts b/...plugins/event_annotation_listing/public/components/group_editor_flyout/lens_attributes.ts
@@ -10,8 +10,8 @@ import { EventAnnotationGroupConfig } from '@kbn/event-annotation-common';
 import { FieldBasedIndexPatternColumn, TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import { XYPersistedByValueAnnotationLayerConfig } from '@kbn/lens-plugin/public/async_services';
 
-const DATA_LAYER_ID = 'data-layer-id';
-const DATE_HISTOGRAM_COLUMN_ID = 'date-histogram-column-id';
+export const DATA_LAYER_ID = 'data-layer-id';
+export const DATE_HISTOGRAM_COLUMN_ID = 'date-histogram-column-id';
 const ANNOTATION_LAYER_ID = 'annotation-layer-id';
 
 export const getLensAttributes = (group: EventAnnotationGroupConfig, timeField: string) =>