From 5cee521dc9db734615500a877a29ee58faa809a3 Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Wed, 1 May 2024 09:20:37 +0100
Subject: [PATCH] Tempo: Use ellipsis when trace view header url is too long
 (#86417)

* Limit url length

* Update styles to use objects

* Update width

* Add url to tooltip
---
 .betterer.results                             |  8 +--
 .../TracePageHeader/TracePageHeader.tsx       | 68 +++++++++++--------
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index a9aa3e106a9..87778c24886 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -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"]
diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx
index a39672f9652..98fc73fa848 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx
@@ -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',
+    }),
   };
 };