[TSVB] Enable dual mode, support index patterns and strings

src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/create_index_pattern_wizard.tsx

@@ -57,10 +57,11 @@ export class CreateIndexPatternWizard extends Component<
     context.services.setBreadcrumbs(getCreateBreadcrumbs());
 
     const type = new URLSearchParams(props.location.search).get('type') || undefined;
+    const indexPattern = new URLSearchParams(props.location.search).get('name') || '';
 
     this.state = {
       step: 1,
-      indexPattern: '',
+      indexPattern,
       allIndices: [],
       remoteClustersExist: false,
       isInitiallyLoadingIndices: true,

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

@@ -7,13 +7,13 @@
  */
 
 import { uniq } from 'lodash';
-import { PanelSchema } from '../common/types';
+import { PanelSchema, IndexPatternObject } from '../common/types';
 
 export function extractIndexPatterns(
   panel: PanelSchema,
   defaultIndex?: PanelSchema['default_index_pattern']
 ) {
-  const patterns: string[] = [];
+  const patterns: IndexPatternObject[] = [];
 
   if (panel.index_pattern) {
     patterns.push(panel.index_pattern);
@@ -39,5 +39,13 @@ export function extractIndexPatterns(
     patterns.push(defaultIndex);
   }
 
-  return uniq<string>(patterns).sort();
+  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 } from './vis_schema';
+import {
+  metricsItems,
+  panel,
+  seriesItems,
+  visPayloadSchema,
+  fieldObject,
+  indexPattern,
+} from './vis_schema';
 import { PANEL_TYPES } from './panel_types';
 import { TimeseriesUIRestrictions } from './ui_restrictions';
 
@@ -16,6 +23,7 @@ export type MetricsItemsSchema = TypeOf<typeof metricsItems>;
 export type PanelSchema = TypeOf<typeof panel>;
 export type VisPayload = TypeOf<typeof visPayloadSchema>;
 export type FieldObject = TypeOf<typeof fieldObject>;
+export type IndexPatternObject = TypeOf<typeof indexPattern>;
 
 interface PanelData {
   id: string;

src/plugins/vis_type_timeseries/common/vis_schema.ts

@@ -36,6 +36,14 @@ const numberOptionalOrEmptyString = schema.maybe(
   schema.oneOf([numberOptional, schema.literal('')])
 );
 
+export const indexPattern = schema.oneOf([
+  schema.maybe(schema.string()),
+  schema.object({
+    id: schema.string(),
+    title: schema.maybe(schema.string()),
+  }),
+]);
+
 export const fieldObject = stringOptionalNullable;
 
 const annotationsItems = schema.object({
@@ -46,7 +54,7 @@ const annotationsItems = schema.object({
   id: stringOptionalNullable,
   ignore_global_filters: numberIntegerOptional,
   ignore_panel_filters: numberIntegerOptional,
-  index_pattern: stringOptionalNullable,
+  index_pattern: indexPattern,
   query_string: schema.maybe(queryObject),
   template: stringOptionalNullable,
   time_field: fieldObject,
@@ -67,6 +75,7 @@ const gaugeColorRulesItems = schema.object({
   operator: stringOptionalNullable,
   value: schema.maybe(schema.nullable(schema.number())),
 });
+
 export const metricsItems = schema.object({
   field: fieldObject,
   id: stringRequired,
@@ -166,7 +175,7 @@ export const seriesItems = schema.object({
   point_size: numberOptionalOrEmptyString,
   separate_axis: numberIntegerOptional,
   seperate_axis: numberIntegerOptional,
-  series_index_pattern: stringOptionalNullable,
+  series_index_pattern: indexPattern,
   series_max_bars: numberIntegerOptional,
   series_time_field: fieldObject,
   series_interval: stringOptionalNullable,
@@ -190,6 +199,7 @@ export const seriesItems = schema.object({
 });
 
 export const panel = schema.object({
+  use_kibana_indexes: schema.maybe(schema.boolean()),
   annotations: schema.maybe(schema.arrayOf(annotationsItems)),
   axis_formatter: stringRequired,
   axis_position: stringRequired,
@@ -221,7 +231,7 @@ export const panel = schema.object({
   id: stringRequired,
   ignore_global_filters: numberOptional,
   ignore_global_filter: numberOptional,
-  index_pattern: stringRequired,
+  index_pattern: indexPattern,
   max_bars: numberIntegerOptional,
   interval: stringRequired,
   isModelInvalid: schema.maybe(schema.boolean()),

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';
@@ -64,7 +65,8 @@ export const IndexPattern = ({
   onChange,
   disabled,
   model: _model,
-  allowLevelofDetail,
+  allowLevelOfDetail,
+  allowSwitchUseKibanaIndexesMode,
 }) => {
   const config = getUISettings();
   const timeFieldName = `${prefix}time_field`;
@@ -175,12 +177,13 @@ export const IndexPattern = ({
               })
             }
           >
-            <EuiFieldText
-              data-test-subj="metricsIndexPatternInput"
-              disabled={disabled}
-              placeholder={model.default_index_pattern}
-              onChange={handleTextChange(indexPatternName)}
+            <IndexPatternSelect
               value={model[indexPatternName]}
+              indexPatternName={indexPatternName}
+              onChange={onChange}
+              defaultIndexPattern={model.default_index_pattern}
+              disabled={disabled}
+              allowSwitchUseKibanaIndexesMode={allowSwitchUseKibanaIndexesMode}
             />
           </EuiFormRow>
         </EuiFlexItem>
@@ -243,7 +246,7 @@ export const IndexPattern = ({
           </EuiFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
-      {allowLevelofDetail && (
+      {allowLevelOfDetail && (
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiFormRow
@@ -330,5 +333,6 @@ IndexPattern.propTypes = {
   prefix: PropTypes.string,
   disabled: PropTypes.bool,
   className: PropTypes.string,
-  allowLevelofDetail: PropTypes.bool,
+  allowLevelOfDetail: PropTypes.bool,
+  allowSwitchUseKibanaIndexesMode: PropTypes.bool,
 };

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

@@ -0,0 +1,82 @@
+/*
+ * 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, { useCallback, useState, useEffect } from 'react';
+import type { UnwrapPromise } from '@kbn/utility-types';
+import { EuiComboBox, EuiComboBoxProps } from '@elastic/eui';
+import { getDataStart } from '../../../../services';
+
+import type { SelectIndexComponentProps } from './types';
+import type { IndexPatternObject } from '../../../../../common/types';
+import type { IndexPatternsService } from '../../../../../../data/public';
+import { SwitchModePopover } from './switch_mode_popover';
+
+/** @internal **/
+type IdsWithTitle = UnwrapPromise<ReturnType<IndexPatternsService['getIdsWithTitle']>>;
+
+const toSelectedOptions = (
+  value: IndexPatternObject
+): EuiComboBoxProps<IndexPatternObject>['selectedOptions'] => {
+  if (value) {
+    if (typeof value === 'string') {
+      return [{ label: value ?? '' }];
+    }
+    return [
+      {
+        id: value.id ?? '',
+        label: value.title ?? '',
+      },
+    ];
+  }
+  return [];
+};
+
+const toComboBoxOptions = (options: IdsWithTitle) =>
+  options.map(({ title, id }) => ({ label: title, id }));
+
+export const ComboBoxSelect = ({
+  onIndexChange,
+  onModeChange,
+  disabled,
+  value,
+  placeholder,
+  allowSwitchUseKibanaIndexesMode,
+  'data-test-subj': dataTestSubj,
+}: SelectIndexComponentProps) => {
+  const [availableIndexes, setAvailableIndexes] = useState<IdsWithTitle>([]);
+
+  const onComboBoxChange: EuiComboBoxProps<IndexPatternObject>['onChange'] = useCallback(
+    ([selected]) => {
+      onIndexChange(selected ? { id: selected.id, title: selected.label } : '');
+    },
+    [onIndexChange]
+  );
+
+  useEffect(() => {
+    async function fetchIndexes() {
+      setAvailableIndexes(await getDataStart().indexPatterns.getIdsWithTitle());
+    }
+
+    fetchIndexes();
+  }, []);
+
+  return (
+    <EuiComboBox
+      singleSelection={{ asPlainText: true }}
+      onChange={onComboBoxChange}
+      options={toComboBoxOptions(availableIndexes)}
+      selectedOptions={toSelectedOptions(value)}
+      isDisabled={disabled}
+      placeholder={placeholder}
+      data-test-subj={dataTestSubj}
+      {...(allowSwitchUseKibanaIndexesMode && {
+        append: <SwitchModePopover isKibanaIndicesModeOn={true} onModeChange={onModeChange} />,
+      })}
+    />
+  );
+};

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

@@ -0,0 +1,50 @@
+/*
+ * 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, { 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';
+
+export const FieldTextSelect = ({
+  onIndexChange,
+  disabled,
+  value,
+  placeholder,
+  onModeChange,
+  allowSwitchUseKibanaIndexesMode,
+  'data-test-subj': dataTestSubj,
+}: SelectIndexComponentProps) => {
+  const textualValue = convertIndexPatternObjectToStringRepresentation(value);
+  const append = [<LegacyModePopover index={textualValue} onModeChange={onModeChange} />];
+
+  const onFieldTextChange: EuiFieldTextProps['onChange'] = useCallback(
+    (e) => {
+      onIndexChange(e.target.value);
+    },
+    [onIndexChange]
+  );
+
+  if (allowSwitchUseKibanaIndexesMode) {
+    append.push(<SwitchModePopover isKibanaIndicesModeOn={false} onModeChange={onModeChange} />);
+  }
+
+  return (
+    <EuiFieldText
+      disabled={disabled}
+      onChange={onFieldTextChange}
+      value={textualValue}
+      placeholder={placeholder}
+      append={append}
+      data-test-subj={dataTestSubj}
+    />
+  );
+};

src/plugins/vis_type_timeseries/public/application/components/lib/index_pattern_select/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { IndexPatternSelect } from './index_pattern_select';