@acarmisc/backstage-plugin-litellm 0.18.0 → 0.19.0

package/dist/index.cjs.js

@@ -3007,7 +3007,7 @@ function fmtTokens(n) {
   if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
   return String(n);
 }
-var import_react8, import_Box8, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_Typography8, import_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert3, import_styles5, ALL_PROXY_MODELS2, ModelsTable;
+var import_react8, import_Box8, import_Table5, import_TableBody5, import_TableCell5, import_TableContainer5, import_TableHead5, import_TableRow5, import_Typography8, import_MenuItem4, import_Select, import_FormControl, import_InputLabel, import_TextField5, import_InputAdornment2, import_icons_material6, import_ContentCopy, import_Tooltip, import_Snackbar, import_Alert3, import_styles5, ALL_PROXY_MODELS2, ModelsTable;
 var init_ModelsTable = __esm({
   "src/components/ModelsTable.tsx"() {
     "use strict";
@@ -3024,6 +3024,9 @@ var init_ModelsTable = __esm({
     import_Select = __toESM(require("@mui/material/Select"));
     import_FormControl = __toESM(require("@mui/material/FormControl"));
     import_InputLabel = __toESM(require("@mui/material/InputLabel"));
+    import_TextField5 = __toESM(require("@mui/material/TextField"));
+    import_InputAdornment2 = __toESM(require("@mui/material/InputAdornment"));
+    import_icons_material6 = require("@mui/icons-material");
     import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
     import_Tooltip = __toESM(require("@mui/material/Tooltip"));
     import_Snackbar = __toESM(require("@mui/material/Snackbar"));
@@ -3034,15 +3037,23 @@ var init_ModelsTable = __esm({
     ModelsTable = ({ allModels, teams, loading }) => {
       const theme = (0, import_styles5.useTheme)();
       const [selectedTeamId, setSelectedTeamId] = (0, import_react8.useState)("");
+      const [filterText, setFilterText] = (0, import_react8.useState)("");
       const [copiedSnackbar, setCopiedSnackbar] = (0, import_react8.useState)(false);
       const selectedTeam = (0, import_react8.useMemo)(
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
       );
-      const filteredModels = (0, import_react8.useMemo)(() => {
+      const teamModels = (0, import_react8.useMemo)(() => {
         if (!selectedTeam) return [];
         return allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
       }, [allModels, selectedTeam]);
+      const filteredModels = (0, import_react8.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]);
       const handleCopyModelId = (0, import_react8.useCallback)((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
       }, []);
@@ -3064,9 +3075,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__ */ import_react8.default.createElement(import_Box8.default, { sx: { px: 2.5, pb: 2.5, pt: 1 } }, /* @__PURE__ */ import_react8.default.createElement(import_FormControl.default, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ import_react8.default.createElement(import_InputLabel.default, { id: "team-select-label" }, "Team"), /* @__PURE__ */ import_react8.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ import_react8.default.createElement(import_FormControl.default, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ import_react8.default.createElement(import_InputLabel.default, { id: "team-select-label" }, "Team"), /* @__PURE__ */ import_react8.default.createElement(
           import_Select.default,
           {
             labelId: "team-select-label",
@@ -3075,7 +3086,20 @@ var init_ModelsTable = __esm({
             onChange: (e) => setSelectedTeamId(e.target.value)
           },
           teams.map((t) => /* @__PURE__ */ import_react8.default.createElement(import_MenuItem4.default, { key: t.team_id, value: t.team_id }, t.team_alias ?? t.team_id))
-        ))),
+        )), /* @__PURE__ */ import_react8.default.createElement(
+          import_TextField5.default,
+          {
+            label: "Filter Models",
+            size: "small",
+            value: filterText,
+            onChange: (e) => setFilterText(e.target.value),
+            disabled: !selectedTeamId,
+            sx: { minWidth: 240, mb: 2 },
+            InputProps: {
+              startAdornment: /* @__PURE__ */ import_react8.default.createElement(import_InputAdornment2.default, { position: "start" }, /* @__PURE__ */ import_react8.default.createElement(import_icons_material6.Search, { fontSize: "small" }))
+            }
+          }
+        )),
         loading && /* @__PURE__ */ import_react8.default.createElement(EmptyState, { message: "Loading models\u2026" }),
         !loading && !selectedTeamId && /* @__PURE__ */ import_react8.default.createElement(
           EmptyState,
@@ -3084,14 +3108,32 @@ var init_ModelsTable = __esm({
             hint: "Each team may have a different set of models assigned"
           }
         ),
-        !loading && selectedTeamId && filteredModels.length === 0 && /* @__PURE__ */ import_react8.default.createElement(
+        !loading && selectedTeamId && teamModels.length === 0 && /* @__PURE__ */ import_react8.default.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__ */ import_react8.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react8.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Model ID"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Mode"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { align: "right" }, "Input Cost"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { align: "right" }, "Output Cost"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { align: "right" }, "Max Input"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { align: "right" }, "Max Output"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Capabilities"))), /* @__PURE__ */ import_react8.default.createElement(import_TableBody5.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react8.default.createElement(import_TableRow5.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react8.default.createElement(TagChip, { label: m.model_name, title: m.model_name }), /* @__PURE__ */ import_react8.default.createElement(import_Tooltip.default, { title: "Copy model ID" }, /* @__PURE__ */ import_react8.default.createElement(
+        !loading && selectedTeamId && teamModels.length > 0 && filteredModels.length === 0 && /* @__PURE__ */ import_react8.default.createElement(
+          EmptyState,
+          {
+            message: "No models match your search",
+            hint: "Try a different search term"
+          }
+        ),
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ import_react8.default.createElement(import_TableContainer5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_Table5.default, { size: "small", sx: dataTableSx }, /* @__PURE__ */ import_react8.default.createElement(import_TableHead5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableRow5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Model ID"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Mode"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { align: "right" }, "Input Cost"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { align: "right" }, "Output Cost"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { align: "right" }, "Max Input"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, { align: "right" }, "Max Output"), /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, "Capabilities"))), /* @__PURE__ */ import_react8.default.createElement(import_TableBody5.default, null, filteredModels.map((m) => /* @__PURE__ */ import_react8.default.createElement(import_TableRow5.default, { key: m.model_name, hover: true }, /* @__PURE__ */ import_react8.default.createElement(import_TableCell5.default, null, /* @__PURE__ */ import_react8.default.createElement(import_Box8.default, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ import_react8.default.createElement(import_Tooltip.default, { title: m.model_name, placement: "top" }, /* @__PURE__ */ import_react8.default.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__ */ import_react8.default.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
+        )), /* @__PURE__ */ import_react8.default.createElement(import_Tooltip.default, { title: "Copy model ID" }, /* @__PURE__ */ import_react8.default.createElement(
           import_Box8.default,
           {
             component: "span",
@@ -3170,7 +3212,7 @@ function renderAuditLogBody(loading, entries) {
   }
   return entries.map((entry) => /* @__PURE__ */ import_react9.default.createElement(DetailRow, { key: entry.id, entry }));
 }
-var import_react9, import_Box9, import_Typography9, import_Table6, import_TableBody6, import_TableCell6, import_TableContainer6, import_TableHead6, import_TableRow6, import_TablePagination, import_TextField5, import_MenuItem5, import_Skeleton5, import_Collapse2, import_IconButton5, import_Alert4, import_styles6, import_icons_material6, import_react_use2, ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
+var import_react9, import_Box9, import_Typography9, import_Table6, import_TableBody6, import_TableCell6, import_TableContainer6, import_TableHead6, import_TableRow6, import_TablePagination, import_TextField6, import_MenuItem5, import_Skeleton5, import_Collapse2, import_IconButton5, import_Alert4, import_styles6, import_icons_material7, import_react_use2, ACTION_TONES, TABLE_LABELS, DetailRow, AuditLog;
 var init_AuditLog = __esm({
   "src/components/AuditLog.tsx"() {
     "use strict";
@@ -3184,14 +3226,14 @@ var init_AuditLog = __esm({
     import_TableHead6 = __toESM(require("@mui/material/TableHead"));
     import_TableRow6 = __toESM(require("@mui/material/TableRow"));
     import_TablePagination = __toESM(require("@mui/material/TablePagination"));
-    import_TextField5 = __toESM(require("@mui/material/TextField"));
+    import_TextField6 = __toESM(require("@mui/material/TextField"));
     import_MenuItem5 = __toESM(require("@mui/material/MenuItem"));
     import_Skeleton5 = __toESM(require("@mui/material/Skeleton"));
     import_Collapse2 = __toESM(require("@mui/material/Collapse"));
     import_IconButton5 = __toESM(require("@mui/material/IconButton"));
     import_Alert4 = __toESM(require("@mui/material/Alert"));
     import_styles6 = require("@mui/material/styles");
-    import_icons_material6 = require("@mui/icons-material");
+    import_icons_material7 = require("@mui/icons-material");
     import_react_use2 = require("react-use");
     init_ui();
     ACTION_TONES = {
@@ -3224,7 +3266,7 @@ var init_AuditLog = __esm({
             transition: theme.transitions.create("transform")
           })
         },
-        /* @__PURE__ */ import_react9.default.createElement(import_icons_material6.KeyboardArrowDown, { fontSize: "small" })
+        /* @__PURE__ */ import_react9.default.createElement(import_icons_material7.KeyboardArrowDown, { fontSize: "small" })
       )), /* @__PURE__ */ import_react9.default.createElement(import_TableCell6.default, { sx: { whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2", color: "text.secondary" }, formatDateTime(entry.updated_at))), /* @__PURE__ */ import_react9.default.createElement(import_TableCell6.default, null, entry.action && /* @__PURE__ */ import_react9.default.createElement(StatusPill, { label: entry.action, tone: actionTone(entry.action) })), /* @__PURE__ */ import_react9.default.createElement(import_TableCell6.default, null, /* @__PURE__ */ import_react9.default.createElement(import_Typography9.default, { variant: "body2" }, prettyTableName(entry.table_name))), /* @__PURE__ */ import_react9.default.createElement(import_TableCell6.default, null, /* @__PURE__ */ import_react9.default.createElement(
         import_Typography9.default,
         {
@@ -3293,7 +3335,7 @@ var init_AuditLog = __esm({
           subtitle: loading ? "Loading\u2026" : `${total.toLocaleString()} event${total === 1 ? "" : "s"}`,
           flush: true,
           actions: /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
-            import_TextField5.default,
+            import_TextField6.default,
             {
               size: "small",
               label: "Action",
@@ -3311,7 +3353,7 @@ var init_AuditLog = __esm({
             /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "deleted" }, "Deleted"),
             /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "blocked" }, "Blocked")
           ), /* @__PURE__ */ import_react9.default.createElement(
-            import_TextField5.default,
+            import_TextField6.default,
             {
               size: "small",
               label: "Table",
@@ -3330,7 +3372,7 @@ var init_AuditLog = __esm({
             /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "LiteLLM_ObjectPermissionTable" }, "Team access (KB / MCP)"),
             /* @__PURE__ */ import_react9.default.createElement(import_MenuItem5.default, { value: "LiteLLM_UserTable" }, "User")
           ), /* @__PURE__ */ import_react9.default.createElement(
-            import_TextField5.default,
+            import_TextField6.default,
             {
               size: "small",
               label: "Changed by",
@@ -3849,7 +3891,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/plugin.tsx
 var import_react11 = __toESM(require("react"));
-var import_icons_material7 = require("@mui/icons-material");
+var import_icons_material8 = require("@mui/icons-material");
 var import_frontend_plugin_api = require("@backstage/frontend-plugin-api");
 init_api();
 var liteLlmApi = import_frontend_plugin_api.ApiBlueprint.make({
@@ -3863,7 +3905,7 @@ var liteLlmPage = import_frontend_plugin_api.PageBlueprint.make({
   params: {
     path: "/litellm",
     title: "LiteLLM",
-    icon: /* @__PURE__ */ import_react11.default.createElement(import_icons_material7.TrendingUp, null),
+    icon: /* @__PURE__ */ import_react11.default.createElement(import_icons_material8.TrendingUp, null),
     loader: async () => {
       const { LiteLLMPage: LiteLLMPage2 } = await Promise.resolve().then(() => (init_LiteLLMPage(), LiteLLMPage_exports));
       return /* @__PURE__ */ import_react11.default.createElement(LiteLLMPage2, null);