feat(trace-details): frontend changes for trace details

[vikrantgupta25]

Summary

Related Issues / PR's

contributes to - #6132

Screenshots

NA

Affected Areas and Manually Tested Areas

---

Important

Introduces a new frontend feature for trace details with enhanced visualization, new components, and API integrations.

• Behavior:
  • New TraceDetailV2 page added, replacing TraceDetail in pageComponents.ts.
  • Introduces TraceFlamegraph and TraceWaterfall components for detailed trace visualization.
  • Adds error handling and no data states in TraceFlamegraphStates and TraceWaterfallStates.
• API:
  • Adds getTraceFlamegraph and getTraceV2 functions in getTraceFlamegraph.tsx and getTraceV2.tsx.
  • Introduces hooks useGetTraceFlamegraph and useGetTraceV2 for API data fetching.
• Components:
  • Adds DetailsDrawer, TableV3, and AttributesTable components for UI enhancements.
  • Implements Success, Error, and NoData components for state management in trace visualization.
• Styles:
  • New styles added for TraceDetailV2, TraceFlamegraph, and TraceWaterfall components.
  • Updates to existing styles for consistency and theme support.
• Misc:
  • Updates reactQueryKeys.ts with new query keys for trace data.
  • Adds new types in getTraceFlamegraph.ts and getTraceV2.ts for API responses.

^{This description was created by for 7eb044d. 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]

❌ Changes requested. Reviewed everything up to aaa4529 in 1 minute and 57 seconds

More details

• Looked at 4290 lines of code in 47 files
• Skipped 3 files when reviewing.
• Skipped posting 2 drafted comments based on config settings.

1. frontend/src/pages/TraceDetail/TraceDetail.styles.scss:17

• Draft comment:
  Avoid using hardcoded color values like #c0c1c3. Use design tokens or predefined color constants instead. This issue is also present on line 30.
• Reason this comment was not posted:
  Marked as duplicate.

2. frontend/src/pages/TraceDetailV2/NoData/NoData.styles.scss:22

• Draft comment:
  Avoid using hardcoded color values like #c0c1c3. Use design tokens or predefined color constants instead. This issue is also present on line 30.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_nIGb0AKprzZ1c5Y5

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 7eb044d in 44 seconds

More details

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

1. frontend/src/container/PaginatedTraceFlamegraph/constants.ts:6

• Draft comment:
  Typo in 'FETCHING_WTIH_OLD_DATA_PRESENT'. It should be 'FETCHING_WITH_OLD_DATA_PRESENT'. This typo is also present in TraceWaterfallStates in TraceWaterfall/constants.ts.
• Reason this comment was not posted:
  Comment was on unchanged code.

2. frontend/src/hooks/trace/useGetTraceFlamegraph.tsx:13

• Draft comment:
  The return type UseLicense is misleading. Consider renaming it to something more appropriate like UseTraceFlamegraph. This also applies to useGetTraceV2.tsx.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_zwLOyMcuHqPAqqiq

---

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