@acarmisc/backstage-plugin-litellm 0.5.0 → 0.6.0

package/dist/index.esm.js

@@ -1121,7 +1121,7 @@ __export(LiteLLMPage_exports, {
   LiteLLMPage: () => LiteLLMPage
 });
 import React6, { useState as useState5, useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { Grid as Grid2, Box as Box6, Snackbar, Alert as Alert2, CircularProgress as CircularProgress4, Typography as Typography6, Paper as Paper6, Tabs as Tabs2, Tab as Tab2 } from "@mui/material";
+import { Box as Box6, Snackbar, Alert as Alert2, CircularProgress as CircularProgress4, Typography as Typography6, Paper as Paper6, Tabs as Tabs2, Tab as Tab2 } from "@mui/material";
 import { useAsync as useAsync2, useAsyncRetry } from "react-use";
 import { useApi } from "@backstage/core-plugin-api";
 function initDateRange() {
@@ -1321,7 +1321,7 @@ var init_LiteLLMPage = __esm({
         const hint = userError?.body?.hint;
         return /* @__PURE__ */ React6.createElement(Box6, { p: 3 }, /* @__PURE__ */ React6.createElement(Paper6, { sx: { p: 3 } }, /* @__PURE__ */ React6.createElement(Typography6, { variant: "h6", gutterBottom: true }, "Account not provisioned"), /* @__PURE__ */ React6.createElement(Typography6, { color: "text.secondary", paragraph: true }, "Your Backstage account is not linked to a LiteLLM user."), hint ? /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", color: "text.secondary" }, hint) : /* @__PURE__ */ React6.createElement(Typography6, { variant: "body2", color: "text.secondary" }, isProvisioningEnabled ? "Auto-provisioning is enabled but failed. Check the backend logs." : "Set litellm.provisioning.enabled: true in app-config.yaml to enable auto-provisioning, or ask your administrator to create the account manually.")));
       }
-      return /* @__PURE__ */ React6.createElement(Box6, { p: 3 }, userInfo.can_view_audit && /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React6.createElement(Box6, { p: 3 }, /* @__PURE__ */ React6.createElement(Box6, { mb: 2 }, /* @__PURE__ */ React6.createElement(DashboardHeader, { userInfo, teams: teams ?? [], loading: userLoading || teamsLoading })), /* @__PURE__ */ React6.createElement(
         Tabs2,
         {
           value: activeTab,
@@ -1329,20 +1329,10 @@ var init_LiteLLMPage = __esm({
           sx: { mb: 2, borderBottom: 1, borderColor: "divider" }
         },
         /* @__PURE__ */ React6.createElement(Tab2, { label: "Overview", value: "overview" }),
-        /* @__PURE__ */ React6.createElement(Tab2, { label: "Audit Log", value: "audit" })
-      ), activeTab === "audit" ? /* @__PURE__ */ React6.createElement(AuditLog, { api }) : /* @__PURE__ */ React6.createElement(Grid2, { container: true, spacing: 2 }, /* @__PURE__ */ React6.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(DashboardHeader, { userInfo, teams: teams ?? [], loading: userLoading || teamsLoading })), /* @__PURE__ */ React6.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(
-        TeamUsage,
-        {
-          teams: teams ?? [],
-          loading: teamsLoading,
-          dateRange,
-          getTeamUsage: (teamId) => {
-            if (teamUsageCache[teamId] === void 0) loadTeamUsage(teamId);
-            return teamUsageCache[teamId] ?? null;
-          },
-          getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false
-        }
-      )), /* @__PURE__ */ React6.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(
+        /* @__PURE__ */ React6.createElement(Tab2, { label: "Keys", value: "keys" }),
+        /* @__PURE__ */ React6.createElement(Tab2, { label: "Teams", value: "teams" }),
+        userInfo.can_view_audit && /* @__PURE__ */ React6.createElement(Tab2, { label: "Audit Log", value: "audit" })
+      ), activeTab === "overview" && /* @__PURE__ */ React6.createElement(
         UsageStats,
         {
           usage: usage ?? null,
@@ -1352,7 +1342,7 @@ var init_LiteLLMPage = __esm({
           loading: usageLoading,
           userInfo
         }
-      )), /* @__PURE__ */ React6.createElement(Grid2, { item: true, xs: 12 }, /* @__PURE__ */ React6.createElement(
+      ), activeTab === "keys" && /* @__PURE__ */ React6.createElement(
         KeysTable,
         {
           keys: keys ?? [],
@@ -1367,7 +1357,19 @@ var init_LiteLLMPage = __esm({
           onResetKeySpend: handleResetKeySpend,
           onDeleteKey: handleDeleteKey
         }
-      ))), /* @__PURE__ */ React6.createElement(
+      ), activeTab === "teams" && /* @__PURE__ */ React6.createElement(
+        TeamUsage,
+        {
+          teams: teams ?? [],
+          loading: teamsLoading,
+          dateRange,
+          getTeamUsage: (teamId) => {
+            if (teamUsageCache[teamId] === void 0) loadTeamUsage(teamId);
+            return teamUsageCache[teamId] ?? null;
+          },
+          getTeamUsageLoading: (teamId) => teamUsageLoading[teamId] ?? false
+        }
+      ), activeTab === "audit" && userInfo.can_view_audit && /* @__PURE__ */ React6.createElement(AuditLog, { api }), /* @__PURE__ */ React6.createElement(
         Snackbar,
         {
           open: !!snackbar,
@@ -1431,7 +1433,7 @@ import {
   FormControl as FormControl2,
   Select as Select2,
   MenuItem as MenuItem4,
-  Grid as Grid3,
+  Grid as Grid2,
   CircularProgress as CircularProgress5,
   Alert as Alert3
 } from "@mui/material";
@@ -1500,7 +1502,7 @@ var LiteLLMHomeWidget = ({
     /* @__PURE__ */ React8.createElement(MenuItem4, { value: "today" }, "Today"),
     /* @__PURE__ */ React8.createElement(MenuItem4, { value: "7d" }, "7d"),
     /* @__PURE__ */ React8.createElement(MenuItem4, { value: "30d" }, "30d")
-  ))), loading && /* @__PURE__ */ React8.createElement(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React8.createElement(CircularProgress5, { size: 32 })), !loading && error && /* @__PURE__ */ React8.createElement(Alert3, { severity: "error", sx: { mt: 1 } }, error), !loading && !error && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Grid3, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "USD Spent", value: fmtUsd2(usage?.total_spend ?? 0) })), /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Tokens In", value: fmtInt2(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Tokens Out", value: fmtInt2(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React8.createElement(Grid3, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Keys", value: fmtInt2(keys.length) }))), hasSparkline && /* @__PURE__ */ React8.createElement(Box7, { height: 120 }, /* @__PURE__ */ React8.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React8.createElement(
+  ))), loading && /* @__PURE__ */ React8.createElement(Box7, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 120 }, /* @__PURE__ */ React8.createElement(CircularProgress5, { size: 32 })), !loading && error && /* @__PURE__ */ React8.createElement(Alert3, { severity: "error", sx: { mt: 1 } }, error), !loading && !error && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Grid2, { container: true, spacing: 2, sx: { mb: hasSparkline ? 1.5 : 0 } }, /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "USD Spent", value: fmtUsd2(usage?.total_spend ?? 0) })), /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Tokens In", value: fmtInt2(usage?.prompt_tokens ?? 0) })), /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Tokens Out", value: fmtInt2(usage?.completion_tokens ?? 0) })), /* @__PURE__ */ React8.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React8.createElement(Kpi, { label: "Keys", value: fmtInt2(keys.length) }))), hasSparkline && /* @__PURE__ */ React8.createElement(Box7, { height: 120 }, /* @__PURE__ */ React8.createElement(ResponsiveContainer3, { width: "100%", height: "100%" }, /* @__PURE__ */ React8.createElement(AreaChart3, { data: dailyData, margin: { top: 4, right: 0, bottom: 0, left: 0 } }, /* @__PURE__ */ React8.createElement(
     Area3,
     {
       type: "monotone",