feat: add cost insights summary cards, move finops reports tab to cost insights view and do minor UX improvements

[nilushancosta]

Purpose

• Show cost insights summary at component and project level
• Move cost analysis reports into the new cost insights view
• Improve the UX of the cost insights view
  Implement the cost insights view in the backstage portal openchoreo#4381

Goals

Add cost insights summaries in the catalog and improve UX of cost insights graphs

Approach

• Added summary cards at component and project level overview tabs in the catalog to show a cost summary for the last 24 hours. A button was also added to the summary card to navigate to the cost insights view from there for further analysis
• The cost analysis tab displaying FinOps agent reports were in the project level in the Catalog. This tab was moved into the Cost insights view so that all cost related information is in a single location now
• Added a total field to show the sum of the cost of items in the tooltip, in the line and stacked bar charts
• Updated the tooltip in the stacked bar chart and line chart to indicate item over which the mouse pointer is currently hovering
• Added a tooltip explaining that the cost forecast is an extrapolation based on the selected time window
• Added unit tests

Screenshots

Cost insights summary card at component level

Cost insights summary card at project level

Item highlights and total in the bar graph tooltip

Cost insights view with multiple tabs

Spend forecast tooltip

Summary by CodeRabbit

• New Features

  • Added tabbed Cost Insights with project-scoped Cost Analysis and updated deep links.
  • Added cost summary cards to project, system, and component overview pages.
  • Improved chart tooltips with totals, sorting, and hovered-series highlighting.
  • Added forecast explanation tooltips and clearer breadcrumb labels.
  • Added reusable gradient page headers for consistent navigation and presentation.

• Bug Fixes

  • Improved routing for nested Cost Insights pages.
  • Preserved selected cost-analysis scope when navigating from incident pages.

[coderabbitai]

Warning

Review limit reached

@nilushancosta, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 6 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

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.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: ac0b4b4a-d1f3-4c64-a842-8e2ee27838b5

📥 Commits

Reviewing files that changed from the base of the PR and between 8827a33 and 4ea8dd9.

📒 Files selected for processing (4)

• .changeset/cost-insights-tabs-and-chart-ux.md
• plugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.test.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostInsightsSummaryCard.test.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostLineChart.test.tsx

📝 Walkthrough

Walkthrough

Cost Insights now uses project-scoped Insights and Cost Analysis tabs, overview summary cards, nested routing, shared gradient headers, pluralized breadcrumbs, enhanced chart tooltips, and forecast explanations.

Changes

Cost Insights experience

Layer / File(s)	Summary
Shared gradient header plugins/openchoreo-react/src/components/OpenChoreoEntityLayout/GradientPageHeader.tsx, plugins/openchoreo-react/src/components/OpenChoreoEntityLayout/CompactEntityHeader.tsx, plugins/openchoreo-react/src/index.ts	Adds and exports reusable gradient header components and styles. The compact entity header uses the shared styles.
Project-scoped Cost Insights tabs plugins/openchoreo-observability/src/components/CostInsights/CostInsightsPage.tsx, plugins/openchoreo-observability/src/components/CostInsights/CostInsightsSummaryCard.tsx, plugins/openchoreo-observability/src/components/CostInsights/CostInsightsPage.test.tsx	Separates Insights and Cost Analysis into tabs, centralizes URL scope state, lazy-loads Cost Analysis, and adds project-aware summary cards and validation tests.
Cost Insights routing and overview integration packages/portal-app/src/components/catalog/EntityPage.tsx, packages/portal-app/src/createPortalApp.tsx, plugins/openchoreo-observability/src/alpha.tsx, plugins/openchoreo-observability/src/components/Incidents/ObservabilityProjectIncidentsPage.tsx, plugins/openchoreo-observability/src/plugin.ts	Updates nested routes and Cost Analysis links. Adds summary cards to entity overview pages and removes the system-page Cost Analysis extension.
Chart tooltips and Cost Insights presentation plugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.tsx, plugins/openchoreo-observability/src/components/CostInsights/CostLineChart.tsx, plugins/openchoreo-observability/src/components/CostInsights/CostSummaryCards.tsx, plugins/openchoreo-observability/src/components/CostInsights/ForecastDivergenceChart.tsx, plugins/openchoreo-observability/src/components/CostInsights/CostInsightsBreadcrumb.tsx	Adds tooltip totals and hover highlighting. Extracts reusable tooltip and total-cost content. Updates breadcrumb labels, spacing, and forecast explanations with supporting tests.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant CostInsightsPage
  participant CostInsightsInsightsTab
  participant CostAnalysisPage
  participant CostInsightsSummaryCard
  User->>CostInsightsPage: Open Cost Insights route
  CostInsightsPage->>CostInsightsInsightsTab: Render Insights tab
  User->>CostInsightsPage: Select Cost Analysis tab
  CostInsightsPage->>CostAnalysisPage: Lazy-load project-scoped analysis
  CostInsightsSummaryCard->>CostInsightsPage: Follow scoped Cost Insights deep link

Loading

Possibly related PRs

• openchoreo/backstage-plugins#525: Introduced the Cost Analysis functionality that this PR relocates into Cost Insights.
• openchoreo/backstage-plugins#723: Added the Cost Insights functionality extended by this PR.
• openchoreo/backstage-plugins#751: Modified the chart components updated by this PR.

Suggested reviewers: stefinie123

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers purpose, goals, approach, screenshots, and unit tests, but omits most required template sections, including release notes, documentation, security, and test environment.	Add the missing template sections, mark non-applicable items as N/A with reasons, and provide test, security, documentation, release-note, and migration details.
Docstring Coverage	⚠️ Warning	Docstring coverage is 57.14% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the primary changes: adding cost insights summary cards, moving FinOps reports, and improving the Cost Insights UX.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[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 @.changeset/cost-insights-tabs-and-chart-ux.md:
- Around line 7-31: Add a changeset bullet documenting the new component- and
project-level Cost Insights overview summary cards, describing their
user-visible availability alongside the existing table and graph views. Keep the
release note focused on this shipped behavior without altering the other
entries.

🪄 Autofix

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 Plus

Run ID: d6585be0-6c1f-4420-9984-43bd35ae5e3a

📥 Commits

Reviewing files that changed from the base of the PR and between 6c8c373 and 8827a33.

📒 Files selected for processing (24)

• .changeset/cost-insights-tabs-and-chart-ux.md
• packages/portal-app/src/components/catalog/EntityPage.tsx
• packages/portal-app/src/createPortalApp.tsx
• plugins/openchoreo-observability/src/alpha.test.tsx
• plugins/openchoreo-observability/src/alpha.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostInsightsBreadcrumb.test.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostInsightsBreadcrumb.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.test.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostInsightsPage.test.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostInsightsPage.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostInsightsSummaryCard.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostLineChart.test.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostLineChart.tsx
• plugins/openchoreo-observability/src/components/CostInsights/CostSummaryCards.tsx
• plugins/openchoreo-observability/src/components/CostInsights/ForecastDivergenceChart.tsx
• plugins/openchoreo-observability/src/components/Incidents/ObservabilityProjectIncidentsPage.tsx
• plugins/openchoreo-observability/src/index.ts
• plugins/openchoreo-observability/src/plugin.ts
• plugins/openchoreo-react/src/components/OpenChoreoEntityLayout/CompactEntityHeader.tsx
• plugins/openchoreo-react/src/components/OpenChoreoEntityLayout/GradientPageHeader.test.tsx
• plugins/openchoreo-react/src/components/OpenChoreoEntityLayout/GradientPageHeader.tsx
• plugins/openchoreo-react/src/components/OpenChoreoEntityLayout/index.ts
• plugins/openchoreo-react/src/index.ts

💤 Files with no reviewable changes (1)

• plugins/openchoreo-observability/src/alpha.test.tsx

[codecov]

Codecov Report

❌ Patch coverage is 98.56115% with 2 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...ts/Incidents/ObservabilityProjectIncidentsPage.tsx	0.00%	1 Missing ⚠️
plugins/openchoreo-observability/src/plugin.ts	50.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!