Merge pull request #3104 from BerriAI/litellm_sort_latency_ui

UI - sort models by latency

litellm/proxy/proxy_server.py

@@ -7199,6 +7199,7 @@ async def model_info_v2(
     "/model/metrics",
     description="View number of requests & avg latency per model on config.yaml",
     tags=["model management"],
+    include_in_schema=False,
     dependencies=[Depends(user_api_key_auth)],
 )
 async def model_metrics(

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

@@ -15,7 +15,7 @@ import {
 } from "@tremor/react";
 import { TabPanel, TabPanels, TabGroup, TabList, Tab, TextInput, Icon } from "@tremor/react";
 import { Select, SelectItem, MultiSelect, MultiSelectItem } from "@tremor/react";
-import { modelInfoCall, userGetRequesedtModelsCall, modelMetricsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall } from "./networking";
+import { modelInfoCall, userGetRequesedtModelsCall, modelCreateCall, Model, modelCostMap, modelDeleteCall, healthCheckCall } from "./networking";
 import { BarChart } from "@tremor/react";
 import {
   Button as Button2,
@@ -78,7 +78,6 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
   userID,
 }) => {
   const [modelData, setModelData] = useState<any>({ data: [] });
-  const [modelMetrics, setModelMetrics] = useState<any[]>([]);
   const [pendingRequests, setPendingRequests] = useState<any[]>([]);
   const [form] = Form.useForm();
   const [modelMap, setModelMap] = useState<any>(null);
@@ -136,14 +135,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
         console.log("Model data response:", modelDataResponse.data);
         setModelData(modelDataResponse);
 
-        const modelMetricsResponse = await modelMetricsCall(
-          accessToken,
-          userID,
-          userRole
-        );
-
-        console.log("Model metrics response:", modelMetricsResponse);
-        setModelMetrics(modelMetricsResponse);
+       
 
         // if userRole is Admin, show the pending requests
         if (userRole === "Admin" && accessToken) {
@@ -484,30 +476,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
             </TableBody>
           </Table>
         </Card>
-        <Card>
-          <Title>Model Statistics (Number Requests)</Title>
-              <BarChart
-                data={modelMetrics}
-                index="model"
-                categories={["num_requests"]}
-                colors={["blue"]}
-                yAxisWidth={400}
-                layout="vertical"
-                tickGap={5}
-              />
-        </Card>
-        <Card>
-          <Title>Model Statistics (Latency)</Title>
-              <BarChart
-                data={modelMetrics}
-                index="model"
-                categories={["avg_latency_seconds"]}
-                colors={["red"]}
-                yAxisWidth={400}
-                layout="vertical"
-                tickGap={5}
-              />
-        </Card>
+
       </Grid>
       </TabPanel>
       <TabPanel className="h-full">

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

@@ -11,7 +11,8 @@ import {
   adminTopKeysCall,
   adminTopModelsCall,
   teamSpendLogsCall,
-  tagsSpendLogsCall
+  tagsSpendLogsCall,
+  modelMetricsCall,
 } from "./networking";
 import { start } from "repl";
 
@@ -143,6 +144,8 @@ const UsagePage: React.FC<UsagePageProps> = ({
   const [topTagsData, setTopTagsData] = useState<any[]>([]);
   const [uniqueTeamIds, setUniqueTeamIds] = useState<any[]>([]);
   const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
+  const [modelMetrics, setModelMetrics] = useState<any[]>([]);
+  const [modelLatencyMetrics, setModelLatencyMetrics] = useState<any[]>([]);
 
   const firstDay = new Date(
     currentDate.getFullYear(),
@@ -223,6 +226,8 @@ const UsagePage: React.FC<UsagePageProps> = ({
             //get top tags
             const top_tags = await tagsSpendLogsCall(accessToken);
             setTopTagsData(top_tags.top_10_tags);
+
+            
           } else if (userRole == "App Owner") {
             await userSpendLogsCall(
               accessToken,
@@ -259,6 +264,21 @@ const UsagePage: React.FC<UsagePageProps> = ({
               }
             });
           }
+
+          const modelMetricsResponse = await modelMetricsCall(
+            accessToken,
+            userID,
+            userRole
+          );
+  
+          console.log("Model metrics response:", modelMetricsResponse);
+          // Sort by latency (avg_latency_seconds)
+          const sortedByLatency = [...modelMetricsResponse].sort((a, b) => b.avg_latency_seconds - a.avg_latency_seconds);
+          console.log("Sorted by latency:", sortedByLatency);
+
+          setModelMetrics(modelMetricsResponse);
+          setModelLatencyMetrics(sortedByLatency);
+
         } catch (error) {
           console.error("There was an error fetching the data", error);
           // Optionally, update your UI to reflect the error state here as well
@@ -281,6 +301,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
           <Tab>All Up</Tab>
           <Tab>Team Based Usage</Tab>
            <Tab>Tag Based Usage</Tab>
+           <Tab>Model Based Usage</Tab>
         </TabList>
         <TabPanels>
           <TabPanel>
@@ -420,6 +441,36 @@ const UsagePage: React.FC<UsagePageProps> = ({
               </Col>
             </Grid>
             </TabPanel>
+            
+            <TabPanel>
+            <Card>
+          <Title>Number Requests per Model</Title>
+              <BarChart
+                data={modelMetrics}
+                className="h-[50vh]"
+                index="model"
+                categories={["num_requests"]}
+                colors={["blue"]}
+                yAxisWidth={400}
+                layout="vertical"
+                tickGap={5}
+              />
+        </Card>
+        <Card className="mt-4">
+          <Title>Latency Per Model</Title>
+              <BarChart
+                data={modelLatencyMetrics}
+                className="h-[50vh]"
+                index="model"
+                categories={["avg_latency_seconds"]}
+                colors={["red"]}
+                yAxisWidth={400}
+                layout="vertical"
+                tickGap={5}
+              />
+        </Card>
+
+            </TabPanel>
         </TabPanels>
       </TabGroup>
     </div>