@acarmisc/backstage-plugin-litellm 0.15.0 → 0.15.2

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { UsageStats } from './components/UsageStats';
 export { TeamUsage } from './components/TeamUsage';
 export { LiteLLMHomeWidget } from './components/LiteLLMHomeWidget';
 export type { LiteLLMHomeWidgetProps } from './components/LiteLLMHomeWidget';
+export { GenerateKeyDialog } from './components/GenerateKeyDialog';
 export { LiteLlmApi, liteLlmApiRef } from './api';
 export type { LiteLlmApiInterface } from './api';
 export * from './types';

package/dist/index.esm.js

@@ -834,6 +834,7 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
 import Button2 from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import Box3 from "@mui/material/Box";
@@ -913,6 +914,24 @@ function formatContextWindow(maxInput, maxOutput) {
   if (outPart) return `ctx ${outPart} out`;
   return null;
 }
+function compareKeys(a, b, sortKey) {
+  switch (sortKey) {
+    case "alias":
+      return (a.key_alias ?? "").localeCompare(b.key_alias ?? "");
+    case "created":
+      return a.created_at.localeCompare(b.created_at);
+    case "expires":
+      return (a.expires_at ?? "").localeCompare(b.expires_at ?? "");
+    case "budget":
+      return (a.max_budget ?? Infinity) - (b.max_budget ?? Infinity);
+    case "limits":
+      return (a.tpm_limit ?? Infinity) - (b.tpm_limit ?? Infinity) || (a.rpm_limit ?? Infinity) - (b.rpm_limit ?? Infinity);
+    case "models":
+      return (a.models ?? []).join(",").localeCompare((b.models ?? []).join(","));
+    default:
+      return 0;
+  }
+}
 var maskKey, shortKeyId, formatDate, keyToEditForm, KeysTable;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
@@ -963,13 +982,29 @@ var init_KeysTable = __esm({
       const [resetSpendConfirm, setResetSpendConfirm] = useState(false);
       const [resetSpendSubmitting, setResetSpendSubmitting] = useState(false);
       const [filterText, setFilterText] = useState("");
+      const [sortKey, setSortKey] = useState("created");
+      const [sortDirection, setSortDirection] = useState("desc");
+      const handleSort = (nextSortKey) => {
+        if (sortKey === nextSortKey) {
+          setSortDirection((current) => current === "asc" ? "desc" : "asc");
+        } else {
+          setSortKey(nextSortKey);
+          setSortDirection("asc");
+        }
+      };
       const filteredKeys = useMemo2(() => {
-        if (!filterText.trim()) return keys;
-        const q = filterText.toLowerCase();
-        return keys.filter(
-          (k) => (k.key_alias ?? "").toLowerCase().includes(q) || k.models?.some((m) => m.toLowerCase().includes(q))
-        );
-      }, [keys, filterText]);
+        let result = keys;
+        if (filterText.trim()) {
+          const q = filterText.toLowerCase();
+          result = keys.filter(
+            (k) => (k.key_alias ?? "").toLowerCase().includes(q) || k.models?.some((m) => m.toLowerCase().includes(q))
+          );
+        }
+        return [...result].sort((a, b) => {
+          const comparison = compareKeys(a, b, sortKey);
+          return sortDirection === "asc" ? comparison : -comparison;
+        });
+      }, [keys, filterText, sortKey, sortDirection]);
       const editSelectedModels = models.filter((m) => (editForm.models || []).includes(m.model_name));
       const handleOpenEdit = (k) => {
         setEditingKey(k);
@@ -1099,7 +1134,7 @@ var init_KeysTable = __esm({
                 "& td": { color: theme.palette.text.secondary }
               }) : void 0
             },
-            /* @__PURE__ */ React3.createElement(TableCell, null, /* @__PURE__ */ React3.createElement(Box3, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", sx: { fontWeight: 600 } }, key.key_alias || "\u2014"), key.blocked && /* @__PURE__ */ React3.createElement(StatusPill, { label: "Blocked", tone: "danger" }))),
+            /* @__PURE__ */ React3.createElement(TableCell, null, /* @__PURE__ */ React3.createElement(Box3, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2" }, key.key_alias || "\u2014"), key.blocked && /* @__PURE__ */ React3.createElement(StatusPill, { label: "Blocked", tone: "danger" }))),
             /* @__PURE__ */ React3.createElement(TableCell, null, /* @__PURE__ */ React3.createElement(Box3, { display: "flex", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ React3.createElement(
               Typography3,
               {
@@ -1181,7 +1216,8 @@ var init_KeysTable = __esm({
             TextField,
             {
               size: "small",
-              placeholder: "Filter by alias or model\u2026",
+              label: "Search alias or model",
+              placeholder: "Search alias or model\u2026",
               value: filterText,
               onChange: (e) => setFilterText(e.target.value),
               sx: { minWidth: 240 },
@@ -1221,7 +1257,7 @@ var init_KeysTable = __esm({
             "Generate New Key"
           ))
         },
-        /* @__PURE__ */ React3.createElement(TableContainer, null, /* @__PURE__ */ React3.createElement(Table, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React3.createElement(TableHead, null, /* @__PURE__ */ React3.createElement(TableRow, null, /* @__PURE__ */ React3.createElement(TableCell, null, "Alias"), /* @__PURE__ */ React3.createElement(TableCell, null, "Key ID"), /* @__PURE__ */ React3.createElement(TableCell, null, "Created"), /* @__PURE__ */ React3.createElement(TableCell, null, "Expires"), /* @__PURE__ */ React3.createElement(TableCell, null, "Budget"), /* @__PURE__ */ React3.createElement(TableCell, null, "TPM / RPM"), /* @__PURE__ */ React3.createElement(TableCell, null, "Models"), /* @__PURE__ */ React3.createElement(TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ React3.createElement(TableBody, null, renderTableBody())))
+        /* @__PURE__ */ React3.createElement(TableContainer, null, /* @__PURE__ */ React3.createElement(Table, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React3.createElement(TableHead, null, /* @__PURE__ */ React3.createElement(TableRow, null, /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "alias" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "alias", direction: sortKey === "alias" ? sortDirection : "asc", onClick: () => handleSort("alias") }, "Alias")), /* @__PURE__ */ React3.createElement(TableCell, null, "Key ID"), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "created" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "created", direction: sortKey === "created" ? sortDirection : "asc", onClick: () => handleSort("created") }, "Created")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "expires" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "expires", direction: sortKey === "expires" ? sortDirection : "asc", onClick: () => handleSort("expires") }, "Expires")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "budget" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "budget", direction: sortKey === "budget" ? sortDirection : "asc", onClick: () => handleSort("budget") }, "Budget")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "limits" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "limits", direction: sortKey === "limits" ? sortDirection : "asc", onClick: () => handleSort("limits") }, "TPM / RPM")), /* @__PURE__ */ React3.createElement(TableCell, { sortDirection: sortKey === "models" ? sortDirection : false }, /* @__PURE__ */ React3.createElement(TableSortLabel, { active: sortKey === "models", direction: sortKey === "models" ? sortDirection : "asc", onClick: () => handleSort("models") }, "Models")), /* @__PURE__ */ React3.createElement(TableCell, { align: "right" }, "Actions"))), /* @__PURE__ */ React3.createElement(TableBody, null, renderTableBody())))
       ), /* @__PURE__ */ React3.createElement(Dialog, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React3.createElement(DialogTitle, null, "Edit Key"), /* @__PURE__ */ React3.createElement(DialogContent, null, editingKey && /* @__PURE__ */ React3.createElement(Box3, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ React3.createElement(Typography3, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ React3.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ React3.createElement(
         TextField,
         {
@@ -1344,9 +1380,12 @@ import Autocomplete2 from "@mui/material/Autocomplete";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Alert from "@mui/material/Alert";
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import AccordionDetails from "@mui/material/AccordionDetails";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
-import { ContentCopy as ContentCopy2, Code } from "@mui/icons-material";
+import { ContentCopy as ContentCopy2, Code, ExpandMore } from "@mui/icons-material";
 function trimSlash(url) {
   return url.replace(/\/+$/, "");
 }
@@ -1784,7 +1823,7 @@ var init_GenerateKeyDialog = __esm({
           required: true,
           fullWidth: true
         }
-      ), /* @__PURE__ */ React4.createElement(
+      ), /* @__PURE__ */ React4.createElement(Accordion, { disableGutters: true, elevation: 0, sx: { border: "1px solid", borderColor: "divider", "&:before": { display: "none" } } }, /* @__PURE__ */ React4.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React4.createElement(ExpandMore, null) }, /* @__PURE__ */ React4.createElement(Typography4, { variant: "body2", fontWeight: 600 }, "Advanced")), /* @__PURE__ */ React4.createElement(AccordionDetails, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ React4.createElement(
         TextField2,
         {
           label: "TPM Limit",
@@ -1804,7 +1843,7 @@ var init_GenerateKeyDialog = __esm({
           helperText: "Max requests per minute this key can make across all models. Leave blank for no limit.",
           fullWidth: true
         }
-      ))), /* @__PURE__ */ React4.createElement(DialogActions2, null, newKeyValue ? /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ React4.createElement(
+      ))))), /* @__PURE__ */ React4.createElement(DialogActions2, null, newKeyValue ? /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Button3, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ React4.createElement(
         Button3,
         {
           onClick: handleGenerate,
@@ -2234,7 +2273,7 @@ import Collapse from "@mui/material/Collapse";
 import IconButton3 from "@mui/material/IconButton";
 import CircularProgress3 from "@mui/material/CircularProgress";
 import { alpha as alpha4 } from "@mui/material/styles";
-import { ExpandMore, Group } from "@mui/icons-material";
+import { ExpandMore as ExpandMore2, Group } from "@mui/icons-material";
 import {
   AreaChart as AreaChart2,
   Area as Area2,
@@ -2342,7 +2381,7 @@ var init_TeamUsage = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ React6.createElement(ExpandMore, null)
+        /* @__PURE__ */ React6.createElement(ExpandMore2, null)
       )), /* @__PURE__ */ React6.createElement(
         Box6,
         {
@@ -2442,6 +2481,10 @@ import Tooltip3 from "@mui/material/Tooltip";
 import Snackbar from "@mui/material/Snackbar";
 import Alert2 from "@mui/material/Alert";
 import { alpha as alpha5, useTheme as useTheme2 } from "@mui/material/styles";
+function isModelAllowedByTeam2(model, teamModels) {
+  if (!teamModels || teamModels.length === 0 || teamModels.includes(ALL_PROXY_MODELS2)) return true;
+  return teamModels.includes(model.model_name) || !!model.access_groups?.some((group) => teamModels.includes(group));
+}
 function fmtCostPerToken(cost) {
   if (cost === void 0 || cost === null) return "\u2014";
   if (cost === 0) return "$0";
@@ -2455,11 +2498,12 @@ function fmtTokens(n) {
   if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
   return String(n);
 }
-var ModelsTable;
+var ALL_PROXY_MODELS2, ModelsTable;
 var init_ModelsTable = __esm({
   "src/components/ModelsTable.tsx"() {
     "use strict";
     init_ui();
+    ALL_PROXY_MODELS2 = "all-proxy-models";
     ModelsTable = ({ allModels, teams, loading }) => {
       const theme = useTheme2();
       const [selectedTeamId, setSelectedTeamId] = useState5("");
@@ -2470,10 +2514,7 @@ var init_ModelsTable = __esm({
       );
       const filteredModels = useMemo5(() => {
         if (!selectedTeam) return [];
-        const teamModels = selectedTeam.models ?? [];
-        if (teamModels.length === 0) return allModels;
-        const allowed = new Set(teamModels);
-        return allModels.filter((m) => allowed.has(m.model_name));
+        return allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
       }, [allModels, selectedTeam]);
       const handleCopyModelId = useCallback((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
@@ -3259,9 +3300,11 @@ var LiteLLMHomeWidget = ({
 };
 
 // src/index.ts
+init_GenerateKeyDialog();
 init_api();
 export {
   DashboardHeader,
+  GenerateKeyDialog,
   KeysTable,
   LiteLLMHomeWidget,
   LiteLLMPage,