From 2c9b3e9de15315f6a650d3c2a5dd323f8be39c85 Mon Sep 17 00:00:00 2001
From: Mykola Harmash <mykola.harmash@gmail.com>
Date: Mon, 24 Jun 2024 14:20:58 +0200
Subject: [PATCH] [APM] Disable popover for grouped edges in Service Map
 (#186597)

Closes https://github.com/elastic/sdh-apm/issues/1378
Closes https://github.com/elastic/kibana/issues/186101

## Summary

Looking at the code, it seems like use-case for showing popover on an
edge that leads into a grouped resources node was never supported, and
it's unclear what kind of content should be displayed in the popover in
that case.

So this change just prevents the crashing reported in SDH by disabling
popover on grouped edged. In case we want to support this use-case,
there should a product decision about the content to show in the
popover.

https://github.com/elastic/kibana/assets/793851/9a353843-fd70-4543-a0b3-2fb8293d497f

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit 17b010c603d3e364a75cba1472a7179dea647aa3)
---
 .../app/service_map/popover/index.tsx         | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx
index b2abed890ee35..a66f77909072d 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx
@@ -54,11 +54,15 @@ function getContentsComponent(
     return ResourceContents;
   }
 
-  if (isTraceExplorerEnabled && selectedElementData.source && selectedElementData.target) {
+  if (isTraceExplorerEnabled && selectedElementData.sourceData && selectedElementData.targetData) {
     return EdgeContents;
   }
 
-  return DependencyContents;
+  if (selectedElementData.label) {
+    return DependencyContents;
+  }
+
+  return null;
 }
 
 export interface ContentsProps {
@@ -100,7 +104,6 @@ export function Popover({ focusedServiceName, environment, kuery, start, end }:
   const x = box ? box.x1 + box.w / 2 : -10000;
   const y = box ? box.y1 + box.h / 2 : -10000;
 
-  const isOpen = !!selectedElement;
   const triggerStyle: CSSProperties = {
     background: 'transparent',
     height: renderedHeight,
@@ -177,6 +180,8 @@ export function Popover({ focusedServiceName, environment, kuery, start, end }:
 
   const ContentsComponent = getContentsComponent(selectedElementData, isTraceExplorerEnabled);
 
+  const isOpen = !!selectedElement && !!ContentsComponent;
+
   return (
     <EuiPopover
       anchorPosition={'upCenter'}
@@ -205,14 +210,16 @@ export function Popover({ focusedServiceName, environment, kuery, start, end }:
           </EuiTitle>
           <EuiHorizontalRule margin="xs" />
         </EuiFlexItem>
-        <ContentsComponent
-          onFocusClick={onFocusClick}
-          elementData={selectedElementData}
-          environment={environment}
-          kuery={kuery}
-          start={start}
-          end={end}
-        />
+        {ContentsComponent && (
+          <ContentsComponent
+            onFocusClick={onFocusClick}
+            elementData={selectedElementData}
+            environment={environment}
+            kuery={kuery}
+            start={start}
+            end={end}
+          />
+        )}
       </EuiFlexGroup>
     </EuiPopover>
   );