@acarmisc/backstage-plugin-litellm 0.21.2 → 0.22.0

package/dist/index.esm.js

@@ -3393,6 +3393,7 @@ import TableCell5 from "@mui/material/TableCell";
 import TableContainer5 from "@mui/material/TableContainer";
 import TableHead5 from "@mui/material/TableHead";
 import TableRow5 from "@mui/material/TableRow";
+import TableSortLabel2 from "@mui/material/TableSortLabel";
 import Typography9 from "@mui/material/Typography";
 import MenuItem4 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
@@ -3434,6 +3435,8 @@ var init_ModelsTable = __esm({
       const [selectedTeamId, setSelectedTeamId] = useState7("");
       const [filterText, setFilterText] = useState7("");
       const [copiedSnackbar, setCopiedSnackbar] = useState7(false);
+      const [sortKey, setSortKey] = useState7("model_name");
+      const [sortDirection, setSortDirection] = useState7("asc");
       const selectedTeam = useMemo7(
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
@@ -3444,14 +3447,62 @@ var init_ModelsTable = __esm({
       }, [allModels, selectedTeam]);
       const filteredModels = useMemo7(() => {
         const q = filterText.trim().toLowerCase();
-        if (!q) return teamModels;
-        return teamModels.filter(
-          (model) => model.model_name.toLowerCase().includes(q) || (model.access_groups || []).some((group) => group.toLowerCase().includes(q))
-        );
-      }, [teamModels, filterText]);
+        let models = teamModels;
+        if (q) {
+          models = teamModels.filter(
+            (model) => model.model_name.toLowerCase().includes(q) || (model.access_groups || []).some((group) => group.toLowerCase().includes(q))
+          );
+        }
+        return [...models].sort((a, b) => {
+          let aVal;
+          let bVal;
+          switch (sortKey) {
+            case "model_name":
+              aVal = a.model_name;
+              bVal = b.model_name;
+              break;
+            case "mode":
+              aVal = a.mode;
+              bVal = b.mode;
+              break;
+            case "input_cost_per_token":
+              aVal = a.input_cost_per_token ?? 0;
+              bVal = b.input_cost_per_token ?? 0;
+              break;
+            case "output_cost_per_token":
+              aVal = a.output_cost_per_token ?? 0;
+              bVal = b.output_cost_per_token ?? 0;
+              break;
+            case "max_input_tokens":
+              aVal = a.max_input_tokens ?? 0;
+              bVal = b.max_input_tokens ?? 0;
+              break;
+            case "max_output_tokens":
+              aVal = a.max_output_tokens ?? 0;
+              bVal = b.max_output_tokens ?? 0;
+              break;
+            default:
+              return 0;
+          }
+          if (aVal === void 0 || aVal === null) aVal = "";
+          if (bVal === void 0 || bVal === null) bVal = "";
+          if (typeof aVal === "string" && typeof bVal === "string") {
+            return sortDirection === "asc" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+          }
+          return sortDirection === "asc" ? aVal - bVal : bVal - aVal;
+        });
+      }, [teamModels, filterText, sortKey, sortDirection]);
       const handleCopyModelId = useCallback((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
       }, []);
+      const handleSort = useCallback((key) => {
+        if (sortKey === key) {
+          setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+        } else {
+          setSortKey(key);
+          setSortDirection("asc");
+        }
+      }, [sortKey]);
       const modeColor = (mode) => {
         switch (mode) {
           case "chat":
@@ -3517,7 +3568,7 @@ var init_ModelsTable = __esm({
             hint: "Try a different search term"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ React9.createElement(TableContainer5, null, /* @__PURE__ */ React9.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React9.createElement(TableHead5, null, /* @__PURE__ */ React9.createElement(TableRow5, null, /* @__PURE__ */ React9.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React9.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React9.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React9.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React9.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React9.createElement(TableCell5, null, /* @__PURE__ */ React9.createElement(Box9, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React9.createElement(Tooltip3, { title: m.model_name, placement: "top" }, /* @__PURE__ */ React9.createElement(
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ React9.createElement(TableContainer5, null, /* @__PURE__ */ React9.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React9.createElement(TableHead5, null, /* @__PURE__ */ React9.createElement(TableRow5, null, /* @__PURE__ */ React9.createElement(TableCell5, { sortDirection: sortKey === "model_name" ? sortDirection : false }, /* @__PURE__ */ React9.createElement(TableSortLabel2, { active: sortKey === "model_name", direction: sortKey === "model_name" ? sortDirection : "asc", onClick: () => handleSort("model_name") }, "Model ID")), /* @__PURE__ */ React9.createElement(TableCell5, { sortDirection: sortKey === "mode" ? sortDirection : false }, /* @__PURE__ */ React9.createElement(TableSortLabel2, { active: sortKey === "mode", direction: sortKey === "mode" ? sortDirection : "asc", onClick: () => handleSort("mode") }, "Mode")), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right", sortDirection: sortKey === "input_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ React9.createElement(TableSortLabel2, { active: sortKey === "input_cost_per_token", direction: sortKey === "input_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("input_cost_per_token") }, "Input Cost")), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right", sortDirection: sortKey === "output_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ React9.createElement(TableSortLabel2, { active: sortKey === "output_cost_per_token", direction: sortKey === "output_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("output_cost_per_token") }, "Output Cost")), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right", sortDirection: sortKey === "max_input_tokens" ? sortDirection : false }, /* @__PURE__ */ React9.createElement(TableSortLabel2, { active: sortKey === "max_input_tokens", direction: sortKey === "max_input_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_input_tokens") }, "Max Input")), /* @__PURE__ */ React9.createElement(TableCell5, { align: "right", sortDirection: sortKey === "max_output_tokens" ? sortDirection : false }, /* @__PURE__ */ React9.createElement(TableSortLabel2, { active: sortKey === "max_output_tokens", direction: sortKey === "max_output_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_output_tokens") }, "Max Output")), /* @__PURE__ */ React9.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React9.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React9.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React9.createElement(TableCell5, null, /* @__PURE__ */ React9.createElement(Box9, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React9.createElement(Tooltip3, { title: m.model_name, placement: "top" }, /* @__PURE__ */ React9.createElement(
           "span",
           {
             role: "button",
@@ -3574,7 +3625,7 @@ var init_ModelsTable = __esm({
 });
 
 // src/components/AuditLog.tsx
-import React10, { useState as useState8, useCallback as useCallback2 } from "react";
+import React10, { useState as useState8, useMemo as useMemo8 } from "react";
 import Box10 from "@mui/material/Box";
 import Typography10 from "@mui/material/Typography";
 import Table6 from "@mui/material/Table";
@@ -3713,10 +3764,10 @@ var init_AuditLog = __esm({
       const [page, setPage] = useState8(0);
       const [pageSize, setPageSize] = useState8(25);
       const [filters, setFilters] = useState8({});
-      const fetchParams = useCallback2(
+      const fetchParams = useMemo8(
         () => ({ page: page + 1, page_size: pageSize, ...filters }),
         [page, pageSize, filters]
-      )();
+      );
       const { value, loading, error } = useAsync2(
         () => api.getAuditLogs(fetchParams),
         [api, fetchParams]
@@ -3837,7 +3888,7 @@ var LiteLLMPage_exports = {};
 __export(LiteLLMPage_exports, {
   LiteLLMPage: () => LiteLLMPage
 });
-import React11, { useState as useState9, useCallback as useCallback3, useMemo as useMemo8 } from "react";
+import React11, { useState as useState9, useCallback as useCallback2, useMemo as useMemo9 } from "react";
 import Box11 from "@mui/material/Box";
 import Snackbar2 from "@mui/material/Snackbar";
 import Alert6 from "@mui/material/Alert";
@@ -3898,7 +3949,7 @@ var init_LiteLLMPage = __esm({
         const t = searchParams.get("tab");
         return isPageTab(t) ? t : "overview";
       });
-      const selectTab = useCallback3(
+      const selectTab = useCallback2(
         (tab) => {
           setActiveTab(tab);
           setSearchParams(
@@ -3960,7 +4011,7 @@ var init_LiteLLMPage = __esm({
         async () => objectPermsEnabled ? api.getMcpServers().catch(() => []) : [],
         [api, objectPermsEnabled]
       );
-      const teams = useMemo8(() => {
+      const teams = useMemo9(() => {
         if (!allTeams?.length) return [];
         if (!userInfo) return allTeams;
         const userId = userInfo.user_id;
@@ -3977,7 +4028,7 @@ var init_LiteLLMPage = __esm({
         const endDate = dateRange.end.toISOString().split("T")[0];
         return api.getUsage(startDate, endDate);
       }, [api, dateRange]);
-      const handleDateRangeChange = useCallback3((range, preset) => {
+      const handleDateRangeChange = useCallback2((range, preset) => {
         setDateRange(range);
         if (preset) {
           setCurrentPreset(preset);
@@ -3985,7 +4036,7 @@ var init_LiteLLMPage = __esm({
         setTeamUsageCache({});
         setTeamUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
-      const loadTeamUsage = useCallback3(async (teamId) => {
+      const loadTeamUsage = useCallback2(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
         setTeamUsageLoading((prev) => ({ ...prev, [teamId]: true }));
         try {
@@ -3999,7 +4050,7 @@ var init_LiteLLMPage = __esm({
           setTeamUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, teamUsageCache, teamUsageLoading]);
-      const allowedModels = useMemo8(() => {
+      const allowedModels = useMemo9(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
         const teamModels = teams?.flatMap((t) => t.models ?? []);
@@ -4012,7 +4063,7 @@ var init_LiteLLMPage = __esm({
         ]);
         return allModels.filter((m) => allowed.has(m.model_name));
       }, [allModels, userInfo, teams]);
-      const handleGenerateKey = useCallback3(
+      const handleGenerateKey = useCallback2(
         async (request) => {
           try {
             const response = await api.generateKey(request);
@@ -4026,7 +4077,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUpdateKey = useCallback3(
+      const handleUpdateKey = useCallback2(
         async (keyId, request) => {
           try {
             await api.updateKey(keyId, request);
@@ -4039,7 +4090,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleBlockKey = useCallback3(
+      const handleBlockKey = useCallback2(
         async (keyId) => {
           try {
             await api.blockKey(keyId);
@@ -4051,7 +4102,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleUnblockKey = useCallback3(
+      const handleUnblockKey = useCallback2(
         async (keyId) => {
           try {
             await api.unblockKey(keyId);
@@ -4063,7 +4114,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleResetKeySpend = useCallback3(
+      const handleResetKeySpend = useCallback2(
         async (keyId) => {
           try {
             await api.resetKeySpend(keyId);
@@ -4075,7 +4126,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handleDeleteKey = useCallback3(
+      const handleDeleteKey = useCallback2(
         async (keyId) => {
           try {
             await api.deleteKey(keyId);
@@ -4092,7 +4143,7 @@ var init_LiteLLMPage = __esm({
         },
         [api, refreshKeys]
       );
-      const handlePruneExpiredKeys = useCallback3(
+      const handlePruneExpiredKeys = useCallback2(
         async () => {
           try {
             const result = await api.pruneExpiredKeys();