[Infra] Add Flyout to table view in Infrastructure Inventory (elastic…

…#202646)

## Summary

Closes elastic#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)

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

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