fix(ui): add trace summaries component

[Vunovati]

Summary by CodeRabbit

• New Features

  • Added a trace-summaries view to observability dashboards, enabling display of trace summary results in the trace detail renderer.

• Tests

  • Added test coverage validating trace summary rendering and that summaries render correctly.

• Chores

  • Bumped UI package version with a changeset noting the new TraceSummariesView.

[coderabbitai]

Warning

Rate limit exceeded

@Vunovati has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 9 minutes and 21 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 9 minutes and 21 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f7e1074e-66c4-4134-bd25-963168459a1c

📥 Commits

Reviewing files that changed from the base of the PR and between 67c0903 and 3534bf5.

📒 Files selected for processing (2)

• packages/ui/src/components/observability/DynamicDashboard/DynamicDashboard.test.tsx
• packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx

📝 Walkthrough

Walkthrough

Added conditional TraceSummaries rendering path to OtelTraceDetail (via a new TraceSummariesView) for data source method searchTraceSummariesPage, and added a DynamicDashboard test that mocks and verifies trace summaries rendering.

Changes

Cohort / File(s)	Summary
Trace Summaries Rendering packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx	Added conditional branch to render TraceSummariesView when data source method is searchTraceSummariesPage. Introduces transformation of incoming rows into TraceSummary objects (nanoseconds→milliseconds, derive statusCode from errorCount), memoized with useMemo, and renders TraceSearch with loading/error props.
Dashboard Test Coverage packages/ui/src/components/observability/DynamicDashboard/DynamicDashboard.test.tsx	Added test constructing a minimal UITree with a TraceDetail node using method: "searchTraceSummariesPage". Mocks searchTraceSummariesPage to return one summary (rootSpanName: "GET /api/users"), asserts API call and rendered output.
Release Changeset .changeset/legal-peas-make.md	New changeset declaring a minor bump for @kopai/ui with note “Add missing TraceSummariesView”.

Sequence Diagram(s)

sequenceDiagram
  participant Dashboard as DynamicDashboard
  participant Detail as OtelTraceDetail
  participant View as TraceSummariesView
  participant Search as TraceSearch
  participant API as Trace API (client.searchTraceSummariesPage)

  Dashboard->>Detail: render TraceDetail node (dataSource method = searchTraceSummariesPage)
  Detail->>API: request searchTraceSummariesPage (params)
  API-->>Detail: trace summaries response
  Detail->>View: pass data (rows)
  View->>View: transform rows (ns→ms, derive statusCode) [useMemo]
  View->>Search: render TraceSearch with transformed summaries
  Search-->>Dashboard: UI displays trace summaries

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Feat/dynamic metrics dashboard #77: Overlaps changes to DynamicDashboard and OtelTraceDetail related to trace-summaries data source handling.

Poem

🐰 I hopped through traces, turned ns to ms bright,
Mocked a tiny call and watched the list light,
A dashboard stitched neat, summaries in view,
Padding little hops till the tests ran true — 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a TraceSummariesView component to handle trace summaries rendering in the observability UI.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/trace-element

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx`:
- Line 53: The OtelTraceDetail component is disabling trace drill-down by
passing a no-op onSelectTrace={() => {}}; replace this no-op with the real
selection handler: either forward the onSelectTrace prop received by this
component or call the parent/navigation handler that performs drill-down (e.g.,
invoke the provided onSelectTrace callback or router/navigation method),
ensuring the prop name onSelectTrace is wired through from the summaries list to
the trace detail renderer so clicks trigger the expected selection/navigation.
- Around line 32-33: The mapping assumes response.data is an array; add a
defensive guard using Array.isArray before mapping to avoid runtime errors in
renderOtelTraceDetail (or wherever the map is done): if response?.data is not an
array, return an empty array (or convert single-object payload into a one-item
array if desired) and then safely call response.data.map; update the branch that
currently reads "if (!response?.data) return [];" to validate
Array.isArray(response.data) before mapping.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 22dbeeda-571b-4b59-a5f4-c0752a5ae4e8

📥 Commits

Reviewing files that changed from the base of the PR and between c460d7d and 5e6c013.

📒 Files selected for processing (2)

• packages/ui/src/components/observability/DynamicDashboard/DynamicDashboard.test.tsx
• packages/ui/src/components/observability/renderers/OtelTraceDetail.tsx