@acarmisc/backstage-plugin-litellm 0.40.0 → 0.41.0

package/dist/index.esm.js

@@ -1640,6 +1640,7 @@ import DialogTitle from "@mui/material/DialogTitle";
 import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
 import CircularProgress from "@mui/material/CircularProgress";
 import Skeleton2 from "@mui/material/Skeleton";
 import InputAdornment from "@mui/material/InputAdornment";
@@ -1778,6 +1779,7 @@ var init_KeysTable = __esm({
       const [deleteSubmitting, setDeleteSubmitting] = useState3(false);
       const clipboard = useCopyToClipboard();
       const [filterText, setFilterText] = useState3("");
+      const [teamFilter, setTeamFilter] = useState3("");
       const [sortKey, setSortKey] = useState3("created");
       const [sortDirection, setSortDirection] = useState3("desc");
       const handleSort = (nextSortKey) => {
@@ -1788,9 +1790,16 @@ var init_KeysTable = __esm({
           setSortDirection("asc");
         }
       };
+      const teamIds = useMemo2(
+        () => [...new Set(keys.map((k) => k.team_id).filter((t) => !!t))].sort(),
+        [keys]
+      );
       const filteredKeys = useMemo2(() => {
         let result = keys;
         result = filterKeysByStatus(result, filter);
+        if (teamFilter) {
+          result = result.filter((k) => k.team_id === teamFilter);
+        }
         if (filterText.trim()) {
           const q = filterText.toLowerCase();
           result = result.filter(
@@ -1801,7 +1810,7 @@ var init_KeysTable = __esm({
           const comparison = compareKeys(a, b, sortKey);
           return sortDirection === "asc" ? comparison : -comparison;
         });
-      }, [keys, filterText, sortKey, sortDirection, filter]);
+      }, [keys, filterText, teamFilter, sortKey, sortDirection, filter]);
       const handleOpenEdit = (k) => {
         onEditKey(k);
       };
@@ -1860,10 +1869,10 @@ var init_KeysTable = __esm({
       };
       const renderTableBody = () => {
         if (loading) {
-          return /* @__PURE__ */ jsx8(TableRow, { children: /* @__PURE__ */ jsx8(TableCell, { colSpan: 8, sx: { py: 2 }, children: /* @__PURE__ */ jsx8(Skeleton2, { variant: "rounded", height: 140 }) }) });
+          return /* @__PURE__ */ jsx8(TableRow, { children: /* @__PURE__ */ jsx8(TableCell, { colSpan: 9, sx: { py: 2 }, children: /* @__PURE__ */ jsx8(Skeleton2, { variant: "rounded", height: 140 }) }) });
         }
         if (filteredKeys.length === 0) {
-          return /* @__PURE__ */ jsx8(TableRow, { children: /* @__PURE__ */ jsx8(TableCell, { colSpan: 8, children: filterText ? /* @__PURE__ */ jsx8(
+          return /* @__PURE__ */ jsx8(TableRow, { children: /* @__PURE__ */ jsx8(TableCell, { colSpan: 9, children: filterText || teamFilter ? /* @__PURE__ */ jsx8(
             EmptyState,
             {
               message: "No keys match that filter",
@@ -1907,6 +1916,7 @@ var init_KeysTable = __esm({
                   /* @__PURE__ */ jsx8(Typography5, { variant: "body2", children: key.key_alias || "\u2014" }),
                   key.blocked && /* @__PURE__ */ jsx8(StatusPill, { label: "Blocked", tone: "danger" })
                 ] }) }),
+                /* @__PURE__ */ jsx8(TableCell, { children: /* @__PURE__ */ jsx8(Typography5, { variant: "body2", color: "text.secondary", children: key.team_id || "\u2014" }) }),
                 /* @__PURE__ */ jsx8(TableCell, { children: /* @__PURE__ */ jsxs7(Box7, { display: "flex", alignItems: "center", gap: 0.5, children: [
                   /* @__PURE__ */ jsx8(
                     Typography5,
@@ -1999,7 +2009,7 @@ var init_KeysTable = __esm({
           SectionCard,
           {
             title: "Virtual Keys",
-            subtitle: loading ? "Loading\u2026" : `${filteredKeys.length}${filterText ? ` of ${keys.length}` : ""} key${filteredKeys.length === 1 ? "" : "s"}`,
+            subtitle: loading ? "Loading\u2026" : `${filteredKeys.length}${filterText || teamFilter ? ` of ${keys.length}` : ""} key${filteredKeys.length === 1 ? "" : "s"}`,
             flush: true,
             actions: /* @__PURE__ */ jsxs7(Fragment2, { children: [
               /* @__PURE__ */ jsx8(
@@ -2016,6 +2026,21 @@ var init_KeysTable = __esm({
                   }
                 }
               ),
+              /* @__PURE__ */ jsxs7(
+                TextField,
+                {
+                  select: true,
+                  size: "small",
+                  label: "Team",
+                  value: teamFilter,
+                  onChange: (e) => setTeamFilter(e.target.value),
+                  sx: { minWidth: 160 },
+                  children: [
+                    /* @__PURE__ */ jsx8(MenuItem, { value: "", children: "All teams" }),
+                    teamIds.map((id) => /* @__PURE__ */ jsx8(MenuItem, { value: id, children: id }, id))
+                  ]
+                }
+              ),
               expiredKeys.length > 0 && /* @__PURE__ */ jsxs7(
                 Button2,
                 {
@@ -2054,6 +2079,7 @@ var init_KeysTable = __esm({
               /* @__PURE__ */ jsx8(TableContainer, { children: /* @__PURE__ */ jsxs7(Table, { size: "small", sx: dataTableSx, children: [
                 /* @__PURE__ */ jsx8(TableHead, { children: /* @__PURE__ */ jsxs7(TableRow, { children: [
                   /* @__PURE__ */ jsx8(TableCell, { sortDirection: sortKey === "alias" ? sortDirection : false, children: /* @__PURE__ */ jsx8(TableSortLabel, { active: sortKey === "alias", direction: sortKey === "alias" ? sortDirection : "asc", onClick: () => handleSort("alias"), children: "Alias" }) }),
+                  /* @__PURE__ */ jsx8(TableCell, { children: "Team" }),
                   /* @__PURE__ */ jsx8(TableCell, { children: "Key ID" }),
                   /* @__PURE__ */ jsx8(TableCell, { sortDirection: sortKey === "created" ? sortDirection : false, children: /* @__PURE__ */ jsx8(TableSortLabel, { active: sortKey === "created", direction: sortKey === "created" ? sortDirection : "asc", onClick: () => handleSort("created"), children: "Created" }) }),
                   /* @__PURE__ */ jsx8(TableCell, { sortDirection: sortKey === "expires" ? sortDirection : false, children: /* @__PURE__ */ jsx8(TableSortLabel, { active: sortKey === "expires", direction: sortKey === "expires" ? sortDirection : "asc", onClick: () => handleSort("expires"), children: "Expires" }) }),
@@ -2472,7 +2498,7 @@ import DialogTitle2 from "@mui/material/DialogTitle";
 import DialogContent2 from "@mui/material/DialogContent";
 import DialogActions2 from "@mui/material/DialogActions";
 import TextField2 from "@mui/material/TextField";
-import MenuItem from "@mui/material/MenuItem";
+import MenuItem2 from "@mui/material/MenuItem";
 import Button3 from "@mui/material/Button";
 import IconButton3 from "@mui/material/IconButton";
 import CircularProgress2 from "@mui/material/CircularProgress";
@@ -3046,7 +3072,7 @@ var init_KeyFormDialog = __esm({
                     value: generateForm.duration || "30d",
                     onChange: (e) => setFormData({ duration: e.target.value }),
                     fullWidth: true,
-                    children: DEFAULT_KEY_DURATIONS.map((duration) => /* @__PURE__ */ jsx10(MenuItem, { value: duration, children: formatDurationLabel(duration) }, duration))
+                    children: DEFAULT_KEY_DURATIONS.map((duration) => /* @__PURE__ */ jsx10(MenuItem2, { value: duration, children: formatDurationLabel(duration) }, duration))
                   }
                 ),
                 generateForm.duration && /* @__PURE__ */ jsx10(Typography7, { variant: "caption", color: "text.secondary", children: expiryPreview(generateForm.duration) })
@@ -3148,7 +3174,7 @@ import Checkbox2 from "@mui/material/Checkbox";
 import FormControlLabel2 from "@mui/material/FormControlLabel";
 import Autocomplete2 from "@mui/material/Autocomplete";
 import CircularProgress3 from "@mui/material/CircularProgress";
-import MenuItem2 from "@mui/material/MenuItem";
+import MenuItem3 from "@mui/material/MenuItem";
 import Box10 from "@mui/material/Box";
 import Divider2 from "@mui/material/Divider";
 import Typography8 from "@mui/material/Typography";
@@ -3570,7 +3596,7 @@ var init_ManageTeamDialog = __esm({
                             disabled: submitting || unlimited,
                             helperText: "Spend-reset period for the team budget",
                             fullWidth: true,
-                            children: durationOptions.map((o) => /* @__PURE__ */ jsx11(MenuItem2, { value: o.value, children: o.label }, o.value))
+                            children: durationOptions.map((o) => /* @__PURE__ */ jsx11(MenuItem3, { value: o.value, children: o.label }, o.value))
                           }
                         )
                       ]
@@ -3950,7 +3976,7 @@ import Paper5 from "@mui/material/Paper";
 import Box11 from "@mui/material/Box";
 import Typography9 from "@mui/material/Typography";
 import TextField4 from "@mui/material/TextField";
-import MenuItem3 from "@mui/material/MenuItem";
+import MenuItem4 from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
 import Alert3 from "@mui/material/Alert";
 import Button5 from "@mui/material/Button";
@@ -4232,7 +4258,7 @@ var init_UsageStats = __esm({
           value: currentPreset,
           onChange: (e) => handlePresetChange(e.target.value),
           sx: { minWidth: 160 },
-          children: Object.keys(PRESET_LABELS).map((p) => /* @__PURE__ */ jsx12(MenuItem3, { value: p, children: PRESET_LABELS[p] }, p))
+          children: Object.keys(PRESET_LABELS).map((p) => /* @__PURE__ */ jsx12(MenuItem4, { value: p, children: PRESET_LABELS[p] }, p))
         }
       );
       if (usageError) {
@@ -4293,8 +4319,8 @@ var init_UsageStats = __esm({
                       onChange: (e) => setSelectedModel(e.target.value),
                       sx: { minWidth: 220 },
                       children: [
-                        /* @__PURE__ */ jsx12(MenuItem3, { value: "all", children: "All models" }),
-                        models.filter((m) => modelsInPeriod.includes(m.model_name)).map((m) => /* @__PURE__ */ jsx12(MenuItem3, { value: m.model_name, children: m.model_name }, m.model_name))
+                        /* @__PURE__ */ jsx12(MenuItem4, { value: "all", children: "All models" }),
+                        models.filter((m) => modelsInPeriod.includes(m.model_name)).map((m) => /* @__PURE__ */ jsx12(MenuItem4, { value: m.model_name, children: m.model_name }, m.model_name))
                       ]
                     }
                   )
@@ -5421,7 +5447,7 @@ import TableHead5 from "@mui/material/TableHead";
 import TableRow5 from "@mui/material/TableRow";
 import TableSortLabel2 from "@mui/material/TableSortLabel";
 import Typography13 from "@mui/material/Typography";
-import MenuItem4 from "@mui/material/MenuItem";
+import MenuItem5 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
@@ -5560,7 +5586,7 @@ var init_ModelsTable = __esm({
                     value: selectedTeamId,
                     label: "Team",
                     onChange: (e) => setSelectedTeamId(e.target.value),
-                    children: teams.map((t) => /* @__PURE__ */ jsx16(MenuItem4, { value: t.team_id, children: t.team_alias ?? t.team_id }, t.team_id))
+                    children: teams.map((t) => /* @__PURE__ */ jsx16(MenuItem5, { value: t.team_id, children: t.team_alias ?? t.team_id }, t.team_id))
                   }
                 )
               ] }),
@@ -7109,7 +7135,7 @@ import Box19 from "@mui/material/Box";
 import Typography17 from "@mui/material/Typography";
 import FormControl2 from "@mui/material/FormControl";
 import Select2 from "@mui/material/Select";
-import MenuItem5 from "@mui/material/MenuItem";
+import MenuItem6 from "@mui/material/MenuItem";
 import Skeleton7 from "@mui/material/Skeleton";
 import { AreaChart as AreaChart3, Area as Area3, XAxis as XAxis3, Tooltip as Tooltip8, ResponsiveContainer as ResponsiveContainer3 } from "recharts";
 import { useApi as useApi6 } from "@backstage/core-plugin-api";
@@ -7239,9 +7265,9 @@ var LiteLLMHomeWidget = ({
           displayEmpty: true,
           inputProps: { "aria-label": "Usage period" },
           children: [
-            /* @__PURE__ */ jsx21(MenuItem5, { value: "today", children: "Today" }),
-            /* @__PURE__ */ jsx21(MenuItem5, { value: "7d", children: "7d" }),
-            /* @__PURE__ */ jsx21(MenuItem5, { value: "30d", children: "30d" })
+            /* @__PURE__ */ jsx21(MenuItem6, { value: "today", children: "Today" }),
+            /* @__PURE__ */ jsx21(MenuItem6, { value: "7d", children: "7d" }),
+            /* @__PURE__ */ jsx21(MenuItem6, { value: "30d", children: "30d" })
           ]
         }
       ) })