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

closes #155429
closes #155293

## Summary

This PR fixes the hosts view functional test, stabilizing the flaky test
cases that started to fail after changes were made to the page

### How to test

- `yarn test:ftr:server --config
x-pack/test/functional/apps/infra/config.ts`
- `yarn test:ftr:runner --config
x-pack/test/functional/apps/infra/config.ts --include
x-pack/test/functional/apps/infra/hosts_view.ts`

---------

Co-authored-by: Kibana Machine <[email protected]>
(cherry picked from commit c466932)

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} />

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);
         });

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();
     },
   };
 }