[8.8] [Infarstructure UI] Fix hosts view functional test (elastic#155772

) (elastic#156360) # Backport This will backport the following commits from `main` to `8.8`: - [[Infarstructure UI] Fix hosts view functional test (elastic#155772)](elastic#155772)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Carlos Crespo <crespocarlos@users.noreply.github.com>
kibanamachine · May 2, 2023 · 595cc3f · 595cc3f
1 parent 9988768
commit 595cc3f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 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
@@ -64,7 +64,7 @@ const CHARTS_IN_ORDER: Array<Pick<MetricChartProps, 'title' | 'type'> & { fullRo
 
 export const MetricsGrid = React.memo(() => {
  return (
- <EuiFlexGrid columns={2} gutterSize="s">
+ <EuiFlexGrid columns={2} gutterSize="s" data-test-subj="hostsView-metricChart">
  {CHARTS_IN_ORDER.map(({ fullRow, ...chartProp }) => (
  <EuiFlexItem key={chartProp.type} style={fullRow ? { gridColumn: '1/-1' } : {}}>
  <MetricChart breakdownSize={DEFAULT_BREAKDOWN_SIZE} {...chartProp} />

diff --git 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
@@ -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,48 +103,55 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
  return cellContent.getVisibleText();
  },
 
- async getMetricsTrendContainer() {
+ async getKPIContainer() {
  return testSubjects.find('hostsView-metricsTrend');
  },
 
  async getChartsContainer() {
  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() {
  const container = await this.getChartsContainer();
  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();
  },
  };
 }