From ffe29f769a46d31457db2b2f70d0e030a2aaa070 Mon Sep 17 00:00:00 2001 From: Diana Derevyankina <54894989+DziyanaDzeraviankina@users.noreply.github.com> Date: Tue, 15 Dec 2020 11:04:01 +0300 Subject: [PATCH] Gauge visualization can no longer be clicked to filter on values since Kibana 7.10.0 (#84768) * 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 --- src/plugins/vis_type_vislib/public/gauge.ts | 3 +- .../vislib/visualizations/gauge_chart.js | 5 +- .../vislib/visualizations/gauges/meter.js | 4 +- .../functional/apps/visualize/_gauge_chart.js | 100 ++++++++++-------- .../page_objects/visualize_chart_page.ts | 11 ++ 5 files changed, 77 insertions(+), 46 deletions(-) diff --git a/src/plugins/vis_type_vislib/public/gauge.ts b/src/plugins/vis_type_vislib/public/gauge.ts index bd3bdd1a01e9d..7cc8e03c9e4c2 100644 --- 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 = { 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 index b772aa18ed48d..a2b830ffaa781 100644 --- 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 index a252002534775..e246fd2b466f2 100644 --- 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 index 06f5913aec814..2339595997901 100644 --- 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 index 3e3f60ca17131..b036e8e02fae2 100644 --- 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;