From cc8282fe2920d343559e7c08c0092aad0b6e6c67 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 8 Aug 2024 17:47:59 -0700
Subject: [PATCH 1/2] ui show litellm model name

---
 .../src/components/model_dashboard.tsx        | 39 +++++++++++++++++++
 .../src/components/view_user_spend.tsx        |  3 +-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index f96916cfd4..aa745a3833 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -844,6 +844,7 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
     modelData.data[i].provider = provider;
     modelData.data[i].input_cost = input_cost;
     modelData.data[i].output_cost = output_cost;
+    modelData.data[i].litellm_model_name = litellm_model_name;
 
     // Convert Cost in terms of Cost per 1M tokens
     if (modelData.data[i].input_cost) {
@@ -1381,6 +1382,16 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                       >
                         Provider
                       </TableHeaderCell>
+                      <TableHeaderCell
+                        style={{
+                          maxWidth: "150px",
+                          whiteSpace: "normal",
+                          wordBreak: "break-word",
+                          fontSize: "11px",
+                        }}
+                      >
+                        LiteLLM Model
+                      </TableHeaderCell>
                       {userRole === "Admin" && (
                         <TableHeaderCell
                           style={{
@@ -1508,6 +1519,34 @@ const ModelDashboard: React.FC<ModelDashboardProps> = ({
                           >
                             <p className="text-xs">{model.provider || "-"}</p>
                           </TableCell>
+                          <TableCell
+                            style={{
+                              maxWidth: "100px",
+                              whiteSpace: "normal",
+                              wordBreak: "break-word",
+                            }}
+                          >
+                            <Tooltip title={model && model.litellm_model_name}>
+                                <pre
+                                  style={{
+                                    maxWidth: "150px",
+                                    whiteSpace: "normal",
+                                    wordBreak: "break-word",
+                                  }}
+                                  className="text-xs"
+                                  title={
+                                    model && model.litellm_model_name
+                                      ? model.litellm_model_name
+                                      : ""
+                                  }
+                                >
+                                  {model && model.litellm_model_name
+                                    ? model.litellm_model_name.slice(0, 20) + (model.litellm_model_name.length > 20 ? "..." : "")
+                                    : "-"}
+                                </pre>
+                              </Tooltip>
+                            
+                          </TableCell>
                           {userRole === "Admin" && (
                             <TableCell
                               style={{
diff --git a/ui/litellm-dashboard/src/components/view_user_spend.tsx b/ui/litellm-dashboard/src/components/view_user_spend.tsx
index 9fa0455b4a..48611849da 100644
--- a/ui/litellm-dashboard/src/components/view_user_spend.tsx
+++ b/ui/litellm-dashboard/src/components/view_user_spend.tsx
@@ -46,7 +46,8 @@ const ViewUserSpend: React.FC<ViewUserSpendProps> = ({ userID, userRole, accessT
     console.log(`userSpend: ${userSpend}`)
     let [spend, setSpend] = useState(userSpend !== null ? userSpend : 0.0);
     const [maxBudget, setMaxBudget] = useState(selectedTeam ? selectedTeam.max_budget : null);
-    console.log(`maxBudget: ${maxBudget}, selectedTeam.max_budget: ${selectedTeam.max_budget}, selectedTeam: ${JSON.stringify(selectedTeam)}`)
+    const team_budget = selectedTeam ? selectedTeam.max_budget : "unlimited";
+    console.log(`maxBudget: ${maxBudget}, selectedTeam.max_budget: ${team_budget}, selectedTeam: ${JSON.stringify(selectedTeam)}`)
     const [userModels, setUserModels] = useState([]);
     useEffect(() => {
       const fetchData = async () => {

From 2d4f48941e248a6b54f0b2a53370c32f21849b48 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 8 Aug 2024 17:53:32 -0700
Subject: [PATCH 2/2] add groq through admin ui

---
 ui/litellm-dashboard/src/components/model_dashboard.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/model_dashboard.tsx b/ui/litellm-dashboard/src/components/model_dashboard.tsx
index aa745a3833..3f76a88e2e 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard.tsx
@@ -143,7 +143,8 @@ enum Providers {
   Anthropic = "Anthropic",
   Google_AI_Studio = "Google AI Studio",
   Bedrock = "Amazon Bedrock",
-  OpenAI_Compatible = "OpenAI-Compatible Endpoints (Groq, Together AI, Mistral AI, etc.)",
+  Groq = "Groq",
+  OpenAI_Compatible = "OpenAI-Compatible Endpoints (Together AI, Mistral AI, etc.)",
   Vertex_AI = "Vertex AI (Anthropic, Gemini, etc.)",
   Databricks = "Databricks",
   Ollama = "Ollama",
@@ -156,6 +157,7 @@ const provider_map: Record<string, string> = {
   Anthropic: "anthropic",
   Google_AI_Studio: "gemini",
   Bedrock: "bedrock",
+  Groq: "groq",
   OpenAI_Compatible: "openai",
   Vertex_AI: "vertex_ai",
   Databricks: "databricks",