TSVB field list performance issue on using annotations

Author: DianaDerevyankina

src/plugins/vis_type_timeseries/common/constants.ts

@@ -22,4 +22,5 @@ export const INDEXES_SEPARATOR = ',';
 export const AUTO_INTERVAL = 'auto';
 export const ROUTES = {
   VIS_DATA: '/api/metrics/vis/data',
+  FIELDS: '/api/metrics/fields',
 };

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

@@ -91,7 +91,7 @@ function FieldSelectUi({
 }
 
 FieldSelectUi.defaultProps = {
-  indexPattern: '*',
+  indexPattern: '',
   disabled: false,
   restrict: [],
   placeholder: i18n.translate('visTypeTimeseries.fieldSelect.selectFieldPlaceholder', {

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

@@ -43,13 +43,14 @@ import {
   EuiCode,
   EuiText,
 } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 function newAnnotation() {
   return {
     id: uuid.v1(),
     color: '#F00',
-    index_pattern: '*',
+    index_pattern: '',
     time_field: '@timestamp',
     icon: 'fa-tag',
     ignore_global_filters: 1,
@@ -84,7 +85,7 @@ export class AnnotationsEditor extends Component {
     const defaults = {
       fields: '',
       template: '',
-      index_pattern: '*',
+      index_pattern: '',
       query_string: { query: '', language: getDefaultQueryLanguage() },
     };
     const model = { ...defaults, ...row };
@@ -100,6 +101,8 @@ export class AnnotationsEditor extends Component {
     const htmlId = htmlIdGenerator(model.id);
     const handleAdd = collectionActions.handleAdd.bind(null, this.props, newAnnotation);
     const handleDelete = collectionActions.handleDelete.bind(null, this.props, model);
+    const defaultIndexPattern = this.props.model.default_index_pattern;
+
     return (
       <div className="tvbAnnotationsEditor" key={model.id}>
         <EuiFlexGroup responsive={false}>
@@ -120,14 +123,22 @@ export class AnnotationsEditor extends Component {
                   label={
                     <FormattedMessage
                       id="visTypeTimeseries.annotationsEditor.indexPatternLabel"
-                      defaultMessage="Index pattern (required)"
+                      defaultMessage="Index pattern"
                     />
                   }
+                  helpText={
+                    defaultIndexPattern &&
+                    !model.index_pattern &&
+                    i18n.translate('visTypeTimeseries.indexPattern.searchByDefaultIndex', {
+                      defaultMessage: 'Default index pattern is used. To query all indexes use *',
+                    })
+                  }
                   fullWidth
                 >
                   <EuiFieldText
                     onChange={this.handleChange(model, 'index_pattern')}
                     value={model.index_pattern}
+                    placeholder={defaultIndexPattern}
                     fullWidth
                   />
                 </EuiFormRow>

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

@@ -36,6 +36,12 @@ import { Storage } from '../../../../../plugins/kibana_utils/public';
 const VIS_STATE_DEBOUNCE_DELAY = 200;
 const APP_NAME = 'VisEditor';
 
+const debouncedFetchFields = debounce(
+  (extractedIndexPatterns) => fetchFields(extractedIndexPatterns),
+  VIS_STATE_DEBOUNCE_DELAY,
+  { leading: true }
+);
+
 export class VisEditor extends Component {
   constructor(props) {
     super(props);
@@ -94,7 +100,7 @@ export class VisEditor extends Component {
 
     const extractedIndexPatterns = extractIndexPatterns(nextModel);
     if (!isEqual(this.state.extractedIndexPatterns, extractedIndexPatterns)) {
-      fetchFields(extractedIndexPatterns).then((visFields) =>
+      debouncedFetchFields(extractedIndexPatterns).then((visFields) =>
         this.setState({
           visFields,
           extractedIndexPatterns,

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

@@ -19,13 +19,14 @@
 import { i18n } from '@kbn/i18n';
 import { extractIndexPatterns } from '../../../common/extract_index_patterns';
 import { getCoreStart } from '../../services';
+import { ROUTES } from '../../../common/constants';
 
-export async function fetchFields(indexPatterns = ['*']) {
+export async function fetchFields(indexPatterns = []) {
   const patterns = Array.isArray(indexPatterns) ? indexPatterns : [indexPatterns];
   try {
     const indexFields = await Promise.all(
       patterns.map((pattern) => {
-        return getCoreStart().http.get('/api/metrics/fields', {
+        return getCoreStart().http.get(ROUTES.FIELDS, {
           query: {
             index: pattern,
           },

src/plugins/vis_type_timeseries/server/routes/fields.ts

@@ -21,11 +21,12 @@ import { isBoom } from '@hapi/boom';
 import { schema } from '@kbn/config-schema';
 import { getFields } from '../lib/get_fields';
 import { Framework } from '../plugin';
+import { ROUTES } from '../../common/constants';
 
 export const fieldsRoutes = (framework: Framework) => {
   framework.router.get(
     {
-      path: '/api/metrics/fields',
+      path: ROUTES.FIELDS,
       validate: {
         query: schema.object({ index: schema.string() }),
       },