[TSVB] Fix Upgrading from 7.12.1 to 7.13.0 breaks TSVB viz with no timefield defined

src/plugins/vis_type_timeseries/common/index_patterns_utils.test.ts

@@ -90,7 +90,7 @@ describe('fetchIndexPattern', () => {
       ] as IndexPattern[];
 
       const value = await fetchIndexPattern('indexTitle', indexPatternsService, {
-        fetchKibabaIndexForStringIndexes: true,
+        fetchKibanaIndexForStringIndexes: true,
       });
 
       expect(value).toMatchInlineSnapshot(`
@@ -104,9 +104,9 @@ describe('fetchIndexPattern', () => {
       `);
     });
 
-    test('should return only indexPatternString if Kibana index does not exist (fetchKibabaIndexForStringIndexes is true)', async () => {
+    test('should return only indexPatternString if Kibana index does not exist (fetchKibanaIndexForStringIndexes is true)', async () => {
       const value = await fetchIndexPattern('indexTitle', indexPatternsService, {
-        fetchKibabaIndexForStringIndexes: true,
+        fetchKibanaIndexForStringIndexes: true,
       });
 
       expect(value).toMatchInlineSnapshot(`

src/plugins/vis_type_timeseries/common/index_patterns_utils.ts

@@ -51,9 +51,9 @@ export const fetchIndexPattern = async (
   indexPatternValue: IndexPatternValue | undefined,
   indexPatternsService: Pick<IndexPatternsService, 'getDefault' | 'get' | 'find'>,
   options: {
-    fetchKibabaIndexForStringIndexes: boolean;
+    fetchKibanaIndexForStringIndexes: boolean;
   } = {
-    fetchKibabaIndexForStringIndexes: false,
+    fetchKibanaIndexForStringIndexes: false,
   }
 ): Promise<FetchedIndexPattern> => {
   let indexPattern: FetchedIndexPattern['indexPattern'];
@@ -63,7 +63,7 @@ export const fetchIndexPattern = async (
     indexPattern = await indexPatternsService.getDefault();
   } else {
     if (isStringTypeIndexPattern(indexPatternValue)) {
-      if (options.fetchKibabaIndexForStringIndexes) {
+      if (options.fetchKibanaIndexForStringIndexes) {
         indexPattern = (await indexPatternsService.find(indexPatternValue)).find(
           (index) => index.title === indexPatternValue
         );

src/plugins/vis_type_timeseries/public/application/components/index_pattern.js

@@ -8,7 +8,7 @@
 
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
-import React, { useContext, useCallback, useEffect } from 'react';
+import React, { useContext, useCallback, useEffect, useState } from 'react';
 import {
   htmlIdGenerator,
   EuiFieldText,
@@ -29,15 +29,17 @@ import { LastValueModePopover } from './last_value_mode_popover';
 import { KBN_FIELD_TYPES } from '../../../../data/public';
 import { FormValidationContext } from '../contexts/form_validation_context';
 import { DefaultIndexPatternContext } from '../contexts/default_index_context';
+import { PanelModelContext } from '../contexts/panel_model_context';
 import { isGteInterval, validateReInterval, isAutoInterval } from './lib/get_interval';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { PANEL_TYPES, TIME_RANGE_DATA_MODES, TIME_RANGE_MODE_KEY } from '../../../common/enums';
-import { AUTO_INTERVAL } from '../../../common/constants';
+import { AUTO_INTERVAL, USE_KIBANA_INDEXES_KEY } from '../../../common/constants';
 import { isTimerangeModeEnabled } from '../lib/check_ui_restrictions';
 import { VisDataContext } from '../contexts/vis_data_context';
-import { getUISettings } from '../../services';
+import { getDataStart, getUISettings } from '../../services';
 import { UI_SETTINGS } from '../../../../data/common';
+import { fetchIndexPattern } from '../../../common/index_patterns_utils';
 
 const RESTRICT_FIELDS = [KBN_FIELD_TYPES.DATE];
 const LEVEL_OF_DETAIL_STEPS = 10;
@@ -77,8 +79,13 @@ export const IndexPattern = ({
   const dropBucketName = `${prefix}drop_last_bucket`;
   const updateControlValidity = useContext(FormValidationContext);
   const defaultIndex = useContext(DefaultIndexPatternContext);
+  const panelModel = useContext(PanelModelContext);
+
   const uiRestrictions = get(useContext(VisDataContext), 'uiRestrictions');
   const maxBarsUiSettings = config.get(UI_SETTINGS.HISTOGRAM_MAX_BARS);
+  const useKibanaIndices = Boolean(panelModel?.[USE_KIBANA_INDEXES_KEY]);
+
+  const [fetchedIndex, setFetchedIndex] = useState();
 
   const handleMaxBarsChange = useCallback(
     ({ target }) => {
@@ -118,6 +125,7 @@ export const IndexPattern = ({
   };
 
   const model = { ...defaults, ..._model };
+  const index = model[indexPatternName];
 
   const intervalValidation = validateIntervalValue(model[intervalName]);
   const selectedTimeRangeOption = timeRangeOptions.find(
@@ -133,11 +141,40 @@ export const IndexPattern = ({
     updateControlValidity(intervalName, intervalValidation.isValid);
   }, [intervalName, intervalValidation.isValid, updateControlValidity]);
 
+  useEffect(() => {
+    async function fetchIndex() {
+      const { indexPatterns } = getDataStart();
+
+      setFetchedIndex(
+        index
+          ? await fetchIndexPattern(index, indexPatterns, {
+              fetchKibanaIndexForStringIndexes: true,
+            })
+          : {
+              indexPattern: undefined,
+              indexPatternString: undefined,
+            }
+      );
+    }
+
+    fetchIndex();
+  }, [index]);
+
   const toggleIndicatorDisplay = useCallback(
     () => onChange({ [HIDE_LAST_VALUE_INDICATOR]: !model.hide_last_value_indicator }),
     [model.hide_last_value_indicator, onChange]
   );
 
+  const getTimefieldPlaceholder = () => {
+    if (!model[indexPatternName]) {
+      return defaultIndex?.timeFieldName;
+    }
+
+    if (useKibanaIndices) {
+      return fetchedIndex?.indexPattern?.timeFieldName ?? undefined;
+    }
+  };
+
   return (
     <div className="index-pattern">
       {!isTimeSeries && (
@@ -207,6 +244,7 @@ export const IndexPattern = ({
       <EuiFlexGroup>
         <EuiFlexItem>
           <IndexPatternSelect
+            fetchedIndex={fetchedIndex}
             value={model[indexPatternName]}
             indexPatternName={indexPatternName}
             onChange={onChange}
@@ -225,7 +263,7 @@ export const IndexPattern = ({
             onChange={handleSelectChange(timeFieldName)}
             indexPattern={model[indexPatternName]}
             fields={fields}
-            placeholder={!model[indexPatternName] ? defaultIndex?.timeFieldName : undefined}
+            placeholder={getTimefieldPlaceholder()}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

src/plugins/vis_type_timeseries/public/application/components/lib/index_pattern_select/index_pattern_select.tsx

@@ -6,18 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React, { useState, useContext, useCallback, useEffect } from 'react';
+import React, { useContext, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { EuiFormRow, EuiText, EuiLink, htmlIdGenerator } from '@elastic/eui';
-import { getCoreStart, getDataStart } from '../../../../services';
+import { getCoreStart } from '../../../../services';
 import { PanelModelContext } from '../../../contexts/panel_model_context';
 
-import {
-  isStringTypeIndexPattern,
-  fetchIndexPattern,
-} from '../../../../../common/index_patterns_utils';
+import { isStringTypeIndexPattern } from '../../../../../common/index_patterns_utils';
 
 import { FieldTextSelect } from './field_text_select';
 import { ComboBoxSelect } from './combo_box_select';
@@ -32,6 +29,7 @@ interface IndexPatternSelectProps {
   onChange: Function;
   disabled?: boolean;
   allowIndexSwitchingMode?: boolean;
+  fetchedIndex: FetchedIndexPattern | null;
 }
 
 const defaultIndexPatternHelpText = i18n.translate(
@@ -57,13 +55,13 @@ export const IndexPatternSelect = ({
   indexPatternName,
   onChange,
   disabled,
+  fetchedIndex,
   allowIndexSwitchingMode,
 }: IndexPatternSelectProps) => {
   const htmlId = htmlIdGenerator();
   const panelModel = useContext(PanelModelContext);
   const defaultIndex = useContext(DefaultIndexPatternContext);
 
-  const [fetchedIndex, setFetchedIndex] = useState<FetchedIndexPattern | null>();
   const useKibanaIndices = Boolean(panelModel?.[USE_KIBANA_INDEXES_KEY]);
   const Component = useKibanaIndices ? ComboBoxSelect : FieldTextSelect;
 
@@ -98,25 +96,6 @@ export const IndexPatternSelect = ({
     });
   }, [fetchedIndex]);
 
-  useEffect(() => {
-    async function fetchIndex() {
-      const { indexPatterns } = getDataStart();
-
-      setFetchedIndex(
-        value
-          ? await fetchIndexPattern(value, indexPatterns, {
-              fetchKibabaIndexForStringIndexes: true,
-            })
-          : {
-              indexPattern: undefined,
-              indexPatternString: undefined,
-            }
-      );
-    }
-
-    fetchIndex();
-  }, [value]);
-
   if (!fetchedIndex) {
     return null;
   }

src/plugins/vis_type_timeseries/server/lib/get_vis_data.ts

@@ -31,20 +31,22 @@ export async function getVisData(
   const indexPatternsService = await framework.getIndexPatternsService(requestContext);
   const esQueryConfig = await getEsQueryConfig(uiSettings);
 
-  const services: VisTypeTimeseriesRequestServices = {
-    esQueryConfig,
-    esShardTimeout,
-    indexPatternsService,
-    uiSettings,
-    searchStrategyRegistry: framework.searchStrategyRegistry,
-    cachedIndexPatternFetcher: getCachedIndexPatternFetcher(indexPatternsService),
-  };
-
   const promises = request.body.panels.map((panel) => {
-    if (panel.type === PANEL_TYPES.TABLE) {
-      return getTableData(requestContext, request, panel, services);
-    }
-    return getSeriesData(requestContext, request, panel, services);
+    const services: VisTypeTimeseriesRequestServices = {
+      esQueryConfig,
+      esShardTimeout,
+      indexPatternsService,
+      uiSettings,
+      searchStrategyRegistry: framework.searchStrategyRegistry,
+      cachedIndexPatternFetcher: getCachedIndexPatternFetcher(
+        indexPatternsService,
+        Boolean(panel.use_kibana_indexes)
+      ),
+    };
+
+    return panel.type === PANEL_TYPES.TABLE
+      ? getTableData(requestContext, request, panel, services)
+      : getSeriesData(requestContext, request, panel, services);
   });
 
   return Promise.all(promises).then((res) => {

src/plugins/vis_type_timeseries/server/lib/search_strategies/lib/cached_index_pattern_fetcher.ts

@@ -11,7 +11,10 @@ import { getIndexPatternKey, fetchIndexPattern } from '../../../../common/index_
 import type { IndexPatternsService } from '../../../../../data/server';
 import type { IndexPatternValue, FetchedIndexPattern } from '../../../../common/types';
 
-export const getCachedIndexPatternFetcher = (indexPatternsService: IndexPatternsService) => {
+export const getCachedIndexPatternFetcher = (
+  indexPatternsService: IndexPatternsService,
+  fetchKibanaIndexForStringIndexes: boolean = false
+) => {
   const cache = new Map();
 
   return async (indexPatternValue: IndexPatternValue): Promise<FetchedIndexPattern> => {
@@ -21,7 +24,9 @@ export const getCachedIndexPatternFetcher = (indexPatternsService: IndexPatterns
       return cache.get(key);
     }
 
-    const fetchedIndex = fetchIndexPattern(indexPatternValue, indexPatternsService);
+    const fetchedIndex = fetchIndexPattern(indexPatternValue, indexPatternsService, {
+      fetchKibanaIndexForStringIndexes,
+    });
 
     cache.set(key, fetchedIndex);