mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
Add data rendering count for visualisation (#28936)
* add RENDERING_COUNT_ATTRIBUTE * update tests with new wait for visualization * update 'tile map visualize app' tests with await and waitForVisualization * update tests with waitForVisualization * remove waitVisualisationLoaded * fix naming suggestion * remove redundant waiting in functional tests
This commit is contained in:
Dmitry Lemeshko
GitHub
parent
78107bb7b4
commit
cf386f1c7d
11 changed files with 60 additions and 38 deletions
|
|
@ -45,6 +45,7 @@ interface EmbeddedVisualizeHandlerParams extends VisualizeLoaderParams {
|
|||
|
||||
const RENDER_COMPLETE_EVENT = 'render_complete';
|
||||
const LOADING_ATTRIBUTE = 'data-loading';
|
||||
const RENDERING_COUNT_ATTRIBUTE = 'data-rendering-count';
|
||||
|
||||
/**
|
||||
* A handler to the embedded visualization. It offers several methods to interact
|
||||
|
|
@ -115,6 +116,7 @@ export class EmbeddedVisualizeHandler {
|
|||
});
|
||||
|
||||
element.setAttribute(LOADING_ATTRIBUTE, '');
|
||||
element.setAttribute(RENDERING_COUNT_ATTRIBUTE, '0');
|
||||
element.addEventListener('renderComplete', this.onRenderCompleteListener);
|
||||
|
||||
this.appState = appState;
|
||||
|
|
@ -307,9 +309,15 @@ export class EmbeddedVisualizeHandler {
|
|||
this.fetchAndRender(true);
|
||||
};
|
||||
|
||||
private incrementRenderingCount = () => {
|
||||
const renderingCount = Number(this.element.getAttribute(RENDERING_COUNT_ATTRIBUTE) || 0);
|
||||
this.element.setAttribute(RENDERING_COUNT_ATTRIBUTE, `${renderingCount + 1}`);
|
||||
};
|
||||
|
||||
private onRenderCompleteListener = () => {
|
||||
this.listeners.emit(RENDER_COMPLETE_EVENT);
|
||||
this.element.removeAttribute(LOADING_ATTRIBUTE);
|
||||
this.incrementRenderingCount();
|
||||
};
|
||||
|
||||
private onUiStateChange = () => {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
const browser = getService('browser');
|
||||
const kibanaServer = getService('kibanaServer');
|
||||
const filterBar = getService('filterBar');
|
||||
const PageObjects = getPageObjects(['common', 'discover', 'header']);
|
||||
const PageObjects = getPageObjects(['common', 'discover', 'header', 'visualize']);
|
||||
const defaultSettings = {
|
||||
'dateFormat:tz': 'UTC',
|
||||
defaultIndex: 'logstash-*',
|
||||
|
|
@ -141,14 +141,18 @@ export default function ({ getService, getPageObjects }) {
|
|||
|
||||
it('should modify the time range when a bar is clicked', async function () {
|
||||
await PageObjects.header.setAbsoluteRange(fromTime, toTime);
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
await PageObjects.discover.clickHistogramBar(0);
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
const actualTimeString = await PageObjects.header.getPrettyDuration();
|
||||
expect(actualTimeString).to.be('September 20th 2015, 00:00:00.000 to September 20th 2015, 03:00:00.000');
|
||||
});
|
||||
|
||||
it('should modify the time range when the histogram is brushed', async function () {
|
||||
await PageObjects.header.setAbsoluteRange(fromTime, toTime);
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
await PageObjects.discover.brushHistogram(0, 1);
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
const actualTimeString = await PageObjects.header.getPrettyDuration();
|
||||
expect(actualTimeString).to.be('September 19th 2015, 23:59:02.606 to September 20th 2015, 02:56:40.744');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -86,7 +86,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
// then increment the aggIndex for the next one we create
|
||||
aggIndex = aggIndex + 1;
|
||||
await PageObjects.visualize.clickGo();
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
const expectedChartValues = [935];
|
||||
await retry.try(async () => {
|
||||
const data = await PageObjects.visualize.getBarChartData('Speaking Parts');
|
||||
|
|
|
|||
|
|
@ -45,14 +45,12 @@ export default function ({ getService, getPageObjects }) {
|
|||
await PageObjects.visualize.selectField('@timestamp');
|
||||
// leaving Interval set to Auto
|
||||
await PageObjects.visualize.clickGo();
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
});
|
||||
|
||||
it('should save and load', async function () {
|
||||
await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
|
||||
await PageObjects.visualize.waitForVisualizationSavedToastGone();
|
||||
await PageObjects.visualize.loadSavedVisualization(vizName1);
|
||||
await PageObjects.header.waitUntilLoadingHasFinished();
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -146,9 +146,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
describe('disabled aggs', () => {
|
||||
before(async () => {
|
||||
await PageObjects.visualize.loadSavedVisualization(vizName1);
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
// sleep a bit before trying to get the pie chart data below
|
||||
await PageObjects.common.sleep(2000);
|
||||
await PageObjects.visualize.waitForRenderingCount();
|
||||
});
|
||||
|
||||
it('should show correct result with one agg disabled', async () => {
|
||||
|
|
@ -168,7 +166,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
|
||||
await PageObjects.visualize.waitForVisualizationSavedToastGone();
|
||||
await PageObjects.visualize.loadSavedVisualization(vizName1);
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
await PageObjects.visualize.waitForRenderingCount();
|
||||
|
||||
const expectedTableData = [ 'win 8', 'win xp', 'win 7', 'ios', 'osx' ];
|
||||
await pieChart.expectPieChartLabels(expectedTableData);
|
||||
|
|
@ -266,7 +264,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
await PageObjects.visualize.selectAggregation('Terms');
|
||||
await PageObjects.visualize.selectField('geo.src');
|
||||
await PageObjects.visualize.clickGo();
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
});
|
||||
|
||||
it ('shows correct split chart', async () => {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
describe('incomplete config', function describeIndexTests() {
|
||||
|
||||
before(async function () {
|
||||
browser.setWindowSize(1280, 1000);
|
||||
await browser.setWindowSize(1280, 1000);
|
||||
|
||||
const fromTime = '2015-09-19 06:31:44.000';
|
||||
const toTime = '2015-09-23 18:31:44.000';
|
||||
|
|
@ -60,7 +60,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
|
||||
describe('complete config', function describeIndexTests() {
|
||||
before(async function () {
|
||||
browser.setWindowSize(1280, 1000);
|
||||
await browser.setWindowSize(1280, 1000);
|
||||
|
||||
const fromTime = '2015-09-19 06:31:44.000';
|
||||
const toTime = '2015-09-23 18:31:44.000';
|
||||
|
|
@ -224,7 +224,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
const toastDefaultLife = 6000;
|
||||
|
||||
before(async function () {
|
||||
browser.setWindowSize(1280, 1000);
|
||||
await browser.setWindowSize(1280, 1000);
|
||||
|
||||
log.debug('navigateToApp visualize');
|
||||
await PageObjects.visualize.navigateToNewVisualization();
|
||||
|
|
@ -243,7 +243,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
});
|
||||
|
||||
beforeEach(async function () {
|
||||
await PageObjects.common.sleep(2000);
|
||||
await PageObjects.visualize.clickMapZoomIn(waitForLoading);
|
||||
});
|
||||
|
||||
|
|
@ -256,25 +255,24 @@ export default function ({ getService, getPageObjects }) {
|
|||
|
||||
it('should show warning at zoom 10',
|
||||
async () => {
|
||||
testSubjects.existOrFail('maxZoomWarning');
|
||||
await testSubjects.existOrFail('maxZoomWarning');
|
||||
});
|
||||
|
||||
it('should continue providing zoom warning if left alone',
|
||||
async () => {
|
||||
testSubjects.existOrFail('maxZoomWarning');
|
||||
await testSubjects.existOrFail('maxZoomWarning');
|
||||
});
|
||||
|
||||
it('should suppress zoom warning if suppress warnings button clicked',
|
||||
async () => {
|
||||
last = true;
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
await find.clickByCssSelector('[data-test-subj="suppressZoomWarnings"]');
|
||||
|
||||
await PageObjects.common.sleep(toastDefaultLife + 2000);
|
||||
await PageObjects.visualize.clickMapZoomOut(waitForLoading);
|
||||
await PageObjects.common.sleep(1000);
|
||||
await testSubjects.waitForDeleted('suppressZoomWarnings');
|
||||
await PageObjects.visualize.clickMapZoomIn(waitForLoading);
|
||||
|
||||
testSubjects.missingOrFail('maxZoomWarning');
|
||||
await testSubjects.missingOrFail('maxZoomWarning');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -96,6 +96,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
|
||||
it('should show correct data', async function () {
|
||||
const expectedMetricValue = '156';
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
const value = await PageObjects.visualBuilder.getMetricValue();
|
||||
log.debug(`metric value: ${value}`);
|
||||
expect(value).to.eql(expectedMetricValue);
|
||||
|
|
@ -113,6 +114,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
|
||||
it('should verify gauge label and count display', async function () {
|
||||
await retry.try(async () => {
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
const labelString = await PageObjects.visualBuilder.getGaugeLabel();
|
||||
expect(labelString).to.be('Count');
|
||||
const gaugeCount = await PageObjects.visualBuilder.getGaugeCount();
|
||||
|
|
@ -130,6 +132,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
});
|
||||
|
||||
it('should verify topN label and count display', async function () {
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
const labelString = await PageObjects.visualBuilder.getTopNLabel();
|
||||
expect(labelString).to.be('Count');
|
||||
const gaugeCount = await PageObjects.visualBuilder.getTopNCount();
|
||||
|
|
|
|||
|
|
@ -46,8 +46,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
await PageObjects.visualize.selectField('@timestamp');
|
||||
// leaving Interval set to Auto
|
||||
await PageObjects.visualize.clickGo();
|
||||
await PageObjects.header.waitUntilLoadingHasFinished();
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -57,7 +55,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
|
||||
await PageObjects.visualize.waitForVisualizationSavedToastGone();
|
||||
await PageObjects.visualize.loadSavedVisualization(vizName1);
|
||||
await PageObjects.header.waitUntilLoadingHasFinished();
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -43,8 +43,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
await PageObjects.visualize.selectField('@timestamp');
|
||||
await PageObjects.visualize.setCustomInterval('3h');
|
||||
await PageObjects.visualize.clickGo();
|
||||
await PageObjects.header.waitUntilLoadingHasFinished();
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -54,7 +52,6 @@ export default function ({ getService, getPageObjects }) {
|
|||
await PageObjects.visualize.saveVisualizationExpectSuccessAndBreadcrumb(vizName1);
|
||||
await PageObjects.visualize.waitForVisualizationSavedToastGone();
|
||||
await PageObjects.visualize.loadSavedVisualization(vizName1);
|
||||
await PageObjects.header.waitUntilLoadingHasFinished();
|
||||
await PageObjects.visualize.waitForVisualization();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -109,25 +109,17 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
|
|||
await testSubjects.click('discoverOpenButton');
|
||||
}
|
||||
|
||||
async waitVisualisationLoaded() {
|
||||
await testSubjects.waitForAttributeToChange('visualizationLoader', 'data-render-complete', 'true');
|
||||
}
|
||||
|
||||
async clickHistogramBar(i) {
|
||||
await this.waitVisualisationLoaded();
|
||||
const bars = await find.allByCssSelector(`.series.histogram rect`);
|
||||
await bars[i].click();
|
||||
await this.waitVisualisationLoaded();
|
||||
}
|
||||
|
||||
async brushHistogram(from, to) {
|
||||
await this.waitVisualisationLoaded();
|
||||
const bars = await find.allByCssSelector('.series.histogram rect');
|
||||
await browser.dragAndDrop(
|
||||
{ element: bars[from], xOffset: 0, yOffset: -5 },
|
||||
{ element: bars[to], xOffset: 0, yOffset: -5 }
|
||||
);
|
||||
await this.waitVisualisationLoaded();
|
||||
}
|
||||
|
||||
async getCurrentQueryName() {
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
const find = getService('find');
|
||||
const log = getService('log');
|
||||
const inspector = getService('inspector');
|
||||
const renderable = getService('renderable');
|
||||
const table = getService('table');
|
||||
const globalNav = getService('globalNav');
|
||||
const PageObjects = getPageObjects(['common', 'header']);
|
||||
|
|
@ -131,6 +130,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
}
|
||||
|
||||
async getTextTag() {
|
||||
await this.waitForVisualization();
|
||||
const elements = await find.allByCssSelector('text');
|
||||
return await Promise.all(elements.map(async element => await element.getVisibleText()));
|
||||
}
|
||||
|
|
@ -563,15 +563,15 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
}
|
||||
|
||||
async clickGo() {
|
||||
const prevRenderingCount = await this.getVisualizationRenderingCount();
|
||||
log.debug(`Before Rendering count ${prevRenderingCount}`);
|
||||
await testSubjects.clickWhenNotDisabled('visualizeEditorRenderButton');
|
||||
await PageObjects.header.waitUntilLoadingHasFinished();
|
||||
// For some reason there are two `data-render-complete` tags on each visualization in the visualize page.
|
||||
const countOfDataCompleteFlags = 2;
|
||||
await renderable.waitForRender(countOfDataCompleteFlags);
|
||||
await this.waitForRenderingCount(prevRenderingCount);
|
||||
}
|
||||
|
||||
async clickReset() {
|
||||
await testSubjects.click('visualizeEditorResetButton');
|
||||
await this.waitForVisualization();
|
||||
}
|
||||
|
||||
async toggleAutoMode() {
|
||||
|
|
@ -925,7 +925,33 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
await find.clickByCssSelector('div.schemaEditors > div > div > button:nth-child(2)');
|
||||
}
|
||||
|
||||
async getVisualizationRenderingCount() {
|
||||
const visualizationLoader = await testSubjects.find('visualizationLoader');
|
||||
const renderingCount = await visualizationLoader.getAttribute('data-rendering-count');
|
||||
return Number(renderingCount);
|
||||
}
|
||||
|
||||
async waitForRenderingCount(previousCount = 0, increment = 1) {
|
||||
await retry.try(async () => {
|
||||
const currentRenderingCount = await this.getVisualizationRenderingCount();
|
||||
log.debug(`Readed rendering count ${previousCount} ${currentRenderingCount}`);
|
||||
expect(currentRenderingCount).to.be(previousCount + increment);
|
||||
});
|
||||
}
|
||||
|
||||
async waitForVisualizationRenderingStabilized() {
|
||||
//assuming rendering is done when data-rendering-count is constant within 1000 ms
|
||||
await retry.try(async () => {
|
||||
const previousCount = await this.getVisualizationRenderingCount();
|
||||
await PageObjects.common.sleep(1000);
|
||||
const currentCount = await this.getVisualizationRenderingCount();
|
||||
log.debug(`Readed rendering count ${previousCount} ${currentCount}`);
|
||||
expect(currentCount).to.be(previousCount);
|
||||
});
|
||||
}
|
||||
|
||||
async waitForVisualization() {
|
||||
await this.waitForVisualizationRenderingStabilized();
|
||||
return await find.byCssSelector('.visualization');
|
||||
}
|
||||
|
||||
|
|
@ -1042,10 +1068,12 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
}
|
||||
|
||||
async openLegendOptionColors(name) {
|
||||
await this.waitForVisualizationRenderingStabilized();
|
||||
await retry.try(async () => {
|
||||
// This click has been flaky in opening the legend, hence the retry. See
|
||||
// https://github.com/elastic/kibana/issues/17468
|
||||
await testSubjects.click(`legend-${name}`);
|
||||
await this.waitForVisualizationRenderingStabilized();
|
||||
// arbitrary color chosen, any available would do
|
||||
const isOpen = await this.doesLegendColorChoiceExist('#EF843C');
|
||||
if (!isOpen) {
|
||||
|
|
@ -1077,6 +1105,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
await this.toggleLegend();
|
||||
await testSubjects.click(`legend-${name}`);
|
||||
await testSubjects.click(`legend-${name}-filterIn`);
|
||||
await this.waitForVisualizationRenderingStabilized();
|
||||
}
|
||||
|
||||
async doesLegendColorChoiceExist(color) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue