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": [
[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.", "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"]
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/index.tsx:5381": [
[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 (
<header className={styles.header}>
<div className={styles.titleRow}>
@ -143,7 +152,7 @@ export const TracePageHeader = memo((props: TracePageHeaderProps) => {
</Tooltip>
)}
{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>
</Tooltip>
)}
@ -230,33 +239,34 @@ const getNewStyles = (theme: GrafanaTheme2) => {
lineHeight: '1em',
margin: '-0.5em 0.5em 0.75em 0.5em',
}),
tag: css`
margin: 0 0.5em 0 0;
`,
duration: css`
color: #aaa;
margin: 0 0.75em;
`,
timestamp: css`
vertical-align: middle;
`,
tagMeta: css`
margin: 0 0.75em;
vertical-align: text-top;
`,
url: css`
margin: -2.5px 0.3em;
height: 15px;
overflow: hidden;
word-break: break-all;
line-height: 20px;
`,
TracePageHeaderTraceId: css`
label: TracePageHeaderTraceId;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 30%;
display: inline-block;
`,
tag: css({
margin: '0 0.5em 0 0',
}),
duration: css({
color: '#aaa',
margin: '0 0.75em',
}),
timestamp: css({
verticalAlign: 'middle',
}),
tagMeta: css({
margin: '0 0.75em',
verticalAlign: 'text-top',
}),
url: css({
margin: '-2.5px 0.3em',
height: '15px',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '700px',
display: 'inline-block',
}),
TracePageHeaderTraceId: css({
label: 'TracePageHeaderTraceId',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
maxWidth: '30%',
display: 'inline-block',
}),
};
};