Feature/drilldown namespace 2942

src/components/AllocationChart/RangeChart.js

@@ -6,7 +6,6 @@ import {
   YAxis,
   CartesianGrid,
   Tooltip,
-  ResponsiveContainer,
 } from "recharts";
 import { primary, greyscale, browns } from "../../constants/colors";
 import { toCurrency } from "../../util";
@@ -144,25 +143,26 @@ const RangeChart = ({ data, currency, height }) => {
   };
 
   return (
-    <ResponsiveContainer width="100%" height={height}>
-      <BarChart
-        data={barData}
-        margin={{ top: 30, right: 30, left: 30, bottom: 12 }}
-      >
-        <CartesianGrid strokeDasharray="3 3" />
-        <XAxis dataKey="start" />
-        <YAxis />
-        <Tooltip content={<CustomTooltip />} />
-        {barLabels.map((barLabel, i) => (
-          <Bar
-            key={i}
-            dataKey={barLabel.dataKey}
-            stackId="a"
-            fill={barLabel.fill}
-          />
-        ))}
-      </BarChart>
-    </ResponsiveContainer>
+    <BarChart
+      data={barData}
+      margin={{ top: 30, right: 30, left: 30, bottom: 12 }}
+      responsive
+      width="100%"
+      height={height}
+    >
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis dataKey="start" />
+      <YAxis />
+      <Tooltip content={<CustomTooltip />} />
+      {barLabels.map((barLabel, i) => (
+        <Bar
+          key={i}
+          dataKey={barLabel.dataKey}
+          stackId="a"
+          fill={barLabel.fill}
+        />
+      ))}
+    </BarChart>
   );
 };
 

src/components/AllocationChart/SummaryChart.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { ResponsiveContainer, PieChart, Pie, Cell } from "recharts";
+import { PieChart, Pie, Cell } from "recharts";
 import { primary, greyscale, browns } from "../../constants/colors";
 import { toCurrency } from "../../util";
 
@@ -75,29 +75,29 @@ const SummaryChart = ({ top, other, idle, currency, height }) => {
   };
 
   return (
-    <ResponsiveContainer width="100%" height={height}>
-      <PieChart>
-        <Pie
-          data={pieData}
-          dataKey="value"
-          nameKey="name"
-          label={renderLabel}
-          labelLine
-          // niko: if tooltips error, try disabling animation
-          // isAnimationActive={false}
-          animationDuration={400}
-          cy="90%"
-          outerRadius="140%"
-          innerRadius="60%"
-          startAngle={180}
-          endAngle={0}
-        >
-          {pieData.map((datum, i) => (
-            <Cell key={i} fill={datum.fill} />
-          ))}
-        </Pie>
-      </PieChart>
-    </ResponsiveContainer>
+    <PieChart
+      responsive
+      width="100%"
+      height={height}
+    >
+      <Pie
+        data={pieData}
+        dataKey="value"
+        nameKey="name"
+        label={renderLabel}
+        labelLine
+        animationDuration={400}
+        cy="90%"
+        outerRadius="140%"
+        innerRadius="60%"
+        startAngle={180}
+        endAngle={0}
+      >
+        {pieData.map((datum, i) => (
+          <Cell key={i} fill={datum.fill} />
+        ))}
+      </Pie>
+    </PieChart>
   );
 };
 

src/components/FilterBreadcrumb.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+
+const FilterBreadcrumb = ({ filters, onNavigate }) => {
+  if (!filters || filters.length === 0) {
+    return null;
+  }
+
+  const hierarchy = ["namespace", "controllerKind", "controllerName", "pod", "container"];
+  const hierarchyLabels = {
+    namespace: "Namespace",
+    controllerKind: "Controller Kind",
+    controllerName: "Controller",
+    pod: "Pod",
+    container: "Container",
+  };
+
+  const breadcrumbItems = [
+    {
+      label: "All Results",
+      level: -1,
+      isClickable: true,
+    },
+  ];
+
+  // Build breadcrumb items from filters
+  filters.forEach((filter, index) => {
+    const property = filter.property;
+    const value = filter.value;
+    const level = hierarchy.indexOf(property);
+
+    if (level >= 0) {
+      breadcrumbItems.push({
+        label: value,
+        level: index,
+        property: property,
+        isClickable: index < filters.length - 1, // Last item is not clickable
+      });
+    }
+  });
+
+  const handleClick = (event, item) => {
+    event.preventDefault();
+    if (item.isClickable && onNavigate) {
+      onNavigate(item.level);
+    }
+  };
+
+  return (
+    <Breadcrumbs
+      separator={<NavigateNextIcon fontSize="small" />}
+      aria-label="filter breadcrumb"
+      sx={{ marginTop: 1, marginBottom: 1 }}
+    >
+      {breadcrumbItems.map((item, index) => {
+        const key = `${item.level}-${item.label}-${index}`;
+        if (item.isClickable) {
+          return (
+            <Link
+              key={key}
+              component="button"
+              variant="body2"
+              onClick={(e) => handleClick(e, item)}
+              sx={{
+                cursor: "pointer",
+                textDecoration: "none",
+                "&:hover": {
+                  textDecoration: "underline",
+                },
+              }}
+            >
+              {item.label}
+            </Link>
+          );
+        } else {
+          return (
+            <Typography key={key} variant="body2" color="text.primary">
+              {item.label}
+            </Typography>
+          );
+        }
+      })}
+    </Breadcrumbs>
+  );
+};
+
+export default React.memo(FilterBreadcrumb);
+

src/components/allocationReport.js

@@ -53,6 +53,8 @@ const AllocationReport = ({
   cumulativeData,
   totalData,
   currency,
+  aggregateBy,
+  drilldown,
 }) => {
   if (allocationData.length === 0) {
     return (
@@ -169,7 +171,30 @@ const AllocationReport = ({
                 efficiency = "Inf";
               }
 
-              // Do not allow drill-down for idle and unallocated rows
+              // Do not allow drill-down for idle, unallocated, unmounted, or if no next level exists
+              // According to issue #2942, drilldown should work from namespace level
+              const drilldownHierarchy = {
+                namespace: "controllerKind",
+                controllerKind: "controller",
+                controller: "pod",
+                pod: "container",
+              };
+              const hasNextLevel = drilldownHierarchy[aggregateBy] !== undefined;
+              // Only allow drilldown if there's a next level (hasNextLevel implies !isContainer)
+              const canDrilldown = !isIdle && !isUnallocated && !isUnmounted && hasNextLevel && drilldown;
+
+              const rowProps = canDrilldown
+                ? {
+                    onClick: () => drilldown(row),
+                    sx: {
+                      cursor: "pointer",
+                      "&:hover": {
+                        backgroundColor: "rgba(0, 0, 0, 0.04)",
+                      },
+                    },
+                  }
+                : {};
+
               if (isIdle || isUnallocated || isUnmounted) {
                 return (
                   <TableRow key={key}>
@@ -199,7 +224,7 @@ const AllocationReport = ({
               }
 
               return (
-                <TableRow key={key}>
+                <TableRow key={key} {...rowProps}>
                   <TableCell align="left">{row.name}</TableCell>
                   <TableCell align="right">
                     {toCurrency(row.cpuCost, currency)}

src/components/cloudCost/cloudCostChart/rangeChart.js

@@ -5,7 +5,6 @@ import {
   YAxis,
   CartesianGrid,
   Tooltip,
-  ResponsiveContainer,
   Cell,
 } from "recharts";
 import { primary, greyscale, browns } from "../../../constants/colors";
@@ -243,32 +242,33 @@ const RangeChart = ({ data, currency, height }) => {
   });
 
   return (
-    <ResponsiveContainer height={height} width={"100%"}>
-      <BarChart
-        data={orderedBars}
-        margin={{ top: 30, right: 35, left: 30, bottom: 45 }}
-      >
-        <CartesianGrid strokeDasharray={"3 3"} vertical={false} />
-        <XAxis dataKey={"key"} />
-        <YAxis tickFormatter={(val) => toCurrency(val, currency, 2, true)} />
-        <Tooltip content={<CustomTooltip />} wrapperStyle={{ zIndex: 1000 }} />
+    <BarChart
+      data={orderedBars}
+      margin={{ top: 30, right: 35, left: 30, bottom: 45 }}
+      responsive
+      height={height}
+      width="100%"
+    >
+      <CartesianGrid strokeDasharray={"3 3"} vertical={false} />
+      <XAxis dataKey={"key"} />
+      <YAxis tickFormatter={(val) => toCurrency(val, currency, 2, true)} />
+      <Tooltip content={<CustomTooltip />} wrapperStyle={{ zIndex: 1000 }} />
 
-        {new Array(10).fill(0).map((item, idx) => (
-          <Bar
-            dataKey={(entry) => (entry.items[idx] ? entry.items[idx][1] : null)}
-            stackId="x"
-          >
-            {orderedBars.map((bar) =>
-              bar.items[idx] ? (
-                <Cell fill={keyToFill[bar.items[idx][0]]} />
-              ) : (
-                <Cell />
-              ),
-            )}
-          </Bar>
-        ))}
-      </BarChart>
-    </ResponsiveContainer>
+      {new Array(10).fill(0).map((item, idx) => (
+        <Bar
+          dataKey={(entry) => (entry.items[idx] ? entry.items[idx][1] : null)}
+          stackId="x"
+        >
+          {orderedBars.map((bar) =>
+            bar.items[idx] ? (
+              <Cell fill={keyToFill[bar.items[idx][0]]} />
+            ) : (
+              <Cell />
+            ),
+          )}
+        </Bar>
+      ))}
+    </BarChart>
   );
 };
 

src/components/cloudCost/cloudCostDetails.js

@@ -4,7 +4,6 @@ import Warnings from "../../components/Warnings";
 import CircularProgress from "@mui/material/CircularProgress";
 
 import {
-  ResponsiveContainer,
   CartesianGrid,
   Legend,
   XAxis,
@@ -140,11 +139,6 @@ const CloudCostDetails = ({
           )}
           {data && (
             <div style={{ display: "flex", marginTop: "2.5rem" }}>
-              <ResponsiveContainer
-                height={250}
-                id={"cloud-cost-drilldown"}
-                width={"100%"}
-              >
                 <BarChart
                   data={itemData}
                   margin={{
@@ -153,6 +147,10 @@ const CloudCostDetails = ({
                     left: 20,
                     right: 0,
                   }}
+                responsive
+                height={250}
+                width="100%"
+                id={"cloud-cost-drilldown"}
                 >
                   <CartesianGrid vertical={false} />
                   <Legend verticalAlign={"bottom"} />
@@ -165,7 +163,6 @@ const CloudCostDetails = ({
                     }
                   />
                 </BarChart>
-              </ResponsiveContainer>
             </div>
           )}
         </Paper>

src/components/externalCosts/rangeChart.js

@@ -5,7 +5,6 @@ import {
   YAxis,
   CartesianGrid,
   Tooltip,
-  ResponsiveContainer,
   Cell,
 } from "recharts";
 import { primary, greyscale, browns } from "../../constants/colors";
@@ -193,10 +192,12 @@ const RangeChart = ({ data, currency, height, aggregateBy }) => {
   });
 
   return (
-    <ResponsiveContainer height={height} width={"100%"}>
       <BarChart
         data={orderedBars}
         margin={{ top: 30, right: 35, left: 30, bottom: 45 }}
+        responsive
+        height={height}
+        width="100%"
       >
         <CartesianGrid strokeDasharray={"3 3"} vertical={false} />
         <XAxis dataKey={"key"} />
@@ -218,7 +219,6 @@ const RangeChart = ({ data, currency, height, aggregateBy }) => {
           </Bar>
         ))}
       </BarChart>
-    </ResponsiveContainer>
   );
 };