added function to show full traceID in #2536

avinpy-255 · 2025-01-03T12:30:56Z

Which problem is this PR solving?

Resolves: [Feature]: UI configuration to display the entire trace ID #2092

Description of the changes

I've added a funtion to show the full trace ID in the trace details page

How was this change tested?

here is the screenshot of the function Full ID
after clicking the Full ID

Checklist

I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
I have signed all commits
I have added unit tests for the new functionality
I have run lint and test steps successfully
- for jaeger: make lint test
- for jaeger-ui: npm run lint and npm run test

Signed-off-by: Avinash <[email protected]>

codecov · 2025-01-03T12:34:22Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.61%. Comparing base (14837c3) to head (b82c9dc).
Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2536   +/-   ##
=======================================
  Coverage   96.61%   96.61%           
=======================================
  Files         255      256    +1     
  Lines        7745     7750    +5     
  Branches     1935     2003   +68     
=======================================
+ Hits         7483     7488    +5     
  Misses        262      262

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

MAX-786 · 2025-01-11T21:08:44Z

looks great ... but IMHO it takes extra space as it's showing the User same information as it's already available on top. what you can do is that make the shorten traceID clickable and then clicking on it would expand to show Full ID and again clicking on it would collapse it. This would also clean-up the UI and IMO would be a better UX design

avinpy-255 · 2025-01-13T12:18:39Z

looks great ... but IMHO it takes extra space as it's showing the User same information as it's already available on top. what you can do is that make the shorten traceID clickable and then clicking on it would expand to show Full ID and again clicking on it would collapse it. This would also clean-up the UI and IMO would be a better UX design

Thanks! I'll make TraceID clickable for better UX

Signed-off-by: Avinash <[email protected]>

avinpy-255 · 2025-01-13T14:25:21Z

Hey @MAX-786
As suggested, I've successfully updated the ui here is the example:
Screencast from 2025-01-13 19-53-13.webm

MAX-786 · 2025-01-13T15:23:45Z

@avinpy-255 Hi,
yepp, wait for the review from the maintainers.

yurishkuro · 2025-01-13T15:32:08Z

The original issue was asking for configuration to make the trace ID displayed in full. There is no configuration added in this PR. The configuration can be specifying the desired length from the ID to display, e.g. 32 would display full ID.

Signed-off-by: Avinash <[email protected]>

yurishkuro · 2025-01-18T01:05:52Z

packages/jaeger-ui/src/constants/default-config.tsx

@@ -20,6 +20,8 @@ import getVersion from '../utils/version/get-version';
 import { version } from '../../package.json';
 import { Config } from '../types/config';

+export const TraceIDLength = 7;


we don't use constants for anything else, just use the value directly

yurishkuro · 2025-01-18T01:06:07Z

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

@@ -149,7 +150,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
      return { ...rest, value: renderer(trace) };
    });

-  const traceShortID = trace.traceID.slice(0, 7);
+  const traceShortID = trace.traceID.slice(0, TraceIDLength);


add a test?

ok, I will add a test for tracIDlength

Signed-off-by: avinash <[email protected]>

yurishkuro

The new format should be applied consistently across the UI. I would recommend a dedicated component for trace ID display (I would also make it have a popup tooltip showing the full length string if the default max size is smaller)

yurishkuro · 2025-01-19T18:29:02Z

packages/jaeger-ui/src/types/config.tsx

@@ -135,6 +135,9 @@ export type Config = {
  // TODO when is it useful?
  scripts?: readonly TScript[];

+  // traceIDLength controls the length of the trace ID displayed in the UI.
+  traceIDLength?: number;


Suggested change

traceIDLength?: number;

traceIdDisplayLength?: number;

yurishkuro · 2025-01-19T18:29:55Z

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

@@ -149,7 +150,8 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
      return { ...rest, value: renderer(trace) };
    });

-  const traceShortID = trace.traceID.slice(0, 7);
+  const traceIDLength = getConfigValue('traceIDLength');
+  const traceShortID = trace.traceID.slice(0, traceIDLength);


This doesn't play nice with styling when very long.

I think the ID needs to be in smaller font.

Signed-off-by: Avinash <[email protected]>

yurishkuro · 2025-01-21T19:48:39Z

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

+  className?: string;
+};
+
+export function TraceIdDisplayLength({ traceId, className = '' }: Props) {


Suggested change

export function TraceIdDisplayLength({ traceId, className = '' }: Props) {

export function TraceId({ traceId, className = '' }: Props) {

"DisplayLength" is implementation detail irrelevant to the user.

Signed-off-by: Avinash <[email protected]>

yurishkuro · 2025-01-21T20:57:08Z

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

@@ -37,7 +37,7 @@ import { getTraceLinks } from '../../../model/link-patterns';
 import './TracePageHeader.css';
 import ExternalLinks from '../../common/ExternalLinks';
 import { getTargetEmptyOrBlank } from '../../../utils/config/get-target';
-import TraceIdDisplayLength from '../../common/TraceIdDisplayLength';
+import TraceId from '../../common/TraceIdDisplayLength';


Suggested change

import TraceId from '../../common/TraceIdDisplayLength';

import TraceId from '../../common/TraceId';

Signed-off-by: Avinash <[email protected]>

add showing full traceID function

cca635b

Signed-off-by: Avinash <[email protected]>

avinpy-255 requested a review from a team as a code owner January 3, 2025 12:30

avinpy-255 requested review from jkowall and removed request for a team January 3, 2025 12:30

avinpy-255 and others added 2 commits January 13, 2025 17:51

Merge branch 'jaegertracing:main' into fix-issue-2092

11c184c

updated UI look

23dd5f5

Signed-off-by: Avinash <[email protected]>

added configuration for displaying fulltraceID

6fc578b

Signed-off-by: Avinash <[email protected]>

yurishkuro reviewed Jan 18, 2025

View reviewed changes

avinpy-255 and others added 2 commits January 18, 2025 11:30

Merge branch 'jaegertracing:main' into fix-issue-2092

562d57d

changelog: Added traceIDLength config

af3ec46

Signed-off-by: avinash <[email protected]>

yurishkuro reviewed Jan 19, 2025

View reviewed changes

avinpy-255 and others added 2 commits January 20, 2025 20:43

Merge branch 'jaegertracing:main' into fix-issue-2092

d079810

added custom component for traceID display

6f4d449

Signed-off-by: Avinash <[email protected]>

yurishkuro reviewed Jan 21, 2025

View reviewed changes

avinpy-255 added 2 commits January 22, 2025 01:34

fix test.js

194edd9

Signed-off-by: Avinash <[email protected]>

changed the function name TraceID

a7bad6c

Signed-off-by: Avinash <[email protected]>

yurishkuro reviewed Jan 21, 2025

View reviewed changes

updated component name

b82c9dc

Signed-off-by: Avinash <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

added function to show full traceID in #2536

added function to show full traceID in #2536

avinpy-255 commented Jan 3, 2025

codecov bot commented Jan 3, 2025 •

edited

Loading

MAX-786 commented Jan 11, 2025

avinpy-255 commented Jan 13, 2025

avinpy-255 commented Jan 13, 2025

MAX-786 commented Jan 13, 2025

yurishkuro commented Jan 13, 2025

yurishkuro Jan 18, 2025

yurishkuro Jan 18, 2025

avinpy-255 Jan 18, 2025

yurishkuro left a comment

yurishkuro Jan 19, 2025

yurishkuro Jan 19, 2025

yurishkuro Jan 21, 2025

yurishkuro Jan 21, 2025

	export function TraceIdDisplayLength({ traceId, className = '' }: Props) {
	export function TraceId({ traceId, className = '' }: Props) {

	import TraceId from '../../common/TraceIdDisplayLength';
	import TraceId from '../../common/TraceId';

added function to show full traceID in #2536

Are you sure you want to change the base?

added function to show full traceID in #2536

Conversation

avinpy-255 commented Jan 3, 2025

Which problem is this PR solving?

Description of the changes

How was this change tested?

Checklist

codecov bot commented Jan 3, 2025 • edited Loading

Codecov Report

MAX-786 commented Jan 11, 2025

avinpy-255 commented Jan 13, 2025

avinpy-255 commented Jan 13, 2025

MAX-786 commented Jan 13, 2025

yurishkuro commented Jan 13, 2025

yurishkuro Jan 18, 2025

Choose a reason for hiding this comment

yurishkuro Jan 18, 2025

Choose a reason for hiding this comment

avinpy-255 Jan 18, 2025

Choose a reason for hiding this comment

yurishkuro left a comment

Choose a reason for hiding this comment

yurishkuro Jan 19, 2025

Choose a reason for hiding this comment

yurishkuro Jan 19, 2025

Choose a reason for hiding this comment

yurishkuro Jan 21, 2025

Choose a reason for hiding this comment

yurishkuro Jan 21, 2025

Choose a reason for hiding this comment

codecov bot commented Jan 3, 2025 •

edited

Loading