@acarmisc/backstage-plugin-litellm 0.43.0 → 0.44.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, keyUsage, keyUsageLoading, canManage, onEditTeam, canManageMembers, onManageMembers, onExpand, vectorStores, mcpServers }) => {
       const [expanded, setExpanded] = useState9(false);
       const chart = useChartTheme();
       const handleExpandChange = (newExpanded) => {
@@ -5323,6 +5369,10 @@ var init_TeamUsage = __esm({
             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 }) })
           ] }),
+          (keyUsageLoading || keyUsage) && /* @__PURE__ */ jsxs14(Box14, { mb: 2.5, children: [
+            sectionLabel("Keys by member"),
+            keyUsage ? /* @__PURE__ */ jsx15(TeamKeyUsageTable, { usage: keyUsage }) : /* @__PURE__ */ jsx15(Box14, { display: "flex", justifyContent: "center", py: 2, children: /* @__PURE__ */ jsx15(CircularProgress4, { size: 22 }) })
+          ] }),
           /* @__PURE__ */ jsxs14(Box14, { children: [
             sectionLabel("Members"),
             team.members_with_roles?.length ? /* @__PURE__ */ jsx15(
@@ -5379,6 +5429,8 @@ var init_TeamUsage = __esm({
       getTeamUsageLoading,
       getTeamMemberUsage,
       getTeamMemberUsageLoading,
+      getTeamKeyUsage,
+      getTeamKeyUsageLoading,
       canManage,
       onEditTeam,
       canCreate,
@@ -5442,6 +5494,8 @@ 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,
               canManage,
               onEditTeam,
               canManageMembers: canManageMembers?.(team),
@@ -6394,6 +6448,8 @@ 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 { value: userInfo, loading: userLoading, error: userError } = useAsync(
         () => api.getUserInfo(),
         [api]
@@ -6460,6 +6516,8 @@ var init_LiteLLMPage = __esm({
         setTeamUsageLoading({});
         setMemberUsageCache({});
         setMemberUsageLoading({});
+        setKeyUsageCache({});
+        setKeyUsageLoading({});
       }, [setDateRange, setCurrentPreset]);
       const loadTeamUsage = useCallback4(async (teamId) => {
         if (teamUsageCache[teamId] !== void 0 || teamUsageLoading[teamId]) return;
@@ -6489,6 +6547,20 @@ var init_LiteLLMPage = __esm({
           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 {
+          setKeyUsageCache((prev) => ({ ...prev, [teamId]: null }));
+        } finally {
+          setKeyUsageLoading((prev) => ({ ...prev, [teamId]: false }));
+        }
+      }, [api, dateRange, keyUsageCache, keyUsageLoading]);
       const allowedModels = useMemo9(() => {
         if (!allModels?.length) return [];
         const userModels = userInfo?.models;
@@ -6786,6 +6858,8 @@ 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,
                 canManage: teamMgmtEnabled && canManageTeam && !readOnly,
                 onEditTeam: (t) => setManageTeam({ mode: "edit", team: t }),
                 canCreate: teamMgmtEnabled && canCreateTeam && !readOnly,
@@ -6797,7 +6871,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);
+                  }
                 }
               }
             );