@acarmisc/backstage-plugin-litellm 0.21.2 → 0.22.0

package/dist/index.cjs.js

@@ -3401,7 +3401,7 @@ function fmtTokens(n) {
   if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
   return String(n);
 }
-var import_react9, import_Box9, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_Typography9, import_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_TextField5, import_InputAdornment2, import_icons_material7, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert4, import_styles6, ALL_PROXY_MODELS2, ModelsTable;
+var import_react9, import_Box9, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_TableSortLabel2, import_Typography9, import_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_TextField5, import_InputAdornment2, import_icons_material7, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert4, import_styles6, ALL_PROXY_MODELS2, ModelsTable;
 var init_ModelsTable = __esm({
   "src/components/ModelsTable.tsx"() {
     "use strict";
@@ -3413,6 +3413,7 @@ var init_ModelsTable = __esm({
     import_TableContainer5 = __toESM(require("@mui/material/TableContainer"));
     import_TableHead5 = __toESM(require("@mui/material/TableHead"));
     import_TableRow5 = __toESM(require("@mui/material/TableRow"));
+    import_TableSortLabel2 = __toESM(require("@mui/material/TableSortLabel"));
     import_Typography9 = __toESM(require("@mui/material/Typography"));
     import_MenuItem4 = __toESM(require("@mui/material/MenuItem"));
     import_Select = __toESM(require("@mui/material/Select"));
@@ -3433,6 +3434,8 @@ var init_ModelsTable = __esm({
       const [selectedTeamId, setSelectedTeamId] = (0, import_react9.useState)("");
       const [filterText, setFilterText] = (0, import_react9.useState)("");
       const [copiedSnackbar, setCopiedSnackbar] = (0, import_react9.useState)(false);
+      const [sortKey, setSortKey] = (0, import_react9.useState)("model_name");
+      const [sortDirection, setSortDirection] = (0, import_react9.useState)("asc");
       const selectedTeam = (0, import_react9.useMemo)(
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
@@ -3443,14 +3446,62 @@ var init_ModelsTable = __esm({
       }, [allModels, selectedTeam]);
       const filteredModels = (0, import_react9.useMemo)(() => {
         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 = (0, import_react9.useCallback)((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
       }, []);
+      const handleSort = (0, import_react9.useCallback)((key) => {
+        if (sortKey === key) {
+          setSortDirection((prev) => prev === "asc" ? "desc" : "asc");
+        } else {
+          setSortKey(key);
+          setSortDirection("asc");
+        }
+      }, [sortKey]);
       const modeColor = (mode) => {
         switch (mode) {
           case "chat":
@@ -3516,7 +3567,7 @@ var init_ModelsTable = __esm({
             hint: "Try a different search term"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ import_react9.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react9.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Model ID"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Mode"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, "Input Cost"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, "Output Cost"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, "Max Input"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right" }, "Max Output"), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Capabilities"))), /* @__PURE__ */ import_react9.default.createElement(import_TableBody5.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react9.default.createElement(import_Tooltip.default, { title: m.model_name, placement: "top" }, /* @__PURE__ */ import_react9.default.createElement(
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ import_react9.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react9.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { sortDirection: sortKey === "model_name" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "model_name", direction: sortKey === "model_name" ? sortDirection : "asc", onClick: () => handleSort("model_name") }, "Model ID")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { sortDirection: sortKey === "mode" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "mode", direction: sortKey === "mode" ? sortDirection : "asc", onClick: () => handleSort("mode") }, "Mode")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "input_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "input_cost_per_token", direction: sortKey === "input_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("input_cost_per_token") }, "Input Cost")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "output_cost_per_token" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "output_cost_per_token", direction: sortKey === "output_cost_per_token" ? sortDirection : "asc", onClick: () => handleSort("output_cost_per_token") }, "Output Cost")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "max_input_tokens" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "max_input_tokens", direction: sortKey === "max_input_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_input_tokens") }, "Max Input")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, { align: "right", sortDirection: sortKey === "max_output_tokens" ? sortDirection : false }, /* @__PURE__ */ import_react9.default.createElement(import_TableSortLabel2.default, { active: sortKey === "max_output_tokens", direction: sortKey === "max_output_tokens" ? sortDirection : "asc", onClick: () => handleSort("max_output_tokens") }, "Max Output")), /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, "Capabilities"))), /* @__PURE__ */ import_react9.default.createElement(import_TableBody5.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react9.default.createElement(import_TableRow5.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react9.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Box9.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react9.default.createElement(import_Tooltip.default, { title: m.model_name, placement: "top" }, /* @__PURE__ */ import_react9.default.createElement(
           "span",
           {
             role: "button",
@@ -3712,10 +3763,10 @@ var init_AuditLog = __esm({
       const [page, setPage] = (0, import_react10.useState)(0);
       const [pageSize, setPageSize] = (0, import_react10.useState)(25);
       const [filters, setFilters] = (0, import_react10.useState)({});
-      const fetchParams = (0, import_react10.useCallback)(
+      const fetchParams = (0, import_react10.useMemo)(
         () => ({ page: page + 1, page_size: pageSize, ...filters }),
         [page, pageSize, filters]
-      )();
+      );
       const { value, loading, error } = (0, import_react_use2.useAsync)(
         () => api.getAuditLogs(fetchParams),
         [api, fetchParams]