@acarmisc/backstage-plugin-litellm 0.15.1 → 0.15.3

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,
@@ -1891,6 +1930,7 @@ var init_UsageStats = __esm({
       usage,
       models,
       dateRange,
+      currentPreset,
       onDateRangeChange,
       loading,
       userInfo
@@ -1898,15 +1938,6 @@ var init_UsageStats = __esm({
       const chart = useChartTheme();
       const [selectedModel, setSelectedModel] = useState3("all");
       const [tab, setTab] = useState3("costs");
-      const selectedPreset = useMemo4(() => {
-        if (dateRange.start.toDateString() === dateRange.end.toDateString()) return "today";
-        const diffMs = dateRange.end.getTime() - dateRange.start.getTime();
-        const diffHours = diffMs / (1e3 * 60 * 60);
-        if (diffHours <= 26) return "24h";
-        const diffDays = Math.ceil(diffMs / (1e3 * 60 * 60 * 24));
-        if (diffDays <= 7) return "7d";
-        return "30d";
-      }, [dateRange]);
       const handlePresetChange = (preset) => {
         const end = /* @__PURE__ */ new Date();
         const start = /* @__PURE__ */ new Date();
@@ -1918,7 +1949,7 @@ var init_UsageStats = __esm({
           localStorage.setItem(PERIOD_LS_KEY, preset);
         } catch {
         }
-        onDateRangeChange({ start, end });
+        onDateRangeChange({ start, end }, preset);
       };
       const dailyData = useMemo4(
         () => (usage?.daily_usage ?? []).map((d) => ({
@@ -2057,7 +2088,7 @@ var init_UsageStats = __esm({
           select: true,
           size: "small",
           label: "Period",
-          value: selectedPreset,
+          value: currentPreset,
           onChange: (e) => handlePresetChange(e.target.value),
           sx: { minWidth: 160 }
         },
@@ -2067,7 +2098,7 @@ var init_UsageStats = __esm({
         SectionCard,
         {
           title: "Usage Analytics",
-          subtitle: `${PRESET_LABELS[selectedPreset]} \xB7 ${dateRange.start.toLocaleDateString()} \u2013 ${dateRange.end.toLocaleDateString()}`,
+          subtitle: `${PRESET_LABELS[currentPreset]} \xB7 ${dateRange.start.toLocaleDateString()} \u2013 ${dateRange.end.toLocaleDateString()}`,
           actions: periodSelect
         },
         /* @__PURE__ */ React5.createElement(MetricStrip, { metrics }),
@@ -2234,7 +2265,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 +2373,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 +2473,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 +2490,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 +2506,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));
@@ -2840,6 +2873,13 @@ var init_LiteLLMPage = __esm({
     LiteLLMPage = () => {
       const api = useApi(liteLlmApiRef);
       const [dateRange, setDateRange] = useState7(initDateRange);
+      const [currentPreset, setCurrentPreset] = useState7(() => {
+        try {
+          return localStorage.getItem(PERIOD_LS_KEY2) ?? "7d";
+        } catch {
+          return "7d";
+        }
+      });
       const [activeTab, setActiveTab] = useState7("overview");
       const [snackbar, setSnackbar] = useState7(null);
       const [generateDialogOpen, setGenerateDialogOpen] = useState7(false);
@@ -2886,11 +2926,14 @@ var init_LiteLLMPage = __esm({
         const endDate = dateRange.end.toISOString().split("T")[0];
         return api.getUsage(startDate, endDate);
       }, [api, dateRange]);
-      const handleDateRangeChange = useCallback3((range) => {
+      const handleDateRangeChange = useCallback3((range, preset) => {
         setDateRange(range);
+        if (preset) {
+          setCurrentPreset(preset);
+        }
         setTeamUsageCache({});
         setTeamUsageLoading({});
-      }, [setDateRange]);
+      }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = useCallback3(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
         setTeamUsageLoading((prev) => ({ ...prev, [teamId]: true }));
@@ -3055,6 +3098,7 @@ var init_LiteLLMPage = __esm({
           usage: usage ?? null,
           models: allModels ?? [],
           dateRange,
+          currentPreset,
           onDateRangeChange: handleDateRangeChange,
           loading: usageLoading,
           userInfo