From 55a0df9c5ef9a4627838fd3a6e7b1e516197a672 Mon Sep 17 00:00:00 2001
From: Sergi Romeu <sergi.romeu@elastic.co>
Date: Tue, 3 Dec 2024 18:34:22 +0100
Subject: [PATCH] [Infra] Add Flyout to table view in Infrastructure Inventory
 (#202646)

## Summary

Closes #201138

This PR adds a Flyout when clicking an item in the table view for the
Infrastructure Inventory, as we had it in the Map view but the table
view was missing.

### How to test
1. Start Kibana and fill it with data, `node scripts/synthtrace
infra_hosts_with_apm_hosts` can be used if you don't have data.
2. Navigate to Infrastructure Inventory
3. Change the view to table view
4. Click on an item, the flyout should appear

### Screenshots
Before|After
-|-

![image](https://github.com/user-attachments/assets/585a4036-364e-447c-9f27-130e594b7a69)|![image](https://github.com/user-attachments/assets/4fc42ee7-27ed-4035-b24d-6bcc305407e5)
---
 .../components/nodes_overview.tsx               | 12 ++++++++++++
 .../inventory_view/components/table_view.tsx    | 17 +++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx
index d42670f190fde..c2493df3a3968 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx
@@ -145,6 +145,18 @@ export const NodesOverview = ({
           currentTime={currentTime}
           onFilter={handleDrilldown}
         />
+        {nodeType === assetType && detailsItemId && (
+          <AssetDetailsFlyout
+            assetId={detailsItemId}
+            assetName={nodeName}
+            assetType={nodeType}
+            closeFlyout={closeFlyout}
+            currentTime={currentTime}
+            isAutoReloading={isAutoReloading}
+            options={options}
+            refreshInterval={refreshInterval}
+          />
+        )}
       </TableContainer>
     );
   }
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/table_view.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/table_view.tsx
index 182c74c124fd9..e41bf377e40e1 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/table_view.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/table_view.tsx
@@ -17,6 +17,7 @@ import { InfraWaffleMapNode, InfraWaffleMapOptions } from '../../../../common/in
 import { fieldToName } from '../lib/field_to_display_name';
 import { NodeContextMenu } from './waffle/node_context_menu';
 import { SnapshotNode, SnapshotNodePath } from '../../../../../common/http_api/snapshot_api';
+import { useAssetDetailsFlyoutState } from '../hooks/use_asset_details_flyout_url_state';
 
 interface Props {
   nodes: SnapshotNode[];
@@ -49,6 +50,16 @@ export const TableView = (props: Props) => {
   const { nodes, options, formatter, currentTime, nodeType } = props;
 
   const [openPopoverId, setOpenPopoverId] = useState<string | null>(null);
+  const [_, setFlyoutUrlState] = useAssetDetailsFlyoutState();
+  const isFlyoutMode = nodeType === 'host' || nodeType === 'container';
+
+  const toggleAssetPopover = (uniqueID: string, nodeId: string) => {
+    if (isFlyoutMode) {
+      setFlyoutUrlState({ detailsItemId: nodeId, assetType: nodeType });
+    } else {
+      setOpenPopoverId(uniqueID);
+    }
+  };
 
   const closePopover = () => setOpenPopoverId(null);
 
@@ -69,14 +80,14 @@ export const TableView = (props: Props) => {
           <EuiToolTip content={tooltipText}>
             <EuiButtonEmpty
               data-test-subj="infraColumnsButton"
-              onClick={() => setOpenPopoverId(uniqueID)}
+              onClick={() => toggleAssetPopover(uniqueID, item.node.id)}
             >
               {value}
             </EuiButtonEmpty>
           </EuiToolTip>
         );
 
-        return (
+        return !isFlyoutMode ? (
           <EuiPopover
             button={button}
             isOpen={openPopoverId === uniqueID}
@@ -91,6 +102,8 @@ export const TableView = (props: Props) => {
               options={options}
             />
           </EuiPopover>
+        ) : (
+          button
         );
       },
     },