Skip to content

Feature/drilldown namespace 2942 #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Feature/drilldown namespace 2942 #131

wants to merge 10 commits into from

Conversation

@CrazyCapislav
Copy link

@CrazyCapislav CrazyCapislav commented Nov 12, 2025

What does this PR change?

  • Implements drilldown functionality for namespace and resource costs in the Allocation Report (fixes #2942)
  • Updates recharts from 2.15.3 to 3.4.1 (major version update)
  • Replaces ResponsiveContainer wrapper component with built-in responsive prop in all chart components to comply with recharts 3.x API changes
  • Adds filters support to AllocationService to enable filtering by namespace, controllerKind, controller, and pod
  • Adds missing lodash dependency that was required but not declared in package.json

Does this PR relate to any other PRs?

  • No.

How will this PR impact users?

  • Users can now click on namespace rows (and other aggregation levels) to drill down and see more detailed cost breakdown
  • This provides better cost visibility and analysis capabilities, similar to what's available in Kubecost
  • Improves user experience by allowing intuitive navigation through cost allocation data
  • Charts will continue to work responsively as before, now using the updated recharts 3.x API
  • No breaking changes for end users - existing functionality remains unchanged

Does this PR address any GitHub or Zendesk issues?

  • Closes #2942

How was this PR tested?

  • Built the project successfully (code compiles without errors)
  • Verified no linter errors in all modified files
  • Tested drilldown logic:
    • Added filters support to AllocationService.fetchAllocation
    • Implemented drilldown function with proper hierarchy navigation (namespace → controllerKind → controller → pod → container)
    • Made table rows clickable with visual feedback (hover effect)
    • Added logic to prevent drilldown on idle, unallocated, unmounted rows, and container level (last level)
    • Implemented filter reset logic when navigating back to higher aggregation levels
    • Updated all 5 chart components to use recharts 3.x API (replaced ResponsiveContainer with responsive prop)
  • Added mock data fallback for testing when backend is not available

Does this PR require changes to documentation?

  • No documentation changes required - this is a UI enhancement that follows existing patterns and maintains the same functionality.

Have you labeled this PR and its corresponding Issue as "next release" if it should be part of the next OpenCost release? If not, why not?

  • This feature addresses a user-requested enhancement (issue #2942) and should be considered for the next release. The maintainers can decide on the release timing.

@CrazyCapislav
Implement drilldown functionality for namespace and resource costs
201f0f2 
- Add filters support to AllocationService.fetchAllocation
- Implement drilldown function in Allocations page
- Make table rows clickable for drilldown navigation
- Add visual feedback (hover effect) for clickable rows
- Support drilldown hierarchy: namespace -> controllerKind -> controller -> pod -> container
- Reset filters when navigating back to higher aggregation levels

Fixes #2942

Signed-off-by: Rahim <rahim-2004@mail.ru>
@CrazyCapislav
Update recharts to 3.4.1 and fix breaking changes
67a3c9d 
- Update recharts from 2.15.3 to 3.4.1
- Replace ResponsiveContainer with responsive prop in all chart components
- Add lodash dependency
- Update 5 chart components to use recharts 3.x API

Signed-off-by: Rahim <rahim-2004@mail.ru>
@netlify
Copy link

netlify bot commented Nov 12, 2025 •
edited
Loading

✅ Deploy Preview for opencost-ui ready!

Name Link
🔨 Latest commit d443ad6
🔍 Latest deploy log https://app.netlify.com/projects/opencost-ui/deploys/691851d31a12ad000779a1b6
😎 Deploy Preview https://deploy-preview-131--opencost-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@CrazyCapislav
Fix drilldown: disable click when no next level exists
11b0d02 
Signed-off-by: Rahim <rahim-2004@mail.ru>
@CrazyCapislav CrazyCapislav force-pushed the feature/drilldown-namespace-2942 branch from e982cd8 to 11b0d02 Compare November 12, 2025 11:23
@CrazyCapislav
Fix filter parsing: use '+' instead of encodeURIComponent to avoid do…
3166177 
…uble encoding

Signed-off-by: Rahim <rahim-2004@mail.ru>
@CrazyCapislav
Fix filter parsing: escape quotes in values and validate filter values
d995809 
Signed-off-by: Rahim <rahim-2004@mail.ru>
@CrazyCapislav
Fix filter property: use controllerName instead of controller for bac…
483e292 
…kend API

Signed-off-by: Rahim <rahim-2004@mail.ru>
@nealormsbee
Copy link
Contributor

nealormsbee commented Nov 12, 2025

Hey @CrazyCapislav, thanks for the contribution! I'd like to look at the code a little more in-depth before approving, and am running out of time today. But nominally, this looks great!

Will aim to provide a thorough review tomorrow. Thanks again.

@nealormsbee nealormsbee self-requested a review November 12, 2025 22:07
ameijer
ameijer reviewed Nov 13, 2025
View reviewed changes
@CrazyCapislav
Remove dead code: commented out isAnimationActive prop
de4b0d2 
Signed-off-by: Rahim <rahim-2004@mail.ru>
@CrazyCapislav CrazyCapislav force-pushed the feature/drilldown-namespace-2942 branch from 8defee2 to de4b0d2 Compare November 13, 2025 20:59
@ameijer
Copy link
Member

ameijer commented Nov 13, 2025

@CrazyCapislav this is amazing, thanks for your contribution! Is there any way you can driver the filtering from the URL? not apparent what we have drilled into when we do it. WDYT?

ameijer
ameijer reviewed Nov 13, 2025
View reviewed changes
@CrazyCapislav
Add URL-based filter management for drilldown functionality
7b43cc6 
Signed-off-by: Rahim <rahim-2004@mail.ru>
@CrazyCapislav
Require explicit flag to enable mock data usage
7765020 
Signed-off-by: Rahim <rahim-2004@mail.ru>
@CrazyCapislav
Copy link
Author

CrazyCapislav commented Nov 15, 2025

@CrazyCapislav this is amazing, thanks for your contribution! Is there any way you can driver the filtering from the URL? not apparent what we have drilled into when we do it. WDYT?

Thanks for the feedback! I've implemented URL-driven filtering for the drilldown functionality.
What's been added:
Filters are now stored in the URL parameter filter (e.g., ?agg=controllerKind&filter=namespace:"my-namespace")
When you drill down, the filters are automatically added to the URL
The URL is shareable — anyone opening the link will see the same filtered view
Browser back/forward navigation works correctly with the filter state
Filters are validated and trimmed if they don't match the current aggregation level
This makes it clear what you've drilled into, and you can share specific drilldown states via URL.
I'd appreciate it if this PR could be reviewed and approved, as I need it for my student work. Thank you!

@CrazyCapislav CrazyCapislav force-pushed the feature/drilldown-namespace-2942 branch from 023443b to 7765020 Compare November 15, 2025 10:05
@CrazyCapislav
Merge branch 'main' into feature/drilldown-namespace-2942
d443ad6 
Signed-off-by: Rahim <113333347+CrazyCapislav@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ameijer ameijer ameijer left review comments

@nealormsbee nealormsbee Awaiting requested review from nealormsbee

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

needs-follow-up

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@CrazyCapislav @nealormsbee @ameijer