Add tooltip to session view details panel values (#130829) (#131425)

Co-authored-by: Kibana Machine <[email protected]> (cherry picked from commit 6d9a7ce) Co-authored-by: Jack <[email protected]>
elastic · May 3, 2022 · aaee452 · aaee452
1 parent 8737f32
commit aaee452
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 57 deletions.
diff --git a/x-pack/plugins/session_view/public/components/detail_panel_copy/index.tsx b/x-pack/plugins/session_view/public/components/detail_panel_copy/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { ReactNode } from 'react';
-import { EuiButtonIcon, EuiCopy } from '@elastic/eui';
+import { EuiButtonIcon, EuiCopy, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { DetailPanelListItem } from '../detail_panel_list_item';
 import { dataOrDash } from '../../utils/data_or_dash';
@@ -55,5 +55,11 @@ export const DetailPanelCopy = ({
     props.display = display;
   }
 
-  return <DetailPanelListItem {...props}>{children}</DetailPanelListItem>;
+  return (
+    <DetailPanelListItem {...props}>
+      <EuiToolTip position="top" content={dataOrDash(textToCopy)}>
+        <>{children}</>
+      </EuiToolTip>
+    </DetailPanelListItem>
+  );
 };
diff --git a/x-pack/plugins/session_view/public/components/detail_panel_list_item/index.tsx b/x-pack/plugins/session_view/public/components/detail_panel_list_item/index.tsx
@@ -27,7 +27,7 @@ interface EuiTextPropsCss extends EuiTextProps {
 export const DetailPanelListItem = ({
   children,
   copy,
-  display = 'flex',
+  display = 'grid',
 }: DetailPanelListItemDeps) => {
   const [isHovered, setIsHovered] = useState(false);
   const styles = useStyles({ display });

diff --git a/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts b/x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts
@@ -19,14 +19,21 @@ export const useStyles = ({ display }: StylesDeps) => {
   const cached = useMemo(() => {
     const item: CSSObject = {
       display,
-      alignItems: 'center',
+      alignContent: 'center',
       padding: `0px ${euiTheme.size.s} `,
       width: '100%',
       fontWeight: 'inherit',
       height: euiTheme.size.xl,
       lineHeight: euiTheme.size.l,
       letterSpacing: '0px',
       textAlign: 'left',
+
+      '& .euiToolTipAnchor': {
+        width: `calc(100% - ${euiTheme.size.xl})`,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+      },
     };
 
     const copiableItem: CSSObject = {

diff --git a/x-pack/plugins/session_view/public/components/detail_panel_process_tab/index.tsx b/x-pack/plugins/session_view/public/components/detail_panel_process_tab/index.tsx
@@ -99,11 +99,7 @@ export const DetailPanelProcessTab = ({ processDetail }: DetailPanelProcessTabDe
       },
       {
         title: <DetailPanelListItem>args</DetailPanelListItem>,
-        description: (
-          <DetailPanelCopy textToCopy={leaderArgs}>
-            <span css={styles.description}>{leaderArgs}</span>
-          </DetailPanelCopy>
-        ),
+        description: <DetailPanelCopy textToCopy={leaderArgs}>{leaderArgs}</DetailPanelCopy>,
       },
       {
         title: <DetailPanelListItem>interactive</DetailPanelListItem>,
@@ -137,19 +133,11 @@ export const DetailPanelProcessTab = ({ processDetail }: DetailPanelProcessTabDe
       },
       {
         title: <DetailPanelListItem>start</DetailPanelListItem>,
-        description: (
-          <DetailPanelCopy textToCopy={start}>
-            <span css={styles.description}>{dataOrDash(start)}</span>
-          </DetailPanelCopy>
-        ),
+        description: <DetailPanelCopy textToCopy={start}>{dataOrDash(start)}</DetailPanelCopy>,
       },
       {
         title: <DetailPanelListItem>end</DetailPanelListItem>,
-        description: (
-          <DetailPanelCopy textToCopy={end ?? ''}>
-            <span css={styles.description}>{dataOrDash(end)}</span>
-          </DetailPanelCopy>
-        ),
+        description: <DetailPanelCopy textToCopy={end ?? ''}>{dataOrDash(end)}</DetailPanelCopy>,
       },
       {
         title: <DetailPanelListItem>exit_code</DetailPanelListItem>,
@@ -164,17 +152,13 @@ export const DetailPanelProcessTab = ({ processDetail }: DetailPanelProcessTabDe
       {
         title: <DetailPanelListItem>user.name</DetailPanelListItem>,
         description: (
-          <DetailPanelCopy textToCopy={userName}>
-            <span css={styles.description}>{dataOrDash(userName)}</span>
-          </DetailPanelCopy>
+          <DetailPanelCopy textToCopy={userName}>{dataOrDash(userName)}</DetailPanelCopy>
         ),
       },
       {
         title: <DetailPanelListItem>group.name</DetailPanelListItem>,
         description: (
-          <DetailPanelCopy textToCopy={groupName}>
-            <span css={styles.description}>{dataOrDash(groupName)}</span>
-          </DetailPanelCopy>
+          <DetailPanelCopy textToCopy={groupName}>{dataOrDash(groupName)}</DetailPanelCopy>
         ),
       },
     ];
@@ -195,7 +179,7 @@ export const DetailPanelProcessTab = ({ processDetail }: DetailPanelProcessTabDe
           title: <DetailPanelListItem>entry_meta.source.ip</DetailPanelListItem>,
           description: (
             <DetailPanelCopy textToCopy={entryMetaSourceIp}>
-              <span css={styles.description}>{dataOrDash(entryMetaSourceIp)}</span>
+              {dataOrDash(entryMetaSourceIp)}
             </DetailPanelCopy>
           ),
         }
@@ -242,11 +226,7 @@ export const DetailPanelProcessTab = ({ processDetail }: DetailPanelProcessTabDe
           },
           {
             title: <DetailPanelListItem>args</DetailPanelListItem>,
-            description: (
-              <DetailPanelCopy textToCopy={processArgs}>
-                <span css={styles.description}>{processArgs}</span>
-              </DetailPanelCopy>
-            ),
+            description: <DetailPanelCopy textToCopy={processArgs}>{processArgs}</DetailPanelCopy>,
           },
           {
             title: <DetailPanelListItem>executable</DetailPanelListItem>,
@@ -258,7 +238,7 @@ export const DetailPanelProcessTab = ({ processDetail }: DetailPanelProcessTabDe
                 {executable.map((execTuple, idx) => {
                   const [exec, eventAction] = execTuple;
                   return (
-                    <div key={`executable-${idx}`} css={styles.description}>
+                    <div key={`executable-${idx}`} css={styles.ellipsis}>
                       <EuiTextColor color="subdued" css={styles.descriptionSemibold}>
                         {dataOrDash(exec)}
                       </EuiTextColor>
@@ -303,19 +283,11 @@ export const DetailPanelProcessTab = ({ processDetail }: DetailPanelProcessTabDe
           },
           {
             title: <DetailPanelListItem>start</DetailPanelListItem>,
-            description: (
-              <DetailPanelCopy textToCopy={start}>
-                <span css={styles.description}>{dataOrDash(start)}</span>
-              </DetailPanelCopy>
-            ),
+            description: <DetailPanelCopy textToCopy={start}>{dataOrDash(start)}</DetailPanelCopy>,
           },
           {
             title: <DetailPanelListItem>end</DetailPanelListItem>,
-            description: (
-              <DetailPanelCopy textToCopy={end}>
-                <span css={styles.description}>{dataOrDash(end)}</span>
-              </DetailPanelCopy>
-            ),
+            description: <DetailPanelCopy textToCopy={end}>{dataOrDash(end)}</DetailPanelCopy>,
           },
           {
             title: <DetailPanelListItem>exit_code</DetailPanelListItem>,
@@ -330,17 +302,13 @@ export const DetailPanelProcessTab = ({ processDetail }: DetailPanelProcessTabDe
           {
             title: <DetailPanelListItem>user.name</DetailPanelListItem>,
             description: (
-              <DetailPanelCopy textToCopy={userName}>
-                <span css={styles.description}>{dataOrDash(userName)}</span>
-              </DetailPanelCopy>
+              <DetailPanelCopy textToCopy={userName}>{dataOrDash(userName)}</DetailPanelCopy>
             ),
           },
           {
             title: <DetailPanelListItem>group.name</DetailPanelListItem>,
             description: (
-              <DetailPanelCopy textToCopy={groupName}>
-                <span css={styles.description}>{dataOrDash(groupName)}</span>
-              </DetailPanelCopy>
+              <DetailPanelCopy textToCopy={groupName}>{dataOrDash(groupName)}</DetailPanelCopy>
             ),
           },
         ]}

diff --git a/x-pack/plugins/session_view/public/components/detail_panel_process_tab/styles.ts b/x-pack/plugins/session_view/public/components/detail_panel_process_tab/styles.ts
@@ -13,15 +13,7 @@ export const useStyles = () => {
   const { euiTheme } = useEuiTheme();
 
   const cached = useMemo(() => {
-    const description: CSSObject = {
-      width: `calc(100% - ${euiTheme.size.xl})`,
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    };
-
     const descriptionSemibold: CSSObject = {
-      ...description,
       fontWeight: euiTheme.font.weight.medium,
     };
 
@@ -30,10 +22,15 @@ export const useStyles = () => {
       paddingLeft: euiTheme.size.xs,
     };
 
+    const ellipsis: CSSObject = {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    };
+
     return {
-      description,
       descriptionSemibold,
       executableAction,
+      ellipsis,
     };
   }, [euiTheme]);