ui - show global activity

ui/litellm-dashboard/src/components/networking.tsx

@@ -1072,6 +1072,42 @@ export const adminGlobalActivity = async (accessToken: String, startTime: String
 };
 
 
+export const adminGlobalActivityPerModel = async (accessToken: String, startTime: String | undefined, endTime: String | undefined) => {
+  try {
+    let url = proxyBaseUrl ? `${proxyBaseUrl}/global/activity/model` : `/global/activity/model`;
+
+    if (startTime && endTime) {
+      url += `?start_date=${startTime}&end_date=${endTime}`;
+    }
+
+    const requestOptions: {
+      method: string;
+      headers: {
+        Authorization: string;
+      };
+    } = {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    };
+
+    const response = await fetch(url, requestOptions);
+
+    if (!response.ok) {
+      const errorData = await response.text();
+      throw new Error("Network response was not ok");
+    }
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch spend data:", error);
+    throw error;
+  }
+};
+
+
 export const adminTopModelsCall = async (accessToken: String) => {
   try {
     let url = proxyBaseUrl

ui/litellm-dashboard/src/components/usage.tsx

@@ -25,6 +25,7 @@ import {
   modelInfoCall,
   adminspendByProvider,
   adminGlobalActivity,
+  adminGlobalActivityPerModel,
 } from "./networking";
 import { start } from "repl";
 
@@ -126,6 +127,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
   const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
   const [spendByProvider, setSpendByProvider] = useState<any[]>([]);
   const [globalActivity, setGlobalActivity] = useState<any[]>([]);
+  const [globalActivityPerModel, setGlobalActivityPerModel] = useState<any[]>([]);
   const [selectedKeyID, setSelectedKeyID] = useState<string | null>("");
   const [dateValue, setDateValue] = useState<DateRangePickerValue>({
     from: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), 
@@ -277,6 +279,10 @@ const UsagePage: React.FC<UsagePageProps> = ({
             let global_activity_response = await adminGlobalActivity(accessToken, startTime, endTime);
             setGlobalActivity(global_activity_response)
 
+            let global_activity_per_model = await adminGlobalActivityPerModel(accessToken, startTime, endTime);
+            console.log("global activity per model", global_activity_per_model);
+            setGlobalActivityPerModel(global_activity_per_model)
+
 
           } else if (userRole == "App Owner") {
             await userSpendLogsCall(
@@ -453,6 +459,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
                     className="h-40"
                     data={globalActivity.daily_data}
                     index="date"
+                    colors={['cyan']}
                     categories={['api_requests']}
                     onValueChange={(v) => console.log(v)}
                   />
@@ -464,6 +471,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
                     className="h-40"
                     data={globalActivity.daily_data}
                     index="date"
+                    colors={['cyan']}
                     categories={['total_tokens']}
                     onValueChange={(v) => console.log(v)}
                   />
@@ -472,6 +480,38 @@ const UsagePage: React.FC<UsagePageProps> = ({
                 
 
                 </Card>
+
+                {globalActivityPerModel.map((globalActivity, index) => (
+                <Card key={index}>
+                  <Title>{globalActivity.model}</Title>
+                  <Grid numItems={2}>
+                    <Col>
+                      <Subtitle>API Requests {globalActivity.sum_api_requests}</Subtitle>
+                      <AreaChart
+                        className="h-40"
+                        data={globalActivity.daily_data}
+                        index="date"
+                        colors={['cyan']}
+                        categories={['api_requests']}
+                        onValueChange={(v) => console.log(v)}
+                      />
+                    </Col>
+                    <Col>
+                      <Subtitle>Tokens {globalActivity.sum_total_tokens}</Subtitle>
+                      <BarChart
+                        className="h-40"
+                        data={globalActivity.daily_data}
+                        index="date"
+                        colors={['cyan']}
+                        categories={['total_tokens']}
+                        onValueChange={(v) => console.log(v)}
+                      />
+                    </Col>
+                  </Grid>
+                </Card>
+              ))}
+
+                
               </Grid>
             </TabPanel>
             </TabPanels>