@acarmisc/backstage-plugin-litellm 0.18.0 → 0.19.0

package/dist/index.esm.js

@@ -3004,6 +3004,9 @@ import MenuItem4 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
+import TextField5 from "@mui/material/TextField";
+import InputAdornment2 from "@mui/material/InputAdornment";
+import { Search as Search2 } from "@mui/icons-material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Tooltip3 from "@mui/material/Tooltip";
 import Snackbar from "@mui/material/Snackbar";
@@ -3035,15 +3038,23 @@ var init_ModelsTable = __esm({
     ModelsTable = ({ allModels, teams, loading }) => {
       const theme = useTheme2();
       const [selectedTeamId, setSelectedTeamId] = useState6("");
+      const [filterText, setFilterText] = useState6("");
       const [copiedSnackbar, setCopiedSnackbar] = useState6(false);
       const selectedTeam = useMemo6(
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
       );
-      const filteredModels = useMemo6(() => {
+      const teamModels = useMemo6(() => {
         if (!selectedTeam) return [];
         return allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
       }, [allModels, selectedTeam]);
+      const filteredModels = useMemo6(() => {
+        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]);
       const handleCopyModelId = useCallback((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
       }, []);
@@ -3065,9 +3076,9 @@ var init_ModelsTable = __esm({
         SectionCard,
         {
           title: "Available Models",
-          subtitle: selectedTeam ? `${filteredModels.length} model${filteredModels.length !== 1 ? "s" : ""} in ${selectedTeam.team_alias ?? selectedTeam.team_id}` : "Select a team to view its models"
+          subtitle: selectedTeam ? `${filteredModels.length}${filterText.trim() ? ` of ${teamModels.length}` : ""} model${filteredModels.length === 1 ? "" : "s"}` : "Select a team to view its models"
         },
-        /* @__PURE__ */ React8.createElement(Box8, { sx: { px: 2.5, pb: 2.5, pt: 1 } }, /* @__PURE__ */ React8.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React8.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React8.createElement(Box8, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ React8.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React8.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React8.createElement(
           Select,
           {
             labelId: "team-select-label",
@@ -3076,7 +3087,20 @@ var init_ModelsTable = __esm({
             onChange: (e) => setSelectedTeamId(e.target.value)
           },
           teams.map((t) => /* @__PURE__ */ React8.createElement(MenuItem4, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
-        ))),
+        )), /* @__PURE__ */ React8.createElement(
+          TextField5,
+          {
+            label: "Filter Models",
+            size: "small",
+            value: filterText,
+            onChange: (e) => setFilterText(e.target.value),
+            disabled: !selectedTeamId,
+            sx: { minWidth: 240, mb: 2 },
+            InputProps: {
+              startAdornment: /* @__PURE__ */ React8.createElement(InputAdornment2, { position: "start" }, /* @__PURE__ */ React8.createElement(Search2, { fontSize: "small" }))
+            }
+          }
+        )),
         loading && /* @__PURE__ */ React8.createElement(EmptyState, { message: "Loading models\u2026" }),
         !loading && !selectedTeamId && /* @__PURE__ */ React8.createElement(
           EmptyState,
@@ -3085,14 +3109,32 @@ var init_ModelsTable = __esm({
             hint: "Each team may have a different set of models assigned"
           }
         ),
-        !loading && selectedTeamId && filteredModels.length === 0 && /* @__PURE__ */ React8.createElement(
+        !loading && selectedTeamId && teamModels.length === 0 && /* @__PURE__ */ React8.createElement(
           EmptyState,
           {
             message: "No models available for this team",
             hint: allModels.length === 0 ? "No models are configured in the system" : "None of the team's assigned models were found in the catalog"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ React8.createElement(TableContainer5, null, /* @__PURE__ */ React8.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead5, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React8.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React8.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(TagChip, { label: m.model_name, title: m.model_name }), /* @__PURE__ */ React8.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React8.createElement(
+        !loading && selectedTeamId && teamModels.length > 0 && filteredModels.length === 0 && /* @__PURE__ */ React8.createElement(
+          EmptyState,
+          {
+            message: "No models match your search",
+            hint: "Try a different search term"
+          }
+        ),
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ React8.createElement(TableContainer5, null, /* @__PURE__ */ React8.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead5, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React8.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React8.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(Tooltip3, { title: m.model_name, placement: "top" }, /* @__PURE__ */ React8.createElement(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Copy model ID",
+            onClick: () => handleCopyModelId(m.model_name),
+            onKeyDown: (e) => e.key === "Enter" && handleCopyModelId(m.model_name),
+            style: { cursor: "pointer", display: "inline-flex" }
+          },
+          /* @__PURE__ */ React8.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
+        )), /* @__PURE__ */ React8.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React8.createElement(
           Box8,
           {
             component: "span",
@@ -3148,7 +3190,7 @@ import TableContainer6 from "@mui/material/TableContainer";
 import TableHead6 from "@mui/material/TableHead";
 import TableRow6 from "@mui/material/TableRow";
 import TablePagination from "@mui/material/TablePagination";
-import TextField5 from "@mui/material/TextField";
+import TextField6 from "@mui/material/TextField";
 import MenuItem5 from "@mui/material/MenuItem";
 import Skeleton5 from "@mui/material/Skeleton";
 import Collapse2 from "@mui/material/Collapse";
@@ -3294,7 +3336,7 @@ var init_AuditLog = __esm({
           subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
           flush: true,
           actions: /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-            TextField5,
+            TextField6,
             {
               size: "small",
               label: "Action",
@@ -3312,7 +3354,7 @@ var init_AuditLog = __esm({
             /* @__PURE__ */ React9.createElement(MenuItem5, { value: "deleted" }, "Deleted"),
             /* @__PURE__ */ React9.createElement(MenuItem5, { value: "blocked" }, "Blocked")
           ), /* @__PURE__ */ React9.createElement(
-            TextField5,
+            TextField6,
             {
               size: "small",
               label: "Table",
@@ -3331,7 +3373,7 @@ var init_AuditLog = __esm({
             /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
             /* @__PURE__ */ React9.createElement(MenuItem5, { value: "LiteLLM_UserTable" }, "User")
           ), /* @__PURE__ */ React9.createElement(
-            TextField5,
+            TextField6,
             {
               size: "small",
               label: "Changed by",