refactor: extract dashboard tab data-fetching into dedicated `TabView` components by impoiler · Pull Request #3797 · maximhq/bifrost

impoiler · 2026-05-27T07:50:59Z

Summary

Refactors the dashboard page by extracting per-tab data fetching logic into dedicated *TabView wrapper components, replacing the large collection of manual state variables, lazy query hooks, and ensure*DataLoaded ref-tracking functions that previously lived directly in page.tsx.

Changes

Introduced five new forwardRef tab view components (OverviewTabView, ProviderUsageTabView, MCPTabView, ModelRankingsTabView, DimensionRankingsTabView), each owning its own RTK Query subscriptions, loading state, and getData/loadData imperative handle.
Replaced ~300 lines of manual state, lazy hooks, fetch functions, and generation-counter deduplication logic in page.tsx with refs to the new tab view components. Export data aggregation now iterates over those refs rather than a large useMemo object.
Each tab view uses an active prop (driven by the current tab value or pdfMode) to skip fetching when the tab is not visible, delegating the skip logic to RTK Query's built-in skip option instead of manual fetchedRef/loadingRef guards.
Exported useGetModelRankingsQuery, useGetDimensionRankingsQuery, useGetMCPCostHistogramQuery, and useGetMCPTopToolsQuery non-lazy hooks from the store APIs to support the new subscription-based approach.
Moved sanitizeSeriesLabels into the tab views that need it (OverviewTabView, ProviderUsageTabView) rather than keeping it in the page.
Reordered the "User Rankings" tab trigger to appear before "Customer Rankings" and "BU Rankings" in the tab list.
Removed the background warm-up setTimeout effect and the filter-change useEffect that reset all fetch flags, as RTK Query cache invalidation now handles re-fetching automatically.

Type of change

Affected areas

How to test

cd ui
pnpm i || npm i
pnpm build || npm run build

Open the dashboard and verify each tab loads its data correctly when first visited.
Change a filter (e.g., time range or provider) and confirm all visible and previously loaded tabs refresh.
Trigger a CSV and PDF export and confirm all tab data is included.
Verify PDF export correctly force-mounts all tabs and captures each section.

Screenshots/Recordings

No visual changes expected; this is a pure refactor of data-fetching logic.

Breaking changes

Yes
No

Related issues

Security considerations

None.

Checklist

I read docs/contributing/README.md and followed the guidelines
I added/updated tests where appropriate
I updated documentation where needed
I verified builds succeed (Go and UI)
I verified the CI pipeline passes locally if applicable

coderabbitai · 2026-05-27T07:51:08Z

Warning

Review limit reached

@akshaydeo, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 36 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b57322bb-cfd1-4d79-9083-ca54b1fffcad

📥 Commits

Reviewing files that changed from the base of the PR and between c6a89b9 and 230db16.

📒 Files selected for processing (8)

ui/app/workspace/dashboard/components/tabViews/dimensionRankingsTabView.tsx
ui/app/workspace/dashboard/components/tabViews/mcpTabView.tsx
ui/app/workspace/dashboard/components/tabViews/modelRankingsTabView.tsx
ui/app/workspace/dashboard/components/tabViews/overviewTabView.tsx
ui/app/workspace/dashboard/components/tabViews/providerUsageTabView.tsx
ui/app/workspace/dashboard/page.tsx
ui/lib/store/apis/logsApi.ts
ui/lib/store/apis/mcpLogsApi.ts

📝 Walkthrough

Walkthrough

This PR refactors the Dashboard page from a monolithic component with local RTK query orchestration into a modular tab-view architecture. Five new tab view components encapsulate data fetching and expose imperative ref APIs. The Dashboard page aggregates these refs to fetch and export data across all active tabs.

Changes

Dashboard Tab View Refactor

Layer / File(s)	Summary
RTK Query Hook Exports `ui/lib/store/apis/logsApi.ts`, `ui/lib/store/apis/mcpLogsApi.ts`	`useGetModelRankingsQuery`, `useGetDimensionRankingsQuery`, `useGetMCPCostHistogramQuery`, and `useGetMCPTopToolsQuery` hooks are exported to support tab view components.
Overview Tab View `ui/app/workspace/dashboard/components/tabViews/overviewTabView.tsx`	Wires six histogram and stats queries with active-driven skip; sanitizes/deduplicates model labels; exposes `getData()` and `loadData()` imperative API via forwardRef.
Provider Usage Tab View `ui/app/workspace/dashboard/components/tabViews/providerUsageTabView.tsx`	Wires cost/token/latency histogram queries; sanitizes/deduplicates provider labels; exposes imperative ref for data access and on-demand loading.
Model Rankings Tab View `ui/app/workspace/dashboard/components/tabViews/modelRankingsTabView.tsx`	Wires model rankings and histogram queries with concurrent lazy loading; exposes imperative ref with null-normalized data returns.
MCP Tab View `ui/app/workspace/dashboard/components/tabViews/mcpTabView.tsx`	Wires three MCP histogram queries (histogram, cost histogram, top-tools) with active-driven skip and concurrent lazy loading.
Dimension Rankings Tab View `ui/app/workspace/dashboard/components/tabViews/dimensionRankingsTabView.tsx`	Wires dimension-specific ranking queries; exposes imperative ref returning requested dataKey and triggering on-demand fetch.
Dashboard Page Integration `ui/app/workspace/dashboard/page.tsx`	Removes local RTK query state; introduces tab view refs; adds filter parsing, `getDashboardData()`/`handlePreloadData()` aggregation, PDF export with preload/layout override, and re-wires tab content rendering.

Sequence Diagram(s)

sequenceDiagram
  participant DashboardPage
  participant TabViewRefs as Tab View Refs<br/>(Overview, Provider, etc.)
  participant RTKQueries as RTK Query Hooks
  participant TabPresentational as Tab Components<br/>(MCPTab, OverviewTab, etc.)
  DashboardPage->>DashboardPage: parse filters from URL
  DashboardPage->>TabViewRefs: pass filters, active state, pdfMode
  Note over TabViewRefs: active = true for current tab
  TabViewRefs->>RTKQueries: skip = false, fetch data
  RTKQueries-->>TabViewRefs: histogram, rankings, stats
  DashboardPage->>TabViewRefs: getDashboardData() for export
  TabViewRefs-->>DashboardPage: aggregated Partial<DashboardData>
  DashboardPage->>TabViewRefs: handlePreloadData() on PDF export
  TabViewRefs->>RTKQueries: loadData() triggers all lazy queries
  DashboardPage->>DashboardPage: handlePdfExport() enables pdfMode
  DashboardPage->>TabPresentational: unhide force-mounted tabs, measure
  TabPresentational-->>DashboardPage: rendered DOM ready for capture

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

maximhq/bifrost#3650: Both PRs modify ui/app/workspace/dashboard/page.tsx to change how URL-derived filters are constructed and passed into the dashboard data-fetching flow; #3650 adds team_ids/customer_ids/business_unit_ids to filters, which this PR's new tab-view refactor consumes.

Suggested reviewers

akshaydeo
danpiths

Poem

🐰 Five tab views spring to life with refs held tight,
Data fetching split apart, no monolith in sight,
Imperative handles dance through the dashboard page,
PDF exports preload with style and with grace!
hop hop ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: extracting dashboard tab data-fetching logic into dedicated TabView components, which matches the core refactoring work shown in the changeset.
Description check	✅ Passed	The description comprehensively covers all required template sections: clear summary of the refactor, detailed changes explaining the new components and removed logic, marked type (Refactor), affected areas (UI), testing steps, breaking changes status, and a completion checklist.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ 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 05-27-fix_fetch_only_active_tabs_data_in_dashboard

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

impoiler · 2026-05-27T07:51:26Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

greptile-apps · 2026-05-27T10:29:21Z

Confidence Score: 4/5

Export paths have correctness issues with inactive tabs returning null data; the refactor itself is clean but export functionality needs resolution before merging

The tab view components are well-structured. Risk is in getDashboardData and handlePdfExport: inactive tabs (skip=true) return null from getData(), and modelData is emitted by both OverviewTabView and ModelRankingsTabView causing one to overwrite the other. PDF export calls handlePreloadData before setPdfMode(true), so inactive tab refs are null and loadData() is never called for them.

page.tsx — getDashboardData and handlePdfExport

Important Files Changed

Filename	Overview
ui/app/workspace/dashboard/page.tsx	Removed ~300 lines of manual state/lazy-hook boilerplate; export plumbing has known issues (inactive-tab null data in CSV, PDF capture timing) discussed in previous threads
ui/app/workspace/dashboard/components/tabViews/overviewTabView.tsx	New component encapsulating Overview tab data-fetching; modelData key overlaps with ModelRankingsTabView
ui/app/workspace/dashboard/components/tabViews/modelRankingsTabView.tsx	getData() emits modelData colliding with OverviewTabView when both are mounted
ui/lib/store/apis/logsApi.ts	Exports useGetModelRankingsQuery and useGetDimensionRankingsQuery non-lazy hooks
ui/lib/store/apis/mcpLogsApi.ts	Exports useGetMCPCostHistogramQuery and useGetMCPTopToolsQuery non-lazy hooks

_{Reviews (6): Last reviewed commit: "fix: fetch only active tabs data in dash..." | Re-trigger Greptile}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ui/app/workspace/dashboard/page.tsx`:
- Around line 348-394: The PDF export's section ordering in handlePdfExport is
out of sync with the UI tab order: update the ids array inside handlePdfExport
so the element IDs follow the same visual tab sequence (move
"dashboard-section-user-rankings" to appear before
"dashboard-section-customer-rankings" and "dashboard-section-bu-rankings"), then
return the mapped elements as before; ensure you only change the order of the
IDs in the ids constant so exported PDF pages match the on-screen tabs.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7273bbc2-3fbb-442e-971d-b71468a54e3a

📥 Commits

Reviewing files that changed from the base of the PR and between 75c1e18 and c6a89b9.

📒 Files selected for processing (8)

ui/app/workspace/dashboard/components/tabViews/dimensionRankingsTabView.tsx
ui/app/workspace/dashboard/components/tabViews/mcpTabView.tsx
ui/app/workspace/dashboard/components/tabViews/modelRankingsTabView.tsx
ui/app/workspace/dashboard/components/tabViews/overviewTabView.tsx
ui/app/workspace/dashboard/components/tabViews/providerUsageTabView.tsx
ui/app/workspace/dashboard/page.tsx
ui/lib/store/apis/logsApi.ts
ui/lib/store/apis/mcpLogsApi.ts

akshaydeo · 2026-05-27T13:44:12Z

Merge activity

May 27, 1:44 PM UTC: A user started a stack merge that includes this pull request via Graphite.
May 27, 1:58 PM UTC: Graphite rebased this pull request as part of a merge.
May 27, 1:59 PM UTC: @akshaydeo merged this pull request with Graphite.

The base branch was changed.

…` components (#3797) ## Summary Refactors the dashboard page by extracting per-tab data fetching logic into dedicated `*TabView` wrapper components, replacing the large collection of manual state variables, lazy query hooks, and `ensure*DataLoaded` ref-tracking functions that previously lived directly in `page.tsx`. ## Changes - Introduced five new `forwardRef` tab view components (`OverviewTabView`, `ProviderUsageTabView`, `MCPTabView`, `ModelRankingsTabView`, `DimensionRankingsTabView`), each owning its own RTK Query subscriptions, loading state, and `getData`/`loadData` imperative handle. - Replaced ~300 lines of manual state, lazy hooks, fetch functions, and generation-counter deduplication logic in `page.tsx` with refs to the new tab view components. Export data aggregation now iterates over those refs rather than a large `useMemo` object. - Each tab view uses an `active` prop (driven by the current tab value or `pdfMode`) to skip fetching when the tab is not visible, delegating the skip logic to RTK Query's built-in `skip` option instead of manual `fetchedRef`/`loadingRef` guards. - Exported `useGetModelRankingsQuery`, `useGetDimensionRankingsQuery`, `useGetMCPCostHistogramQuery`, and `useGetMCPTopToolsQuery` non-lazy hooks from the store APIs to support the new subscription-based approach. - Moved `sanitizeSeriesLabels` into the tab views that need it (`OverviewTabView`, `ProviderUsageTabView`) rather than keeping it in the page. - Reordered the "User Rankings" tab trigger to appear before "Customer Rankings" and "BU Rankings" in the tab list. - Removed the background warm-up `setTimeout` effect and the filter-change `useEffect` that reset all fetch flags, as RTK Query cache invalidation now handles re-fetching automatically. ## Type of change - [ ] Bug fix - [ ] Feature - [x] Refactor - [ ] Documentation - [ ] Chore/CI ## Affected areas - [ ] Core (Go) - [ ] Transports (HTTP) - [ ] Providers/Integrations - [ ] Plugins - [x] UI (React) - [ ] Docs ## How to test ```sh cd ui pnpm i || npm i pnpm build || npm run build ``` 1. Open the dashboard and verify each tab loads its data correctly when first visited. 2. Change a filter (e.g., time range or provider) and confirm all visible and previously loaded tabs refresh. 3. Trigger a CSV and PDF export and confirm all tab data is included. 4. Verify PDF export correctly force-mounts all tabs and captures each section. ## Screenshots/Recordings No visual changes expected; this is a pure refactor of data-fetching logic. ## Breaking changes - [ ] Yes - [x] No ## Related issues ## Security considerations None. ## Checklist - [ ] I read `docs/contributing/README.md` and followed the guidelines - [ ] I added/updated tests where appropriate - [ ] I updated documentation where needed - [ ] I verified builds succeed (Go and UI) - [ ] I verified the CI pipeline passes locally if applicable

impoiler mentioned this pull request May 27, 2026

feat: add GetDimensionRankings API and dashboard tabs for team, customer, BU, and user rankings #3766

Merged

17 tasks

impoiler force-pushed the 05-26-feat_adds_team_bu_and_customers_ranking_on_dashboard branch from cf7fb07 to 787e939 Compare May 27, 2026 09:13

impoiler force-pushed the 05-27-fix_fetch_only_active_tabs_data_in_dashboard branch from 8089ce8 to 0ad0728 Compare May 27, 2026 09:13

impoiler marked this pull request as ready for review May 27, 2026 10:25

greptile-apps Bot reviewed May 27, 2026

View reviewed changes

Comment thread ui/app/workspace/dashboard/components/tabViews/providerUsageTabView.tsx

impoiler self-assigned this May 27, 2026

coderabbitai Bot approved these changes May 27, 2026

View reviewed changes

impoiler force-pushed the 05-26-feat_adds_team_bu_and_customers_ranking_on_dashboard branch from eac19fe to 4d50443 Compare May 27, 2026 12:19

impoiler force-pushed the 05-27-fix_fetch_only_active_tabs_data_in_dashboard branch from 11e3a09 to 18253b0 Compare May 27, 2026 12:19

greptile-apps Bot reviewed May 27, 2026

View reviewed changes

Comment thread ui/app/workspace/dashboard/page.tsx

impoiler force-pushed the 05-27-fix_fetch_only_active_tabs_data_in_dashboard branch from 18253b0 to be859cc Compare May 27, 2026 12:30

impoiler force-pushed the 05-26-feat_adds_team_bu_and_customers_ranking_on_dashboard branch from 4d50443 to ba36910 Compare May 27, 2026 12:30

impoiler force-pushed the 05-27-fix_fetch_only_active_tabs_data_in_dashboard branch from a957ea9 to c6a89b9 Compare May 27, 2026 13:16

impoiler force-pushed the 05-26-feat_adds_team_bu_and_customers_ranking_on_dashboard branch from 712f0b2 to 75c1e18 Compare May 27, 2026 13:16

coderabbitai Bot requested a review from akshaydeo May 27, 2026 13:18

coderabbitai Bot requested a review from danpiths May 27, 2026 13:18

greptile-apps Bot reviewed May 27, 2026

View reviewed changes

Comment thread ui/app/workspace/dashboard/page.tsx

coderabbitai Bot requested changes May 27, 2026

View reviewed changes

Comment thread ui/app/workspace/dashboard/page.tsx

coderabbitai Bot previously approved these changes May 27, 2026

View reviewed changes

akshaydeo changed the base branch from 05-26-feat_adds_team_bu_and_customers_ranking_on_dashboard to graphite-base/3797 May 27, 2026 13:56

akshaydeo changed the base branch from graphite-base/3797 to dev May 27, 2026 13:57

fix: fetch only active tabs data in dashboard

230db16

akshaydeo force-pushed the 05-27-fix_fetch_only_active_tabs_data_in_dashboard branch from c6a89b9 to 230db16 Compare May 27, 2026 13:57

akshaydeo merged commit 189bfe9 into dev May 27, 2026
14 of 15 checks passed

akshaydeo deleted the 05-27-fix_fetch_only_active_tabs_data_in_dashboard branch May 27, 2026 13:59

This was referenced Jun 5, 2026

feat: adds support for multiple team and bu units in logstore #4041

Merged

adds user-agent tracking for llm and mcp logs #4083

Merged

feat: supports multiple customers logs and usage tracking #4066

Merged

coderabbitai Bot mentioned this pull request Jun 18, 2026

feat: add virtual key rankings dimension to dashboard #4427

Merged

18 tasks

coderabbitai Bot mentioned this pull request Jul 1, 2026

V2.0.0 #4365

Merged

coderabbitai Bot mentioned this pull request Jul 14, 2026

feat: add throughput (tokens/sec) charts to overview and provider usage dashboard tabs #5180

Merged

18 tasks

Navigation Menu

Uh oh!

refactor: extract dashboard tab data-fetching into dedicated `TabView` components - #3797

refactor: extract dashboard tab data-fetching into dedicated `TabView` components#3797
akshaydeo merged 1 commit into
devfrom
05-27-fix_fetch_only_active_tabs_data_in_dashboard

impoiler commented May 27, 2026

Uh oh!

coderabbitai Bot commented May 27, 2026 •

edited

Loading

Review limit reached

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

impoiler commented May 27, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented May 27, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

akshaydeo commented May 27, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

impoiler commented May 27, 2026

Summary

Changes

Type of change

Affected areas

How to test

Screenshots/Recordings

Breaking changes

Related issues

Security considerations

Checklist

Uh oh!

coderabbitai Bot commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

❌ Failed checks (1 warning)

Uh oh!

impoiler commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps Bot commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Confidence Score: 4/5

Important Files Changed

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

akshaydeo commented May 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai Bot commented May 27, 2026 •

edited

Loading

impoiler commented May 27, 2026 •

edited

Loading

greptile-apps Bot commented May 27, 2026 •

edited

Loading

akshaydeo commented May 27, 2026 •

edited

Loading