[TSVB] Replace indexpattern input text with a combobox

Closes: elastic#80849
alexwizp · Nov 5, 2020 · 49c870a · 49c870a
1 parent fe3b053
commit 49c870a
Showing 1 changed file with 57 additions and 7 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js b/src/plugins/vis_type_timeseries/public/application/components/index_pattern.js
@@ -19,7 +19,7 @@
 
 import { get } from 'lodash';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   htmlIdGenerator,
   EuiFieldText,
@@ -49,8 +49,11 @@ import {
 import { PANEL_TYPES } from '../../../../../plugins/vis_type_timeseries/common/panel_types';
 import { isTimerangeModeEnabled } from '../lib/check_ui_restrictions';
 import { VisDataContext } from '../contexts/vis_data_context';
+import { getDataStart } from '../../services';
 
 const RESTRICT_FIELDS = [KBN_FIELD_TYPES.DATE];
+const INDEXES_SEPARATOR = ',';
+const MATCH_ALL_INDEXES_CHAR = '*';
 
 const validateIntervalValue = (intervalValue) => {
   const isAutoOrGteInterval = isGteInterval(intervalValue) || isAutoInterval(intervalValue);
@@ -63,12 +66,15 @@ const validateIntervalValue = (intervalValue) => {
   return validateReInterval(intervalValue);
 };
 
+const toComboBoxOptions = (stringArray) => stringArray.map((label) => ({ label }));
+
 const htmlId = htmlIdGenerator();
 
 const isEntireTimeRangeActive = (model, isTimeSeries) =>
   !isTimeSeries && model[TIME_RANGE_MODE_KEY] === TIME_RANGE_DATA_MODES.ENTIRE_TIME_RANGE;
 
 export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model }) => {
+  const [availableIndexes, setAvailableIndexes] = useState([]);
   const handleSelectChange = createSelectHandler(onChange);
   const handleTextChange = createTextHandler(onChange);
   const timeFieldName = `${prefix}time_field`;
@@ -78,6 +84,13 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
   const updateControlValidity = useContext(FormValidationContext);
   const uiRestrictions = get(useContext(VisDataContext), 'uiRestrictions');
 
+  useEffect(() => {
+    async function fetchIndexes() {
+      setAvailableIndexes(toComboBoxOptions(await getDataStart().indexPatterns.getTitles()));
+    }
+    fetchIndexes();
+  }, []);
+
   const timeRangeOptions = [
     {
       label: i18n.translate('visTypeTimeseries.indexPattern.timeRange.lastValue', {
@@ -97,7 +110,7 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
 
   const defaults = {
     default_index_pattern: '',
-    [indexPatternName]: '*',
+    [indexPatternName]: MATCH_ALL_INDEXES_CHAR,
     [intervalName]: AUTO_INTERVAL,
     [dropBucketName]: 1,
     [TIME_RANGE_MODE_KEY]: timeRangeOptions[0].value,
@@ -113,6 +126,39 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
 
   updateControlValidity(intervalName, intervalValidation.isValid);
 
+  const selectedOptions = model[indexPatternName]
+    ? toComboBoxOptions(model[indexPatternName].split(INDEXES_SEPARATOR))
+    : [];
+
+  const onChangeIndexPattern = (newIndexes) => {
+    const textIndexes = newIndexes.map(({ label }) => label).join(INDEXES_SEPARATOR);
+
+    onChange({
+      [indexPatternName]: textIndexes,
+    });
+  };
+
+  const onCreateNewIndexPatternOption = (searchValue, flattenedOptions = []) => {
+    if (!searchValue) {
+      return;
+    }
+    const normalize = (value) => value.trim().toLowerCase();
+    const normalizedSearchValue = normalize(searchValue);
+    const newOption = {
+      label: searchValue,
+    };
+
+    if (!normalizedSearchValue) {
+      return;
+    }
+
+    if (flattenedOptions.findIndex((o) => normalize(o.label) === normalizedSearchValue) === -1) {
+      setAvailableIndexes([...availableIndexes, newOption]);
+    }
+
+    onChangeIndexPattern([...selectedOptions, newOption]);
+  };
+
   return (
     <div className="index-pattern">
       {!isTimeSeries && (
@@ -163,12 +209,16 @@ export const IndexPattern = ({ fields, prefix, onChange, disabled, model: _model
               })
             }
           >
-            <EuiFieldText
-              data-test-subj="metricsIndexPatternInput"
-              disabled={disabled}
+            <EuiComboBox
               placeholder={model.default_index_pattern}
-              onChange={handleTextChange(indexPatternName, '*')}
-              value={model[indexPatternName]}
+              options={availableIndexes}
+              selectedOptions={selectedOptions}
+              onChange={onChangeIndexPattern}
+              onCreateOption={onCreateNewIndexPatternOption}
+              isClearable={true}
+              delimiter=","
+              data-test-subj="metricsIndexPatternInput"
+              isDisabled={disabled}
             />
           </EuiFormRow>
         </EuiFlexItem>