@acarmisc/backstage-plugin-litellm 0.15.0 → 0.15.2

package/dist/index.cjs.js

@@ -913,7 +913,25 @@ function formatContextWindow(maxInput, maxOutput) {
   if (outPart) return `ctx ${outPart} out`;
   return null;
 }
-var import_react3, import_Table, import_TableBody, import_TableCell, import_TableContainer, import_TableHead, import_TableRow, import_Button2, import_IconButton, import_Box3, import_Typography3, import_Dialog, import_DialogTitle, import_DialogContent, import_DialogActions, import_TextField, import_CircularProgress, import_Autocomplete, import_Skeleton2, import_InputAdornment, import_styles3, import_icons_material2, maskKey, shortKeyId, formatDate, keyToEditForm, KeysTable;
+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 import_react3, import_Table, import_TableBody, import_TableCell, import_TableContainer, import_TableHead, import_TableRow, import_TableSortLabel, import_Button2, import_IconButton, import_Box3, import_Typography3, import_Dialog, import_DialogTitle, import_DialogContent, import_DialogActions, import_TextField, import_CircularProgress, import_Autocomplete, import_Skeleton2, import_InputAdornment, import_styles3, import_icons_material2, maskKey, shortKeyId, formatDate, keyToEditForm, KeysTable;
 var init_KeysTable = __esm({
   "src/components/KeysTable.tsx"() {
     "use strict";
@@ -924,6 +942,7 @@ var init_KeysTable = __esm({
     import_TableContainer = __toESM(require("@mui/material/TableContainer"));
     import_TableHead = __toESM(require("@mui/material/TableHead"));
     import_TableRow = __toESM(require("@mui/material/TableRow"));
+    import_TableSortLabel = __toESM(require("@mui/material/TableSortLabel"));
     import_Button2 = __toESM(require("@mui/material/Button"));
     import_IconButton = __toESM(require("@mui/material/IconButton"));
     import_Box3 = __toESM(require("@mui/material/Box"));
@@ -985,13 +1004,29 @@ var init_KeysTable = __esm({
       const [resetSpendConfirm, setResetSpendConfirm] = (0, import_react3.useState)(false);
       const [resetSpendSubmitting, setResetSpendSubmitting] = (0, import_react3.useState)(false);
       const [filterText, setFilterText] = (0, import_react3.useState)("");
+      const [sortKey, setSortKey] = (0, import_react3.useState)("created");
+      const [sortDirection, setSortDirection] = (0, import_react3.useState)("desc");
+      const handleSort = (nextSortKey) => {
+        if (sortKey === nextSortKey) {
+          setSortDirection((current) => current === "asc" ? "desc" : "asc");
+        } else {
+          setSortKey(nextSortKey);
+          setSortDirection("asc");
+        }
+      };
       const filteredKeys = (0, import_react3.useMemo)(() => {
-        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);
@@ -1121,7 +1156,7 @@ var init_KeysTable = __esm({
                 "& td": { color: theme.palette.text.secondary }
               }) : void 0
             },
-            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", sx: { fontWeight: 600 } }, key.key_alias || "\u2014"), key.blocked && /* @__PURE__ */ import_react3.default.createElement(StatusPill, { label: "Blocked", tone: "danger" }))),
+            /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2" }, key.key_alias || "\u2014"), key.blocked && /* @__PURE__ */ import_react3.default.createElement(StatusPill, { label: "Blocked", tone: "danger" }))),
             /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", alignItems: "center", gap: 0.5 }, /* @__PURE__ */ import_react3.default.createElement(
               import_Typography3.default,
               {
@@ -1203,7 +1238,8 @@ var init_KeysTable = __esm({
             import_TextField.default,
             {
               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 },
@@ -1243,7 +1279,7 @@ var init_KeysTable = __esm({
             "Generate New Key"
           ))
         },
-        /* @__PURE__ */ import_react3.default.createElement(import_TableContainer.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Table.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react3.default.createElement(import_TableHead.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableRow.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Alias"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Key ID"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Created"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Expires"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Budget"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "TPM / RPM"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Models"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { align: "right" }, "Actions"))), /* @__PURE__ */ import_react3.default.createElement(import_TableBody.default, null, renderTableBody())))
+        /* @__PURE__ */ import_react3.default.createElement(import_TableContainer.default, null, /* @__PURE__ */ import_react3.default.createElement(import_Table.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react3.default.createElement(import_TableHead.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableRow.default, null, /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "alias" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "alias", direction: sortKey === "alias" ? sortDirection : "asc", onClick: () => handleSort("alias") }, "Alias")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, null, "Key ID"), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "created" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "created", direction: sortKey === "created" ? sortDirection : "asc", onClick: () => handleSort("created") }, "Created")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "expires" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "expires", direction: sortKey === "expires" ? sortDirection : "asc", onClick: () => handleSort("expires") }, "Expires")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "budget" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "budget", direction: sortKey === "budget" ? sortDirection : "asc", onClick: () => handleSort("budget") }, "Budget")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "limits" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "limits", direction: sortKey === "limits" ? sortDirection : "asc", onClick: () => handleSort("limits") }, "TPM / RPM")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { sortDirection: sortKey === "models" ? sortDirection : false }, /* @__PURE__ */ import_react3.default.createElement(import_TableSortLabel.default, { active: sortKey === "models", direction: sortKey === "models" ? sortDirection : "asc", onClick: () => handleSort("models") }, "Models")), /* @__PURE__ */ import_react3.default.createElement(import_TableCell.default, { align: "right" }, "Actions"))), /* @__PURE__ */ import_react3.default.createElement(import_TableBody.default, null, renderTableBody())))
       ), /* @__PURE__ */ import_react3.default.createElement(import_Dialog.default, { open: !!editingKey, onClose: handleCloseEdit, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ import_react3.default.createElement(import_DialogTitle.default, null, "Edit Key"), /* @__PURE__ */ import_react3.default.createElement(import_DialogContent.default, null, editingKey && /* @__PURE__ */ import_react3.default.createElement(import_Box3.default, { display: "flex", flexDirection: "column", gap: 2, mt: 1 }, /* @__PURE__ */ import_react3.default.createElement(import_Typography3.default, { variant: "body2", color: "text.secondary" }, /* @__PURE__ */ import_react3.default.createElement("code", { style: { fontFamily: "monospace", color: "inherit" } }, maskKey(editingKey.key))), /* @__PURE__ */ import_react3.default.createElement(
         import_TextField.default,
         {
@@ -1467,7 +1503,7 @@ function formatContextWindow2(maxInput, maxOutput) {
   if (outPart) return `ctx ${outPart} out`;
   return null;
 }
-var import_react4, import_Box4, import_Typography4, import_Dialog2, import_DialogTitle2, import_DialogContent2, import_DialogActions2, import_TextField2, import_MenuItem, import_Button3, import_IconButton2, import_CircularProgress2, import_Autocomplete2, import_Checkbox, import_FormControlLabel, import_Alert, import_Tabs, import_Tab, import_icons_material3, generateDefaultAlias, emptyForm, ALL_PROXY_MODELS, SNIPPET_FILE_HINTS, SnippetTabs, GenerateKeyDialog;
+var import_react4, import_Box4, import_Typography4, import_Dialog2, import_DialogTitle2, import_DialogContent2, import_DialogActions2, import_TextField2, import_MenuItem, import_Button3, import_IconButton2, import_CircularProgress2, import_Autocomplete2, import_Checkbox, import_FormControlLabel, import_Alert, import_Accordion, import_AccordionSummary, import_AccordionDetails, import_Tabs, import_Tab, import_icons_material3, generateDefaultAlias, emptyForm, ALL_PROXY_MODELS, SNIPPET_FILE_HINTS, SnippetTabs, GenerateKeyDialog;
 var init_GenerateKeyDialog = __esm({
   "src/components/GenerateKeyDialog.tsx"() {
     "use strict";
@@ -1487,6 +1523,9 @@ var init_GenerateKeyDialog = __esm({
     import_Checkbox = __toESM(require("@mui/material/Checkbox"));
     import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"));
     import_Alert = __toESM(require("@mui/material/Alert"));
+    import_Accordion = __toESM(require("@mui/material/Accordion"));
+    import_AccordionSummary = __toESM(require("@mui/material/AccordionSummary"));
+    import_AccordionDetails = __toESM(require("@mui/material/AccordionDetails"));
     import_Tabs = __toESM(require("@mui/material/Tabs"));
     import_Tab = __toESM(require("@mui/material/Tab"));
     import_icons_material3 = require("@mui/icons-material");
@@ -1806,7 +1845,7 @@ var init_GenerateKeyDialog = __esm({
           required: true,
           fullWidth: true
         }
-      ), /* @__PURE__ */ import_react4.default.createElement(
+      ), /* @__PURE__ */ import_react4.default.createElement(import_Accordion.default, { disableGutters: true, elevation: 0, sx: { border: "1px solid", borderColor: "divider", "&:before": { display: "none" } } }, /* @__PURE__ */ import_react4.default.createElement(import_AccordionSummary.default, { expandIcon: /* @__PURE__ */ import_react4.default.createElement(import_icons_material3.ExpandMore, null) }, /* @__PURE__ */ import_react4.default.createElement(import_Typography4.default, { variant: "body2", fontWeight: 600 }, "Advanced")), /* @__PURE__ */ import_react4.default.createElement(import_AccordionDetails.default, { sx: { display: "flex", flexDirection: "column", gap: 2 } }, /* @__PURE__ */ import_react4.default.createElement(
         import_TextField2.default,
         {
           label: "TPM Limit",
@@ -1826,7 +1865,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__ */ import_react4.default.createElement(import_DialogActions2.default, null, newKeyValue ? /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ import_react4.default.createElement(
+      ))))), /* @__PURE__ */ import_react4.default.createElement(import_DialogActions2.default, null, newKeyValue ? /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose, variant: "contained", color: "success" }, "Done") : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_Button3.default, { onClick: handleClose }, "Cancel"), /* @__PURE__ */ import_react4.default.createElement(
         import_Button3.default,
         {
           onClick: handleGenerate,
@@ -2423,6 +2462,10 @@ var init_TeamUsage = __esm({
 });
 
 // src/components/ModelsTable.tsx
+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";
@@ -2436,7 +2479,7 @@ function fmtTokens(n) {
   if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
   return String(n);
 }
-var import_react7, import_Box7, import_Table4, import_TableBody4, import_TableCell4, import_TableContainer4, import_TableHead4, import_TableRow4, import_Typography7, import_MenuItem3, import_Select, import_FormControl, import_InputLabel, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert2, import_styles5, ModelsTable;
+var import_react7, import_Box7, import_Table4, import_TableBody4, import_TableCell4, import_TableContainer4, import_TableHead4, import_TableRow4, import_Typography7, import_MenuItem3, import_Select, import_FormControl, import_InputLabel, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert2, import_styles5, ALL_PROXY_MODELS2, ModelsTable;
 var init_ModelsTable = __esm({
   "src/components/ModelsTable.tsx"() {
     "use strict";
@@ -2459,6 +2502,7 @@ var init_ModelsTable = __esm({
     import_Alert2 = __toESM(require("@mui/material/Alert"));
     init_ui();
     import_styles5 = require("@mui/material/styles");
+    ALL_PROXY_MODELS2 = "all-proxy-models";
     ModelsTable = ({ allModels, teams, loading }) => {
       const theme = (0, import_styles5.useTheme)();
       const [selectedTeamId, setSelectedTeamId] = (0, import_react7.useState)("");
@@ -2469,10 +2513,7 @@ var init_ModelsTable = __esm({
       );
       const filteredModels = (0, import_react7.useMemo)(() => {
         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 = (0, import_react7.useCallback)((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
@@ -3121,6 +3162,7 @@ var init_LiteLLMPage = __esm({
 var index_exports = {};
 __export(index_exports, {
   DashboardHeader: () => DashboardHeader,
+  GenerateKeyDialog: () => GenerateKeyDialog,
   KeysTable: () => KeysTable,
   LiteLLMHomeWidget: () => LiteLLMHomeWidget,
   LiteLLMPage: () => LiteLLMPage,
@@ -3268,5 +3310,6 @@ var LiteLLMHomeWidget = ({
 };
 
 // src/index.ts
+init_GenerateKeyDialog();
 init_api();
 //# sourceMappingURL=index.cjs.js.map