Update Trace header styles

Author: kshmidt-digma

packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx

@@ -71,41 +71,39 @@ export default function AltViewOptions(props: Props) {
     onTraceViewChange(item);
   };
 
-  const menu = () => {
-    const baseUrl = window.baseUrl ?? window.apiBaseUrl;
+  const baseUrl = window.baseUrl ?? window.apiBaseUrl;
 
-    return (
-      <Menu>
-        {MENU_ITEMS.filter(item => item.viewType !== viewType).map(item => (
-          <Menu.Item key={item.viewType}>
-            <a onClick={() => handleSelectView(item.viewType)} role="button">
-              {item.label}
-            </a>
-          </Menu.Item>
-        ))}
-        <Menu.Item>
-          <a
-            href={`${baseUrl}/api/traces/${traceID}?prettyPrint=true`}
-            rel="noopener noreferrer"
-            target="_blank"
-            onClick={trackJsonView}
-          >
-            Trace JSON
+  const menu = (
+    <Menu>
+      {MENU_ITEMS.filter(item => item.viewType !== viewType).map(item => (
+        <Menu.Item key={item.viewType}>
+          <a onClick={() => handleSelectView(item.viewType)} role="button">
+            {item.label}
           </a>
         </Menu.Item>
-        <Menu.Item>
-          <a
-            href={`${baseUrl}/api/traces/${traceID}?raw=true&prettyPrint=true`}
-            rel="noopener noreferrer"
-            target="_blank"
-            onClick={trackRawJsonView}
-          >
-            Trace JSON (unadjusted)
-          </a>
-        </Menu.Item>
-      </Menu>
-    );
-  };
+      ))}
+      <Menu.Item>
+        <a
+          href={`${baseUrl}/api/traces/${traceID}?prettyPrint=true`}
+          rel="noopener noreferrer"
+          target="_blank"
+          onClick={trackJsonView}
+        >
+          Trace JSON
+        </a>
+      </Menu.Item>
+      <Menu.Item>
+        <a
+          href={`${baseUrl}/api/traces/${traceID}?raw=true&prettyPrint=true`}
+          rel="noopener noreferrer"
+          target="_blank"
+          onClick={trackRawJsonView}
+        >
+          Trace JSON (unadjusted)
+        </a>
+      </Menu.Item>
+    </Menu>
+  );
 
   const currentItem = MENU_ITEMS.find(item => item.viewType === viewType);
   const dropdownText = currentItem ? currentItem.label : 'Alternate Views';

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css

@@ -58,6 +58,8 @@ limitations under the License.
   color: var(--tx-color-title);
   display: flex;
   flex: 1;
+  min-width: 120px;
+  overflow: hidden;
 }
 
 .TracePageHeader--titleLink:hover * {
@@ -85,6 +87,9 @@ limitations under the License.
   line-height: 1em;
   margin: 0 0 0 0.5em;
   padding: 0.5em 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .TracePageHeader--title.is-collapsible {
@@ -110,5 +115,6 @@ limitations under the License.
 }
 
 .TracePageHeader--zoomControls {
+  flex-shrink: 0;
   margin-left: 0.5em;
 }

packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx

@@ -151,9 +151,11 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
       return { ...rest, value: renderer(trace) };
     });
 
+  const traceName = getTraceName(trace.spans);
+
   const title = (
     <h1 className={`TracePageHeader--title ${canCollapse ? 'is-collapsible' : ''}`}>
-      <TraceName traceName={getTraceName(trace.spans)} />{' '}
+      <TraceName traceName={traceName} breakable={false} />{' '}
       <small className="u-tx-muted">{trace.traceID.slice(0, 7)}</small>
     </h1>
   );

packages/jaeger-ui/src/components/common/TraceName.css

@@ -17,3 +17,10 @@ limitations under the License.
 .TraceName.is-error {
   color: #c00;
 }
+
+.TraceName .TraceName--name {
+  display: block;
+  padding-bottom: 0.2em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

packages/jaeger-ui/src/components/common/TraceName.tsx

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import * as React from 'react';
+import { Tooltip } from 'antd';
 
 import BreakableText from './BreakableText';
 import LoadingIndicator from './LoadingIndicator';
@@ -23,15 +24,32 @@ import { ApiError } from '../../types/api-error';
 
 import './TraceName.css';
 
+type TitleProps = {
+  text: string;
+  breakable: boolean;
+};
+
 type Props = {
   className?: string;
   error?: ApiError | TNil;
   state?: FetchedState | TNil;
   traceName?: string | TNil;
+  breakable?: boolean;
+};
+
+const Title = (props: TitleProps) => {
+  const { text, breakable } = props;
+  return breakable ? (
+    <BreakableText text={text} />
+  ) : (
+    <Tooltip title={text} placement="bottom">
+      <span className="TraceName--name">{text}</span>
+    </Tooltip>
+  );
 };
 
 export default function TraceName(props: Props) {
-  const { className, error, state, traceName } = props;
+  const { className, error, state, traceName, breakable = true } = props;
   const isErred = state === fetchedState.ERROR;
   let title: string | React.ReactNode = traceName || FALLBACK_TRACE_NAME;
   let errorCssClass = '';
@@ -45,12 +63,12 @@ export default function TraceName(props: Props) {
       titleStr = 'Error: Unknown error';
     }
     title = titleStr;
-    title = <BreakableText text={titleStr} />;
+    title = <Title text={titleStr} breakable={breakable} />;
   } else if (state === fetchedState.LOADING) {
     title = <LoadingIndicator small />;
   } else {
     const text: string = String(traceName || FALLBACK_TRACE_NAME);
-    title = <BreakableText text={text} />;
+    title = <Title text={text} breakable={breakable} />;
   }
   return <span className={`TraceName ${errorCssClass} ${className || ''}`}>{title}</span>;
 }