Feat: back navigation support throughout the app

[ahmadshaheer]

Summary

Related Issues / PR's

Screenshots

NA

Affected Areas and Manually Tested Areas

---

Important

Add useSafeNavigate for safe URL navigation and enhance back navigation support across the app.

• Navigation:
  • Introduce useSafeNavigate hook in useSafeNavigate.ts to handle safe URL navigation.
  • Replace history.push and history.replace with safeNavigate in LogsExplorerChart/index.tsx, DateTimeSelectionV2/index.tsx, TracesTableComponent.tsx, and QueryBuilder.tsx.
  • Handle URL parameter updates and prevent unnecessary navigation if URLs are effectively the same.
• Time Handling:
  • Add normalizeTimeToMs function in timeUtils.ts to convert timestamps to milliseconds.
  • Use normalizeTimeToMs in DateTimeSelectionV2/index.tsx for time synchronization.
• State Management:
  • Sync time picker state with URL on browser navigation in DateTimeSelectionV2/index.tsx.
  • Update pagination state and URL in TracesTableComponent.tsx using safeNavigate.

^{This description was created by for 88598ed. It will automatically update as commits are pushed.}

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 88598ed in 1 minute and 49 seconds

More details

• Looked at 560 lines of code in 6 files
• Skipped 0 files when reviewing.
• Skipped posting 6 drafted comments based on config settings.

1. frontend/src/utils/timeUtils.ts:133

• Draft comment:
  Remove the console.log statement to avoid unnecessary console output.

• Reason this comment was not posted:
  Confidence changes required: 50%
  The console.log statement in a utility function is unnecessary and could clutter the console output. It should be removed for cleaner code.

2. frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx:511

• Draft comment:
  Replace history.replace with safeNavigate for consistency and safe navigation.

		safeNavigate(generatedUrl);

• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

3. frontend/src/hooks/useSafeNavigate.ts:108

• Draft comment:
  Remove console.group and console.log statements to avoid cluttering the console in production.

			```

• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  Console statements in production code can impact performance and expose potentially sensitive information. However, these particular logs seem intentionally added for debugging navigation issues, which can be complex. They provide useful information about why certain navigations are prevented or how they're handled. The code is new, so this was a deliberate choice by the author.
  The console statements could be wrapped in a development-only check or use a proper logging system. They might be useful for debugging in production in some cases.
  While the comment raises a valid point about console statements in production, these seem intentionally added for debugging complex navigation scenarios. If they're problematic, they should be handled through proper environment-based logging rather than removed entirely.
  The comment should be deleted. The console statements appear to be an intentional debugging feature, and their complete removal might make troubleshooting harder. If there are concerns about production logging, a more nuanced approach would be needed.

4. frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx:373

• Draft comment:
  Avoid using inline styles in React components. Use external stylesheets, CSS classes, or styled components instead. This is also applicable in other parts of the code where inline styles are used.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

5. frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx:621

• Draft comment:
  Use safeNavigate instead of history.replace for navigation to ensure consistency and safety in URL handling. This is also applicable in other parts of the code where history.replace is used.
• Reason this comment was not posted:
  Marked as duplicate.

6. frontend/src/providers/QueryBuilder.tsx:749

• Draft comment:
  Use safeNavigate instead of history.replace for navigation to ensure consistency and safety in URL handling. This is also applicable in other parts of the code where history.replace is used.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_CUoLraS1fsj6U3Wt

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.