From 595cc3fbd07ffa6ddfe6540716a0fc46dc99d0eb Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 2 May 2023 08:52:38 -0400 Subject: [PATCH] [8.8] [Infarstructure UI] Fix hosts view functional test (#155772) (#156360) # Backport This will backport the following commits from `main` to `8.8`: - [[Infarstructure UI] Fix hosts view functional test (#155772)](https://github.com/elastic/kibana/pull/155772) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) Co-authored-by: Carlos Crespo --- .../components/tabs/metrics/metrics_grid.tsx | 2 +- .../test/functional/apps/infra/hosts_view.ts | 46 +++++++---- .../page_objects/infra_hosts_view.ts | 77 ++++++++++--------- 3 files changed, 76 insertions(+), 49 deletions(-) diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metrics_grid.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metrics_grid.tsx index 7f3dac7a3af163..b61ba46aa2c207 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metrics_grid.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metrics_grid.tsx @@ -64,7 +64,7 @@ const CHARTS_IN_ORDER: Array & { fullRo export const MetricsGrid = React.memo(() => { return ( - + {CHARTS_IN_ORDER.map(({ fullRow, ...chartProp }) => ( diff --git a/x-pack/test/functional/apps/infra/hosts_view.ts b/x-pack/test/functional/apps/infra/hosts_view.ts index e9000a9cf3e6db..a0b11335d9768a 100644 --- a/x-pack/test/functional/apps/infra/hosts_view.ts +++ b/x-pack/test/functional/apps/infra/hosts_view.ts @@ -149,9 +149,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { const enableHostView = () => pageObjects.infraHostsView.clickEnableHostViewButton(); // Tests - - // Failing: See https://github.com/elastic/kibana/issues/155429 - describe.skip('Hosts View', function () { + describe('Hosts View', function () { this.tags('includeFirefox'); before(async () => { @@ -328,6 +326,13 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { START_DATE.format(timepickerFormat), END_DATE.format(timepickerFormat) ); + + await retry.waitFor( + 'wait for table and KPI charts to load', + async () => + (await pageObjects.infraHostsView.isHostTableLoading()) && + (await pageObjects.infraHostsView.isKPIChartsLoaded()) + ); }); after(async () => { @@ -361,7 +366,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { describe('KPI tiles', () => { it('should render 5 metrics trend tiles', async () => { - const hosts = await pageObjects.infraHostsView.getAllMetricsTrendTiles(); + const hosts = await pageObjects.infraHostsView.getAllKPITiles(); expect(hosts.length).to.equal(5); }); @@ -373,15 +378,17 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { { metric: 'rx', value: 'N/A' }, ].forEach(({ metric, value }) => { it(`${metric} tile should show ${value}`, async () => { - const tileValue = await pageObjects.infraHostsView.getMetricsTrendTileValue(metric); - expect(tileValue).to.eql(value); + await retry.try(async () => { + const tileValue = await pageObjects.infraHostsView.getKPITileValue(metric); + expect(tileValue).to.eql(value); + }); }); }); }); describe('Metrics Tab', () => { before(async () => { - browser.scrollTop(); + await browser.scrollTop(); await pageObjects.infraHostsView.visitMetricsTab(); }); @@ -391,18 +398,18 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { }); it('should have an option to open the chart in lens', async () => { - await pageObjects.infraHostsView.getOpenInLensOption(); + await pageObjects.infraHostsView.clickAndValidateMetriChartActionOptions(); }); }); describe('Logs Tab', () => { before(async () => { - browser.scrollTop(); + await browser.scrollTop(); await pageObjects.infraHostsView.visitLogsTab(); }); it('should load the Logs tab section when clicking on it', async () => { - testSubjects.existOrFail('hostsView-logs'); + await testSubjects.existOrFail('hostsView-logs'); }); }); @@ -413,7 +420,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { const COLUMNS = 5; before(async () => { - browser.scrollTop(); + await browser.scrollTop(); await pageObjects.infraHostsView.visitAlertTab(); }); @@ -474,7 +481,14 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { const query = filtererEntries.map((entry) => `host.name :"${entry.title}"`).join(' or '); before(async () => { + await browser.scrollTop(); await pageObjects.infraHostsView.submitQuery(query); + await retry.waitFor( + 'wait for table and KPI charts to load', + async () => + (await pageObjects.infraHostsView.isHostTableLoading()) && + (await pageObjects.infraHostsView.isKPIChartsLoaded()) + ); }); after(async () => { @@ -502,8 +516,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { { metric: 'tx', value: 'N/A' }, { metric: 'rx', value: 'N/A' }, ].map(async ({ metric, value }) => { - const tileValue = await pageObjects.infraHostsView.getMetricsTrendTileValue(metric); - expect(tileValue).to.eql(value); + await retry.try(async () => { + const tileValue = await pageObjects.infraHostsView.getKPITileValue(metric); + expect(tileValue).to.eql(value); + }); }) ); }); @@ -531,6 +547,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => { }); describe('Pagination and Sorting', () => { + before(async () => { + await browser.scrollTop(); + }); + beforeEach(async () => { await pageObjects.infraHostsView.changePageSize(5); }); diff --git a/x-pack/test/functional/page_objects/infra_hosts_view.ts b/x-pack/test/functional/page_objects/infra_hosts_view.ts index 6478d208226ad8..6b0efc8ce0944b 100644 --- a/x-pack/test/functional/page_objects/infra_hosts_view.ts +++ b/x-pack/test/functional/page_objects/infra_hosts_view.ts @@ -73,8 +73,16 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { return await testSubjects.click('hostsView-enable-feature-button'); }, + async getHostsTable() { + return testSubjects.find('hostsView-table'); + }, + + async isHostTableLoading() { + return !(await testSubjects.exists('tbody[class*=euiBasicTableBodyLoading]')); + }, + async getHostsTableData() { - const table = await testSubjects.find('hostsView-table'); + const table = await this.getHostsTable(); return table.findAllByTestSubject('hostsView-tableRow'); }, @@ -95,7 +103,7 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { return cellContent.getVisibleText(); }, - async getMetricsTrendContainer() { + async getKPIContainer() { return testSubjects.find('hostsView-metricsTrend'); }, @@ -103,25 +111,14 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { return testSubjects.find('hostsView-metricChart'); }, - getMetricsTab() { + // MetricsTtab + async getMetricsTab() { return testSubjects.find('hostsView-tabs-metrics'); }, async visitMetricsTab() { const metricsTab = await this.getMetricsTab(); - metricsTab.click(); - }, - - async getAllMetricsTrendTiles() { - const container = await this.getMetricsTrendContainer(); - return container.findAllByCssSelector('[data-test-subj*="hostsView-metricsTrend-"]'); - }, - - async getMetricsTrendTileValue(type: string) { - const container = await this.getMetricsTrendContainer(); - const element = await container.findByTestSubject(`hostsView-metricsTrend-${type}`); - const div = await element.findByClassName('echMetricText__value'); - return await div.getAttribute('title'); + await metricsTab.click(); }, async getAllMetricsCharts() { @@ -129,14 +126,32 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { return container.findAllByCssSelector('[data-test-subj*="hostsView-metricChart-"]'); }, - async getOpenInLensOption() { - const metricCharts = await this.getAllMetricsCharts(); - const chart = metricCharts.at(-1)!; - await chart.moveMouseTo(); - const button = await testSubjects.findDescendant('embeddablePanelToggleMenuIcon', chart); + async clickAndValidateMetriChartActionOptions() { + const element = await testSubjects.find('hostsView-metricChart-diskIOWrite'); + await element.moveMouseTo(); + const button = await element.findByTestSubject('embeddablePanelToggleMenuIcon'); await button.click(); - await testSubjects.existOrFail('embeddablePanelContextMenuOpen'); - return testSubjects.existOrFail('embeddablePanelAction-openInLens'); + await testSubjects.existOrFail('embeddablePanelAction-openInLens'); + // forces the modal to close + await element.click(); + }, + + // KPIs + async isKPIChartsLoaded() { + return !(await testSubjects.exists( + '[data-test-subj=hostsView-metricsTrend] .echChartStatus[data-ech-render-complete=true]' + )); + }, + + async getAllKPITiles() { + const container = await this.getKPIContainer(); + return container.findAllByCssSelector('[data-test-subj*="hostsView-metricsTrend-"]'); + }, + + async getKPITileValue(type: string) { + const element = await testSubjects.find(`hostsView-metricsTrend-${type}`); + const div = await element.findByClassName('echMetricText__value'); + return await div.getAttribute('title'); }, // Flyout Tabs @@ -187,7 +202,7 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { async visitLogsTab() { const logsTab = await this.getLogsTab(); - logsTab.click(); + await logsTab.click(); }, async getLogEntries() { @@ -212,7 +227,7 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { async visitAlertTab() { const alertsTab = await this.getAlertsTab(); - alertsTab.click(); + await alertsTab.click(); }, setAlertStatusFilter(alertStatus?: AlertStatus) { @@ -232,22 +247,14 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { return testSubjects.find('queryInput'); }, - async clearQueryBar() { - const queryBar = await this.getQueryBar(); - - return queryBar.clearValueWithKeyboard(); - }, - async typeInQueryBar(query: string) { const queryBar = await this.getQueryBar(); - await queryBar.clearValueWithKeyboard(); return queryBar.type(query); }, async submitQuery(query: string) { await this.typeInQueryBar(query); - await testSubjects.click('querySubmitButton'); }, @@ -288,13 +295,13 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { async sortByDiskLatency() { const diskLatency = await this.getDiskLatencyHeader(); const button = await testSubjects.findDescendant('tableHeaderSortButton', diskLatency); - return button.click(); + await button.click(); }, async sortByTitle() { const titleHeader = await this.getTitleHeader(); const button = await testSubjects.findDescendant('tableHeaderSortButton', titleHeader); - return button.click(); + await button.click(); }, }; }