Fix broken filtering on metric visualizations. (#38029) (#38143)

src/legacy/core_plugins/metric_vis/public/components/metric_vis_value.test.js

@@ -43,4 +43,41 @@ describe('MetricVisValue', () => {
     expect(component.find('EuiKeyboardAccessible').exists()).toBe(false);
   });
 
+  it('should add -isfilterable class if onFilter is provided', () => {
+    const onFilter = jest.fn();
+    const component = shallow(
+      <MetricVisValue
+        fontSize={12}
+        metric={{ label: 'Foo', value: 'foo' }}
+        onFilter={onFilter}
+      />
+    );
+    component.simulate('click');
+    expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(1);
+  });
+
+  it('should not add -isfilterable class if onFilter is not provided', () => {
+    const component = shallow(
+      <MetricVisValue
+        fontSize={12}
+        metric={{ label: 'Foo', value: 'foo' }}
+        onFilter={null}
+      />
+    );
+    component.simulate('click');
+    expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(0);
+  });
+
+  it('should call onFilter callback if provided', () => {
+    const onFilter = jest.fn();
+    const component = shallow(
+      <MetricVisValue
+        fontSize={12}
+        metric={{ label: 'Foo', value: 'foo' }}
+        onFilter={onFilter}
+      />
+    );
+    component.find('.mtrVis__container-isfilterable').simulate('click');
+    expect(onFilter).toHaveBeenCalledWith({ label: 'Foo', value: 'foo' });
+  });
 });

src/legacy/core_plugins/metric_vis/public/metric_vis_controller.js

@@ -161,7 +161,7 @@ export class MetricVisComponent extends Component {
         key={index}
         metric={metric}
         fontSize={this.props.visParams.metric.style.fontSize}
-        onFilter={metric.filterKey && metric.bucketAgg ? this._filterBucket : null}
+        onFilter={this.props.visParams.dimensions.bucket ? this._filterBucket : null}
         showLabel={this.props.visParams.metric.labels.show}
       />
     );

test/functional/apps/visualize/_metric_chart.js

@@ -22,6 +22,7 @@ import expect from '@kbn/expect';
 export default function ({ getService, getPageObjects }) {
   const log = getService('log');
   const retry = getService('retry');
+  const filterBar = getService('filterBar');
   const inspector = getService('inspector');
   const PageObjects = getPageObjects(['common', 'visualize', 'timePicker']);
 
@@ -170,5 +171,37 @@ export default function ({ getService, getPageObjects }) {
       });
     });
 
+    describe('with filters', function () {
+      it('should prevent filtering without buckets', async function () {
+        let filterCount = 0;
+        await retry.try(async function tryingForTime() {
+          // click first metric bucket
+          await PageObjects.visualize.clickMetricByIndex(0);
+          filterCount = await filterBar.getFilterCount();
+        });
+        expect(filterCount).to.equal(0);
+      });
+
+      it('should allow filtering with buckets', async function () {
+        await PageObjects.visualize.clickMetricEditor();
+        log.debug('Bucket = Split Group');
+        await PageObjects.visualize.clickBucket('Split Group');
+        log.debug('Aggregation = Terms');
+        await PageObjects.visualize.selectAggregation('Terms');
+        log.debug('Field = machine.os.raw');
+        await PageObjects.visualize.selectField('machine.os.raw');
+        await PageObjects.visualize.clickGo();
+
+        let filterCount = 0;
+        await retry.try(async function tryingForTime() {
+          // click first metric bucket
+          await PageObjects.visualize.clickMetricByIndex(0);
+          filterCount = await filterBar.getFilterCount();
+        });
+        await filterBar.removeAllFilters();
+        expect(filterCount).to.equal(1);
+      });
+    });
+
   });
 }

test/functional/page_objects/visualize_page.js

@@ -401,6 +401,13 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli
       await find.clickByCssSelector('button[data-test-subj="toggleEditor"]');
     }
 
+    async clickMetricByIndex(index) {
+      log.debug(`clickMetricByIndex(${index})`);
+      const metrics = await find.allByCssSelector('[data-test-subj="visualizationLoader"] .mtrVis .mtrVis__container');
+      expect(metrics.length).greaterThan(index);
+      await metrics[index].click();
+    }
+
     async clickNewSearch(indexPattern = this.index.LOGSTASH_TIME_BASED) {
       await testSubjects.click(`savedObjectTitle${indexPattern.split(' ').join('-')}`);
       await PageObjects.header.waitUntilLoadingHasFinished();