maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Gauge visualization can no longer be clicked to filter on values since Kibana 7.10.0 (#84768) (#85938)

Browse source 
* 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 <54894989+DziyanaDzeraviankina@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Alexey Antonov 2020-12-16 09:33:33 +03:00 committed by GitHub
parent 2e72e55da6
commit 1adf949277
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 77 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/plugins/vis_type_vislib/public/gauge.ts
View file

@ -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: {

5
src/plugins/vis_type_vislib/public/vislib/visualizations/gauge_chart.js
View file

@ -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());
}
/**

4
src/plugins/vis_type_vislib/public/vislib/visualizations/gauges/meter.js
View file

@ -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;
}

100
test/functional/apps/visualize/_gauge_chart.js
View file

@ -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());
});
});
}

11
test/functional/page_objects/visualize_chart_page.ts
View file

@ -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;