@acarmisc/backstage-plugin-litellm 0.46.0 → 0.47.0

package/dist/index.esm.js

@@ -5056,10 +5056,12 @@ import TableContainer4 from "@mui/material/TableContainer";
 import Collapse2 from "@mui/material/Collapse";
 import IconButton6 from "@mui/material/IconButton";
 import Button6 from "@mui/material/Button";
+import TextField5 from "@mui/material/TextField";
+import InputAdornment3 from "@mui/material/InputAdornment";
 import CircularProgress4 from "@mui/material/CircularProgress";
 import { alpha as alpha10 } from "@mui/material/styles";
 import MuiTooltip from "@mui/material/Tooltip";
-import { ExpandMore as ExpandMore3, Group, Add as Add2, LockOutlined, GroupAddOutlined } from "@mui/icons-material";
+import { ExpandMore as ExpandMore3, Group, Add as Add2, LockOutlined, GroupAddOutlined, Search as SearchIcon, Close as CloseIcon } from "@mui/icons-material";
 import {
   AreaChart as AreaChart2,
   Area as Area2,
@@ -5092,21 +5094,28 @@ var init_TeamUsage = __esm({
     fmtUsd2 = (n) => `$${(n ?? 0).toFixed(2)}`;
     monoSx = { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 11 };
     fmtShare = (pct) => `${pct.toFixed(pct > 0 && pct < 1 ? 1 : 0)}%`;
-    MemberUsageCards = ({ usage }) => {
+    MemberUsageCards = ({ usage, filterText }) => {
       const hidden = usage.budget_hidden === true;
       if (!usage.members.length) {
         return /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "No members or activity in this period." });
       }
+      const query = (filterText ?? "").trim().toLowerCase();
+      const matches = (m) => {
+        if (!query) return true;
+        const haystacks = m.user_id === null ? ["Unattributed"] : [m.display_name, m.user_email, m.user_id];
+        return haystacks.some((h) => h && h.toLowerCase().includes(query));
+      };
+      const visible = usage.members.filter(matches);
       const people = usage.members.filter((m) => m.user_id !== null).length;
       return /* @__PURE__ */ jsxs14(Box14, { children: [
         !hidden && people > 0 && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", sx: { display: "block", mb: 1 }, children: `Team spend ${fmtUsd2(usage.total_spend)} \xB7 avg ${fmtUsd2(usage.total_spend / people)} per member` }),
-        /* @__PURE__ */ jsx15(
+        visible.length === 0 ? /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", sx: { display: "block", py: 1 }, children: "No members match that filter." }) : /* @__PURE__ */ jsx15(
           Box14,
           {
             role: "list",
             "aria-label": "Usage by member",
             sx: { display: "grid", gap: 1.5, gridTemplateColumns: "repeat(auto-fill, minmax(230px, 1fr))" },
-            children: usage.members.map((m) => {
+            children: visible.map((m) => {
               const name = m.display_name ?? m.user_email ?? m.user_id;
               let sub = null;
               if (m.display_name) sub = m.user_email ?? m.user_id;
@@ -5149,11 +5158,20 @@ var init_TeamUsage = __esm({
         )
       ] });
     };
-    TeamKeyUsageTable = ({ usage }) => {
+    TeamKeyUsageTable = ({ usage, filterText }) => {
       const hidden = usage.budget_hidden === true;
       if (!usage.keys.length) {
         return /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "This team has no keys." });
       }
+      const query = (filterText ?? "").trim().toLowerCase();
+      const visible = usage.keys.filter((k) => {
+        if (!query) return true;
+        const haystacks = [k.key_alias, k.key, k.user_email, k.user_id, k.display_name];
+        return haystacks.some((h) => h && h.toLowerCase().includes(query));
+      });
+      if (visible.length === 0) {
+        return /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", sx: { display: "block", py: 1 }, children: "No keys match that filter." });
+      }
       return /* @__PURE__ */ jsx15(TableContainer4, { component: Paper8, variant: "outlined", sx: { borderRadius: 1.5 }, children: /* @__PURE__ */ jsxs14(Table4, { size: "small", sx: dataTableSx, "aria-label": "Keys by member", children: [
         /* @__PURE__ */ jsx15(TableHead4, { children: /* @__PURE__ */ jsxs14(TableRow4, { children: [
           /* @__PURE__ */ jsx15(TableCell4, { children: "Key" }),
@@ -5165,7 +5183,7 @@ var init_TeamUsage = __esm({
           /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Tokens" }),
           /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Requests" })
         ] }) }),
-        /* @__PURE__ */ jsx15(TableBody4, { children: usage.keys.map((k) => {
+        /* @__PURE__ */ jsx15(TableBody4, { children: visible.map((k) => {
           const owner = k.display_name ?? k.user_email ?? k.user_id;
           return /* @__PURE__ */ jsxs14(TableRow4, { children: [
             /* @__PURE__ */ jsxs14(TableCell4, { children: [
@@ -5191,7 +5209,9 @@ var init_TeamUsage = __esm({
     };
     TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, memberUsageFailed, keyUsage, keyUsageLoading, keyUsageFailed, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand, vectorStores, mcpServers }) => {
       const [expanded, setExpanded] = useState9(false);
+      const [teamSearch, setTeamSearch] = useState9("");
       const chart = useChartTheme();
+      const searchValue = teamSearch.trim() ? teamSearch : "";
       const handleExpandChange = (newExpanded) => {
         setExpanded(newExpanded);
         if (newExpanded && onExpand) {
@@ -5389,14 +5409,33 @@ var init_TeamUsage = __esm({
           renderNamedTags("MCP servers", team.object_permission?.mcp_servers, mcpServers),
           renderDailySpendSection(),
           (memberUsageLoading || memberUsage || memberUsageFailed) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
-            sectionLabel("Usage by member"),
-            memberUsage && /* @__PURE__ */ jsx15(MemberUsageCards, { usage: memberUsage }),
+            /* @__PURE__ */ jsxs14(Box14, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1, children: [
+              sectionLabel("Usage by member"),
+              /* @__PURE__ */ jsx15(
+                TextField5,
+                {
+                  size: "small",
+                  placeholder: "Filter members by name or email\u2026",
+                  value: teamSearch,
+                  onChange: (e) => setTeamSearch(e.target.value),
+                  sx: { width: { xs: "100%", sm: 260 } },
+                  InputProps: {
+                    startAdornment: /* @__PURE__ */ jsx15(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx15(SearchIcon, { fontSize: "small", color: "disabled" }) }),
+                    endAdornment: searchValue ? /* @__PURE__ */ jsx15(InputAdornment3, { position: "end", children: /* @__PURE__ */ jsx15(IconButton6, { size: "small", onClick: () => setTeamSearch(""), "aria-label": "Clear member filter", children: /* @__PURE__ */ jsx15(CloseIcon, { fontSize: "small" }) }) }) : void 0
+                  }
+                }
+              )
+            ] }),
+            memberUsage && /* @__PURE__ */ jsx15(MemberUsageCards, { usage: memberUsage, filterText: searchValue }),
             !memberUsage && memberUsageFailed && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", children: "Could not load per-member usage" }),
             !memberUsage && !memberUsageFailed && /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
           ] }),
           (keyUsageLoading || keyUsage || keyUsageFailed) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
-            sectionLabel("Keys by member"),
-            keyUsage && /* @__PURE__ */ jsx15(TeamKeyUsageTable, { usage: keyUsage }),
+            /* @__PURE__ */ jsxs14(Box14, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 1, mb: 1, children: [
+              sectionLabel("Keys by member"),
+              /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", noWrap: true, children: "Filter member keys, owner or alias" })
+            ] }),
+            keyUsage && /* @__PURE__ */ jsx15(TeamKeyUsageTable, { usage: keyUsage, filterText: searchValue }),
             !keyUsage && keyUsageFailed && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", children: "Could not load per-key usage" }),
             !keyUsage && !keyUsageFailed && /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
           ] }),
@@ -5558,8 +5597,8 @@ import MenuItem5 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
-import TextField5 from "@mui/material/TextField";
-import InputAdornment3 from "@mui/material/InputAdornment";
+import TextField6 from "@mui/material/TextField";
+import InputAdornment4 from "@mui/material/InputAdornment";
 import { Search as Search2 } from "@mui/icons-material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Tooltip7 from "@mui/material/Tooltip";
@@ -5698,7 +5737,7 @@ var init_ModelsTable = __esm({
                 )
               ] }),
               /* @__PURE__ */ jsx16(
-                TextField5,
+                TextField6,
                 {
                   label: "Filter Models",
                   size: "small",
@@ -5707,7 +5746,7 @@ var init_ModelsTable = __esm({
                   disabled: !selectedTeamId,
                   sx: { minWidth: 240, mb: 2 },
                   InputProps: {
-                    startAdornment: /* @__PURE__ */ jsx16(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx16(Search2, { fontSize: "small" }) })
+                    startAdornment: /* @__PURE__ */ jsx16(InputAdornment4, { position: "start", children: /* @__PURE__ */ jsx16(Search2, { fontSize: "small" }) })
                   }
                 }
               )