[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 <crespocarlos@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2023-05-02 08:52:38 -04:00 · 2023-05-02 08:52:38 -04:00 · 595cc3fbd0
commit 595cc3fbd0
parent 99887680e2
3 changed files with 76 additions and 49 deletions
--- 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} />
--- 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);
        });
--- 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();
    },
  };
 }