[8.x] [Infra] Add Flyout to table view in Infrastructure Inventory (e…

…lastic#202646) (elastic#202781)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Infra] Add Flyout to table view in Infrastructure Inventory
(elastic#202646)](elastic#202646)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Sergi
Romeu","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-03T17:34:22Z","message":"[Infra]
Add Flyout to table view in Infrastructure Inventory (elastic#202646)\n\n##
Summary\n\nCloses elastic#201138 \n\nThis PR adds a Flyout when clicking an
item in the table view for the\nInfrastructure Inventory, as we had it
in the Map view but the table\nview was missing.\n\n### How to test\n1.
Start Kibana and fill it with data, `node
scripts/synthtrace\ninfra_hosts_with_apm_hosts` can be used if you don't
have data.\n2. Navigate to Infrastructure Inventory\n3. Change the view
to table view\n4. Click on an item, the flyout should appear\n\n###
Screenshots\nBefore|After\n-|-\n\n![image](https://github.com/user-attachments/assets/585a4036-364e-447c-9f27-130e594b7a69)|![image](https://github.com/user-attachments/assets/4fc42ee7-27ed-4035-b24d-6bcc305407e5)","sha":"55a0df9c5ef9a4627838fd3a6e7b1e516197a672","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services"],"title":"[Infra]
Add Flyout to table view in Infrastructure
Inventory","number":202646,"url":"https://github.com/elastic/kibana/pull/202646","mergeCommit":{"message":"[Infra]
Add Flyout to table view in Infrastructure Inventory (elastic#202646)\n\n##
Summary\n\nCloses elastic#201138 \n\nThis PR adds a Flyout when clicking an
item in the table view for the\nInfrastructure Inventory, as we had it
in the Map view but the table\nview was missing.\n\n### How to test\n1.
Start Kibana and fill it with data, `node
scripts/synthtrace\ninfra_hosts_with_apm_hosts` can be used if you don't
have data.\n2. Navigate to Infrastructure Inventory\n3. Change the view
to table view\n4. Click on an item, the flyout should appear\n\n###
Screenshots\nBefore|After\n-|-\n\n![image](https://github.com/user-attachments/assets/585a4036-364e-447c-9f27-130e594b7a69)|![image](https://github.com/user-attachments/assets/4fc42ee7-27ed-4035-b24d-6bcc305407e5)","sha":"55a0df9c5ef9a4627838fd3a6e7b1e516197a672"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202646","number":202646,"mergeCommit":{"message":"[Infra]
Add Flyout to table view in Infrastructure Inventory (elastic#202646)\n\n##
Summary\n\nCloses elastic#201138 \n\nThis PR adds a Flyout when clicking an
item in the table view for the\nInfrastructure Inventory, as we had it
in the Map view but the table\nview was missing.\n\n### How to test\n1.
Start Kibana and fill it with data, `node
scripts/synthtrace\ninfra_hosts_with_apm_hosts` can be used if you don't
have data.\n2. Navigate to Infrastructure Inventory\n3. Change the view
to table view\n4. Click on an item, the flyout should appear\n\n###
Screenshots\nBefore|After\n-|-\n\n![image](https://github.com/user-attachments/assets/585a4036-364e-447c-9f27-130e594b7a69)|![image](https://github.com/user-attachments/assets/4fc42ee7-27ed-4035-b24d-6bcc305407e5)","sha":"55a0df9c5ef9a4627838fd3a6e7b1e516197a672"}}]}]
BACKPORT-->

Co-authored-by: Sergi Romeu <[email protected]>

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