diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge.js index 000701c3a0764a..723a054baeeae4 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge.js +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge.js @@ -108,10 +108,15 @@ export class Gauge extends Component { ref={(el) => (this.inner = el)} style={styles.inner} > -
+
{title}
-
+
{formatter(value)}
{additionalLabel} @@ -124,10 +129,15 @@ export class Gauge extends Component { ref={(el) => (this.inner = el)} style={styles.inner} > -
+
{formatter(value)}
-
+
{title}
{additionalLabel} diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge_vis.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge_vis.js index 30b7844a90fdac..165f5080af93a4 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge_vis.js +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/gauge_vis.js @@ -131,15 +131,19 @@ export class GaugeVis extends Component { if (type === 'half') { svg = ( - - + + ); } else { svg = ( - - + + ); } diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js index 9d6381f21b11f6..72b2c7ce34fd88 100644 --- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js +++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/top_n.js @@ -135,7 +135,7 @@ export class TopN extends Component {
-
+
diff --git a/test/functional/apps/visualize/_tsvb_chart.ts b/test/functional/apps/visualize/_tsvb_chart.ts index e5f298c111d1df..e5f989747a9754 100644 --- a/test/functional/apps/visualize/_tsvb_chart.ts +++ b/test/functional/apps/visualize/_tsvb_chart.ts @@ -17,20 +17,18 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { const retry = getService('retry'); const security = getService('security'); - const PageObjects = getPageObjects([ - 'visualize', - 'visualBuilder', + const { timePicker, visChart, visualBuilder, visualize } = getPageObjects([ 'timePicker', 'visChart', - 'common', - 'settings', + 'visualBuilder', + 'visualize', ]); describe('visual builder', function describeIndexTests() { this.tags('includeFirefox'); before(async () => { - await PageObjects.visualize.initTests(); + await visualize.initTests(); }); beforeEach(async () => { @@ -38,16 +36,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { ['kibana_admin', 'test_logstash_reader', 'kibana_sample_admin'], false ); - await PageObjects.visualize.navigateToNewVisualization(); - await PageObjects.visualize.clickVisualBuilder(); - await PageObjects.visualBuilder.checkVisualBuilderIsPresent(); + await visualize.navigateToNewVisualization(); + await visualize.clickVisualBuilder(); + await visualBuilder.checkVisualBuilderIsPresent(); + await visualBuilder.resetPage(); }); describe('metric', () => { - const { visualBuilder } = PageObjects; - beforeEach(async () => { - await visualBuilder.resetPage(); await visualBuilder.clickMetric(); await visualBuilder.checkMetricTabIsPresent(); await visualBuilder.clickPanelOptions('metric'); @@ -157,72 +153,188 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { describe('gauge', () => { beforeEach(async () => { - await PageObjects.visualBuilder.resetPage(); - await PageObjects.visualBuilder.clickGauge(); - await PageObjects.visualBuilder.checkGaugeTabIsPresent(); + await visualBuilder.clickGauge(); + await visualBuilder.checkGaugeTabIsPresent(); }); it('should "Entire time range" selected as timerange mode for new visualization', async () => { - await PageObjects.visualBuilder.clickPanelOptions('gauge'); - await PageObjects.visualBuilder.checkSelectedDataTimerangeMode('Entire time range'); - await PageObjects.visualBuilder.clickDataTab('gauge'); + await visualBuilder.clickPanelOptions('gauge'); + await visualBuilder.checkSelectedDataTimerangeMode('Entire time range'); + await visualBuilder.clickDataTab('gauge'); }); it('should verify gauge label and count display', async () => { - await PageObjects.visChart.waitForVisualizationRenderingStabilized(); - const labelString = await PageObjects.visualBuilder.getGaugeLabel(); - expect(labelString).to.be('Count'); - const gaugeCount = await PageObjects.visualBuilder.getGaugeCount(); + await visChart.waitForVisualizationRenderingStabilized(); + const gaugeLabel = await visualBuilder.getGaugeLabel(); + const gaugeCount = await visualBuilder.getGaugeCount(); + expect(gaugeLabel).to.be('Count'); expect(gaugeCount).to.be('13,830'); }); + + it('should display correct data for max aggregation with entire time range mode', async () => { + await visualBuilder.selectAggType('Max'); + await visualBuilder.setFieldForAggregation('bytes'); + + const gaugeLabel = await visualBuilder.getGaugeLabel(); + const gaugeCount = await visualBuilder.getGaugeCount(); + + expect(gaugeLabel).to.be('Max of bytes'); + expect(gaugeCount).to.be('19,986'); + }); + + it('should display correct data for sum aggregation with last value time range mode', async () => { + await visualBuilder.selectAggType('Sum'); + await visualBuilder.setFieldForAggregation('memory'); + await visualBuilder.clickPanelOptions('gauge'); + await visualBuilder.setMetricsDataTimerangeMode('Last value'); + + const gaugeLabel = await visualBuilder.getGaugeLabel(); + const gaugeCount = await visualBuilder.getGaugeCount(); + + expect(gaugeLabel).to.be('Sum of memory'); + expect(gaugeCount).to.be('672,320'); + }); + + it('should apply series color to gauge', async () => { + await visualBuilder.setColorPickerValue('#90CEEAFF'); + + const gaugeColor = await visualBuilder.getGaugeColor(); + expect(gaugeColor).to.be('rgb(144, 206, 234)'); + }); + + describe('Color rules', () => { + it('should apply color rules to visualization background and inner gauge circle', async () => { + await visualBuilder.selectAggType('Filter Ratio'); + await visualBuilder.setFilterRatioOption('Numerator', 'bytes < 0'); + await visualBuilder.clickPanelOptions('gauge'); + await visualBuilder.setColorRuleOperator('< less than'); + await visualBuilder.setColorRuleValue(21); + await visualBuilder.setBackgroundColor('#FFCFDF'); + await visualBuilder.setColorPickerValue('#AD7DE6', 1); + + const backGroundStyle = await visualBuilder.getBackgroundStyle(); + const gaugeInnerColor = await visualBuilder.getGaugeColor(true); + + expect(backGroundStyle).to.eql('background-color: rgb(255, 207, 223);'); + expect(gaugeInnerColor).to.eql('rgba(173,125,230,1)'); + }); + + it('should apply color rules to gauge and its value', async () => { + await visualBuilder.selectAggType('Cardinality'); + await visualBuilder.setFieldForAggregation('machine.ram'); + await visualBuilder.clickPanelOptions('gauge'); + await visualBuilder.setColorRuleOperator('>= greater than or equal'); + await visualBuilder.setColorRuleValue(20); + await visualBuilder.setColorPickerValue('#54B399', 2); + await visualBuilder.setColorPickerValue('#DA8B45', 3); + + const gaugeColor = await visualBuilder.getGaugeColor(); + const gaugeValueStyle = await visualBuilder.getGaugeValueStyle(); + + expect(gaugeColor).to.be('rgba(84,179,153,1)'); + expect(gaugeValueStyle).to.eql('color: rgb(218, 139, 69);'); + }); + }); }); describe('topN', () => { beforeEach(async () => { - await PageObjects.visualBuilder.resetPage(); - await PageObjects.visualBuilder.clickTopN(); - await PageObjects.visualBuilder.checkTopNTabIsPresent(); - await PageObjects.visualBuilder.clickPanelOptions('topN'); - await PageObjects.visualBuilder.setMetricsDataTimerangeMode('Last value'); - await PageObjects.visualBuilder.setDropLastBucket(true); - await PageObjects.visualBuilder.clickDataTab('topN'); + await visualBuilder.clickTopN(); + await visualBuilder.checkTopNTabIsPresent(); + await visualBuilder.clickPanelOptions('topN'); + await visualBuilder.setMetricsDataTimerangeMode('Last value'); + await visualBuilder.setDropLastBucket(true); + await visualBuilder.clickDataTab('topN'); }); it('should verify topN label and count display', async () => { - await PageObjects.visChart.waitForVisualizationRenderingStabilized(); - const labelString = await PageObjects.visualBuilder.getTopNLabel(); - expect(labelString).to.be('Count'); - const gaugeCount = await PageObjects.visualBuilder.getTopNCount(); - expect(gaugeCount).to.be('156'); + await visChart.waitForVisualizationRenderingStabilized(); + const topNLabel = await visualBuilder.getTopNLabel(); + const topNCount = await visualBuilder.getTopNCount(); + expect(topNLabel).to.be('Count'); + expect(topNCount).to.be('156'); + }); + + it('should display correct data for counter rate aggregation with last value time range mode', async () => { + await visualBuilder.selectAggType('Counter rate'); + await visualBuilder.setFieldForAggregation('memory'); + + const topNLabel = await visualBuilder.getTopNLabel(); + const topNCount = await visualBuilder.getTopNCount(); + + expect(topNLabel).to.be('Counter Rate of memory'); + expect(topNCount).to.be('29,520'); + }); + + it('should display correct data for sum of squares aggregation with entire time range mode', async () => { + await visualBuilder.selectAggType('Sum of squares'); + await visualBuilder.setFieldForAggregation('bytes'); + await visualBuilder.clickPanelOptions('topN'); + await visualBuilder.setMetricsDataTimerangeMode('Entire time range'); + + const topNLabel = await visualBuilder.getTopNLabel(); + const topNCount = await visualBuilder.getTopNCount(); + + expect(topNLabel).to.be('Sum of Sq. of bytes'); + expect(topNCount).to.be('630,170,001,503'); + }); + + it('should apply series color to bar', async () => { + await visualBuilder.cloneSeries(); + await visualBuilder.setColorPickerValue('#E5FFCF'); + await visualBuilder.setColorPickerValue('#80e08a', 1); + + const firstTopNBarStyle = await visualBuilder.getTopNBarStyle(); + const secondTopNBarStyle = await visualBuilder.getTopNBarStyle(1); + + expect(firstTopNBarStyle).to.contain('background-color: rgb(229, 255, 207);'); + expect(secondTopNBarStyle).to.contain('background-color: rgb(128, 224, 138);'); + }); + + describe('Color rules', () => { + it('should apply color rules to visualization background and bar', async () => { + await visualBuilder.selectAggType('Value Count'); + await visualBuilder.setFieldForAggregation('machine.ram'); + await visualBuilder.clickPanelOptions('topN'); + await visualBuilder.setColorRuleOperator('<= less than or equal'); + await visualBuilder.setColorRuleValue(153); + await visualBuilder.setBackgroundColor('#FBFFD4'); + await visualBuilder.setColorPickerValue('#D6BF57', 1); + + const backGroundStyle = await visualBuilder.getBackgroundStyle(); + const topNBarStyle = await visualBuilder.getTopNBarStyle(); + + expect(backGroundStyle).to.eql('background-color: rgb(251, 255, 212);'); + expect(topNBarStyle).to.contain('background-color: rgb(214, 191, 87);'); + }); }); }); describe('switch index pattern mode', () => { beforeEach(async () => { - await PageObjects.visualBuilder.resetPage(); - await PageObjects.visualBuilder.clickMetric(); - await PageObjects.visualBuilder.checkMetricTabIsPresent(); - await PageObjects.visualBuilder.clickPanelOptions('metric'); - await PageObjects.visualBuilder.setMetricsDataTimerangeMode('Last value'); - await PageObjects.visualBuilder.setDropLastBucket(true); - await PageObjects.visualBuilder.clickDataTab('metric'); - await PageObjects.timePicker.setAbsoluteRange( + await visualBuilder.clickMetric(); + await visualBuilder.checkMetricTabIsPresent(); + await visualBuilder.clickPanelOptions('metric'); + await visualBuilder.setMetricsDataTimerangeMode('Last value'); + await visualBuilder.setDropLastBucket(true); + await visualBuilder.clickDataTab('metric'); + await timePicker.setAbsoluteRange( 'Sep 19, 2015 @ 06:31:44.000', 'Sep 22, 2015 @ 18:31:44.000' ); }); const switchIndexTest = async (useKibanaIndexes: boolean) => { - await PageObjects.visualBuilder.clickPanelOptions('metric'); - await PageObjects.visualBuilder.setIndexPatternValue('', false); + await visualBuilder.clickPanelOptions('metric'); + await visualBuilder.setIndexPatternValue('', false); // Sometimes popovers take some time to appear in Firefox (#71979) await retry.tryForTime(20000, async () => { - await PageObjects.visualBuilder.setIndexPatternValue('logstash-*', useKibanaIndexes); - await PageObjects.visualBuilder.waitForIndexPatternTimeFieldOptionsLoaded(); - await PageObjects.visualBuilder.selectIndexPatternTimeField('@timestamp'); + await visualBuilder.setIndexPatternValue('logstash-*', useKibanaIndexes); + await visualBuilder.waitForIndexPatternTimeFieldOptionsLoaded(); + await visualBuilder.selectIndexPatternTimeField('@timestamp'); }); - const newValue = await PageObjects.visualBuilder.getMetricValue(); + const newValue = await visualBuilder.getMetricValue(); expect(newValue).to.eql('156'); }; @@ -237,112 +349,106 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) { describe('switch panel interval test', () => { beforeEach(async () => { - await PageObjects.visualBuilder.resetPage(); - await PageObjects.visualBuilder.clickMetric(); - await PageObjects.visualBuilder.checkMetricTabIsPresent(); - await PageObjects.visualBuilder.clickPanelOptions('metric'); - await PageObjects.visualBuilder.setMetricsDataTimerangeMode('Last value'); - await PageObjects.visualBuilder.setDropLastBucket(true); - await PageObjects.timePicker.setAbsoluteRange( + await visualBuilder.resetPage(); + await visualBuilder.clickMetric(); + await visualBuilder.checkMetricTabIsPresent(); + await visualBuilder.clickPanelOptions('metric'); + await visualBuilder.setMetricsDataTimerangeMode('Last value'); + await visualBuilder.setDropLastBucket(true); + await timePicker.setAbsoluteRange( 'Sep 19, 2015 @ 06:31:44.000', 'Sep 22, 2015 @ 18:31:44.000' ); }); it('should be able to switch to gte interval (>=2d)', async () => { - await PageObjects.visualBuilder.setIntervalValue('>=2d'); - const newValue = await PageObjects.visualBuilder.getMetricValue(); + await visualBuilder.setIntervalValue('>=2d'); + const newValue = await visualBuilder.getMetricValue(); expect(newValue).to.eql('9,371'); }); it('should be able to switch to fixed interval (1d)', async () => { - await PageObjects.visualBuilder.setIntervalValue('1d'); - const newValue = await PageObjects.visualBuilder.getMetricValue(); + await visualBuilder.setIntervalValue('1d'); + const newValue = await visualBuilder.getMetricValue(); expect(newValue).to.eql('4,614'); }); it('should be able to switch to auto interval', async () => { - await PageObjects.visualBuilder.setIntervalValue('auto'); - const newValue = await PageObjects.visualBuilder.getMetricValue(); + await visualBuilder.setIntervalValue('auto'); + const newValue = await visualBuilder.getMetricValue(); expect(newValue).to.eql('156'); }); }); describe('browser history changes', () => { it('should activate previous/next chart tab and panel config', async () => { - await PageObjects.visualBuilder.resetPage(); - log.debug('Click metric chart'); - await PageObjects.visualBuilder.clickMetric(); - await PageObjects.visualBuilder.checkMetricTabIsPresent(); - await PageObjects.visualBuilder.checkTabIsSelected('metric'); + await visualBuilder.clickMetric(); + await visualBuilder.checkMetricTabIsPresent(); + await visualBuilder.checkTabIsSelected('metric'); log.debug('Click Top N chart'); - await PageObjects.visualBuilder.clickTopN(); - await PageObjects.visualBuilder.checkTopNTabIsPresent(); - await PageObjects.visualBuilder.checkTabIsSelected('top_n'); + await visualBuilder.clickTopN(); + await visualBuilder.checkTopNTabIsPresent(); + await visualBuilder.checkTabIsSelected('top_n'); log.debug('Go back in browser history'); await browser.goBack(); log.debug('Check metric chart and panel config is rendered'); - await PageObjects.visualBuilder.checkMetricTabIsPresent(); - await PageObjects.visualBuilder.checkTabIsSelected('metric'); - await PageObjects.visualBuilder.checkPanelConfigIsPresent('metric'); + await visualBuilder.checkMetricTabIsPresent(); + await visualBuilder.checkTabIsSelected('metric'); + await visualBuilder.checkPanelConfigIsPresent('metric'); log.debug('Go back in browser history'); await browser.goBack(); log.debug('Check timeseries chart and panel config is rendered'); await retry.try(async () => { - await PageObjects.visualBuilder.checkTimeSeriesChartIsPresent(); - await PageObjects.visualBuilder.checkTabIsSelected('timeseries'); - await PageObjects.visualBuilder.checkPanelConfigIsPresent('timeseries'); + await visualBuilder.checkTimeSeriesChartIsPresent(); + await visualBuilder.checkTabIsSelected('timeseries'); + await visualBuilder.checkPanelConfigIsPresent('timeseries'); }); log.debug('Go forward in browser history'); await browser.goForward(); log.debug('Check metric chart and panel config is rendered'); - await PageObjects.visualBuilder.checkMetricTabIsPresent(); - await PageObjects.visualBuilder.checkTabIsSelected('metric'); - await PageObjects.visualBuilder.checkPanelConfigIsPresent('metric'); + await visualBuilder.checkMetricTabIsPresent(); + await visualBuilder.checkTabIsSelected('metric'); + await visualBuilder.checkPanelConfigIsPresent('metric'); }); it('should update panel config', async () => { - await PageObjects.visualBuilder.resetPage(); - const initialLegendItems = ['Count: 156']; const finalLegendItems = ['jpg: 106', 'css: 22', 'png: 14', 'gif: 8', 'php: 6']; log.debug('Group metrics by terms: extension.raw'); - await PageObjects.visualBuilder.clickPanelOptions('timeSeries'); - await PageObjects.visualBuilder.setDropLastBucket(true); - await PageObjects.visualBuilder.clickDataTab('timeSeries'); - await PageObjects.visualBuilder.setMetricsGroupByTerms('extension.raw'); - await PageObjects.visChart.waitForVisualizationRenderingStabilized(); - const legendItems1 = await PageObjects.visualBuilder.getLegendItemsContent(); + await visualBuilder.clickPanelOptions('timeSeries'); + await visualBuilder.setDropLastBucket(true); + await visualBuilder.clickDataTab('timeSeries'); + await visualBuilder.setMetricsGroupByTerms('extension.raw'); + await visChart.waitForVisualizationRenderingStabilized(); + const legendItems1 = await visualBuilder.getLegendItemsContent(); expect(legendItems1).to.eql(finalLegendItems); log.debug('Go back in browser history'); await browser.goBack(); - const isTermsSelected = await PageObjects.visualBuilder.checkSelectedMetricsGroupByValue( - 'Terms' - ); + const isTermsSelected = await visualBuilder.checkSelectedMetricsGroupByValue('Terms'); expect(isTermsSelected).to.be(true); log.debug('Go back in browser history'); await browser.goBack(); - await PageObjects.visualBuilder.checkSelectedMetricsGroupByValue('Everything'); - await PageObjects.visChart.waitForVisualizationRenderingStabilized(); - const legendItems2 = await PageObjects.visualBuilder.getLegendItemsContent(); + await visualBuilder.checkSelectedMetricsGroupByValue('Everything'); + await visChart.waitForVisualizationRenderingStabilized(); + const legendItems2 = await visualBuilder.getLegendItemsContent(); expect(legendItems2).to.eql(initialLegendItems); log.debug('Go forward twice in browser history'); await browser.goForward(); await browser.goForward(); - await PageObjects.visChart.waitForVisualizationRenderingStabilized(); - const legendItems3 = await PageObjects.visualBuilder.getLegendItemsContent(); + await visChart.waitForVisualizationRenderingStabilized(); + const legendItems3 = await visualBuilder.getLegendItemsContent(); expect(legendItems3).to.eql(finalLegendItems); }); }); diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts index 7018fd68971c54..40a70efd93efdd 100644 --- a/test/functional/page_objects/visual_builder_page.ts +++ b/test/functional/page_objects/visual_builder_page.ts @@ -349,15 +349,21 @@ export class VisualBuilderPageObject extends FtrService { } public async getGaugeLabel() { - const gaugeLabel = await this.find.byCssSelector('.tvbVisGauge__label'); + const gaugeLabel = await this.testSubjects.find('gaugeLabel'); return await gaugeLabel.getVisibleText(); } public async getGaugeCount() { - const gaugeCount = await this.find.byCssSelector('.tvbVisGauge__value'); + const gaugeCount = await this.testSubjects.find('gaugeValue'); return await gaugeCount.getVisibleText(); } + public async getGaugeColor(isInner = false): Promise { + await this.visChart.waitForVisualizationRenderingStabilized(); + const gaugeColoredCircle = await this.testSubjects.find(`gaugeCircle${isInner ? 'Inner' : ''}`); + return await gaugeColoredCircle.getAttribute('stroke'); + } + public async clickTopN() { await this.testSubjects.click('top_nTsvbTypeBtn'); } @@ -372,6 +378,12 @@ export class VisualBuilderPageObject extends FtrService { return await gaugeCount.getVisibleText(); } + public async getTopNBarStyle(nth: number = 0): Promise { + await this.visChart.waitForVisualizationRenderingStabilized(); + const topNBars = await this.testSubjects.findAll('topNInnerBar'); + return await topNBars[nth].getAttribute('style'); + } + public async clickTable() { await this.testSubjects.click('tableTsvbTypeBtn'); } @@ -557,8 +569,8 @@ export class VisualBuilderPageObject extends FtrService { return (await label.findAllByTestSubject('comboBoxInput'))[1]; } - public async clickColorPicker(): Promise { - const picker = await this.find.byCssSelector('.tvbColorPicker button'); + public async clickColorPicker(nth: number = 0): Promise { + const picker = (await this.find.allByCssSelector('.tvbColorPicker button'))[nth]; await picker.clickMouseButton(); } @@ -576,10 +588,10 @@ export class VisualBuilderPageObject extends FtrService { } public async setColorPickerValue(colorHex: string, nth: number = 0): Promise { - const picker = await this.find.allByCssSelector('.tvbColorPicker button'); - await picker[nth].clickMouseButton(); + await this.clickColorPicker(nth); await this.checkColorPickerPopUpIsPresent(); await this.find.setValue('.euiColorPicker input', colorHex); + await this.clickColorPicker(nth); await this.visChart.waitForVisualizationRenderingStabilized(); } @@ -607,7 +619,13 @@ export class VisualBuilderPageObject extends FtrService { public async getMetricValueStyle(): Promise { await this.visChart.waitForVisualizationRenderingStabilized(); - const metricValue = await this.find.byCssSelector('[data-test-subj="tsvbMetricValue"]'); + const metricValue = await this.testSubjects.find('tsvbMetricValue'); + return await metricValue.getAttribute('style'); + } + + public async getGaugeValueStyle(): Promise { + await this.visChart.waitForVisualizationRenderingStabilized(); + const metricValue = await this.testSubjects.find('gaugeValue'); return await metricValue.getAttribute('style'); }