[Exploratory view] Fix embeddable example (#117495) (#118578)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Shahzad <shahzad.muhammad@elastic.co>

x-pack/examples/exploratory_view_example/public/app.tsx

@@ -40,7 +40,7 @@ export const App = (props: {
       reportDefinitions: {
         'monitor.id': ['ALL_VALUES'],
       },
-      breakdown: 'observer.geo.name',
+      breakdown: 'monitor.type',
       operationType: 'average',
       dataType: 'synthetics',
       seriesType: 'line',

x-pack/plugins/observability/public/components/shared/exploratory_view/embeddable/embeddable.tsx

@@ -10,7 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
 import styled from 'styled-components';
 import { AllSeries, useTheme } from '../../../..';
 import { LayerConfig, LensAttributes } from '../configurations/lens_attributes';
-import { ReportViewType } from '../types';
+import { AppDataType, ReportViewType } from '../types';
 import { getLayerConfigs } from '../hooks/use_lens_attributes';
 import { LensPublicStart, XYState } from '../../../../../../lens/public';
 import { OperationTypeComponent } from '../series_editor/columns/operation_type_select';
@@ -24,6 +24,7 @@ export interface ExploratoryEmbeddableProps {
   showCalculationMethod?: boolean;
   axisTitlesVisibility?: XYState['axisTitlesVisibilitySettings'];
   legendIsVisible?: boolean;
+  dataTypesIndexPatterns?: Record<AppDataType, string>;
 }
 
 export interface ExploratoryEmbeddableComponentProps extends ExploratoryEmbeddableProps {

x-pack/plugins/observability/public/components/shared/exploratory_view/embeddable/index.tsx

@@ -13,6 +13,7 @@ import { ObservabilityIndexPatterns } from '../utils/observability_index_pattern
 import { ObservabilityPublicPluginsStart } from '../../../../plugin';
 import type { IndexPatternState } from '../hooks/use_app_index_pattern';
 import { EuiThemeProvider } from '../../../../../../../../src/plugins/kibana_react/common';
+import type { AppDataType } from '../types';
 
 const Embeddable = React.lazy(() => import('./embeddable'));
 
@@ -36,18 +37,26 @@ export function getExploratoryViewEmbeddable(
 
     const isDarkMode = core.uiSettings.get('theme:darkMode');
 
-    const loadIndexPattern = useCallback(async ({ dataType }) => {
-      setLoading(true);
-      try {
-        const obsvIndexP = new ObservabilityIndexPatterns(plugins.data);
-        const indPattern = await obsvIndexP.getIndexPattern(dataType, 'heartbeat-*');
-        setIndexPatterns((prevState) => ({ ...(prevState ?? {}), [dataType]: indPattern }));
+    const loadIndexPattern = useCallback(
+      async ({ dataType }: { dataType: AppDataType }) => {
+        const dataTypesIndexPatterns = props.dataTypesIndexPatterns;
 
-        setLoading(false);
-      } catch (e) {
-        setLoading(false);
-      }
-    }, []);
+        setLoading(true);
+        try {
+          const obsvIndexP = new ObservabilityIndexPatterns(plugins.data);
+          const indPattern = await obsvIndexP.getIndexPattern(
+            dataType,
+            dataTypesIndexPatterns?.[dataType]
+          );
+          setIndexPatterns((prevState) => ({ ...(prevState ?? {}), [dataType]: indPattern }));
+
+          setLoading(false);
+        } catch (e) {
+          setLoading(false);
+        }
+      },
+      [props.dataTypesIndexPatterns]
+    );
 
     useEffect(() => {
       loadIndexPattern({ dataType: series.dataType });

x-pack/plugins/observability/public/components/shared/exploratory_view/utils/observability_index_patterns.ts

@@ -16,6 +16,7 @@ import { rumFieldFormats } from '../configurations/rum/field_formats';
 import { syntheticsFieldFormats } from '../configurations/synthetics/field_formats';
 import { AppDataType, FieldFormat, FieldFormatParams } from '../types';
 import { apmFieldFormats } from '../configurations/apm/field_formats';
+import { getDataHandler } from '../../../../data_handler';
 
 const appFieldFormats: Record<AppDataType, FieldFormat[] | null> = {
   infra_logs: null,
@@ -125,28 +126,47 @@ export class ObservabilityIndexPatterns {
     return fieldFormatMap;
   }
 
-  async getIndexPattern(app: AppDataType, indices: string): Promise<IndexPattern | undefined> {
+  async getDataTypeIndices(dataType: AppDataType) {
+    switch (dataType) {
+      case 'ux':
+      case 'synthetics':
+        const resultUx = await getDataHandler(dataType)?.hasData();
+        return resultUx?.indices;
+      case 'apm':
+      case 'mobile':
+        const resultApm = await getDataHandler('apm')?.hasData();
+        return resultApm?.indices.transaction;
+    }
+  }
+
+  async getIndexPattern(app: AppDataType, indices?: string): Promise<IndexPattern | undefined> {
     if (!this.data) {
       throw new Error('data is not defined');
     }
+    let appIndices = indices;
+    if (!appIndices) {
+      appIndices = await this.getDataTypeIndices(app);
+    }
 
-    try {
-      const indexPatternId = getAppIndexPatternId(app, indices);
-      const indexPatternTitle = getAppIndicesWithPattern(app, indices);
-      // we will get index pattern by id
-      const indexPattern = await this.data?.indexPatterns.get(indexPatternId);
+    if (appIndices) {
+      try {
+        const indexPatternId = getAppIndexPatternId(app, appIndices);
+        const indexPatternTitle = getAppIndicesWithPattern(app, appIndices);
+        // we will get index pattern by id
+        const indexPattern = await this.data?.indexPatterns.get(indexPatternId);
 
-      // and make sure title matches, otherwise, we will need to create it
-      if (indexPattern.title !== indexPatternTitle) {
-        return await this.createIndexPattern(app, indices);
-      }
+        // and make sure title matches, otherwise, we will need to create it
+        if (indexPattern.title !== indexPatternTitle) {
+          return await this.createIndexPattern(app, appIndices);
+        }
 
-      // this is intentional a non blocking call, so no await clause
-      this.validateFieldFormats(app, indexPattern);
-      return indexPattern;
-    } catch (e: unknown) {
-      if (e instanceof SavedObjectNotFound) {
-        return await this.createIndexPattern(app, indices);
+        // this is intentional a non blocking call, so no await clause
+        this.validateFieldFormats(app, indexPattern);
+        return indexPattern;
+      } catch (e: unknown) {
+        if (e instanceof SavedObjectNotFound) {
+          return await this.createIndexPattern(app, appIndices);
+        }
       }
     }
   }