IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Tempo: Use ellipsis when trace view header url is too long (#86417)

Browse Source 
* Limit url length

* Update styles to use objects

* Update width

* Add url to tooltip
This commit is contained in:
Joey 2024-05-01 09:20:37 +01:00 committed by GitHub
parent 61f3d08c3f
commit 5cee521dc9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.betterer.results
View File

@ -3161,13 +3161,7 @@ exports[`better eslint`] = {
"public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx:5381": [ "public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"], [0, 0, 0, "Styles should be written using objects.", "2"]
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"],
[0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"]
], ],
"public/app/features/explore/TraceView/components/TracePageHeader/index.tsx:5381": [ "public/app/features/explore/TraceView/components/TracePageHeader/index.tsx:5381": [
[0, 0, 0, "Do not re-export imported variable (\`./TracePageHeader\`)", "0"] [0, 0, 0, "Do not re-export imported variable (\`./TracePageHeader\`)", "0"]

68
public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx
View File

@ -117,6 +117,15 @@ export const TracePageHeader = memo((props: TracePageHeaderProps) => {
} }
} }
const urlTooltip = (url: string) => {
return (
<>
<div>http.url or http.target or http.path</div>
<div>({url})</div>
</>
);
};
return ( return (
<header className={styles.header}> <header className={styles.header}>
<div className={styles.titleRow}> <div className={styles.titleRow}>
@ -143,7 +152,7 @@ export const TracePageHeader = memo((props: TracePageHeaderProps) => {
</Tooltip> </Tooltip>
)} )}
{url && url.length > 0 && ( {url && url.length > 0 && (
<Tooltip content={'http.url or http.target or http.path'} interactive={true}> <Tooltip content={urlTooltip(url[0].value)} interactive={true}>
<span className={styles.url}>{url[0].value}</span> <span className={styles.url}>{url[0].value}</span>
</Tooltip> </Tooltip>
)} )}
@ -230,33 +239,34 @@ const getNewStyles = (theme: GrafanaTheme2) => {
lineHeight: '1em', lineHeight: '1em',
margin: '-0.5em 0.5em 0.75em 0.5em', margin: '-0.5em 0.5em 0.75em 0.5em',
}), }),
tag: css` tag: css({
margin: 0 0.5em 0 0; margin: '0 0.5em 0 0',
`, }),
duration: css` duration: css({
color: #aaa; color: '#aaa',
margin: 0 0.75em; margin: '0 0.75em',
`, }),
timestamp: css` timestamp: css({
vertical-align: middle; verticalAlign: 'middle',
`, }),
tagMeta: css` tagMeta: css({
margin: 0 0.75em; margin: '0 0.75em',
vertical-align: text-top; verticalAlign: 'text-top',
`, }),
url: css` url: css({
margin: -2.5px 0.3em; margin: '-2.5px 0.3em',
height: 15px; height: '15px',
overflow: hidden; overflow: 'hidden',
word-break: break-all; textOverflow: 'ellipsis',
line-height: 20px; maxWidth: '700px',
`, display: 'inline-block',
TracePageHeaderTraceId: css` }),
label: TracePageHeaderTraceId; TracePageHeaderTraceId: css({
white-space: nowrap; label: 'TracePageHeaderTraceId',
text-overflow: ellipsis; whiteSpace: 'nowrap',
max-width: 30%; textOverflow: 'ellipsis',
display: inline-block; maxWidth: '30%',
`, display: 'inline-block',
}),
}; };
}; };