[TSVB] fix include/exclude fields appear to migrated TSVB visualizati…

…on when using Group by Terms (#104848) * [TSVB] Include/exclude fields appear to migrated TSVB visualization when using Group by Terms Closes: #104829 * add functional test * fix JEST
elastic · Jul 9, 2021 · ef991b7 · ef991b7
1 parent 4806cf3
commit ef991b7
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 11 deletions.
diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/cumulative_sum.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/cumulative_sum.js
@@ -23,6 +23,7 @@ import {
   EuiFormRow,
   EuiSpacer,
 } from '@elastic/eui';
+import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
 
 export function CumulativeSumAgg(props) {
   const { model, siblings, fields, indexPattern } = props;
@@ -70,7 +71,7 @@ export function CumulativeSumAgg(props) {
               onChange={handleSelectChange('field')}
               metrics={siblings}
               metric={model}
-              fields={fields[indexPattern]}
+              fields={fields[getIndexPatternKey(indexPattern)]}
               value={model.field}
               exclude={[METRIC_TYPES.TOP_HIT]}
             />

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/derivative.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/derivative.js
@@ -25,6 +25,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
 
 export const DerivativeAgg = (props) => {
   const { siblings, fields, indexPattern } = props;
@@ -80,7 +81,7 @@ export const DerivativeAgg = (props) => {
               onChange={handleSelectChange('field')}
               metrics={siblings}
               metric={model}
-              fields={fields[indexPattern]}
+              fields={fields[getIndexPatternKey(indexPattern)]}
               value={model.field}
               exclude={[METRIC_TYPES.TOP_HIT]}
               fullWidth

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/moving_average.js
@@ -26,6 +26,7 @@ import {
   EuiFieldNumber,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
 
 const DEFAULTS = {
   model_type: MODEL_TYPES.UNWEIGHTED,
@@ -141,7 +142,7 @@ export const MovingAverageAgg = (props) => {
               onChange={handleSelectChange('field')}
               metrics={siblings}
               metric={model}
-              fields={fields[indexPattern]}
+              fields={fields[getIndexPatternKey(indexPattern)]}
               value={model.field}
               exclude={[METRIC_TYPES.TOP_HIT]}
             />

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/positive_only.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/positive_only.js
@@ -23,6 +23,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
 
 export const PositiveOnlyAgg = (props) => {
   const { siblings, fields, indexPattern } = props;
@@ -74,7 +75,7 @@ export const PositiveOnlyAgg = (props) => {
               onChange={handleSelectChange('field')}
               metrics={siblings}
               metric={model}
-              fields={fields[indexPattern]}
+              fields={fields[getIndexPatternKey(indexPattern)]}
               value={model.field}
               exclude={[METRIC_TYPES.TOP_HIT]}
             />

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/serial_diff.js
@@ -24,6 +24,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
 
 export const SerialDiffAgg = (props) => {
   const { siblings, fields, indexPattern, model } = props;
@@ -74,7 +75,7 @@ export const SerialDiffAgg = (props) => {
               onChange={handleSelectChange('field')}
               metrics={siblings}
               metric={model}
-              fields={fields[indexPattern]}
+              fields={fields[getIndexPatternKey(indexPattern)]}
               value={model.field}
               exclude={[METRIC_TYPES.TOP_HIT]}
             />

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/std_sibling.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/std_sibling.js
@@ -27,6 +27,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
+import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
 
 const StandardSiblingAggUi = (props) => {
   const { siblings, intl, fields, indexPattern } = props;
@@ -147,7 +148,7 @@ const StandardSiblingAggUi = (props) => {
               onChange={handleSelectChange('field')}
               exclude={[METRIC_TYPES.PERCENTILE, METRIC_TYPES.TOP_HIT]}
               metrics={siblings}
-              fields={fields[indexPattern]}
+              fields={fields[getIndexPatternKey(indexPattern)]}
               metric={model}
               value={model.field}
             />

diff --git a/src/plugins/vis_type_timeseries/public/application/components/aggs/vars.js b/src/plugins/vis_type_timeseries/public/application/components/aggs/vars.js
@@ -15,6 +15,7 @@ import { AddDeleteButtons } from '../add_delete_buttons';
 import { collectionActions } from '../lib/collection_actions';
 import { MetricSelect } from './metric_select';
 import { EuiFlexGroup, EuiFlexItem, EuiFieldText } from '@elastic/eui';
+import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
 
 export const newVariable = (opts) => ({ id: uuid.v1(), name: '', field: '', ...opts });
 
@@ -59,7 +60,7 @@ export class CalculationVars extends Component {
               metrics={this.props.metrics}
               metric={this.props.model}
               value={row.field}
-              fields={this.props.fields[this.props.indexPattern]}
+              fields={this.props.fields[getIndexPatternKey(this.props.indexPattern)]}
               includeSiblings={this.props.includeSiblings}
               exclude={this.props.exclude}
             />

diff --git a/...vis_type_timeseries/public/application/components/splits/__snapshots__/terms.test.js.snap b/...vis_type_timeseries/public/application/components/splits/__snapshots__/terms.test.js.snap
diff --git a/src/plugins/vis_type_timeseries/public/application/components/splits/terms.js b/src/plugins/vis_type_timeseries/public/application/components/splits/terms.js
@@ -27,6 +27,7 @@ import {
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { KBN_FIELD_TYPES } from '../../../../../data/public';
 import { STACKED_OPTIONS } from '../../visualizations/constants';
+import { getIndexPatternKey } from '../../../../common/index_patterns_utils';
 
 const DEFAULTS = { terms_direction: 'desc', terms_size: 10, terms_order_by: '_count' };
 
@@ -75,10 +76,11 @@ export const SplitByTermsUI = ({
       }),
     },
   ];
+  const fieldsSelector = getIndexPatternKey(indexPattern);
   const selectedDirectionOption = dirOptions.find((option) => {
     return model.terms_direction === option.value;
   });
-  const selectedField = find(fields[indexPattern], ({ name }) => name === model.terms_field);
+  const selectedField = find(fields[fieldsSelector], ({ name }) => name === model.terms_field);
   const selectedFieldType = get(selectedField, 'type');
 
   if (
@@ -144,6 +146,7 @@ export const SplitByTermsUI = ({
               <EuiFieldText
                 value={model.terms_include}
                 onChange={handleTextChange('terms_include')}
+                data-test-subj="groupByInclude"
               />
             </EuiFormRow>
           </EuiFlexItem>
@@ -160,6 +163,7 @@ export const SplitByTermsUI = ({
               <EuiFieldText
                 value={model.terms_exclude}
                 onChange={handleTextChange('terms_exclude')}
+                data-test-subj="groupByExclude"
               />
             </EuiFormRow>
           </EuiFlexItem>
@@ -198,7 +202,7 @@ export const SplitByTermsUI = ({
               metrics={metrics}
               clearable={false}
               additionalOptions={[defaultCount, terms]}
-              fields={fields[indexPattern]}
+              fields={fields[fieldsSelector]}
               onChange={handleSelectChange('terms_order_by')}
               restrict="basic"
               value={model.terms_order_by}

diff --git a/test/functional/apps/visualize/_tsvb_time_series.ts b/test/functional/apps/visualize/_tsvb_time_series.ts
@@ -155,7 +155,10 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
 
       describe('Clicking on the chart', () => {
         it(`should create a filter`, async () => {
-          await visualBuilder.setMetricsGroupByTerms('machine.os.raw');
+          await visualBuilder.setMetricsGroupByTerms('machine.os.raw', {
+            include: 'win 7',
+            exclude: 'ios',
+          });
           await visualBuilder.clickSeriesOption();
           await testSubjects.click('visualizeSaveButton');
 

diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts
@@ -635,14 +635,33 @@ export class VisualBuilderPageObject extends FtrService {
     return await this.find.allByCssSelector('.tvbSeriesEditor');
   }
 
-  public async setMetricsGroupByTerms(field: string) {
+  public async setMetricsGroupByTerms(
+    field: string,
+    filtering: { include?: string; exclude?: string } = {}
+  ) {
     const groupBy = await this.find.byCssSelector(
       '.tvbAggRow--split [data-test-subj="comboBoxInput"]'
     );
     await this.comboBox.setElement(groupBy, 'Terms', { clickWithMouse: true });
     await this.common.sleep(1000);
     const byField = await this.testSubjects.find('groupByField');
     await this.comboBox.setElement(byField, field);
+
+    await this.setMetricsGroupByFiltering(filtering.include, filtering.exclude);
+  }
+
+  public async setMetricsGroupByFiltering(include?: string, exclude?: string) {
+    const setFilterValue = async (value: string | undefined, subjectKey: string) => {
+      if (typeof value === 'string') {
+        const valueSubject = await this.testSubjects.find(subjectKey);
+
+        await valueSubject.clearValue();
+        await valueSubject.type(value);
+      }
+    };
+
+    await setFilterValue(include, 'groupByInclude');
+    await setFilterValue(exclude, 'groupByExclude');
   }
 
   public async checkSelectedMetricsGroupByValue(value: string) {