From ef53762b3e93833dbd6b04ea483694e10dafcd71 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Wed, 27 Nov 2024 20:32:41 +0100 Subject: [PATCH 1/2] Update Trace header styles --- .../TracePageHeader/AltViewOptions.tsx | 62 +++++++++---------- .../TracePageHeader/TracePageHeader.css | 6 ++ .../TracePageHeader/TracePageHeader.tsx | 4 +- .../src/components/common/TraceName.css | 7 +++ .../src/components/common/TraceName.tsx | 24 ++++++- 5 files changed, 67 insertions(+), 36 deletions(-) diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx index a486032729..100ac6664d 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx +++ b/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_ITEMS.filter(item => item.viewType !== viewType).map(item => ( - - handleSelectView(item.viewType)} role="button"> - {item.label} - - - ))} - - - Trace JSON + const menu = ( + + {MENU_ITEMS.filter(item => item.viewType !== viewType).map(item => ( + + handleSelectView(item.viewType)} role="button"> + {item.label} - - - Trace JSON (unadjusted) - - - - ); - }; + ))} + + + Trace JSON + + + + + Trace JSON (unadjusted) + + + + ); const currentItem = MENU_ITEMS.find(item => item.viewType === viewType); const dropdownText = currentItem ? currentItem.label : 'Alternate Views'; diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css index 194989365d..6cc9b3bd78 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.css +++ b/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; } diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx index 0fd861ef9f..eb210af830 100644 --- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx +++ b/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 = (

- {' '} + {' '} {trace.traceID.slice(0, 7)}

); diff --git a/packages/jaeger-ui/src/components/common/TraceName.css b/packages/jaeger-ui/src/components/common/TraceName.css index 403dd75098..c154b6fae5 100644 --- a/packages/jaeger-ui/src/components/common/TraceName.css +++ b/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; +} diff --git a/packages/jaeger-ui/src/components/common/TraceName.tsx b/packages/jaeger-ui/src/components/common/TraceName.tsx index 62c792e343..1b4abf0716 100644 --- a/packages/jaeger-ui/src/components/common/TraceName.tsx +++ b/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 ? ( + + ) : ( + + {text} + + ); }; 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 = ; + title = ; } 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>; } From ffc950016b9ed2a4050a6d79737ea78eda36ef67 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt <kshmidt@digma.ai> Date: Wed, 11 Dec 2024 12:54:44 +0100 Subject: [PATCH 2/2] Update snapshots --- .github/workflows/digma/push.yml | 6 ++-- .../__snapshots__/TraceName.test.js.snap | 35 ++++++++----------- 2 files changed, 18 insertions(+), 23 deletions(-) diff --git a/.github/workflows/digma/push.yml b/.github/workflows/digma/push.yml index f6848c5386..929915a1bf 100644 --- a/.github/workflows/digma/push.yml +++ b/.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' diff --git a/packages/jaeger-ui/src/components/common/__snapshots__/TraceName.test.js.snap b/packages/jaeger-ui/src/components/common/__snapshots__/TraceName.test.js.snap index f0e161602c..69ad136c73 100644 --- a/packages/jaeger-ui/src/components/common/__snapshots__/TraceName.test.js.snap +++ b/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> `;