From 56e8412e27ff91996f6c475018053cefbf6c6692 Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Thu, 26 Nov 2020 15:28:42 +0300 Subject: [PATCH 1/3] TSVB field list performance issue on using annotations --- .../vis_type_timeseries/common/constants.ts | 1 + .../application/components/aggs/field_select.js | 2 +- .../components/annotations_editor.js | 17 ++++++++++++++--- .../public/application/components/vis_editor.js | 8 +++++++- .../public/application/lib/fetch_fields.js | 5 +++-- .../vis_type_timeseries/server/routes/fields.ts | 3 ++- 6 files changed, 28 insertions(+), 8 deletions(-) diff --git a/src/plugins/vis_type_timeseries/common/constants.ts b/src/plugins/vis_type_timeseries/common/constants.ts index bfcb5e8e15b9..019afcba6000 100644 --- a/src/plugins/vis_type_timeseries/common/constants.ts +++ b/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', }; diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/field_select.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/field_select.js index a4168fd1398f..b1ff749494b1 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/aggs/field_select.js +++ b/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', { diff --git a/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js b/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js index 34132e5f7271..b1e77b44fe82 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js +++ b/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 (
@@ -120,14 +123,22 @@ export class AnnotationsEditor extends Component { label={ } + helpText={ + defaultIndexPattern && + !model.index_pattern && + i18n.translate('visTypeTimeseries.indexPattern.searchByDefaultIndex', { + defaultMessage: 'Default index pattern is used. To query all indexes use *', + }) + } fullWidth > diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js index 083ccaf8e507..b9ad4d765102 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js +++ b/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, diff --git a/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js b/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js index 6dd56a58418c..aacf95adfc72 100644 --- a/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js +++ b/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, }, diff --git a/src/plugins/vis_type_timeseries/server/routes/fields.ts b/src/plugins/vis_type_timeseries/server/routes/fields.ts index f9a600fa4b1f..a9a890845d15 100644 --- a/src/plugins/vis_type_timeseries/server/routes/fields.ts +++ b/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() }), }, From fafc0d4102972292d2155e1bea01a02447c9e901 Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Fri, 27 Nov 2020 16:53:57 +0300 Subject: [PATCH 2/3] Add AbortController to fetchFields and change translation id in annotations_editor --- .../components/annotations_editor.js | 2 +- .../application/components/vis_editor.js | 21 +++++++---- .../public/application/lib/fetch_fields.js | 37 +++++++++++-------- 3 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js b/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js index b1e77b44fe82..3d38aa72fc27 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js +++ b/src/plugins/vis_type_timeseries/public/application/components/annotations_editor.js @@ -129,7 +129,7 @@ export class AnnotationsEditor extends Component { helpText={ defaultIndexPattern && !model.index_pattern && - i18n.translate('visTypeTimeseries.indexPattern.searchByDefaultIndex', { + i18n.translate('visTypeTimeseries.annotationsEditor.searchByDefaultIndex', { defaultMessage: 'Default index pattern is used. To query all indexes use *', }) } diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js index b9ad4d765102..8e5f8f9f42d6 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js @@ -36,12 +36,6 @@ 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); @@ -82,6 +76,19 @@ export class VisEditor extends Component { }); }, VIS_STATE_DEBOUNCE_DELAY); + fetchFields = 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; @@ -100,7 +107,7 @@ export class VisEditor extends Component { const extractedIndexPatterns = extractIndexPatterns(nextModel); if (!isEqual(this.state.extractedIndexPatterns, extractedIndexPatterns)) { - debouncedFetchFields(extractedIndexPatterns).then((visFields) => + this.fetchFields(extractedIndexPatterns).then((visFields) => this.setState({ visFields, extractedIndexPatterns, diff --git a/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js b/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js index aacf95adfc72..a32ab71f3635 100644 --- a/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js +++ b/src/plugins/vis_type_timeseries/public/application/lib/fetch_fields.js @@ -21,33 +21,38 @@ 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(ROUTES.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 = {} }) { From 93407f3b8814f29a51b68cc97b54f04f3424776f Mon Sep 17 00:00:00 2001 From: Diana Derevyankina Date: Mon, 30 Nov 2020 12:32:04 +0300 Subject: [PATCH 3/3] Rename fetchFields to debouncedFetchFields --- .../public/application/components/vis_editor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js index 8e5f8f9f42d6..2cc50bd7efae 100644 --- a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js +++ b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.js @@ -76,7 +76,7 @@ export class VisEditor extends Component { }); }, VIS_STATE_DEBOUNCE_DELAY); - fetchFields = debounce( + debouncedFetchFields = debounce( (extractedIndexPatterns) => { if (this.abortControllerFetchFields) { this.abortControllerFetchFields.abort(); @@ -107,7 +107,7 @@ export class VisEditor extends Component { const extractedIndexPatterns = extractIndexPatterns(nextModel); if (!isEqual(this.state.extractedIndexPatterns, extractedIndexPatterns)) { - this.fetchFields(extractedIndexPatterns).then((visFields) => + this.debouncedFetchFields(extractedIndexPatterns).then((visFields) => this.setState({ visFields, extractedIndexPatterns,