fix: Use compact duration format consistently across UI#3846
Merged
Conversation
Replace formatDuration with formatDurationCompact for all standalone latency displays: span bar labels, tick labels, scatter plot Y-axis, trace header, trace diff header/table, and span detail duration. Reserve formatDuration for relative offset comparisons (event timestamps, relative start times) where sub-millisecond differences are meaningful. Adds usage guidance to both function docstrings. Co-Authored-By: Claude Sonnet 4.6 <[email protected]> Signed-off-by: Yuri Shkuro <[email protected]>
yurishkuro
added
the
changelog:bugfix-or-minor-feature
Contributor
There was a problem hiding this comment.
Pull request overview
This PR standardizes duration/latency formatting across Jaeger UI by using formatDurationCompact for standalone duration displays (improving readability and consistency), while retaining formatDuration for relative/offset comparisons where precision differences are meaningful. It also updates docstrings to guide correct usage going forward.
Changes:
- Switch multiple UI duration displays from
formatDurationtoformatDurationCompact(timeline span labels, minimap ticks, trace headers, trace diff views, scatter plot axis, span detail duration). - Re-export
formatDurationCompactfrom TraceTimelineViewer utils to simplify imports. - Update unit tests/mocks that depended on
formatDurationto align with the new formatter.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/jaeger-ui/src/utils/date.ts | Adds usage guidance to duration formatting docstrings. |
| packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/utils.ts | Re-exports formatDurationCompact for TraceTimelineViewer components. |
| packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/index.tsx | Uses compact formatting for the span “Duration” field; keeps precise formatting for “Start Time”. |
| packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx | Uses compact formatting for span bar labels. |
| packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.test.jsx | Updates mocked formatter to formatDurationCompact. |
| packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageHeader.tsx | Uses compact formatting for the trace header duration display. |
| packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.tsx | Uses compact formatting for minimap tick labels. |
| packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/TickLabels.test.jsx | Updates mock and assertions to formatDurationCompact. |
| packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx | Uses compact formatting for trace diff header duration. |
| packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.tsx | Uses compact formatting for cohort table duration column. |
| packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.test.jsx | Updates spy to formatDurationCompact. |
| packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.tsx | Uses compact formatting for scatter plot Y-axis tick labels. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
228
to
+232
| /** | ||
| * Formats a duration in microseconds to a compact string with 3 significant digits. | ||
| * Useful for displaying durations in tables where space is limited and excessive precision | ||
| * reduces readability. | ||
| * Use this for all standalone latency displays: span durations, trace durations, axis | ||
| * labels, table cells. Prefer this over `formatDuration` unless you specifically need | ||
| * the higher precision for relative offset comparisons. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3846 +/- ##
=======================================
Coverage 90.59% 90.59%
=======================================
Files 333 333
Lines 10498 10498
Branches 2744 2742 -2
=======================================
Hits 9511 9511
Misses 860 860
Partials 127 127 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #3844 which switched
ResultItemTitlefromformatDurationtoformatDurationCompact. That PR's commit message claimed "the trace timeline already usesformatDurationCompactfor tick labels" — but that was incorrect. This PR finishes the job.formatDurationwithformatDurationCompactfor all standalone latency displays: span bar labels, minimap tick labels, scatter plot Y-axis, trace page header duration, trace diff header and cohort table, and the span detail "Duration" fieldformatDurationonly for relative offset comparisons (event timestamps, log entry relative times, span "Start Time") where seeing differences between consecutive values is meaningfulformatDurationandformatDurationCompactdocstrings to prevent future misuseRule of thumb
Test plan
npm run lint— 0 errorsnpm test— 2821/2821 passnpm run build— clean build🤖 Generated with Claude Code