Gauge visualization can no longer be clicked to filter on values sinc…

…e Kibana 7.10.0 (#84768) (#85938) * Gauge visualization can no longer be clicked to filter on values since Kibana 7.10.0 Closes #84191 * Add functional test to filtering on gauge Co-authored-by: Diana Derevyankina <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Dec 16, 2020 · 1adf949 · 1adf949
1 parent 2e72e55
commit 1adf949
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 46 deletions.
diff --git a/src/plugins/vis_type_vislib/public/gauge.ts b/src/plugins/vis_type_vislib/public/gauge.ts
@@ -25,7 +25,7 @@ import { GaugeOptions } from './components/options';
 import { getGaugeCollections, Alignments, GaugeTypes } from './utils/collections';
 import { ColorModes, ColorSchemas, ColorSchemaParams, Labels, Style } from '../../charts/public';
 import { toExpressionAst } from './to_ast';
-import { BaseVisTypeOptions } from '../../visualizations/public';
+import { BaseVisTypeOptions, VIS_EVENT_TO_TRIGGER } from '../../visualizations/public';
 import { BasicVislibParams } from './types';
 
 export interface Gauge extends ColorSchemaParams {
@@ -63,6 +63,7 @@ export const gaugeVisTypeDefinition: BaseVisTypeOptions<BasicVislibParams> = {
   description: i18n.translate('visTypeVislib.gauge.gaugeDescription', {
     defaultMessage: 'Show the status of a metric.',
   }),
+  getSupportedTriggers: () => [VIS_EVENT_TO_TRIGGER.filter],
   toExpressionAst,
   visConfig: {
     defaults: {

diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js b/src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js
@@ -31,7 +31,10 @@ export class GaugeChart extends Chart {
   addEvents(element) {
     const events = this.events;
 
-    return element.call(events.addHoverEvent()).call(events.addMouseoutEvent());
+    return element
+      .call(events.addHoverEvent())
+      .call(events.addMouseoutEvent())
+      .call(events.addClickEvent());
   }
 
   /**

diff --git a/src/plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js b/src/plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js
@@ -344,7 +344,9 @@ export class MeterGauge {
     const transformX = width / 2;
     const transformY = height / 2 > maxRadius ? height / 2 : maxRadius;
 
-    svg.attr('transform', `translate(${transformX}, ${transformY})`);
+    svg
+      .attr('transform', `translate(${transformX}, ${transformY})`)
+      .attr('data-test-subj', `visGauge__meter--${data.label}`);
 
     return series;
   }

diff --git a/test/functional/apps/visualize/_gauge_chart.js b/test/functional/apps/visualize/_gauge_chart.js
@@ -23,6 +23,7 @@ export default function ({ getService, getPageObjects }) {
   const log = getService('log');
   const retry = getService('retry');
   const inspector = getService('inspector');
+  const filterBar = getService('filterBar');
   const testSubjects = getService('testSubjects');
   const PageObjects = getPageObjects(['visualize', 'visEditor', 'visChart', 'timePicker']);
 
@@ -52,50 +53,7 @@ export default function ({ getService, getPageObjects }) {
       });
     });
 
-    it('should show Split Gauges', async function () {
-      log.debug('Bucket = Split Group');
-      await PageObjects.visEditor.clickBucket('Split group');
-      log.debug('Aggregation = Terms');
-      await PageObjects.visEditor.selectAggregation('Terms');
-      log.debug('Field = machine.os.raw');
-      await PageObjects.visEditor.selectField('machine.os.raw');
-      log.debug('Size = 4');
-      await PageObjects.visEditor.setSize('4');
-      await PageObjects.visEditor.clickGo();
-
-      await retry.try(async () => {
-        expect(await PageObjects.visChart.getGaugeValue()).to.eql([
-          '2,904',
-          'win 8',
-          '2,858',
-          'win xp',
-          '2,814',
-          'win 7',
-          '2,784',
-          'ios',
-        ]);
-      });
-    });
-
-    it('should show correct values for fields with fieldFormatters', async function () {
-      const expectedTexts = ['2,904', 'win 8: Count', '0B', 'win 8: Min bytes'];
-
-      await PageObjects.visEditor.selectAggregation('Terms');
-      await PageObjects.visEditor.selectField('machine.os.raw');
-      await PageObjects.visEditor.setSize('1');
-      await PageObjects.visEditor.clickBucket('Metric', 'metrics');
-      await PageObjects.visEditor.selectAggregation('Min', 'metrics');
-      await PageObjects.visEditor.selectField('bytes', 'metrics');
-      await PageObjects.visEditor.clickGo();
-
-      await retry.try(async function tryingForTime() {
-        const metricValue = await PageObjects.visChart.getGaugeValue();
-        expect(expectedTexts).to.eql(metricValue);
-      });
-    });
-
     it('should format the metric correctly in percentage mode', async function () {
-      await initGaugeVis();
       await PageObjects.visEditor.clickMetricEditor();
       await PageObjects.visEditor.selectAggregation('Average', 'metrics');
       await PageObjects.visEditor.selectField('bytes', 'metrics');
@@ -111,5 +69,61 @@ export default function ({ getService, getPageObjects }) {
         expect(expectedTexts).to.eql(metricValue);
       });
     });
+
+    describe('Split Gauges', () => {
+      before(async () => {
+        await initGaugeVis();
+        log.debug('Bucket = Split Group');
+        await PageObjects.visEditor.clickBucket('Split group');
+        log.debug('Aggregation = Terms');
+        await PageObjects.visEditor.selectAggregation('Terms');
+        log.debug('Field = machine.os.raw');
+        await PageObjects.visEditor.selectField('machine.os.raw');
+        log.debug('Size = 4');
+        await PageObjects.visEditor.setSize('4');
+        await PageObjects.visEditor.clickGo();
+      });
+
+      it('should show Split Gauges', async () => {
+        await retry.try(async () => {
+          expect(await PageObjects.visChart.getGaugeValue()).to.eql([
+            '2,904',
+            'win 8',
+            '2,858',
+            'win xp',
+            '2,814',
+            'win 7',
+            '2,784',
+            'ios',
+          ]);
+        });
+      });
+
+      it('should add machine.os.raw:win 8 filter by click on the first Gauge', async () => {
+        await PageObjects.visChart.clickOnGaugeByLabel('win 8');
+        const hasFilter = await filterBar.hasFilter('machine.os.raw', 'win 8');
+
+        expect(hasFilter).to.eql(true);
+      });
+
+      it('should show correct values for fields with fieldFormatters', async () => {
+        const expectedTexts = ['2,904', 'win 8: Count', '0B', 'win 8: Min bytes'];
+
+        await PageObjects.visEditor.selectAggregation('Terms');
+        await PageObjects.visEditor.selectField('machine.os.raw');
+        await PageObjects.visEditor.setSize('1');
+        await PageObjects.visEditor.clickBucket('Metric', 'metrics');
+        await PageObjects.visEditor.selectAggregation('Min', 'metrics');
+        await PageObjects.visEditor.selectField('bytes', 'metrics');
+        await PageObjects.visEditor.clickGo();
+
+        await retry.try(async function tryingForTime() {
+          const metricValue = await PageObjects.visChart.getGaugeValue();
+          expect(expectedTexts).to.eql(metricValue);
+        });
+      });
+
+      afterEach(async () => await filterBar.removeAllFilters());
+    });
   });
 }
diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts
@@ -400,6 +400,17 @@ export function VisualizeChartPageProvider({ getService, getPageObjects }: FtrPr
       return values.filter((item) => item.length > 0);
     }
 
+    public async clickOnGaugeByLabel(label: string) {
+      const gauge = await testSubjects.find(`visGauge__meter--${label}`);
+      const gaugeSize = await gauge.getSize();
+      const gaugeHeight = gaugeSize.height;
+      // To click at Gauge arc instead of the center of SVG element
+      // the offset for a click is calculated as half arc height without 1 pixel
+      const yOffset = 1 - Math.floor(gaugeHeight / 2);
+
+      await gauge.clickMouseButton({ xOffset: 0, yOffset });
+    }
+
     public async getRightValueAxes() {
       const axes = await find.allByCssSelector('.visAxis__column--right g.axis');
       return axes.length;