+
{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');
}
|