feat(allocation): custom label aggregation in home + report dropdowns

app/components/report-builder-side-panel.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { Button } from "@carbon/react";
+import { Button, ComboBox, Theme } from "@carbon/react";
 import { DeleteOutlined } from "@mui/icons-material";
 import {
   REPORT_WINDOW_PRESETS,
@@ -63,6 +63,54 @@ function isExternalCostQuery(query: Report["query"]): query is ExternalCostRepor
   return query.layer === "externalCost";
 }
 
+type GroupingOption = { label: string; value: string };
+
+function GroupingComboBox({
+  index,
+  grouping,
+  onChange,
+}: {
+  index: number;
+  grouping: string;
+  onChange: (value: string) => void;
+}) {
+  const presetMatch = ALLOCATION_GROUPING_OPTIONS.find((o) => o.value === grouping);
+  const selectedItem: GroupingOption =
+    presetMatch ?? { label: grouping, value: grouping };
+  const items: GroupingOption[] = presetMatch
+    ? ALLOCATION_GROUPING_OPTIONS
+    : [...ALLOCATION_GROUPING_OPTIONS, selectedItem];
+
+  return (
+    <Theme theme="white">
+      <ComboBox
+        id={index === 0 ? "report-grouping-0" : `report-grouping-${index}`}
+        aria-label={`Grouping ${index + 1}`}
+        size="md"
+        items={items}
+        itemToString={(item: GroupingOption | null) => item?.label ?? ""}
+        selectedItem={selectedItem}
+        allowCustomValue
+        onChange={({
+          selectedItem: picked,
+          inputValue,
+        }: {
+          selectedItem?: GroupingOption | null;
+          inputValue?: string | null;
+        }) => {
+          if (picked) {
+            onChange(picked.value);
+            return;
+          }
+          const typed = (inputValue ?? "").trim();
+          if (!typed || typed === grouping) return;
+          onChange(typed.includes(":") ? typed : `label:${typed}`);
+        }}
+      />
+    </Theme>
+  );
+}
+
 function toFilterOptionsByLayer(layer: ReportLayer) {
   switch (layer) {
     case "cloudCost":
@@ -414,19 +462,13 @@ export default function ReportBuilderSidePanel({
             <div className="space-y-2">
               {groupings.map((grouping, index) => (
                 <div key={`grouping-${index}-${grouping}`} className="flex items-center gap-2">
-                  <select
-                    id={index === 0 ? "report-grouping-0" : undefined}
-                    aria-label={`Grouping ${index + 1}`}
-                    value={grouping}
-                    onChange={(event) => setGroupingAt(index, event.target.value)}
-                    className="h-10 min-w-0 flex-1 rounded border border-[var(--cds-border-subtle)] bg-[var(--cds-layer)] px-2.5 text-[13px] text-[var(--cds-text-primary)]"
-                  >
-                    {ALLOCATION_GROUPING_OPTIONS.map((groupingOption) => (
-                      <option key={groupingOption.value} value={groupingOption.value}>
-                        {groupingOption.label}
-                      </option>
-                    ))}
-                  </select>
+                  <div className="min-w-0 flex-1">
+                    <GroupingComboBox
+                      index={index}
+                      grouping={grouping}
+                      onChange={(value) => setGroupingAt(index, value)}
+                    />
+                  </div>
                   <button
                     type="button"
                     disabled={groupings.length <= 1}

app/components/scoped-views.tsx

@@ -1,4 +1,4 @@
-import { Select, SelectItem } from "@carbon/react";
+import { Select, SelectItem, ComboBox } from "@carbon/react";
 import { Tune } from "@mui/icons-material";
 import {
   CLOUD_WINDOW_OPTIONS,
@@ -7,6 +7,8 @@ import {
 } from "~/constants/cloud-cost-options";
 import { REPORT_ACCUMULATE_OPTIONS } from "~/types/report";
 
+type AggregateOption = { name: string; value: string };
+
 export const ALLOCATION_WINDOW_OPTIONS = [
   { name: "Today", value: "today" },
   { name: "Yesterday", value: "yesterday" },
@@ -31,6 +33,10 @@ export const ALLOCATION_AGGREGATE_OPTIONS = [
   { name: "StatefulSet", value: "statefulset" },
   { name: "Pod", value: "pod" },
   { name: "Container", value: "container" },
+  {
+    name: "label:app.kubernetes.io/name",
+    value: "label:app.kubernetes.io/name",
+  },
 ];
 
 export const DEFAULT_ALLOCATION_FILTERS = {
@@ -193,6 +199,52 @@ interface AllocationFilterControlsProps {
   compact?: boolean;
 }
 
+function AllocationAggregateByCombo({
+  idPrefix,
+  aggregateBy,
+  onAggregateByChange,
+}: {
+  idPrefix: string;
+  aggregateBy: string;
+  onAggregateByChange: (v: string) => void;
+}) {
+  const presetMatch = ALLOCATION_AGGREGATE_OPTIONS.find(
+    (o) => o.value === aggregateBy,
+  );
+  const selectedItem: AggregateOption =
+    presetMatch ?? { name: aggregateBy, value: aggregateBy };
+  const items: AggregateOption[] = presetMatch
+    ? ALLOCATION_AGGREGATE_OPTIONS
+    : [...ALLOCATION_AGGREGATE_OPTIONS, selectedItem];
+
+  return (
+    <ComboBox
+      id={`${idPrefix}-aggregate`}
+      titleText="Aggregate by"
+      size="sm"
+      items={items}
+      itemToString={(item: AggregateOption | null) => item?.name ?? ""}
+      selectedItem={selectedItem}
+      allowCustomValue
+      onChange={({
+        selectedItem: picked,
+        inputValue,
+      }: {
+        selectedItem?: AggregateOption | null;
+        inputValue?: string | null;
+      }) => {
+        if (picked) {
+          onAggregateByChange(picked.value);
+          return;
+        }
+        const typed = (inputValue ?? "").trim();
+        if (!typed || typed === aggregateBy) return;
+        onAggregateByChange(typed.includes(":") ? typed : `label:${typed}`);
+      }}
+    />
+  );
+}
+
 export function AllocationFilterControls({
   window,
   aggregateBy,
@@ -227,17 +279,11 @@ export function AllocationFilterControls({
           <SelectItem key={o.value} value={o.value} text={o.name} />
         ))}
       </Select>
-      <Select
-        id={`${idPrefix}-aggregate`}
-        labelText="Aggregate by"
-        value={aggregateBy}
-        size="sm"
-        onChange={(e) => onAggregateByChange(e.target.value)}
-      >
-        {ALLOCATION_AGGREGATE_OPTIONS.map((o) => (
-          <SelectItem key={o.value} value={o.value} text={o.name} />
-        ))}
-      </Select>
+      <AllocationAggregateByCombo
+        idPrefix={idPrefix}
+        aggregateBy={aggregateBy}
+        onAggregateByChange={onAggregateByChange}
+      />
       <Select
         id={`${idPrefix}-accumulate`}
         labelText="Granularity"

app/types/report.ts

@@ -138,6 +138,10 @@ export const ALLOCATION_GROUPING_OPTIONS = [
   { label: "Service", value: "service" },
   { label: "Pod", value: "pod" },
   { label: "Container", value: "container" },
+  {
+    label: "label:app.kubernetes.io/name",
+    value: "label:app.kubernetes.io/name",
+  },
 ];
 
 export const CLOUD_COST_GROUPING_OPTIONS = [