feat: add additional graphs in the cost insights view - #751
Open
nilushancosta wants to merge 1 commit into
Open
Conversation
nilushancosta
requested review from
Mirage20,
kaviththiranga,
sameerajayasoma and
stefinie123
as code owners
August 7, 2026 08:57
|
Changeset detected — the following file(s) will be released with this PR: |
|
Warning Review limit reached
Next review available in: 23 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 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 configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (13)
📝 WalkthroughWalkthroughCost Insights now fetches separate summary and graph data, calculates recommendation savings and forecasts, and renders forecast, efficiency, line, and composed charts through a new graph view. ChangesCost Insights data pipeline
Chart foundation and visualizations
Page integration
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant CostInsightsPage
participant useCostInsights
participant costAggregation
participant CostInsightsGraphs
CostInsightsPage->>useCostInsights: request cost insights
useCostInsights->>costAggregation: provide costs, series, and recommendations
costAggregation-->>useCostInsights: return summary, series, savings, and forecast
useCostInsights-->>CostInsightsPage: return CostInsightsData
CostInsightsPage->>CostInsightsGraphs: pass CostInsightsData and granularity
CostInsightsGraphs->>CostInsightsGraphs: render forecast, efficiency, and cost charts
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
plugins/openchoreo-observability/src/components/CostInsights/CostInsightsPage.test.tsx (1)
20-21: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd coverage for hiding the summary cards in graph view.
CostInsightsPage.tsxnow rendersCostSummaryCardsonly whenview !== 'graph'(lines 282-286). No test covers this branch. Add a case that renders the page withview=graphand asserts the summary cards are absent whilecost-graphis present.🤖 Prompt for 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. In `@plugins/openchoreo-observability/src/components/CostInsights/CostInsightsPage.test.tsx` around lines 20 - 21, Add a test case in the CostInsightsPage test suite that renders CostInsightsPage with view set to graph, asserts CostSummaryCards are absent, and verifies the mocked cost-graph element is present. Reuse the existing render setup and selectors from the suite.plugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.tsx (1)
80-88: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExtract the legend toggle state into a shared hook.
The same
hiddenstate andtogglefunction exist inCostLineChart.tsx,CostEfficiencyScatter.tsx, andForecastDivergenceChart.tsx. A shareduseHiddenSerieshook inchartUtils(or a small hook module) removes the duplication and keeps the toggle semantics identical across the four charts.🤖 Prompt for 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. In `@plugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.tsx` around lines 80 - 88, The duplicated hidden-series state and toggle logic in CostInsightsGraph.tsx, CostLineChart.tsx, CostEfficiencyScatter.tsx, and ForecastDivergenceChart.tsx should be extracted into a shared useHiddenSeries hook in chartUtils or a dedicated hook module. Update each chart to consume the hook while preserving the existing Set-based state and toggle behavior.
🤖 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
`@plugins/openchoreo-observability/src/components/CostInsights/costAggregation.ts`:
- Around line 380-383: Update the forecast calculation around baseline and
forkTotal so prior-month values from totalActual are excluded when the selected
window crosses a month boundary; derive the fork from current-month elapsed time
at rate, or skip the forecast until windowStart is within the current month. Add
a test covering a window that spans the month boundary.
- Around line 264-276: Update the aggregation around
recommendedTotalsByDimension and totalSaving to build current totals by
dimension, then sum Math.max(0, currentDimensionTotal -
recommendedDimensionTotal) only for dimensions present in the recommended totals
map. Do not use recSum > 0 as the availability check; preserve zero-cost
recommendations and exclude stale environments from claimed savings. Add
coverage for both zero-cost recommendations and stale environments.
In
`@plugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.tsx`:
- Around line 90-103: Update the data memo’s total calculation to exclude keys
marked hidden when summing seriesKeys, so the post-recommendation overlay
matches the visible stack. Include hidden in the memo dependency array and
preserve the existing behavior when no overlay is enabled.
In
`@plugins/openchoreo-observability/src/components/CostInsights/useCostInsights.ts`:
- Around line 102-109: Update the isGraph branch in the cost-loading flow to
catch failures from the granular api.getCosts request and substitute an empty
CostItem series for that environment. Keep the surrounding accumulated cost,
previous cost, and recommendation data fulfilled so summary, forecast, and
scatter results remain available while the time-series chart reflects partial
data.
---
Nitpick comments:
In
`@plugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.tsx`:
- Around line 80-88: The duplicated hidden-series state and toggle logic in
CostInsightsGraph.tsx, CostLineChart.tsx, CostEfficiencyScatter.tsx, and
ForecastDivergenceChart.tsx should be extracted into a shared useHiddenSeries
hook in chartUtils or a dedicated hook module. Update each chart to consume the
hook while preserving the existing Set-based state and toggle behavior.
In
`@plugins/openchoreo-observability/src/components/CostInsights/CostInsightsPage.test.tsx`:
- Around line 20-21: Add a test case in the CostInsightsPage test suite that
renders CostInsightsPage with view set to graph, asserts CostSummaryCards are
absent, and verifies the mocked cost-graph element is present. Reuse the
existing render setup and selectors from the suite.
🪄 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: 6341c0a0-a107-42c8-a0fb-0ffaa0d827b2
📒 Files selected for processing (23)
plugins/openchoreo-observability/src/components/CostInsights/ChartTitle.test.tsxplugins/openchoreo-observability/src/components/CostInsights/ChartTitle.tsxplugins/openchoreo-observability/src/components/CostInsights/CostEfficiencyScatter.test.tsxplugins/openchoreo-observability/src/components/CostInsights/CostEfficiencyScatter.tsxplugins/openchoreo-observability/src/components/CostInsights/CostInsightsFilters.test.tsxplugins/openchoreo-observability/src/components/CostInsights/CostInsightsFilters.tsxplugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.test.tsxplugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraph.tsxplugins/openchoreo-observability/src/components/CostInsights/CostInsightsGraphs.tsxplugins/openchoreo-observability/src/components/CostInsights/CostInsightsPage.test.tsxplugins/openchoreo-observability/src/components/CostInsights/CostInsightsPage.tsxplugins/openchoreo-observability/src/components/CostInsights/CostLineChart.test.tsxplugins/openchoreo-observability/src/components/CostInsights/CostLineChart.tsxplugins/openchoreo-observability/src/components/CostInsights/CostSummaryCards.test.tsxplugins/openchoreo-observability/src/components/CostInsights/CostSummaryCards.tsxplugins/openchoreo-observability/src/components/CostInsights/ForecastDivergenceChart.test.tsxplugins/openchoreo-observability/src/components/CostInsights/ForecastDivergenceChart.tsxplugins/openchoreo-observability/src/components/CostInsights/chartUtils.tsplugins/openchoreo-observability/src/components/CostInsights/costAggregation.test.tsplugins/openchoreo-observability/src/components/CostInsights/costAggregation.tsplugins/openchoreo-observability/src/components/CostInsights/types.tsplugins/openchoreo-observability/src/components/CostInsights/useCostInsights.test.tsplugins/openchoreo-observability/src/components/CostInsights/useCostInsights.ts
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
Signed-off-by: Nilushan Costa <nilushan@wso2.com>
nilushancosta
force-pushed
the
cost-insights
branch
from
August 7, 2026 09:33
5835c5f to
ad41922
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
This PR extends the graphs tab in the cost insights view. So far there was only a stacked bar chart in it. This PR adds more graphs to display additional information to users at namespace, project and component levels
openchoreo/openchoreo#4381
Goals
Show more insights to users through additional graphs
Approach
Screenshots
Please note that the cost values shown in these screenshots do not reflect the actual cost of running these components at the given CPU and memory requests in OpenChoreo. The costs have been manually inflated for testing purposes
Light theme
Dark theme
Overlay curve at the component level showing the cost after applying recommendations
Summary by CodeRabbit