@acarmisc/backstage-plugin-litellm 0.43.0 → 0.45.0

package/dist/index.esm.js

@@ -299,6 +299,12 @@ var init_api = __esm({
           end_date: endDate
         });
       }
+      async getTeamKeyUsage(teamId, startDate, endDate) {
+        return this.get(`/teams/${encodeURIComponent(teamId)}/usage/keys`, {
+          start_date: startDate,
+          end_date: endDate
+        });
+      }
       async getSpendLogs(params) {
         const strParams = {
           start_date: params.startDate,
@@ -5078,7 +5084,7 @@ function budgetStatValue(hidden, budget) {
   if (budget > 0) return fmtUsd2(budget);
   return "Unlimited";
 }
-var fmtUsd2, monoSx, MemberUsageTable, TeamCard, TeamUsage;
+var fmtUsd2, monoSx, MemberUsageTable, TeamKeyUsageTable, TeamCard, TeamUsage;
 var init_TeamUsage = __esm({
   "src/components/TeamUsage.tsx"() {
     "use strict";
@@ -5120,7 +5126,47 @@ var init_TeamUsage = __esm({
         }) })
       ] }) });
     };
-    TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand, vectorStores, mcpServers }) => {
+    TeamKeyUsageTable = ({ usage }) => {
+      const hidden = usage.budget_hidden === true;
+      if (!usage.keys.length) {
+        return /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "This team has no keys." });
+      }
+      return /* @__PURE__ */ jsx15(TableContainer4, { component: Paper8, variant: "outlined", sx: { borderRadius: 1.5 }, children: /* @__PURE__ */ jsxs14(Table4, { size: "small", sx: dataTableSx, "aria-label": "Keys by member", children: [
+        /* @__PURE__ */ jsx15(TableHead4, { children: /* @__PURE__ */ jsxs14(TableRow4, { children: [
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Key" }),
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Owner" }),
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Created" }),
+          /* @__PURE__ */ jsx15(TableCell4, { children: "Status" }),
+          !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Spend" }),
+          !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Budget" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Tokens" }),
+          /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: "Requests" })
+        ] }) }),
+        /* @__PURE__ */ jsx15(TableBody4, { children: usage.keys.map((k) => {
+          const owner = k.display_name ?? k.user_email ?? k.user_id;
+          return /* @__PURE__ */ jsxs14(TableRow4, { children: [
+            /* @__PURE__ */ jsxs14(TableCell4, { children: [
+              /* @__PURE__ */ jsx15(Typography12, { variant: "body2", children: k.key_alias ?? k.key }),
+              k.key_alias && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", sx: monoSx, children: k.key })
+            ] }),
+            /* @__PURE__ */ jsx15(TableCell4, { children: owner ?? /* @__PURE__ */ jsx15(Typography12, { variant: "body2", color: "text.secondary", children: "\u2014" }) }),
+            /* @__PURE__ */ jsx15(TableCell4, { children: fmtDateShort(k.created_at) }),
+            /* @__PURE__ */ jsx15(TableCell4, { children: /* @__PURE__ */ jsx15(
+              StatusPill,
+              {
+                label: k.blocked ? "Blocked" : "Active",
+                tone: k.blocked ? "danger" : "success"
+              }
+            ) }),
+            !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: fmtUsd2(k.spend) }),
+            !hidden && /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: k.max_budget === void 0 ? "Unlimited" : fmtUsd2(k.max_budget) }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: fmtCompact(k.total_tokens) }),
+            /* @__PURE__ */ jsx15(TableCell4, { align: "right", children: k.api_requests.toLocaleString() })
+          ] }, k.key);
+        }) })
+      ] }) });
+    };
+    TeamCard = ({ team, usage, usageLoading, memberUsage, memberUsageLoading, memberUsageFailed, keyUsage, keyUsageLoading, keyUsageFailed, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand, vectorStores, mcpServers }) => {
       const [expanded, setExpanded] = useState9(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -5319,9 +5365,17 @@ var init_TeamUsage = __esm({
           renderNamedTags("Knowledge bases", team.object_permission?.vector_stores, vectorStores),
           renderNamedTags("MCP servers", team.object_permission?.mcp_servers, mcpServers),
           renderDailySpendSection(),
-          (memberUsageLoading || memberUsage) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
+          (memberUsageLoading || memberUsage || memberUsageFailed) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
             sectionLabel("Usage by member"),
-            memberUsage ? /* @__PURE__ */ jsx15(MemberUsageTable, { usage: memberUsage }) : /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
+            memberUsage && /* @__PURE__ */ jsx15(MemberUsageTable, { usage: memberUsage }),
+            !memberUsage && memberUsageFailed && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", children: "Could not load per-member usage" }),
+            !memberUsage && !memberUsageFailed && /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
+          ] }),
+          (keyUsageLoading || keyUsage || keyUsageFailed) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
+            sectionLabel("Keys by member"),
+            keyUsage && /* @__PURE__ */ jsx15(TeamKeyUsageTable, { usage: keyUsage }),
+            !keyUsage && keyUsageFailed && /* @__PURE__ */ jsx15(Typography12, { variant: "caption", color: "text.secondary", children: "Could not load per-key usage" }),
+            !keyUsage && !keyUsageFailed && /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
           ] }),
           /* @__PURE__ */ jsxs14(Box14, { children: [
             sectionLabel("Members"),
@@ -5379,6 +5433,10 @@ var init_TeamUsage = __esm({
       getTeamUsageLoading,
       getTeamMemberUsage,
       getTeamMemberUsageLoading,
+      getTeamKeyUsage,
+      getTeamKeyUsageLoading,
+      getTeamMemberUsageFailed,
+      getTeamKeyUsageFailed,
       canManage,
       onEditTeam,
       canCreate,
@@ -5442,6 +5500,10 @@ var init_TeamUsage = __esm({
               usageLoading: getTeamUsageLoading(team.team_id),
               memberUsage: getTeamMemberUsage?.(team.team_id) ?? null,
               memberUsageLoading: getTeamMemberUsageLoading?.(team.team_id) ?? false,
+              keyUsage: getTeamKeyUsage?.(team.team_id) ?? null,
+              keyUsageLoading: getTeamKeyUsageLoading?.(team.team_id) ?? false,
+              memberUsageFailed: getTeamMemberUsageFailed?.(team.team_id) ?? false,
+              keyUsageFailed: getTeamKeyUsageFailed?.(team.team_id) ?? false,
               canManage,
               onEditTeam,
               canManageMembers: canManageMembers?.(team),
@@ -6290,7 +6352,7 @@ function initDateRange() {
   else start.setDate(start.getDate() - 7);
   return { start, end };
 }
-var PERIOD_LS_KEY2, PAGE_TABS, isPageTab, LiteLLMPage;
+var PERIOD_LS_KEY2, PAGE_TABS, isPageTab, isRefusal, LiteLLMPage;
 var init_LiteLLMPage = __esm({
   "src/components/LiteLLMPage.tsx"() {
     "use strict";
@@ -6311,6 +6373,7 @@ var init_LiteLLMPage = __esm({
     PERIOD_LS_KEY2 = "litellm_usage_period";
     PAGE_TABS = ["overview", "keys", "teams", "models", "insights"];
     isPageTab = (v) => !!v && PAGE_TABS.includes(v);
+    isRefusal = (err) => err instanceof ApiError && (err.status === 403 || err.status === 404);
     LiteLLMPage = () => {
       const api = useApi4(liteLlmApiRef);
       const alertApi = useApi4(alertApiRef2);
@@ -6394,6 +6457,10 @@ var init_LiteLLMPage = __esm({
       const [teamUsageLoading, setTeamUsageLoading] = useState11({});
       const [memberUsageCache, setMemberUsageCache] = useState11({});
       const [memberUsageLoading, setMemberUsageLoading] = useState11({});
+      const [keyUsageCache, setKeyUsageCache] = useState11({});
+      const [keyUsageLoading, setKeyUsageLoading] = useState11({});
+      const [memberUsageFailed, setMemberUsageFailed] = useState11({});
+      const [keyUsageFailed, setKeyUsageFailed] = useState11({});
       const { value: userInfo, loading: userLoading, error: userError } = useAsync(
         () => api.getUserInfo(),
         [api]
@@ -6460,6 +6527,10 @@ var init_LiteLLMPage = __esm({
         setTeamUsageLoading({});
         setMemberUsageCache({});
         setMemberUsageLoading({});
+        setKeyUsageCache({});
+        setKeyUsageLoading({});
+        setMemberUsageFailed({});
+        setKeyUsageFailed({});
       }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = useCallback4(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
@@ -6483,12 +6554,28 @@ var init_LiteLLMPage = __esm({
           const endDate = toLocalDay(dateRange.end);
           const data = await api.getTeamMemberUsage(teamId, startDate, endDate);
           setMemberUsageCache((prev) => ({ ...prev, [teamId]: data }));
-        } catch {
+        } catch (err) {
           setMemberUsageCache((prev) => ({ ...prev, [teamId]: null }));
+          setMemberUsageFailed((prev) => ({ ...prev, [teamId]: !isRefusal(err) }));
         } finally {
           setMemberUsageLoading((prev) => ({ ...prev, [teamId]: false }));
         }
       }, [api, dateRange, memberUsageCache, memberUsageLoading]);
+      const loadKeyUsage = useCallback4(async (teamId) => {
+        if (keyUsageCache[teamId] !== void 0 || keyUsageLoading[teamId]) return;
+        setKeyUsageLoading((prev) => ({ ...prev, [teamId]: true }));
+        try {
+          const startDate = toLocalDay(dateRange.start);
+          const endDate = toLocalDay(dateRange.end);
+          const data = await api.getTeamKeyUsage(teamId, startDate, endDate);
+          setKeyUsageCache((prev) => ({ ...prev, [teamId]: data }));
+        } catch (err) {
+          setKeyUsageCache((prev) => ({ ...prev, [teamId]: null }));
+          setKeyUsageFailed((prev) => ({ ...prev, [teamId]: !isRefusal(err) }));
+        } finally {
+          setKeyUsageLoading((prev) => ({ ...prev, [teamId]: false }));
+        }
+      }, [api, dateRange, keyUsageCache, keyUsageLoading]);
       const allowedModels = useMemo9(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
@@ -6786,6 +6873,10 @@ var init_LiteLLMPage = __esm({
                 getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false,
                 getTeamMemberUsage: (teamId) => memberUsageCache[teamId] ?? null,
                 getTeamMemberUsageLoading: (teamId) => memberUsageLoading[teamId] ?? false,
+                getTeamKeyUsage: (teamId) => keyUsageCache[teamId] ?? null,
+                getTeamKeyUsageLoading: (teamId) => keyUsageLoading[teamId] ?? false,
+                getTeamMemberUsageFailed: (teamId) => memberUsageFailed[teamId] ?? false,
+                getTeamKeyUsageFailed: (teamId) => keyUsageFailed[teamId] ?? false,
                 canManage: teamMgmtEnabled && canManageTeam && !readOnly,
                 onEditTeam: (t) => setManageTeam({ mode: "edit", team: t }),
                 canCreate: teamMgmtEnabled && canCreateTeam && !readOnly,
@@ -6797,7 +6888,10 @@ var init_LiteLLMPage = __esm({
                 readOnly,
                 onTeamExpand: (team) => {
                   loadTeamUsage(team.team_id);
-                  if (liteLlmConfig?.teamUsage?.memberBreakdown) loadMemberUsage(team.team_id);
+                  if (liteLlmConfig?.teamUsage?.memberBreakdown) {
+                    loadMemberUsage(team.team_id);
+                    loadKeyUsage(team.team_id);
+                  }
                 }
               }
             );