Feature/drilldown namespace 2942 #131

CrazyCapislav · 2025-11-12T11:12:49Z

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.

- 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 <[email protected]>

- 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 <[email protected]>

netlify · 2025-11-12T11:12:56Z

✅ Deploy Preview for opencost-ui ready!

Name	Link
🔨 Latest commit	`88ebf55`
🔍 Latest deploy log	https://app.netlify.com/projects/opencost-ui/deploys/6925f6093ddb920008c9c233
😎 Deploy Preview	https://deploy-preview-131--opencost-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

Signed-off-by: Rahim <[email protected]>

…uble encoding Signed-off-by: Rahim <[email protected]>

Signed-off-by: Rahim <[email protected]>

…kend API Signed-off-by: Rahim <[email protected]>

nealormsbee · 2025-11-12T22:07:00Z

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.

src/components/AllocationChart/SummaryChart.js

Signed-off-by: Rahim <[email protected]>

ameijer · 2025-11-13T21:19:33Z

@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?

src/services/allocation.js

Signed-off-by: Rahim <[email protected]>

CrazyCapislav · 2025-11-15T09:48:51Z

@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!

Signed-off-by: Rahim <[email protected]>

nealormsbee

Apologies for the long gap in review time! I've been on vacation but am back today. Left a few requests / suggestions in code annotations.

The only high-level UX thing that I think would be nice is to indicate the applied filters in the UI somehow. Maybe in a "breadcrumb" style below the report title, since the filters are constrained to working in a specific drilldown pattern.

So, for example, if you drilled into a namespace called "Foo", you'd see something like

All Results > Foo

just below the title. And All Results would be a link that takes you back to an unfiltered view, aggregated by namespace.

Just ideas for a nice UX. I would not block the PR on not including this. If you can regenerate the package-lock.json and make a couple of small logic simplifications (or explain why I'm wrong about them), then I'm good to approve!

Thanks.

nealormsbee · 2025-12-01T19:52:32Z

src/components/AllocationChart/RangeChart.js

  };

  return (
-    <ResponsiveContainer width="100%" height={height}>


Can you point me at the place where Recharts talks about the change from using ResponsiveContainer to a responsive prop?

This is more for my curiosity than anything. The graphs still exhibit the "Responsive" behavior, I just still see ResponsiveContainer referenced in their docs here and no mention of the new prop in the migration guide, so I'm wondering what I'm missing.

Well, you can check recharts v3.3.0 changes: "add the responsive prop to any chart along with a height and width as if you were using ResponsiveContainer. One less component to wrap things with. ResponsiveContainer will continue to work for the life of 3.x". I think using props would be preferable, but it can be returned as it was.

nealormsbee · 2025-12-01T19:57:22Z

src/components/allocationReport.js

+              const isContainer = aggregateBy === "container";
+              // Only allow drilldown if there's a next level and we're not at container level
+              const canDrilldown = !isIdle && !isUnallocated && !isUnmounted && !isContainer && hasNextLevel && drilldown;


Do we need an explicit isContainer check? container won't have an entry in the drilldown hierarchy, so hasNextLevel implies !isContainer, yes?

nealormsbee · 2025-12-01T19:58:48Z

src/components/externalCosts/rangeChart.js

+      responsive
+      height={height}
+      width="100%"


Total nit: can these match indentation with the other component props?

Note to self: just create a pre-commit hook that runs Prettier against the codease.

nealormsbee · 2025-12-01T20:11:48Z

src/pages/Allocations.js

+  // Load filters from URL on initial load or when URL changes
+  // Also validate that filters match the current aggregateBy level
+  useEffect(() => {
+    const currentSearchParams = new URLSearchParams(routerLocation.search);


This all makes sense logically, and it works. You can actually simplify it a bit, unless I'm missing something.

One of the neat things about using routerLocation is that re-renders will happen when it changes, so you don't actually need to track filters in a separate piece of state. You can get rid of [filters, setFilters] = useState([]); and all the calls to setFilters(). You can just use const filters = parseFiltersFromUrl(filterParam), and then have this useEffect() update the URL directly with navigate().

nealormsbee · 2025-12-01T20:14:30Z

package-lock.json

+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },


I don't think this is actually used anywhere nor added to package.json. Can you regenerate the lockfile when you push?

nealormsbee · 2025-12-01T20:20:00Z

src/services/allocation.js

+
+// Mock data for testing drilldown functionality when backend is not available
+// Only used when REACT_APP_USE_MOCK_DATA=true is explicitly set
+const getMockData = (aggregate, filters) => {


Nit: Can this function go in its own file alongside this one, so we keep test / mock utilities separate from core service logic?

CrazyCapislav added 2 commits November 12, 2025 13:53

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 <[email protected]>

github-actions bot added the needs-follow-up label Nov 12, 2025

Fix drilldown: disable click when no next level exists

11b0d02

Signed-off-by: Rahim <[email protected]>

CrazyCapislav force-pushed the feature/drilldown-namespace-2942 branch from e982cd8 to 11b0d02 Compare November 12, 2025 11:23

CrazyCapislav added 3 commits November 12, 2025 14:30

Fix filter parsing: use '+' instead of encodeURIComponent to avoid do…

3166177

…uble encoding Signed-off-by: Rahim <[email protected]>

Fix filter parsing: escape quotes in values and validate filter values

d995809

Signed-off-by: Rahim <[email protected]>

Fix filter property: use controllerName instead of controller for bac…

483e292

…kend API Signed-off-by: Rahim <[email protected]>

nealormsbee self-requested a review November 12, 2025 22:07

ameijer reviewed Nov 13, 2025

View reviewed changes

src/components/AllocationChart/SummaryChart.js Outdated Show resolved Hide resolved

Remove dead code: commented out isAnimationActive prop

de4b0d2

Signed-off-by: Rahim <[email protected]>

CrazyCapislav force-pushed the feature/drilldown-namespace-2942 branch from 8defee2 to de4b0d2 Compare November 13, 2025 20:59

ameijer reviewed Nov 13, 2025

View reviewed changes

src/services/allocation.js Show resolved Hide resolved

CrazyCapislav added 2 commits November 15, 2025 12:38

Add URL-based filter management for drilldown functionality

7b43cc6

Signed-off-by: Rahim <[email protected]>

Require explicit flag to enable mock data usage

7765020

Signed-off-by: Rahim <[email protected]>

CrazyCapislav force-pushed the feature/drilldown-namespace-2942 branch from 023443b to 7765020 Compare November 15, 2025 10:05

Merge branch 'main' into feature/drilldown-namespace-2942

d443ad6

Signed-off-by: Rahim <[email protected]>

CrazyCapislav requested a review from ameijer November 25, 2025 10:33

CrazyCapislav added 3 commits November 25, 2025 14:25

Restore ResponsiveContainer wrappers for charts

e8a6506

Signed-off-by: Rahim <[email protected]>

Revert "Restore ResponsiveContainer wrappers for charts"

7381f7d

Signed-off-by: Rahim <[email protected]>

Normalize controller filters during drilldown

88ebf55

Signed-off-by: Rahim <[email protected]>

nealormsbee reviewed Dec 1, 2025

View reviewed changes

Feature/drilldown namespace 2942 #131

Are you sure you want to change the base?

Feature/drilldown namespace 2942 #131

Conversation

CrazyCapislav commented Nov 12, 2025

What does this PR change?

Does this PR relate to any other PRs?

How will this PR impact users?

Does this PR address any GitHub or Zendesk issues?

How was this PR tested?

Does this PR require changes to documentation?

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?

Uh oh!

netlify bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for opencost-ui ready!

Uh oh!

nealormsbee commented Nov 12, 2025

Uh oh!

Uh oh!

ameijer commented Nov 13, 2025

Uh oh!

Uh oh!

CrazyCapislav commented Nov 15, 2025

Uh oh!

nealormsbee left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Nov 12, 2025 •

edited

Loading