Convert TraceStatisticsHeader to a functional component #3479

ConradKash · 2026-01-30T18:13:04Z

Which problem is this PR solving?

Fixes #3370

Description of the changes

Converts the TraceStatisticsHeader class component to a functional component using React hooks:

Converted class component to functional component using React hooks (useState, useEffect, useCallback, useMemo)
Added React.memo for performance optimization
Added comprehensive test suite using React Testing Library
Fixed a typo in variable naming (newWohleTable → newWholeTable)

How was this change tested?

I added TraceStatisticsHeader.test.js to test the logic of the page

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: ConradKash <[email protected]>

Copilot

Pull request overview

This pull request converts the TraceStatisticsHeader component from a React class component to a functional component using hooks, as part of the larger UI modernization effort (#2610).

Changes:

Converted class component to functional component with hooks (useState, useEffect, useCallback, useMemo)
Replaced lifecycle method (constructor) with useEffect hook for initialization
Added comprehensive test suite using React Testing Library
Refactored all class methods to useCallback hooks
Fixed typo in variable name (newWohleTable → newWholeTable)

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 7 comments.

File	Description
TraceStatisticsHeader.tsx	Converted from class to functional component with hooks; replaced state with useState, constructor initialization with useEffect, and methods with useCallback
TraceStatisticsHeader.test.js	New test file with comprehensive test coverage using React Testing Library instead of Enzyme

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.test.js

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.test.js

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

jkowall · 2026-01-30T18:50:24Z

@ConradKash please process the feedback accordingly, and sign the DCO. Read more in CONTRIBUTING.md.

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

…alculations Signed-off-by: ConradKash <[email protected]>

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

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

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.test.js

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

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

…k and update handler to use initialServiceName Signed-off-by: ConradKash <[email protected]>

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

graphite-app · 2026-01-31T20:46:56Z

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

-    this.clearValue = this.clearValue.bind(this);
-  }
+  // This ensures that the service name is only computed once on initial render
+  const initialServiceName = getServiceName();


Performance Issue: Unnecessary computation on every render

getServiceName() is called on every render of the component, but the value is only used in the useEffect which runs once due to the empty dependency array []. After the initial render, this computation is wasted.

The comment claims "This ensures that the service name is only computed once on initial render" but this is incorrect - it's computed on every render.

Fix:

const initialServiceName = useMemo(() => getServiceName(), []);

Or better yet, compute it inside the useEffect where it's actually used, eliminating the need for this variable entirely.

Suggested change

const initialServiceName = getServiceName();

const initialServiceName = useMemo(() => getServiceName(), []);

Spotted by Graphite Agent

Is this helpful? React 👍 or 👎 to let us know.

why is this resolved? The bot is right, and the comment is lying.

…aceStatisticsHeader.tsx Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: Kakuru Conrad Akankwasa <[email protected]>

…aceStatisticsHeader.test.js Co-authored-by: Copilot <[email protected]> Signed-off-by: Kakuru Conrad Akankwasa <[email protected]>

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

…ServiceName computation with useMemo Signed-off-by: ConradKash <[email protected]>

ConradKash · 2026-01-31T21:05:05Z

@ConradKash please process the feedback accordingly, and sign the DCO. Read more in CONTRIBUTING.md.

Hey @jkowall, I have finished setting PR to the standard kindly review.

yurishkuro

please address comments. Minimize the diff by avoiding unnecessary code moves.

yurishkuro · 2026-02-03T21:10:34Z

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

-
+  }, []);
+
+  const setValueNameSelector1 = useCallback(


setValueNameSelector1 was defined earlier in the code, why is it moved down? This increases the size of the diff, making it harder to review

yurishkuro · 2026-02-03T21:11:38Z

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx

+ *   @param {string} valueNameSelector1 - The primary value selector name.
+ *   @param {string | null} valueNameSelector2 - The optional secondary value selector name.
+ * @property {boolean} useOtelTerms - Flag to determine whether to use OpenTelemetry terminology in the UI.
+ */


documentation is useful but need to be inline, not as a separate block that will get out of sync with the actual definition

Modernizing the traceStatsticsHeader in addition adding tests

a0224b0

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

Copilot AI review requested due to automatic review settings January 30, 2026 18:13

ConradKash requested a review from a team as a code owner January 30, 2026 18:13

Copilot started reviewing on behalf of ConradKash January 30, 2026 18:13 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

github-actions bot added the waiting-for-author PR is waiting for author to respond to maintainer's comments label Jan 30, 2026

chore: add peer dependencies and update package-lock.json

bf2b7e9

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

ConradKash force-pushed the feature-update-trace-statistics-header branch from a8ab3fb to bf2b7e9 Compare January 30, 2026 19:18

github-actions bot removed the waiting-for-author PR is waiting for author to respond to maintainer's comments label Jan 30, 2026

wrapping these computations in useMemo hooks to avoid unnecessary rec…

f49a974

…alculations Signed-off-by: ConradKash <[email protected]>

Copilot AI review requested due to automatic review settings January 30, 2026 19:54

Copilot started reviewing on behalf of ConradKash January 30, 2026 19:54 View session

graphite-app bot reviewed Jan 30, 2026

View reviewed changes

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx Outdated Show resolved Hide resolved

Copilot AI reviewed Jan 30, 2026

View reviewed changes

ConradKash and others added 2 commits January 31, 2026 23:12

Removing the re-rendering when traces update

571ccb7

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

Merge branch 'main' into feature-update-trace-statistics-header

f4b224f

Copilot AI review requested due to automatic review settings January 31, 2026 20:22

Copilot started reviewing on behalf of ConradKash January 31, 2026 20:23 View session

Removing un necessary useMemo and also dependencies

4da7043

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

Copilot AI reviewed Jan 31, 2026

View reviewed changes

graphite-app bot reviewed Jan 31, 2026

View reviewed changes

packages/jaeger-ui/src/components/TracePage/TraceStatistics/TraceStatisticsHeader.tsx Outdated Show resolved Hide resolved

ConradKash added 2 commits January 31, 2026 23:33

Function wrapped with React.memo for performance optimization

fff223b

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

Enhance TraceStatisticsHeader: optimize getColorValue with useCallbac…

f364888

…k and update handler to use initialServiceName Signed-off-by: ConradKash <[email protected]>

Copilot AI review requested due to automatic review settings January 31, 2026 20:42

Copilot started reviewing on behalf of ConradKash January 31, 2026 20:43 View session

Copilot AI reviewed Jan 31, 2026

View reviewed changes

graphite-app bot reviewed Jan 31, 2026

View reviewed changes

Update packages/jaeger-ui/src/components/TracePage/TraceStatistics/Tr…

ff48083

…aceStatisticsHeader.tsx Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: Kakuru Conrad Akankwasa <[email protected]>

Copilot AI review requested due to automatic review settings January 31, 2026 20:50

Copilot started reviewing on behalf of ConradKash January 31, 2026 20:51 View session

Update packages/jaeger-ui/src/components/TracePage/TraceStatistics/Tr…

c1913d6

…aceStatisticsHeader.test.js Co-authored-by: Copilot <[email protected]> Signed-off-by: Kakuru Conrad Akankwasa <[email protected]>

Copilot AI reviewed Jan 31, 2026

View reviewed changes

Refactor TraceStatisticsHeader: streamline imports and adjust initial…

44893f4

…ServiceName computation with useMemo Signed-off-by: ConradKash <[email protected]>

yurishkuro changed the title ~~Feature update trace statistics header~~ Convert TraceStatisticsHeader to a functional component Feb 3, 2026

yurishkuro requested changes Feb 3, 2026

View reviewed changes

	const initialServiceName = getServiceName();
	const initialServiceName = useMemo(() => getServiceName(), []);

Convert TraceStatisticsHeader to a functional component #3479

Are you sure you want to change the base?

Convert TraceStatisticsHeader to a functional component #3479

Conversation

ConradKash commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Which problem is this PR solving?

Description of the changes

How was this change tested?

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jkowall commented Jan 30, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

graphite-app bot Jan 31, 2026

Choose a reason for hiding this comment

Uh oh!

yurishkuro Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ConradKash commented Jan 31, 2026

Uh oh!

yurishkuro left a comment

Choose a reason for hiding this comment

Uh oh!

yurishkuro Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

yurishkuro Feb 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ConradKash commented Jan 30, 2026 •

edited

Loading