[SECURITY_SOLUTION] truncate Hostname and add tooltip in flyout (#84086)

* truncate Hostname and add tooltip in flyout * remove leading and trainling spaces
elastic · Nov 23, 2020 · 4837491 · 4837491
1 parent c45fe18
commit 4837491
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/...k/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx b/...k/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
@@ -14,6 +14,7 @@ import {
   EuiText,
   EuiSpacer,
   EuiEmptyPrompt,
+  EuiToolTip,
 } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -84,13 +85,20 @@ export const EndpointDetailsFlyout = memo(() => {
       size="s"
     >
       <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="s">
-          {loading ? (
-            <EuiLoadingContent lines={1} />
-          ) : (
-            <h2 data-test-subj="endpointDetailsFlyoutTitle"> {details?.host?.hostname} </h2>
-          )}
-        </EuiTitle>
+        {loading ? (
+          <EuiLoadingContent lines={1} />
+        ) : (
+          <EuiToolTip content={details?.host?.hostname} anchorClassName="eui-textTruncate">
+            <EuiTitle size="s">
+              <h2
+                style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
+                data-test-subj="endpointDetailsFlyoutTitle"
+              >
+                {details?.host?.hostname}
+              </h2>
+            </EuiTitle>
+          </EuiToolTip>
+        )}
       </EuiFlyoutHeader>
       {details === undefined ? (
         <>