refactoring

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { extractIndexPatterns } from './extract_index_patterns';
+import { extractIndexPatterns } from './index_patterns_utils';
 import { PanelSchema } from './types';
 
 describe('extractIndexPatterns(vis)', () => {

src/plugins/vis_type_timeseries/common/extract_index_patterns.ts → src/plugins/vis_type_timeseries/common/index_patterns_utils.ts

@@ -41,3 +41,11 @@ export function extractIndexPatterns(
 
   return uniq<IndexPatternObject>(patterns).sort();
 }
+
+export const convertIndexPatternObjectToStringRepresentation = (
+  indexPatternObject: IndexPatternObject
+) =>
+  typeof indexPatternObject === 'string' ? indexPatternObject : indexPatternObject?.title ?? '';
+
+export const getIndexPatternObjectKey = (indexPatternObject: IndexPatternObject) =>
+  typeof indexPatternObject === 'string' ? indexPatternObject : indexPatternObject?.id ?? '';

src/plugins/vis_type_timeseries/common/types.ts

@@ -7,7 +7,14 @@
  */
 
 import { TypeOf } from '@kbn/config-schema';
-import { metricsItems, panel, seriesItems, visPayloadSchema, fieldObject, indexPattern } from './vis_schema';
+import {
+  metricsItems,
+  panel,
+  seriesItems,
+  visPayloadSchema,
+  fieldObject,
+  indexPattern,
+} from './vis_schema';
 import { PANEL_TYPES } from './panel_types';
 import { TimeseriesUIRestrictions } from './ui_restrictions';
 

src/plugins/vis_type_timeseries/public/application/components/aggs/field_select.tsx

@@ -10,8 +10,8 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiComboBox, EuiComboBoxProps, EuiComboBoxOptionOption } from '@elastic/eui';
 import { METRIC_TYPES } from '../../../../common/metric_types';
-
-import type { SanitizedFieldType } from '../../../../common/types';
+import { getIndexPatternObjectKey } from '../../../../common/index_patterns_utils';
+import type { SanitizedFieldType, IndexPatternObject } from '../../../../common/types';
 import type { TimeseriesUIRestrictions } from '../../../../common/ui_restrictions';
 
 // @ts-ignore
@@ -20,7 +20,7 @@ import { isFieldEnabled } from '../../lib/check_ui_restrictions';
 interface FieldSelectProps {
   type: string;
   fields: Record<string, SanitizedFieldType[]>;
-  indexPattern: string;
+  indexPattern: IndexPatternObject;
   value: string;
   onChange: (options: Array<EuiComboBoxOptionOption<string>>) => void;
   disabled?: boolean;
@@ -62,8 +62,10 @@ export function FieldSelect({
 
   const selectedOptions: Array<EuiComboBoxOptionOption<string>> = [];
   let newPlaceholder = placeholder;
+  const fieldsSelector = getIndexPatternObjectKey(indexPattern);
+
   const groupedOptions: EuiComboBoxProps<string>['options'] = Object.values(
-    (fields[indexPattern] || []).reduce<Record<string, EuiComboBoxOptionOption<string>>>(
+    (fields[fieldsSelector] || []).reduce<Record<string, EuiComboBoxOptionOption<string>>>(
       (acc, field) => {
         if (placeholder === field?.name) {
           newPlaceholder = field.label ?? field.name;

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

@@ -34,6 +34,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { IndexPatternSelect } from './lib/index_pattern_select';
 
 function newAnnotation() {
   return {
@@ -125,11 +126,11 @@ export class AnnotationsEditor extends Component {
                   }
                   fullWidth
                 >
-                  <EuiFieldText
-                    onChange={this.handleChange(model, 'index_pattern')}
+                  <IndexPatternSelect
                     value={model.index_pattern}
-                    placeholder={defaultIndexPattern}
-                    fullWidth
+                    indexPatternName={'index_pattern'}
+                    onChange={handleChange}
+                    defaultIndexPattern={model.default_index_pattern}
                   />
                 </EuiFormRow>
               </EuiFlexItem>

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

@@ -24,6 +24,7 @@ import {
 import { FieldSelect } from './aggs/field_select';
 import { createSelectHandler } from './lib/create_select_handler';
 import { createTextHandler } from './lib/create_text_handler';
+import { IndexPatternSelect } from './lib/index_pattern_select';
 import { YesNo } from './yes_no';
 import { KBN_FIELD_TYPES } from '../../../../../plugins/data/public';
 import { FormValidationContext } from '../contexts/form_validation_context';
@@ -37,7 +38,6 @@ import { VisDataContext } from '../contexts/vis_data_context';
 import { getUISettings } from '../../services';
 import { AUTO_INTERVAL } from '../../../common/constants';
 import { UI_SETTINGS } from '../../../../data/common';
-import { IndexPatternSelect } from './index_pattern_select';
 
 const RESTRICT_FIELDS = [KBN_FIELD_TYPES.DATE];
 const LEVEL_OF_DETAIL_STEPS = 10;

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

@@ -9,11 +9,11 @@
 import React, { useCallback, useState, useEffect } from 'react';
 import type { UnwrapPromise } from '@kbn/utility-types';
 import { EuiComboBox, EuiComboBoxProps } from '@elastic/eui';
-import { getDataStart } from '../../../services';
+import { getDataStart } from '../../../../services';
 
 import type { SelectIndexComponentProps } from './types';
-import type { IndexPatternObject } from '../../../../common/types';
-import type { IndexPatternsService } from '../../../../../data/public';
+import type { IndexPatternObject } from '../../../../../common/types';
+import type { IndexPatternsService } from '../../../../../../data/public';
 import { SwitchModePopover } from './switch_mode_popover';
 
 /** @internal **/

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

@@ -10,11 +10,9 @@ import React, { useCallback } from 'react';
 import { EuiFieldText, EuiFieldTextProps } from '@elastic/eui';
 import { LegacyModePopover } from './legacy_mode_popover';
 import { SwitchModePopover } from './switch_mode_popover';
+import { convertIndexPatternObjectToStringRepresentation } from '../../../../../common/index_patterns_utils';
 
 import type { SelectIndexComponentProps } from './types';
-import type { IndexPatternObject } from '../../../../common/types';
-
-const toTextValue = (v: IndexPatternObject) => (typeof v === 'string' ? v : v?.title ?? '');
 
 export const FieldTextSelect = ({
   onIndexChange,
@@ -24,7 +22,7 @@ export const FieldTextSelect = ({
   onModeChange,
   allowSwitchUseKibanaIndexesMode,
 }: SelectIndexComponentProps) => {
-  const textualValue = toTextValue(value);
+  const textualValue = convertIndexPatternObjectToStringRepresentation(value);
   const append = [<LegacyModePopover index={textualValue} />];
 
   const onFieldTextChange: EuiFieldTextProps['onChange'] = useCallback(

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

@@ -10,8 +10,8 @@ import React, { useState, useContext, useCallback } from 'react';
 import useDebounce from 'react-use/lib/useDebounce';
 import { FieldTextSelect } from './field_text_select';
 import { ComboBoxSelect } from './combo_box_select';
-import { PanelModelContext } from '../../contexts/panel_model_context';
-import type { IndexPatternObject } from '../../../../common/types';
+import { PanelModelContext } from '../../../contexts/panel_model_context';
+import type { IndexPatternObject } from '../../../../../common/types';
 
 const USE_KIBANA_INDEXES_KEY = 'use_kibana_indexes';
 

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

@@ -10,7 +10,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { EuiTextColor, EuiButtonIcon, EuiPopover, EuiButton, EuiCallOut } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { getCoreStart, getDataStart } from '../../../services';
+import { getCoreStart, getDataStart } from '../../../../services';
 
 interface LegacyModePopoverProps {
   index: string;

src/plugins/vis_type_timeseries/public/application/components/index_pattern_select/types.ts → src/plugins/vis_type_timeseries/public/application/components/lib/index_pattern_select/types.ts

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import type { IndexPatternObject } from '../../../../common/types';
+import type { IndexPatternObject } from '../../../../../common/types';
 
 export interface SelectIndexComponentProps {
   value: IndexPatternObject;

src/plugins/vis_type_timeseries/public/application/components/panel_config/table.js

@@ -36,6 +36,7 @@ import { QueryBarWrapper } from '../query_bar_wrapper';
 import { getDefaultQueryLanguage } from '../lib/get_default_query_language';
 import { VisDataContext } from '../../contexts/vis_data_context';
 import { BUCKET_TYPES } from '../../../../common/metric_types';
+import { getIndexPatternObjectKey } from '../../../../common/index_patterns_utils';
 export class TablePanelConfig extends Component {
   static contextType = VisDataContext;
   constructor(props) {
@@ -59,7 +60,9 @@ export class TablePanelConfig extends Component {
   handlePivotChange = (selectedOption) => {
     const { fields, model } = this.props;
     const pivotId = get(selectedOption, '[0].value', null);
-    const field = fields[model.index_pattern].find((field) => field.name === pivotId);
+    const field = fields[getIndexPatternObjectKey(model.index_pattern)].find(
+      (field) => field.name === pivotId
+    );
     const pivotType = get(field, 'type', model.pivot_type);
 
     this.props.onChange({

src/plugins/vis_type_timeseries/public/application/components/query_bar_wrapper.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useContext } from 'react';
+
+import { CoreStartContext } from '../contexts/query_input_bar_context';
+import { IndexPatternObject } from '../../../common/types';
+import { convertIndexPatternObjectToStringRepresentation } from '../../../common/index_patterns_utils';
+
+import { QueryStringInput, QueryStringInputProps } from '../../../../../plugins/data/public';
+
+type QueryBarWrapperProps = Pick<QueryStringInputProps, 'query' | 'onChange'> & {
+  indexPatterns: IndexPatternObject[];
+};
+
+export function QueryBarWrapper({ query, onChange, indexPatterns }: QueryBarWrapperProps) {
+  const coreStartContext = useContext(CoreStartContext);
+
+  return (
+    <QueryStringInput
+      query={query}
+      onChange={onChange}
+      indexPatterns={indexPatterns.map(convertIndexPatternObjectToStringRepresentation)}
+      {...coreStartContext}
+    />
+  );
+}

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

@@ -15,7 +15,7 @@ import { VisEditorVisualization } from './vis_editor_visualization';
 import { VisPicker } from './vis_picker';
 import { PanelConfig } from './panel_config';
 import { fetchFields } from '../lib/fetch_fields';
-import { extractIndexPatterns } from '../../../common/extract_index_patterns';
+import { extractIndexPatterns } from '../../../common/index_patterns_utils';
 import { getSavedObjectsClient, getUISettings, getDataStart, getCoreStart } from '../../services';
 
 import { CoreStartContextProvider } from '../contexts/query_input_bar_context';

src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.ts

@@ -9,10 +9,11 @@
 import { i18n } from '@kbn/i18n';
 import { getCoreStart, getDataStart } from '../../services';
 import { ROUTES } from '../../../common/constants';
-import { SanitizedFieldType } from '../../../common/types';
+import { SanitizedFieldType, IndexPatternObject } from '../../../common/types';
+import { getIndexPatternObjectKey } from '../../../common/index_patterns_utils';
 
 export async function fetchFields(
-  indexes: string[] = [],
+  indexes: IndexPatternObject[] = [],
   signal?: AbortSignal
 ): Promise<Record<string, SanitizedFieldType[]>> {
   const patterns = Array.isArray(indexes) ? indexes : [indexes];
@@ -23,19 +24,23 @@ export async function fetchFields(
     const defaultIndexPattern = await dataStart.indexPatterns.getDefault();
     const indexFields = await Promise.all(
       patterns.map(async (pattern) => {
-        return coreStart.http.get(ROUTES.FIELDS, {
-          query: {
-            index: pattern,
-          },
-          signal,
-        });
+        if (typeof pattern !== 'string' && pattern?.id) {
+          return (await dataStart.indexPatterns.get(pattern.id)).getNonScriptedFields();
+        } else {
+          return coreStart.http.get(ROUTES.FIELDS, {
+            query: {
+              index: `${pattern ?? ''}`,
+            },
+            signal,
+          });
+        }
       })
     );
 
     const fields: Record<string, SanitizedFieldType[]> = patterns.reduce(
       (cumulatedFields, currentPattern, index) => ({
         ...cumulatedFields,
-        [currentPattern]: indexFields[index],
+        [getIndexPatternObjectKey(currentPattern)]: indexFields[index],
       }),
       {}
     );

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { extractIndexPatterns } from '../../../common/extract_index_patterns';
+import { extractIndexPatterns } from '../../../common/index_patterns_utils';
 import { PanelSchema } from '../../../common/types';
 import { AbstractSearchStrategy, ReqFacade } from './strategies';