@acarmisc/backstage-plugin-litellm 0.21.2 → 0.21.3

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",