From 6e3ec361ae54dea48b8cd048f883cd989a0d974e Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 2 Apr 2024 17:20:00 -0700
Subject: [PATCH 1/3] show all models in red on ui

---
 .../src/components/create_key_button.tsx      |  3 ++
 ui/litellm-dashboard/src/components/teams.tsx | 40 ++++++++++---------
 .../src/components/view_key_table.tsx         |  5 ++-
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index 99cbd7b6e6..2a3d816806 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -142,6 +142,9 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   placeholder="Select models"
                   style={{ width: "100%" }}
                 >
+                    <Option key="all-team-models" value="all-team-models">
+                      All Team Models
+                    </Option>
                   {team && team.models ? (
                     team.models.map((model: string) => (
                       <Option key={model} value={model}>
diff --git a/ui/litellm-dashboard/src/components/teams.tsx b/ui/litellm-dashboard/src/components/teams.tsx
index e90203764b..80172b8a02 100644
--- a/ui/litellm-dashboard/src/components/teams.tsx
+++ b/ui/litellm-dashboard/src/components/teams.tsx
@@ -116,16 +116,13 @@ const Team: React.FC<TeamProps> = ({
                 </Form.Item>
                 <Form.Item label="Models" name="models">
                   <Select2.Option key="all-proxy-models" value="all-proxy-models">
-                      All Models on Proxy
+                      All Proxy Models
                     </Select2.Option>
                   <Select2
                     mode="multiple"
                     placeholder="Select models"
                     style={{ width: "100%" }}
                   >
-                    <Select2.Option key="all-proxy-models" value="all-proxy-models">
-                      All Models on Proxy
-                    </Select2.Option>
                     {userModels && userModels.map((model) => (
                       <Select2.Option key={model} value={model}>
                         {model}
@@ -359,23 +356,30 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
                         <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                           {team["max_budget"] ? team["max_budget"] : "No limit"}
                         </TableCell>
-                          <TableCell style={{ maxWidth: "8-x", whiteSpace: "pre-wrap", overflow: "hidden" }}>
-                            {Array.isArray(team.models) ? (
-                              <div style={{ display: "flex", flexDirection: "column" }}>
-                                {team.models.length === 0 ? (
-                                  <Badge size={"xs"} className="mb-1" color="blue">
-                                    <Text>all-proxy-models</Text>
-                                  </Badge>
-                                ) : (
-                                  team.models.map((model: string, index: number) => (
+                        <TableCell style={{ maxWidth: "8-x", whiteSpace: "pre-wrap", overflow: "hidden" }}>
+                          {Array.isArray(team.models) ? (
+                            <div style={{ display: "flex", flexDirection: "column" }}>
+                              {team.models.length === 0 ? (
+                                <Badge size={"xs"} className="mb-1" color="red">
+                                  <Text>All Proxy Models</Text>
+                                </Badge>
+                              ) : (
+                                team.models.map((model: string, index: number) => (
+                                  model === "all-proxy-models" ? (
+                                    <Badge key={index} size={"xs"} className="mb-1" color="red">
+                                      <Text>All Proxy Models</Text>
+                                    </Badge>
+                                  ) : (
                                     <Badge key={index} size={"xs"} className="mb-1" color="blue">
                                       <Text>{model.length > 30 ? `${model.slice(0, 30)}...` : model}</Text>
                                     </Badge>
-                                  ))
-                                )}
-                              </div>
-                            ) : null}
+                                  )
+                                ))
+                              )}
+                            </div>
+                          ) : null}
                         </TableCell>
+
                         <TableCell style={{ maxWidth: "4px", whiteSpace: "pre-wrap", overflow: "hidden"  }}>
                           <Text>
                             TPM:{" "}
@@ -484,7 +488,7 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
                     style={{ width: "100%" }}
                   >
                     <Select2.Option key="all-proxy-models" value="all-proxy-models">
-                      All Models on Proxy
+                      All Proxy Models
                     </Select2.Option>
                     {userModels.map((model) => (
                       <Select2.Option key={model} value={model}>
diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx
index ffb61dfff6..e8ef675d0d 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -147,7 +147,10 @@ const ViewKeyTable: React.FC<ViewKeyTableProps> = ({
                   mode="multiple"
                   placeholder="Select models"
                   style={{ width: "100%" }}
-                >                
+                >
+                  <Option key="all-team-models" value="all-team-models">
+                    All Team Models
+                  </Option>                
                   {selectedTeam && selectedTeam.models ? (
                     selectedTeam.models.map((model: string) => (
                       <Option key={model} value={model}>

From df043eb1fbc760158c90449a10eb6f7e5657d049 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 2 Apr 2024 17:38:10 -0700
Subject: [PATCH 2/3] ui neatly show all proxy models

---
 .../src/components/create_key_button.tsx      | 37 ++++++++++++-------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/create_key_button.tsx b/ui/litellm-dashboard/src/components/create_key_button.tsx
index 2a3d816806..bd4fddabb3 100644
--- a/ui/litellm-dashboard/src/components/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/create_key_button.tsx
@@ -145,20 +145,29 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                     <Option key="all-team-models" value="all-team-models">
                       All Team Models
                     </Option>
-                  {team && team.models ? (
-                    team.models.map((model: string) => (
-                      <Option key={model} value={model}>
-                        {model}
-                      </Option>
-                    ))
-                  ) : (
-                    userModels.map((model: string) => (
-                      <Option key={model} value={model}>
-                        {model}
-                      </Option>
-                    ))
-                  )}
-
+                    {team && team.models ? (
+                      team.models.includes("all-proxy-models") ? (
+                        userModels.map((model: string) => (
+                          (
+                            <Option key={model} value={model}>
+                              {model}
+                            </Option>
+                          )
+                        ))
+                      ) : (
+                        team.models.map((model: string) => (
+                          <Option key={model} value={model}>
+                            {model}
+                          </Option>
+                        ))
+                      )
+                    ) : (
+                      userModels.map((model: string) => (
+                        <Option key={model} value={model}>
+                          {model}
+                        </Option>
+                      ))
+                    )}
 
                 </Select>
               </Form.Item>

From 1d2d38b580b5725a94aa65373cd3ef7eafd15c3e Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 2 Apr 2024 17:46:07 -0700
Subject: [PATCH 3/3] ui show all team models

---
 .../src/components/view_key_table.tsx         | 76 ++++++++++++-------
 1 file changed, 48 insertions(+), 28 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/view_key_table.tsx b/ui/litellm-dashboard/src/components/view_key_table.tsx
index e8ef675d0d..f500def6a4 100644
--- a/ui/litellm-dashboard/src/components/view_key_table.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_table.tsx
@@ -407,34 +407,54 @@ const handleEditSubmit = async (formValues: Record<string, any>) => {
                   
                 </TableCell> */}
 
-                <TableCell>
-                  {Array.isArray(item.models) ? (
-                    <div style={{ display: "flex", flexDirection: "column" }}>
-                      {item.models.length === 0 ? (
-                        <>
-                          {selectedTeam && selectedTeam.models && selectedTeam.models.length > 0 ? (
-                            selectedTeam.models.map((model: string, index: number) => (
-                              <Badge key={index} size={"xs"} className="mb-1" color="blue">
-                                <Text>{model.length > 30 ? `${model.slice(0, 30)}...` : model}</Text>
-                              </Badge>
-                            ))
-                          ) : (
-                            // If selected team is None or selected team's models are empty, show all models
-                            <Badge size={"xs"} className="mb-1" color="blue">
-                              <Text>all-proxy-models</Text>
-                            </Badge>
-                          )}
-                        </>
-                      ) : (
-                        item.models.map((model: string, index: number) => (
-                          <Badge key={index} size={"xs"} className="mb-1" color="blue">
-                            <Text>{model.length > 30 ? `${model.slice(0, 30)}...` : model}</Text>
-                          </Badge>
-                        ))
-                      )}
-                    </div>
-                  ) : null}
-                </TableCell>
+<TableCell>
+  {Array.isArray(item.models) ? (
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      {item.models.length === 0 ? (
+        <>
+          {selectedTeam && selectedTeam.models && selectedTeam.models.length > 0 ? (
+            selectedTeam.models.map((model: string, index: number) => (
+              model === "all-proxy-models" ? (
+                <Badge key={index} size={"xs"} className="mb-1" color="red">
+                  <Text>All Proxy Models</Text>
+                </Badge>
+              ) : model === "all-team-models" ? (
+                <Badge key={index} size={"xs"} className="mb-1" color="red">
+                  <Text>All Team Models</Text>
+                </Badge>
+              ) : (
+                <Badge key={index} size={"xs"} className="mb-1" color="blue">
+                  <Text>{model.length > 30 ? `${model.slice(0, 30)}...` : model}</Text>
+                </Badge>
+              )
+            ))
+          ) : (
+            // If selected team is None or selected team's models are empty, show all models
+            <Badge size={"xs"} className="mb-1" color="blue">
+              <Text>all-proxy-models</Text>
+            </Badge>
+          )}
+        </>
+      ) : (
+        item.models.map((model: string, index: number) => (
+          model === "all-proxy-models" ? (
+            <Badge key={index} size={"xs"} className="mb-1" color="red">
+              <Text>All Proxy Models</Text>
+            </Badge>
+          ) : model === "all-team-models" ? (
+            <Badge key={index} size={"xs"} className="mb-1" color="red">
+              <Text>All Team Models</Text>
+            </Badge>
+          ) : (
+            <Badge key={index} size={"xs"} className="mb-1" color="blue">
+              <Text>{model.length > 30 ? `${model.slice(0, 30)}...` : model}</Text>
+            </Badge>
+          )
+        ))
+      )}
+    </div>
+  ) : null}
+</TableCell>
 
                 <TableCell>
                   <Text>