Merge pull request #1926 from BerriAI/litellm_ui_further_improvements

Enable viewing key alias instead of hashed tokens

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

@@ -2,7 +2,7 @@ import { BarChart, Card, Title } from "@tremor/react";
 
 import React, { useState, useEffect } from "react";
 import { Grid, Col, Text, LineChart } from "@tremor/react";
-import { userSpendLogsCall } from "./networking";
+import { userSpendLogsCall, keyInfoCall } from "./networking";
 import { start } from "repl";
 
 interface UsagePageProps {
@@ -75,7 +75,7 @@ function getTopKeys(data: Array<{ [key: string]: unknown }>): any[] {
 
   spendKeys.sort((a, b) => Number(b.spend) - Number(a.spend));
 
-  const topKeys = spendKeys.slice(0, 5);
+  const topKeys = spendKeys.slice(0, 5).map((k) => k.key);
   console.log(`topKeys: ${Object.keys(topKeys[0])}`);
   return topKeys;
 }
@@ -164,18 +164,29 @@ const UsagePage: React.FC<UsagePageProps> = ({
     if (accessToken && token && userRole && userID) {
       const fetchData = async () => {
         try {
-          const response = await userSpendLogsCall(
+          await userSpendLogsCall(
             accessToken,
             token,
             userRole,
             userID,
             startTime,
             endTime
-          );
-
-          setTopKeys(getTopKeys(response));
-          setTopUsers(getTopUsers(response));
-          setKeySpendData(response);
+          ).then(async (response) => {
+            const topKeysResponse = await keyInfoCall(
+              accessToken,
+              getTopKeys(response)
+            );
+            const filtered_keys = topKeysResponse["info"].map((k: any) => ({
+              key: (k["key_name"] || k["key_alias"] || k["token"]).substring(
+                0,
+                7
+              ),
+              spend: k["spend"],
+            }));
+            setTopKeys(filtered_keys);
+            setTopUsers(getTopUsers(response));
+            setKeySpendData(response);
+          });
         } catch (error) {
           console.error("There was an error fetching the data", error);
           // Optionally, update your UI to reflect the error state here as well
@@ -185,11 +196,6 @@ const UsagePage: React.FC<UsagePageProps> = ({
     }
   }, [accessToken, token, userRole, userID, startTime, endTime]);
 
-  topUsers.forEach((obj) => {
-    Object.values(obj).forEach((value) => {
-      console.log(value);
-    });
-  });
   return (
     <div style={{ width: "100%" }}>
       <Grid numItems={2} className="gap-2 p-10 h-[75vh] w-full">
@@ -217,7 +223,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
               index="key"
               categories={["spend"]}
               colors={["blue"]}
-              yAxisWidth={200}
+              yAxisWidth={80}
               tickGap={5}
               layout="vertical"
               showXAxis={false}