Gauge visualization can no longer be clicked to filter on values since 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 <54894989+DziyanaDzeraviankina@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
2e72e55da6
commit
1adf949277
|
@ -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: {
|
||||
|
|
|
@ -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());
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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());
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue