Merge pull request elastic#148 from gayathrir1172/apm-truncate-issue-…

…112976 Apm truncate issue 112976
gayathrir1172 · Jan 3, 2022 · 35e5190 · 35e5190
2 parents 87f753d + 0a6b35b
commit 35e5190
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/x-pack/plugins/apm/public/components/shared/backend_link.tsx b/x-pack/plugins/apm/public/components/shared/backend_link.tsx
@@ -13,6 +13,7 @@ import { useApmRouter } from '../../hooks/use_apm_router';
 import { truncate } from '../../utils/style';
 import { ApmRoutes } from '../routing/apm_route_config';
 import { SpanIcon } from './span_icon';
+import { TruncateWithTooltip } from './truncate_with_tooltip';
 
 const StyledLink = euiStyled(EuiLink)`${truncate('100%')};`;
 
@@ -27,7 +28,7 @@ export function BackendLink({
   query,
   subtype,
   type,
-  onClick,
+  onClick
 }: BackendLinkProps) {
   const { link } = useApmRouter();
 
@@ -37,12 +38,14 @@ export function BackendLink({
         query,
       })}
       onClick={onClick}
-    >
+    > 
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
           <SpanIcon type={type} subtype={subtype} />
         </EuiFlexItem>
-        <EuiFlexItem>{query.backendName}</EuiFlexItem>
+        <EuiFlexItem>
+          <TruncateWithTooltip text={query.backendName} content={query.backendName} />
+        </EuiFlexItem>
       </EuiFlexGroup>
     </StyledLink>
   );

diff --git a/x-pack/plugins/apm/public/components/shared/service_link.tsx b/x-pack/plugins/apm/public/components/shared/service_link.tsx
@@ -14,6 +14,7 @@ import { useApmRouter } from '../../hooks/use_apm_router';
 import { AgentIcon } from './agent_icon';
 import { AgentName } from '../../../typings/es_schemas/ui/fields/agent';
 import { ApmRoutes } from '../routing/apm_route_config';
+import { TruncateWithTooltip } from './truncate_with_tooltip';
 
 const StyledLink = euiStyled(EuiLink)`${truncate('100%')};`;
 
@@ -42,7 +43,9 @@ export function ServiceLink({
         <EuiFlexItem grow={false}>
           <AgentIcon agentName={agentName} />
         </EuiFlexItem>
-        <EuiFlexItem>{serviceName}</EuiFlexItem>
+        <EuiFlexItem>
+          <TruncateWithTooltip text={serviceName} content={serviceName} />
+        </EuiFlexItem>
       </EuiFlexGroup>
     </StyledLink>
   );