Merge pull request #61 from digma-ai/fix/header-styles

Update Trace header styles

Author: kshmidt-digma

.github/workflows/digma/push.yml

@@ -2,7 +2,8 @@ name: Lint & test & build
 
 on:
   push:
-    branches: ['digma']
+    branches:
+      - 'digma'
     # Github Actions don't support YAML anchors yet, so we have to repeat
     # the paths-ignore in both push and pull_request events.
     # More info: https://github.com/actions/runner/issues/1182
@@ -14,7 +15,8 @@ on:
       - 'DCO'
       - 'LICENSE'
   pull_request:
-    branches: ['digma']
+    branches:
+      - 'digma'
     paths-ignore:
       - '.vscode/**'
       - '.prettierignore'

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

packages/jaeger-ui/src/components/common/__snapshots__/TraceName.test.js.snap

@@ -4,10 +4,9 @@ exports[`<TraceName> renders empty string error in error state 1`] = `
 <span
   className="TraceName is-error "
 >
-  <BreakableText
-    className="BreakableText"
+  <Title
+    breakable={true}
     text="Error: Unknown error"
-    wordRegexp={/\\\\W\\*\\\\w\\+\\\\W\\*/g}
   />
 </span>
 `;
@@ -16,10 +15,9 @@ exports[`<TraceName> renders error object in error state 1`] = `
 <span
   className="TraceName is-error "
 >
-  <BreakableText
-    className="BreakableText"
+  <Title
+    breakable={true}
     text="ERROR-OBJECT-MESSAGE"
-    wordRegexp={/\\\\W\\*\\\\w\\+\\\\W\\*/g}
   />
 </span>
 `;
@@ -28,10 +26,9 @@ exports[`<TraceName> renders error object with empty message in error state 1`]
 <span
   className="TraceName is-error "
 >
-  <BreakableText
-    className="BreakableText"
+  <Title
+    breakable={true}
     text="Error"
-    wordRegexp={/\\\\W\\*\\\\w\\+\\\\W\\*/g}
   />
 </span>
 `;
@@ -40,10 +37,9 @@ exports[`<TraceName> renders in error state 1`] = `
 <span
   className="TraceName is-error "
 >
-  <BreakableText
-    className="BreakableText"
+  <Title
+    breakable={true}
     text="TEST-ERROR-MESSAGE"
-    wordRegexp={/\\\\W\\*\\\\w\\+\\\\W\\*/g}
   />
 </span>
 `;
@@ -63,10 +59,9 @@ exports[`<TraceName> renders with className 1`] = `
 <span
   className="TraceName  TEST-CLASS-NAME"
 >
-  <BreakableText
-    className="BreakableText"
+  <Title
+    breakable={true}
     text="<trace-without-root-span>"
-    wordRegexp={/\\\\W\\*\\\\w\\+\\\\W\\*/g}
   />
 </span>
 `;
@@ -75,10 +70,9 @@ exports[`<TraceName> renders with default props 1`] = `
 <span
   className="TraceName  "
 >
-  <BreakableText
-    className="BreakableText"
+  <Title
+    breakable={true}
     text="<trace-without-root-span>"
-    wordRegexp={/\\\\W\\*\\\\w\\+\\\\W\\*/g}
   />
 </span>
 `;
@@ -87,10 +81,9 @@ exports[`<TraceName> renders with traceName 1`] = `
 <span
   className="TraceName  "
 >
-  <BreakableText
-    className="BreakableText"
+  <Title
+    breakable={true}
     text="TEST-TRACE-NAME"
-    wordRegexp={/\\\\W\\*\\\\w\\+\\\\W\\*/g}
   />
 </span>
 `;