ui - allow filtering by model group

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

@@ -3,7 +3,7 @@ import { BarChart, BarList, Card, Title, Table, TableHead, TableHeaderCell, Tabl
 import React, { useState, useEffect } from "react";
 
 import ViewUserSpend from "./view_user_spend";
-import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab } from "@tremor/react";
+import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab, Select, SelectItem } from "@tremor/react";
 import {
   userSpendLogsCall,
   keyInfoCall,
@@ -13,6 +13,8 @@ import {
   teamSpendLogsCall,
   tagsSpendLogsCall,
   modelMetricsCall,
+  modelAvailableCall,
+  modelInfoCall,
 } from "./networking";
 import { start } from "repl";
 
@@ -146,6 +148,8 @@ const UsagePage: React.FC<UsagePageProps> = ({
   const [totalSpendPerTeam, setTotalSpendPerTeam] = useState<any[]>([]);
   const [modelMetrics, setModelMetrics] = useState<any[]>([]);
   const [modelLatencyMetrics, setModelLatencyMetrics] = useState<any[]>([]);
+  const [modelGroups, setModelGroups] = useState<any[]>([]);
+  const [selectedModelGroup, setSelectedModelGroup] = useState<string | null>(null);
 
   const firstDay = new Date(
     currentDate.getFullYear(),
@@ -227,7 +231,25 @@ const UsagePage: React.FC<UsagePageProps> = ({
             const top_tags = await tagsSpendLogsCall(accessToken);
             setTopTagsData(top_tags.top_10_tags);
 
-            
+            // get model groups 
+            const _model_groups = await modelInfoCall(accessToken, userID, userRole);
+            let model_groups = _model_groups.data;
+            console.log("model groups in model dashboard", model_groups);
+
+            let available_model_groups = [];
+            // loop through each model in model_group, access litellm_params and only inlclude the model if model["litellm_params"]["model"] startswith "azure/"
+            for (let i = 0; i < model_groups.length; i++) {
+              let model = model_groups[i];
+              console.log("model check", model);
+              let model_group = model["litellm_params"]["model"];
+              console.log("model group", model_group);
+              if (model_group.startsWith("azure/")) {
+                available_model_groups.push(model["model_name"]);
+              }
+            }
+            setModelGroups(available_model_groups);
+
+
           } else if (userRole == "App Owner") {
             await userSpendLogsCall(
               accessToken,
@@ -268,7 +290,8 @@ const UsagePage: React.FC<UsagePageProps> = ({
           const modelMetricsResponse = await modelMetricsCall(
             accessToken,
             userID,
-            userRole
+            userRole,
+            null
           );
   
           console.log("Model metrics response:", modelMetricsResponse);
@@ -288,6 +311,31 @@ const UsagePage: React.FC<UsagePageProps> = ({
     }
   }, [accessToken, token, userRole, userID, startTime, endTime]);
 
+
+  const updateModelMetrics = async (modelGroup: string | null) => {
+    console.log("Updating model metrics for group:", modelGroup);
+    if (!accessToken || !userID || !userRole) {
+      return
+    }
+    setSelectedModelGroup(modelGroup);  // If you want to store the selected model group in state
+
+  
+    try {
+      const modelMetricsResponse = await modelMetricsCall(accessToken, userID, userRole, modelGroup);
+      console.log("Model metrics response:", modelMetricsResponse);
+  
+      // Assuming modelMetricsResponse now contains the metric data for the specified model group
+      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("Failed to fetch model metrics", error);
+    }
+  }
+  
+
   return (
     <div style={{ width: "100%" }} className="p-8">
       <ViewUserSpend
@@ -404,7 +452,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
             </TabPanel>
             <TabPanel>
             <Grid numItems={2} className="gap-2 h-[75vh] w-full mb-4">
-              <Col numColSpan={2}>
+            <Col numColSpan={2}>
 
               <Card>
               <Title>Spend Per Tag - Last 30 Days</Title>
@@ -445,6 +493,27 @@ const UsagePage: React.FC<UsagePageProps> = ({
             </TabPanel>
             
             <TabPanel>
+
+            <Select
+              className="mb-4 mt-2"
+              defaultValue="all"
+            >
+              <SelectItem 
+                  value={"all"}
+                  onClick={() => updateModelMetrics(null)}
+                >
+                  All Model Groups
+                </SelectItem>
+              {modelGroups.map((group, idx) => (
+                <SelectItem 
+                  key={idx} 
+                  value={group}
+                  onClick={() => updateModelMetrics(group)}
+                >
+                  {group}
+                </SelectItem>
+              ))}
+            </Select>
             <Card>
           <Title>Number Requests per Model</Title>
               <BarChart