Add config option to allow displaying full traceID (#2536)

## Which problem is this PR solving? - Resolves: #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 ![Screenshot from 2025-01-03 18-00-08](https://github.com/user-attachments/assets/f3c414d2-7706-427e-94fc-0786c42b4d3d) - after clicking the Full ID ![Screenshot from 2025-01-03 17-59-45](https://github.com/user-attachments/assets/b7a50362-faba-407b-88f9-883cf7ae9e67) ## Checklist - [x] I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md - [x] I have signed all commits - [x] I have added unit tests for the new functionality - [x] 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]> Signed-off-by: avinash <[email protected]> Signed-off-by: Avinash Chowdhury <[email protected]> Signed-off-by: Yuri Shkuro <[email protected]> Co-authored-by: Yuri Shkuro <[email protected]>
jaegertracing · Feb 8, 2025 · dc4a95b · dc4a95b
1 parent e3776db
commit dc4a95b
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 9 deletions.
diff --git a/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.tsx b/packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.tsx
@@ -26,6 +26,7 @@ import { ApiError } from '../../../types/api-error';
 
 import './ResultItemTitle.css';
 import { getTargetEmptyOrBlank } from '../../../utils/config/get-target';
+import TraceId from '../../common/TraceId';
 
 type Props = {
   duration?: number;
@@ -107,7 +108,7 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
           {duration != null && <span className="ub-right ub-relative">{formatDuration(duration)}</span>}
           <h3 className="ResultItemTitle--title">
             <TraceName error={error} state={state} traceName={traceName} />
-            <small className="ResultItemTitle--idExcerpt">{traceID.slice(0, 7)}</small>
+            <TraceId traceId={traceID} className="ResultItemTitle--idExcerpt" />
           </h3>
         </WrapperComponent>
       </div>

diff --git a/...i/src/components/SearchTracePage/SearchResults/__snapshots__/ResultItemTitle.test.js.snap b/...i/src/components/SearchTracePage/SearchResults/__snapshots__/ResultItemTitle.test.js.snap
@@ -35,11 +35,10 @@ exports[`ResultItemTitle renders as expected 1`] = `
         state="FETCH_DONE"
         traceName="traceNameValue"
       />
-      <small
+      <TraceId
         className="ResultItemTitle--idExcerpt"
-      >
-        trace-i
-      </small>
+        traceId="trace-id-longer-than-8"
+      />
     </h3>
   </Link>
 </div>

diff --git a/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx b/packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx
@@ -23,6 +23,7 @@ import { formatDuration } from '../../../utils/date';
 
 import { FetchedState, TNil } from '../../../types';
 import { ApiError } from '../../../types/api-error';
+import TraceId from '../../common/TraceId';
 
 import './TraceHeader.css';
 
@@ -93,9 +94,7 @@ export default function TraceHeader({
           {traceID ? (
             <React.Fragment>
               <TraceName key="name" traceName={traceName} error={error} state={state} />{' '}
-              <small key="id" className="u-tx-muted ub-pr2">
-                {traceID.slice(0, 7)}
-              </small>
+              <TraceId key="id" traceId={traceID} className="ub-pr2" />
               <TraceTimelineLink traceID={traceID} />
             </React.Fragment>
           ) : (

diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx
@@ -37,6 +37,7 @@ import { getTraceLinks } from '../../../model/link-patterns';
 import './TracePageHeader.css';
 import ExternalLinks from '../../common/ExternalLinks';
 import { getTargetEmptyOrBlank } from '../../../utils/config/get-target';
+import TraceId from '../../common/TraceId';
 
 type TracePageHeaderEmbedProps = {
   canCollapse: boolean;
@@ -153,7 +154,7 @@ export function TracePageHeaderFn(props: TracePageHeaderEmbedProps & { forwarded
 
   const title = (
     <h1 className={`TracePageHeader--title ${canCollapse ? 'is-collapsible' : ''}`}>
-      <TraceName traceName={trace.traceName} /> <small className="u-tx-muted">{traceShortID}</small>
+      <TraceName traceName={trace.traceName} /> <TraceId traceId={trace.traceID} />
     </h1>
   );
 

diff --git a/packages/jaeger-ui/src/components/common/TraceId.css b/packages/jaeger-ui/src/components/common/TraceId.css
@@ -0,0 +1,28 @@
+/*
+Copyright (c) 2025 The Jaeger Authors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+.TraceIDLength {
+  display: inline-block;
+  vertical-align: middle;
+}
+.TraceIDLength--short {
+  font-size: 16px;
+  padding: 3px 4px;
+}
+.TraceIDLength--full {
+  font-size: 14px;
+  padding: 3px 4px;
+  letter-spacing: 0.1px;
+}
diff --git a/packages/jaeger-ui/src/components/common/TraceId.test.js b/packages/jaeger-ui/src/components/common/TraceId.test.js
@@ -0,0 +1,100 @@
+// Copyright (c) 2025 The Jaeger Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { TraceId } from './TraceId';
+import { getConfigValue } from '../../utils/config/get-config';
+
+jest.mock('../../utils/config/get-config', () => ({
+  getConfigValue: jest.fn(),
+}));
+
+describe('TraceIdDisplayLength', () => {
+  const DEFAULT_LENGTH = 7;
+  const MOCK_TRACE_ID = '12345678901234567890';
+  const CUSTOM_CLASS = 'custom-class';
+
+  let wrapper;
+
+  const defaultProps = {
+    traceId: MOCK_TRACE_ID,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const createWrapper = (props = {}) => {
+    return shallow(<TraceId {...defaultProps} {...props} />);
+  };
+
+  describe('TraceIdDisplayLength Component', () => {
+    it('renders the default traceIdLength 7', () => {
+      getConfigValue.mockReturnValue(undefined);
+      wrapper = createWrapper();
+
+      const displayedText = wrapper.text();
+      expect(displayedText).toEqual(MOCK_TRACE_ID.slice(0, DEFAULT_LENGTH));
+    });
+
+    it('renders the config length when provided', () => {
+      const configuredLength = 5;
+      getConfigValue.mockReturnValue(configuredLength);
+      wrapper = createWrapper();
+
+      const displayedText = wrapper.text();
+      expect(displayedText).toEqual(MOCK_TRACE_ID.slice(0, configuredLength));
+    });
+  });
+
+  describe('Edge case handling', () => {
+    it('renders the full traceId when it is shorter then configured length', () => {
+      const shortTraceId = '12345';
+      const configuredLength = 10;
+      getConfigValue.mockReturnValue(configuredLength);
+
+      wrapper = createWrapper({ traceId: shortTraceId });
+      expect(wrapper.text()).toEqual(shortTraceId);
+    });
+
+    it('renders when traceId is undefiend', () => {
+      wrapper = createWrapper({ traceId: '' });
+      expect(wrapper.text()).toEqual('');
+    });
+  });
+
+  describe('Style handling', () => {
+    it('applies custom className when provided', () => {
+      wrapper = createWrapper({ className: CUSTOM_CLASS });
+      expect(wrapper.hasClass(CUSTOM_CLASS)).toBe(true);
+    });
+
+    it('default classes for styling', () => {
+      wrapper = createWrapper();
+      expect(wrapper.hasClass('TraceIDLength')).toBe(true);
+      expect(wrapper.hasClass('u-tx-muted')).toBe(true);
+    });
+
+    it('adds a length-based class depending on the configuration', () => {
+      getConfigValue.mockReturnValue(DEFAULT_LENGTH);
+      wrapper = createWrapper();
+      expect(wrapper.hasClass('TraceIDLength--short')).toBe(true);
+
+      getConfigValue.mockReturnValue(32);
+      wrapper = createWrapper();
+      expect(wrapper.hasClass('TraceIDLength--full')).toBe(true);
+    });
+  });
+});
diff --git a/packages/jaeger-ui/src/components/common/TraceId.tsx b/packages/jaeger-ui/src/components/common/TraceId.tsx
@@ -0,0 +1,32 @@
+// Copyright (c) 2025 The Jaeger Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { getConfigValue } from '../../utils/config/get-config';
+import './TraceId.css';
+
+type Props = {
+  traceId: string;
+  className?: string;
+};
+
+export function TraceId({ traceId, className = '' }: Props) {
+  const traceIdDisplayLength = getConfigValue('traceIdDisplayLength') || 7;
+  const traceIdDisplay = traceId ? traceId.slice(0, traceIdDisplayLength) : '';
+  const lengthClass = traceIdDisplayLength === 7 ? 'TraceIDLength--short' : 'TraceIDLength--full';
+
+  return <small className={`TraceIDLength ${lengthClass} u-tx-muted  ${className} `}>{traceIdDisplay}</small>;
+}
+
+export default TraceId;
diff --git a/packages/jaeger-ui/src/constants/default-config.tsx b/packages/jaeger-ui/src/constants/default-config.tsx
@@ -77,6 +77,7 @@ const defaultConfig: Config = {
     },
     maxLimit: 1500,
   },
+  traceIdDisplayLength: 7,
   storageCapabilities: {
     archiveStorage: false,
   },

diff --git a/packages/jaeger-ui/src/types/config.tsx b/packages/jaeger-ui/src/types/config.tsx
@@ -135,6 +135,9 @@ export type Config = {
   // TODO when is it useful?
   scripts?: readonly TScript[];
 
+  // traceIdDisplayLength controls the length of the trace ID displayed in the UI.
+  traceIdDisplayLength?: number;
+
   // storage capabilities given by the query service.
   storageCapabilities?: StorageCapabilities;