feat: operation page improvements

[JivusAyrus]

Summary by CodeRabbit

• Bug Fixes

  • Improved metric accuracy by excluding incomplete operation records.
  • Fixed error-rate display and added fallback for missing client version.

• New Features

  • Latency cap indicator with tooltip at 10s.
  • "Show Usage" action for deprecated fields.
  • Sort-direction tooltip and instanteous selection feedback in operations list.

• UI Improvements

  • Redesigned deprecated-fields table: scrollable container, summary footer, adjusted column layout.

• Performance

  • Reduced unnecessary refetching on window focus.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Checklist

• I have discussed my proposed changes in an issue and have received approval to proceed.
• I have followed the coding standards of the project.
• Tests or benchmarks have been added or updated.
• Documentation has been updated on https://github.com/wundergraph/cosmo-docs.
• I have read the Contributors Guide.

[coderabbitai]

Walkthrough

The PR enhances operations features with data filtering refinements, UI improvements, and query optimizations. Changes include OperationHash filters in analytics queries, client version fallbacks, deprecated fields table restructuring with pagination footer, latency cap indicators with tooltips, sort direction tooltips, and disabled window focus refetching.

Changes

Cohort / File(s)	Summary
Analytics Data Filtering controlplane/src/core/repositories/analytics/MetricsRepository.ts	Added WHERE clause filters (OperationHash IS NOT NULL AND OperationHash != '') to three metric aggregation queries (latency, requests, errors) to exclude invalid records. No API or type signature changes.
Operations Components — UI Enhancements studio/src/components/operations/client-usage-table.tsx	Added fallback rendering: displays dash ('-') in Version badge when client.version is falsy.
Operations Components — UI Enhancements studio/src/components/operations/deprecated-fields-table.tsx	Restructured table with scrollable container, new TableFooter summary row, adjusted column layout (Field Path 80% / Actions 20%), per-row "Show Usage" button, and Loader during loading state.
Operations Components — UI Enhancements studio/src/components/operations/operations-list.tsx	Added latency cap indicator: displays tooltip when sortField === "latency" and operation.latency >= 10000. Introduced optimistic selection state with refs and useEffect to track selection changes and provide instant UI feedback. Updated error bucket metric to return "-" instead of null when errorRate ≤ 0.
Operations Components — UI Enhancements studio/src/components/operations/operations-search.tsx	Added Tooltip wrapper around sort-direction button displaying "Sort ascending" or "Sort descending" based on current sortDirection.
Query Optimization studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/operations.tsx	Disabled window focus refetching by adding refetchOnWindowFocus: false to two useQuery calls (getOperations and getGraphMetrics).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• OperationsList optimistic selection logic: Verify useEffect dependency array and state synchronization with selectedOperation changes; ensure instant feedback doesn't introduce race conditions or stale state.
• DeprecatedFieldsTable restructuring: Confirm loading and empty states render correctly within new scrollable container; validate footer summary calculation and per-row button integration.
• MetricsRepository filters: Review filter conditions to ensure no unintended data exclusions in existing reports or dashboards relying on these aggregations.

Possibly related PRs

• wundergraph/cosmo#2331: Modifies the same MetricsRepository analytics queries affected by OperationHash filter additions in this PR.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: operation page improvements' accurately summarizes the changeset, which includes multiple enhancements to operation page components including metrics filtering, client version display, deprecated fields table layout, operation selection feedback, search tooltips, and query optimization.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

studio/src/components/operations/deprecated-fields-table.tsx (1)

99-101: Align “Actions” header with cell alignment

Body cells in the Actions column are text-right while the header is text-center, which can look slightly off; consider making the header text-right for visual consistency.

-              <TableHead className="w-[20%] text-center">Actions</TableHead>
+              <TableHead className="w-[20%] text-right">Actions</TableHead>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2be5a84 and 5822a59.

📒 Files selected for processing (6)

• controlplane/src/core/repositories/analytics/MetricsRepository.ts (3 hunks)
• studio/src/components/operations/client-usage-table.tsx (1 hunks)
• studio/src/components/operations/deprecated-fields-table.tsx (2 hunks)
• studio/src/components/operations/operations-list.tsx (4 hunks)
• studio/src/components/operations/operations-search.tsx (2 hunks)
• studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/operations.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (3)

📚 Learning: 2025-09-10T11:15:52.157Z

Learnt from: JivusAyrus
Repo: wundergraph/cosmo PR: 2156
File: controlplane/src/core/repositories/ProposalRepository.ts:562-572
Timestamp: 2025-09-10T11:15:52.157Z
Learning: The getLatestCheckForProposal function in controlplane/src/core/repositories/ProposalRepository.ts is only called during proposal creation or updates, so proposal match error checking (hasProposalMatchError) is not needed since the proposal is being modified itself rather than being matched against.

Applied to files:

• controlplane/src/core/repositories/analytics/MetricsRepository.ts

📚 Learning: 2025-11-19T11:44:31.726Z

Learnt from: JivusAyrus
Repo: wundergraph/cosmo PR: 2331
File: studio/src/components/operations/client-usage-table.tsx:66-72
Timestamp: 2025-11-19T11:44:31.726Z
Learning: In the Cosmo studio codebase (studio/src/components/operations/client-usage-table.tsx), the `lastUsed` field from the `getOperationClients` API response is always present, so no fallback value is needed when mapping client data.

Applied to files:

• studio/src/components/operations/client-usage-table.tsx
• studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/operations.tsx
• studio/src/components/operations/operations-list.tsx

📚 Learning: 2025-11-19T11:26:26.657Z

Learnt from: JivusAyrus
Repo: wundergraph/cosmo PR: 2331
File: studio/src/components/operations/client-usage-table.tsx:65-65
Timestamp: 2025-11-19T11:26:26.657Z
Learning: In the Cosmo studio codebase (studio/src/components/operations/client-usage-table.tsx), converting BigInt request counts from the API to Number is acceptable because request counts are not expected to exceed JavaScript's safe integer limit (2^53 - 1).

Applied to files:

• studio/src/components/operations/client-usage-table.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: build_test
• GitHub Check: build_push_image
• GitHub Check: build_push_image
• GitHub Check: build_test
• GitHub Check: Analyze (go)
• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (12)

studio/src/components/operations/client-usage-table.tsx (1)

136-140: LGTM!

The fallback to display a dash when client.version is empty or missing is a sensible UI enhancement that provides a consistent visual indicator for missing version data.

studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/operations.tsx (1)

664-665: LGTM!

Disabling refetchOnWindowFocus is appropriate for analytics data that doesn't require real-time updates on tab focus. Users can still refresh data manually or via the configured refresh interval.

controlplane/src/core/repositories/analytics/MetricsRepository.ts (2)

905-905: Consistent filter for requests sorting.

The filter correctly excludes empty/null OperationHash records when sorting by requests.

---

944-944: Consistent filter for errors sorting.

The filter correctly excludes empty/null OperationHash records when sorting by errors.

studio/src/components/operations/operations-search.tsx (1)

230-253: LGTM!

The tooltip enhancement provides helpful UX feedback for the sort direction toggle. The tooltip text correctly indicates the action that will be performed on click.

studio/src/components/operations/operations-list.tsx (5)

147-149: LGTM!

Returning "-" instead of null for zero error rate provides consistent visual feedback in the UI.

---

156-156: LGTM!

The 10-second (10000ms) latency cap indicator is a useful addition for identifying operations that may have exceeded the maximum trackable latency bucket.

---

215-230: LGTM!

The tooltip provides clear context about the latency bucket limitation, helping users understand why they see "10s" and that actual latency may be higher.

---

247-276: Well-implemented optimistic selection pattern.

Using refs to track previous values avoids unnecessary re-renders, and the effect correctly synchronizes optimistic state when the prop changes externally (e.g., when the selected operation is removed from the list or cleared via URL changes).

---

314-337: LGTM!

The optimistic selection provides immediate visual feedback on click, improving perceived responsiveness. The fallback to selectedOperation ensures correctness when optimistic state hasn't been set yet.

studio/src/components/operations/deprecated-fields-table.tsx (2)

103-144: Scrollable body + loading/empty states look solid

The scroll container, loader row, and “No deprecated fields found” fallback are wired correctly with colSpan={2} and respect the loading flag; the mapping keys and widths also look appropriate.

---

12-17: Footer summary implementation is clean and safe

Importing TableFooter and rendering the “Found N deprecated field(s)” row only when !isLoading && hasDeprecatedFields avoids odd “0 results” states and keeps the summary visually separated via the border; logic and pluralization both look good.

Also applies to: 145-162

[StarpTech]

LGTM