[8.7] [Infrastructure UI] Fix inventory table pagination navigation (#153849) (#153920)

# Backport This will backport the following commits from `main` to `8.7`: - [[Infrastructure UI] Fix inventory table pagination navigation (#153849)](https://github.com/elastic/kibana/pull/153849)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
2025-04-24 09:48:58 -04:00 · 2023-03-29 11:24:21 +02:00 · 2023-03-29 11:24:21 +02:00 · da88da012d
commit da88da012d
parent 85a8f79b88
2 changed files with 40 additions and 56 deletions
--- a/x-pack/plugins/infra/public/apps/common_styles.ts
+++ b/x-pack/plugins/infra/public/apps/common_styles.ts
@ -7,8 +7,6 @@

 import { APP_WRAPPER_CLASS } from '@kbn/core/public';

-export const CONTAINER_CLASSNAME = 'infra-container-element';
-
 export const prepareMountElement = (element: HTMLElement, testSubject?: string) => {
  // Ensure all wrapping elements have the APP_WRAPPER_CLASS so that the KinanaPageTemplate works as expected
  element.classList.add(APP_WRAPPER_CLASS);
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/table_view.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/table_view.tsx
@ -9,7 +9,7 @@ import { EuiButtonEmpty, EuiInMemoryTable, EuiToolTip, EuiBasicTableColumn } fro
 import { i18n } from '@kbn/i18n';

 import { last, first } from 'lodash';
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
 import { EuiPopover } from '@elastic/eui';
 import { createWaffleMapNode } from '../lib/nodes_to_wafflemap';
 import { InfraWaffleMapNode, InfraWaffleMapOptions } from '../../../../lib/lib';
@ -17,7 +17,6 @@ import { fieldToName } from '../lib/field_to_display_name';
 import { NodeContextMenu } from './waffle/node_context_menu';
 import { InventoryItemType } from '../../../../../common/inventory_models/types';
 import { SnapshotNode, SnapshotNodePath } from '../../../../../common/http_api/snapshot_api';
-import { CONTAINER_CLASSNAME } from '../../../../apps/common_styles';

 interface Props {
  nodes: SnapshotNode[];
@ -28,6 +27,13 @@ interface Props {
  onFilter: (filter: string) => void;
 }

+const initialSorting = {
+  sort: {
+    field: 'value',
+    direction: 'desc',
+  },
+} as const;
+
 const getGroupPaths = (path: SnapshotNodePath[]) => {
  switch (path.length) {
    case 3:
@ -41,33 +47,10 @@ const getGroupPaths = (path: SnapshotNodePath[]) => {

 export const TableView = (props: Props) => {
  const { nodes, options, formatter, currentTime, nodeType } = props;
-  const [openPopovers, setOpenPopovers] = useState<string[]>([]);
-  const openPopoverFor = useCallback(
-    (id: string) => () => {
-      setOpenPopovers([...openPopovers, id]);
-    },
-    [openPopovers]
-  );

-  const closePopoverFor = useCallback(
-    (id: string) => () => {
-      if (openPopovers.includes(id)) {
-        setOpenPopovers(openPopovers.filter((subject) => subject !== id));
-      }
-    },
-    [openPopovers]
-  );
+  const [openPopoverId, setOpenPopoverId] = useState<string | null>(null);

-  useEffect(() => {
-    const el = document.getElementsByClassName(CONTAINER_CLASSNAME)[0];
-    if (el instanceof HTMLElement) {
-      if (openPopovers.length > 0) {
-        el.style.overflowY = 'hidden';
-      } else {
-        el.style.overflowY = 'auto';
-      }
-    }
-  }, [openPopovers]);
+  const closePopover = () => setOpenPopoverId(null);

  const columns: Array<EuiBasicTableColumn<typeof items[number]>> = [
    {
@ -84,15 +67,20 @@ export const TableView = (props: Props) => {
        const uniqueID = [...item.node.path.map((p) => p.value), item.node.name].join(':');
        const button = (
          <EuiToolTip content={tooltipText}>
-            <EuiButtonEmpty onClick={openPopoverFor(uniqueID)}>{value}</EuiButtonEmpty>
+            <EuiButtonEmpty
+              data-test-subj="infraColumnsButton"
+              onClick={() => setOpenPopoverId(uniqueID)}
+            >
+              {value}
+            </EuiButtonEmpty>
          </EuiToolTip>
        );

        return (
          <EuiPopover
            button={button}
-            isOpen={openPopovers.includes(uniqueID)}
-            closePopover={closePopoverFor(uniqueID)}
+            isOpen={openPopoverId === uniqueID}
+            closePopover={closePopover}
            anchorPosition="rightCenter"
          >
            <NodeContextMenu
@ -148,30 +136,28 @@ export const TableView = (props: Props) => {
    },
  ];

-  const items = nodes.map((node) => {
-    const name = last(node.path);
-    const metric = first(node.metrics);
-    return {
-      name: (name && name.label) || 'unknown',
-      ...getGroupPaths(node.path).reduce(
-        (acc, path, index) => ({
-          ...acc,
-          [`group_${index}`]: path.label,
-        }),
-        {}
-      ),
-      value: (metric && metric.value) || 0,
-      avg: (metric && metric.avg) || 0,
-      max: (metric && metric.max) || 0,
-      node: createWaffleMapNode(node),
-    };
-  });
-  const initialSorting = {
-    sort: {
-      field: 'value',
-      direction: 'desc',
-    },
-  } as const;
+  const items = useMemo(
+    () =>
+      nodes.map((node) => {
+        const name = last(node.path);
+        const metric = first(node.metrics);
+        return {
+          name: (name && name.label) || 'unknown',
+          ...getGroupPaths(node.path).reduce(
+            (acc, path, index) => ({
+              ...acc,
+              [`group_${index}`]: path.label,
+            }),
+            {}
+          ),
+          value: (metric && metric.value) || 0,
+          avg: (metric && metric.avg) || 0,
+          max: (metric && metric.max) || 0,
+          node: createWaffleMapNode(node),
+        };
+      }),
+    [nodes]
+  );

  return (
    <EuiInMemoryTable pagination={true} sorting={initialSorting} items={items} columns={columns} />