TSVB field list performance issue on using annotations (elastic#84407)

* TSVB field list performance issue on using annotations

* Add AbortController to fetchFields and change translation id in annotations_editor

* Rename fetchFields to debouncedFetchFields

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

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.annotationsEditor.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

@@ -76,6 +76,19 @@ export class VisEditor extends Component {
  });
  }, VIS_STATE_DEBOUNCE_DELAY);
 
+ debouncedFetchFields = debounce(
+ (extractedIndexPatterns) => {
+ if (this.abortControllerFetchFields) {
+ this.abortControllerFetchFields.abort();
+ }
+ this.abortControllerFetchFields = new AbortController();
+
+ return fetchFields(extractedIndexPatterns, this.abortControllerFetchFields.signal);
+ },
+ VIS_STATE_DEBOUNCE_DELAY,
+ { leading: true }
+ );
+
  handleChange = (partialModel) => {
  if (isEmpty(partialModel)) {
  return;
@@ -94,7 +107,7 @@ export class VisEditor extends Component {
 
  const extractedIndexPatterns = extractIndexPatterns(nextModel);
  if (!isEqual(this.state.extractedIndexPatterns, extractedIndexPatterns)) {
- fetchFields(extractedIndexPatterns).then((visFields) =>
+ this.debouncedFetchFields(extractedIndexPatterns).then((visFields) =>
  this.setState({
  visFields,
  extractedIndexPatterns,

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

@@ -19,34 +19,40 @@
 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 = [], signal) {
  const patterns = Array.isArray(indexPatterns) ? indexPatterns : [indexPatterns];
  try {
  const indexFields = await Promise.all(
- patterns.map((pattern) => {
- return getCoreStart().http.get('/api/metrics/fields', {
+ patterns.map((pattern) =>
+ getCoreStart().http.get(ROUTES.FIELDS, {
  query: {
  index: pattern,
  },
- });
- })
+ signal,
+ })
+ )
  );
- const fields = patterns.reduce((cumulatedFields, currentPattern, index) => {
- return {
+
+ return patterns.reduce(
+ (cumulatedFields, currentPattern, index) => ({
  ...cumulatedFields,
  [currentPattern]: indexFields[index],
- };
- }, {});
- return fields;
- } catch (error) {
- getCoreStart().notifications.toasts.addDanger({
- title: i18n.translate('visTypeTimeseries.fetchFields.loadIndexPatternFieldsErrorMessage', {
- defaultMessage: 'Unable to load index_pattern fields',
  }),
- text: error.message,
- });
+ {}
+ );
+ } catch (error) {
+ if (error.name !== 'AbortError') {
+ getCoreStart().notifications.toasts.addDanger({
+ title: i18n.translate('visTypeTimeseries.fetchFields.loadIndexPatternFieldsErrorMessage', {
+ defaultMessage: 'Unable to load index_pattern fields',
+ }),
+ text: error.message,
+ });
+ }
  }
+ return [];
 }
 
 export async function fetchIndexPatternFields({ params, fields = {} }) {

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() }),
  },