[APM] Long service names are not being truncated (#80804) (#80962)

* truncate service names * using styled-components * reverting code * fixing unit test
elastic · Oct 19, 2020 · c7e46ec · c7e46ec
1 parent 8da06a4
commit c7e46ec
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 59 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx
@@ -53,6 +53,17 @@ const AppLink = styled(TransactionOverviewLink)`
   ${truncate('100%')};
 `;
 
+const ToolTipWrapper = styled.span`
+  width: 100%;
+  .apmServiceList__serviceNameTooltip {
+    width: 100%;
+    .apmServiceList__serviceNameContainer {
+      // removes 24px referent to the icon placed on the left side of the text.
+      width: calc(100% - 24px);
+    }
+  }
+`;
+
 export const SERVICE_COLUMNS: Array<ITableColumn<ServiceListItem>> = [
   {
     field: 'healthStatus',
@@ -77,24 +88,27 @@ export const SERVICE_COLUMNS: Array<ITableColumn<ServiceListItem>> = [
     width: '40%',
     sortable: true,
     render: (_, { serviceName, agentName }) => (
-      <EuiToolTip
-        delay="long"
-        content={formatString(serviceName)}
-        id="service-name-tooltip"
-      >
-        <EuiFlexGroup gutterSize="s" alignItems="center">
-          {agentName && (
-            <EuiFlexItem grow={false}>
-              <AgentIcon agentName={agentName} />
+      <ToolTipWrapper>
+        <EuiToolTip
+          delay="long"
+          content={formatString(serviceName)}
+          id="service-name-tooltip"
+          anchorClassName="apmServiceList__serviceNameTooltip"
+        >
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            {agentName && (
+              <EuiFlexItem grow={false}>
+                <AgentIcon agentName={agentName} />
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem className="apmServiceList__serviceNameContainer">
+              <AppLink serviceName={serviceName} className="eui-textTruncate">
+                {formatString(serviceName)}
+              </AppLink>
             </EuiFlexItem>
-          )}
-          <EuiFlexItem>
-            <AppLink serviceName={serviceName}>
-              {formatString(serviceName)}
-            </AppLink>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiToolTip>
+          </EuiFlexGroup>
+        </EuiToolTip>
+      </ToolTipWrapper>
     ),
   },
   {

diff --git a/...blic/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap b/...blic/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap