github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Jack 2022-04-25 13:31:25 -04:00 • committed by GitHub
parent d5a84e1af8
commit 6d9a7ce4c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 35 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

10
x-pack/plugins/session_view/public/components/detail_panel_copy/index.tsx
View file

@ -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>
);
};

2
x-pack/plugins/session_view/public/components/detail_panel_list_item/index.tsx
View file

@ -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 });

9
x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts
View file

@ -19,7 +19,7 @@ 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',
@ -27,6 +27,13 @@ export const useStyles = ({ display }: StylesDeps) => {
lineHeight: euiTheme.size.l,
letterSpacing: '0px',
textAlign: 'left',
'& .euiToolTipAnchor': {
width: `calc(100% - ${euiTheme.size.xl})`,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
};
const copiableItem: CSSObject = {

56
x-pack/plugins/session_view/public/components/detail_panel_process_tab/index.tsx
View file

@ -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>
),
},
]}

15
x-pack/plugins/session_view/public/components/detail_panel_process_tab/styles.ts
View file

@ -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]);