Add support of Data View switching for Agg-Based visualizations (#132184

) * Add support of Data View switching for Agg-Based visualizations * fix CI * add use_date_view_updates * implement sync with state * cleanup * cleanup * cleanup * Update index.ts * fix PR comments * Update use_data_view_updates.ts * Update use_data_view_updates.ts Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · May 17, 2022 · 1bb63f8 · 1bb63f8
1 parent b2feceb
commit 1bb63f8
Show file tree

Hide file tree

Showing 31 changed files with 151 additions and 13 deletions.
diff --git a/src/plugins/vis_default_editor/public/components/sidebar/state/actions.ts b/src/plugins/vis_default_editor/public/components/sidebar/state/actions.ts
@@ -20,7 +20,7 @@ type AggId = IAggConfig['id'];
 type AggParams = IAggConfig['params'];
 
 type AddNewAgg = ActionType<EditorStateActionTypes.ADD_NEW_AGG, { schema: Schema }>;
-type DiscardChanges = ActionType<EditorStateActionTypes.DISCARD_CHANGES, Vis>;
+type DiscardChanges = ActionType<EditorStateActionTypes.DISCARD_CHANGES, { vis: Vis }>;
 type ChangeAggType = ActionType<
   EditorStateActionTypes.CHANGE_AGG_TYPE,
   { aggId: AggId; value: IAggConfig['type'] }
@@ -90,7 +90,7 @@ const addNewAgg: EditorActions['addNewAgg'] = (schema) => ({
 
 const discardChanges: EditorActions['discardChanges'] = (vis) => ({
   type: EditorStateActionTypes.DISCARD_CHANGES,
-  payload: vis,
+  payload: { vis },
 });
 
 const changeAggType: EditorActions['changeAggType'] = (aggId, value) => ({

diff --git a/src/plugins/vis_default_editor/public/components/sidebar/state/reducers.ts b/src/plugins/vis_default_editor/public/components/sidebar/state/reducers.ts
@@ -48,7 +48,7 @@ const createEditorStateReducer =
       }
 
       case EditorStateActionTypes.DISCARD_CHANGES: {
-        return initEditorState(action.payload);
+        return initEditorState(action.payload.vis);
       }
 
       case EditorStateActionTypes.CHANGE_AGG_TYPE: {

diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx
@@ -62,7 +62,6 @@ function DefaultEditor({
     if (!visRef.current) {
       return;
     }
-
     embeddableHandler.render(visRef.current).then(() => {
       setTimeout(async () => {
         eventEmitter.emit('embeddableRendered');

diff --git a/src/plugins/vis_types/gauge/public/vis_type/gauge.tsx b/src/plugins/vis_types/gauge/public/vis_type/gauge.tsx
@@ -77,6 +77,7 @@ export const getGaugeVisTypeDefinition = (
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionsTemplate: getGaugeOptions(props),
     schemas: [
       {

diff --git a/src/plugins/vis_types/gauge/public/vis_type/goal.tsx b/src/plugins/vis_types/gauge/public/vis_type/goal.tsx
@@ -69,6 +69,7 @@ export const getGoalVisTypeDefinition = (
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionsTemplate: getGaugeOptions(props),
     schemas: [
       {

diff --git a/src/plugins/vis_types/heatmap/public/editor/components/heatmap.test.tsx b/src/plugins/vis_types/heatmap/public/editor/components/heatmap.test.tsx
@@ -36,6 +36,7 @@ describe('PalettePicker', function () {
       vis: {
         type: {
           editorConfig: {
+            enableDataViewChange: true,
             collections: {
               legendPositions: [
                 {

diff --git a/src/plugins/vis_types/heatmap/public/sample_vis.test.mocks.ts b/src/plugins/vis_types/heatmap/public/sample_vis.test.mocks.ts
@@ -60,6 +60,7 @@ export const sampleAreaVis = {
       },
     },
     editorConfig: {
+      enableDataViewChange: true,
       optionTabs: [
         {
           name: 'advanced',

diff --git a/src/plugins/vis_types/heatmap/public/vis_type/heatmap.tsx b/src/plugins/vis_types/heatmap/public/vis_type/heatmap.tsx
@@ -63,6 +63,7 @@ export const getHeatmapVisTypeDefinition = ({
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionsTemplate: getHeatmapOptions({
       showElasticChartsOptions,
       palettes,

diff --git a/src/plugins/vis_types/metric/public/metric_vis_type.ts b/src/plugins/vis_types/metric/public/metric_vis_type.ts
@@ -48,6 +48,7 @@ export const createMetricVisTypeDefinition = (): VisTypeDefinition<VisParams> =>
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionsTemplate: MetricVisOptions,
     schemas: [
       {

diff --git a/src/plugins/vis_types/pie/public/editor/components/pie.test.tsx b/src/plugins/vis_types/pie/public/editor/components/pie.test.tsx
@@ -25,6 +25,7 @@ describe('PalettePicker', function () {
       vis: {
         type: {
           editorConfig: {
+            enableDataViewChange: true,
             collections: {
               legendPositions: [
                 {

diff --git a/src/plugins/vis_types/pie/public/sample_vis.test.mocks.ts b/src/plugins/vis_types/pie/public/sample_vis.test.mocks.ts
@@ -46,6 +46,7 @@ export const samplePieVis = {
       },
     },
     editorConfig: {
+      enableDataViewChange: true,
       collections: {
         legendPositions: [
           {

diff --git a/src/plugins/vis_types/pie/public/vis_type/pie.ts b/src/plugins/vis_types/pie/public/vis_type/pie.ts
@@ -63,6 +63,7 @@ export const getPieVisTypeDefinition = ({
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionsTemplate: getPieOptions({
       showElasticChartsOptions,
       palettes,

diff --git a/src/plugins/vis_types/table/public/table_vis_type.ts b/src/plugins/vis_types/table/public/table_vis_type.ts
@@ -39,6 +39,7 @@ export const tableVisTypeDefinition: VisTypeDefinition<TableVisParams> = {
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionsTemplate: TableOptions,
     schemas: [
       {

diff --git a/src/plugins/vis_types/tagcloud/public/tag_cloud_type.ts b/src/plugins/vis_types/tagcloud/public/tag_cloud_type.ts
@@ -40,6 +40,7 @@ export const getTagCloudVisTypeDefinition = ({ palettes }: TagCloudVisDependenci
     },
     toExpressionAst,
     editorConfig: {
+      enableDataViewChange: true,
       optionsTemplate: getTagCloudOptions({
         palettes,
       }),

diff --git a/src/plugins/vis_types/xy/public/editor/components/options/point_series/point_series.mocks.ts b/src/plugins/vis_types/xy/public/editor/components/options/point_series/point_series.mocks.ts
@@ -440,6 +440,7 @@ export const getVis = (bucketType: string) => {
         },
       },
       editorConfig: {
+        enableDataViewChange: true,
         collections: {
           legendPositions: [
             {

diff --git a/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts b/src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts
@@ -108,6 +108,7 @@ export const sampleAreaVis = {
       },
     },
     editorConfig: {
+      enableDataViewChange: true,
       optionTabs: [
         {
           name: 'advanced',

diff --git a/src/plugins/vis_types/xy/public/vis_types/area.ts b/src/plugins/vis_types/xy/public/vis_types/area.ts
@@ -127,6 +127,7 @@ export const areaVisTypeDefinition = {
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionTabs,
     schemas: [
       {

diff --git a/src/plugins/vis_types/xy/public/vis_types/histogram.ts b/src/plugins/vis_types/xy/public/vis_types/histogram.ts
@@ -130,6 +130,7 @@ export const histogramVisTypeDefinition = {
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionTabs,
     schemas: [
       {

diff --git a/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts b/src/plugins/vis_types/xy/public/vis_types/horizontal_bar.ts
@@ -129,6 +129,7 @@ export const horizontalBarVisTypeDefinition = {
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionTabs,
     schemas: [
       {

diff --git a/src/plugins/vis_types/xy/public/vis_types/line.ts b/src/plugins/vis_types/xy/public/vis_types/line.ts
@@ -127,6 +127,7 @@ export const lineVisTypeDefinition = {
     },
   },
   editorConfig: {
+    enableDataViewChange: true,
     optionTabs,
     schemas: [
       {

diff --git a/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx b/src/plugins/visualizations/public/embeddable/visualize_embeddable.tsx
@@ -34,6 +34,7 @@ import {
   ExpressionAstExpression,
 } from '@kbn/expressions-plugin/public';
 import type { RenderMode } from '@kbn/expressions-plugin';
+import VisualizationError from '../components/visualization_error';
 import { VISUALIZE_EMBEDDABLE_TYPE } from './constants';
 import { Vis, SerializedVis } from '../vis';
 import { getExecutionContext, getExpressions, getTheme, getUiActions } from '../services';
@@ -381,6 +382,12 @@ export class VisualizeEmbeddable
     this.subscriptions.push(this.handler.loading$.subscribe(this.onContainerLoading));
     this.subscriptions.push(this.handler.render$.subscribe(this.onContainerRender));
 
+    this.subscriptions.push(
+      this.getOutput$().subscribe(
+        ({ error }) => error && render(<VisualizationError error={error} />, this.domNode)
+      )
+    );
+
     await this.updateHandler();
   }
 

diff --git a/src/plugins/visualizations/public/vis_types/types.ts b/src/plugins/visualizations/public/vis_types/types.ts
@@ -56,6 +56,7 @@ interface DefaultEditorConfig<TVisParams> {
     [key: string]: Array<{ text: string; value: string }> | Array<{ id: string; label: string }>;
   };
   enableAutoApply?: boolean;
+  enableDataViewChange?: boolean;
   defaultSize?: string;
   optionsTemplate?: DefaultEditorOptionsComponent<TVisParams>;
   optionTabs?: Array<{

diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_byvalue_editor.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_byvalue_editor.tsx
@@ -18,6 +18,7 @@ import {
   useVisualizeAppState,
   useEditorUpdates,
   useLinkedSearchUpdates,
+  useDataViewUpdates,
 } from '../utils';
 import { VisualizeServices } from '../types';
 import { VisualizeEditorCommon } from './visualize_editor_common';
@@ -84,6 +85,7 @@ export const VisualizeByValueEditor = ({ onAppLeave }: VisualizeAppProps) => {
     visEditorController
   );
   useLinkedSearchUpdates(services, eventEmitter, appState, byValueVisInstance);
+  useDataViewUpdates(services, eventEmitter, appState, byValueVisInstance);
 
   useEffect(() => {
     // clean up all registered listeners if any is left

diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_editor.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_editor.tsx
@@ -18,6 +18,7 @@ import {
   useVisualizeAppState,
   useEditorUpdates,
   useLinkedSearchUpdates,
+  useDataViewUpdates,
 } from '../utils';
 import { VisualizeServices } from '../types';
 import { VisualizeEditorCommon } from './visualize_editor_common';
@@ -63,6 +64,7 @@ export const VisualizeEditor = ({ onAppLeave }: VisualizeAppProps) => {
     visEditorController
   );
   useLinkedSearchUpdates(services, eventEmitter, appState, savedVisInstance);
+  useDataViewUpdates(services, eventEmitter, appState, savedVisInstance);
 
   useEffect(() => {
     const { stateTransferService, data } = services;

diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_editor_common.test.tsx
@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+
 import { shallowWithIntl, mountWithIntl } from '@kbn/test-jest-helpers';
 import { VisualizeEditorCommon } from './visualize_editor_common';
 import { VisualizeEditorVisInstance } from '../types';

diff --git a/src/plugins/visualizations/public/visualize_app/components/visualize_top_nav.tsx b/src/plugins/visualizations/public/visualize_app/components/visualize_top_nav.tsx
@@ -13,7 +13,7 @@ import { i18n } from '@kbn/i18n';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
-import {
+import type {
   VisualizeServices,
   VisualizeAppState,
   VisualizeAppStateContainer,
@@ -151,9 +151,7 @@ const TopNav = ({
     hideLensBadge,
     hideTryInLensBadge,
   ]);
-  const [indexPatterns, setIndexPatterns] = useState<DataView[]>(
-    vis.data.indexPattern ? [vis.data.indexPattern] : []
-  );
+  const [indexPatterns, setIndexPatterns] = useState<DataView[]>([]);
   const showDatePicker = () => {
     // tsvb loads without an indexPattern initially (TODO investigate).
     // hide timefilter only if timeFieldName is explicitly undefined.
@@ -213,7 +211,9 @@ const TopNav = ({
     const asyncSetIndexPattern = async () => {
       let indexes: DataView[] | undefined;
 
-      if (vis.type.getUsedIndexPattern) {
+      if (vis.data.indexPattern) {
+        indexes = [vis.data.indexPattern];
+      } else if (vis.type.getUsedIndexPattern) {
         indexes = await vis.type.getUsedIndexPattern(vis.params);
       }
       if (!indexes || !indexes.length) {
@@ -227,10 +227,28 @@ const TopNav = ({
       }
     };
 
-    if (!vis.data.indexPattern) {
-      asyncSetIndexPattern();
-    }
-  }, [vis.params, vis.type, vis.data.indexPattern, services.dataViews]);
+    asyncSetIndexPattern();
+  }, [services.dataViews, vis.data.indexPattern, vis.params, vis.type]);
+
+  /** Synchronizing dataView with state **/
+  useEffect(() => {
+    const stateContainerSubscription = stateContainer.state$.subscribe(async ({ dataView }) => {
+      if (
+        dataView &&
+        visInstance.vis.data.indexPattern &&
+        dataView !== visInstance.vis.data.indexPattern.id
+      ) {
+        const dataViewFromState = await services.dataViews.get(dataView);
+
+        if (dataViewFromState) {
+          setIndexPatterns([dataViewFromState]);
+        }
+      }
+    });
+    return () => {
+      stateContainerSubscription.unsubscribe();
+    };
+  }, [services.dataViews, stateContainer.state$, visInstance.vis.data.indexPattern]);
 
   useEffect(() => {
     const autoRefreshFetchSub = services.data.query.timefilter.timefilter
@@ -247,6 +265,22 @@ const TopNav = ({
     };
   }, [services.data.query.timefilter.timefilter, doReload]);
 
+  const shouldShowDataViewPicker = Boolean(
+    vis.type.editorConfig?.enableDataViewChange &&
+      !vis.data.savedSearchId &&
+      vis.data.indexPattern &&
+      indexPatterns.length
+  );
+
+  const onChangeDataView = useCallback(
+    async (selectedDataViewId: string) => {
+      if (selectedDataViewId) {
+        stateContainer.transitions.updateDataView(selectedDataViewId);
+      }
+    },
+    [stateContainer.transitions]
+  );
+
   return isChromeVisible ? (
     /**
      * Most visualizations have all search bar components enabled.
@@ -255,6 +289,7 @@ const TopNav = ({
      * All visualizations also have the timepicker\autorefresh component,
      * it is enabled by default in the TopNavMenu component.
      */
+
     <TopNavMenu
       appName={VISUALIZE_APP_NAME}
       config={config}
@@ -269,6 +304,18 @@ const TopNav = ({
       showFilterBar={showFilterBar}
       showQueryInput={showQueryInput}
       showSaveQuery={Boolean(services.visualizeCapabilities.saveQuery)}
+      dataViewPickerComponentProps={
+        shouldShowDataViewPicker
+          ? {
+              currentDataViewId: vis.data.indexPattern!.id,
+              trigger: {
+                label: vis.data.indexPattern!.title,
+              },
+              onChangeDataView,
+              showNewMenuTour: false,
+            }
+          : undefined
+      }
       showSearchBar
       useDefaultBehaviors
     />

diff --git a/src/plugins/visualizations/public/visualize_app/types.ts b/src/plugins/visualizations/public/visualize_app/types.ts
@@ -51,6 +51,7 @@ import type { createVisEmbeddableFromObject } from '../embeddable';
 import type { VisEditorsRegistry } from '../vis_editors_registry';
 
 export interface VisualizeAppState {
+  dataView?: string;
   filters: Filter[];
   uiState: SerializableRecord;
   vis: SavedVisState;
@@ -72,6 +73,7 @@ export interface VisualizeAppStateTransitions {
   ) => ({ query, parentFilters }: { query?: Query; parentFilters?: Filter[] }) => VisualizeAppState;
   updateVisState: (state: VisualizeAppState) => (vis: SavedVisState) => VisualizeAppState;
   updateSavedQuery: (state: VisualizeAppState) => (savedQueryId?: string) => VisualizeAppState;
+  updateDataView: (state: VisualizeAppState) => (dataViewId?: string) => VisualizeAppState;
 }
 
 export type VisualizeAppStateContainer = ReduxLikeStateContainer<

diff --git a/src/plugins/visualizations/public/visualize_app/utils/create_visualize_app_state.ts b/src/plugins/visualizations/public/visualize_app/utils/create_visualize_app_state.ts
@@ -48,6 +48,7 @@ const pureTransitions = {
       filters: union(state.filters, parentFilters),
       linked: false,
     }),
+  updateDataView: (state) => (dataViewId) => ({ ...state, dataView: dataViewId }),
   updateVisState: (state) => (newVisState) => ({ ...state, vis: toObject(newVisState) }),
   updateSavedQuery: (state) => (savedQueryId) => {
     const updatedState = {

diff --git a/src/plugins/visualizations/public/visualize_app/utils/use/index.ts b/src/plugins/visualizations/public/visualize_app/utils/use/index.ts
@@ -12,3 +12,4 @@ export { useSavedVisInstance } from './use_saved_vis_instance';
 export { useVisualizeAppState } from './use_visualize_app_state';
 export { useLinkedSearchUpdates } from './use_linked_search_updates';
 export { useVisByValue } from './use_vis_byvalue';
+export { useDataViewUpdates } from './use_data_view_updates';